/* Keep the established layout, give controls a restrained mixer surface. */
body{background:radial-gradient(ellipse at 50% 0,#303843,#151a22 65%);color:#e5ebf2}.app{background:linear-gradient(120deg,#252c36,#1c232d);border:1px solid #424c59;box-shadow:inset 0 1px #ffffff18,0 18px 70px #0005}.workspace{background:linear-gradient(135deg,#242c37,#1c232d);border-color:#48505d;box-shadow:inset 0 1px #ffffff10,0 4px 12px #0003}.transcript-panel,.conversation{background:#131a23;box-shadow:inset 0 2px 8px #0004}.language-row select,select,input:not([type=checkbox]):not([type=range]),textarea{background:#141b24;color:#e9eff6;border:1px solid #4b5665;box-shadow:inset 0 2px 4px #0004}.language-row,.conversation-bar{border-color:#424e5d}.quiet,.secondary{color:#cbd6e5}button.secondary,button.quiet{background:linear-gradient(#36404e,#242d38);border:1px solid #536071;box-shadow:inset 0 1px #ffffff18,0 2px 2px #0004}button:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px #0004}.primary{box-shadow:inset 0 1px #ffffff48,0 3px 0 #102a20,0 5px 9px #0005}.primary:disabled{box-shadow:none}dialog{background:linear-gradient(135deg,#2a3441,#1c242f);color:#e6edf6;border:1px solid #637085;box-shadow:0 20px 70px #0007}.brand,header,footer,.muted{color:#adbcd0}.bubble{border-color:#344155;background:#202c3b}.bubble.reverse{background:#1e3337}.bubble .original{color:#bac8d8}.bubble .translation{color:#eff5ff}.bubble p{white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;text-wrap:pretty}.output-fader{display:grid;grid-template-columns:1fr auto;gap:2px;padding:8px 18px 4px;color:#adbbcd;font-size:11px}.output-fader input{grid-column:1/-1;width:100%;appearance:none;height:26px;background:repeating-linear-gradient(90deg,transparent 0 4.5%,#71819660 4.5% 5%);cursor:pointer}.output-fader input::-webkit-slider-runnable-track{height:7px;background:#0b1017;border-radius:4px;border:1px solid #566377;box-shadow:inset 0 2px 3px #000}.output-fader input::-webkit-slider-thumb{appearance:none;width:27px;height:25px;margin-top:-10px;border:1px solid #748397;border-radius:4px;background:linear-gradient(#dae1eb,#9daabc 40%,#40546d 45%,#e7edf5 54%,#afbbc9);box-shadow:0 2px 5px #000a}.output-fader input::-moz-range-thumb{width:27px;height:25px;border:1px solid #748397;border-radius:4px;background:linear-gradient(#dae1eb,#9daabc 40%,#40546d 45%,#e7edf5 54%,#afbbc9)}.fader-scale{grid-column:1/-1;display:flex;justify-content:space-between;font-size:9px;color:#8192a9}.meter{background:#0a1019;box-shadow:inset 0 1px 3px #0008}.meter i{background:linear-gradient(90deg,#38c797,#bbd25d 75%,#f2bb5b 92%,#e56868)}#webPaymentQR{display:block;width:240px;max-width:100%;margin:18px auto;background:#fff;padding:10px;border-radius:8px}#webPaymentQR[hidden]{display:none}#webPaymentPlans{display:flex;gap:10px;flex-wrap:wrap}#webPaymentPlans button{flex:1;min-width:160px;line-height:1.7}#webGuide p,#webPaymentDialog p{line-height:1.7}#webReferralLink{width:100%;box-sizing:border-box}input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #8ab7f5;outline-offset:3px}@media(max-height:480px) and (orientation:landscape){.output-fader{padding:2px 14px;gap:0}.fader-scale{display:none}.output-fader input{height:22px}footer{padding:2px}.workspace .controls{padding-top:2px}}

/* Web 1.0.3 UI refinement: compact volume and model-readiness badge. */
.brand-group{display:flex;align-items:center;gap:10px;min-width:0}.model-region{font-size:11px;line-height:1.3;color:#a8bed8;white-space:nowrap;font-variant-numeric:tabular-nums}
.output-fader{display:flex;align-items:center;gap:8px;width:230px;max-width:calc(100% - 28px);padding:0;margin:4px auto;font-size:10px;white-space:nowrap}
.output-fader output{min-width:30px;font-variant-numeric:tabular-nums}.output-fader input{flex:1;min-width:0;width:110px;height:26px;margin:0;background:transparent}
.output-fader input::-webkit-slider-runnable-track{height:3px;border:0;box-shadow:none;background:#66778d}
.output-fader input::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4.5px;border:0;border-radius:50%;background:#b9d5fa;box-shadow:none}
.output-fader input::-moz-range-track{height:3px;border:0;background:#66778d}.output-fader input::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#b9d5fa;box-shadow:none}
.output-fader .fader-scale{display:none}.immersive .output-fader,.immersive .meter{display:none}
.translation{cursor:zoom-in;touch-action:manipulation}
.translation-zoom{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#101720;color:#f4f8ff;box-sizing:border-box}
.translation-zoom::backdrop{background:#101720}.translation-zoom[open]{display:flex}
#translationZoomClose{display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:24px;width:100%;min-height:100%;padding:max(28px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));border:0;border-radius:0;background:transparent;color:inherit;cursor:zoom-out;overflow-y:auto;touch-action:pan-y;box-shadow:none;transform:none}
#translationZoomText{font-size:clamp(32px,7vw,88px);line-height:1.5;text-align:center;overflow-wrap:anywhere;white-space:pre-wrap;flex-shrink:0;max-width:1200px}
#translationZoomClose small{font-size:12px;font-weight:400;color:#9caec2;flex-shrink:0}
@media(max-width:440px){.brand-group{gap:7px}.brand b{display:none}.model-region{font-size:10px}.header-actions{gap:4px}#accountOpen{padding-inline:5px}}

/* A quiet caption toolbar; output volume stays out of the main interface. */
.output-fader[hidden]{display:none}
.conversation-bar{display:flex;justify-content:flex-end;align-items:center;min-height:44px;height:auto}
#captionLabel[hidden]{display:none}
.caption-actions{margin-left:auto}
.copy-captions{position:absolute;bottom:4px;right:56px;width:36px;height:36px;min-height:36px;border-radius:9px;color:#8fa1b8}
button.copy-captions,button.clear-captions,.caption-actions button.quiet{background:transparent;border:0;box-shadow:none}
button.copy-captions:hover,button.clear-captions:hover,.caption-actions button.quiet:hover{background:#ffffff0c}
.copy-captions:disabled{opacity:.35;cursor:default}
@media(max-width:600px){.copy-captions{right:52px}}

/* Keep secondary tools out of the simplified Web footer. */
footer button[hidden]{display:none}

footer{display:flex;align-items:center;justify-content:space-between}
footer .settings-icon{margin-left:auto;width:36px;height:36px;min-height:36px;padding:8px;color:#8fa1b8;background:transparent;border:0;box-shadow:none}
footer .settings-icon:hover{background:#ffffff0c}

/* Idle has no redundant prompt or elapsed-time counter. */
.status-row[hidden]{display:none}

/* On phones, give remaining viewport space to the scrollable transcript. */
@media(max-width:600px),(orientation:landscape) and (max-height:550px){
 body:not(.immersive) .app{height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:320px;display:flex;flex-direction:column}
 body:not(.immersive) .app>header,body:not(.immersive) .app>footer{flex-shrink:0}
 body:not(.immersive) .workspace{flex:1;min-height:0;display:flex;flex-direction:column}
 body:not(.immersive) .workspace> :not(.transcript-panel){flex-shrink:0}
 body:not(.immersive) .transcript-panel{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 body:not(.immersive) .conversation{flex:1;height:auto;min-height:0;max-height:none}
 body:not(.immersive) .empty{min-height:0}
 body:not(.immersive) #error{max-height:20dvh;overflow:auto}
 body:not(.immersive) footer{margin-top:4px}
}

/* 1.0.4 web：错误框恢复按钮（UX-4）、低余额时长芯片（UX-6）、已收起字幕说明（WEBPERF-17）。 */
#error{display:flex;align-items:center;gap:10px;padding:8px 10px;line-height:1.45}
#errorText{flex:1;min-width:0}
#error .error-action{flex-shrink:0;min-height:32px;padding:4px 12px;font-size:12px;white-space:nowrap}
#error.warning{border-color:#8a6a33;background:#3a3021;color:#ffe2a8}
.account-bar.low{border-color:#c9953f;color:#ffd58a}
.history-note{font-size:11px;line-height:1.5;color:#8fa1b8;text-align:center;padding:2px 0 10px}
@media(max-width:600px){#error{font-size:12px;line-height:1.4;padding:6px 8px;margin-top:3px;margin-bottom:3px}}

/* 1.0.4 UX-3：手机横屏（非全屏）把高度让给字幕区。复制/清空改在字幕区右侧竖排（仍在右下角），不再占底部 52px；
   各行压缩到最小可点尺寸；设置齿轮与版本号浮在底部按钮行右侧（仍在右下角）。全屏与竖屏不受影响。 */
@media(orientation:landscape) and (max-height:550px){
 body:not(.immersive) .app{position:relative;padding:4px 10px}
 body:not(.immersive) header{margin-bottom:2px}
 body:not(.immersive) header .mark{padding:3px 8px}
 body:not(.immersive) #accountOpen{min-height:32px;padding-top:4px;padding-bottom:4px}
 body:not(.immersive) .account-bar{padding-top:4px;padding-bottom:4px}
 body:not(.immersive) .language-row{padding:2px 14px}
 body:not(.immersive) .language-row select{min-height:34px}
 body:not(.immersive) .language-options .inline{min-height:32px}
 body:not(.immersive) .conversation-bar{min-height:36px}
 body:not(.immersive) .conversation-bar .icon-button{width:40px;height:36px;min-height:36px}
 body:not(.immersive) .conversation{padding:4px 54px 6px 16px}
 body:not(.immersive) .copy-captions{right:10px;bottom:44px}
 body:not(.immersive) .clear-captions{right:10px;bottom:4px}
 body:not(.immersive) .bubble{padding:6px 12px;margin-bottom:8px}
 body:not(.immersive) .bubble .original{margin:2px 0;line-height:1.45}
 body:not(.immersive) .bubble .translation{margin:2px 0;line-height:1.45}
 body.one-way:not(.immersive) .bubble,body.one-way:not(.immersive) .bubble.reverse{padding:6px 0;margin:0}
 body.one-way:not(.immersive) .original{font-size:clamp(17px,2.4vw,22px);line-height:1.4}
 body.one-way:not(.immersive) .translation{font-size:clamp(22px,3vw,28px);line-height:1.4}
 body:not(.immersive) .status-row{min-height:22px;padding:2px 16px 0}
 body:not(.immersive) .meter{margin:2px 16px}
 body:not(.immersive) #error{margin:2px 16px;padding:4px 10px;font-size:12px}
 body:not(.immersive) .controls{padding:4px 12px}
 body:not(.immersive) #start,body:not(.immersive) #stop{min-height:40px}
 body:not(.immersive) .app>footer{position:absolute;right:16px;bottom:8px;margin:0;gap:6px;z-index:1}
}