/* ============================================================
   css/chat/chat-voice.css — 语音消息：录音浮层 v2 / 语音气泡
   ============================================================ */

/* ===== 语音按钮 ===== */
#voice-btn {
  touch-action: none;
  transition: transform 0.15s ease;
  /* 禁长按弹浏览器默认菜单（"下载/打印"等）：iOS 靠 touch-callout，安卓靠下方 JS contextmenu 拦截 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* 短按抖动动画 */
#voice-btn.voice-tap-shake {
    animation: voiceShake 0.35s ease;
}
@keyframes voiceShake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-4px); }
    30% { transform: translateX(4px); }
    45% { transform: translateX(-3px); }
    60% { transform: translateX(3px); }
    75% { transform: translateX(-1px); }
    90% { transform: translateX(1px); }
}
/* 录制中状态 */
#voice-btn.recording svg { color: var(--danger, #C97A7A); }

/* ===== 录音浮层 v2 ===== */
#voice-record-overlay {
    position: fixed; inset: 0; z-index: 3000;
    display: none; flex-direction: column; align-items: center; justify-content: flex-end;
    background: rgba(30, 28, 26, 0.45);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* 顶部三区指示 */
.vr-top-zones {
    flex: 1; width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 60px 24px 0;
}
.vr-zone {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    font-size: 11px; color: rgba(252, 250, 246, 0.45); opacity: 0;
    transition: opacity 0.2s, color 0.2s; pointer-events: none;
    min-width: 56px;
}
.vr-zone svg { width: 22px; height: 22px; opacity: 0.6; }
.vr-zone.active { opacity: 1; }
.vr-zone.active svg { opacity: 1; }
.vr-zone-cancel.active { color: rgba(232, 168, 168, 0.95); }
.vr-zone-transcribe.active { color: rgba(181, 196, 168, 0.95); }
.vr-zone-send { min-width: 0; } /* 中间占位 */

/* 底部面板 */
.vr-panel {
    width: 100%; padding: 26px 20px calc(34px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    background: linear-gradient(180deg, rgba(252, 250, 246, 0.92), rgba(248, 244, 239, 0.97));
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 32px rgba(30, 28, 26, 0.18);
    transition: background 0.25s;
}
/* 取消区激活 —— 微红底色 */
#voice-record-overlay.vr-cancel-mode .vr-panel {
    background: linear-gradient(180deg, rgba(232, 168, 168, 0.25), rgba(248, 244, 239, 0.97));
}
/* 转文字区激活 —— 微绿底色 */
#voice-record-overlay.vr-transcribe-mode .vr-panel {
    background: linear-gradient(180deg, rgba(181, 196, 168, 0.22), rgba(248, 244, 239, 0.97));
}

