:root{color-scheme:light dark;font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--bg:light-dark(#fff,#171a20);--subtle:light-dark(#f6f7f9,#1d2129);--border:light-dark(#e4e7ed,#323945);--text:light-dark(#202936,#edf1f7);--muted:light-dark(#697586,#a0acbb);--accent:light-dark(#2563eb,#87b4ff);--tint:light-dark(#edf3ff,#24344f)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);overflow:hidden}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--border);border-radius:7px;background:var(--bg);padding:7px 12px;font-weight:500;white-space:nowrap}button:hover{background:var(--subtle);border-color:var(--accent)}button:disabled{opacity:.45;cursor:default}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}textarea,input{background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:10px;min-width:0}textarea{resize:none}input:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.primary{background:var(--accent);color:light-dark(#fff,#11213b);border-color:var(--accent)}.primary:hover{filter:brightness(.95);background:var(--accent)}.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.hint{color:var(--muted);font-size:12px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--muted)}h1,h2,h3,p{margin:0}h1,h2{font-size:19px;letter-spacing:-.025em}h3{font-size:12px;font-weight:600}.app-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--border);gap:16px}.brand{display:flex;align-items:center;gap:9px;font-weight:650;white-space:nowrap}.brand-mark{display:grid;place-items:center;background:var(--accent);color:var(--bg);width:26px;height:26px;border-radius:7px;font-size:15px}.app-label{font-weight:400;color:var(--muted);margin-left:6px}nav{display:flex;align-items:center;gap:22px;font-size:12px}nav button{font-size:12px}.workspace{height:calc(100dvh - 56px);display:grid;grid-template-columns:210px minmax(0,1fr) 310px}.rooms-panel{display:flex;flex-direction:column;padding:22px 14px 14px;background:var(--subtle);border-right:1px solid var(--border);min-height:0}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:6px}.sidebar-hint{font-size:12px;color:var(--muted);margin:12px 0 20px}.room-list{flex:1;overflow:auto;min-height:0}.room{display:block;padding:10px 12px;border-radius:8px;margin:3px 0;font-size:13px;overflow-wrap:anywhere}.room.active{background:var(--tint);color:var(--accent);font-weight:600}.create-room{border-top:1px solid var(--border);padding-top:16px;margin-top:14px}.create-room label{display:block;font-size:12px;font-weight:600;margin-bottom:8px}.create-room input{flex:1;width:0;font-size:12px;padding:8px}.create-room button{padding:6px 12px;font-size:18px}.sidebar-footer{font-size:10px;color:var(--muted);margin-top:20px;display:flex;align-items:center;gap:6px}.connection-dot{height:6px;width:6px;background:#30a479;border-radius:50%;flex-shrink:0}.conversation{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}.room-header{padding:18px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}.room-header .eyebrow{margin-bottom:4px}#status{font-size:12px;color:var(--muted);margin-top:3px}#notice{margin:10px 24px 0;padding:10px 12px;border:1px solid light-dark(#edce83,#795d24);border-radius:7px;background:light-dark(#fff9e9,#332c1a);font-size:12px;max-height:90px;overflow:auto}#notice:empty{display:none}.room-presence{padding:12px 24px;border-bottom:1px solid var(--border);max-height:30vh;overflow:auto}.participant-grid{display:flex;gap:8px;overflow-x:auto;padding:2px 1px 8px}.participant-grid:empty{display:none}.participant-tile{position:relative;flex:0 0 126px;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 6px 7px;border:1px solid var(--border);border-radius:9px;background:var(--subtle);gap:3px}.participant-avatar{display:grid;place-items:center;width:27px;height:27px;font-size:10px;border-radius:50%;background:var(--tint);color:var(--accent);font-weight:700}.participant-tile strong{font-size:11px;overflow-wrap:anywhere;max-width:100%}.participant-tile small{font-size:9px;color:var(--muted)}.participant-tile.speaking{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.voice-indicator{position:absolute;top:8px;right:7px;font-size:9px;color:var(--muted)}.speaking .voice-indicator{color:var(--accent)}.tile-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:3px}.tile-actions button{font-size:10px;padding:2px 5px;border-radius:4px}.voice-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:3px 0 9px}.voice-toolbar button{font-size:11px;padding:5px 8px}.playback-control{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:5px;white-space:nowrap}.playback-control input{accent-color:var(--accent);margin:0}.add-bots{display:flex;align-items:center;gap:12px;flex-wrap:wrap}#available-bots button{font-size:11px;padding:4px 9px;color:var(--accent);border-style:dashed}#available-bots .hint{font-size:10px}#screen-shares{display:flex;gap:10px;padding:12px 24px;overflow:auto;max-height:27vh;border-bottom:1px solid var(--border);flex-shrink:0}#screen-shares:empty{display:none}figure{margin:0;min-width:190px;width:250px;border:1px solid var(--border);border-radius:8px;padding:7px;flex-shrink:0}figure img{display:block;width:100%;height:130px;object-fit:contain;background:var(--subtle);cursor:zoom-in}figcaption{font-size:10px;margin-bottom:5px}figcaption button{font-size:10px;padding:2px 5px}figure:fullscreen{width:100%;background:var(--bg);display:flex;flex-direction:column}figure:fullscreen img{height:auto;flex:1;min-height:0}.chat-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px 8px}.chat-heading h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}#transcript{flex:1;min-height:80px;overflow:auto;padding:0 24px 16px;scrollbar-gutter:stable}#transcript:empty:after{content:"The conversation starts here. Join voice or send a message below.";display:block;color:var(--muted);text-align:center;padding:40px 20px;font-size:13px}.chat-message{padding:14px 0;border-bottom:1px solid var(--border);line-height:1.65;overflow-wrap:anywhere}.chat-message strong{display:block;font-size:12px;margin-bottom:3px}.message-body{display:block;white-space:pre-wrap;font-size:14px}.composer{margin:0 20px 16px;padding:10px 12px;background:var(--subtle);border:1px solid var(--border);border-radius:10px;flex-shrink:0}.composer:focus-within{border-color:var(--accent)}.composer textarea{display:block;width:100%;border:0;background:transparent;min-height:62px;max-height:150px;padding:2px;outline:none;box-shadow:none;font-size:13px}.composer-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}.composer-footer .hint{font-size:10px}.composer .primary{font-size:12px;padding:6px 13px}.composer .primary span{margin-left:8px}.notes-panel{border-left:1px solid var(--border);background:var(--subtle);padding:22px 20px;display:flex;flex-direction:column;gap:10px;min-height:0}.notes-header{display:flex;align-items:center;justify-content:space-between}.notes-header h2{margin-top:4px}.note-icon{font-size:22px;color:var(--muted)}#huddle-notes{width:100%;flex:1;min-height:120px;line-height:1.75;font-size:13px;padding:14px;border-radius:8px;background:var(--bg)}.notes-status{color:var(--muted);font-size:10px}.notes-panel .hint{font-size:11px}#notes-conflict{font-size:11px;max-height:40%;overflow:auto}#shared-notes-version{white-space:pre-wrap;font:inherit;border:1px solid var(--border);padding:8px;max-height:120px;overflow:auto}#notes-conflict button{font-size:10px;padding:4px}#latest-messages{position:absolute;bottom:150px;left:50%;transform:translateX(-50%);box-shadow:0 3px 12px #0002;color:var(--accent);font-size:11px}.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}.mobile-toggle{display:none}[hidden]{display:none!important}@media(min-width:901px){body.notes-hidden .workspace{grid-template-columns:210px minmax(0,1fr)}body.notes-hidden .notes-panel{display:none}}@media(max-width:1100px){.workspace{grid-template-columns:180px minmax(0,1fr) 270px}.room-header,.room-presence{padding-left:16px;padding-right:16px}.notes-panel{padding:20px 14px}.panel-heading .eyebrow{display:none}}@media(max-width:900px){.workspace{grid-template-columns:180px minmax(0,1fr)}.notes-panel{display:none;position:absolute;top:56px;bottom:0;right:0;width:min(340px,90vw);z-index:5;box-shadow:-8px 0 30px #0002}.notes-open .notes-panel{display:flex}}@media(max-width:650px){.app-header{padding:0 12px;gap:8px}.app-label,nav>a{display:none}nav{gap:6px}.mobile-toggle{display:block}.workspace{grid-template-columns:minmax(0,1fr)}.rooms-panel{display:none;position:absolute;top:56px;bottom:0;left:0;width:min(260px,85vw);z-index:5;box-shadow:8px 0 30px #0002}.rooms-open .rooms-panel{display:flex}.room-header{padding:13px 14px}.room-header h2{font-size:17px}.room-presence{padding:10px 14px;max-height:32vh}.chat-heading{padding:10px 14px 6px}#transcript{padding:0 14px 12px}.composer{margin:0 10px 10px}.participant-tile{flex-basis:112px}.playback-control{font-size:10px}#screen-shares{padding:8px 14px}.chat-heading .hint{font-size:10px}#notice{margin:8px 14px 0}}

.voice-options{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}.playback-control{display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;width:auto;max-width:100%}.playback-control input[type=checkbox]{appearance:auto;width:14px;height:14px;min-width:14px;flex:0 0 14px;padding:0;margin:0;vertical-align:middle}.playback-control span{flex:0 1 auto}

/* Pane resizing stays separate from room, media and notes rendering. */
.workspace{grid-template-columns:var(--huddle-rooms-width,210px) 6px minmax(300px,1fr) 6px var(--huddle-notes-width,310px)}
.rooms-panel,.notes-panel{min-width:0}
.huddle-resizer{position:relative;cursor:col-resize;touch-action:none;background:var(--subtle)}
.huddle-resizer::after{content:"";position:absolute;inset:0 2px;background:var(--border)}
.huddle-resizer:hover::after,.huddle-resizer:focus-visible::after{background:var(--accent)}
.huddle-resizer:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;z-index:1}
.huddle-resizing,.huddle-resizing *{cursor:col-resize!important;user-select:none!important}
.room-header>div:first-child{min-width:0;overflow-wrap:anywhere}
.room-header{flex-wrap:wrap}
@media(min-width:901px){body.notes-hidden .workspace{grid-template-columns:var(--huddle-rooms-width,210px) 6px minmax(300px,1fr)}body.notes-hidden #huddle-notes-resizer{display:none}}
@media(max-width:900px){.workspace{grid-template-columns:var(--huddle-rooms-width,180px) 6px minmax(300px,1fr)}#huddle-notes-resizer{display:none}}
@media(max-width:650px){.workspace{grid-template-columns:minmax(0,1fr)}.huddle-resizer{display:none}}
/* Bot voice state stays distinct from human microphone and speaking styles. */
.participant-tile[data-kind="bot"]{border-width:2px}
.participant-tile[data-bot-state="active"]{border-color:var(--accent);background:var(--tint)}
.participant-tile[data-bot-state="standby"]{border-style:dashed;background:var(--subtle)}
.bot-state{font-size:11px;font-weight:750;line-height:1.35;padding:3px 7px;border-radius:4px;background:var(--bg);color:var(--text);max-width:100%;overflow-wrap:anywhere}
[data-bot-state="active"] .bot-state{background:var(--accent);color:light-dark(#fff,#11213b)}
[data-bot-state="standby"] .bot-state{border:1px dashed currentColor}
[data-bot-state="failed"],[data-bot-state="offline"],[data-bot-state="disconnected"]{border-color:light-dark(#a73730,#e89c96)}
[data-bot-state="failed"] .bot-state,[data-bot-state="offline"] .bot-state,[data-bot-state="disconnected"] .bot-state{color:light-dark(#982a25,#ffb4ad)}
.participant-tile[data-kind="bot"] .tile-actions{flex-wrap:wrap;justify-content:center;max-width:100%}
.participant-tile[data-kind="bot"] small{max-width:100%;overflow-wrap:anywhere}

/* Keep participant controls reachable while desktop previews share the column. */
.tile-actions { flex-wrap: wrap; justify-content: center; }
.conversation:has(#bot-desktops:not(:empty)) .room-presence { flex-shrink: 0; max-height: 24vh; }
.conversation:has(#bot-desktops:not(:empty)) #screen-shares { flex-shrink: 1; min-height: 70px; }
#bot-desktops:empty { display: none; }
#bot-desktops { flex: 0 0 auto; height: clamp(120px, 24vh, 260px); overflow: auto; }
#bot-desktops figure { width: calc(100% - 32px); min-width: 0; margin: 8px 16px; padding: 0; height: calc(100% - 16px); display: flex; flex-direction: column; overflow: auto; background: #111; }
#bot-desktops figcaption { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex-shrink: 0; padding: 8px; background: var(--subtle); color: var(--text); }
#bot-desktops img { display: block; width: 100%; height: 0; min-height: 0; flex: 1; object-fit: contain; cursor: default; }
#bot-desktops figure:fullscreen, #bot-desktops figure.expanded { width: auto; background: #111; overflow: auto; }
#bot-desktops figure:fullscreen img, #bot-desktops figure.expanded img { max-height: none; height: calc(100dvh - 70px); }
#bot-desktops figure.expanded { position: fixed; inset: 10px; z-index: 100; margin: 0; height: auto; }

/* Reuse task Markdown styles with the Huddle palette and plain transcript layout. */
.message-markdown{white-space:normal;--border2:var(--border);--surface2:var(--subtle);--surface3:var(--subtle);--mono:ui-monospace,SFMono-Regular,Consolas,monospace}
.chat-message>.message-body strong{display:inline;font-size:inherit;margin:0}
.message-markdown .chat-link{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* Sidebar panels share the existing resizable/mobile notes container. */
#huddle-sidebar-tabs{display:flex;gap:4px;overflow-x:auto;flex-shrink:0;padding:3px 2px 8px;border-bottom:1px solid var(--border)}
#huddle-sidebar-tabs button{font-size:12px;max-width:200px;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
#huddle-sidebar-tabs [aria-selected=true]{background:var(--tint);border-color:var(--accent);color:var(--accent)}
.huddle-tab-panel{display:flex;flex-direction:column;gap:10px;min-height:0;flex:1;overflow:auto}
.huddle-tab-panel[hidden]{display:none}
#managed-tasks{display:contents}
.bot-task-card{font-size:12px;overflow-wrap:anywhere}
.bot-task-card h3{font-size:12px;margin:0;padding:8px 0;font-weight:600}
.bot-task-card ul{list-style:none;padding:0;margin:8px 0}
.bot-task-card li{border-top:1px solid var(--border);padding:10px 0}
.bot-task-card a{color:var(--accent);display:block}
.task-activity,.task-updated{display:block;font-size:11px;color:var(--muted);margin-top:4px}


/* Compact Huddles chrome: navigation stays with the room at every width. */
.workspace{height:100dvh}
.room-header{padding:8px 16px;gap:6px 16px;flex-shrink:0}
.room-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px}
.room-header h2{font-size:17px}
#status{margin:0}
.room-navigation{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:12px}
.room-navigation button,.room-navigation a{padding:4px 8px;min-height:30px}
.room-navigation a{display:inline-flex;align-items:center}
.room-presence{padding:8px 16px}
.participant-grid{align-items:start;padding-bottom:6px}
.participant-tile{flex-basis:290px;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;text-align:left;padding:7px;gap:3px 6px}
.participant-avatar{grid-column:1;grid-row:1 / 3;width:24px;height:24px}
.participant-tile strong{grid-column:2;grid-row:1;font-size:12px;line-height:1.35}
.participant-tile small{grid-column:2 / 4;grid-row:2;font-size:10px;line-height:1.4}
.participant-tile .bot-state{grid-column:3;grid-row:1;font-size:10px;padding:2px 5px}
.participant-tile .voice-indicator{position:static;grid-column:3;grid-row:1}
.participant-tile[data-kind="human"]{flex-basis:180px}
.participant-tile[data-kind="bot"] .participant-avatar{grid-row:1}
.participant-tile[data-kind="bot"] .voice-indicator{grid-column:1;grid-row:2;font-size:8px}
.participant-tile .tile-actions{grid-column:1 / -1;grid-row:3;justify-content:flex-start;margin-top:2px;gap:4px}
.participant-tile[data-kind="bot"] .tile-actions{justify-content:flex-start}
.tile-actions button,.participant-tile>button{min-height:28px;font-size:11px;padding:3px 5px}
.participant-tile>button{grid-column:1 / -1;justify-self:start}
.composer{margin:0 16px 10px;padding:6px 10px}
.composer textarea{min-height:26px;max-height:min(120px,20dvh);line-height:20px;padding:3px 2px;overflow-y:auto}
.composer-footer{margin-top:4px}
.composer .primary{padding:4px 10px;min-height:30px}
@media(max-width:900px){.notes-panel{top:0}.notes-open .notes-panel{top:var(--huddle-header-height,90px)}}
@media(max-width:650px){
 .room-header{padding:6px 10px;gap:4px}
 .room-heading{width:100%;gap:0 8px}
 .room-navigation{gap:4px;font-size:11px}
 .room-navigation a,.room-navigation button{min-height:32px;padding:4px 7px}
 .room-navigation a{display:inline-flex}
 .rooms-panel{top:var(--huddle-header-height,90px)}
 .room-presence{padding:6px 10px}
 .participant-tile{flex-basis:290px}
 .tile-actions button,.participant-tile>button{min-height:32px}
 .composer{margin:0 10px 8px;padding:5px 8px}
 .composer textarea{font-size:16px}
 .composer .primary{min-height:32px}
}
/* Invitations, tall drafts and shared media may exceed any viewport. Keep
   room content scrollable and Send visible when that happens. */
.conversation{overflow-y:auto}
.composer{position:sticky;bottom:0;z-index:2}
#invite-user{padding:10px 20px;flex-wrap:wrap}#invite-recipient{min-height:44px;max-width:100%;background:var(--bg);color:inherit;border:1px solid #71839c;border-radius:6px;padding:8px}#send-invite{min-height:44px}

.playback-volume-control{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;width:100%}.playback-volume-control label{min-width:120px}.playback-volume-control input{width:140px;min-height:44px;padding:0;accent-color:var(--accent)}.playback-volume-control output{min-width:38px;font-variant-numeric:tabular-nums}.playback-volume-control button{min-height:44px}.playback-volume-control .hint{font-size:10px}

/* Audio settings expand in place; the closed toolbar stays on one short row. */
.voice-toolbar{justify-content:flex-start;gap:4px;margin:0 0 6px}
.voice-toolbar>button{padding:4px 6px;min-height:32px}
.audio-options{font-size:11px}
.audio-options summary{cursor:pointer;min-height:32px;padding:6px;border:1px solid var(--border);border-radius:7px;background:var(--bg);white-space:nowrap}
.audio-options summary:hover{background:var(--subtle);border-color:var(--accent)}
.audio-options summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.audio-options[open]{flex:1 0 100%}
.audio-options[open] summary{width:fit-content}
.audio-options-panel{padding:4px 8px 8px;margin-top:4px;border:1px solid var(--border);border-radius:7px;background:var(--subtle)}
.audio-options-panel .playback-volume-control{gap:6px}
.audio-options-panel .voice-options{display:flex;flex-wrap:wrap;gap:4px 12px}
#bot-volume-summary,#human-volume-summary{font-variant-numeric:tabular-nums}
@media(max-width:650px){
 .playback-volume-control label{flex-basis:100%}
 .voice-toolbar>button{padding-inline:4px}
 .audio-options summary{padding-inline:4px}
}
.task-voice-control{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}.task-voice-control button{font-size:11px;padding:4px 8px}.task-voice-control .task-activity{flex-basis:100%}

/* Source and saved local time stay readable when the header wraps on mobile. */
.message-header{display:flex;align-items:baseline;gap:6px 10px;flex-wrap:wrap;margin-bottom:4px}
.message-header strong{margin:0;min-width:0}
.message-source{font-size:10px;font-weight:600;padding:0 6px;border:1px solid var(--border);border-radius:4px;color:var(--muted)}
.chat-voice .message-source{color:var(--accent);background:var(--tint);border-color:transparent}
.message-time{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}

/* Body-mounted menu stays outside the scrolling participant strip. */
.tile-actions .tile-overflow{min-width:32px;font-size:18px;line-height:1;padding:0 6px}
.tile-action-menu{position:fixed;z-index:100;min-width:160px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:4px;border:1px solid var(--border);border-radius:7px;background:var(--bg);box-shadow:0 4px 16px #0003}
.tile-action-menu :is(button,a){display:block;width:100%;min-height:36px;text-align:left;border-color:transparent;font-size:12px}
@media(max-width:650px){.tile-action-menu :is(button,a){min-height:44px}}

.bot-role{display:block;font-size:11px;font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.tile-action-menu a{padding:7px 12px;border:1px solid transparent;border-radius:7px}
.tile-action-menu a:hover{background:var(--subtle);border-color:var(--accent)}