/* 语音合成 — 1024×720 绝对定位（对齐设计稿切图间距） */

.view-tts {
  --tts-wave-color: #7ec8fb;
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  color: #ffffff;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  text-align: left;
}

/*
 * 竖向核算（相对 .app 顶边）：
 * 标题 top 48，高 51 → 底 99
 * 提示条 +17 → top 116，高 67 → 底 183
 * 主区 +14 → top 197，高 503 → 底 700
 */

/* ---------- 第一行：标题 176×51，top 48，水平居中 ---------- */
.tts-row--head {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 99px;
  box-sizing: border-box;
  pointer-events: none;
}

.tts-title-img {
  position: absolute;
  left: 50%;
  top: 48px;
  width: 176px;
  height: 51px;
  margin-left: -88px;
  display: block;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

.tts-reset-btn {
  position: absolute;
  right: 71px;
  top: 30px;
  width: 164px;
  height: 71px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: url("../img/classify-train/ui/jiqi-fenlei-reset.png") no-repeat center / 164px 71px;
  color: #ffffff;
  font-size: 30px;
  font-weight: 400;
  font-family: inherit;
  line-height: 71px;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}

.tts-reset-btn[hidden] {
  display: none !important;
}

.tts-reset-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tts-reset-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}

/* ---------- 第二行：与语音识别同规格 948×67，top 116 ---------- */
.tts-row--tip {
  position: absolute;
  left: 39px;
  top: 116px;
  width: 948px;
  height: 67px;
  margin: 0;
  box-sizing: border-box;
  background: url("../img/speech/jiqiai-yuyin-tishi.png") no-repeat center / 948px 67px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 24px 0 22px;
}

.tts-tip-icon {
  flex-shrink: 0;
  width: 23px;
  height: 31px;
  margin-right: 10px;
  background: url("../img/speech/jiqiai-yuyin-dengpao.png") no-repeat center / 23px 31px;
}

.tts-tip-text {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.35;
  color: #ffffff;
}

/* ---------- 第三行：top 197，左 648 + 间距 14 + 右 286 ---------- */
.tts-row--main {
  position: absolute;
  left: 39px;
  top: 197px;
  width: 948px;
  height: 503px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.tts-left-panel {
  flex: 0 0 648px;
  width: 648px;
  height: 503px;
  box-sizing: border-box;
  background: url("../img/tts/jiqiH5-yinyueHecheng-left.png") no-repeat center / 648px 503px;
  padding: 28px 32px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 200, 255, 0.75) rgba(12, 36, 78, 0.45);
}

.tts-left-panel::-webkit-scrollbar {
  width: 6px;
}

.tts-left-panel::-webkit-scrollbar-track {
  margin: 4px 0;
  background: rgba(8, 28, 64, 0.45);
  border-radius: 6px;
}

.tts-left-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(160, 220, 255, 0.92) 0%,
    rgba(90, 170, 255, 0.85) 100%
  );
  border-radius: 6px;
}

.tts-left-panel.is-message {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tts-transcript {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.55;
  color: #ffffff;
  white-space: pre-wrap;
  word-break: break-word;
}

.tts-transcript.is-message {
  width: 100%;
  text-align: center;
  color: #e6e6e6;
  line-height: 1.4;
}

/* ---------- 右侧板 286×503 ---------- */
.tts-right-panel {
  position: relative;
  flex: 0 0 286px;
  width: 286px;
  height: 503px;
  box-sizing: border-box;
  background: url("../img/tts/jiqiH5-yinyueHecheng-right.png") no-repeat center / 286px 503px;
}

/* 第一层：机器人 247×175，距顶 48px，水平居中；长按不切换 Lottie，音波叠在两侧 */
.tts-robot-stage {
  position: absolute;
  left: 19.5px;
  top: 48px;
  width: 247px;
  height: 175px;
  box-sizing: border-box;
  pointer-events: none;
}

.tts-robot-stage .tts-hold-btn {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
}

.tts-waveform {
  position: absolute;
  top: 0;
  width: 70px;
  height: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 2;
}

.tts-waveform--left {
  left: 0;
  transform: translateX(-8%);
}

.tts-waveform--right {
  right: 0;
  transform: translateX(8%);
}

.tts-waveform-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: 100%;
}

