:root{--bg:#f5f6f3;--surface:#fff;--ink:#1e2c29;--muted:#68746f;--line:#e5e9e4;--green:#176b55;--green-hover:#115540;--green-soft:#eaf3ed;--amber:#916426;--amber-soft:#fff6e8;--red:#b04439;--shadow:0 12px 35px rgba(31,47,39,.055);--radius:22px;--font-size:26px;font-family:Inter,"Noto Sans CJK SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);font-synthesis:none;font-weight:400;line-height:1.5;background:var(--bg)}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select,textarea{font:inherit}button,select,label.switch{cursor:pointer}button{border:0;background:none;color:inherit}button:disabled,select:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #a1cabb;outline-offset:3px}button{touch-action:manipulation}svg{flex-shrink:0;vertical-align:middle}a{color:var(--green)}input[type=checkbox]{accent-color:var(--green);width:17px;height:17px;cursor:pointer}input[type=range]{accent-color:var(--green)}[hidden]{display:none!important}h1,h2,h3,p{margin:0}::selection{background:#cde7d5;color:#173c2b}.skip-link{position:fixed;left:12px;top:-100px;z-index:100;background:#fff;padding:12px}.skip-link:focus-visible{top:12px}
.topbar{height:86px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.88);display:flex;align-items:center;justify-content:space-between;padding:0 42px;gap:24px}.brand{display:flex;align-items:center;gap:12px;min-width:190px}.brand-icon{width:42px;height:42px;border-radius:13px;background:var(--green);color:#fff;display:grid;place-items:center}.brand-name{font-size:21px;font-weight:650;letter-spacing:2px}.brand-name span{font-size:12px;letter-spacing:1.6px;color:var(--muted);margin-left:9px;font-weight:450}.brand-sub{font-size:10px;color:var(--muted);letter-spacing:1.3px;margin-top:1px}.tabs{display:flex;gap:3px;padding:5px;background:#f0f2ee;border-radius:15px}.tab{display:flex;align-items:center;gap:9px;min-height:42px;padding:0 24px;border-radius:11px;font-size:14px;font-weight:550;color:var(--muted);white-space:nowrap}.tab[aria-selected=true]{background:#fff;color:var(--green);box-shadow:0 2px 8px #1a3b2510}.top-actions{display:flex;align-items:center;justify-content:flex-end;min-width:190px;gap:8px}.quiet-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 12px;border-radius:10px;color:var(--muted);font-size:13px}.quiet-button:hover:not(:disabled){background:#edf0ea;color:var(--ink)}.icon-button{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:10px;color:var(--muted)}.icon-button:hover:not(:disabled){background:#edf2ec;color:var(--green)}.icon-button.active{color:var(--green);background:var(--green-soft)}
.environment{display:flex;justify-content:center;align-items:center;gap:14px;background:#ecefe7;min-height:36px;padding:7px 24px;color:#647059;font-size:11px;letter-spacing:.1px}.environment.live{background:#e9f3ed;color:var(--green)}.environment button{color:var(--green);font-weight:600;padding:3px 0;white-space:nowrap}.tiny-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:middle}
.main{max-width:1100px;padding:32px 30px 22px;margin:auto}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px;gap:20px}.eyebrow{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:#849088;margin-bottom:7px}.page-heading h1{font-size:26px;letter-spacing:.5px;font-weight:620;line-height:1.35}.page-description{font-size:12px;color:var(--muted);margin-top:7px}.session-name{max-width:310px;display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);border-bottom:1px dashed #bac6bb;padding:6px 1px}.session-name .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.heading-actions{display:flex;align-items:center;gap:12px}.workspace{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.configbar{min-height:89px;padding:20px 25px;display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line)}.language-pair{display:flex;align-items:center;gap:17px}.language-name{font-size:14px;font-weight:550;white-space:nowrap}.language-sub{font-size:10px;color:var(--muted);margin-bottom:3px;letter-spacing:.4px}.language-select{border:0;background:transparent;font-size:14px;font-weight:550;padding:0 15px 0 0;max-width:160px;color:var(--ink)}.direction-arrow{color:#95a89a}.control-cluster{display:flex;align-items:center;gap:14px}.engine-switch{display:flex;align-items:center;border:1px solid var(--line);border-radius:11px;padding:4px;gap:3px}.engine-switch button{display:flex;align-items:center;gap:6px;font-size:12px;min-height:35px;padding:0 12px;border-radius:7px;white-space:nowrap;color:var(--muted)}.engine-switch button[aria-pressed=true]{background:var(--green-soft);color:var(--green);font-weight:600}.domain-select{max-width:150px;min-height:44px;padding:0 28px 0 12px;font-size:12px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px}.context-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 25px;background:#fbfcfa;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}.context-row button{display:inline-flex;align-items:center;gap:7px;padding:3px 0;color:var(--green);min-height:27px}.context-row .terms{font-size:10px;letter-spacing:.5px;color:#818e85}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 23px 8px}.status{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}.status-dot{width:7px;height:7px;border-radius:50%;background:#b3bdb5}.status-dot.listening{background:var(--green);box-shadow:0 0 0 4px #edf5ee}.status-dot.connecting,.status-dot.draining{background:#c59140}.status-dot.error{background:var(--red)}.status-dot.paused{background:#ba985b}.clock{font-variant-numeric:tabular-nums;font-size:11px;padding-left:9px;border-left:1px solid var(--line);color:#859086}.tool-actions{display:flex;align-items:center;gap:4px}.source-toggle{display:flex;align-items:center;gap:7px;min-height:40px;padding:0 8px;font-size:11px;color:var(--muted);white-space:nowrap}.type-button{font-family:Georgia,serif;font-size:19px}.type-button small{font-family:system-ui;font-size:8px;margin-top:3px}.toolbar .icon-button{width:36px;height:38px}.tool-divider{width:1px;height:19px;background:var(--line);margin:0 5px}
.transcript{height:clamp(330px,calc(100dvh - 462px),640px);min-height:330px;overflow:auto;scroll-behavior:smooth;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d3ddd3 transparent;padding:16px 38px 30px;position:relative}.empty-state{min-height:290px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 0 38px}.empty-icon{display:grid;place-items:center;width:80px;height:80px;background:#edf4ed;color:var(--green);border-radius:26px;margin-bottom:24px;box-shadow:0 0 0 12px #f8faf6}.empty-state h2{font-size:21px;font-weight:500;letter-spacing:.5px;margin-bottom:11px}.empty-state p{font-size:12px;line-height:1.9;color:var(--muted);max-width:430px}.empty-state .empty-hints{display:flex;justify-content:center;gap:18px;margin-top:28px;font-size:10px;color:#8a958b}.empty-hints span{display:flex;gap:5px;align-items:center}.subtitle{padding:14px 0 20px;border-bottom:1px solid #eff2ec;position:relative}.subtitle:last-child{border-bottom:0}.segment-meta{display:flex;align-items:center;gap:10px;min-height:24px;font-size:10px;color:#8a958c;margin-bottom:8px}.segment-time{font-variant-numeric:tabular-nums;letter-spacing:.3px}.segment-engine{font-size:9px;padding:2px 6px;border-radius:4px;background:#f1f4ed}.segment-status{color:#a57939;font-size:10px}.segment-meta .spacer{flex:1}.segment-actions{display:flex;gap:3px;align-items:center}.segment-actions button{width:32px;height:28px;border-radius:6px;color:#98a497;display:grid;place-items:center}.segment-actions button:hover{color:var(--green);background:var(--green-soft)}.segment-actions button.starred{color:var(--green)}.target-text{font-size:var(--font-size);line-height:1.78;font-weight:450;letter-spacing:.25px;white-space:pre-wrap;overflow-wrap:anywhere}.subtitle.provisional .target-text{color:#78867a}.target-text:empty:before{content:'等待译文…';color:#92a08f;font-size:16px}.source-text{font-size:13px;line-height:1.9;color:#82907e;margin-top:11px;white-space:pre-wrap;overflow-wrap:anywhere}.source-label{font-size:9px;letter-spacing:.7px;color:#9aa494;display:block;margin-bottom:3px}.segment-note{margin-top:10px;font-size:11px;color:#916426;line-height:1.7;display:flex;align-items:center;gap:8px}.segment-note button{color:var(--green);text-decoration:underline}.target-text mark{background:#eef3dc;color:inherit;border-radius:4px;padding:1px 3px}.note-strip{font-size:10px;text-align:center;color:#91a089;padding:8px 20px 10px}.auto-scroll{display:flex;justify-content:center;min-height:0}.follow-button{background:var(--green-soft);border:1px solid #d4e4d5;border-radius:20px;font-size:11px;color:var(--green);padding:8px 17px;margin:-12px 0 10px;position:relative;z-index:2}.load-more{display:block;margin:0 auto 12px;padding:8px 16px;background:#f3f5ef;color:var(--green);font-size:12px;border-radius:15px}
.bottom-bar{padding:20px 0 0;display:flex;align-items:center;justify-content:space-between;gap:20px}.input-status{min-width:210px;display:flex;align-items:center;gap:12px;font-size:10px;color:var(--muted)}.meter{display:flex;align-items:center;gap:3px;height:25px;width:42px;--level:.06}.meter i{display:block;width:3px;height:calc(4px + var(--level)*58px);max-height:25px;min-height:3px;border-radius:3px;background:#8cab91;transition:height .1s}.meter i:nth-child(2),.meter i:nth-child(4){height:calc(3px + var(--level)*40px)}.meter i:nth-child(1),.meter i:nth-child(5){height:calc(3px + var(--level)*24px)}.input-status strong{font-size:11px;display:block;font-weight:500;color:#586c5a}.primary-controls{display:flex;align-items:center;justify-content:center;gap:10px}.primary-button{min-height:52px;background:var(--green);color:#fff;padding:0 35px;border-radius:13px;display:inline-flex;justify-content:center;align-items:center;gap:10px;font-size:14px;font-weight:550;box-shadow:0 4px 10px #176b550c;white-space:nowrap}.primary-button:hover:not(:disabled){background:var(--green-hover)}.secondary-button{min-height:48px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #d9e1d6;background:#fff;font-size:12px;border-radius:11px;color:#63715f;white-space:nowrap}.secondary-button:hover:not(:disabled){background:#f0f5ec}.danger-button{background:#b04439;color:#fff}.keyboard-hint{min-width:210px;text-align:right;font-size:10px;color:#899482}.keyboard-hint kbd{font:10px system-ui;border:1px solid #dfe4da;border-bottom-width:2px;padding:2px 6px;border-radius:4px;background:#fcfdfb;margin-right:6px}.footer-note{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:18px;color:#8a9786;font-size:10px;line-height:1.6}.footer-note button{padding:0;color:var(--green);text-decoration:underline;text-underline-offset:2px}.error-banner{border:1px solid #e7cfc4;background:#fff4ee;color:#964d37;padding:13px 17px;margin:0 0 16px;font-size:12px;border-radius:12px;display:flex;gap:10px;align-items:center}.error-banner p{flex:1;line-height:1.8}.error-banner button{font-size:12px;text-decoration:underline}.error-banner .icon-button{width:28px;height:28px;flex-shrink:0}
.chat-thread{padding:12px 28px 22px}.chat-message{max-width:91%;padding:18px 22px;margin:12px 0 18px;background:#f2f6ed;border:1px solid #e7eee1;border-radius:18px 18px 18px 5px}.chat-message.self{margin-left:auto;background:#eef5f0;border-color:#dfeade;border-radius:18px 18px 5px 18px}.chat-message .target-text{font-size:calc(var(--font-size) - 3px);line-height:1.7}.chat-message .segment-meta{margin-bottom:9px;color:#718466}.chat-message .source-text{color:#84937e}.chat-message .message-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:10px;font-size:11px;color:#5c7758}.message-actions button{min-height:34px;display:flex;align-items:center;gap:6px;border-radius:7px;padding:3px 8px}.message-actions button:hover{background:#dcead7}.dialogue-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:690px;margin:auto;width:100%}.talk-button{min-height:70px;border-radius:15px;padding:12px 22px;display:flex;align-items:center;justify-content:center;gap:14px;background:var(--green);color:#fff}.talk-button.partner{background:#fff;color:var(--green);border:1px solid #bed0bd}.talk-button .button-main{display:block;font-size:14px;font-weight:550;letter-spacing:.2px}.talk-button .button-sub{display:block;font-size:10px;font-weight:400;opacity:.73;margin-top:3px}.talk-button.recording{box-shadow:0 0 0 3px #cbded0}.chat-empty-art{position:relative;display:flex;align-items:center;gap:14px;margin:0 0 27px}.mini-bubble{border:1px solid #dfe9d9;color:var(--green);background:#f1f7ed;border-radius:17px 17px 5px 17px;font-size:17px;padding:15px 23px}.mini-bubble:last-child{background:#fff;border-radius:17px 17px 17px 5px}.chat-empty-art>svg{color:#94a98f}.dialogue .bottom-bar{justify-content:center}.end-dialogue{font-size:11px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;margin:3px auto 0;color:var(--muted);min-height:40px}
#toast{position:fixed;bottom:115px;left:50%;transform:translateX(-50%) translateY(12px);background:#243c30;color:#fff;border-radius:12px;padding:13px 20px;font-size:12px;max-width:calc(100% - 32px);box-shadow:0 10px 30px #10291f24;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100;line-height:1.7}#toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}
dialog{border:1px solid var(--line);border-radius:23px;box-shadow:0 30px 100px #14291e33;padding:0;max-height:calc(100dvh - 52px);max-width:calc(100vw - 28px);color:var(--ink);background:#fff}dialog::backdrop{background:rgba(28,43,31,.27);backdrop-filter:blur(4px)}.modal{width:600px}.modal.wide{width:750px}.modal-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);padding:22px 26px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:2}.modal-header h2{font-size:21px;letter-spacing:.5px;font-weight:600}.modal-header p{font-size:11px;color:var(--muted);margin-top:5px}.modal-body{padding:22px 26px}.modal-footer{padding:17px 26px;display:flex;justify-content:flex-end;align-items:center;gap:10px;border-top:1px solid var(--line);background:#fcfdfb;position:sticky;bottom:0;z-index:2}.modal-footer .primary-button{min-height:44px;font-size:12px;padding:0 23px}.modal-footer .secondary-button{min-height:44px}.settings-section+.settings-section{margin-top:25px;padding-top:23px;border-top:1px solid var(--line)}.settings-section h3{font-size:13px;font-weight:600;margin-bottom:14px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:12px 0;font-size:12px}.setting-label p{font-size:10px;color:var(--muted);margin-top:4px;line-height:1.8;max-width:340px}.setting-row select{padding:8px 25px 8px 11px;min-height:40px;border-radius:8px;border:1px solid var(--line);font-size:12px;max-width:230px;background:#fff}.field{width:100%;background:#fbfcf9;border:1px solid #dfe6d9;border-radius:10px;padding:11px 13px;color:var(--ink);font-size:12px;outline-offset:2px;line-height:1.8}.field::placeholder{color:#9da798}textarea.field{resize:vertical;min-height:88px}.field-label{display:block;font-size:11px;font-weight:550;margin-bottom:7px}.small-help{font-size:10px;line-height:1.9;color:var(--muted);margin:9px 0}.notice{background:#f2f6ed;border:1px solid #e4eadb;border-radius:10px;padding:12px 14px;font-size:11px;line-height:1.9;color:#687b5a}.notice.warning{background:var(--amber-soft);border-color:#eadbc1;color:var(--amber)}.api-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:12px}.api-line{display:flex;justify-content:space-between;font-size:11px;gap:16px;align-items:center;margin:5px 0}.api-line code{font-size:10px;color:#78826e;word-break:break-all}.inline-buttons{display:flex;align-items:center;gap:10px;margin-top:12px}.inline-buttons .secondary-button{min-height:40px;font-size:11px;padding:0 13px}.glossary-list{margin-top:16px;border:1px solid var(--line);border-radius:12px;max-height:220px;overflow:auto}.term-row{display:grid;grid-template-columns:1fr 1.6fr;gap:16px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:11px}.term-row:last-child{border-bottom:0}.term-row span:first-child{font-weight:550;color:var(--green)}.term-row small{font-size:9px;display:block;color:#91a088;margin-top:3px;font-weight:400}.export-option{display:flex;align-items:center;gap:16px;min-height:76px;padding:15px 17px;width:100%;border:1px solid var(--line);border-radius:13px;margin:10px 0;text-align:left}.export-option:hover{background:#f5f8f0;border-color:#bdd0b9}.export-format{font-size:10px;font-weight:650;color:var(--green);width:44px;height:43px;border-radius:9px;background:#edf4e8;display:grid;place-items:center}.export-option strong{font-size:13px;font-weight:550;display:block}.export-option small{font-size:10px;display:block;margin-top:4px;color:var(--muted)}.export-option>svg{margin-left:auto;color:var(--green)}.history-toolbar{display:flex;gap:8px;margin-bottom:17px}.history-toolbar .field{flex:1}.history-list{min-height:70px}.history-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.history-open{flex:1;text-align:left;padding:0;min-height:40px}.history-open strong{font-size:12px;font-weight:550}.history-open small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.history-badge{font-size:9px;background:#edf1e8;border-radius:5px;padding:3px 7px;color:#7c8b70;margin-left:7px}.history-empty{padding:28px 0;text-align:center;color:var(--muted);font-size:12px;line-height:1.9}.confirm-body{font-size:13px;line-height:1.9;color:var(--muted)}.confirm-body p+p{margin-top:12px}.checkbox-line{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-size:12px;color:var(--ink)}.checkbox-line input{flex-shrink:0}
.display-modal{width:calc(100vw - 32px);height:calc(100dvh - 32px);max-width:none;max-height:none;border-radius:22px}.display-top{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;color:var(--muted);font-size:12px}.display-content{display:flex;align-items:center;justify-content:center;height:calc(100% - 100px);padding:40px 7vw;overflow:auto;font-size:clamp(28px,4vw,64px);line-height:1.7;font-weight:500;white-space:pre-wrap;overflow-wrap:anywhere;text-align:center;color:var(--green)}.display-content.rotated{transform:rotate(180deg)}.focus-exit{display:none}.focus-mode .topbar,.focus-mode .environment,.focus-mode .page-heading,.focus-mode .configbar,.focus-mode .context-row,.focus-mode .footer-note{display:none}.focus-mode .main{max-width:1300px;padding-top:20px}.focus-mode .transcript{height:calc(100dvh - 186px);font-size:34px}.focus-mode{--font-size:36px}.focus-mode .focus-exit{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--green);min-height:36px}.focus-mode .note-strip{display:none}.focus-mode .workspace{box-shadow:none}.show-source-label{display:inline}.record-finished{padding:14px 20px;text-align:center;color:var(--green);font-size:11px;background:#f3f8ec;border-radius:10px;margin:15px auto 0;max-width:500px}.busy-spin{animation:spin 1.3s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* v0.2: one viewport, one scrollable reading surface, controls never cover captions. */
html,body { height:100%; overflow:hidden; }
#app { height:100vh; height:100dvh; display:flex; flex-direction:column; }
.topbar { flex-shrink:0; height:72px; padding:0 32px; }
.environment { flex-shrink:0; min-height:28px; padding:4px 22px; }
.main { width:100%; max-width:1120px; margin:0 auto; padding:16px 28px 6px; flex:1; min-height:0; display:flex; flex-direction:column; }
.page-heading { flex-shrink:0; align-items:center; margin-bottom:12px; gap:12px; }
.page-heading h1 { font-size:20px; font-weight:600; }
.heading-actions { min-width:0; gap:10px; }
.session-name { max-width:250px; min-height:44px; border-bottom:0; }
.workspace { flex:1; min-height:0; display:flex; flex-direction:column; border-radius:20px; position:relative; }
.configbar { flex-shrink:0; min-height:62px; padding:8px 20px; gap:14px; justify-content:flex-start; }
.language-compact { display:flex; align-items:center; gap:12px; font-size:13px; font-weight:550; margin-right:auto; white-space:nowrap; }
.language-compact svg { color:#8a9c91; }
.engine-switch { padding:2px; border-radius:11px; }
.engine-switch button { min-height:44px; padding:0 14px; }
.config-trigger { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); min-height:44px; padding:0 10px; border-radius:8px; white-space:nowrap; }
.config-trigger:hover { background:var(--green-soft); }
.session-options { flex-shrink:0; display:flex; flex-wrap:wrap; gap:10px; align-items:end; padding:14px 20px; background:#f8faf6; border-bottom:1px solid var(--line); max-height:35vh; overflow:auto; }
.session-options label { display:flex; flex-direction:column; gap:5px; font-size:11px; color:var(--muted); }
.session-options select { min-height:44px; border:1px solid var(--line); border-radius:8px; background:#fff; padding:6px 9px; font-size:12px; max-width:210px; }
.session-options .small-help { flex:1 1 100%; margin:0; }
.toolbar { flex-shrink:0; padding:3px 18px; min-height:48px; border-bottom:1px solid #f3f5f0; }
.toolbar .icon-button { width:44px; height:44px; }
.source-toggle { min-height:44px; }
.transcript,.focus-mode .transcript { height:auto; min-height:0; flex:1; padding:10px 30px 26px; scroll-behavior:auto; overflow:auto; overflow-anchor:none; }
.empty-state { min-height:0; padding:18px 8px; }
.empty-icon { width:64px; height:64px; margin-bottom:20px; }
.empty-state h2 { font-size:20px; }
.empty-state .empty-hints { margin-top:20px; }
.subtitle { padding:10px 0 20px; }
.target-text { font-size:var(--font-size); line-height:1.75; }
.segment-actions button { width:44px; height:40px; }
.segment-meta { margin-bottom:5px; }
.note-strip { flex-shrink:0; min-height:27px; padding:5px 16px; text-align:center; font-size:10px; border-top:1px solid #f0f3ed; }
.auto-scroll { position:absolute; left:50%; transform:translateX(-50%); bottom:34px; z-index:2; }
.bottom-bar { position:static; flex-shrink:0; display:flex; padding:14px 0 7px; min-height:77px; gap:16px; background:none; border:0; }
.primary-button { min-height:54px; }
.primary-controls .secondary-button { min-height:50px; }
.input-status { min-width:200px; }
.keyboard-hint { min-width:200px; }
.footer-note { flex-shrink:0; display:flex; align-items:center; justify-content:center; margin:0; min-height:30px; padding:0 0 env(safe-area-inset-bottom); gap:6px; font-size:10px; }
.footer-note button { min-height:30px; display:inline-flex; align-items:center; gap:4px; color:var(--muted); }
.footer-note .save-failed { color:var(--red); }
.dialogue .bottom-bar { display:flex; flex-direction:column; gap:0; padding:12px 0 0; }
.dialogue-controls { max-width:720px; }
.talk-button { min-height:70px; }
.end-dialogue { min-height:30px; padding:3px 10px; margin:0; }
.chat-message { max-width:90%; }
.recovery-banner { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:8px; background:#e9f3ed; padding:4px 12px; border-radius:10px; margin-bottom:8px; font-size:12px; }
.recovery-banner button { min-height:38px; color:var(--green); font-weight:550; }
.error-banner { flex-shrink:0; max-height:110px; overflow:auto; margin-bottom:8px; }
.search-hit { outline:2px solid #bad1b3; outline-offset:-2px; border-radius:8px; }
.search-result { display:block; text-align:left; width:100%; padding:14px 4px; border-bottom:1px solid var(--line); font-size:13px; min-height:48px; overflow-wrap:anywhere; }
.search-result small { display:block; color:var(--muted); font-size:10px; margin-top:5px; }
.history-open { overflow-wrap:anywhere; min-width:0; }
.inline-buttons { flex-wrap:wrap; }
.modal-body { overflow-wrap:anywhere; }
.display-content { display:block; align-content:center; }
.focus-mode .session-options { display:none; }
.focus-mode .main { padding:12px 24px 6px; max-width:1300px; }
.focus-mode .transcript { padding:14px 30px; }
.focus-mode .page-heading,.focus-mode .footer-note { display:none; }
@media(max-width:900px) {
  .topbar { padding:0 20px; gap:12px; }
  .brand,.top-actions { min-width:0; }
  .brand-sub { display:none; }
  .tab { padding:0 16px; }
  .input-status,.keyboard-hint { min-width:160px; }
}
@media(max-width:760px) {
  .topbar { height:auto; min-height:108px; padding:8px 14px 6px; flex-wrap:wrap; gap:5px 12px; }
  .brand { gap:8px; }
  .brand-icon { width:32px; height:32px; border-radius:10px; }
  .brand-icon svg { width:23px; height:23px; }
  .brand-name { font-size:18px; letter-spacing:1px; }
  .brand-name span { font-size:9px; letter-spacing:1px; margin-left:7px; }
  .top-actions { margin-left:auto; gap:0; }
  .top-actions .action-label { display:none; }
  .top-actions .quiet-button { width:44px; padding:0; }
  .tabs { order:3; flex:1 1 100%; padding:3px; border-radius:12px; }
  .tab { min-height:40px; flex:1; justify-content:center; font-size:12px; padding:0 6px; }
  .environment { min-height:27px; padding:3px 13px; font-size:10px; justify-content:space-between; gap:7px; }
  .environment .env-detail { display:none; }
  .environment button { min-height:24px; }
  .main,.dialogue .main { padding:5px 10px 0; }
  .page-heading { margin:0 4px 3px; min-height:36px; }
  .page-heading h1 { font-size:16px; white-space:nowrap; }
  .heading-actions { gap:0; }
  .session-name { font-size:10px; max-width:130px; min-height:36px; }
  .heading-actions .quiet-button { width:44px; min-height:40px; padding:0; }
  .heading-actions .quiet-button span { display:none; }
  .workspace { border-radius:15px; }
  .configbar { min-height:53px; padding:4px 9px; gap:5px; flex-wrap:nowrap; }
  .language-compact { gap:5px; font-size:11px; }
  .language-compact svg { width:12px; }
  .engine-switch { gap:0; padding:1px; }
  .engine-switch button { min-height:42px; padding:0 8px; gap:4px; font-size:11px; }
  .engine-switch button svg { width:12px; }
  .config-trigger { font-size:10px; padding:0 4px; gap:3px; max-width:81px; white-space:normal; line-height:1.4; }
  .session-options { padding:10px; gap:8px; max-height:220px; }
  .session-options label { flex:1; min-width:110px; }
  .session-options select { width:100%; min-width:0; }
  .toolbar { padding:0 6px 0 11px; gap:5px; min-height:45px; }
  .status { font-size:10px; gap:6px; }
  .clock { font-size:10px; padding-left:5px; }
  .tool-actions { gap:0; }
  .tool-divider { margin:0 1px; }
  .toolbar .icon-button { width:40px; height:44px; }
  .source-toggle { padding:0 3px; gap:4px; font-size:10px; }
  .source-toggle input { width:15px; height:15px; }
  .type-button small { display:none; }
  .transcript,.chat-thread { padding:8px 18px 18px; }
  .target-text { font-size:calc(var(--font-size) - 2px); line-height:1.75; }
  .source-text { font-size:12px; line-height:1.8; }
  .segment-meta { font-size:9px; gap:5px; }
  .segment-engine { font-size:8px; }
  .segment-actions { gap:0; }
  .segment-actions button { width:36px; height:36px; }
  .empty-icon { width:54px; height:54px; margin-bottom:22px; border-radius:20px; }
  .empty-icon svg { width:29px; }
  .empty-state h2 { font-size:18px; }
  .empty-state p { font-size:11px; max-width:270px; }
  .empty-state .empty-hints { font-size:9px; margin-top:18px; gap:12px; }
  .note-strip { font-size:9px; min-height:25px; padding:4px 10px; }
  .bottom-bar { padding:10px 5px 3px; min-height:70px; gap:8px; }
  .input-status { min-width:0; max-width:125px; font-size:9px; gap:5px; }
  .input-status strong { font-size:10px; }
  .input-status .meter { display:none; }
  .primary-controls { margin-left:auto; gap:6px; }
  .primary-button { min-height:54px; padding:0 23px; font-size:13px; }
  .primary-controls .secondary-button { padding:0 12px; font-size:11px; }
  .keyboard-hint { display:none; }
  .footer-note { font-size:9px; min-height:28px; gap:4px; }
  .footer-note button { min-height:28px; }
  .dialogue .bottom-bar { padding:9px 1px 0; }
  .dialogue-controls { gap:9px; }
  .talk-button { min-height:66px; padding:8px 10px; gap:7px; border-radius:12px; }
  .talk-button svg { width:20px; }
  .talk-button .button-main { font-size:12px; }
  .talk-button .button-sub { font-size:8px; line-height:1.6; }
  .end-dialogue { font-size:10px; min-height:28px; }
  .chat-message,.chat-message.self { padding:12px 15px; max-width:95%; margin:8px 0 14px; }
  .chat-message.self { margin-left:auto; }
  .chat-message .target-text { font-size:calc(var(--font-size) - 3px); }
  .mini-bubble { font-size:16px; padding:12px 18px; }
  .message-actions button { min-height:40px; }
  .recovery-banner { font-size:10px; }
  .error-banner { font-size:11px; padding:8px; }
  #toast { bottom:130px; font-size:11px; }
  .modal-header { padding:14px 17px; gap:10px; }
  .modal-header h2 { font-size:18px; }
  .modal-body { padding:16px 17px; }
  .modal-footer { padding:12px 17px; gap:8px; flex-wrap:wrap; }
  .modal-footer .primary-button,.modal-footer .secondary-button { padding:0 13px; }
  .setting-row { gap:10px; align-items:flex-start; }
  .setting-label { min-width:0; flex:1; }
  .setting-row select { max-width:165px; font-size:11px; min-height:44px; }
  .setting-row input[type=range] { max-width:115px; }
  .api-line { gap:8px; }
  .api-line code { font-size:9px; }
  .history-toolbar { flex-wrap:wrap; }
  .history-toolbar .field { min-width:120px; }
  .display-top { padding:12px 14px; }
  .display-content { padding:18px; font-size:30px; }
  .focus-mode .main { padding:8px 8px 0; }
  .focus-mode .transcript { padding:10px 19px; }
  .focus-mode .source-toggle,.focus-mode .clock { display:none; }
}
@media(max-width:360px) {
  .brand-name span { display:none; }
  .config-trigger { font-size:0; width:25px; min-width:25px; }
  .config-trigger svg { width:16px; }
  .type-button { display:none; }
  .input-status { max-width:88px; }
  .primary-button { padding:0 16px; }
  .session-name { max-width:102px; }
  .target-text { font-size:calc(var(--font-size) - 3px); }
}
@media(max-height:640px) {
  .page-heading { display:none; }
  .main { padding-top:6px; }
  .empty-icon,.empty-hints { display:none!important; }
  .empty-state { padding:8px; }
  .note-strip { display:none; }
  .auto-scroll { bottom:8px; }
  .footer-note { min-height:24px; }
}
@media(max-height:500px) and (min-width:600px) {
  .topbar { min-height:52px; height:52px; flex-wrap:nowrap; padding:3px 12px; }
  .tabs { order:0; flex:0 1 auto; }
  .environment,.footer-note,.input-status { display:none; }
  .primary-controls { margin:auto; }
  .bottom-bar,.dialogue .bottom-bar { padding:5px 0; min-height:52px; }
  .talk-button { min-height:46px; }
  .end-dialogue { display:none; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media print {
  html,body { height:auto; overflow:visible; }
  #app,.main,.workspace,.transcript { height:auto; display:block; overflow:visible; }
  .topbar,.environment,.configbar,.session-options,.toolbar,.bottom-bar,.footer-note,.heading-actions,.segment-actions,.message-actions,.note-strip { display:none!important; }
  .main { max-width:none; padding:0; }
  .workspace { border:0; box-shadow:none; }
  .target-text { font-size:16px; }
}

/* Connection and interruption instructions remain visible in compact/focus views. */
.note-strip.critical { display:block; color:var(--green); }
.status-dot.reconnecting { background:var(--red); }

/* Keep recording readiness and glossary discovery clear without adding panels. */
.status { min-width:0; color:#40594c; }
.status-label { font-size:13px; font-weight:650; line-height:1.4; }
.status[data-state="connecting"],.status[data-state="reconnecting"] { color:#875300; }
.status[data-state="listening"] { color:var(--green); }
.status-dot { flex-shrink:0; }
.note-strip.critical { font-size:13px; line-height:1.55; font-weight:600; background:#edf6ef; padding:8px 14px; color:#23523a; }
.note-strip.critical[data-state="connecting"],.note-strip.critical[data-state="reconnecting"] { background:#fff3dc; color:#805000; }
.glossary-trigger { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:44px; padding:0 9px; border:1px solid #c9d9cb; border-radius:9px; color:var(--green); font-size:12px; font-weight:600; white-space:nowrap; }
.glossary-trigger:hover:not(:disabled) { background:var(--green-soft); }
.domain-compact { display:none; }
.display-modal[open] { display:flex; flex-direction:column; }
.display-top { flex-shrink:0; align-items:flex-start; gap:16px; }
.display-heading { min-width:0; line-height:1.6; }
.display-context { color:var(--green); font-size:14px; font-weight:650; margin-bottom:3px; }
.display-demo { display:inline-block; font-size:11px; font-weight:500; background:#edf4e8; border-radius:5px; padding:2px 7px; margin-left:9px; }
.display-heading p { font-size:12px; margin-top:4px; }
.display-actions { display:flex; flex-shrink:0; gap:7px; }
.display-actions button { min-height:44px; }
.display-content { flex:1; min-height:0; height:auto; }
@media(max-width:600px) {
  .glossary-trigger { font-size:11px; gap:3px; padding:0 5px; }
  .glossary-trigger svg { width:13px; }
  .config-trigger { font-size:10px; width:auto; min-width:0; padding:0 3px; }
  .domain-full { display:none; }
  .domain-compact { display:inline; }
  .toolbar { flex-wrap:wrap; }
  .status-label { font-size:12px; }
  .note-strip.critical { font-size:12px; padding:6px 10px; }
  .display-top { padding:15px 16px; gap:8px; flex-wrap:wrap; }
  .display-heading { flex:1 1 190px; }
  .display-actions { margin-left:auto; }
  .display-context { font-size:13px; }
  .display-demo { margin-left:0; margin-right:7px; }
  .display-content { padding:20px 7vw; }
}