/* 通话页。墨黑底 + 青绿点缀（Tomoshibi 实时翻译那一套的颜色）。
   按钮和字都往大了做：中国那边是长辈拿手机用。 */
:root{
  --ink:#0B0B0C; --panel:#17181B; --line:#2A2C31; --fg:#F4F3EF; --dim:#A3A29C;
  --teal:#4FD1C5; --red:#F0554A; --warn:#F2B84B;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--ink);color:var(--fg);overflow:hidden;overscroll-behavior:none;
  font:18px/1.6 -apple-system,"PingFang SC","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif}
[hidden]{display:none!important}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}
.screen{position:fixed;inset:0;display:flex}

/* ── 语言切换（右上角）── */
.lang{position:fixed;z-index:7;top:calc(10px + var(--sat));right:12px;display:flex;padding:3px;border-radius:999px;
  background:rgba(23,24,27,.82);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.lang button{padding:5px 11px;border-radius:999px;font-size:14px;line-height:1.3;color:var(--dim);white-space:nowrap}
.lang button.on{background:var(--teal);color:#06211E;font-weight:700}
#stage .lang{position:absolute}

/* ── 进门前 / 结束后 ── */
#gate,#end,#home{align-items:center;justify-content:center;padding:calc(24px + var(--sat)) 28px calc(28px + var(--sab));
  background:radial-gradient(120% 70% at 50% 0%,#15201F 0%,var(--ink) 62%)}
.gate-in{width:100%;max-width:420px;text-align:center}
.logo{border-radius:18px;margin-bottom:22px}
h1{font-size:30px;line-height:1.3;margin:0 0 10px;font-weight:600;letter-spacing:.02em}
.lede{margin:0 0 6px;color:var(--dim);font-size:18px}
.peer-here{display:inline-block;margin:14px 0 0;padding:6px 16px;border-radius:999px;background:rgba(79,209,197,.14);color:var(--teal);font-size:17px}
/* 我说哪种语言（块 通话21）：一行不换行，窄屏收小 */
.speak{display:flex;align-items:center;justify-content:center;gap:8px;margin:24px 0 0;flex-wrap:nowrap}
.speak span{flex:0 1 auto;min-width:0;color:var(--dim);font-size:16px;white-space:nowrap}
.speak button{flex:0 0 auto;padding:8px 16px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:17px;line-height:1.3;white-space:nowrap}
.speak button.on{background:var(--teal);border-color:var(--teal);color:#06211E;font-weight:700}
.speak button:active{opacity:.7}
.speak-note{margin:10px 0 0;color:var(--warn);font-size:15px;line-height:1.5}
@media (max-width:350px){.speak{gap:6px}.speak span{font-size:14px}.speak button{padding:7px 12px;font-size:15.5px}}
.primary{display:block;width:100%;margin:30px 0 16px;padding:22px 16px;border-radius:20px;background:var(--teal);color:#06211E;font-size:26px;font-weight:700;letter-spacing:.04em;
  box-shadow:0 10px 30px rgba(79,209,197,.22);transition:transform .12s,opacity .2s}
.primary:active{transform:scale(.98)}
.primary:disabled{opacity:.4;box-shadow:none}
.hint{margin:0;color:var(--dim);font-size:15.5px}
.err{margin:18px 0 0;padding:14px 16px;border-radius:14px;background:rgba(240,85,74,.12);color:#FFB4AC;font-size:17px;text-align:left}

/* ── 通话中：上画面、中字幕、下按钮 ── */
#call{background:#000;flex-direction:column}
#stage{position:relative;flex:1 1 0;min-height:30%;overflow:hidden;background:#000}
#remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
#remote.fit{object-fit:contain}
/* itsuki 开麦说话（块 通话19）：竖着的画面上下分两半，扁的画面左右分两半 */
#monBox{position:absolute;left:0;right:0;bottom:0;height:50%;background:#111;border-top:2px solid #000}
#monBox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111}
#monBox video.fit{object-fit:contain}
#monBox.nocam video{visibility:hidden}
#monName{position:absolute;left:12px;bottom:10px;font-size:15px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.6)}
#monBox.nocam #monName{left:0;right:0;bottom:auto;top:50%;transform:translateY(-50%);text-align:center;font-size:20px;color:var(--dim)}
#stage.trio #remote,#stage.trio #veil{height:50%;bottom:auto}
#stage.trio.side #remote,#stage.trio.side #veil{height:100%;width:50%;right:auto}
#stage.trio.side #monBox{left:50%;top:0;height:100%;border-top:0;border-left:2px solid #000}
.ghostBtn{position:absolute;left:12px;bottom:12px;z-index:4;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.22);opacity:.75;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ghostBtn svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round}
.ghostBtn:active{opacity:1}
#veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 32px;text-align:center;
  background:rgba(11,11,12,.92);transition:opacity .35s}
#veil.off{opacity:0;pointer-events:none}
#vText{margin:0;font-size:24px;font-weight:600}
#vSub{margin:8px 0 0;color:var(--dim);font-size:16px}
.dots{display:flex;gap:10px;justify-content:center;margin-bottom:18px}
.dots i{width:11px;height:11px;border-radius:50%;background:var(--teal);animation:dot 1.2s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.18s}.dots i:nth-child(3){animation-delay:.36s}
.dots.still i{animation:none;opacity:.35}
@keyframes dot{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.dots i{animation:none}}

/* 左上角的状态只留字，不占底色（字带阴影，亮画面上也看得清） */
#pill{position:absolute;left:12px;top:calc(10px + var(--sat));display:flex;align-items:center;gap:8px;padding:6px 4px;
  font-size:14.5px;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.6)}
#watch{position:absolute;left:12px;top:calc(38px + var(--sat));display:flex;align-items:center;gap:7px;padding:2px 4px;max-width:calc(100% - 140px);
  font-size:14px;color:var(--fg);text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.6);pointer-events:none}