.vr-mic-pulse {
    width: 58px; height: 58px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #FCFAF6;
    background: var(--rose-dark, #A88080);
    box-shadow: 0 0 0 0 rgba(201, 168, 168, 0.5);
    animation: vrPulse 1.6s ease-out infinite;
}
@keyframes vrPulse {
    0% { box-shadow: 0 0 0 0 rgba(201, 168, 168, 0.5); }
    70% { box-shadow: 0 0 0 18px rgba(201, 168, 168, 0); }
    100% { box-shadow: 0 0 0 0 rgba(201, 168, 168, 0); }
}
#vr-timer {
    font-size: 22px; font-weight: 600; letter-spacing: 1px;
    color: var(--text-primary, #1E1C1A);
    font-variant-numeric: tabular-nums;
}
.vr-en-hint {
    font-family: 'Playfair Display', serif; font-style: italic;
    font-size: 11px; color: var(--gold, #C4A86A); opacity: 0.65; letter-spacing: 0.5px;
}
#vr-hint { font-size: 12px; color: var(--text-secondary, #8A8278); }
#voice-record-overlay.vr-cancel-mode #vr-hint { color: #B06A6A; font-weight: 600; }
#voice-record-overlay.vr-transcribe-mode #vr-hint { color: #7A9A6A; font-weight: 600; }

/* ===== 转文字编辑面板 ===== */
.vr-transcribe-panel {
    width: 100%; max-width: 480px; margin: 0 auto;
    /* ★ --kbd-h：键盘弹出时把编辑区垫在键盘上方（弹层输入模式，聊天输入栏不抬） */
    padding: 20px 16px calc(34px + env(safe-area-inset-bottom, 0px) + var(--kbd-h, 0px));
    background: #FCFAF6; border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 32px rgba(30, 28, 26, 0.2);
    display: flex; flex-direction: column; gap: 12px;
}
.vtp-header {
    display: flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 600; color: var(--text-primary);
    font-family: var(--font-body);
}
.vtp-header svg { color: var(--gold, #C4A86A); flex-shrink: 0; }
.vtp-lang {
    margin-left: auto; font-size: 10px; font-weight: 400;
    color: var(--text-muted); background: rgba(240, 234, 224, 0.7);
    padding: 1px 7px; border-radius: 8px; letter-spacing: 0.3px;
}
/* 转写加载态：流动光线 */
.vtp-loading {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 32px 20px 20px;
}
.vtp-loading-bar {
    width: 100%; max-width: 200px; height: 3px;
    background: rgba(196, 168, 106, 0.12);
    border-radius: 2px; overflow: hidden; position: relative;
}
.vtp-loading-shine {
    position: absolute; left: -60px; top: 0; width: 60px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(196, 168, 106, 0.7), transparent);
    border-radius: 2px;
    animation: vtpShine 1.4s ease-in-out infinite;
}
@keyframes vtpShine {
    0% { left: -60px; }
    100% { left: 100%; }
}
.vtp-loading-text {
    font-size: 13px; color: var(--text-muted);
    font-family: var(--font-body); letter-spacing: 0.5px;
}
/* 转写失败：光线变红 */
.vtp-loading-error .vtp-loading-shine {
    background: linear-gradient(90deg, transparent, rgba(201, 122, 122, 0.65), transparent);
    animation-duration: 0.6s;
}
.vtp-loading-error .vtp-loading-text {
    color: #B06A6A;
}

/* 编辑器转写完成微光 */
.vtp-editor-wrap { position: relative; }
.vtp-editor.vtp-editor-ready {
    border-color: var(--gold, #C4A86A);
    box-shadow: 0 0 0 3px rgba(196, 168, 106, 0.18);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.vtp-editor {
    width: 100%; min-height: 110px; max-height: 200px;
    padding: 14px; font-size: 15px; line-height: 1.6;
    border: 1px solid rgba(180, 170, 155, 0.3);
    border-radius: 14px; resize: vertical;
    background: var(--bg-card, #F8F4EF);
    color: var(--text-primary);
    font-family: var(--font-body);
    outline: none; box-sizing: border-box;
}
.vtp-editor:focus {
    border-color: var(--gold, #C4A86A);
    box-shadow: 0 0 0 3px rgba(196, 168, 106, 0.1);
}
.vtp-editor::placeholder { color: var(--text-muted); font-style: italic; }
.vtp-actions { display: flex; gap: 10px; }
.vtp-btn {
    flex: 1; padding: 12px; border-radius: 14px; border: none;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: all 0.15s; font-family: var(--font-body);
}
.vtp-btn-cancel {
    background: var(--bg-card, #F8F4EF); color: var(--text-secondary);
    border: 1px solid rgba(180, 170, 155, 0.35);
}
.vtp-btn-send {
    background: var(--rose-dark, #A88080);
    color: #FCFAF6;
}
.vtp-btn:active { transform: scale(0.97); }
.vtp-btn-send:disabled { opacity: 0.35; cursor: default; transform: none; }

/* ===== 语音气泡 ===== */
.voice-msg {
    display: inline-flex; align-items: center; gap: 8px;
    min-width: 88px; padding: 2px 0;
    cursor: pointer; user-select: none; -webkit-user-select: none;
}
.voice-msg.voice-pending { opacity: 0.55; cursor: default; }
/* 确保音频图标内的 SVG 不会拦截点击 → 全部穿透到 .voice-msg */
.voice-play-icon svg,
.voice-play-icon svg *,
.voice-wave i { pointer-events: none; }
.voice-play-icon {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.2px solid currentColor; opacity: 0.85;
}
.voice-play-icon .vp-pause { display: none; }
.voice-playing .voice-play-icon .vp-play { display: none; }
.voice-playing .voice-play-icon .vp-pause { display: block; }
.voice-wave { display: inline-flex; align-items: center; gap: 2.5px; height: 18px; }
.voice-wave i {
    width: 2.5px; border-radius: 2px; background: currentColor; opacity: 0.7;
    height: 6px;
}
.voice-wave i:nth-child(2) { height: 12px; }
.voice-wave i:nth-child(3) { height: 8px; }
.voice-wave i:nth-child(4) { height: 16px; }
.voice-wave i:nth-child(5) { height: 9px; }
.voice-wave i:nth-child(6) { height: 13px; }
.voice-wave i:nth-child(7) { height: 7px; }
.voice-playing .voice-wave i { animation: voiceWave 0.9s ease-in-out infinite; }
.voice-playing .voice-wave i:nth-child(2) { animation-delay: 0.1s; }
.voice-playing .voice-wave i:nth-child(3) { animation-delay: 0.2s; }
.voice-playing .voice-wave i:nth-child(4) { animation-delay: 0.3s; }
.voice-playing .voice-wave i:nth-child(5) { animation-delay: 0.4s; }
.voice-playing .voice-wave i:nth-child(6) { animation-delay: 0.5s; }
.voice-playing .voice-wave i:nth-child(7) { animation-delay: 0.6s; }
@keyframes voiceWave {
    0%, 100% { transform: scaleY(0.6); }
    50% { transform: scaleY(1.25); }
}
.voice-duration { font-size: 12px; opacity: 0.75; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* AI 语音泡下方自动展开的中文原文 */
.voice-transcript-zh {
    margin-top: 7px; padding-top: 7px;
    border-top: 1px dashed rgba(196, 168, 106, 0.35);
    font-size: 13px; line-height: 1.55;
    color: var(--text-secondary, #6a635b);
}

/* ★ 2028-09「翻译/原文双显示」：外语原文一行在上（衬线花字、略小、略淡），中文一行在下（主角）。
   两行都不会横向溢出：长句按词换行、长单词断行（窄屏 360 也不撑破气泡）。
   ★★ 2028-09-17 二次实锤（甲方：「外语就是没有空格，你自己看图」）：
   **量过了 —— 空格真的在**（真 CSS + 真浏览器逐字符量：10 个空格各 5.31px，唯一的 0 宽是换行处）。
   那份截图里英文粘成一串，是**存下来的原文本身就没空格**（跟线上那 303 条「예쁘다 / 좋아」同一种），
   ⚠ 别再去动 CSS 的 white-space/word-break —— 那条路量过，不是它（方向一错就是白改一轮）。
   真要收拾：「转写出来的外语原文缺空格」得在写入关口补（见 changelog 遗留），不是显示层能修的。
   ★ 同一轮另一条（「英文字怎么不是花字了」）根因就在下面这行 font-family：上一版把 'Inter' 排在第一位，
   把原来的 Playfair 花字挤掉了。花字是设计规范（CLAUDE.md 设计规范：英文装饰用 Playfair Display Italic），
   所以第一位必须是 Playfair，韩文/中文各自有字形回退（Playfair 没有汉字字形，会自动落到后面的库里）。 */
.voice-transcript-foreign {
    margin-top: 7px; padding-top: 7px;
    border-top: 1px dashed rgba(196, 168, 106, 0.35);
    font-size: 12px; line-height: 1.5;
    color: var(--text-muted);
    font-style: italic;
    font-family: 'Playfair Display', 'Cormorant Garamond', 'Noto Serif SC', 'Noto Sans KR',
        'Apple SD Gothic Neo', 'Malgun Gothic', 'PingFang SC', 'Microsoft YaHei', Georgia, serif;
    letter-spacing: 0.01em;
    word-spacing: 0.06em;
    word-break: break-word; overflow-wrap: anywhere;
}
/* 双显示时：分隔线只留第一条，中文紧贴原文下面 */
.voice-transcript-foreign + .voice-transcript-zh {
    margin-top: 3px; padding-top: 0;
    border-top: none;
    word-break: break-word; overflow-wrap: anywhere;
}

/* 用户语音泡下方转写文字 */
.voice-transcript-self {
    margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed rgba(180, 170, 155, 0.25);
    font-size: 12.5px; line-height: 1.5;
    color: var(--text-secondary, #8A8278);
    font-style: italic;
}
.voice-transcript-pending {
    color: var(--text-muted); font-style: italic; opacity: 0.7;
}
.voice-transcript-failed {
    color: var(--text-muted); font-style: italic; opacity: 0.5;
}

/* ===== 语音没合成出来（降级成文字）时的一行小字 + 重新生成（2028-09）=====
   口径：绝不弹系统框、绝不用 emoji；克制的一行提示，点「重新生成」就地重试。 */
.voice-fallback-note {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-top: 7px; padding-top: 7px;
    border-top: 1px dashed rgba(196, 168, 106, 0.35);
    font-size: 11.5px; line-height: 1.5;
    color: var(--text-muted);
}
.voice-fallback-note .vfn-txt { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.voice-fallback-note .vfn-retry {
    flex: 0 0 auto;
    border: 1px solid rgba(196, 168, 106, 0.45);
    background: transparent; color: var(--text-secondary, #6a635b);
    font-family: inherit; font-size: 11.5px; line-height: 1;
    padding: 5px 9px; border-radius: 999px; cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.18s ease, color 0.22s ease;
}
.voice-fallback-note .vfn-retry:active { transform: scale(0.96); }
.voice-fallback-note .vfn-retry:hover { background: rgba(196, 168, 106, 0.12); border-color: rgba(196, 168, 106, 0.7); }
.voice-fallback-note .vfn-retry:disabled { opacity: 0.55; cursor: default; }

/* ===== 语音转文字弹窗（长按/右键） ===== */
.voice-transcript-popup {
    position: fixed; z-index: 4000;
    background: rgba(252, 250, 246, 0.97);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(30, 28, 26, 0.18),
                0 0 0 0.5px rgba(196, 168, 106, 0.15);
    padding: 14px 16px; max-width: 280px; min-width: 170px;
    opacity: 0; transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: auto;
}
.voice-transcript-popup.show { opacity: 1; transform: translateY(0); }
.vtpop-header {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--text-muted); margin-bottom: 8px;
}
.vtpop-header svg { color: var(--gold, #C4A86A); }
.vtpop-lang {
    margin-left: auto; font-size: 10px;
    background: rgba(240, 234, 224, 0.7); color: var(--text-secondary);
    padding: 1px 6px; border-radius: 6px; letter-spacing: 0.2px;
}
.vtpop-body {
    font-size: 14px; line-height: 1.6; color: var(--text-primary);
    font-family: var(--font-body);
}
.vtpop-empty { color: var(--text-muted); font-style: italic; font-size: 13px; }
.vtpop-tone {
    margin-top: 6px; font-size: 12px; color: var(--text-secondary);
    border-top: 1px dashed rgba(196, 168, 106, 0.25);
    padding-top: 6px;
}

/* 收藏夹语音卡 */
.fav-voice-card {
    display: flex; flex-direction: column; gap: 6px;
}
.fav-voice-card .voice-msg { color: var(--rose, #C9A8A8); }
.fav-voice-transcript { font-size: 12.5px; color: var(--text-secondary, #8A8278); line-height: 1.5; }