/*
 * 演示页样式分区（保留现有紧凑排版，按以下选择器定位）：
 * 1. :root、body、main、.heading：基础字体、页面宽度、标题和会话状态标签。
 * 2. .layout、.card、.stage、#playerBox：桌面双栏布局、卡片和播放器容器。
 *    播放区初始比例为 9:16；app.js 收到流信息后用实际 width/height 更新比例。
 * 3. .workspace、.controls、button、.notice、.metrics：操作区、禁用/焦点状态、提示和指标。
 * 4. .transcript-row、.speaker、#log：转写、回复与限高滚动日志，长文本允许换行。
 * 5. footer、[hidden]：页脚和统一隐藏规则；hidden 用于提示及恢复播放按钮。
 * 6. @media(max-width:800px)：窄屏改为单栏，播放器居中并缩小间距。
 * 7. .reply-video、#replyVideo、.reply-video-list：NLP 回复的视频卡片、播放状态与序号选择。
 * 样式只负责呈现，不参与录音、播放、重连或心跳调度。
 */
:root{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#182a37;background:#f2f5f6;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}main{max-width:1220px;margin:0 auto;padding:38px 28px 20px}.heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px}.eyebrow{color:#46736f;letter-spacing:.16em;font-size:11px;font-weight:700;margin:0 0 12px}h1{font-size:29px;line-height:1.35;margin:0 0 11px;font-weight:650;letter-spacing:-.04em}.description{margin:0;color:#627680;font-size:14px;line-height:1.7}.badge{white-space:nowrap;border:1px solid #d5dfe2;border-radius:30px;padding:9px 16px;font-size:13px;background:#fff}.badge.ready{background:#e0f2e9;color:#20714e;border-color:#b9dccb}.badge.reconnecting{background:#fff3d6;color:#87620a}.layout{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:24px;align-items:start}.card{background:#fff;border:1px solid #dde6e8;border-radius:16px;box-shadow:0 4px 20px #1c3c4c03}.stage{overflow:hidden;background:#e4ebec}#playerBox{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#294c54,#142b33 75%)}#playerPlaceholder{position:absolute;inset:0;display:grid;place-items:center;color:#a8bdc3;font-size:14px}#playerBox video,#playerBox canvas{max-width:100%;max-height:100%}.stage-footer{padding:15px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:#4b626d;background:#fff}.workspace{display:grid;gap:18px}.controls,.conversation,.diagnostics{padding:22px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}h2{font-size:15px;margin:0;font-weight:650}.subtle{font-size:12px;color:#758790}.buttons{display:flex;flex-wrap:wrap;gap:9px}button{font:inherit;font-size:13px;border:1px solid #d6e0e4;border-radius:8px;background:#fff;color:#304c59;padding:10px 14px;cursor:pointer;transition:background .12s}button:hover:not(:disabled){background:#edf4f3}button.primary{background:#176b60;color:#fff;border-color:#176b60}button.primary:hover:not(:disabled){background:#0f594f}button.danger{color:#9b4845}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible{outline:3px solid #8fc6bb;outline-offset:2px}.text-button{border:0;padding:0;background:none;font-size:12px;color:#28796c}.hint{font-size:12px;color:#7a8a92;margin:15px 0 18px;line-height:1.6}.notice{font-size:13px;color:#9b3e32;background:#fff0eb;border-radius:8px;padding:12px;line-height:1.6}.metrics{border-top:1px solid #edf1f2;padding-top:17px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.metrics span{display:block;font-size:11px;color:#809098;margin-bottom:7px}.metrics strong{font-size:13px;font-weight:550}.transcript-row{display:grid;grid-template-columns:58px 1fr;gap:10px;padding:13px 0}.transcript-row+.transcript-row{border-top:1px solid #edf1f2}.speaker{font-size:11px;color:#657782;background:#eef2f5;padding:5px 7px;border-radius:5px;align-self:start;text-align:center}.speaker.assistant{color:#277767;background:#e9f4ee}.transcript-row p{font-size:14px;line-height:1.85;margin:0;min-height:26px;overflow-wrap:anywhere;white-space:pre-wrap;max-height:230px;overflow:auto}#log{height:154px;overflow:auto;color:#607680;font:12px/1.8 Consolas,"Microsoft YaHei",monospace;overflow-wrap:anywhere}#log .error{color:#b64a43}#log .success{color:#267c61}footer{margin-top:23px;color:#8a9a9f;text-align:center;font-size:11px;line-height:1.8}[hidden]{display:none!important}@media(max-width:800px){main{padding:24px 16px}.layout{grid-template-columns:1fr}.stage{max-width:360px;width:100%;margin:auto}.heading{align-items:flex-start;gap:12px}h1{font-size:24px}.description{font-size:13px}.badge{padding:7px 10px}.controls,.conversation,.diagnostics{padding:18px}.metrics{gap:8px}.metrics strong{font-size:12px}}
/* 启动响应沿用有界事件日志；保留 JSON 的换行与缩进，长值仍可折行。 */
#log .start-response{white-space:pre-wrap;margin:6px 0}
/* NLP 回复视频单独展示；沿用卡片、按钮和键盘焦点样式，不改变 xrtc 播放区。 */
.reply-video{padding:22px;min-width:0}.reply-video .section-title{margin-bottom:16px}#replyVideo{display:block;width:100%;max-height:360px;aspect-ratio:16/9;object-fit:contain;border:1px solid #d6e0e4;border-radius:10px;background:#142b33}#replyVideo:focus-visible{outline:3px solid #8fc6bb;outline-offset:2px}#replyVideoStatus{margin:12px 0;font-size:12px;line-height:1.7;color:#607680;overflow-wrap:anywhere}.reply-video-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.reply-video-list:empty{display:none}.reply-video-list button{min-width:40px}.reply-video-list button[aria-pressed="true"],.reply-video-list button[aria-current="true"],.reply-video-list button.active{color:#fff;background:#176b60;border-color:#176b60}@media(max-width:800px){.reply-video{padding:18px}#replyVideo{max-height:280px}}
/* 会话开始前选择输入方式；文件面板与原有控制区保持同样的键盘焦点和窄屏布局。 */
.mode-field{display:flex;align-items:center;gap:12px;margin-bottom:16px}.mode-field label,.pcm-file-panel>label{font-size:12px;color:#607680}.mode-field select{flex:1;min-width:0;font:inherit;font-size:13px;padding:10px;border:1px solid #d6e0e4;border-radius:8px;background:#fff;color:#304c59}.mode-field select:disabled{opacity:.65}.mode-field select:focus-visible,.pcm-file-panel input:focus-visible{outline:3px solid #8fc6bb;outline-offset:2px}.pcm-file-panel{margin:16px 0;padding:16px;border:1px solid #dfe8e6;border-radius:10px;background:#f7faf9}.pcm-file-panel>label{display:block;margin-bottom:9px}.pcm-file-panel input{display:block;max-width:100%;font:inherit;font-size:12px;color:#607680}.pcm-file-panel .hint{margin:12px 0;overflow-wrap:anywhere}.pcm-file-panel progress{display:block;width:100%;height:8px;margin-top:16px;accent-color:#176b60}.pcm-file-panel #pcmFileStatus{margin-bottom:0}@media(max-width:800px){.mode-field{align-items:flex-start;flex-direction:column;gap:8px}.mode-field select{width:100%}.pcm-file-panel{padding:13px}}
/* 录后发送面板把本地录制数据量与上传进度分开呈现。 */
.record-panel{margin:16px 0;padding:16px;border:1px solid #dfe8e6;border-radius:10px;background:#f7faf9}.record-panel .hint{margin:12px 0;overflow-wrap:anywhere}.record-metrics{display:flex;gap:18px;flex-wrap:wrap;margin-top:15px;font-size:12px;color:#607680}.record-metrics strong{margin-left:6px;color:#304c59;font-weight:550}.record-panel progress{display:block;width:100%;height:8px;margin-top:16px;accent-color:#176b60}.record-panel #recordStatus{margin-bottom:0}.record-download{display:inline-flex;align-items:center;font-size:13px;padding:10px 14px;border:1px solid #d6e0e4;border-radius:8px;background:#fff;color:#28796c;text-decoration:none}.record-download:hover{background:#edf4f3}.record-download:focus-visible{outline:3px solid #8fc6bb;outline-offset:2px}@media(max-width:800px){.record-panel{padding:13px}.record-metrics{gap:10px}}
/* 会话操作置于输入选择之前；输入切换期间只禁用来源控件，结束会话始终可用。 */
.session-actions{margin-bottom:18px;padding-bottom:17px;border-bottom:1px solid #edf1f2}.controls .switch-warning{margin:0 0 9px;color:#687d78}.controls #inputSwitchStatus{margin:0 0 14px;color:#28796c}
/* 文本面板与录音/文件面板互斥显示；textarea保留草稿，超限计数用文字和颜色共同提示。 */
/* 允许纵向调整输入高度；沿用键盘焦点轮廓，窄屏时不产生横向滚动。 */
.text-panel{margin:16px 0;padding:16px;border:1px solid #dfe8e6;border-radius:10px;background:#f7faf9;min-width:0}.text-panel>label{display:block;margin-bottom:9px;font-size:12px;color:#607680}.text-panel textarea{display:block;width:100%;min-height:120px;resize:vertical;font:inherit;font-size:14px;line-height:1.7;padding:11px;border:1px solid #d6e0e4;border-radius:8px;background:#fff;color:#304c59}.text-panel textarea:focus-visible{outline:3px solid #8fc6bb;outline-offset:2px}.text-panel textarea:disabled{opacity:.65}.text-input-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}.text-count{font-size:12px;color:#607680;margin:0}.text-count.over-limit{color:#b64a43;font-weight:600}.text-panel .hint{margin:12px 0;overflow-wrap:anywhere}.text-panel #textStatus{margin-bottom:0}@media(max-width:800px){.text-panel{padding:13px}}