:root {
  color-scheme: dark;
  --bg: #061118;
  --panel: rgba(10, 30, 39, .82);
  --panel-solid: #0a1e27;
  --line: rgba(137, 240, 224, .16);
  --line-strong: rgba(137, 240, 224, .35);
  --text: #eafaf8;
  --muted: #8ca8ad;
  --cyan: #69f6e4;
  --cyan-2: #25cfc8;
  --blue: #65a7ff;
  --amber: #f5c97a;
  --danger: #ff7d89;
  --mouth-level: .16;
  --mic-level: 0;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: var(--bg); color: var(--text); overflow: hidden; }
body { overscroll-behavior: none; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.app-shell {
  width: 100vw; height: 100dvh; min-height: 620px; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(31, 150, 147, .16), transparent 31%),
    radial-gradient(circle at 0 100%, rgba(44, 99, 142, .13), transparent 34%),
    linear-gradient(160deg, #07151d 0%, #030a0f 66%, #06141b 100%);
}
.app-shell::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .24;
  background-image: linear-gradient(rgba(92, 217, 205, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(92, 217, 205, .03) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(circle at center, black 12%, transparent 74%);
}
.topbar {
  height: 76px; padding: 0 clamp(22px, 3.2vw, 52px); display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 30; border-bottom: 1px solid rgba(132, 235, 221, .08);
  background: linear-gradient(180deg, rgba(3, 12, 17, .84), rgba(3, 12, 17, .15));
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand strong { display: block; font-size: 17px; letter-spacing: .08em; font-weight: 650; }
.brand small { display: block; margin-top: 3px; font-size: 9px; letter-spacing: .24em; color: #6f9196; }
.brand-mark { width: 37px; height: 37px; position: relative; border: 1px solid rgba(108, 248, 230, .4); border-radius: 12px; transform: rotate(45deg); box-shadow: inset 0 0 18px rgba(84, 247, 225, .08); }
.brand-mark span { position: absolute; width: 7px; height: 12px; top: 12px; background: var(--cyan); border-radius: 5px; box-shadow: 0 0 10px rgba(105, 246, 228, .6); transform: rotate(-45deg); }
.brand-mark span:first-child { left: 8px; } .brand-mark span:last-child { right: 8px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.command-mode-toggle {
  position: absolute;
  z-index: 40;
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 210, 119, .2);
  border-radius: 999px;
  background: rgba(17, 12, 7, .56);
  color: rgba(255, 244, 225, .68);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .2);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.command-mode-toggle:hover,
.command-mode-toggle:focus-visible { color: #fff4d8; border-color: rgba(255, 210, 119, .46); background: rgba(34, 22, 10, .82); }
.command-mode-toggle:active { transform: scale(.97); }
.command-mode-toggle i { width: 7px; height: 7px; border-radius: 50%; background: #ffd477; box-shadow: 0 0 12px rgba(255, 200, 89, .52); }
.command-mode-toggle span { font-size: 10px; color: rgba(230, 215, 191, .52); }
.command-mode-toggle strong { font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.app-shell[data-command-mode="llm"] .command-mode-toggle { border-color: rgba(116, 224, 255, .34); background: rgba(6, 31, 42, .66); color: #dff9ff; }
.app-shell[data-command-mode="llm"] .command-mode-toggle i { background: #74e0ff; box-shadow: 0 0 12px rgba(116, 224, 255, .62); }
.mode-badge { height: 36px; padding: 0 14px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 999px; color: #a9bec1; font-size: 12px; background: rgba(6, 22, 29, .55); }
.mode-badge i { width: 7px; height: 7px; border-radius: 50%; background: #7a8e91; box-shadow: 0 0 0 4px rgba(122, 142, 145, .08); }
.mode-badge.online i { background: var(--cyan); box-shadow: 0 0 0 4px rgba(105, 246, 228, .10), 0 0 12px rgba(105, 246, 228, .55); }
.mode-badge.error i { background: var(--danger); }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); background: rgba(7, 25, 32, .66); color: #9ab5b8; border-radius: 12px; display: grid; place-items: center; cursor: pointer; transition: .2s ease; }
.icon-button:hover { color: var(--cyan); border-color: var(--line-strong); background: rgba(20, 58, 66, .62); }
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.main-stage { position: absolute; inset: 76px 0 154px; display: grid; place-items: center; }
.face-zone { width: min(930px, 84vw); height: 100%; position: relative; display: grid; place-items: center; padding-bottom: 82px; }
.face-frame { width: min(700px, 67vw, 64vh); aspect-ratio: 820/540; position: relative; z-index: 4; filter: drop-shadow(0 35px 50px rgba(0,0,0,.48)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.robot-face { width: 100%; height: 100%; overflow: visible; }
.face-shell { stroke: rgba(115, 242, 224, .13); stroke-width: 2; }
.face-rim { fill: none; stroke: rgba(102, 223, 209, .11); stroke-width: 1.5; }
.brow { fill: none; stroke: rgba(123, 240, 225, .72); stroke-width: 10; stroke-linecap: round; transition: transform .35s ease, d .35s ease; filter: drop-shadow(0 0 8px rgba(74, 235, 219, .25)); }
.eye-socket { fill: rgba(9, 35, 43, .8); stroke: rgba(113, 247, 228, .28); stroke-width: 2; }
.eye-glow { opacity: .92; transition: .35s ease; }
.pupil { fill: #e9ffff; filter: drop-shadow(0 0 9px #61f4e2); transition: rx .3s ease, ry .3s ease, transform .11s linear; transform-origin: center; }
.eye-shine { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; opacity: .72; }
.eyelid { fill: #0b2029; transition: height .12s ease; }
.cheek { fill: rgba(255, 139, 168, 0); filter: blur(2px); transition: fill .4s ease; }
.mouth-line, .mouth-concerned { fill: none; stroke: var(--cyan); stroke-width: 11; stroke-linecap: round; filter: drop-shadow(0 0 9px rgba(97, 242, 225, .34)); transition: opacity .25s; }
.mouth-speaking { fill: var(--cyan); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scaleY(var(--mouth-scale, .3)); filter: drop-shadow(0 0 12px rgba(97, 242, 225, .48)); }
.mouth-concerned, .mouth-surprised { opacity: 0; }
.mouth-surprised { fill: none; stroke: var(--cyan); stroke-width: 10; filter: drop-shadow(0 0 10px rgba(97, 242, 225, .38)); }
.sensor-dot { fill: var(--cyan); opacity: .7; filter: drop-shadow(0 0 9px var(--cyan)); }
.chin-detail { fill: none; stroke: rgba(100, 214, 203, .18); stroke-width: 3; stroke-linecap: round; }
.ambient-orbit { position: absolute; z-index: 1; border-radius: 50%; border: 1px solid rgba(92, 231, 213, .09); pointer-events: none; }
.orbit-one { width: min(750px, 73vw, 70vh); aspect-ratio: 1; animation: orbitPulse 6s ease-in-out infinite; }
.orbit-two { width: min(610px, 60vw, 58vh); aspect-ratio: 1; border-style: dashed; animation: slowSpin 36s linear infinite; }
.sound-halo { position: absolute; z-index: 2; width: min(710px, 70vw, 67vh); aspect-ratio: 1; display: grid; place-items: center; pointer-events: none; }
.sound-halo span { position: absolute; width: 100%; height: 100%; border: 1px solid rgba(98, 244, 225, .10); border-radius: 50%; opacity: 0; transform: scale(.67); }
.app-shell[data-state="listening"] .sound-halo span, .app-shell[data-state="speaking"] .sound-halo span { animation: sonar 2.4s ease-out infinite; }
.sound-halo span:nth-child(2) { animation-delay: .3s!important; }.sound-halo span:nth-child(3){animation-delay:.6s!important}.sound-halo span:nth-child(4){animation-delay:.9s!important}.sound-halo span:nth-child(5){animation-delay:1.2s!important}.sound-halo span:nth-child(6){animation-delay:1.5s!important}.sound-halo span:nth-child(7){animation-delay:1.8s!important}
.assistant-state { position: absolute; z-index: 6; bottom: 0; text-align: center; max-width: 690px; padding: 0 20px; }
.state-kicker { display: inline-flex; align-items: center; gap: 8px; color: #82a3a7; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.state-dot { width: 6px; height: 6px; border-radius: 50%; background: #779095; transition: .2s; }
.assistant-state h1 { margin: 9px 0 5px; font-size: clamp(23px, 2.4vw, 34px); letter-spacing: .04em; font-weight: 580; }
.assistant-state p { margin: 0; color: #8aa5aa; font-size: clamp(12px, 1.1vw, 15px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-shell[data-state="listening"] .state-dot { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.app-shell[data-state="thinking"] .state-dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.app-shell[data-state="speaking"] .state-dot { background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.app-shell[data-state="error"] .state-dot { background: var(--danger); }
.app-shell[data-state="speaking"] .mouth-line { opacity: 0; }
.app-shell[data-state="speaking"] .mouth-speaking { opacity: 1; }
.app-shell[data-state="listening"] .eye-glow { opacity: 1; }
.app-shell[data-state="listening"] .face-frame { transform: scale(1.015); }
.app-shell[data-state="thinking"] .pupil { rx: 18px; ry: 28px; }
.app-shell[data-state="thinking"] .face-frame { animation: thinkFloat 2.8s ease-in-out infinite; }
.app-shell[data-expression="happy"] .cheek { fill: rgba(255, 139, 168, .24); }
.app-shell[data-expression="happy"] .brow-left { transform: translateY(5px) rotate(4deg); }
.app-shell[data-expression="happy"] .brow-right { transform: translateY(5px) rotate(-4deg); }
.app-shell[data-expression="concerned"] .mouth-line { opacity: 0; }
.app-shell[data-expression="concerned"] .mouth-concerned { opacity: 1; }
.app-shell[data-expression="concerned"] .brow-left { transform: translateY(12px) rotate(9deg); }
.app-shell[data-expression="concerned"] .brow-right { transform: translateY(12px) rotate(-9deg); }
.app-shell[data-expression="surprised"] .mouth-line { opacity: 0; }
.app-shell[data-expression="surprised"] .mouth-surprised { opacity: 1; }
.app-shell[data-expression="surprised"] .pupil { rx: 32px; ry: 42px; }
.app-shell[data-expression="sleepy"] .pupil { ry: 12px; }
.app-shell[data-expression="sleepy"] .eye-glow { opacity: .45; }
.transcript-drawer { position: absolute; z-index: 50; top: 88px; right: 22px; bottom: 172px; width: min(390px, calc(100vw - 44px)); padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 22px; background: rgba(5, 19, 25, .92); backdrop-filter: blur(24px); box-shadow: 0 25px 80px rgba(0,0,0,.45); transform: translateX(calc(100% + 40px)); opacity: 0; pointer-events: none; transition: .35s cubic-bezier(.2,.8,.2,1); }
.transcript-drawer.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.drawer-header, .dialog-header { display: flex; align-items: center; justify-content: space-between; }
.drawer-header small, .dialog-header small, .video-heading small { color: #65888d; letter-spacing: .2em; font-size: 9px; }
.drawer-header h2, .dialog-header h2 { margin: 3px 0 0; font-size: 20px; font-weight: 600; }
.transcript-list { flex: 1; min-height: 0; overflow-y: auto; margin: 20px -5px 15px 0; padding-right: 9px; scrollbar-width: thin; scrollbar-color: rgba(106, 239, 222, .22) transparent; }
.empty-transcript { height: 100%; display: grid; place-content: center; text-align: center; color: #607d82; padding: 30px; }
.empty-icon { font-size: 25px; letter-spacing: .28em; color: #5dc9be; }
.empty-transcript p { font-size: 12px; line-height: 1.8; }
.message { margin-bottom: 17px; display: flex; flex-direction: column; gap: 5px; }
.message.user { align-items: flex-end; }
.message .meta { color: #5f7f84; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.message .bubble { max-width: 88%; padding: 10px 13px; border-radius: 15px 15px 15px 4px; background: rgba(26, 58, 66, .72); color: #d7ebea; font-size: 13px; line-height: 1.6; word-break: break-word; }
.message.user .bubble { border-radius: 15px 15px 4px 15px; background: rgba(42, 127, 121, .42); color: #e7fffb; }
.message.system .bubble { background: rgba(116, 78, 31, .22); color: #e4cda6; }
.text-button { border: 0; background: transparent; color: #69898e; cursor: pointer; padding: 8px; font-size: 11px; }
.text-button:hover { color: var(--cyan); }
.control-dock { height: 154px; position: absolute; z-index: 35; left: 0; right: 0; bottom: 0; padding: 17px clamp(20px,3.2vw,52px) max(17px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr); align-items: center; gap: 24px; border-top: 1px solid rgba(128, 237, 220, .09); background: linear-gradient(180deg, rgba(4, 14, 19, .18), rgba(3, 12, 16, .96) 28%); backdrop-filter: blur(16px); }
.text-command { height: 48px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 15px; background: rgba(11, 31, 39, .72); overflow: hidden; }
.text-command:focus-within { border-color: rgba(103, 244, 226, .42); box-shadow: 0 0 0 3px rgba(103, 244, 226, .05); }
.text-command input { flex: 1; min-width: 0; height: 100%; padding: 0 4px 0 16px; border: 0; background: transparent; color: var(--text); outline: none; font-size: 13px; }
.text-command input::placeholder { color: #58767b; }
.text-command button { width: 47px; height: 100%; border: 0; background: transparent; color: #6d9998; cursor: pointer; display: grid; place-items: center; }
.text-command button:hover { color: var(--cyan); }
.text-command svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.voice-controls { display: flex; align-items: center; gap: 17px; }
.mic-button { position: relative; width: 132px; height: 58px; border: 1px solid rgba(105, 246, 228, .58); border-radius: 999px; background: linear-gradient(135deg, rgba(26, 119, 113, .82), rgba(13, 72, 76, .9)); color: #eafffc; display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; box-shadow: 0 0 30px rgba(31, 195, 181, .13), inset 0 1px rgba(255,255,255,.09); transition: .25s ease; }
.mic-button:hover { transform: translateY(-2px); box-shadow: 0 8px 34px rgba(31, 195, 181, .21); }
.mic-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mic-button span:last-child { font-size: 13px; font-weight: 600; }
.mic-rings { position: absolute; inset: -1px; pointer-events: none; }
.mic-rings i { position: absolute; inset: 0; border: 1px solid rgba(105, 246, 228, .25); border-radius: 999px; opacity: 0; }
.app-shell[data-session="active"] .mic-rings i { animation: buttonPulse 2s ease-out infinite; }
.app-shell[data-session="active"] .mic-rings i:last-child { animation-delay: 1s; }
.app-shell[data-session="active"] .mic-button { background: linear-gradient(135deg, rgba(24, 108, 104, .9), rgba(10, 59, 66, .95)); }
.secondary-control { height: 42px; padding: 0 14px; border-radius: 13px; border: 1px solid rgba(255, 125, 137, .2); background: rgba(67, 25, 32, .28); color: #c4949a; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.secondary-control:not(:disabled):hover { color: #ffd8dd; border-color: rgba(255,125,137,.48); }
.secondary-control:disabled { opacity: .35; cursor: not-allowed; }
.stop-square { width: 10px; height: 10px; border-radius: 2px; background: currentColor; }
.level-meter { width: 53px; height: 26px; display: flex; align-items: center; gap: 3px; }
.level-meter span { width: 3px; height: 5px; min-height: 5px; border-radius: 3px; background: linear-gradient(to top, #2fcfc4, #a1fff2); opacity: .24; transition: height .07s linear, opacity .07s linear; }
.quick-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.quick-actions button { height: 36px; padding: 0 12px; border: 1px solid rgba(114, 218, 206, .12); border-radius: 11px; background: rgba(10, 29, 37, .6); color: #78999e; font-size: 11px; cursor: pointer; }
.quick-actions button:hover { color: var(--cyan); border-color: rgba(105,246,228,.32); }
.video-layer { position: fixed; z-index: 70; inset: clamp(10px, 8vh, 76px) 0 clamp(10px, 10vh, 96px); padding: clamp(8px,2.4vw,30px); display: grid; place-items: center; background: rgba(1, 7, 10, .62); backdrop-filter: blur(18px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.video-layer.open { opacity: 1; pointer-events: auto; }
.video-card { width: min(1120px, 96vw); height: min(760px, 100%); min-height: min(380px, 100%); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(126, 238, 222, .18); border-radius: 24px; background: #07151c; box-shadow: 0 35px 100px rgba(0,0,0,.65); transform: scale(.96); transition: width .28s ease, height .28s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.video-layer[data-video-orientation="portrait"] .video-card { width: min(620px, 96vw); }
.video-layer.open .video-card { transform: scale(1); }
.video-header { height: 64px; flex: 0 0 64px; padding: 0 17px 0 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(115, 228, 213, .1); }
.video-heading { display: flex; align-items: center; gap: 11px; }
.video-heading strong { display: block; margin-top: 2px; font-size: 14px; }
.video-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.video-head-actions { display: flex; gap: 8px; }
.small-control { border: 1px solid var(--line); border-radius: 10px; background: transparent; color: #819fa3; padding: 0 11px; cursor: pointer; }
.video-viewport { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; background: #020608; overflow: hidden; }
.video-viewport video, .video-viewport iframe { position: absolute; inset: 0; display: none; width: 100%; height: 100%; min-width: 0; min-height: 0; border: 0; background: #000; }
.video-viewport video { object-fit: contain !important; object-position: center center !important; max-width: 100%; max-height: 100%; }
.video-viewport video.active, .video-viewport iframe.active { display: block; }
.video-placeholder { display: grid; place-items: center; color: #557176; }
.play-glyph { width: 65px; height: 65px; display: grid; place-items: center; padding-left: 5px; border: 1px solid rgba(105,246,228,.18); border-radius: 50%; color: rgba(105,246,228,.5); font-size: 20px; }
.video-placeholder p { margin: 14px 0; font-size: 12px; letter-spacing: .1em; }
.video-footer { height: 46px; flex: 0 0 46px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; color: #718e92; font-size: 11px; border-top: 1px solid rgba(115, 228, 213, .08); }
.video-hint { color: #526e72; }
.round-video-controls { display: none; align-items: center; gap: 7px; }
.round-video-controls button { height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(12, 38, 46, .78); color: #89a9ad; font-size: 10px; cursor: pointer; }
.round-video-controls button:hover { color: var(--cyan); border-color: var(--line-strong); }
.video-mini { position: fixed; z-index: 60; right: 28px; bottom: 176px; height: 64px; display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 17px; background: rgba(7, 25, 32, .94); backdrop-filter: blur(18px); box-shadow: 0 16px 50px rgba(0,0,0,.45); transform: translateY(20px); opacity: 0; pointer-events: none; transition: .3s; overflow: hidden; }
.video-mini.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.video-mini > button { border: 0; background: transparent; color: var(--text); cursor: pointer; }
#videoRestore { padding: 0 17px; display: flex; align-items: center; gap: 12px; text-align: left; }
#videoRestore small { display: block; color: #68868b; font-size: 9px; } #videoRestore strong { display: block; max-width: 190px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.mini-equalizer { width: 24px; height: 24px; display: flex; gap: 3px; align-items: center; justify-content: center; border-radius: 8px; background: rgba(69, 211, 198, .1); }
.mini-equalizer i { width: 2px; border-radius: 2px; background: var(--cyan); animation: eq .8s ease-in-out infinite alternate; }.mini-equalizer i:nth-child(1){height:7px}.mini-equalizer i:nth-child(2){height:14px;animation-delay:.2s}.mini-equalizer i:nth-child(3){height:9px;animation-delay:.4s}
.mini-pause { width: 48px; border-left: 1px solid var(--line)!important; color: #8eaaad!important; }
.settings-dialog { width: min(610px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 40px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 24px; background: #081a22; color: var(--text); box-shadow: 0 35px 110px rgba(0,0,0,.7); overflow: hidden; }
.settings-dialog::backdrop { background: rgba(0, 5, 8, .72); backdrop-filter: blur(12px); }
.settings-dialog form { max-height: inherit; display: flex; flex-direction: column; }
.dialog-header { padding: 22px 23px; border-bottom: 1px solid var(--line); }
.settings-content { padding: 5px 23px 20px; overflow-y: auto; }
.settings-section { padding: 19px 0; border-bottom: 1px solid rgba(115, 228, 213, .08); }
.settings-section:last-child { border-bottom: 0; }
.settings-section h3 { margin: 0 0 15px; color: #b8cecf; font-size: 12px; letter-spacing: .1em; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-grid div { padding: 12px 13px; border: 1px solid rgba(112, 217, 204, .1); border-radius: 12px; background: rgba(14, 38, 47, .52); }
.info-grid span, .info-grid strong { display: block; }.info-grid span { color: #648287; font-size: 10px; }.info-grid strong { margin-top: 5px; color: #c7dcdd; font-size: 12px; font-weight: 550; }
.settings-note, .settings-section > p { margin: 13px 0 0; color: #728f94; font-size: 11px; line-height: 1.7; }
.toggle-row, .range-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 15px; }
.toggle-row > span, .range-row > span { flex: 1; }
.toggle-row strong, .range-row strong { display: block; font-size: 12px; color: #b8cecf; }.toggle-row small, .range-row small { display: block; margin-top: 4px; color: #607f84; font-size: 10px; line-height: 1.5; }
.toggle-row input { position: absolute; opacity: 0; }
.toggle-row i { width: 44px; height: 24px; position: relative; flex: 0 0 auto; border-radius: 999px; background: #18343d; cursor: pointer; transition: .2s; }
.toggle-row i::after { content:""; position:absolute; width:18px; height:18px; top:3px; left:3px; border-radius:50%; background:#718b8f; transition:.2s; }
.toggle-row input:checked + i { background: rgba(39, 179, 168, .5); }.toggle-row input:checked + i::after { transform: translateX(20px); background: var(--cyan); }
.range-row input { width: 170px; accent-color: var(--cyan-2); }
.dialog-footer { padding: 17px 23px 22px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line); }
.ghost-button, .primary-button { height: 40px; padding: 0 17px; border-radius: 11px; cursor: pointer; }
.ghost-button { border: 1px solid var(--line); background: transparent; color: #76969a; }.primary-button { border: 1px solid rgba(103, 246, 227, .43); background: rgba(29, 121, 114, .72); color: #eafffc; }
.toast-stack { position: fixed; z-index: 100; top: 88px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { min-width: 260px; max-width: min(520px, 88vw); padding: 11px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(7, 25, 32, .94); box-shadow: 0 12px 45px rgba(0,0,0,.4); color: #c6dcdd; font-size: 12px; text-align: center; animation: toastIn .25s ease; }
.toast.error { border-color: rgba(255,125,137,.35); color: #ffd3d8; }
.toast.success { border-color: rgba(105,246,228,.31); color: #dffffa; }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes orbitPulse { 50% { transform: scale(1.04); opacity: .55; } }
@keyframes sonar { 0% { transform: scale(.68); opacity: 0; } 14% { opacity: .32; } 100% { transform: scale(1.05); opacity: 0; } }
@keyframes thinkFloat { 50% { transform: translateY(-6px) rotate(.5deg); } }
@keyframes buttonPulse { 0% { transform: scale(1); opacity: .35; } 100% { transform: scale(1.25,1.55); opacity: 0; } }
@keyframes eq { to { height: 18px; } }
@keyframes toastIn { from { transform: translateY(-8px); opacity:0; } }
@media (max-width: 1050px) {
  .control-dock { grid-template-columns: 1fr auto; }
  .quick-actions { display: none; }
  .face-zone { width: 94vw; }
}
@media (max-width: 720px), (max-height: 700px) {
  .app-shell { min-height: 520px; }
  .topbar { height: 62px; padding: 0 16px; }.brand small { display:none; }.brand strong{font-size:14px}.brand-mark{width:31px;height:31px}.brand-mark span{top:9px}.mode-badge { padding: 0 9px; }.mode-badge span { display:none; }
  .main-stage { inset: 62px 0 126px; }.face-zone{padding-bottom:68px}.face-frame{width:min(620px,90vw,59vh)}
  .assistant-state h1{font-size:21px}.assistant-state p{max-width:90vw;font-size:11px}.state-kicker{font-size:9px}
  .control-dock { height: 126px; padding: 11px 14px max(11px, env(safe-area-inset-bottom)); grid-template-columns: 1fr; gap: 8px; }
  .text-command { height: 39px; order: 2; }.text-command input{font-size:11px}.voice-controls{justify-content:center;order:1}.mic-button{width:124px;height:49px}.secondary-control{height:38px}.level-meter{display:none}
  .video-layer { inset: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom)); padding: 0; }.video-card{width:100%;height:100%;min-height:0;border-radius:17px}.video-layer[data-video-orientation="portrait"] .video-card{width:min(540px,100%)}.video-header{height:54px;flex-basis:54px}.video-footer{height:40px;flex-basis:40px}.video-hint{display:none}
  .transcript-drawer{top:72px;bottom:136px;right:10px;width:calc(100vw - 20px)}
  .video-mini{right:13px;bottom:138px}
}
@media (orientation: portrait) and (min-height: 800px) {
  .face-frame { width: min(720px, 92vw); }
  .face-zone { padding-bottom: 145px; }
}

/*
 * Round robot displays expose a square viewport whose physical corners are not
 * visible. Every interactive surface below is therefore kept inside an
 * inscribed safe rectangle instead of relying on the panel to crop it.
 */
body:has(.app-shell[data-display="round"]) { background: #010407; }
.app-shell[data-display="round"] {
  width: var(--display-diameter, 100vmin);
  height: var(--display-diameter, 100vmin);
  min-height: 0;
  position: fixed;
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(105, 246, 228, .11), 0 0 90px rgba(0, 0, 0, .75);
}
.app-shell[data-display="round"] .topbar {
  width: 58vmin;
  height: 10vmin;
  position: absolute;
  top: 8vmin;
  left: 50%;
  padding: 0;
  transform: translateX(-50%);
  border-bottom: 0;
  background: transparent;
}
.app-shell[data-display="round"] .brand small,
.app-shell[data-display="round"] .mode-badge span { display: none; }
.app-shell[data-display="round"] .main-stage { inset: 18vmin 10vmin 22vmin; }
.app-shell[data-display="round"] .face-zone { width: 76vmin; padding-bottom: 12vmin; }
.app-shell[data-display="round"] .face-frame { width: 62vmin; }
.app-shell[data-display="round"] .orbit-one { width: 70vmin; }
.app-shell[data-display="round"] .orbit-two { width: 58vmin; }
.app-shell[data-display="round"] .sound-halo { width: 67vmin; }
.app-shell[data-display="round"] .assistant-state { bottom: 0; max-width: 62vmin; padding: 0 3vmin; }
.app-shell[data-display="round"] .assistant-state h1 { font-size: clamp(19px, 3vmin, 30px); }
.app-shell[data-display="round"] .assistant-state p { max-width: 56vmin; font-size: clamp(10px, 1.25vmin, 14px); }
.app-shell[data-display="round"] .control-dock {
  width: 52vmin;
  height: 12vmin;
  left: 50%;
  right: auto;
  bottom: 10vmin;
  padding: 1.5vmin 3vmin;
  display: flex;
  justify-content: center;
  gap: 0;
  transform: translateX(-50%);
  border: 1px solid rgba(128, 237, 220, .10);
  border-radius: 999px;
  background: rgba(3, 12, 16, .82);
}
.app-shell[data-display="round"] .text-command { display: none; }
.app-shell[data-display="round"] .voice-controls { justify-content: center; gap: clamp(9px, 1.8vmin, 17px); }
.app-shell[data-display="round"] .quick-actions { display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(5px, .8vmin, 8px); }
.app-shell[data-display="round"] .quick-actions button { padding: 0 clamp(7px, 1vmin, 11px); white-space: nowrap; }
.app-shell[data-display="round"] .quick-actions button:nth-child(n+3) { display: none; }
.app-shell[data-display="round"] .video-layer { inset: 0; padding: 0; border-radius: 50%; }
.app-shell[data-display="round"] .video-card {
  width: 76vmin;
  height: 56vmin;
  min-height: 0;
  border-radius: clamp(17px, 2.4vmin, 26px);
}
.app-shell[data-display="round"] .video-layer[data-video-orientation="portrait"] .video-card {
  width: 50vmin;
  height: 80vmin;
}
.app-shell[data-display="round"] .video-header {
  height: clamp(48px, 6vmin, 64px);
  flex-basis: clamp(48px, 6vmin, 64px);
  padding: 0 clamp(12px, 1.8vmin, 19px);
}
.app-shell[data-display="round"] .video-heading { min-width: 0; }
.app-shell[data-display="round"] .video-heading > div { min-width: 0; }
.app-shell[data-display="round"] .video-heading strong {
  max-width: 29vmin;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell[data-display="round"] .video-footer {
  height: clamp(36px, 4.6vmin, 46px);
  flex-basis: clamp(36px, 4.6vmin, 46px);
  padding: 0 clamp(13px, 2vmin, 20px);
}
.app-shell[data-display="round"] .video-hint { display: none; }
.app-shell[data-display="round"] .round-video-controls { display: flex; }
.app-shell[data-display="round"] .video-mini {
  right: 50%;
  bottom: 20vmin;
  max-width: 68vmin;
  transform: translate(50%, 20px);
}
.app-shell[data-display="round"] .video-mini.open { transform: translate(50%, 0); }
.app-shell[data-display="round"] .transcript-drawer {
  top: 17vmin;
  right: 16vmin;
  bottom: 22vmin;
  width: 68vmin;
}
.app-shell[data-display="round"] .settings-dialog { width: min(64vmin, 610px); max-height: 72vmin; }
.app-shell[data-display="round"] .toast-stack { top: 17vmin; }
.app-shell[data-display="round"] .toast { max-width: 58vmin; }
@media (max-width: 640px), (max-height: 640px) {
  .app-shell[data-display="round"] .level-meter { display: none; }
  .app-shell[data-display="round"] .secondary-control { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .app-shell[data-display="round"] .secondary-control span:last-child { display: none; }
  .app-shell[data-display="round"] .mic-button { width: 116px; height: 46px; }
  .app-shell[data-display="round"] .control-dock { width: 52vmin; gap: 5px; }
  .app-shell[data-display="round"] .quick-actions button { height: 32px; padding: 0 6px; font-size: 9px; }
  .app-shell[data-display="round"] .video-heading small { display: none; }
  .app-shell[data-display="round"] .video-heading strong { margin-top: 0; font-size: 12px; }
  .app-shell[data-display="round"] .small-control { padding: 0 8px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms!important; animation-iteration-count: 1!important; scroll-behavior: auto!important; }
}

/*
 * Opera-mask face UI
 * The reference board includes a robot housing and presentation chrome. This
 * layer intentionally keeps only the black display and the expressive mask.
 */
:root {
  --bg: #010305;
  --text: #fff8ed;
  --muted: #a59a8d;
  --cyan: #52dcff;
  --cyan-2: #0da7df;
  --amber: #ffc45a;
}

@property --face-ambient {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --face-core-glow {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

html,
body { background: #000; }

.app-shell {
  min-height: 0;
  --face-ambient: transparent;
  --face-core-glow: transparent;
  background: radial-gradient(ellipse at 50% 44%, rgba(18, 31, 39, .64) 0%, rgba(2, 7, 10, .96) 51%, #000 88%), #000;
  transition:
    --face-ambient 1.1s cubic-bezier(.16,1,.3,1),
    --face-core-glow 1.1s cubic-bezier(.16,1,.3,1);
}

.app-shell[data-face-performing="active"][data-mask="happy"] {
  --face-ambient: rgba(175, 32, 18, .23);
  --face-core-glow: rgba(255, 176, 47, .18);
}

.app-shell[data-face-performing="active"][data-mask="focused"] {
  --face-ambient: rgba(204, 66, 9, .22);
  --face-core-glow: rgba(255, 198, 72, .18);
}

.app-shell[data-face-performing="active"][data-mask="listening"] {
  --face-ambient: rgba(12, 91, 192, .24);
  --face-core-glow: rgba(64, 188, 255, .17);
}

.app-shell[data-face-performing="active"][data-mask="thinking"] {
  --face-ambient: rgba(2, 132, 103, .23);
  --face-core-glow: rgba(70, 235, 188, .16);
}

.app-shell[data-face-performing="active"][data-mask="speaking"] {
  --face-ambient: rgba(126, 26, 162, .23);
  --face-core-glow: rgba(255, 92, 183, .17);
}

.app-shell[data-face-performing="active"][data-mask="alert"] {
  --face-ambient: rgba(194, 15, 25, .25);
  --face-core-glow: rgba(255, 94, 47, .19);
}

.app-shell::before {
  opacity: .42;
  background:
    radial-gradient(circle at 50% 44%, transparent 0 35%, rgba(255, 190, 74, .035) 62%, transparent 76%),
    linear-gradient(112deg, transparent 16%, rgba(255,255,255,.016) 47%, transparent 65%);
  mask-image: none;
}

.topbar {
  height: 72px;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.brand { display: none; }

.topbar-actions {
  margin-left: auto;
  pointer-events: auto;
}

.mode-badge {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: .5;
}

.mode-badge span { display: none; }
.mode-badge i { width: 7px; height: 7px; }

.topbar .icon-button {
  border-color: rgba(255, 213, 139, .08);
  background: rgba(0, 0, 0, .1);
  color: rgba(255, 244, 225, .24);
  opacity: .55;
}

.topbar .icon-button:hover,
.topbar .icon-button:focus-visible {
  opacity: 1;
  color: #ffd98d;
  border-color: rgba(255, 211, 127, .28);
  background: rgba(17, 12, 7, .68);
}

.main-stage { inset: 0; }

.face-zone {
  width: 100%;
  height: 100%;
  padding: 0;
  display: grid;
  place-items: center;
}

.ambient-orbit,
.sound-halo { display: none; }

.face-frame {
  width: min(820px, 66vw, 78vh);
  aspect-ratio: 1040 / 750;
  z-index: 2;
  filter: none;
  transform: translateY(clamp(-38px, -3.5vh, -16px));
  isolation: isolate;
}

.face-frame::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 11% 9% 13%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: scale(.94);
  background: radial-gradient(ellipse at 50% 50%, var(--face-core-glow) 0%, var(--face-ambient) 52%, transparent 76%);
  filter: blur(16px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), background 1.1s cubic-bezier(.16,1,.3,1);
}

.app-shell[data-face-performing="active"] .face-frame::before { opacity: .72; }

.opera-mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 44% 44% 48% 48%;
  filter: drop-shadow(0 22px 46px rgba(0,0,0,.48));
  isolation: isolate;
}

.opera-mask::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 10%;
  background: linear-gradient(to bottom, transparent, #010507 72%);
  pointer-events: none;
}

.mask-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transform: scale(.975);
  filter: blur(5px) saturate(.9);
  transition: opacity .42s ease, transform .7s cubic-bezier(.16,1,.3,1), filter .55s ease;
  user-select: none;
  pointer-events: none;
  visibility: hidden;
  -webkit-mask-image: radial-gradient(ellipse 59% 80% at 50% 54%, #000 59%, rgba(0,0,0,.9) 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 59% 80% at 50% 54%, #000 59%, rgba(0,0,0,.9) 72%, transparent 100%);
}

.mask-face.is-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0) saturate(1);
  visibility: visible;
}

.mask-face.is-entering,
.mask-face.is-leaving { visibility: visible; }

.mask-face.is-entering {
  z-index: 2;
  animation: operaFaceReveal var(--face-reveal-duration, 880ms) cubic-bezier(.16,1,.3,1) both;
}

.mask-face.is-leaving {
  z-index: 1;
  animation: operaFaceRelease var(--face-reveal-duration, 880ms) cubic-bezier(.4,0,.2,1) both;
}

.mask-sheen {
  position: absolute;
  z-index: 5;
  inset: 5% 11% 12%;
  border-radius: 50%;
  pointer-events: none;
  opacity: .24;
  background: linear-gradient(112deg, transparent 28%, rgba(255,255,255,.035) 46%, transparent 61%);
  mix-blend-mode: screen;
}

.voice-wave {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 5.5%;
  width: clamp(142px, 24%, 270px);
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, .45vw, 7px);
  transform: translateX(-50%);
  opacity: .32;
  transition: opacity .3s ease;
  pointer-events: none;
}

.voice-wave::before,
.voice-wave::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52, 175, 255, .65));
}

.voice-wave::after { transform: scaleX(-1); }

.voice-wave span {
  width: clamp(2px, .32vw, 5px);
  height: calc(3px + var(--mic-level, 0) * 28px);
  min-height: 3px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(to top, #714dff, #24dcff 55%, #ffd25e);
  box-shadow: 0 0 10px rgba(39, 210, 255, .65);
  transition: height .07s linear;
}

.voice-wave span:nth-child(2n) { height: calc(5px + var(--mic-level, 0) * 19px); }
.voice-wave span:nth-child(3n) { height: calc(8px + var(--mic-level, 0) * 34px); }
.app-shell[data-state="listening"] .voice-wave,
.app-shell[data-state="speaking"] .voice-wave { opacity: .95; }
.app-shell[data-state="thinking"] .voice-wave { opacity: .6; }
.app-shell[data-state="thinking"] .voice-wave span { animation: operaThinkWave .9s ease-in-out infinite alternate; }
.app-shell[data-state="speaking"] .voice-wave span { animation: operaSpeakWave .42s ease-in-out infinite alternate; }

.face-change-curtain {
  position: absolute;
  z-index: 10;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  background: transparent;
  pointer-events: none;
  contain: paint;
  clip-path: ellipse(49% 48% at 50% 52%);
  -webkit-mask-image: radial-gradient(ellipse 49% 48% at 50% 52%, #000 0 92%, rgba(0,0,0,.72) 96%, transparent 100%);
  mask-image: radial-gradient(ellipse 49% 48% at 50% 52%, #000 0 92%, rgba(0,0,0,.72) 96%, transparent 100%);
}

.curtain-track {
  position: absolute;
  top: -2%;
  bottom: -2%;
  left: -14%;
  width: 128%;
  will-change: transform;
}

.curtain-panel {
  position: absolute;
  inset: 0;
  overflow: visible;
  background: transparent;
  transform-origin: center;
}

.curtain-panel img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  filter:
    drop-shadow(12px 0 18px rgba(255, 137, 42, .52))
    drop-shadow(-12px 0 18px rgba(255, 137, 42, .52))
    drop-shadow(4px 0 7px rgba(210, 83, 255, .46))
    drop-shadow(-4px 0 7px rgba(210, 83, 255, .46));
  user-select: none;
}

.app-shell[data-face-wipe="rtl"] .curtain-panel {
  transform: scaleX(-1);
}

.app-shell[data-face-changing="cover"] .face-change-curtain,
.app-shell[data-face-changing="covered"] .face-change-curtain,
.app-shell[data-face-changing="reveal"] .face-change-curtain {
  opacity: 1;
}

.app-shell[data-face-changing="cover"][data-face-wipe="ltr"] .curtain-track {
  animation: operaMaskCoverLtr var(--face-cover-duration, 616ms) cubic-bezier(.65,0,.35,1) both;
}

.app-shell[data-face-changing="cover"][data-face-wipe="rtl"] .curtain-track {
  animation: operaMaskCoverRtl var(--face-cover-duration, 616ms) cubic-bezier(.65,0,.35,1) both;
}

.app-shell[data-face-changing="covered"] .curtain-track {
  transform: translateX(0);
}

.app-shell[data-face-changing="covered"] .mask-face {
  transition: none;
}

.app-shell[data-face-changing="reveal"][data-face-wipe="ltr"] .curtain-track {
  animation: operaMaskRevealLtr var(--face-reveal-duration, 616ms) cubic-bezier(.65,0,.35,1) both;
}

.app-shell[data-face-changing="reveal"][data-face-wipe="rtl"] .curtain-track {
  animation: operaMaskRevealRtl var(--face-reveal-duration, 616ms) cubic-bezier(.65,0,.35,1) both;
}

.assistant-state {
  display: none;
  z-index: 12;
  bottom: clamp(96px, 12vh, 118px);
  gap: 0;
  padding: 0 18px;
  pointer-events: none;
  text-shadow: 0 2px 18px #000, 0 2px 5px #000;
}

.state-kicker { display: none; }

.assistant-state h1 {
  margin: 0;
  color: rgba(255, 251, 244, .95);
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 520;
  letter-spacing: .04em;
}

.assistant-state p {
  max-width: min(620px, 82vw);
  margin: 6px auto 0;
  color: rgba(222, 214, 203, .55);
  font-size: clamp(10px, .92vw, 13px);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.control-dock {
  position: fixed;
  z-index: 36;
  height: 88px;
  padding: 12px 22px max(12px, env(safe-area-inset-bottom));
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  gap: 16px;
  border: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.86) 42%, #000);
  backdrop-filter: none;
}

.text-command {
  order: 0;
  width: min(390px, 100%);
  height: 42px;
  border-color: rgba(255, 213, 139, .09);
  background: rgba(4, 5, 6, .38);
  opacity: .28;
  transition: opacity .2s ease, border-color .2s ease;
}

.text-command:hover,
.text-command:focus-within { opacity: 1; border-color: rgba(255, 205, 108, .3); }
.text-command input { color: #fff7e9; }
.text-command input::placeholder { color: rgba(215, 204, 189, .44); }
.text-command button { color: rgba(255, 210, 119, .66); }

.voice-controls { order: 0; gap: 12px; }

.mic-button {
  width: 142px;
  height: 52px;
  border-color: rgba(255, 205, 104, .4);
  background: linear-gradient(145deg, rgba(92, 48, 12, .78), rgba(20, 14, 8, .92));
  box-shadow: 0 0 26px rgba(255, 166, 47, .08), inset 0 1px rgba(255,255,255,.08);
}

.mic-button:hover { box-shadow: 0 8px 32px rgba(255, 153, 34, .18); }
.app-shell[data-session="active"] .mic-button {
  opacity: 1;
  border-color: rgba(255, 143, 107, .58);
  background: linear-gradient(145deg, rgba(112, 39, 22, .9), rgba(31, 12, 9, .96));
}
.app-shell[data-session="active"] .mic-button:hover,
.app-shell[data-session="active"] .mic-button:focus-visible { opacity: 1; }
.app-shell[data-session="active"] .mic-rings i { border-color: rgba(255, 198, 92, .28); }

.secondary-control {
  height: 48px;
  padding: 0 18px;
  border-color: rgba(255, 102, 90, .15);
  background: rgba(49, 9, 7, .3);
}

.secondary-control:disabled { opacity: .58; }

.level-meter { display: none; }
.quick-actions { gap: 7px; }
.quick-actions button { border-color: rgba(255, 213, 139, .08); background: rgba(4,5,6,.38); color: rgba(215,203,188,.36); }
.quick-actions button:hover { color: #ffd37b; border-color: rgba(255,205,104,.3); }
.quick-actions button:not(:first-child) { display: none; }

.toast-stack { top: 20px; }

.app-shell[data-display="round"] {
  min-height: 0;
  border-radius: 50%;
  box-shadow: none;
  background: radial-gradient(circle at 50% 47%, #101a20 0, #020608 62%, #000 100%);
}

.app-shell[data-display="round"] .topbar {
  width: 66vmin;
  height: 8vmin;
  top: 8vmin;
}

.app-shell[data-display="round"] .main-stage { inset: 0; }
.app-shell[data-display="round"] .face-zone { width: 100%; padding: 0; }
.app-shell[data-display="round"] .face-frame {
  width: 80%;
  max-width: none;
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
}
.app-shell[data-display="round"] .assistant-state { bottom: 14vmin; max-width: 68vmin; }
.app-shell[data-display="round"] .assistant-state h1 { font-size: clamp(17px, 2.4vmin, 28px); }
.app-shell[data-display="round"] .assistant-state p { max-width: 62vmin; font-size: clamp(9px, 1.15vmin, 13px); }
.app-shell[data-display="round"] .voice-wave { width: 24vmin; bottom: 5%; }
.app-shell[data-display="round"] .control-dock {
  width: 56vmin;
  height: 9vmin;
  bottom: 6vmin;
  padding: 0;
  border: 0;
  background: transparent;
}
.app-shell[data-display="round"] .text-command,
.app-shell[data-display="round"] .quick-actions { display: none; }
.app-shell[data-display="round"] .voice-controls { width: 100%; }
.app-shell[data-display="round"] .mic-button { width: clamp(108px, 15vmin, 132px); height: clamp(42px, 6vmin, 52px); }

@keyframes operaThinkWave {
  0% { transform: scaleY(.45); opacity: .35; }
  100% { transform: scaleY(1.25); opacity: .95; }
}

@keyframes operaSpeakWave {
  from { transform: scaleY(.36); }
  to { transform: scaleY(1.35); }
}

@keyframes operaMaskCoverLtr {
  from { transform: translateX(-116%); }
  to { transform: translateX(0); }
}

@keyframes operaMaskCoverRtl {
  from { transform: translateX(116%); }
  to { transform: translateX(0); }
}

@keyframes operaMaskRevealLtr {
  from { transform: translateX(0); }
  to { transform: translateX(116%); }
}

@keyframes operaMaskRevealRtl {
  from { transform: translateX(0); }
  to { transform: translateX(-116%); }
}

@keyframes operaFaceReveal {
  0% { opacity: 0; transform: scale(.955); filter: blur(12px) saturate(.7) brightness(.72); }
  42% { opacity: .72; }
  100% { opacity: 1; transform: scale(1); filter: blur(0) saturate(1) brightness(1); }
}

@keyframes operaFaceRelease {
  0% { opacity: 1; transform: scale(1); filter: blur(0) saturate(1); }
  100% { opacity: 0; transform: scale(1.025); filter: blur(9px) saturate(.76); }
}

@media (max-width: 760px) {
  .app-shell { min-height: 0; }
  .face-frame { width: min(76vw, 68vh); transform: translateY(-4vh); }
  .assistant-state { bottom: 96px; }
  .assistant-state p { display: none; }
  .control-dock { height: 78px; grid-template-columns: 1fr auto; }
  .text-command { height: 38px; }
  .quick-actions { display: none; }
  .secondary-control { width: 38px; padding: 0; justify-content: center; }
  .secondary-control span:last-child { display: none; }
}

@media (max-width: 520px) {
  .topbar { padding: 11px; }
  .topbar .icon-button { width: 34px; height: 34px; }
  .face-frame { width: min(76vw, 62vh); }
  .assistant-state { bottom: 88px; }
  .control-dock { grid-template-columns: 1fr; padding-inline: 12px; }
  .text-command { display: none; }
  .voice-controls { justify-content: center; }
  .command-mode-toggle { top: max(11px, env(safe-area-inset-top)); left: max(11px, env(safe-area-inset-left)); height: 34px; padding-inline: 11px; }
  .command-mode-toggle span { display: none; }
}

.app-shell[data-display="round"] .command-mode-toggle {
  top: 7vmin;
  left: 12vmin;
  height: clamp(30px, 5vmin, 38px);
  padding: 0 clamp(9px, 1.5vmin, 14px);
}

@media (prefers-reduced-motion: reduce) {
  .app-shell[data-face-changing="cover"] .face-change-curtain,
  .app-shell[data-face-changing="covered"] .face-change-curtain,
  .app-shell[data-face-changing="reveal"] .face-change-curtain { display: none; }
}

/* Kiosk face keeps only the expression and the two primary voice controls. */
.topbar,
.voice-wave,
.text-command,
.quick-actions { display: none; }

.control-dock { grid-template-columns: 1fr; }
.voice-controls { justify-self: center; justify-content: center; }

.control-dock { display: none; }

/* Optional service/debug controls. The deployed kiosk remains face-only by default. */
.app-shell[data-controls="visible"] .topbar { display: flex; }
.app-shell[data-controls="visible"] .control-dock { display: grid; }
.app-shell[data-controls="visible"] .text-command { display: flex; }
.app-shell[data-controls="visible"] .quick-actions { display: flex; }

.face-frame .opera-mask {
  overflow: visible;
  border-radius: 0;
  transform: translateY(-4%) scale(.96, 1.36);
  transform-origin: 50% 28%;
}

.face-frame .opera-mask::after { display: none; }

.face-frame .mask-face {
  clip-path: ellipse(49% 48% at 50% 52%);
  -webkit-mask-image: radial-gradient(
    ellipse 49% 48% at 50% 52%,
    #000 0 92%,
    rgba(0, 0, 0, .96) 94%,
    rgba(0, 0, 0, .58) 97%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 49% 48% at 50% 52%,
    #000 0 92%,
    rgba(0, 0, 0, .96) 94%,
    rgba(0, 0, 0, .58) 97%,
    transparent 100%
  );
}

.app-shell .face-frame .assistant-state {
  display: block;
  width: max-content;
  max-width: 80vw;
  left: 50%;
  bottom: -78px;
  padding: 0;
  transform: translateX(-50%);
  text-shadow: none;
}

.face-frame .state-kicker {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 232, 190, .72);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: none;
  white-space: nowrap;
}

.face-frame .assistant-state h1,
.face-frame .assistant-state p { display: none; }

/* Immersive vertical video feed: media first, with only a close affordance. */
.app-shell .video-layer {
  inset: 0;
  padding: 0;
  place-items: stretch;
  overflow: hidden;
  border-radius: 0;
  background: #000;
  backdrop-filter: none;
  transition: opacity .2s ease;
}

.app-shell .video-card,
.app-shell .video-layer[data-video-orientation="portrait"] .video-card {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  display: block;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
  transform: none;
}

.app-shell .video-header {
  position: absolute;
  z-index: 12;
  inset: 0;
  height: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.video-close {
  width: 40px;
  height: 40px;
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(8, 10, 12, .5);
  color: rgba(255,255,255,.88);
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.video-close:hover,
.video-close:focus-visible {
  border-color: rgba(255,255,255,.36);
  background: rgba(18, 20, 22, .78);
  transform: scale(1.05);
  outline: none;
}

.video-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.app-shell .video-viewport {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  touch-action: pan-x;
  cursor: grab;
  transform: translate3d(0, var(--video-swipe-y, 0px), 0);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.app-shell .video-layer[data-swipe-state="dragging"] .video-viewport,
.app-shell .video-layer[data-swipe-state="entering"] .video-viewport {
  transition: none;
  cursor: grabbing;
}

.app-shell .video-layer[data-swipe-state="committing"] .video-viewport {
  transition-duration: .24s;
  transition-timing-function: cubic-bezier(.4,0,1,1);
}

.app-shell .video-layer[data-swipe-state="settling"] .video-viewport {
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(0,0,.2,1);
}

.app-shell .video-viewport video,
.app-shell .video-viewport iframe {
  width: 100%;
  height: 100%;
  background: #000;
}

.app-shell .video-viewport video {
  width: min(100vw, calc(100dvh * 9 / 16));
  height: 100dvh;
  max-width: 100vw;
  max-height: none;
  inset: 0 auto auto 50%;
  transform: translateX(-50%);
  object-fit: cover !important;
  user-select: none;
  -webkit-user-drag: none;
}

.app-shell .video-viewport video::-webkit-media-controls { display: none !important; }

.app-shell .video-footer,
.app-shell .video-mini { display: none !important; }

.app-shell:has(.video-layer.open) .toast-stack { display: none; }

.app-shell[data-display="round"] .video-close {
  top: 10vmin;
  right: 10vmin;
}

/* Voice and video management panels */
.media-dialog {
  --media-accent: #0f766e;
  --media-accent-hover: #0b625c;
  --media-accent-soft: #ecf8f6;
  --media-text: #152724;
  --media-muted: #687b77;
  --media-line: #dce7e4;
  width: min(760px, calc(100vw - 28px));
  border-color: rgba(15, 118, 110, .16);
  background: #fff;
  color: var(--media-text);
  color-scheme: light;
  box-shadow: 0 28px 90px rgba(4, 30, 27, .24), 0 2px 10px rgba(4, 30, 27, .08);
}
.media-dialog::backdrop { background: rgba(4, 14, 16, .68); backdrop-filter: blur(10px); }
.media-dialog .dialog-header { padding: 24px 28px 20px; border-color: var(--media-line); background: #fff; }
.media-dialog .dialog-header small { color: #6d8e89; font-size: 9px; font-weight: 700; letter-spacing: .22em; }
.media-dialog .dialog-header h2 { margin-top: 5px; color: var(--media-text); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.media-dialog .icon-button {
  width: 40px;
  height: 40px;
  border-color: var(--media-line);
  background: #f7faf9;
  color: #637773;
  font-size: 20px;
}
.media-dialog .icon-button:hover,
.media-dialog .icon-button:focus-visible { border-color: #b7ceca; background: #eef5f3; color: var(--media-accent); outline: none; }
.media-dialog .settings-content { padding: 22px 28px 24px; scrollbar-color: #b7cbc7 transparent; }
.media-dialog .dialog-footer { padding: 16px 28px 20px; border-color: var(--media-line); background: #fbfcfc; }
.media-dialog .primary-button {
  min-width: 92px;
  height: 42px;
  border: 1px solid var(--media-accent);
  background: var(--media-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  box-shadow: 0 7px 18px rgba(15, 118, 110, .2);
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.media-dialog .primary-button:hover,
.media-dialog .primary-button:focus-visible { border-color: var(--media-accent-hover); background: var(--media-accent-hover); box-shadow: 0 9px 22px rgba(15, 118, 110, .26); transform: translateY(-1px); outline: none; }
.panel-intro { margin: 0 0 18px; color: var(--media-muted, #91aaad); font-size: 13px; line-height: 1.7; }
.panel-status { min-height: 20px; margin: 15px 0 0; color: var(--media-accent, var(--cyan)); font-size: 12px; font-weight: 600; line-height: 1.6; }
.settings-shortcuts { display: flex; flex-wrap: wrap; gap: 10px; }
.voice-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.voice-option {
  position: relative;
  min-height: 104px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  padding: 17px 42px 17px 17px;
  border: 1px solid var(--media-line);
  border-radius: 16px;
  background: #fff;
  color: var(--media-text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(12, 42, 38, .03);
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.voice-option::after {
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  top: 14px;
  right: 14px;
  border: 1.5px solid #c6d5d2;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 4px #fff;
  transition: border-color .18s ease, background .18s ease;
}
.voice-option:hover,
.voice-option:focus-visible { border-color: #a9c9c4; box-shadow: 0 8px 22px rgba(15, 74, 67, .08); transform: translateY(-1px); outline: none; }
.voice-option[aria-checked="true"] { border-color: var(--media-accent); background: var(--media-accent-soft); box-shadow: 0 0 0 2px rgba(15, 118, 110, .1), 0 9px 24px rgba(15, 74, 67, .08); }
.voice-option[aria-checked="true"]::after { border-color: var(--media-accent); background: var(--media-accent); }
.voice-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #e8f3f1; color: var(--media-accent); font-weight: 750; }
.voice-option[aria-checked="true"] .voice-avatar { background: var(--media-accent); color: #fff; }
.voice-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.voice-copy strong { color: var(--media-text); font-size: 15px; font-weight: 700; }
.voice-copy small { color: var(--media-muted); font-size: 11px; line-height: 1.45; }
.video-settings-dialog { width: min(920px, calc(100vw - 28px)); }
.video-library-content { min-height: min(560px, calc(100dvh - 150px)); }
.video-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.video-library-card, .video-add-card { min-height: 198px; border: 1px solid var(--media-line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 4px 16px rgba(12, 42, 38, .05); }
.video-add-card { display: grid; place-items: center; align-content: center; gap: 11px; border-style: dashed; color: var(--media-accent); cursor: pointer; }
.video-add-card:hover, .video-add-card:focus-visible { border-color: #8dbbb4; background: var(--media-accent-soft); outline: none; }
.video-add-card strong { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; background: #e8f3f1; font-size: 34px; font-weight: 300; line-height: 1; }
.video-add-card span { color: #536b67; font-size: 12px; font-weight: 650; }
.video-library-card { position: relative; display: flex; flex-direction: column; }
.video-library-card video { width: 100%; aspect-ratio: 16 / 9; display: block; background: #edf2f1; object-fit: cover; }
.video-card-copy { min-width: 0; padding: 12px 13px 5px; }
.video-card-copy strong { display: block; overflow: hidden; color: var(--media-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.video-card-copy small { display: block; margin-top: 5px; color: var(--media-muted); font-size: 10px; }
.video-card-actions { display: flex; gap: 8px; margin-top: auto; padding: 9px 12px 12px; }
.video-card-actions button { flex: 1; min-height: 34px; border: 1px solid var(--media-line); border-radius: 10px; background: #f7faf9; color: #45605b; font-size: 12px; font-weight: 600; cursor: pointer; }
.video-card-actions button:hover, .video-card-actions button:focus-visible { border-color: #9fc3bd; background: var(--media-accent-soft); color: var(--media-accent); outline: none; }
.video-delete-button { position: absolute; z-index: 2; top: 9px; right: 9px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(20, 34, 32, .72); box-shadow: 0 3px 12px rgba(0,0,0,.2); color: #fff; font-size: 22px; font-weight: 300; line-height: 1; cursor: pointer; backdrop-filter: blur(8px); transition: width .18s ease, border-color .18s ease, background .18s ease, color .18s ease; }
.video-delete-button:hover, .video-delete-button:focus-visible { border-color: #fff; background: rgba(155, 48, 45, .9); outline: 3px solid rgba(255,255,255,.45); }
.video-delete-button[data-confirm="true"] { width: 132px; padding: 0 10px; border-radius: 999px; background: #b93835; color: transparent; }
.video-delete-button[data-confirm="true"]::after { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; content: "再次点击确认删除"; font-size: 11px; font-weight: 700; white-space: nowrap; }
.video-delete-button:disabled { cursor: wait; opacity: .65; }
.upload-qr-dialog { width: min(510px, calc(100vw - 28px)); }
.upload-auth-dialog { width: min(500px, calc(100vw - 28px)); }
.upload-auth-content { display: flex; flex-direction: column; gap: 14px; padding-top: 24px !important; }
.upload-auth-content label { display: flex; flex-direction: column; gap: 7px; }
.upload-auth-content label strong { color: var(--media-text); font-size: 15px; }
.upload-auth-content label span { color: var(--media-muted); font-size: 12px; line-height: 1.6; }
.upload-auth-content input { height: 46px; padding: 0 14px; border: 1px solid var(--media-line); border-radius: 11px; background: #f7faf9; color: var(--media-text); font: inherit; letter-spacing: .08em; }
.upload-auth-content input:focus { border-color: var(--media-accent); outline: 3px solid rgba(15, 118, 110, .12); }
.upload-qr-dialog .dialog-header { min-height: 66px; padding: 18px 20px 4px; justify-content: flex-end; border-bottom: 0; }
.upload-qr-dialog .settings-content { padding-top: 4px; }
.upload-qr-content { display: flex; flex-direction: column; align-items: center; text-align: center; }
.qr-frame { width: min(310px, 76vw); aspect-ratio: 1; display: grid; place-items: center; padding: 14px; border: 1px solid var(--media-line); border-radius: 22px; background: #f7faf9; box-shadow: 0 14px 38px rgba(12, 42, 38, .1); }
.qr-frame img { width: 100%; height: 100%; display: block; }
.upload-qr-content > p { max-width: 390px; color: var(--media-muted); font-size: 13px; line-height: 1.7; }
.upload-qr-content > a { max-width: 100%; overflow: hidden; color: var(--media-accent); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .voice-option-grid, .video-library-grid { grid-template-columns: 1fr; }
  .video-library-card, .video-add-card { min-height: 176px; }
  .media-dialog .dialog-header { padding-inline: 20px; }
  .media-dialog .settings-content { padding-inline: 20px; }
  .media-dialog .dialog-footer { padding-inline: 20px; }
}

/* Temporary local trigger for tuning the face-change performance without AI. */
.temporary-face-change {
  position: fixed;
  z-index: 90;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  min-width: 118px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 16px 0 10px;
  border: 1px solid rgba(255, 196, 90, .52);
  border-radius: 999px;
  background: rgba(22, 14, 6, .88);
  color: #ffe4a3;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .06);
  backdrop-filter: blur(12px);
  font: inherit;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
}

.temporary-face-change > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 171, 54, .18);
  color: #ffd06d;
  font-size: 13px;
}

.temporary-face-change > strong { font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.temporary-face-change:hover,
.temporary-face-change:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 211, 120, .82);
  background: rgba(39, 23, 8, .94);
  outline: none;
}
.temporary-face-change:disabled { opacity: .58; cursor: wait; transform: none; }

.app-shell[data-display="round"] .temporary-face-change {
  right: auto;
  left: 50%;
  bottom: 8vmin;
  transform: translateX(-50%);
}

.app-shell[data-display="round"] .temporary-face-change:hover,
.app-shell[data-display="round"] .temporary-face-change:focus-visible {
  transform: translate(-50%, -2px);
}

.app-shell[data-display="round"] .temporary-face-change:disabled {
  transform: translateX(-50%);
}