/* Self-hosted subsets (SIL Open Font License). Latin + Thai only: the
   Traditional Chinese subset of Noto Sans TC is 4.3 MB across 108 files, which
   is not worth blocking first paint for, so CJK falls back to system fonts
   (PingFang TC on iOS, Microsoft JhengHei on Windows, Noto Sans CJK on Linux). */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/noto-sans-thai-thai.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/noto-sans-thai-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #f7f8ff;
  --muted: #98a1bc;
  --muted-2: #66718e;
  --line: rgba(157, 169, 207, 0.16);
  --panel: rgba(19, 26, 50, 0.86);
  --panel-strong: #171f3b;
  --purple: #9a82ff;
  --purple-soft: #c8bbff;
  --purple-bg: rgba(154, 130, 255, 0.14);
  --coral: #ff8d7a;
  --green: #66d3a3;
  --danger: #ff717f;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.26);
  color-scheme: dark;
  font-family: "DM Sans", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", "Noto Sans Thai", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display:none !important; }
body:not([data-call-state="connected"]) .status-dot,
body:not([data-call-state="connected"]) .live-dot,
body:not([data-call-state="connected"]) .presence-dot { background:#7d89a8; box-shadow:none; }
button:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }
.connection-bar { display:flex; align-items:center; gap:18px; margin:0 0 20px; }
.connection-bar .primary-button { width:auto; flex-shrink:0; margin:0; }
#connectionHint { margin:0; color:#c2cbe2; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
#connectionHint a { color:#cabaff; }
#joinError { color:#ffb7bd; font-size:14px; }
#passwordLabel { margin-top:18px; }
.room-field input { min-width:0; width:100%; font-size:16px; letter-spacing:normal; }
#subtitleNotice, #transcriptList { font-size:14px; line-height:1.7; }
.chat-list { max-height:400px; overflow-y:auto; }
.chat-bubble { overflow-wrap:anywhere; }
.locale-btn { min-height:44px !important; min-width:44px !important; }
#playAudioBtn { display:block; margin:14px auto 0; }
.rescue-chip[aria-pressed="true"] { border-color:var(--purple); }
html[lang="th"] h1, html[lang="th"] h2 { line-height:1.5; letter-spacing:0; }
@media(max-width:620px) {
  .topbar-actions { gap:5px !important; }
  .connection-bar { flex-direction:column; align-items:stretch; }
  .connection-bar .primary-button { justify-content:center; }
  .chat-form input { font-size:16px !important; }
  .workspace { padding-bottom:calc(34px + env(safe-area-inset-bottom)) !important; }
}
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #0a0f20; color: var(--ink); }
button, input { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(154,130,255,.58); outline-offset: 3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app-shell { min-height: 100vh; position: relative; overflow: hidden; background: radial-gradient(circle at 75% 8%, rgba(111, 79, 213, .2), transparent 34%), radial-gradient(circle at 16% 85%, rgba(74, 167, 194, .08), transparent 31%), #0a0f20; }
.topbar { height: 80px; padding: 0 42px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(9, 14, 30, .58); backdrop-filter: blur(20px); position: relative; z-index: 2; }
.brand { display:flex; align-items:center; gap:12px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display:grid; place-items:center; color:#d7cfff; background: linear-gradient(145deg, #876fec, #5c45be); border: 1px solid rgba(213, 203, 255, .3); border-radius: 13px; box-shadow: 0 12px 28px rgba(99, 74, 211, .3), inset 0 1px 0 rgba(255,255,255,.25); }
.brand-mark svg { width: 21px; height: 21px; }
.brand strong { display:block; font-size: 15px; letter-spacing: -.02em; }
.brand small { display:block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.topbar-actions { display:flex; align-items:center; gap: 14px; }
.locale-switch { display:flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.035); }
.locale-btn { min-width:38px; min-height:30px; padding:0 8px; border:0; border-radius:7px; color:#7f8ba9; background:transparent; font-size:10px; font-weight:600; transition:.2s ease; }
.locale-btn:hover { color:#f2f0ff; background:rgba(255,255,255,.06); }
.locale-btn.active { color:#241c45; background:#c5b9ff; box-shadow:0 3px 10px rgba(120,95,220,.25); }
.room-pill { display:flex; align-items:center; gap:8px; color:#b8c1d8; font-size: 12px; }
.status-dot, .presence-dot, .live-dot { display:inline-block; width:7px; height:7px; border-radius: 999px; background: var(--green); box-shadow:0 0 0 4px rgba(102,211,163,.1), 0 0 10px rgba(102,211,163,.6); }
.icon-button, .avatar-button, .modal-close { border: 0; color: #aab5d3; background: transparent; }
.icon-button { width: 44px; height: 44px; border-radius: 12px; display:grid; place-items:center; transition: .2s ease; }
.icon-button:hover { background: rgba(255,255,255,.07); color:#fff; }
.icon-button svg { width:20px; height:20px; }
.avatar-button { width: 34px; height:34px; border-radius: 50%; background: linear-gradient(135deg, #f2a996, #b77078); color: #2b1321; font-weight: 700; font-size: 12px; box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.workspace { max-width: 1480px; margin: 0 auto; padding: 42px 42px 58px; display:grid; grid-template-columns: minmax(0, 1.42fr) minmax(360px, .78fr); gap: 28px; position: relative; z-index: 1; }
.call-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; }
.eyebrow { margin:0 0 9px; color:#8190b6; font-size:10px; font-weight:700; letter-spacing:.17em; }
.eyebrow-line { display:inline-block; width:22px; height:1px; margin:0 5px 3px; background:#4d5b7e; }
h1, h2, p { margin-top:0; }
h1 { margin-bottom:10px; font-size: clamp(24px, 3.2vw, 39px); letter-spacing:-.045em; line-height:1.08; font-weight:600; }
.sparkle, .ai-spark { color: var(--purple-soft); font-size:.6em; vertical-align: 0.3em; }
.call-meta { margin:0; color:#7e8aaa; font-size:12px; display:flex; align-items:center; gap:11px; }
.meta-divider { width: 3px; height:3px; border-radius:50%; background:#536080; }
.text-button { min-height:44px; display:inline-flex; align-items:center; gap:7px; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); color:#adb8d4; font-size:12px; transition:.2s ease; }
.text-button:hover { border-color: rgba(154,130,255,.55); color:#fff; background:rgba(154,130,255,.1); }
.text-button.small { min-height:32px; padding:0 8px; border:0; background:transparent; color:#9eabd0; }
.button-icon { display:inline-flex; }
.button-icon svg { width:16px; height:16px; }
.stage-wrap { position:relative; }
.video-stage { aspect-ratio: 16 / 10; min-height: 370px; position:relative; overflow:hidden; border:1px solid rgba(171, 182, 228, .18); border-radius:24px; background: #161c35; box-shadow: var(--shadow); }
.video-stage::before { content:""; position:absolute; inset:0; z-index:0; background: linear-gradient(130deg, rgba(49,38,79,.3), transparent 50%), radial-gradient(circle at 68% 10%, rgba(165, 137, 255, .22), transparent 35%); pointer-events:none; }
.video-tile { position:absolute; overflow:hidden; }
.livekit-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.local-livekit-video { transform:scaleX(-1); border-radius:14px; }
.remote-livekit-video { z-index:1; }
.partner-tile { inset:0; background: radial-gradient(circle at 70% 29%, rgba(248, 173, 184, .24), transparent 26%), linear-gradient(145deg, #38334f 0%, #29253f 45%, #151b32 100%); }
.tile-gradient { position:absolute; inset:0; background: radial-gradient(ellipse at 51% 48%, rgba(229, 157, 152, .23), transparent 24%), radial-gradient(ellipse at 61% 94%, rgba(61, 119, 125, .25), transparent 35%); }
.partner-avatar { position:absolute; left:50%; top:50%; transform:translate(-50%,-54%); width:clamp(100px, 16vw, 190px); aspect-ratio:1; border-radius:48% 52% 45% 55%; display:grid; place-items:center; font-size:clamp(50px, 8vw, 90px); font-weight:500; color:rgba(255,231,224,.74); background: radial-gradient(circle at 38% 28%, #eab4a7, #a26672 62%, #554160); box-shadow: inset -18px -20px 35px rgba(52, 24, 52, .32), 0 30px 80px rgba(34, 17, 48, .55); }
.tile-topline, .tile-bottomline { position:absolute; z-index:2; left:18px; right:18px; display:flex; align-items:center; justify-content:space-between; }
.tile-topline { top:17px; }
.tile-bottomline { bottom:16px; color:rgba(236, 239, 255, .65); font-size:10px; }
.person-tag { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; color:#f8f9ff; font-size:12px; background:rgba(10, 14, 29, .48); border:1px solid rgba(255,255,255,.13); border-radius:10px; backdrop-filter:blur(10px); }
.presence-dot { width:6px; height:6px; box-shadow:none; }
.presence-dot.self { background:var(--purple-soft); }
.self-label { color:#f0eefe; font-size:11px; opacity:.8; }
.audio-wave { display:flex; align-items:center; gap:2px; height:18px; padding:0 9px; border-radius:9px; background:rgba(10,14,29,.42); }
.audio-wave i { width:2px; border-radius:2px; background:var(--green); animation: wave 1s ease-in-out infinite; }
.audio-wave i:nth-child(1){height:6px}.audio-wave i:nth-child(2){height:11px;animation-delay:.12s}.audio-wave i:nth-child(3){height:15px;animation-delay:.24s}.audio-wave i:nth-child(4){height:9px;animation-delay:.36s}
@keyframes wave { 0%,100%{transform:scaleY(.58);opacity:.55}50%{transform:scaleY(1);opacity:1} }
.confidence { display:flex; align-items:center; gap:7px; }
.confidence-bar { display:inline-flex; gap:2px; align-items:flex-end; height:11px; }
.confidence-bar i { display:block; width:3px; border-radius:2px; background:var(--green); }.confidence-bar i:nth-child(1){height:4px}.confidence-bar i:nth-child(2){height:6px}.confidence-bar i:nth-child(3){height:8px}.confidence-bar i:nth-child(4){height:10px}.confidence-bar i:nth-child(5){height:11px}
.subtitle-layer { position:absolute; z-index:2; left:50%; bottom:56px; transform:translateX(-50%); width:min(86%, 560px); padding:14px 19px 15px; text-align:center; border-radius:14px; border:1px solid rgba(255,255,255,.18); background:rgba(9, 12, 24, .72); box-shadow: 0 10px 30px rgba(0,0,0,.18); backdrop-filter:blur(14px); transition:opacity .2s ease, transform .2s ease; }
.subtitle-thai { margin:0 0 4px; color:#fff; font-family:"Noto Sans Thai", sans-serif; font-size:clamp(15px, 2.2vw, 22px); line-height:1.35; font-weight:500; }
.subtitle-zh { margin:0; color:#d6cdfc; font-size:clamp(13px, 1.7vw, 17px); }
.subtitle-layer.is-hidden { opacity:0; transform:translate(-50%, 8px); pointer-events:none; }
.self-tile { right:18px; bottom:18px; width:21%; min-width:136px; aspect-ratio: 4 / 3; border-radius:16px; border:2px solid rgba(255,255,255,.22); background:linear-gradient(145deg,#564a78,#272c50); box-shadow:0 14px 30px rgba(4,8,20,.38); }
#localVideo { width:100%; height:100%; object-fit:cover; display:none; transform:scaleX(-1); }
.self-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:radial-gradient(circle at 50% 28%, rgba(207,190,255,.2), transparent 28%), linear-gradient(145deg,#514474,#22284b); }
.self-placeholder span { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#312a4c; background:#c7b6f2; font-weight:700; }
.self-placeholder small { color:#e7e3fc; font-size:10px; }
/* The tag already names the tile, so the caption under the avatar is redundant;
   bottom-align the avatar so it clears the tag in small (phone-width) tiles. */
.self-tile .self-placeholder { justify-content:flex-end; padding-bottom:9px; background:radial-gradient(circle at 50% 76%, rgba(207,190,255,.2), transparent 34%), linear-gradient(145deg,#514474,#22284b); }
.self-tile .self-placeholder small { display:none; }
/* Phone tiles are only ~75-90px tall: put the avatar bottom-right, diagonal from the top-left tag. */
@media (max-width: 760px) {
  .self-tile .self-placeholder { align-items:flex-end; padding:0 9px 8px 0; background:radial-gradient(circle at 80% 70%, rgba(207,190,255,.2), transparent 40%), linear-gradient(145deg,#514474,#22284b); }
  .self-tile .self-placeholder span { width:30px; height:30px; font-size:13px; }
}
.self-tile .tile-topline { left:9px; right:9px; top:8px; }.self-tile .person-tag { padding:5px 7px; font-size:10px; }.self-tile .self-label, .self-tile .tile-bottomline { display:none; }
.stage-badge { position:absolute; top:17px; left:50%; transform:translateX(-50%); z-index:3; display:flex; align-items:center; gap:7px; padding:7px 11px; color:#d7dbec; border:1px solid rgba(255,255,255,.11); background:rgba(10,14,29,.43); border-radius:99px; font-size:10px; backdrop-filter:blur(10px); }
.live-dot { width:6px; height:6px; box-shadow:0 0 0 3px rgba(102,211,163,.1); }
.stage-expand { position:absolute; right:17px; top:17px; z-index:4; width:40px; height:40px; border:1px solid rgba(255,255,255,.12); border-radius:11px; display:grid; place-items:center; background:rgba(10,14,29,.43); color:#d9ddef; backdrop-filter:blur(10px); transition:.2s ease; }.stage-expand:hover{background:rgba(255,255,255,.12);}.stage-expand svg{width:18px;height:18px}
.stage-note { display:flex; align-items:center; justify-content:center; gap:7px; margin:12px 0 0; color:#707e9f; font-size:11px; }.shield-icon{display:inline-flex;color:#7584aa}.shield-icon svg{width:15px;height:15px}
.call-controls { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:20px; }
.control-button { min-width:76px; min-height:62px; padding:9px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#a4afc9; border:1px solid var(--line); border-radius:15px; background:rgba(21, 28, 53, .7); transition:transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease; }.control-button:hover{transform:translateY(-2px);border-color:rgba(154,130,255,.48);color:#fff;background:rgba(36,44,78,.9)}.control-button.active{color:#d9d2ff;border-color:rgba(154,130,255,.42);background:var(--purple-bg)}.control-icon{display:inline-flex}.control-icon svg{width:19px;height:19px}.control-label{font-size:10px}.leave-button{color:#ff9aa0;border-color:rgba(255,113,127,.24)}.leave-button:hover{color:#fff;background:rgba(196,59,83,.28);border-color:rgba(255,113,127,.55)}.control-button.is-off .control-icon{color:#ff9aa0}
.insight-panel { min-height: 680px; border:1px solid rgba(155, 166, 206, .16); border-radius:24px; background:linear-gradient(180deg, rgba(23,31,59,.93), rgba(14,20,40,.95)); box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; }
.panel-tabs { display:flex; align-items:center; gap:4px; padding:11px 14px; border-bottom:1px solid var(--line); }.panel-tab{min-height:42px;padding:0 14px;display:inline-flex;align-items:center;gap:7px;border:0;border-radius:10px;background:transparent;color:#7f8ba9;font-size:12px;transition:.2s ease}.panel-tab:hover{color:#e8e8f4;background:rgba(255,255,255,.05)}.panel-tab.active{color:#eae7ff;background:var(--purple-bg)}.tab-live-dot{width:6px;height:6px;border-radius:50%;background:var(--purple);box-shadow:0 0 10px rgba(154,130,255,.7)}
.panel-content { flex:1; min-height:0; }.tab-pane{display:none;height:100%;padding:26px 25px}.tab-pane.active{display:block}.pane-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px}.pane-heading h2{margin:0;font-size:24px;line-height:1.17;letter-spacing:-.04em;font-weight:600}.pane-heading.compact{margin-bottom:18px}.ai-badge,.coach-mark{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid rgba(154,130,255,.25);border-radius:8px;color:#bfb4ff;background:rgba(154,130,255,.1);font-size:10px}.coach-mark{color:#aeb8d5;border-color:var(--line);background:rgba(255,255,255,.03)}.online-label{display:flex;align-items:center;gap:7px;color:#93d5b6;font-size:11px}.online-label .presence-dot{background:var(--green)}
.translation-card,.phrase-card{padding:17px 17px 15px;border:1px solid rgba(153,164,208,.16);border-radius:16px;background:linear-gradient(145deg,rgba(43,51,87,.74),rgba(24,31,58,.7));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}.translation-card-head,.phrase-topline{display:flex;align-items:center;justify-content:space-between}.language-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:6px;font-size:10px;font-weight:600}.thai-tag{color:#ffb6aa;background:rgba(255,141,122,.12)}.translation-time{color:#7884a2;font-size:10px}.thai-line{margin:17px 0 5px;color:#fff;font-family:"Noto Sans Thai",sans-serif;font-size:22px;line-height:1.35}.translation-arrow{color:#7d89a8;font-size:17px;line-height:1}.chinese-line{margin:4px 0 14px;color:#d3caff;font-size:17px}.tone-note,.phrase-tip{display:flex;align-items:flex-start;gap:8px;padding:10px 10px 9px;color:#a7b2cd;border:1px solid rgba(154,130,255,.15);border-radius:9px;background:rgba(154,130,255,.08);font-size:11px;line-height:1.55}.tone-icon,.tip-icon{color:#ad9aff;font-weight:700}.tone-note strong,.phrase-tip strong{color:#d7d1ff;font-weight:500}.thai-word{font-family:"Noto Sans Thai",sans-serif;color:#f8b1a9}.mini-section-title{display:flex;align-items:center;justify-content:space-between;margin:22px 0 10px;color:#adb8d0;font-size:11px}.mini-section-title button,.mini-hint{padding:0;border:0;background:transparent;color:#7584a7;font-size:10px}.transcript-list{display:flex;flex-direction:column;gap:14px;max-height:295px;overflow:auto;padding-right:4px}.transcript-row{display:grid;grid-template-columns:27px 1fr auto;gap:9px;align-items:start}.mini-avatar{width:27px;height:27px;display:grid;place-items:center;border-radius:9px;font-size:10px;font-weight:700}.mini-avatar.mali{color:#ffd8cc;background:linear-gradient(145deg,#ad7380,#65435c)}.mini-avatar.you{color:#342c5f;background:#c4b4f2}.speaker-name{display:flex;align-items:center;gap:6px;color:#dce0ed;font-size:11px}.speaker-name em{padding:2px 4px;color:#8f9bb9;background:rgba(255,255,255,.06);font-size:8px;font-style:normal;border-radius:4px}.transcript-row p{margin:4px 0 2px;color:#d4d9e8;font-size:12px;line-height:1.45}.transcript-row small{display:block;color:#9a86ff;font-size:10px;line-height:1.45}.transcript-row.partner small{color:#eeaaa0}.transcript-row time{color:#687596;font-size:9px;padding-top:2px}.transcript-list::-webkit-scrollbar{width:4px}.transcript-list::-webkit-scrollbar-thumb{background:#374265;border-radius:99px}
.chat-list{min-height:340px;display:flex;flex-direction:column;gap:13px;padding:10px 0 18px}.chat-bubble{max-width:84%;padding:11px 13px;border-radius:14px;font-size:12px;line-height:1.5}.chat-bubble p{margin:0}.chat-bubble small{display:block;margin-top:5px;color:#7d89a8;font-size:9px}.incoming{align-self:flex-start;background:#293253;color:#e2e5f0;border-top-left-radius:5px}.outgoing{align-self:flex-end;background:rgba(154,130,255,.18);color:#ece9ff;border:1px solid rgba(154,130,255,.18);border-top-right-radius:5px}.chat-form{display:flex;gap:8px;align-items:center;margin-top:auto}.chat-form input{height:46px;min-width:0;flex:1;padding:0 13px;color:#eef0fa;border:1px solid var(--line);border-radius:12px;background:rgba(7,11,26,.46);font-size:12px}.chat-form input::placeholder{color:#667291}.chat-form button{width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:12px;background:#8670e9;color:#fff;transition:.2s ease}.chat-form button:hover{background:#a18cf7}.chat-form svg{width:19px;height:19px}
.phrase-card{background:linear-gradient(145deg,rgba(47,56,96,.75),rgba(27,34,65,.72));}.sound-button{width:32px;height:32px;display:grid;place-items:center;color:#c3b9ff;border:1px solid rgba(154,130,255,.24);border-radius:9px;background:rgba(154,130,255,.1)}.sound-button:hover{background:rgba(154,130,255,.2)}.sound-button svg{width:16px;height:16px}.phrase-thai{margin:18px 0 1px;color:#fff;font-family:"Noto Sans Thai",sans-serif;font-size:29px;line-height:1.25}.phrase-roman{margin:0 0 3px;color:#a997ff;font-size:13px;font-style:italic}.phrase-meaning{margin:0 0 15px;color:#e0e3f1;font-size:16px}.phrase-tip{border-color:rgba(255,141,122,.16);background:rgba(255,141,122,.08)}.phrase-tip .tip-icon{color:#ff9c8b}.rescue-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.rescue-chip{min-height:69px;padding:10px;text-align:left;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.025);transition:.2s ease}.rescue-chip:hover{border-color:rgba(255,141,122,.4);background:rgba(255,141,122,.08);transform:translateY(-1px)}.thai-chip{display:block;color:#ffd0c8;font-family:"Noto Sans Thai",sans-serif;font-size:13px}.rescue-chip small{display:block;margin-top:5px;color:#8895b3;font-size:10px}
.panel-footer{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 20px;border-top:1px solid var(--line);color:#71809f;font-size:10px}.footer-signal{display:flex;align-items:center;gap:7px}.signal-bars{display:flex;align-items:flex-end;gap:2px;height:11px}.signal-bars i{display:block;width:3px;border-radius:2px;background:var(--green)}.signal-bars i:nth-child(1){height:4px}.signal-bars i:nth-child(2){height:7px}.signal-bars i:nth-child(3){height:10px}
.toast{position:fixed;left:50%;bottom:24px;z-index:20;max-width:calc(100vw - 32px);padding:11px 16px;transform:translate(-50%, 20px);opacity:0;pointer-events:none;border:1px solid rgba(154,130,255,.3);border-radius:12px;color:#f2f1ff;background:#222b4c;box-shadow:0 14px 36px rgba(0,0,0,.28);font-size:12px;transition:opacity .22s ease,transform .22s ease}.toast.show{opacity:1;transform:translate(-50%,0)}
.modal-backdrop{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:rgba(3,5,14,.68);backdrop-filter:blur(10px)}.modal-backdrop[hidden]{display:none}.settings-modal{position:relative;width:min(100%,410px);padding:27px;border:1px solid rgba(174,185,230,.2);border-radius:20px;background:#151d38;box-shadow:0 30px 90px rgba(0,0,0,.5)}.modal-close{position:absolute;right:15px;top:15px;width:38px;height:38px;display:grid;place-items:center;border-radius:10px}.modal-close:hover{background:rgba(255,255,255,.07);color:#fff}.modal-close svg{width:18px;height:18px}.settings-modal h2{margin:0 0 9px;font-size:26px;letter-spacing:-.04em}.modal-copy{margin:0 0 22px;color:#9ca8c3;font-size:12px;line-height:1.7}.field-label{display:block;margin-bottom:7px;color:#aeb8d0;font-size:11px}.room-field{display:flex;gap:8px}.room-field input{flex:1;height:46px;padding:0 13px;border:1px solid var(--line);border-radius:11px;color:#fff;background:#0d1429;letter-spacing:.13em;font-weight:600}.room-field button{width:46px;border:1px solid var(--line);border-radius:11px;background:#202b4e;color:#b9b1ff}.room-field svg{width:18px;height:18px}.primary-button{width:100%;height:48px;margin-top:18px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border:0;border-radius:12px;color:#20183e;background:linear-gradient(135deg,#c0b2ff,#8d76ee);font-weight:700;font-size:12px;box-shadow:0 12px 30px rgba(117,93,215,.24)}.primary-button:hover{filter:brightness(1.08)}
@media (max-width: 1050px){.workspace{grid-template-columns:1fr;max-width:860px;padding-top:30px}.insight-panel{min-height:600px}.video-stage{min-height:420px}}
@media (max-width: 620px){.topbar{height:68px;padding:0 18px}.brand small,.room-pill{display:none}.workspace{display:block;padding:24px 14px 34px}.call-header{margin-bottom:18px}.call-header h1{font-size:28px}.call-header .text-button{padding:0 10px;font-size:0}.call-header .button-icon{font-size:initial}.video-stage{min-height:0;aspect-ratio:4/3;border-radius:18px}.self-tile{right:12px;bottom:12px;width:30%;min-width:100px;border-radius:12px}.stage-badge{top:12px;font-size:9px}.stage-expand{right:12px;top:12px;width:36px;height:36px}.tile-topline{left:12px;right:12px;top:12px}.subtitle-layer{bottom:39px;padding:10px 12px;border-radius:11px}.subtitle-thai{font-size:15px}.subtitle-zh{font-size:12px}.tile-bottomline{left:12px;right:12px;bottom:10px;font-size:9px}.call-controls{gap:7px;margin-top:14px}.control-button{min-width:0;flex:1;min-height:58px;padding:8px 5px;border-radius:13px}.control-label{font-size:9px}.insight-panel{min-height:0;margin-top:26px;border-radius:18px}.panel-tabs{padding:8px}.panel-tab{flex:1;justify-content:center;padding:0 8px}.tab-pane{padding:21px 17px}.pane-heading h2{font-size:22px}.panel-footer{padding:0 15px}.transcript-list{max-height:none}.chat-list{min-height:260px}.settings-modal{padding:24px}.stage-note{font-size:10px}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}

/* Keep the join form inside short phone viewports; its contents can scroll. */
.settings-modal {
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}