/* ================= 语音通话页 ================= */
/* 只服务于 templates/chat.html 里的 #callOverlay。背景纯黑（不是渐变），
   文字相应换成白色/浅色，是通话场景本身的惯例视觉——不跟随 style.css 的
   浅色 --bg-*/--text-* 变量，固定写死深色数值，不受系统浅色/深色主题切换
   影响。按钮改成深灰底白图标，挂断红底不变。 */

/* 顶部栏的电话图标按钮，跟 .chat-favorite 是同一个视觉规格 */
.chat-call{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:none;
    color:var(--text-1);
    flex-shrink:0;
    cursor:pointer;
    transition:background .2s ease,color .2s ease,transform .3s var(--spring);
}

.chat-call svg{
    width:18px;
    height:18px;
}

.chat-call:hover{
    background:var(--accent-tint);
    color:var(--accent-ink);
}

.chat-call:active{
    transform:scale(.9);
}

/* 覆盖层挂在 .app-shell 内部（position:absolute 而不是 fixed）——桌面端
   .app-shell 是居中的圆角卡片（见 style.css），通话页只盖住这张"卡片"，
   跟其它页面共享同一套"手机屏幕"视觉框架，不会整个浏览器视口变黑一块。 */
.call-overlay{
    position:absolute;
    inset:0;
    z-index:20;
    display:flex;
    flex-direction:column;
    align-items:center;
    background:#000000;
    animation:call-in .25s ease both;
}

/* author 样式的优先级本来就高于 UA 表默认的 [hidden]{display:none}——
   上面那条 .call-overlay{display:flex} 单靠类选择器会把 hidden 属性
   盖掉，导致通话页在挂断/还没打开时也铺满屏幕挡住点击。这里用
   [hidden] 属性选择器叠加到同一个类上把优先级提回来，hidden 属性在的
   时候必须真正 display:none。 */
.call-overlay[hidden]{
    display:none;
}

@keyframes call-in{
    from{opacity:0;transform:translateY(6px);}
    to{opacity:1;transform:translateY(0);}
}

@media (prefers-reduced-motion:reduce){
    .call-overlay{animation:none;}
}

.call-top{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:56px 24px 0;
}

/* 圆角方形而不是圆形，尺寸也放大不少，是这版参考图的头像规格 */
.call-avatar{
    width:172px;
    height:172px;
    border-radius:32px;
    object-fit:cover;
    box-shadow:0 10px 30px rgba(0,0,0,.5);
    border:3px solid rgba(255,255,255,.15);
    margin-top:8px;
}

.call-name{
    font-size:26px;
    font-weight:700;
    color:#ffffff;
    margin-top:6px;
}

.call-status-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}

/* 绿色小圆点：纯装饰性的"通话中"指示，不跟随 data-state 变化——
   状态文字本身（下面的 .call-status）已经区分了 listening/thinking/speaking。 */
.call-status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#30d158;
    box-shadow:0 0 6px rgba(48,209,88,.65);
    flex-shrink:0;
}

.call-status{
    font-size:15px;
    color:rgba(255,255,255,.92);
    min-height:1.4em;
}

/* 说话中：状态文字用强调色轻轻提示"现在是骁在说话"，跟 listening/thinking
   区分开，不用额外图形动画，保持克制——深色背景下用 --accent 本身（偏亮的
   玫瑰粉）而不是给浅色底调的 --accent-ink（太暗，在黑背景上几乎看不清）。 */
.call-overlay[data-state="speaking"] .call-status{
    color:var(--accent);
}

/* 计时器挪到状态文字下面一行，字调小、颜色调暗，不抢状态文字的注意力 */
.call-timer{
    font-size:11px;
    color:rgba(255,255,255,.4);
    font-variant-numeric:tabular-nums;
    letter-spacing:.02em;
    margin-top:2px;
}

.call-middle{
    flex:1;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:0 20px 20px;
    box-sizing:border-box;
}

/* 对话气泡：只显示最近一轮，靠 call.js 未来的逻辑往 #callBubbleAi/
   #callBubbleUser 里塞文字并摘掉 hidden——这里先只定视觉规格。 */
.call-bubbles{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.call-bubble{
    max-width:78%;
    padding:10px 14px;
    border-radius:16px;
    font-size:14.5px;
    line-height:1.4;
    word-break:break-word;
}

.call-bubble[hidden]{
    display:none;
}

/* 骁的回复：靠左，浅灰底 */
.call-bubble-ai{
    align-self:flex-start;
    background:#3a3a3c;
    color:#f5f5f7;
    border-bottom-left-radius:4px;
}

/* 用户消息：靠右，深色底 */
.call-bubble-user{
    align-self:flex-end;
    background:#1c1c1e;
    color:#f5f5f7;
    border:1px solid rgba(255,255,255,.08);
    border-bottom-right-radius:4px;
}

/* 底部按钮整体上移（把原本贴底的 44px 加到 100px），按钮本身放大约 1.3
   倍、间距也加宽——都是为了在手机上更好点，跟拇指操作区域更贴合，离屏幕
   最下缘远一点也不容易被系统手势条误触。 */
.call-bottom{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    padding:0 22px calc(env(safe-area-inset-bottom,0px) + 100px);
}

.call-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    border:none;
    background:none;
    color:#f5f5f7;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.call-btn-label{
    font-size:13px;
    color:rgba(255,255,255,.75);
}

.call-btn-secondary{
    width:86px;
}

.call-btn-secondary svg{
    width:34px;
    height:34px;
    padding:26px;
    box-sizing:content-box;
    border-radius:50%;
    /* 深灰圆底、白色图标——currentColor 跟着 .call-btn 的白色走，不用
       再单独设色，跟挂断按钮"红底白图标"是同一套视觉语言。 */
    background:#3a3a3c;
    box-shadow:0 6px 18px rgba(0,0,0,.35);
    transition:background .2s ease,transform .15s ease;
}

.call-btn-secondary:active svg{
    transform:scale(.92);
}

/* 静音/免提按下之后的"已激活"视觉——静音按下时其实就是"正在录音"那一刻
   （见 call.js，复用 chat.js 的 startRecording/stopRecording），免提是纯
   视觉占位（Web 端拿不到听筒/扬声器切换权限，做不了真实音频路由）。 */
.call-btn-secondary.is-active svg{
    background:var(--accent);
}

.call-btn-hangup svg{
    width:38px;
    height:38px;
    padding:29px;
    box-sizing:content-box;
    border-radius:50%;
    background:#ff4d4f;
    color:#fff;
    box-shadow:0 10px 24px -6px rgba(255,77,79,.55);
    transition:transform .15s ease;
}

.call-btn-hangup:active svg{
    transform:scale(.92);
}