:root {
  color-scheme: light; --bg:#f3f6fa; --panel:#fff; --elevated:#edf3f7; --line:#d7e1e9;
  --ink:#182e40; --muted:#536a7b; --mint:#087364; --soft:#e5f4ef; --gold:#896321; --red:#ad3445;
  --shadow:0 8px 28px #19354c08; --host-wash:#f3faf7; font-family:Inter,"Segoe UI",Arial,sans-serif; font-size:16px;
}
:root[data-theme="dark"] {
  color-scheme:dark; --bg:#101a25; --panel:#172431; --elevated:#203240; --line:#344b5b;
  --ink:#f0f5f8; --muted:#b1c2cf; --mint:#83e3cf; --soft:#203e3b; --gold:#e7c18a; --red:#ffacb7; --shadow:none; --host-wash:#1b302f;
}
* { box-sizing:border-box }
[hidden] { display:none!important }
body { margin:0; background:var(--bg); color:var(--ink); line-height:1.5 }
a { color:inherit; text-decoration:none }
button,input,select,textarea { font:inherit; color:inherit }
button,a,input,select,textarea,summary { outline-offset:3px; -webkit-tap-highlight-color:transparent }
:focus-visible { outline:3px solid var(--mint) }
button,a,summary { touch-action:manipulation }
button { min-height:44px; border:1px solid var(--line); border-radius:9px; padding:9px 13px; background:var(--panel); cursor:pointer; font-size:.875rem; font-weight:600 }
button:hover:not(:disabled) { background:var(--elevated) }
button:disabled { cursor:not-allowed; opacity:.55 }
input,select,textarea { min-width:0; width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:var(--panel); font-size:1rem }
select,input { min-height:44px }
textarea { resize:vertical; line-height:1.5 }
textarea::placeholder,input::placeholder { color:var(--muted); opacity:1 }
label { display:block; font-size:.875rem; font-weight:600 }
p { overflow-wrap:anywhere }
h1,h2,p { margin-top:0 }
.masthead { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:14px max(24px,4vw); border-bottom:1px solid var(--line); background:var(--panel) }
.brand { display:flex; align-items:center; gap:10px; font-size:.875rem; font-weight:800; letter-spacing:.1em }
.brand small { display:block; font-size:.75rem; color:var(--muted); letter-spacing:.14em; margin-top:2px }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--mint); border-radius:50%; color:var(--mint); font-size:1.4rem; font-weight:500 }
.room-brand { font-size:.875rem; font-weight:700; letter-spacing:.13em; color:var(--mint) }
.theme-toggle { white-space:nowrap }
.workspace { max-width:1500px; margin:auto; padding:28px max(24px,4vw); display:grid; grid-template-columns:minmax(0,1fr) 310px; align-items:start; gap:28px }
.conversation { min-width:0 }
.room-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px }
.eyebrow { color:var(--muted); font-size:.75rem; letter-spacing:.1em; font-weight:700; margin:0 0 7px }
h1 { margin:0; font-size:clamp(1.75rem,2.9vw,2.65rem); line-height:1.15; letter-spacing:-.04em; font-weight:650 }
h1 span { color:var(--mint) }
.intro { color:var(--muted); margin:9px 0 0; font-size:1rem }
.connection { display:inline-flex; align-items:center; gap:7px; color:var(--muted); border:1px solid var(--line); background:var(--panel); border-radius:24px; padding:7px 10px; font-size:.75rem; white-space:nowrap }
.connection i,.room-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--muted); flex-shrink:0 }
.connection.online { color:var(--mint) }
.connection.online i,.room-dot { background:var(--mint) }
.mode-tabs { display:flex; gap:5px; padding:4px; border:1px solid var(--line); border-radius:12px; background:var(--elevated); width:fit-content; margin-bottom:12px }
.mode-tabs button { background:transparent; border-color:transparent; padding:9px 20px; color:var(--muted) }
.mode-tabs button[aria-selected="true"] { background:var(--panel); color:var(--ink); box-shadow:var(--shadow); border-color:var(--line) }
.room-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px }
.room-actions button[aria-expanded="true"] { background:var(--soft); color:var(--mint); border-color:var(--mint) }
.room-actions a { display:inline-flex; align-items:center; min-height:44px; padding:8px; font-size:.875rem; color:var(--muted); text-decoration:underline; text-underline-offset:3px }
.room-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid var(--line); border-bottom:0; border-radius:12px 12px 0 0; background:var(--panel); padding:12px 18px; font-size:.875rem }
.room-toolbar>span:first-child { font-weight:650 }
.room-toolbar>span:last-child { color:var(--muted); text-align:right; font-size:.75rem }
.room-dot { margin-right:7px }
.presence-strip { display:flex; gap:10px; overflow-x:auto; scrollbar-width:thin; padding:0 18px 10px; border-left:1px solid var(--line); border-right:1px solid var(--line); background:var(--panel) }
.presence-member { display:flex; gap:6px; align-items:center; flex-shrink:0; color:var(--muted); font-size:.75rem }
.presence-member .avatar { width:24px; height:24px; font-size:.75rem }
.feed { height:clamp(260px,42vh,560px); height:clamp(260px,42dvh,560px); overflow:auto; overflow-wrap:anywhere; padding:20px; border:1px solid var(--line); background:var(--panel); scrollbar-width:thin; scroll-padding:16px; overscroll-behavior:contain }
.welcome,.message { display:flex; align-items:flex-start; gap:12px }
.message { padding:17px 0; border-bottom:1px solid var(--line) }
.message:first-of-type { padding-top:0 }
.message:last-child { border-bottom:0 }
.message.is-octavia { background:var(--host-wash); border-radius:12px; border-bottom:0; padding:16px; margin:8px 0 }
.latest-bar { display:flex; justify-content:center; background:var(--panel); border-inline:1px solid var(--line); padding:8px 12px 0 }
.latest-bar button { border-radius:24px; color:var(--mint); background:var(--soft); padding-inline:18px }
.avatar { display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:var(--elevated); color:var(--ink); font-size:.875rem; font-weight:700; overflow:hidden }
.avatar img { width:100%; height:100%; object-fit:cover }
.octavia-avatar { background:var(--soft); color:var(--mint); border:1px solid var(--mint) }
.byline { display:flex; flex-wrap:wrap; gap:5px 9px; align-items:center; margin-bottom:6px; font-size:.875rem }
.byline strong { overflow-wrap:anywhere }
.byline time { margin-left:auto; color:var(--muted); font-size:.75rem }
.host-badge,.source-label { font-size:.75rem; color:var(--mint); font-weight:650 }
.source-label { color:var(--muted); font-weight:400 }
.message-body { min-width:0; flex:1 }
.message p,.welcome p { font-size:1rem; line-height:1.65; margin:0 0 10px; white-space:pre-wrap }
.welcome .welcome-note { color:var(--muted); font-size:.875rem }
.reply-button { border:0; color:var(--mint); padding:6px 12px; margin-left:-12px; background:transparent }
.message-reply { display:block; max-width:100%; text-align:left; overflow-wrap:anywhere; padding:8px 10px; margin-bottom:9px; color:var(--muted); background:var(--elevated); font-weight:400 }
.composer-area { padding:14px 18px 18px; border:1px solid var(--line); border-top:0; border-radius:0 0 12px 12px; background:var(--panel); box-shadow:var(--shadow) }
.suggestions { display:flex; gap:8px; overflow:auto; scrollbar-width:thin; padding-bottom:4px; margin-bottom:5px }
.suggestions button { white-space:nowrap; font-weight:500; color:var(--muted); flex-shrink:0; min-height:44px }
.suggestions span { margin-left:5px; color:var(--mint) }
.coverage-picker { margin:4px 0 9px }
summary { min-height:44px; cursor:pointer; padding:10px 0; font-size:.875rem; font-weight:650; color:var(--mint) }
.coverage-picker p { font-size:.875rem; color:var(--muted); margin:0 0 10px }
.coverage-symbols { display:flex; flex-wrap:wrap; gap:7px; max-height:190px; overflow:auto; padding:3px }
.coverage-symbols button { color:var(--mint) }
.compose-target { display:flex; align-items:center; gap:12px; margin-bottom:10px }
.compose-target label { white-space:nowrap; color:var(--muted) }
.compose-target select { width:auto; max-width:100%; flex:1; font-size:.875rem; padding:8px 10px }
.composer-label { display:flex; justify-content:space-between; gap:12px; padding-bottom:7px }
#postingName { color:var(--muted); font-size:.75rem; font-weight:400 }
.input-shell { border:1px solid var(--line); border-radius:10px; padding:8px; display:flex; align-items:flex-end; gap:8px; background:var(--bg) }
.input-shell:focus-within { border-color:var(--mint); box-shadow:0 0 0 2px var(--soft) }
.input-shell textarea { border:0; background:transparent; padding:6px; min-height:62px; max-height:180px; resize:none }
.input-shell textarea:focus { outline:none }
.send-button,#joinCall,.join-button { background:var(--mint); color:var(--panel); border-color:var(--mint); font-weight:700 }
.send-button { white-space:nowrap; flex-shrink:0 }
.send-button:hover:not(:disabled),#joinCall:hover:not(:disabled) { background:var(--mint); filter:brightness(.93) }
.composer-meta { display:flex; justify-content:space-between; gap:12px; margin-top:8px; font-size:.75rem; line-height:1.5; color:var(--muted) }
#count { white-space:nowrap }
.notice { background:var(--soft); border-left:3px solid var(--mint); padding:10px 12px; color:var(--ink); font-size:.875rem; margin-bottom:12px }
.reply-draft { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.875rem; background:var(--elevated); border-radius:8px; padding:3px 10px; margin-bottom:8px }
.reply-draft span { overflow-wrap:anywhere; min-width:0 }
.reply-draft button { border:0; background:transparent; font-size:1.25rem }
.share-draft { margin-top:10px; width:100%; color:var(--mint) }
.join-panel { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:16px 0 0; margin-top:14px; border-top:1px solid var(--line) }
.join-panel p { margin:5px 0 0; font-size:.875rem; color:var(--muted) }
.join-actions { display:flex; flex-direction:column; flex-shrink:0; gap:6px; align-items:flex-start; max-width:240px; font-size:.875rem }
.join-button { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:44px; padding:9px 14px; border-radius:9px }
#signin { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:3px }
.setup-note { font-size:.75rem; color:var(--muted) }
.broadcast-column { display:flex; flex-direction:column; gap:20px; min-width:0 }
.broadcast-card,.profile-card,.memory-card,.guide-card { border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; box-shadow:var(--shadow) }
.card-top { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 18px; min-height:52px; font-size:.75rem; font-weight:650; color:var(--muted); border-bottom:1px solid var(--line) }
.card-top a { display:grid; place-items:center; width:44px; height:44px; font-size:1.1rem }
.card-top button { margin-left:auto }
.video-shell { aspect-ratio:16/9; width:100%; position:relative; background:#142432; color:#eef4f7 }
.video-shell iframe { width:100%; height:100%; border:0; display:block; position:absolute; inset:0 }
.video-empty { display:flex; height:100%; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; font-size:.875rem }
.video-empty p { margin:10px 0 5px; max-width:390px }
.video-empty a { display:flex; min-height:44px; align-items:center; text-decoration:underline }
.desk-monogram { font-size:1.3rem; letter-spacing:.17em }
.focus-card { display:flex; justify-content:space-between; gap:12px; padding:20px 18px 14px }
.focus-card span { display:block; color:var(--muted); font-size:.75rem; letter-spacing:.05em }
.focus-card strong { display:block; font-size:1.15rem; margin-top:5px; overflow-wrap:anywhere }
.focus-card .focus-icon { color:var(--mint); font-size:1.5rem }
.trend-row { display:flex; justify-content:space-between; gap:10px; padding:0 18px; font-size:.875rem }
.trend-row span { color:var(--muted) }
.context-time { padding:12px 18px 18px; color:var(--muted); font-size:.75rem }
.profile-card,.memory-card,.guide-card { padding:18px }
.profile-heading { display:flex; gap:10px; align-items:center; margin-bottom:14px }
.profile-heading .avatar { width:44px; height:44px }
.profile-heading p { font-size:.875rem; color:var(--muted); margin:0 }
.profile-card form,.memory-card form { display:grid; gap:8px; margin-top:12px }
.profile-card p,.memory-card p { font-size:.875rem; color:var(--muted); margin:10px 0 }
.profile-card input[type="file"] { font-size:.875rem; padding:6px; max-width:100% }
.profile-card input::file-selector-button { min-height:44px; border:0; padding:8px; border-radius:5px; font:inherit }
.memory-card summary { padding:0; min-height:28px; color:var(--ink) }
#forgetMemory,#removeAvatar { color:var(--red); margin-top:12px; font-weight:500 }
.guide-card h2 { font-size:1.2rem; line-height:1.4; font-weight:600; margin-bottom:16px }
.host-introduction { display:flex; align-items:center; gap:12px; margin-bottom:14px }
.host-introduction h2 { margin:0; font-size:1.05rem }
.host-introduction .eyebrow { font-size:.625rem; margin-bottom:3px }
.host-emblem { display:grid; place-items:center; width:46px; height:46px; flex-shrink:0; font-size:1.6rem; color:var(--mint); border:1px solid var(--mint); border-radius:15px; background:var(--soft) }
.host-description { font-size:.875rem; color:var(--muted); line-height:1.7; margin-bottom:18px }
.guide-card ol { padding-left:20px; margin:0; color:var(--mint) }
.guide-card li { padding-left:5px; margin-bottom:16px; font-size:.875rem }
.guide-card li:last-child { margin:0 }
.guide-card b { color:var(--ink); display:block; font-weight:600 }
.guide-card li span { display:block; color:var(--muted); margin-top:3px }
.room-note { display:flex; gap:10px; font-size:.875rem; color:var(--muted); padding:0 3px }
.room-note p { margin:0 }
.note-mark { color:var(--mint) }
.watch-mode { grid-template-columns:minmax(0,1fr) minmax(360px,1fr) }
.watch-mode .watch-slot { grid-column:1; grid-row:1; min-width:0; position:sticky; top:20px }
.watch-mode .conversation { grid-column:2; grid-row:1 / span 2 }
.watch-mode .broadcast-column { grid-column:1; grid-row:2 }
.watch-mode .room-heading { flex-wrap:wrap }
.watch-mode .join-panel { flex-direction:column; align-items:flex-start }
.call-panel { background:var(--panel); border:1px solid var(--mint); border-radius:12px; padding:16px; margin-bottom:14px }
.call-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px }
.call-heading h2 { margin:0; font-size:1.1rem }
.call-heading p,.call-help { font-size:.875rem; color:var(--muted); margin:6px 0 12px }
.call-heading>button { font-size:1.2rem }
#callStatus { font-size:.875rem; margin-bottom:10px; font-weight:600 }
.call-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.call-tile { min-width:0; border:1px solid var(--line); border-radius:9px; background:var(--elevated); overflow:hidden }
.call-tile.speaking { border-color:var(--mint); box-shadow:0 0 0 1px var(--mint) }
.call-visual { aspect-ratio:4/3; position:relative; display:grid; place-items:center; overflow:hidden; color:var(--muted); font-size:1.8rem }
.call-visual video { width:100%; height:100%; object-fit:cover; position:absolute; inset:0 }
.call-tile.is-local video { transform:scaleX(-1) }
.call-name { display:block; padding:7px 10px; font-size:.875rem; overflow-wrap:anywhere }
.call-tile-controls { display:flex; flex-wrap:wrap; gap:4px; padding:0 6px 6px }
.call-tile-controls button { font-size:.875rem; padding:6px 8px; flex:1 }
.call-controls { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 }
.call-report { min-width:0; width:100%; font-size:.875rem }
.call-report summary { padding:8px; color:var(--muted) }
.call-report select { font-size:1rem; max-width:100%; margin-bottom:6px }
.call-report>button { width:100% }
.call-controls button[aria-pressed="true"] { color:var(--mint); border-color:var(--mint); background:var(--soft) }
.danger-button { color:var(--red) }
footer { display:flex; justify-content:space-between; gap:24px; max-width:1500px; margin:auto; padding:0 max(24px,4vw) 24px; color:var(--muted); font-size:.75rem }
footer>span { white-space:nowrap }
footer p { margin:0; max-width:660px }
@media(min-width:1400px) { .call-grid { grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media(max-width:1100px) {
  .workspace { gap:20px; grid-template-columns:minmax(0,1fr) 270px; padding:24px }
  .room-heading { flex-wrap:wrap; gap:10px }
  .join-panel { flex-direction:column; align-items:flex-start; gap:10px }
  .join-actions { max-width:none; flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px }
  .watch-mode { grid-template-columns:minmax(0,1fr) minmax(340px,1fr) }
}
@media(max-width:820px) {
  .masthead { padding:12px 20px }
  .room-brand { font-size:.75rem; letter-spacing:.08em }
  .workspace,.workspace.watch-mode { display:flex; flex-direction:column; padding:20px; gap:20px }
  .conversation,.watch-slot,.broadcast-column { width:100% }
  .watch-mode .watch-slot { position:static }
  .room-heading { flex-wrap:nowrap }
  .broadcast-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start }
  .room-note { grid-column:1/-1 }
  .feed { height:clamp(240px,38vh,440px); height:clamp(240px,38dvh,440px) }
  footer { padding:0 20px 24px }
}
@media(max-width:540px) {
  .masthead { padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left)); flex-wrap:wrap; gap:6px 12px }
  .brand { font-size:.75rem; letter-spacing:.08em }
  .brand-mark { width:32px; height:32px }
  .brand small { display:none }
  .room-brand { order:3; width:100%; letter-spacing:.12em }
  .theme-toggle { margin-left:auto; padding:8px 10px; font-size:.875rem }
  .workspace,.workspace.watch-mode { padding:16px max(12px,env(safe-area-inset-right)) 18px max(12px,env(safe-area-inset-left)); gap:16px }
  .room-heading { display:block; margin-bottom:12px }
  .room-heading .eyebrow { display:none }
  h1 { font-size:1.8rem }
  .intro { font-size:.875rem; margin:6px 0 8px }
  .connection { border:0; background:none; padding:0 }
  .mode-tabs { width:100%; margin-bottom:8px }
  .mode-tabs button { flex:1; padding:8px; font-size:.875rem }
  .room-actions { gap:6px; margin-bottom:10px }
  .room-actions button,.room-actions a { font-size:.875rem; padding:8px 10px; flex:1 1 auto; justify-content:center }
  .room-toolbar { padding:10px 12px; gap:8px }
  .room-toolbar>span:last-child { max-width:48% }
  .presence-strip { padding:0 12px 8px }
  .feed { padding:14px 12px; height:clamp(210px,32vh,380px); height:clamp(210px,32dvh,380px) }
  .welcome,.message { gap:9px }
  .message.is-octavia { padding:12px 10px }
  .avatar { width:30px; height:30px; font-size:.75rem }
  .byline { gap:3px 7px }
  .byline time { width:100%; margin-left:0 }
  .welcome .host-badge { display:none }
  .composer-area { padding:10px 12px 14px }
  .suggestions { gap:6px; margin-bottom:0 }
  .suggestions button { padding:8px 10px; font-size:.875rem }
  .suggestions button span { display:none }
  .compose-target select { font-size:1rem }
  .input-shell { flex-wrap:wrap; gap:4px }
  .input-shell textarea { flex:1 0 100%; min-height:60px }
  .send-button { margin-left:auto; min-width:130px }
  .composer-meta { font-size:.75rem; gap:7px }
  .join-panel { margin-top:12px; padding-top:12px }
  .join-actions { width:100%; gap:4px }
  .join-button { width:100% }
  .broadcast-column { display:flex; gap:14px }
  .broadcast-card,.profile-card,.memory-card,.guide-card { width:100% }
  .guide-card { padding:16px }
  .call-panel { padding:12px }
  .call-controls button { flex:1 1 42% }
  .call-grid { gap:7px }
  .call-tile-controls { flex-direction:column }
  footer { flex-direction:column; gap:7px; padding:0 14px calc(20px + env(safe-area-inset-bottom)) }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important } }