#watch svg{flex:0 0 auto;width:17px;height:17px;fill:none;stroke:var(--warn);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.led{width:9px;height:9px;border-radius:50%;background:var(--dim);box-shadow:0 0 4px rgba(0,0,0,.8)}
#pill.live .led{background:var(--teal)}
#pill.warn .led{background:var(--warn);animation:dot 1.2s infinite}

#self{position:absolute;right:12px;top:calc(54px + var(--sat));width:88px;height:118px;object-fit:cover;border-radius:14px;background:var(--panel);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.45)}
#self{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
#self.drag{cursor:grabbing;opacity:.85;box-shadow:0 12px 30px rgba(0,0,0,.6)}
#self.mirror{transform:scaleX(-1)}
#self.off{opacity:.25}

/* 字幕区：上面那排按钮浮在字幕上、不占一条底色，只有按钮本身不透明；打字框平时收着 */
#subs{--fs:23px;position:relative;flex:0 0 50%;display:flex;flex-direction:column;min-height:0;background:var(--ink);border-top:1px solid var(--line)}
#subsHead{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:14px;color:var(--fg);
  pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.9)}
#subsHead > *{pointer-events:auto}
#subsHead .grow{flex:1;pointer-events:none}
#subsHead{gap:6px}
#subsHead .chip{flex:0 0 auto;white-space:nowrap;padding:5px 9px}
#subsHead .chip.fs{min-width:38px}
#sStatus{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sStatus.bad{color:var(--warn)}
#ctlToast{position:absolute;left:50%;top:calc(76px + var(--sat));transform:translateX(-50%);z-index:6;max-width:calc(100% - 32px);padding:9px 16px;border-radius:14px;
  background:rgba(58,46,18,.94);color:#FFD88A;font-size:16px;line-height:1.45;text-align:center;box-shadow:0 4px 18px rgba(0,0,0,.45);pointer-events:none}