.tts-wave-bar {
  flex: 0 0 4px;
  width: 4px;
  min-height: 6px;
  height: 10px;
  border-radius: 2px;
  background: var(--tts-wave-color);
  box-shadow: 0 0 8px rgba(126, 200, 251, 0.45);
  transition: height 0.07s ease-out, opacity 0.15s ease;
}

.tts-robot-stage:not(.is-speaking) .tts-wave-bar {
  opacity: 0.42;
}

.tts-robot-stage.is-speaking .tts-wave-bar {
  opacity: 1;
}

.tts-hold-btn {
  width: 247px;
  height: 175px;
  padding: 0;
  margin: 0;
  border: none;
  background: url("../img/tts/jiqiH5-yinyueHecheng-mai.png") no-repeat center / 247px 175px;
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.tts-hold-btn:hover:not(.is-disabled) {
  filter: brightness(1.06);
}

.tts-hold-btn.is-recording {
  filter: brightness(1.08);
}

.tts-hold-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* 第二层：音色选择 24px，距机器人 30px */
.tts-voice-label {
  position: absolute;
  left: 27px;
  top: 253px;
  width: 233px;
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  text-align: left;
  pointer-events: none;
  user-select: none;
}

/* 第三层：下拉框 233×49，距标签 6px */
.tts-voice-select {
  position: absolute;
  left: 26.5px;
  top: 283px;
  width: 233px;
  height: 49px;
  z-index: 4;
}

.tts-voice-trigger {
  position: relative;
  width: 233px;
  height: 49px;
  padding: 0 46px 0 16px;
  margin: 0;
  border: none;
  box-sizing: border-box;
  background: url("../img/tts/jiqiH5-yinyueHecheng-xiala.png") no-repeat center / 233px 49px;
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

.tts-voice-trigger:hover:not(.is-disabled) {
  filter: brightness(1.05);
}

.tts-voice-trigger.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.tts-voice-current {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 24px;
  font-weight: 400;
  line-height: 49px;
  color: #ffffff;
  pointer-events: none;
  user-select: none;
}

.tts-voice-arrow {
  position: absolute;
  right: 11px;
  top: 50%;
  margin-top: -9px;
  width: 29px;
  height: 18px;
  display: block;
  object-fit: contain;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.tts-voice-select.is-open .tts-voice-arrow {
  transform: rotate(180deg);
}

.tts-voice-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  width: 233px;
  max-height: 161px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: rgba(6, 28, 72, 0.96);
  border: 1px solid rgba(120, 180, 255, 0.45);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 8;
}

.tts-voice-menu::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.tts-voice-menu[hidden] {
  display: none !important;
}

.tts-voice-option {
  display: block;
  width: 100%;
  padding: 10px 16px;
  margin: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 24px;
  line-height: 1.3;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.tts-voice-option:hover {
  background: rgba(0, 120, 220, 0.35);
}

.tts-voice-option.is-active {
  color: #7ec8fb;
}

/* 第四层：重新合成 233×233，距下拉框 24px */
.tts-resynth-btn {
  position: absolute;
  left: 26.5px;
  top: 356px;
  width: 233px;
  height: 90px;
  padding: 0;
  margin: 0;
  border: none;
  background: url("../img/tts/jiqiH5-yinyueHecheng-btn.png") no-repeat center / 233px 90px;
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

.tts-resynth-btn:hover:not(.is-disabled) {
  filter: brightness(1.06);
}

.tts-resynth-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.tts-resynth-label {
  position: absolute;
  left: 104px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.tts-unsupported {
  position: absolute;
  left: 39px;
  right: 37px;
  bottom: 12px;
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(80, 20, 20, 0.55);
  color: #ffb4b4;
  font-size: 14px;
  line-height: 1.5;
  z-index: 10;
}