/* Keep conversation and reply controls together; secondary tools open only when needed. */
.masthead { padding:9px max(20px,2vw) }
.workspace { padding:14px max(20px,2vw); gap:18px; max-width:1600px }
.conversation { position:relative; display:flex; flex-direction:column; min-height:0 }
.room-heading { margin-bottom:10px }
.room-heading h1 { font-size:clamp(1.4rem,2.1vw,1.85rem); letter-spacing:-.025em }
.intro { margin-top:4px; font-size:.875rem }
.conversation-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; margin-bottom:10px; flex-shrink:0 }
.conversation-tools .mode-tabs,.conversation-tools .room-actions { margin-bottom:0 }
.mode-tabs button { padding:8px 13px }
.room-actions { gap:4px }
.room-actions button,.room-actions a { padding:8px 10px }
.room-details-toggle,.back-to-chat { display:none }
.chat-surface { display:flex; flex-direction:column; min-width:0; min-height:0; position:relative }
.room-toolbar { padding:8px 14px; flex-shrink:0 }
.presence-strip { padding:0 14px 7px; flex-shrink:0 }
.feed { padding:14px 16px; scrollbar-gutter:stable }
.message { padding:12px 0 }
.message.is-octavia { padding:12px 14px; margin:6px 0 }
.message p,.welcome p { line-height:1.55; margin-bottom:7px }
.byline { margin-bottom:4px }
.composer-area { padding:10px 14px; flex-shrink:0; position:relative }
.composer-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px }
.compose-target { flex:1; min-width:0; margin:0; gap:8px }
.compose-target select { flex:0 1 235px; min-width:0 }
.question-tools { position:relative; flex-shrink:0; margin-left:auto }
.question-tools>summary { padding:9px 10px; min-height:44px; color:var(--muted); border:1px solid var(--line); border-radius:8px; font-weight:500; font-size:.8125rem; white-space:nowrap }
.question-tools[open]>summary { background:var(--soft); color:var(--mint); border-color:var(--mint) }
.question-menu { position:absolute; bottom:calc(100% + 10px); right:0; z-index:12; width:min(530px,calc(100vw - 48px)); max-height:min(380px,55dvh); overflow:auto; overscroll-behavior:contain; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; box-shadow:0 12px 38px #1424322b }
.question-menu .suggestions { flex-wrap:wrap; overflow:visible; margin-bottom:8px }
.question-menu .suggestions button { white-space:normal; text-align:left; flex:1 1 130px }
.question-menu .coverage-picker { margin:0 }
.question-menu .coverage-symbols { max-height:170px }
.question-menu .share-draft { margin-top:8px }
.composer-label { padding-bottom:4px; font-size:.8125rem }
.input-shell { padding:6px; gap:8px }
.input-shell textarea { min-height:52px; max-height:120px; padding:4px 6px }
.composer-meta { margin-top:5px }
.notice { margin-bottom:8px; padding:7px 10px; max-height:90px; overflow:auto }
.reply-draft { margin-bottom:5px; max-height:78px; overflow:auto }
.join-panel { margin-top:8px; padding-top:8px; gap:10px }
.join-panel p { margin:2px 0 0; font-size:.8125rem }
.join-actions { flex-direction:row; align-items:center; gap:10px; max-width:none }
.join-button { padding:8px 12px }
.broadcast-column { gap:12px }
.profile-card,.memory-card,.guide-card { padding:14px }
.host-introduction { margin-bottom:10px }
.host-description { margin-bottom:12px }
.guide-card li { margin-bottom:10px }
.call-panel { max-height:60dvh; overflow:auto }
footer { max-width:1600px; padding:4px max(20px,2vw) 10px; gap:16px }

@media(min-width:821px) and (min-height:560px) {
  body { height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden }
  .masthead,footer { flex-shrink:0 }
  .workspace { flex:1; width:100%; min-height:0; margin:0 auto; align-items:stretch; grid-template-rows:minmax(0,1fr) }
  .conversation,.chat-surface { flex:1; min-height:0 }
  .room-heading { flex-shrink:0 }
  .feed { flex:1 1 0; height:auto; min-height:0; overflow-y:auto }
  .latest-bar { flex-shrink:0; padding:4px 10px }
  .latest-bar button { min-height:36px; padding:5px 14px; font-size:.8125rem }
  .broadcast-column { min-height:0; overflow-y:auto; scrollbar-width:thin; overscroll-behavior:contain; padding:1px 3px 3px }
  .broadcast-column>* { flex-shrink:0 }
  .watch-mode { grid-template-rows:auto minmax(0,1fr); grid-template-columns:minmax(0,1fr) minmax(360px,1fr) }
  .watch-mode .watch-slot { position:static; min-height:0; max-height:calc(100dvh - 230px); overflow:auto; scrollbar-width:thin }
  .watch-mode .focus-card { padding:12px 14px 8px }
  .watch-mode .trend-row { padding-inline:14px }
  .watch-mode .context-time { padding:8px 14px 12px }
  .watch-mode .conversation { grid-column:2; grid-row:1 / span 2 }
  .watch-mode .broadcast-column { grid-column:1; grid-row:2 }
  .call-panel { position:absolute; z-index:15; top:88px; right:0; width:min(100%,560px); max-height:calc(100% - 100px); box-shadow:0 12px 38px #1424322b }
}
@media(min-width:821px) and (max-height:740px) {
  .masthead { padding-top:6px; padding-bottom:6px }
  .brand-mark { width:32px; height:32px }
  .brand small,.room-heading .intro { display:none }
  .room-heading { margin-bottom:7px }
  .room-heading h1 { font-size:1.35rem }
  .workspace { padding-top:9px; padding-bottom:9px }
  .conversation-tools { margin-bottom:7px }
  footer { padding-bottom:6px }
}
@media(max-width:1100px) {
  .join-panel,.watch-mode .join-panel { flex-direction:row; align-items:center }
}
@media(max-width:820px) {
  .workspace,.workspace.watch-mode { padding:12px 16px; gap:14px }
  .conversation-tools { gap:6px }
  .room-actions .room-details-toggle { display:inline-flex; align-items:center; justify-content:center }
  .room-details-ready .room-actions .broadcast-page-link { display:none }
  .broadcast-column>.back-to-chat { display:block; width:100%; grid-column:1/-1; color:var(--mint) }
  .chat-surface { height:calc(100vh - 235px); height:calc(100dvh - 235px); min-height:365px; max-height:760px }
  .feed { flex:1 1 0; height:auto; min-height:0 }
  .composer-area { padding:9px 12px; position:sticky; bottom:0; z-index:3 }
  .broadcast-column { gap:12px }
  footer { padding:4px 16px calc(12px + env(safe-area-inset-bottom)) }
}
@media(max-width:540px) {
  .masthead { padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left)); flex-wrap:nowrap }
  .room-brand { display:none }
  .workspace,.workspace.watch-mode { padding:10px max(10px,env(safe-area-inset-right)) 12px max(10px,env(safe-area-inset-left)) }
  .room-heading { margin-bottom:8px }
  .room-heading h1 { font-size:1.4rem }
  .intro { margin:4px 0; font-size:.8125rem }
  .connection { font-size:.75rem }
  .conversation-tools { display:block }
  .conversation-tools .room-actions { margin-top:6px }
  .room-actions button,.room-actions a { font-size:.8125rem; padding:8px }
  .room-toolbar { padding:8px 10px }
  .feed { padding:12px 10px }
  .composer-tools { gap:6px }
  .compose-target label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
  .compose-target select { flex:1; font-size:1rem; padding:8px }
  .question-tools>summary { padding:9px 8px; font-size:.75rem }
  .question-menu { width:calc(100vw - 44px); max-height:50dvh; padding:11px }
  .input-shell { flex-wrap:nowrap; gap:4px }
  .input-shell textarea { flex:1 1 auto; min-height:52px }
  .send-button { min-width:44px; width:44px; height:44px; padding:0; font-size:1.25rem }
  #sendLabel { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
  .join-panel { gap:8px }
  .join-panel strong { font-size:.8125rem }
  .join-panel p { font-size:.75rem }
  .join-actions { width:auto; flex-shrink:0; gap:8px }
  .join-button { width:auto; gap:5px; padding:8px; font-size:.8125rem }
  #signin { font-size:.8125rem }
}