#capNote{margin:44px 0 0;padding:9px 14px;background:#3A2E12;color:#FFD88A;font-size:15.5px;line-height:1.5;border-bottom:1px solid #6B5520}
.hint.cost{margin:10px 0 0;font-variant-numeric:tabular-nums}
#sRec{display:inline-flex;align-items:center;gap:6px;color:#FFB4AC;white-space:nowrap}
#sRec i{width:8px;height:8px;border-radius:50%;background:var(--red);animation:dot 1.6s infinite}
.chip{padding:5px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--fg);font-size:14px;line-height:1.4;text-shadow:none}
.chip.fs{min-width:46px;font-weight:600}
.chip.fs.big{font-size:17px}
.chip.solid{background:var(--teal);border-color:var(--teal);color:#06211E;font-weight:700}
.chip:active{opacity:.7}
#log{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:46px 12px 58px;display:flex;flex-direction:column;gap:10px}
#capNote:not([hidden]) + #log{padding-top:12px}
/* 「识别：只认…」那个钮有长短两套字（块 通话22）；手机宽度 / 横屏窄栏下换成短的，并把那一排分成两行：
   第一行 状态 + 录音点 + A−A＋，第二行 朗读 / 识别 / 名字·术语，免得溢出 */
#strictBtn .sh{display:none}
@media (max-width:480px), (orientation:landscape) and (max-height:560px){
  #strictBtn .lg{display:none}#strictBtn .sh{display:inline}
  #subsHead{flex-wrap:wrap;gap:4px 6px}
  #subsHead .grow{display:none}
  #sStatus{order:0}#sRec{order:1}
  #fsDown{order:2;margin-left:auto}#fsUp{order:2}
  #subsHead::after{content:"";order:3;flex:0 0 100%;height:0}
  #ttsBtn,#strictBtn,#sTerms{order:4}
  #capNote{margin-top:82px}
  #log{padding-top:86px}
}
#logEmpty{margin:auto;color:var(--dim);font-size:16px;text-align:center;padding:0 20px}
.u{max-width:88%;padding:9px 14px 10px;border-radius:18px;background:var(--panel);align-self:flex-start;border-bottom-left-radius:6px;overflow-wrap:anywhere}
.u.mine{align-self:flex-end;background:#12302D;border-bottom-left-radius:18px;border-bottom-right-radius:6px}
.u .big{font-size:var(--fs);line-height:1.42;font-weight:500}
.u .small{margin-top:3px;font-size:calc(var(--fs) * .62);line-height:1.45;color:var(--dim)}
.u .small:empty{display:none}
.u.pend .big{color:#D6D4CE}
.u .big.wait{color:var(--dim)}
#toLatest{position:absolute;z-index:2;left:50%;bottom:12px;transform:translateX(-50%);padding:8px 18px;border-radius:999px;background:var(--teal);color:#06211E;font-size:15px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.5)}

#subs.composing #toLatest{bottom:70px}
#compose{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--line);background:var(--ink)}
#compose .chip{flex:0 0 auto;padding:10px 14px;font-size:16px}
#msgX{padding:10px 12px!important;color:var(--dim)}
#msg{flex:1;min-width:0;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--fg);font:inherit;font-size:17px;outline:none}
#msg:focus{border-color:var(--teal)}
#msg::placeholder{color:#77766F}
/* itsuki 在旁观页说的（块 通话23）*/
.u.mon{align-self:center;background:#2A2440;border-radius:14px}
.u.mon::before{content:attr(data-who);display:block;font-size:12px;color:#B9A8FF;margin-bottom:2px}
.u.note{align-self:center;background:none;border:1px dashed var(--line);padding:5px 14px;border-radius:999px}
.u.note .big{font-size:calc(var(--fs) * .66);color:#FFD88A;font-weight:400}
/* 键盘弹出来的时候：画面让出地方，字幕和输入框留在看得见的地方 */
#call.typing #stage{flex:0 0 20%;min-height:0}
#call.typing #subs{flex:1 1 0}
#call.typing #bar{display:none}

#nudge{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 22px;text-align:center;
  background:rgba(242,184,75,.95);color:#231A05;animation:pop .22s ease-out}
#nudge p{margin:0}
#n1{font-size:34px;font-weight:800;line-height:1.3}
#n2{margin-top:8px!important;font-size:25px;font-weight:600;line-height:1.4}
#n3{margin-top:16px!important;font-size:17px;opacity:.75;line-height:1.5}
@keyframes pop{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}

#bar{flex:0 0 auto;display:flex;justify-content:center;gap:clamp(6px,4vw,34px);padding:10px 12px calc(10px + var(--sab));background:var(--ink);border-top:1px solid var(--line)}
.ctl{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 1 64px;min-width:0}
@media (max-width:420px){#bar{gap:4px}}   /* 手机上最多 6 个键（加了声音键，块 通话29），间距收小免得挤 */
.ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#26282D;transition:background .15s,transform .1s}
.ctl:active .ic{transform:scale(.94)}
.ic svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic .slash{display:none;stroke-width:2.2}
.lb{font-size:13px;color:var(--fg);white-space:nowrap}
#bType.on .ic{background:var(--teal)}
#bType.on .ic svg{stroke:#06211E}
.ctl.on .ic{background:#fff}
.ctl.on .ic svg{stroke:#111}
.ctl.on .slash{display:block}
.hang .ic{background:var(--red)}
.hang .ic svg{fill:#fff;stroke:none;width:31px;height:31px}

/* 横屏（手机、iPad 都算）：左画面，右字幕 + 按钮；竖屏仍上下分（块 通话25） */
@media (orientation:landscape){
  #call{display:grid;grid-template-columns:minmax(0,1fr) 46%;grid-template-rows:minmax(0,1fr) auto}
  #stage{grid-column:1;grid-row:1 / 3;min-height:0}
  #subs{grid-column:2;grid-row:1;border-top:0;border-left:1px solid var(--line)}
  #bar{grid-column:2;grid-row:2;border-left:1px solid var(--line)}
}
@media (orientation:landscape) and (max-height:560px){
  #bar{padding:6px 8px calc(6px + var(--sab));gap:14px}
  .ic{width:46px;height:46px}.lb{display:none}
  #self{width:104px;height:78px}
}
/* 大屏横屏（iPad）：左字幕 + 按钮，右边对方画面按手机竖拍 9:16、高度占满（块 通话27）；按钮带字、自己的小窗放大 */
@media (orientation:landscape) and (min-height:561px){
  #call{grid-template-columns:minmax(0,1fr) min(calc(100dvh * 9 / 16), 45%)}
  #stage{grid-column:2}
  #subs,#bar{grid-column:1;border-left:0;border-right:1px solid var(--line)}
  #self{width:128px;height:96px}   /* 自己是 iPad 横着拍，小窗也是扁的 */
}

/* 专有名词面板 */
#termsSheet{position:fixed;inset:0;z-index:8;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center}
.sheet-in{width:100%;max-width:520px;background:var(--panel);border-radius:22px 22px 0 0;padding:20px 18px calc(18px + var(--sab))}
.sheet-in h2{margin:0 0 6px;font-size:20px}
.sheet-in textarea{width:100%;margin:12px 0;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--ink);color:var(--fg);font:16px/1.6 inherit;font-family:inherit;resize:vertical}
.sheet-btns{display:flex;justify-content:flex-end;gap:10px}
.sheet-btns .chip{padding:9px 20px;font-size:16px}

/* ── 微信提示 ── */
#wx{position:fixed;inset:0;z-index:9;background:rgba(11,11,12,.96);display:flex;align-items:center;justify-content:center;padding:0 30px}
.wx-arrow{position:absolute;right:10px;top:calc(6px + var(--sat));width:120px;height:120px;fill:none;stroke:var(--teal);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.wx-in{max-width:400px}
.wx-in h2{font-size:28px;margin:0 0 18px}
.wx-in ol{margin:0;padding:0;list-style:none;font-size:21px;line-height:1.7}
.wx-in li{margin:10px 0;padding:14px 16px;border-radius:14px;background:var(--panel)}
a.ghost.hist{display:inline-block;margin-top:22px}
.ghost{margin-top:26px;padding:12px 4px;color:var(--dim);font-size:16px;text-decoration:underline;text-underline-offset:4px}
#gNum{margin:6px 0 0;font:700 22px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;color:var(--fg)}