/* ============================================================
   css/chat/chat-speak.css — 口语对话通话样式
   延续通话界面深调+呼吸光环，配色清新鼠尾草绿+雾紫
   底栏功能区：字幕/点击取词/录音按钮
   ============================================================ */

#speak-overlay {
    position: fixed; inset: 0; z-index: 1800;
    background: linear-gradient(165deg, #1a1a18 0%, #1c1b18 25%, #181c17 55%, #1a1a1f 100%);
    display: none; flex-direction: column; align-items: center; justify-content: center;
    font-family: var(--font-body);
}
#speak-overlay.active { display: flex; }

/* 背景装饰 — 柔和光斑 + 花卉意境 */
#speak-overlay::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(168,184,160,0.09) 0%, transparent 55%),
                radial-gradient(ellipse at 25% 65%, rgba(184,168,196,0.07) 0%, transparent 45%),
                radial-gradient(ellipse at 75% 55%, rgba(201,168,168,0.05) 0%, transparent 40%);
    pointer-events: none;
}

/* 顶部装饰线 */
#speak-overlay::after {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 60%; max-width: 200px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168,184,160,0.3), rgba(184,168,196,0.3), rgba(168,184,160,0.3), transparent);
    pointer-events: none;
}

/* ===== 顶部状态栏 ===== */
.speak-top-bar {
    position: absolute; top: 0; left: 0; right: 0; padding: calc(12px + var(--safe-top)) 16px;
    display: flex; align-items: center; justify-content: space-between;
    z-index: 10;
}
.speak-timer { font-size: 13px; color: rgba(255,255,255,0.5); font-family: var(--font-mono); letter-spacing: 0.04em; }
.speak-lang-badge {
    font-size: 10px; padding: 4px 10px; border-radius: 12px;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6);
    letter-spacing: 0.06em; text-transform: uppercase;
}
.speak-hangup-btn {
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: rgba(200,96,96,0.3); color: #e0a0a0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.speak-hangup-btn:hover { background: rgba(200,96,96,0.5); }
.speak-hangup-btn:active { transform: scale(0.9); }

/* ===== 呼吸光环（头像区）===== */
.speak-avatar-ring {
    position: relative; width: 80px; height: 80px; margin-bottom: 24px;
}
.speak-avatar-ring::before, .speak-avatar-ring::after {
    content: ''; position: absolute; inset: -8px; border-radius: 50%;
    border: 1.5px solid rgba(168,184,160,0.3);
    animation: speakBreath 3s ease-in-out infinite;
}
.speak-avatar-ring::after { inset: -16px; border-color: rgba(184,168,196,0.2); animation-delay: -1.5s; }
@keyframes speakBreath {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.08); opacity: 0.7; }
}
.speak-avatar-ring img {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
.speak-avatar-placeholder {
    width: 100%; height: 100%; border-radius: 50%;
    background: linear-gradient(135deg, rgba(168,184,160,0.3), rgba(184,168,196,0.3));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 24px; color: rgba(255,255,255,0.6);
}

/* ===== 字幕区 ===== */
.speak-subtitle-area {
    width: 100%; max-width: 360px; padding: 0 20px; text-align: center; min-height: 80px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.speak-subtitle-foreign {
    font-size: 18px; color: rgba(255,255,255,0.9); line-height: 1.6;
    transition: opacity 0.3s ease;
}
.speak-subtitle-foreign .speak-word {
    display: inline; cursor: pointer; padding: 1px 2px; border-radius: 3px;
    transition: background 0.12s;
}
.speak-subtitle-foreign .speak-word:hover { background: rgba(168,184,160,0.25); }
.speak-subtitle-foreign .speak-word.captured { background: rgba(168,184,160,0.15); text-decoration: underline; text-decoration-color: var(--sage, #A8B8A0); }
.speak-subtitle-zh {
    font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 6px;
    line-height: 1.5;
}

/* ===== 取词弹窗 ===== */
.speak-capture-toast {
    position: fixed; bottom: 120px; left: 50%; transform: translateX(-50%);
    background: rgba(30,28,26,0.92); backdrop-filter: blur(12px);
    color: #fff; padding: 12px 20px; border-radius: 20px; font-size: 13px;
    z-index: 1900; white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    animation: speakToastIn 0.3s ease;
}
@keyframes speakToastIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ===== 用户语音指示 ===== */
.speak-listening {
    font-size: 11px; color: rgba(168,184,160,0.6); margin-top: 8px;
    letter-spacing: 0.06em; animation: speakPulse 1.5s ease-in-out infinite;
}
@keyframes speakPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* ===== 底栏按钮 ===== */
.speak-bottom-bar {
    position: absolute; bottom: max(24px, env(safe-area-inset-bottom, 24px));
    left: 0; right: 0; display: flex; align-items: center; justify-content: center;
    gap: 20px; padding: 16px; z-index: 10;
}
.speak-action-btn {
    width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.6);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.speak-action-btn:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }
.speak-action-btn.active { background: rgba(200,96,96,0.2); border-color: rgba(200,96,96,0.4); color: #e0a0a0; }
.speak-action-btn:active { transform: scale(0.92); }

/* 录音按钮（居中大按钮）*/
.speak-mic-btn {
    width: 64px; height: 64px; border-radius: 50%; border: none;
    background: linear-gradient(135deg, var(--sage, #A8B8A0), #8a9a82);
    color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(168,184,160,0.3);
    transition: all 0.15s;
}
.speak-mic-btn:hover { box-shadow: 0 4px 28px rgba(168,184,160,0.45); }
.speak-mic-btn:active { transform: scale(0.93); }
.speak-mic-btn.recording {
    background: linear-gradient(135deg, #c06060, #a04040);
    box-shadow: 0 4px 24px rgba(200,96,96,0.4);
    animation: speakMicPulse 1.5s ease-in-out infinite;
}
@keyframes speakMicPulse {
    0%, 100% { box-shadow: 0 4px 24px rgba(200,96,96,0.4); }
    50% { box-shadow: 0 4px 36px rgba(200,96,96,0.6); }
}

/* ===== 暗色模式 ===== */
/* speak-overlay 本身就是暗调的，不随系统暗色模式改变 */