/* Prefactory — the reference presentation (Maggie project shell), applied to
   Core-owned controls. Presentation only: every id and control that the Core
   controllers and tests reach stays where it was; only how it looks moved.

   Structure
     1. tokens: theme (dark-first), accent families, chat type scale
     2. base and the page skeleton: neutral top bar, appearance panel, notice, sign-in
     3. the rail: head, Create, inventory, Space rows, Rooms
     4. the pane: Room header, landing, messages, composer, Files
     5. meeting and team setup panels
     6. collapsed rail, breakpoints */

/* ---------------------------------------------------------------- 1. tokens
   Dark is the bare :root; light is declared under the toggle attribute and
   again as the system fallback, so no colour has its only home in a media
   query. The two shell tones live at :root and do not flip with the theme:
   the chrome is the constant a person navigates by. */
:root {
  color-scheme:dark;
  --bg:#262624;--bg-rail:#1D1D21;--surface:#302F2D;--surface-2:#3A3936;
  --line:#403F3B;--line-soft:#35342F;--text:#F3F1EC;--text-2:#B4B0A6;--text-3:#86817A;
  --on-accent:#F6F7FF;--danger:#E08A72;--danger-bg:#3A211B;
  --shadow:0 18px 44px -26px rgba(0,0,0,.85);
  --member-tone-1:#E0A15C;--member-tone-2:#8FBF8A;--member-tone-3:#7FB3C8;--member-tone-4:#B79BD6;--member-tone-5:#E39A9A;
  --member-tone-6:#C9C07A;--member-tone-7:#7FC4B0;--member-tone-8:#A9B4E0;--member-tone-9:#D9A6C4;--member-tone-10:#C0A98C;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme:light;
    --bg:#FAF9F5;--bg-rail:#EFEFF3;--surface:#FFFFFF;--surface-2:#F2F0E8;
    --line:#E2DFD4;--line-soft:#EDEAE0;--text:#24231F;--text-2:#5C594F;--text-3:#8A8579;
    --on-accent:#FFFFFF;--danger:#A2402A;--danger-bg:#FBEDE8;
    --shadow:0 18px 40px -28px rgba(58,50,38,.45);
    --member-tone-1:#8A5A12;--member-tone-2:#3E6B3A;--member-tone-3:#23607A;--member-tone-4:#5B4A8F;--member-tone-5:#9A3F44;
    --member-tone-6:#6B6417;--member-tone-7:#17685A;--member-tone-8:#414F91;--member-tone-9:#8A3F6E;--member-tone-10:#6E5738;
  }
}
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#FAF9F5;--bg-rail:#EFEFF3;--surface:#FFFFFF;--surface-2:#F2F0E8;
  --line:#E2DFD4;--line-soft:#EDEAE0;--text:#24231F;--text-2:#5C594F;--text-3:#8A8579;
  --on-accent:#FFFFFF;--danger:#A2402A;--danger-bg:#FBEDE8;
  --shadow:0 18px 40px -28px rgba(58,50,38,.45);
  --member-tone-1:#8A5A12;--member-tone-2:#3E6B3A;--member-tone-3:#23607A;--member-tone-4:#5B4A8F;--member-tone-5:#9A3F44;
  --member-tone-6:#6B6417;--member-tone-7:#17685A;--member-tone-8:#414F91;--member-tone-9:#8A3F6E;--member-tone-10:#6E5738;
}
/* Light schemes. Mid-Century: terracotta bar, cream rail, warm paper cards, peach bubbles.
   Coastal: navy bar and rail, sand page, sand cards, sky-blue bubbles. Nothing here applies in dark. */
:root[data-theme="light"][data-palette="midcentury"],:root:not([data-theme="dark"])[data-palette="midcentury"]{
  --bg:#FAF3EA;--bg-rail:#F3E6D8;--surface:#FFF9F1;--surface-2:#F1E7D9;--line:#E6D8C6;--line-soft:#EFE4D6;
  --bar:#C4573A;--on-bar:#FFF5EE;--on-bar-2:rgb(255 245 238/.84);--bar-hover:rgb(255 255 255/.18);--bar-line:#B04A2E;
  --card:#EFE3CF;--bubble-self:#F3D9C8}
:root[data-theme="light"][data-palette="coastal"],:root:not([data-theme="dark"])[data-palette="coastal"]{
  --bg:#F5EFE3;--bg-rail:#1B2D47;--surface:#FFF9EE;--surface-2:#EFE6D4;--line:#E4DCCB;--line-soft:#ECE4D4;
  --bar:#15243A;--on-bar:#EEF2F8;--on-bar-2:rgb(238 242 248/.8);--bar-hover:rgb(255 255 255/.12);--bar-line:#0F1A2C;
  --card:#EFE6D4;--bubble-self:#DFE7F3}
/* Coastal's rail is dark on a light page, so the rail's own text and surfaces are restated for it and for the
   settings panes that wear the rail colour (Agents & integrations, Spaces). */
:root[data-theme="light"][data-palette="coastal"] :is(#room-rail,#view-connect .settings-pane,#view-spaces .settings-pane),:root:not([data-theme="dark"])[data-palette="coastal"] :is(#room-rail,#view-connect .settings-pane,#view-spaces .settings-pane){
  --text:#E8EEF7;--text-2:#C4D0E2;--text-3:#9FB0C8;--surface:#243B5C;--surface-2:#2B4466;--line:#34506F;--line-soft:#2B3F5E;
  --accent-soft:#2F4A6E;--accent-ink:#F5EFE3;--accent-line:#4A6890}
/* Two palettes. --accent is the action colour (buttons, marks, selection); --shell is the structural
   colour the folded rail wears. Each palette's light look is a full scheme just above (bar, rail,
   bubbles, cards); dark keeps the shared dark base with the palette's accent until its dark twin lands. */
:root,:root[data-palette="midcentury"]{--accent:#A9471F;--shell:#8F3A19;--shell-2:#7A3115}
:root[data-palette="coastal"]{--accent:#A85A26;--shell:#15243A;--shell-2:#0F1A2C}
:root {
  --on-shell:#FFFFFF;--on-shell-2:rgb(255 255 255/.78);--on-shell-mute:rgb(255 255 255/.52);
  --shell-sel:rgb(255 255 255/.17);--shell-hover:rgb(255 255 255/.10);--shell-line:rgb(255 255 255/.14);
  --accent-ink:color-mix(in oklab,var(--accent) 76%,var(--text));
  --accent-soft:color-mix(in oklab,var(--accent) 16%,var(--surface));
  --accent-line:color-mix(in oklab,var(--accent) 38%,var(--line));
  /* Surfaces a palette may recolour: the top bar and what sits on it, other people's and agents' message cards, your own bubble. */
  --bar:color-mix(in oklab,var(--accent) 12%,var(--surface));--on-bar:var(--text);--on-bar-2:var(--text-2);--bar-hover:var(--surface-2);
  --bar-line:color-mix(in oklab,var(--accent) 22%,var(--line));--card:var(--surface-2);--bubble-self:var(--accent-soft);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --mono:ui-monospace,"Cascadia Mono","Segoe UI Mono","SF Mono",Consolas,monospace;
  --zoom:1;--topbar-h:52px;--notice-h:22px;--rail-w-open:300px;--rail-w:var(--rail-w-open);--rail-w-icon:62px;
  --chat-font:15px;--chat-meta:12px;--chat-line:1.55;
  font:14px/1.5 var(--sans);font-synthesis:none;color:var(--text);background:var(--bg);
}
/* Text size scales the whole page, rail and chat alike, the way browser zoom does;
   chat never grows on its own. */
:root[data-text-size="s"]{zoom:.9;--zoom:.9}
:root[data-text-size="l"]{zoom:1.12;--zoom:1.12}
:root[data-rail="collapsed"]{--rail-w:var(--rail-w-icon)}
.swatch[data-palette="midcentury"]{--swatch:#C4573A}.swatch[data-palette="coastal"]{--swatch:#15243A}

/* ------------------------------------------------ 2. base and page skeleton */
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;height:calc(100dvh / var(--zoom,1));overflow:hidden;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;
  display:grid;grid-template-rows:var(--topbar-h) 0 minmax(0,1fr)}
/* The environment banner stays in the page for the record but is not shown. */
.notice{display:none}
[hidden]{display:none!important}
.topbar{grid-row:1}.notice{grid-row:2}#signin,#workspace{grid-row:3}
button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{color:var(--text-2);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:7px 13px;cursor:pointer}
button:hover:not(:disabled){background:var(--surface-2);color:var(--text)}button:disabled{opacity:.45;cursor:default}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
a{color:var(--accent-ink)}h1,h2,h3,h4,p{margin-top:0}.muted,small{color:var(--text-3);font-size:12px}
.lede{color:var(--text-2);margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.spacer{flex:1}
/* :where() keeps this base at element weight, so a component rule below still decides its own
   padding. Written with :not([type=...]) it outranked every single-class rule and won instead. */
textarea,input:not(:where([type="checkbox"],[type="file"])),select{width:100%;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 11px;min-width:0}
textarea:focus-visible,input:focus-visible,select:focus-visible{border-color:var(--accent-line);outline:none}
input::placeholder,textarea::placeholder{color:var(--text-3)}
.btn,#send,#personas button,#personas a{font-weight:500;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);border-radius:11px;padding:10px 16px;text-align:center;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover,#send:hover:not(:disabled),#personas button:hover,#personas a:hover{background:color-mix(in oklab,var(--accent) 86%,var(--text));color:var(--on-accent)}
.chip{padding:4px 10px;border-radius:999px;font-size:12.5px}

/* The top bar is neutral: the wordmark, then the account cluster. Colour is
   reserved for state, so the Meet button and the open tab own it below. */
.topbar{position:relative;display:flex;align-items:center;gap:6px;padding:0 12px 0 8px;min-width:0;z-index:45;
  background:var(--bar);color:var(--on-bar);border-bottom:1px solid var(--bar-line)}
.topbar .brand{display:flex;align-items:center;gap:9px;margin-left:2px;min-width:0}
.brand .mark{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--accent);color:var(--on-accent);flex:0 0 auto}
.brand .mark svg{width:15px;height:15px;stroke-width:2}
.wordmark{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.topbar-icon{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0!important;border-radius:11px;background:none!important;color:var(--on-bar-2);flex:0 0 auto;text-decoration:none}
.topbar-icon:hover{background:var(--bar-hover)!important;color:var(--on-bar)}
.topbar-icon svg{width:20px;height:20px}
.topbar-icon[aria-expanded="true"]{background:var(--bar-hover)!important;color:var(--on-bar)}
/* The connected coding clients: the one large control up here, so it is found. */
/* Two round things side by side read as a pair. The account is the theme colour because it
   is you; the plug is a plain icon like the rest of the bar, because it is a door. */
.coding-clients{width:38px;height:38px;border-radius:11px;margin-right:2px;color:var(--accent);
  background:color-mix(in oklab,var(--accent) 9%,var(--surface))!important;
  border:1.5px solid color-mix(in oklab,var(--accent) 58%,var(--line))!important}
.coding-clients svg{width:21px;height:21px;stroke-width:2}
.coding-clients:hover{background:var(--accent-soft)!important;color:var(--accent-ink);border-color:var(--accent)!important}
.coding-clients[aria-selected="true"]{background:var(--accent)!important;color:var(--on-accent)}
/* A page view, not a Room view: the Room header steps aside while it is open. */
html[data-view="connect"] .room-head{display:none}
.connect-view .connect-tabs{margin:14px 0 12px}
.account{width:34px;height:34px;padding:0;border:0!important;border-radius:50%;background:var(--accent)!important;color:var(--on-accent);font-weight:700;font-size:13px;position:relative;margin-left:6px;flex:0 0 auto}
.account::before{content:attr(data-initial)}
.account::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid var(--surface)}
.account[data-status="idle"]::after{background:#f59e0b}.account[data-status="offline"]::after,.account[data-status="unknown"]::after{background:var(--text-3)}
.account:hover{background:color-mix(in oklab,var(--accent) 86%,var(--text))!important;color:var(--on-accent)}
#logout{padding:5px 10px;font-size:12px;border-radius:999px;margin-left:4px}
/* New Space is rare, so it lives in the top bar as a plus that opens a small form. */
/* The appearance panel, from the moon: theme, accent, text size. */
/* As wide as what it holds, so the smaller text sizes do not leave a margin of nothing. */
.appearance-popover{position:fixed;top:0;left:0;width:max-content;max-width:min(320px,calc(100vw - 24px));z-index:120;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.appearance-row{display:flex;align-items:center;gap:14px}
.appearance-label{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);width:48px;flex:0 0 auto}
.theme-modes{display:flex;gap:3px;padding:3px;background:var(--surface-2);border-radius:9px}
.theme-modes button{border:0;padding:4px 12px;border-radius:7px;font-size:12.5px;background:none;color:var(--text-2)}
.theme-modes button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgb(0 0 0/.12)}
.swatches{display:flex;gap:8px}
.swatch{width:18px;height:18px;border-radius:50%;padding:0;border:1px solid var(--line);cursor:pointer}
/* A swatch is its colour. The base button hover paints every button grey, which outranked the
   colour and turned the one under the pointer white; hovering rings it instead. */
.swatches .swatch,.swatches .swatch:hover:not(:disabled){background:var(--swatch)}
.swatches .swatch:hover:not(:disabled){box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--line)}
.swatches .swatch[aria-pressed="true"],
.swatches .swatch[aria-pressed="true"]:hover:not(:disabled){box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--text-2)}
.text-sizes{display:flex;align-items:center;gap:1px;padding:3px 4px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px}
.text-size{width:22px;height:20px;padding:0;border:0;border-radius:999px;background:none;color:var(--text-3);font-family:var(--serif);line-height:1;cursor:pointer}
.text-size[data-text-size="s"]{font-size:10.5px}.text-size[data-text-size="m"]{font-size:13px}.text-size[data-text-size="l"]{font-size:15.5px}
.text-size:hover:not(:disabled){background:none;color:var(--text)}
.text-size[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-ink)}
body:has(#signin:not([hidden])){grid-template-rows:0 0 minmax(0,1fr)}
body:has(#signin:not([hidden])) .topbar{display:none}
.notice{padding:3px 16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--bg-rail);color:var(--text-3);border-bottom:1px solid var(--line-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:15px}

#signin{overflow-y:auto;min-height:0}
.centre{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}
.brand{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.mark{width:26px;height:26px;border-radius:8px;flex:0 0 auto;background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.mark svg{width:15px;height:15px;stroke-width:2}
.wordmark{font-family:var(--serif);font-size:19px;letter-spacing:.01em}
#signin p{color:var(--text-2);margin:0;max-width:46ch}
#signin p:empty{display:none}
#personas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
#personas button,#personas a{min-width:15rem}

/* --------------------------------------------------------------- 3. the rail */
#workspace{position:relative;display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:0;height:100%;transition:grid-template-columns .18s ease}
/* Unpinned, the rail opens over the conversation while the pointer is on it: the column it
   sits in keeps the narrow width, so nothing beside it moves while you look. */
:root[data-rail-peek="true"]{--rail-w:var(--rail-w-icon)}
/* At pointer widths the folded rail is an overlay beside its reserved column, so widening it
   under a resting pointer is a flyout over the conversation: the page behind never reflows.
   Width eases both ways; the open condition is the peek attribute written from pointer
   enter/leave, never :hover, which flaps while the box under the cursor changes. */
@media (min-width:761px){
  [data-rail="collapsed"] #room-rail,html[data-rail-peek="true"] #room-rail{position:absolute;left:0;top:0;bottom:0;z-index:40;width:var(--rail-w-icon);
    transition:width .18s ease,box-shadow .18s ease}
  html[data-rail-peek="true"] #room-rail{width:var(--rail-w-open);box-shadow:8px 0 30px rgb(0 0 0/.25)}
  @media (prefers-reduced-motion:reduce){[data-rail="collapsed"] #room-rail,html[data-rail-peek="true"] #room-rail{transition:none}}
}
#rail-toggle .pin{transition:transform .15s ease}
/* Pinned it stands up in the accent; peeking it lies over, as a pin not pushed in. */
html[data-rail-peek="true"] #rail-toggle .pin{transform:rotate(45deg)}
html[data-rail="expanded"]:not([data-rail-peek]) #rail-toggle{color:var(--accent-ink)}
@media (prefers-reduced-motion: reduce){#workspace{transition:none}}
#room-rail{grid-column:1;background:var(--bg-rail);border-right:1px solid var(--line-soft);display:flex;flex-direction:column;min-width:0;min-height:0;padding:12px 10px 10px;gap:8px;overflow:hidden}
.rail-head{display:flex;align-items:center;gap:6px;padding:0 0 0 10px;min-height:30px}
.who{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);min-width:0;overflow:hidden;white-space:nowrap;flex:1}
#rail-toggle{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:9px;background:none;color:var(--text-3);margin-left:auto}
#rail-toggle:hover:not(:disabled){background:var(--surface);color:var(--text)}
#rail-toggle span{display:grid;place-items:center}#rail-toggle .when-collapsed{display:none}
.when-collapsed{display:none}
.new-btn{display:flex;align-items:center;gap:9px;width:100%;padding:8px 12px;font-weight:500;font-size:13.5px;color:var(--accent-ink);
  background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:11px;cursor:pointer;white-space:nowrap;transition:background .15s ease}
.new-btn:hover{background:color-mix(in oklab,var(--accent) 26%,var(--surface))}
.new-btn svg{width:16px;height:16px;stroke-width:2}
.rail-form{display:flex;flex-direction:column;gap:8px;padding:10px 2px 2px}
.rail-form label{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
.rail-form input{font-size:13.5px;padding:8px 10px}
.rail-form button{align-self:flex-start;padding:6px 12px;font-size:12.5px;color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-line);border-radius:9px}
.rail-form button:hover:not(:disabled){background:color-mix(in oklab,var(--accent) 26%,var(--surface));color:var(--accent-ink)}
.rail-note{font-size:12px;color:var(--text-3);padding:0 12px;margin:0}
.rail-note:empty{display:none}
#new-space-status{padding:4px 12px 0}
.rail-retry{font-size:12px;margin:0 2px;white-space:normal}
#inbox-items{display:flex;flex-direction:column;gap:6px}
#inbox-items:empty{display:none}
#inbox-items p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}
#inbox-items p span{flex:1 1 100%;font-weight:550}
#inbox-items p button{margin:0}
/* The inventory: Spaces as rows with a settings handle on the open one; its Rooms sit beneath as a conversation list. */
.rooms-region{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:4px}
.space-list{display:flex;flex-direction:column;gap:2px;min-height:0;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.space-group{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:2px;flex:0 0 auto;margin-top:4px}
.space-group>.rail-rooms{grid-column:1/-1}
.space-head{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;padding:7px 8px 7px 6px;border:0;border-radius:10px;background:none;text-align:left;
  font-size:15px;font-weight:600;color:var(--text);cursor:pointer}
.space-head:hover:not(:disabled){background:var(--surface)}
.space-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.space-twisty{width:15px;height:15px;color:var(--text-3);flex:0 0 auto;transition:transform .15s ease}.space-head[aria-expanded="true"] .space-twisty{transform:rotate(90deg)}
.space-settings{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:none;color:var(--text-3)}
.space-settings:hover:not(:disabled){background:var(--surface);color:var(--text)}.space-settings svg{width:16px;height:16px}
.rail-rooms{display:flex;flex-direction:column;gap:2px;flex:0 0 auto;padding-left:2px}
.space-group:not([data-expanded]) .rail-rooms{display:none}
.space-group[data-archived] .space-head{color:var(--text-3);cursor:default}.space-group[data-archived] .space-twisty{visibility:hidden}
.space-tag{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--line);border-radius:999px;padding:1px 6px;flex:0 0 auto}
/* The Room list contributes its rows to the Space block's column directly, so the
   New Room row can sit after the Rooms and before Direct, which is ordered last. */
#rooms{display:contents}
/* New Room follows the Rooms that exist, open or folded. */
#rail-rooms>#more-rooms{order:24}#rail-rooms>#new-room-open{order:25}#rail-rooms>#new-room-form{order:26}#rail-rooms>#new-room-status{order:27}#rail-rooms>#room-action-retry{order:28}
#rooms button,#direct-rooms button{display:flex;align-items:center;gap:10px;flex-shrink:0;width:100%;padding:7px 10px;border:0;border-radius:10px;background:none;color:var(--text);font-size:14px;text-align:left;cursor:pointer}
#rooms button:hover:not(:disabled),#direct-rooms button:hover:not(:disabled){background:var(--surface)}
/* The open Room is a raised card; the rest sit flat. */
#rooms button[aria-current="true"],#direct-rooms button[aria-current="true"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgb(0 0 0/.08)}
#rooms button:disabled{opacity:.42}
#rooms button{order:10}
#rooms button:has(.room-glyph[data-profile="understand"]){order:1}#rooms button:has(.room-glyph[data-profile="decide"]){order:2}
#rooms button:has(.room-glyph[data-profile="produce"]){order:3}#rooms button:has(.room-glyph[data-profile="review"]){order:4}
#rooms button:has(.room-glyph[data-profile="mine"]){order:20;position:relative}
.room-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto}
.room-glyph{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:9px;font-size:13px;font-weight:600;
  color:var(--accent-ink);background:color-mix(in oklab,currentColor 14%,transparent)}
.room-glyph svg{width:16px;height:16px;stroke-width:1.9}
.room-glyph[data-profile="understand"]{color:color-mix(in oklab,#0EA5E9 78%,var(--text))}
.room-glyph[data-profile="decide"]{color:color-mix(in oklab,#F59E0B 78%,var(--text))}
.room-glyph[data-profile="produce"]{color:color-mix(in oklab,#8B5CF6 78%,var(--text))}
.room-glyph[data-profile="review"]{color:color-mix(in oklab,#10B981 78%,var(--text))}
.room-glyph[data-profile="mine"]{color:var(--accent-ink)}
.mention-badge{margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-size:10px;line-height:1;font-weight:600;min-width:17px;padding:3px 5px;border-radius:9px;text-align:center;background:var(--accent);color:var(--on-accent)}
#more-rooms{font-size:12px;padding:5px 10px;border-radius:999px;align-self:flex-start;margin:0 2px}
#new-room-form{flex-direction:row;align-items:center;gap:6px;padding:0 2px 2px;margin:2px 0 0}
#new-room-form input{flex:1 1 auto;font-size:13.5px;padding:7px 12px 7px 14px;background:none;border-color:transparent;color:var(--text-2)}
#new-room-form input::placeholder{color:var(--text-3)}#new-room-form input:hover,#new-room-form input:focus{background:var(--surface);border-color:var(--line);color:var(--text)}
#new-room-form button{display:none;align-self:auto;white-space:nowrap;padding:6px 10px}
#new-room-form:has(input:not(:placeholder-shown)) button{display:inline-flex}
/* --------------------------------------------------------------- 4. the pane */
.conversation{grid-column:2;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;background:var(--surface)}
/* The Room header: the Room, who is in it, Chat and Files, then Meet and settings. */
.room-head{display:flex;align-items:center;gap:12px;padding:0 16px 0 20px;min-height:64px;border-bottom:1px solid var(--line-soft);flex:0 0 auto;position:relative;z-index:20;container-type:inline-size;container-name:room-head}
/* The meeting band goes icon-only when the header cannot hold its labels beside Meet and settings; the tiles keep their tooltips. */
@container room-head (max-width:1500px){.meeting-band .mtg-btn:has(.mtg-icon){padding:6px;min-width:36px}.meeting-band .mtg-btn:has(.mtg-icon) .mtg-btn-text{display:none}}
@container room-head (max-width:1100px){.meeting-band .availability{display:none}#room-name{max-width:164px}}
/* Four views and a meeting band leave less room than two tabs did: the count leaves the pill and the
   copy-id control steps aside before the name has to shrink much. */
@container room-head (max-width:1000px){.people-pill:has(.pill-stack) .pill-count{display:none}.people-pill:has(.pill-stack){gap:0;padding:3px}.room-tabs{gap:12px}}
@container room-head (max-width:860px){.room-head .room-copy,.room-head .room-rename{display:none}} /* Rename lives in Settings too. */
/* A direct conversation cannot be renamed, so its pencil is absent and everything after it
   used to slide left. Wide enough to hold the tools, the space is kept whether or not the
   pencil is in it, so the people, the tabs and Meet sit where they sat. */
/* The sheet hides anything with the hidden attribute outright, so keeping the space back
   has to say so as loudly. */
@container room-head (min-width:561px){.room-head #room-rename[hidden]{display:grid!important;visibility:hidden}}
/* Narrow, the faces say who is here and the words are what the Room's own controls need
   the room for. The count stays in the pill's tooltip and in the popover it opens. */
@container room-head (max-width:700px){
 .people-pill:has(.pill-stack) .pill-count{display:none}
 .people-pill:has(.pill-stack){gap:0;padding:3px}
}
/* Tighter still: the pencil and the copy-id control are refinements for a pointer and a
   coding agent. The Room's own name is not, so they go first and it keeps the room. */
@container room-head (max-width:560px){
 .room-head .room-rename,.room-head .room-copy,#room-glyph{display:none}
 #room-name{max-width:104px}
}
.workspace-heading{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 auto;align-self:stretch}
html:not([data-room]) .workspace-heading,html:not([data-room]) .room-actions{visibility:hidden}
.room-head-glyph{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);font-weight:600;font-size:14px;flex:0 0 auto}
.room-head-glyph:empty{display:none}
.room-head-glyph svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.room-head-glyph[data-kind="direct"]{border-radius:50%}
.room-titles{display:flex;align-items:center;gap:6px;min-width:0;flex:0 1 auto}
.room-rename,.room-tool{width:34px;height:34px;padding:0;display:grid;place-items:center;border:0!important;border-radius:9px!important;background:none!important;color:var(--text-3);opacity:.65;transition:opacity .12s ease}
.room-titles:hover .room-rename,.room-rename:focus-visible,.room-titles:hover .room-tool,.room-tool:focus-visible{opacity:1}
.room-rename:hover:not(:disabled),.room-tool:hover:not(:disabled){background:var(--surface-2)!important;color:var(--text)}
.room-rename svg,.room-tool svg{width:20px;height:20px;stroke-width:1.9}
/* Copied: the tick takes over for a moment, in the accent, so the press is acknowledged. */
.room-copy .room-copy-done{display:none}
.room-copy[data-copied="true"]{opacity:1;color:var(--accent-ink)}
.room-copy[data-copied="true"] svg:first-child{display:none}
.room-copy[data-copied="true"] .room-copy-done{display:block}
.room-name-edit{font:600 19px/1.15 var(--serif);padding:2px 8px;width:min(360px,60vw);border-radius:8px;background:var(--surface-2);border-color:var(--accent-line)}
/* The name gets a box, not a share of the room: a longer Room used to push the people,
   the tabs and Meet sideways, so their place depended on what the Room was called. */
#room-name{font:600 19px/1.15 var(--serif);margin:0;flex:0 1 auto;width:auto;max-width:220px;min-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.room-sub{font-size:12px;color:var(--text-3);white-space:nowrap}.room-sub:empty{display:none}
.room-tabs{display:flex;gap:18px;align-self:stretch;margin-left:8px}
.room-tabs button{height:100%;padding:0 2px;font-size:14px;font-weight:500;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:none!important;color:var(--text-2)}
.room-tabs button:hover:not(:disabled){color:var(--text)}
.room-tabs button[aria-selected="true"]{color:var(--text);font-weight:600;border-bottom-color:var(--accent)!important}
.room-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.meet-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 12px;border-radius:10px!important;background:var(--accent)!important;border:1px solid var(--accent)!important;color:var(--on-accent)!important;font-size:13.5px;font-weight:600;white-space:nowrap}
.meet-btn:hover:not(:disabled){background:color-mix(in oklab,var(--accent) 86%,var(--text))!important;color:var(--on-accent)!important}
.meet-btn svg{width:18px;height:18px;stroke-width:1.9}
/* Already in the meeting: the band owns this corner, so Meet steps aside. */
html[data-meeting="joined"] #tab-meeting{display:none}
html[data-meeting-live="true"] .meet-btn{position:relative}
html[data-meeting-live="true"] .meet-btn::after{content:"";position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:#34A853;box-shadow:0 0 0 2px var(--surface)}
@media (prefers-reduced-motion: no-preference){html[data-meeting-live="true"] .meet-btn::after{animation:meet-live 1.8s ease-in-out infinite}
@keyframes meet-live{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.75}}}
.meet-btn[aria-selected="true"]{box-shadow:0 0 0 3px var(--accent-soft)}
.room-more{width:36px;height:36px;padding:0;display:grid;place-items:center;border:0!important;border-radius:10px!important;background:none!important;color:var(--text-2)}
.room-more:hover:not(:disabled),.room-more[aria-selected="true"]{background:var(--surface-2)!important;color:var(--text)}
.room-more svg{width:20px;height:20px}
/* Who is here: an avatar stack with status dots and the count; it opens the People popover. */
.people-pill{display:inline-flex;align-items:center;gap:8px;padding:3px 10px 3px 3px;border-radius:999px;border:1px solid var(--line)!important;background:none!important;color:var(--text-2)!important;font-size:12.5px;white-space:nowrap;flex:0 0 auto}
.people-pill:hover:not(:disabled){background:var(--surface-2)!important}
.people-pill[aria-expanded="true"]{background:var(--accent-soft)!important;color:var(--accent-ink)!important;border-color:var(--accent-line)!important}
.pill-stack{display:flex}
.pill-avatar{position:relative;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:600;border:2px solid var(--surface)}
.pill-avatar+.pill-avatar{margin-left:-8px}
.pill-avatar::before{content:attr(data-initial)}
.pill-avatar::after{content:"";position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--surface);background:var(--text-3)}
.pill-avatar[data-status="online"]::after{background:#22c55e}.pill-avatar[data-status="idle"]::after{background:#f59e0b}
/* The landing lives inside the chat panel so its status line stays where it is said. */
html[data-room] #landing{display:none}
html:not([data-room]) #messages,html:not([data-room]) #composer,html:not([data-room]) #room-attachments{display:none}
.blank{flex:1 1 auto;min-height:0;overflow-y:auto;display:grid;place-items:center;padding:24px}
.blank-inner{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-width:46ch;margin-bottom:6vh}
.spark{color:var(--accent);display:grid;place-items:center}.spark svg{width:44px;height:44px;fill:currentColor;stroke:none;filter:drop-shadow(0 6px 14px color-mix(in oklab,var(--accent) 45%,transparent))}
@media (prefers-reduced-motion: no-preference){.spark svg{animation:twinkle 3.2s ease-in-out infinite}@keyframes twinkle{0%,100%{transform:scale(1) rotate(0deg);opacity:.85}50%{transform:scale(1.12) rotate(12deg);opacity:1}}}
.landing-space{margin:0;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.landing-space:empty{display:none}
.blank .lede{font-size:15px;text-wrap:balance}
.pointer{display:inline-flex;align-items:center;gap:9px;margin:4px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
.pointer svg{width:15px;height:15px;stroke-width:1.9}
@media (prefers-reduced-motion: no-preference){.pointer svg{animation:nudge 2.4s ease-in-out infinite}@keyframes nudge{0%,100%{transform:none}50%{transform:translateX(-4px)}}}

.chat-view{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.chat-toolbar{display:flex;gap:12px;align-items:center;flex:0 0 auto;min-height:26px;padding:6px 20px 0}
#status{margin:0 0 0 auto;font-size:11.5px;color:var(--text-3);text-align:right;min-width:0}
/* With nothing left to say, the strip above the conversation takes no room. */
.chat-toolbar:not(:has(#status:not([data-routine="true"]))){display:none}
/* Messages. Someone else's starts at the left with an avatar, the name and time
   above and a soft bubble whose small corner points at the avatar. Yours sits at
   the right in the accent tint with only its time. A run from one person within
   five minutes keeps one avatar and one name. */
#messages{--timeline-gap:18px;flex:1;min-height:100px;overflow:auto;list-style:none;margin:0;padding:14px 24px 10px 20px;display:flex;flex-direction:column;gap:var(--timeline-gap);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#messages li{flex-shrink:0;position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:10px;max-width:74%;align-self:flex-start;font-size:var(--chat-font)}
#messages li:not([data-author-tone="self"])>:not(.message-avatar){grid-column:2}
.message-avatar{grid-row:1/span 12;align-self:start;margin-top:18px;width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-size:12px;font-weight:600}
.message-avatar::before{content:attr(data-initial)}
#messages li[data-author-tone="agent"] .message-avatar{background:color-mix(in oklab,#C2410C 22%,var(--surface));color:color-mix(in oklab,#C2410C 78%,var(--text))}
.message-meta{display:flex;gap:8px;align-items:baseline;color:var(--text-3);font-size:var(--chat-meta);margin-bottom:4px}
.message-meta strong{font-weight:600;color:var(--text)}
.message-text{margin:0;padding:9px 13px;background:var(--card);border-radius:4px 14px 14px 14px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--chat-font);line-height:var(--chat-line)}
#messages li[data-author-tone="self"]{align-self:flex-end;grid-template-columns:minmax(0,1fr)}
#messages li[data-author-tone="self"] .message-avatar{display:none}
#messages li[data-author-tone="self"] .message-meta{justify-content:flex-end}
#messages li[data-author-tone="self"] .message-meta strong{display:none}
#messages li[data-author-tone="self"] .message-text{background:var(--bubble-self);border-radius:14px 4px 14px 14px}
#messages li[data-author-tone="self"] .message-quote,#messages li[data-author-tone="self"] .attachment-link{justify-self:end}
#messages li[data-continued]{margin-top:-10px}
#messages li[data-continued] .message-avatar{visibility:hidden}
#messages li[data-continued] .message-meta{display:none}
#messages li[data-continued]:not([data-author-tone="self"]) .message-text{border-radius:14px}
#messages li[data-day]{margin-top:20px}
.msg-day{white-space:nowrap;letter-spacing:.02em;color:var(--text-3)}
/* A day boundary always breaks a run, so its meta line is always drawn. */
#messages li[data-day] .message-meta{display:flex}
/* The browser's own unconfirmed send: the same bubble, lighter, no dashed edge; a mark instead of a time. */
#messages li[data-pending] .message-text{opacity:.78}
.message-pending{font-size:var(--chat-meta);color:var(--text-3)}
.message-pending::before{content:"";display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:50%;border:1.5px solid currentColor;vertical-align:-1px}
#messages li[data-pending="retry"] .message-pending{color:var(--danger)}
.message-quote{margin:0 0 4px;padding:4px 10px;border-left:3px solid var(--accent);font-size:var(--chat-meta);color:var(--text-3);overflow-wrap:anywhere;white-space:pre-wrap}
.message-reactions{display:flex;gap:4px;flex-wrap:wrap;justify-self:end;margin:-12px 8px 0 0;position:relative;z-index:1}
.message-reactions:empty{display:none}
.mention{color:var(--accent-ink);font-weight:600}
/* The mention list had no styling at all, so a name and its handle ran together and the
   option Enter would choose looked like the rest. One row of people, spaced, and the
   chosen one in the accent. Never yourself: you are not someone you mention. */
/* The list lines up with the text you are typing, not with the edge of the box. */
.mention-popover{margin:0 0 8px;padding:0 13px}
#mention-results{display:flex;flex-wrap:wrap;gap:6px}
.mention-option{display:inline-flex;align-items:baseline;gap:7px;max-width:100%;padding:5px 12px;font-size:13px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text)}
.mention-option>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mention-option small{color:var(--text-3);font-size:11.5px;flex:0 0 auto}
.mention-option:hover:not(:disabled){background:var(--surface-2);color:var(--text)}
.mention-option[aria-selected="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink);font-weight:600}
.mention-option[aria-selected="true"] small{color:var(--accent-ink);opacity:.7}
.message-reactions button{padding:2px 7px;font-size:12px;border-radius:999px;background:var(--surface);border-color:var(--line);box-shadow:0 1px 2px rgb(0 0 0/.08)}
.message-reactions button[aria-pressed=true]{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-ink)}
/* One toolbar floats over the page while the pointer or focus is on a message; script places it
   above the bubble, or below when there is no room, inside the list's visible box. */
.message-tools{position:fixed;top:0;left:0;z-index:40;display:none;align-items:center;gap:2px;padding:3px 6px;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow)}
#messages li[data-tools="open"] .message-tools{display:flex}
/* An invisible bridge joins the bar to its bubble so travelling to it never crosses another message. */
.message-tools::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.message-tools[data-side="below"]::after{top:auto;bottom:100%}
.message-tools[data-side="right"]::after{left:auto;right:100%;top:0;bottom:0;width:10px;height:auto}
.message-tools[data-side="left"]::after{left:100%;right:auto;top:0;bottom:0;width:10px;height:auto}
.reaction-picker{display:flex;gap:0;padding-right:4px;margin-right:2px;border-right:1px solid var(--line-soft)}
.message-tools button{border:0;background:none;padding:4px 6px;border-radius:999px;line-height:1;color:var(--text-2)}
.message-tools button:hover:not(:disabled){background:var(--surface-2);color:var(--text)}
.message-tools svg{width:19px;height:19px}
.reaction-picker button{font-size:18px}
.reaction-picker button[aria-pressed="true"]{background:var(--accent-soft)}
.attachment-link{display:inline-flex;align-items:center;gap:8px;max-width:100%;overflow-wrap:anywhere;padding:7px 11px;border:1px solid var(--line);border-radius:10px;text-decoration:none;margin:6px 0 0;font-size:var(--chat-meta);background:var(--surface);color:var(--text)}
.attachment-list{list-style:none;padding:0;margin:6px 0}
.attachment-pending{opacity:.8;cursor:default}
.pending-actions{display:flex;gap:6px;margin-top:6px}.pending-actions button{padding:2px 10px;font-size:11.5px;border-radius:999px}
/* A meeting in the timeline is a card, the one thing here that is not a bubble. */
#messages li[data-kind="meeting_lifecycle"]{grid-template-columns:minmax(0,1fr);max-width:560px;width:100%}
#messages li[data-kind="meeting_lifecycle"] .message-avatar{display:none}
.meeting-card{border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.06);padding:10px 12px 10px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.meeting-card-head{display:flex;gap:8px;align-items:baseline;flex:1 1 100%}
.meeting-card-head strong{font:600 16px/1.2 var(--serif);color:var(--text)}
.meeting-card .msg-time{font-size:var(--chat-meta);color:var(--text-3)}
.meeting-card-body{margin:0;font-size:13.5px;color:var(--text-2);flex:1 1 auto;line-height:1.45}
.meeting-card-open{padding:5px 12px;border-radius:8px;font-size:12.5px;white-space:nowrap}
/* The composer: one box, the tools inside it, Enter sends. */
#composer{flex:0 0 auto;position:relative;padding:8px 20px 14px}
#quote-target{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:var(--chat-meta);color:var(--text-2)}
#quote-target:empty{display:none}
#quote-target span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:10px;border-left:3px solid var(--accent)}
#quote-target button{padding:2px 9px;font-size:11.5px;border-radius:999px}
.composer-box{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.06);display:flex;flex-direction:column}
.composer-box:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
#message{min-height:46px;height:46px;max-height:32vh;padding:12px 14px 4px;font-size:var(--chat-font);line-height:var(--chat-line);display:block;resize:none;border:0;border-radius:12px 12px 0 0;background:none}
#message:focus-visible{outline:none}
.composer-actions{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:2px 8px 6px}
.composer-glyph{width:32px;height:32px;padding:0;display:grid;place-items:center;border:0;border-radius:8px;background:none;font-weight:600;color:var(--text-3)}
.composer-glyph:hover:not(:disabled){background:var(--surface-2);color:var(--text)}
.composer-glyph svg{width:17px;height:17px}
.attach-stage{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.attach-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 6px 4px 10px;border:1px solid var(--accent-line);border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:12.5px}
.attach-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32ch}
.attach-chip button{padding:2px 8px;font-size:11.5px;border-radius:999px}.attach-remove{width:22px;height:22px;padding:0;line-height:1;font-size:15px}
.attach-status{margin:0;font-size:11.5px;color:var(--danger)}.attach-status:empty{display:none}
#files-list tr[data-pending]{opacity:.85}#files-list tr[data-pending] td.message-pending{font-size:var(--chat-meta)}
#composer.dropping .composer-box{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
#interaction-status{font-size:11.5px}#interaction-status:empty{display:none}
.send-row{display:flex;flex:1;gap:10px;align-items:center;justify-content:flex-end;min-width:0}
.send-hint{font-size:11.5px;color:var(--text-3);white-space:nowrap}
#send-status:empty{display:none}
#send{height:32px;padding:0 14px;border-radius:9px;font-size:12.5px;font-weight:600}
/* Files: Transcripts and Attachments under one switch; an opened meeting takes the Room and Files brings the list back. */
.files-switch{display:flex;gap:4px;padding:3px;background:var(--surface-2);border-radius:10px;width:320px;flex:0 0 auto}
/* The Files header: the switch, then a quiet refresh where a stray link used to sit. */
.files-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.files-head .files-switch{margin-right:auto}
.quiet-refresh{width:32px;height:32px;padding:0;display:grid;place-items:center;border:1px solid var(--line)!important;border-radius:9px!important;background:var(--surface)!important;color:var(--text-3)}
.quiet-refresh:hover:not(:disabled){color:var(--text);background:var(--surface-2)!important}
.quiet-refresh svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* A meeting row reads as one thing: a mark, then when it was. */
.meeting-head{display:flex;align-items:center;gap:11px;min-width:0}
.meeting-mark{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink)}
.meeting-mark svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.meeting-titles{display:flex;flex-direction:column;gap:2px;min-width:0}
.meeting-titles strong{font-weight:600;font-size:13.5px}
.meeting-titles small{font-size:11.5px;color:var(--text-3)}

.files-kind{flex:1;border:0!important;background:none!important;padding:6px 0;border-radius:8px!important;font-size:13px;color:var(--text-2)}
.files-kind[aria-pressed="true"]{background:var(--surface)!important;color:var(--text);font-weight:600;box-shadow:0 1px 2px rgb(0 0 0/.1)}
.quiet-add{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:0!important;background:none!important;color:var(--accent-ink);font-weight:500;padding:6px 10px}
.quiet-add svg{width:16px;height:16px;stroke-width:2}
.back-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px 0 10px;border-radius:9px;background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink);font-weight:600;margin:6px 0 10px}
.back-btn:hover:not(:disabled){background:color-mix(in oklab,var(--accent) 26%,var(--surface));color:var(--accent-ink)}
.back-btn svg{width:16px;height:16px;stroke-width:2.2}
/* Meet is the only way into a meeting, so the list does not carry a second one. */
#meetings-live,.meeting-band .mtg-btn-end,.mtg-controls-split{display:none!important}
/* 17: files for a meeting belong inside an opened meeting, never on the file list. */
#meeting-files{display:none!important}
.meeting-detail #meeting-files{display:block!important;margin:0 0 14px}
/* 18: while we connect, the list steps aside rather than flashing past. */
html[data-meeting="connecting"] #meeting-lobby{visibility:hidden}
.meetings:has(tr.meeting-row[aria-expanded="true"]) thead,.meetings:has(tr.meeting-row[aria-expanded="true"]) #meetings-live,.meetings:has(tr.meeting-row[aria-expanded="true"]) tr.meeting-row{display:none}
.meeting-lobby:has(tr.meeting-row[aria-expanded="true"]) .files-switch{display:none}
/* ------------------------------------------- 5. meeting and team setup panels */
.content-view{flex:1 1 auto;min-height:0;overflow:auto;padding:18px max(20px,calc((100% - 1160px)/2))}
.view-title{font:500 25px/1.2 var(--serif);margin:0 0 6px}
.content-view > .lede{margin-bottom:18px;max-width:70ch}
/* The meeting: controls in the colour bar, the tab as the stage. Ported shape
   from the reference (LiveKit Meet idiom): lobby before a join; joined, a tile
   per person, a promoted screen with a rail beside it. */
.meeting-band{display:flex;align-items:center;gap:6px;min-width:0;--mtg-leave:#D93025;--mtg-leave-hover:#B3261E}
.meeting-band .availability{margin:0;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--text);font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.meeting-band .availability:empty{display:none}
/* While you are in the meeting this chip is the way back to it from Chat or Files. */
.census-back{cursor:pointer}
.meeting-band .census-back:hover:not(:disabled){background:var(--surface)!important;color:var(--text)!important;border-color:var(--text-3)!important}
.meeting-band .mtg-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:30px;padding:4px 11px;
  border:1px solid var(--line)!important;border-radius:999px!important;background:var(--surface-2)!important;color:var(--text)!important;font-size:12.5px;font-weight:550;white-space:nowrap}
.meeting-band .mtg-btn:not(:disabled):hover{background:color-mix(in oklab,var(--text) 9%,var(--surface-2))!important}
.meeting-band .mtg-btn:disabled{opacity:.55}
/* These glyphs are filled shapes, and the sheet sets every svg to fill:none, which beats the
   fill attribute on the element. Mute and the camera were painting nothing at all, which is
   why they were empty pills once the band dropped its words. The screen and leave icons
   carry their own fill inside, so saying it here changes nothing for them. */
.mtg-icon{width:16px;height:16px;flex:0 0 auto;overflow:visible;fill:currentColor;stroke:none}
.mtg-btn[data-media-on="true"] [data-icon="off"]{display:none}.mtg-btn[data-media-on="false"] [data-icon="on"]{display:none}
.mtg-btn[data-control="mic"][data-media-on="false"] .mtg-icon,.mtg-btn[data-control="camera"][data-media-on="false"] .mtg-icon{color:var(--danger)}
.meeting-band .mtg-btn[data-control="mic"][data-media-on="false"],.meeting-band .mtg-btn[data-control="camera"][data-media-on="false"]{border-color:color-mix(in oklab,var(--danger) 45%,var(--line))!important}
.meeting-band .mtg-btn[data-control="screen"][data-media-on="true"]{background:var(--accent-soft)!important;border-color:var(--accent-line)!important;color:var(--accent-ink)!important}
.mtg-controls-split{align-self:stretch;width:1px;margin:4px 4px;background:var(--line)}
.meeting-band .mtg-btn-leave{font-weight:650;color:#FFFFFF!important;background:var(--mtg-leave)!important;border-color:var(--mtg-leave)!important}
.meeting-band .mtg-btn-leave:not(:disabled):hover{background:var(--mtg-leave-hover)!important;border-color:var(--mtg-leave-hover)!important}
.meeting-band .mtg-btn-end{background:none!important;color:var(--text-2)!important;border-color:var(--line)!important}
.meeting-band .mtg-btn-end:not(:disabled):hover{color:var(--text)!important;background:var(--surface-2)!important}
.meeting-view{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.meeting-surface{--grid-gap:8px;--tile-rail:208px;flex:1 1 auto;min-height:0;min-width:0;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
html[data-meeting="joined"] .meeting-view>:not(.meeting-surface){display:none}
html:not([data-meeting="joined"]) .meeting-surface{flex:0 0 auto}
html:not([data-meeting="joined"]) .meeting-view{overflow:auto}
.meeting-lobby{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:34px 24px 26px;text-align:center}
.lobby-glyph{color:var(--text-3);margin-bottom:4px}.lobby-glyph svg{width:30px;height:30px;stroke-width:1.4}
.lobby-title{font:400 26px/1.15 var(--serif);margin:0}
.lobby-line{margin:0;max-width:48ch;font-size:14.5px;line-height:1.5;color:var(--text-2)}
.lobby-sub{margin:0;max-width:52ch;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.lobby-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}
.lobby-actions .btn{padding:9px 22px;min-width:9rem}
.lobby-refresh{border:0;background:none;padding:2px 6px;font-size:11.5px;color:var(--text-3);text-decoration:underline;text-underline-offset:2px;align-self:center;margin:0 0 8px}
.lobby-refresh:hover:not(:disabled){background:none;color:var(--text)}
.meeting-stage{flex:1 1 auto;min-width:0;min-height:0;display:grid;gap:var(--grid-gap);padding:var(--grid-gap);grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.meeting-surface[data-tiles="rail"] .meeting-stage{grid-template-columns:minmax(0,1fr) var(--tile-rail)}
.tile-grid{margin:0;padding:0;list-style:none;min-width:0;min-height:0;height:100%;display:grid;gap:var(--grid-gap);grid-template-columns:repeat(var(--tile-columns,1),minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}
.tile-grid[data-tile-columns="1"]{--tile-columns:1}.tile-grid[data-tile-columns="2"]{--tile-columns:2}.tile-grid[data-tile-columns="3"]{--tile-columns:3}.tile-grid[data-tile-columns="4"]{--tile-columns:4}
.meeting-surface[data-tiles="rail"] .tile-grid{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;order:1}
.meeting-surface[data-tiles="rail"] .tile-grid>*{flex-shrink:0;scroll-snap-align:start;height:calc((100% - var(--grid-gap)*2)/3)}
.tile,.screen-tile{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--line)}
.tile[data-tile-kind="avatar"]{background:var(--surface-2)}
.tile-media{position:relative;flex:1 1 auto;min-height:0;display:grid;place-items:center;container-type:size}
.tile-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.screen-tile .tile-media video{object-fit:contain}
.tile[data-tile-self="true"][data-tile-kind="video"] .tile-media video{transform:scaleX(-1)}
.avatar-badge{--avatar-size:clamp(38px,min(46cqw,46cqh),148px);aspect-ratio:1;display:grid;place-items:center;width:var(--avatar-size);height:var(--avatar-size);border-radius:999px;background:var(--text-3);color:var(--bg);font-size:calc(var(--avatar-size)*.34);font-weight:650;letter-spacing:.03em;line-height:1;user-select:none}
.tile[data-author-tone="self"] .avatar-badge{background:var(--text-2)}
.tile[data-author-tone="member-1"] .avatar-badge{background:var(--member-tone-1)}.tile[data-author-tone="member-2"] .avatar-badge{background:var(--member-tone-2)}
.tile[data-author-tone="member-3"] .avatar-badge{background:var(--member-tone-3)}.tile[data-author-tone="member-4"] .avatar-badge{background:var(--member-tone-4)}
.tile[data-author-tone="member-5"] .avatar-badge{background:var(--member-tone-5)}.tile[data-author-tone="member-6"] .avatar-badge{background:var(--member-tone-6)}
.tile[data-author-tone="member-7"] .avatar-badge{background:var(--member-tone-7)}.tile[data-author-tone="member-8"] .avatar-badge{background:var(--member-tone-8)}
.tile[data-author-tone="member-9"] .avatar-badge{background:var(--member-tone-9)}.tile[data-author-tone="member-10"] .avatar-badge{background:var(--member-tone-10)}
.tile-foot{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);margin:0;padding:3px 9px;font-size:12.5px;font-weight:600;color:#FFFFFF;background:rgb(0 0 0/.55);border-radius:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-foot:empty{display:none}
#meeting-notes h3{font:500 20px/1.2 var(--serif);margin:16px 0 8px}#meeting-notes h4{margin:14px 0 4px;font-size:13px}
#meeting-notes details{margin:4px 0}#meeting-notes summary{font-size:12px;color:var(--text-3);cursor:pointer}
#meeting-notes blockquote{margin:4px 0;padding:4px 10px;border-left:3px solid var(--line);font-size:13px;color:var(--text-2)}
.card,#room-admin{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:24px;margin:0 0 20px}
.card h3,#room-admin summary{font:600 20px/1.2 var(--serif);margin:0 0 6px}
#room-admin summary{cursor:pointer}
.card form label,#room-admin form label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);margin:16px 0 6px}
.card form button,#room-admin form button{margin-top:10px}
.card-note{margin:10px 0 0;font-size:12.5px;color:var(--text-2)}.card-note:empty{display:none}
#space-retry{margin-top:8px}
#space-members p,#space-pending p{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-bottom:1px solid var(--line-soft);padding:10px 0;margin:0;font-size:13.5px}
#space-members p span,#space-pending p span{flex:1 1 220px}
#space-members button,#space-pending button{padding:4px 10px;font-size:12.5px;border-radius:999px}
#room-people>div{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-bottom:1px solid var(--line-soft);padding:12px 0}
#room-people span{flex:1 1 260px;overflow-wrap:anywhere;font-size:12.5px}#room-people select{width:auto}
#archive-room{margin-top:20px;color:var(--danger);border-color:color-mix(in oklab,var(--danger) 40%,var(--line))}
#archive-room:hover:not(:disabled){background:var(--danger-bg);color:var(--danger)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 var(--mono);max-height:50vh;overflow:auto;background:var(--surface-2);padding:16px;border-radius:9px}

/* ------------------------------------------ 6. collapsed rail and breakpoints */
/* Adding someone is the common act here, so its button reads as one. */
.primary-add{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent)!important;font-weight:600}
.primary-add:hover:not(:disabled){background:color-mix(in oklab,var(--accent) 86%,var(--text))!important}
/* Collapsed, a person’s status belongs on the tile, not trailing off the edge of the rail. */
[data-rail="collapsed"] #rooms button[data-peer] .presence-dot{position:absolute;top:3px;right:3px;margin:0;box-shadow:0 0 0 2px var(--shell)}
/* The collapse control sits on the same centre line as the tiles. */
[data-rail="collapsed"] #rail-toggle{margin:0 auto;width:38px;height:38px}
[data-rail="collapsed"] .when-open{display:none!important}
[data-rail="collapsed"] #rail-toggle .when-collapsed{display:grid}
[data-rail="collapsed"] #room-rail{padding:12px 8px 8px;align-items:center;
  /* Folded to a strip of marks, the rail wears the palette's structural colour. */
  background:var(--shell);
  border-right-color:var(--shell-2)}
[data-rail="collapsed"] #rail-toggle{color:rgb(255 255 255/.8)}
[data-rail="collapsed"] #rail-toggle:hover:not(:disabled){background:rgb(255 255 255/.16);color:#FFFFFF}
[data-rail="collapsed"] #rooms button:hover:not(:disabled){background:none;box-shadow:none}
[data-rail="collapsed"] #more-rooms{color:rgb(255 255 255/.85);border-color:rgb(255 255 255/.4);background:none}
[data-rail="collapsed"] .rail-head{padding:0;justify-content:center;flex-direction:column;gap:0}
[data-rail="collapsed"] .new-btn{width:38px;height:38px;padding:0;justify-content:center;border-radius:11px}
[data-rail="collapsed"] .rooms-region{width:100%;align-items:center}
[data-rail="collapsed"] .rail-rooms{width:100%;align-items:center;gap:12px}
[data-rail="collapsed"] #rooms button{width:38px;height:38px;padding:0;justify-content:center;border-radius:11px;position:relative}
/* Opening the rail must not move what the pointer is already on, so the folded strip keeps
   a tile where the open rail keeps New Room, and the same step between rows. */
[data-rail="collapsed"] #new-room-open{display:grid;place-items:center;width:38px;height:38px;padding:0;
  border:1px dashed rgb(255 255 255/.7);border-radius:11px;background:none;color:rgb(255 255 255/.85);font-size:19px;line-height:1;flex:0 0 auto}
[data-rail="collapsed"] #new-room-open:hover{color:#FFFFFF;border-color:#FFFFFF;background:rgb(255 255 255/.16)}
/* Folded, a Room is just its mark: no ring for the open one or on hover. */
[data-rail="collapsed"] #rooms button[aria-current="true"]{background:none;box-shadow:none}
/* Folded, every row is one 38px tile on a 50px step: the toggle, the Space, each Room (its mark fills
   the tile) and New Room. Both rail modes keep the same row tops. */
[data-rail="collapsed"] .room-glyph{flex-basis:38px;height:38px;border-radius:11px;font-size:14px}
[data-rail="collapsed"] .room-glyph svg{width:20px;height:20px}
[data-rail="collapsed"] .mention-badge{position:absolute;top:4px;right:4px;min-width:0;width:7px;height:7px;padding:0;border-radius:50%;font-size:0;margin:0;box-shadow:0 0 0 1.5px var(--accent)}
[data-rail="collapsed"] #more-rooms{font-size:10px;padding:4px;overflow-wrap:anywhere}
[data-rail="collapsed"] .space-group{grid-template-columns:minmax(0,1fr)}
[data-rail="collapsed"] #rooms button[data-kind="direct"]:not([data-kind="direct"]~[data-kind="direct"])::before{display:none}
[data-rail="collapsed"] #rooms button[data-kind="direct"]:not([data-kind="direct"]~[data-kind="direct"]){margin-top:16px}
[data-rail="collapsed"] #rooms button[data-kind="direct"]:not([data-kind="direct"]~[data-kind="direct"])::after{top:-9px;left:2px;right:2px}

@media (max-width:1100px){#room-name{max-width:164px}}
@media (max-width:760px){
 :root{--rail-w-open:232px;--rail-w:232px}
 .topbar{gap:4px}.wordmark{display:none}
 .room-head{padding:0 10px 0 18px;gap:8px}.room-tabs{gap:12px}.room-tabs button{font-size:13px}#room-name{max-width:104px;font-size:15px}.room-sub{display:none}
 .notice{font-size:8.5px}
 #workspace{grid-template-columns:var(--rail-w-icon) minmax(0,1fr)}
 #room-rail{width:var(--rail-w);z-index:30;grid-column:1;grid-row:1}.conversation{grid-column:2;grid-row:1}
 [data-rail="expanded"] #room-rail{box-shadow:8px 0 30px rgb(0 0 0/.25)}
 .chat-toolbar{gap:8px;flex-wrap:wrap;padding:6px 10px 0}#status{font-size:10.5px;flex:1}
 #messages{padding:10px 10px 6px}#messages li{max-width:94%}
 #composer{padding:6px 10px 10px}.send-hint{display:none}
 .content-view{padding:16px 12px}.card,#room-admin{padding:16px;border-radius:13px}
 .blank-inner{margin-bottom:0}
 .meeting-band .mtg-btn:has(.mtg-icon){padding:8px;min-width:38px}.meeting-band .mtg-btn:has(.mtg-icon) .mtg-btn-text{display:none}.meeting-band .availability{display:none}
 .meet-btn span{display:none}.meet-btn{padding:0 15px;height:38px}
}

/* ------------------------------------------------ 7. tables: Meetings, Files, Team */
.table-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px}
.table-head .view-title,.table-head h3{margin:0;flex:0 0 auto}.table-head .lede{flex:1 1 240px;font-size:12.5px}
.table-head .filters{display:flex;gap:6px;margin-left:auto}
.filter{padding:4px 11px;border-radius:999px;font-size:12.5px}.filter[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-line)}
.table-head .btn{padding:7px 14px}.table-head .filters+.btn{margin-left:0}
.data{width:100%;border-collapse:collapse;font-size:13.5px}
.data th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:500;color:var(--text-3);padding:6px 10px;border-bottom:1px solid var(--line)}
.data td{padding:9px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;color:var(--text)}
.data td.muted{color:var(--text-3)}.data td.placeholder-cell{color:var(--text-3)}
.data .actions{text-align:right;white-space:nowrap}.data .actions button,.data .actions .btn-link{padding:4px 10px;font-size:12px;border-radius:999px}
.btn-link{display:inline-block;color:var(--text-2);background:var(--surface);border:1px solid var(--line);text-decoration:none}
.btn-link:hover{background:var(--surface-2);color:var(--text)}
.data a:not(.btn-link){color:var(--accent-ink);text-decoration:none;font-weight:500}.data a:not(.btn-link):hover{text-decoration:underline}
.placeholder{font-size:12px;color:var(--text-3);margin:10px 0 0;font-style:italic}
.meeting-lobby{display:block;padding:18px max(20px,calc((100% - 1160px)/2));text-align:left}
.live-row td{background:var(--surface);border-bottom:1px solid var(--line)}
.live-row .live-line{margin:0;font-size:14px;color:var(--text)}
.live-row .actions .btn{padding:7px 16px}
.meeting-row{cursor:pointer}.meeting-row:hover td{background:var(--surface)}.meeting-row.open td{background:var(--surface);border-bottom-color:transparent}
.meeting-detail-row>td{padding:0 10px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.meeting-detail{padding:6px 4px 0}
/* Reading a meeting is the whole screen: the Room bar steps aside and Back to Files returns. */
.conversation:has(#view-transcripts:not([hidden]) #meeting-detail:not([hidden])) .room-head{display:none}
.meeting-detail .detail-grid{gap:20px}
.meeting-detail h3{margin-top:0}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;align-items:start}
.detail-grid>div{min-width:0}
.detail-notes #meeting-notes h3,.detail-transcript h3{font:500 16px/1.2 var(--serif);margin:6px 0 8px}
.meeting-files{margin-top:18px}.meeting-files .attachments-panel{margin-top:0;padding-top:12px;border-top:1px solid var(--line)}
html[data-meeting="joined"] .meeting-view>:not(.meeting-surface){display:none}

.team-view .table-card{padding:18px 20px}
/* The add field and its button share a line, as the mockup has them. */
.invite-row input{flex:1 1 220px;width:auto}
.invite-row button[type="submit"]{flex:0 0 auto}
.tool-row input{flex:1 1 220px;width:auto}
/* 11: a label for the list, not a table head. */
.people-label{display:flex;align-items:baseline;gap:8px;margin:18px 2px 2px}
.sec-label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);font-weight:600}
/* 9: the checkbox is a sentence, not a monospace heading. */
/* Form labels in a card are small uppercase monospace by design; this one is a sentence,
   so it opts out of that treatment rather than inheriting it. */
.card form label.admin-default,#room-admin form label.admin-default,.admin-default,.admin-default *{
  display:flex;font-family:inherit!important;text-transform:none!important;letter-spacing:normal!important;
  font-size:13px!important;color:var(--text-2);margin:10px 2px 0}
.admin-default *{display:inline;margin:0}
/* The tick is a tick, not a field: the add-field rule must not stretch it. */
.admin-default input{flex:0 0 auto!important;width:auto!important;align-self:center}
.admin-default{align-items:baseline;justify-content:flex-start;gap:8px}
.admin-default .muted{color:var(--text-3)}
#view-setup .lede{margin:0 0 18px}
#room-admin>summary{display:none}
/* The page title already names the subject, so the card need not say it again. */
#view-setup .table-card>.table-head h3,#view-setup #space-team .lede,#view-setup #room-admin>.card-note,
#view-setup #reload-members{display:none}
.admin-default{display:flex;align-items:baseline;gap:9px;flex:1 0 100%;margin:10px 2px 0;font-size:13px;color:var(--text-2);font-family:inherit;text-transform:none;letter-spacing:normal}
.admin-default .muted{font-size:12.5px;font-family:inherit;text-transform:none;letter-spacing:normal}
/* The add field keeps its width; the checkbox sits on its own line beneath. */
.invite-row,.tool-row{flex-wrap:wrap}
.invite-row>input,.tool-row>input{flex:1 1 260px;min-width:0;width:auto}
.admin-default{flex:1 0 100%}
.admin-default input{width:auto;flex:0 0 auto}
.danger-row{display:flex;align-items:center;gap:16px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft)}
.danger-row div{flex:1 1 auto;display:flex;flex-direction:column;gap:2px}
.danger-row strong{font-size:13.5px;font-weight:600}
.danger-row .muted{font-size:12.5px}

.rows-head,.rows>p,.rows>div{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) auto;gap:10px;align-items:center;padding:8px 6px}
.rows-head{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--line);padding-top:0}
.rows>p,.rows>div{margin:0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.rows .cell-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rows .cell-role{color:var(--text-2);text-transform:capitalize}
.rows>p>button,.rows>div>button,.rows>div>select{justify-self:end}
.rows>div{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) auto auto auto}
.rows>div>select{width:auto;padding:4px 8px;font-size:12.5px}
.rows button{padding:4px 10px;font-size:12px;border-radius:999px}
.rows.pending>p .cell-role{color:var(--text-3);font-style:italic}
#space-pending>p{grid-template-columns:12px 34px minmax(0,1fr) 132px 92px!important}
/* A member row: presence, the person, who they are, what they may do, and the one action.
   One grid for every row, so a row with less to say never moves its neighbours. */
#space-members>p,#space-pending>p,.team-view .rows-head{
  display:grid!important;grid-template-columns:12px 34px minmax(0,1fr) 132px 92px!important;gap:12px;align-items:center;padding:10px 6px}
/* A Room row carries the same five cells as a Space row: presence, the person, the name,
   what they may do, and the one action. */
#room-people>div{display:grid!important;grid-template-columns:12px 34px minmax(0,1fr) 132px 92px!important;gap:12px;align-items:center;padding:10px 6px}
#room-people>div .presence-dot{width:9px;height:9px;align-self:center;margin:0}
#room-people>div>select{width:100%;justify-self:start}
#room-people>div>button{justify-self:end}
.team-view .rows-head{grid-column-gap:12px}
.team-view .rows-head>span:first-child{grid-column:3}
#space-members>p .presence-dot,#space-pending>p .presence-dot{width:9px;height:9px;align-self:center;margin:0}
#space-members>p .cell-name,#space-pending>p .cell-name,#room-people>div .cell-name{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;overflow:visible;white-space:normal}
#space-members>p .cell-role,#space-pending>p .cell-role,#room-people>div .cell-role{justify-self:start}
#space-members>p .actions,#space-pending>p .actions,#room-people>div .actions{justify-self:end;display:flex;gap:6px}
.member-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:12.5px;font-weight:650;line-height:1}
.member-mail{font-size:12px;color:var(--text-3);font-weight:400}
.icon-action{padding:4px 9px!important;color:var(--text-3)}
.icon-action:hover:not(:disabled){color:var(--text)}
/* The old row gave every span a 220px flex basis; inside the stacked name cell that made a wall. */
#space-members>p .cell-name>span,#space-pending>p .cell-name>span,#space-members>p .cell-name>small,#space-pending>p .cell-name>small{flex:0 0 auto}
.invite-row{display:flex;gap:8px;align-items:center;margin-top:8px}.invite-row input{flex:1 1 auto;background:none;border-color:transparent;color:var(--text-2);padding:8px 10px}
.invite-row input:hover,.invite-row input:focus{background:var(--bg);border-color:var(--line);color:var(--text)}
.invite-row button,.invite-row select{display:none;white-space:nowrap}.invite-row:has(input:not(:placeholder-shown)) button,.invite-row:has(input:not(:placeholder-shown)) select{display:inline-flex}
.invite-row select{width:auto;padding:6px 10px;font-size:12.5px}
/* On its own page the add field is the first thing you use, so it looks like a field and
   its button is always there, rather than appearing once you have typed. */
.invite-row input{background:var(--surface-2)!important;border-color:var(--line)!important;color:var(--text)!important;padding:9px 13px!important}
.invite-row input:focus{background:var(--surface)!important;border-color:var(--accent-line)!important}
.invite-row button[type="submit"]{display:inline-flex!important}
.space-limit{color:var(--text-3);white-space:nowrap}
.table-head .archive{margin-left:auto;color:var(--danger);border-color:color-mix(in oklab,var(--danger) 40%,var(--line))}.table-head .archive:hover:not(:disabled){background:var(--danger-bg);color:var(--danger)}
#space-members p:has(button:first-of-type),#room-people div{}
#space-members>button,#space-pending>button,#more-people{margin-top:8px}
.room-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 14px}
.tool-row{display:flex;gap:6px;align-items:center;flex:1 1 260px}.tool-row input{flex:1 1 auto;padding:7px 10px;font-size:13px}
.tool-row button{white-space:nowrap}
#archive-room{margin-top:0}
.data .attachment-link{border:0;background:none;padding:0;margin:0;font-size:inherit;color:var(--accent-ink);font-weight:500}

#status[data-routine="true"]{display:none}

/* Ten tones, taken from a person or Room id. Each mixes with the page, so the pair works in either theme. */
[data-tone="0"]{--tone:#3B6FE0}
[data-tone="1"]{--tone:#C2415F}
[data-tone="2"]{--tone:#1F8A52}
[data-tone="3"]{--tone:#B4741A}
[data-tone="4"]{--tone:#7C46B8}
[data-tone="5"]{--tone:#1F7E93}
[data-tone="6"]{--tone:#A4552A}
[data-tone="7"]{--tone:#5C7A2E}
[data-tone="8"]{--tone:#B23A86}
[data-tone="9"]{--tone:#5A6473}
.message-avatar[data-tone],.pill-avatar[data-tone],.person-initial[data-tone],.room-glyph[data-tone],.room-head-glyph[data-tone],.member-avatar[data-tone]{
  background:color-mix(in oklab,var(--tone) 17%,var(--surface))!important;color:color-mix(in oklab,var(--tone) 74%,var(--text))!important}
/* Letters look centred rather than merely being centred. */
.message-avatar,.pill-avatar,.person-initial,.room-glyph,.account{line-height:1;letter-spacing:0}

/* ---- direct messages ---- */
#rooms button[data-kind="direct"]{order:30}
#rooms button[data-kind="direct"]:not([data-kind="direct"]~[data-kind="direct"]){position:relative;margin-top:26px}
#rooms button[data-kind="direct"]:not([data-kind="direct"]~[data-kind="direct"])::after{content:"";position:absolute;left:4px;right:4px;top:-22px;height:1px;background:var(--line)}
#rooms button[data-kind="direct"]:not([data-kind="direct"]~[data-kind="direct"])::before{content:"Direct";position:absolute;left:14px;top:-15px;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
.room-glyph[data-profile="direct"]{border-radius:999px;background:var(--accent-soft);color:var(--accent-ink)}
#rooms button[data-unread]:not([data-unread="0"]) .room-label{color:var(--text);font-weight:600}
.unread-badge{margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-size:10px;line-height:1;font-weight:600;min-width:17px;padding:3px 5px;border-radius:9px;text-align:center;background:var(--accent);color:var(--on-accent)}
.dm-form{padding:6px 2px 2px;position:relative}
.dm-glass{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-3);pointer-events:none}
.dm-form input{background:none;border-color:transparent;color:var(--text-2);padding:7px 12px 7px 36px}
.dm-form input:hover,.dm-form input:focus{background:var(--bg);border-color:var(--line);color:var(--text)}
.dm-results{display:flex;flex-direction:column;gap:2px;padding:4px;margin-top:2px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 26px rgb(0 0 0/.25);max-height:260px;overflow:auto}
.dm-results button{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:0;border-radius:8px;background:none;color:var(--text);font-size:13px;text-align:left;cursor:pointer}
.dm-results button:hover,.dm-results button:focus-visible{background:var(--accent-soft);color:var(--accent-ink);outline:none}
.dm-results .dm-initial{display:grid;place-items:center;flex:0 0 22px;height:22px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:11px;font-weight:600}
.dm-results .dm-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-results .dm-space{margin-left:auto;flex:0 0 auto;font-size:11px;color:var(--text-3)}
.dm-results .dm-more{justify-content:center;color:var(--text-2);font-size:12px}
.dm-results .dm-empty{margin:0;padding:6px 8px;font-size:12.5px;color:var(--text-3)}
.rows>p .actions{display:flex;gap:6px;justify-self:end}

/* ---- presence: pill, People popover, dots ---- */
.people-popover{position:absolute;top:calc(100% - 4px);left:20px;width:min(320px,calc(100vw - 24px));background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgb(0 0 0/.35);padding:10px 8px 8px;z-index:60}
.people-head{display:flex;align-items:center;gap:10px;padding:2px 6px 8px}.people-head h3{margin:0;font:500 17px/1.2 var(--serif);flex:1}
.people-counts{font-size:11.5px;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:999px;padding:2px 9px;white-space:nowrap}
.people-head button{border:0;background:none;color:var(--text-3);padding:2px 6px;border-radius:8px;font-size:13px}.people-head button:hover{background:var(--surface-2);color:var(--text)}
.people-list{display:flex;flex-direction:column;gap:2px;max-height:min(50vh,360px);overflow:auto}
.person{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:9px;font-size:13.5px}.person:hover{background:var(--surface-2)}
.person-initial{display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:11.5px;font-weight:600}
.person-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.person-state{font-size:11px;color:var(--text-3);text-transform:capitalize}
.person[data-status="offline"] .person-name{color:var(--text-3)}
.person .direct-open{border:0;background:none;padding:3px 6px;border-radius:999px;color:var(--text-2)}.person .direct-open:hover{background:var(--accent-soft);color:var(--accent-ink)}.person .direct-open svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.presence-dot{display:inline-block;flex:0 0 auto;width:9px;height:9px;border-radius:999px;background:var(--text-3);opacity:.45;margin-left:6px}
.person>.presence-dot{margin:0 2px 0 4px}
.presence-dot[data-status="online"]{background:#22c55e;opacity:1}.presence-dot[data-status="idle"]{background:#f59e0b;opacity:1}
#rooms button>.presence-dot{margin-left:4px}.rows .cell-name .presence-dot{vertical-align:middle}
/* ---- meeting transcript ---- */
.data td.who{color:var(--text)}
.transcript-head{display:flex;align-items:center;gap:10px}.transcript-head h3{flex:1}.transcript-head input{width:min(220px,50%);font-size:12.5px;padding:5px 9px}
.transcript li[data-self="true"]{background:var(--accent-soft);border-radius:8px;border-bottom-color:transparent}
.transcript{list-style:none;margin:6px 0 0;padding:0;max-height:360px;overflow:auto;font-size:13.5px}
.transcript li{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px;align-items:baseline;padding:5px 4px;border-bottom:1px solid var(--line-soft)}
.transcript time{font-family:var(--mono);font-size:10.5px;color:var(--text-3)}.transcript strong{font-weight:600;font-size:12.5px;color:var(--text-2)}.transcript li.muted{display:block;color:var(--text-3)}
#transcript-more{margin-top:8px;padding:5px 11px;font-size:12.5px;border-radius:999px}

/* ---- the coding clients page ---- */
.connect-page{display:grid;grid-template-rows:var(--topbar-h) minmax(0,1fr);height:calc(100dvh / var(--zoom,1));overflow:hidden}
.connect-page .topbar{grid-row:1}.connect-page .brand{text-decoration:none;color:var(--on-bar)}
.connect-back{margin:0;text-decoration:none}
.connect{grid-row:2;overflow:auto;padding:28px max(24px,calc((100% - 900px)/2)) 40px;display:flex;flex-direction:column;gap:14px}
.connect .view-title{margin:0}
.connect-tabs{margin-top:8px}
.connect-approval{max-width:640px}.connect-approval p{margin:8px 0 0;font-size:14px;color:var(--text-2)}
.connect-approval h2{font:600 22px/1.2 var(--serif);margin:0}
.connect-check{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:14px}
.connect-actions{display:flex;gap:8px;margin-top:16px}
.mono{font-family:var(--mono);font-size:12.5px}
.connect-head,.connect-rows>p{grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) 180px 84px}
.connect-rows>p{padding:12px 6px}
.connect-rows strong{font-weight:600}
.connect-tag{margin-left:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--line);border-radius:999px;padding:1px 6px}
.connect-rows>p:not([data-state="active"]){opacity:.6}
.connect-id{display:block;margin-top:2px;font-family:var(--mono);font-size:11px;color:var(--text-3)}
.connect-since small{display:block;margin-top:2px;font-size:11.5px;color:var(--text-3)}
.connect-inactive{margin-top:14px}.connect-inactive>summary{cursor:pointer;font-size:13px;color:var(--text-2);padding:6px}
.connect-access{margin:0;padding-left:16px;list-style:disc;font-size:12.5px;line-height:1.5;color:var(--text-2);text-transform:none}
.connect-access li{padding-left:2px}
.connect-since{color:var(--text-2);font-size:13px;font-variant-numeric:tabular-nums}
.connect-server{display:flex;align-items:center;gap:14px;margin-top:4px}.connect-server pre{margin:0;flex:1;max-height:none;padding:10px 14px}
.connect-guides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:6px}
.connect-guide{margin:0;padding:18px 20px}.connect-guide h3{font:600 18px/1.2 var(--serif);margin:0 0 4px}.connect-guide p{margin:0 0 10px}.connect-guide pre{margin:0;font-size:12.5px}
/* Agents & integrations reads as a compact admin screen: a slim pane, content that starts beside it rather
   than centred in the window, one-line access and tighter rows. Phones keep the stacked layout below. */
.connect-access{display:flex;flex-wrap:wrap;gap:0 6px;padding-left:0;list-style:none}.connect-access li{padding-left:0}
.connect-access li:not(:last-child)::after{content:"·";margin-left:6px;color:var(--text-3)}
#connect-yours .section-head{flex-wrap:wrap}#connect-yours .section-head .connect-tabs{margin:0 0 0 auto}
@media (min-width:761px){
 #view-connect.settings-page{grid-template-columns:196px minmax(0,1fr)}
 #view-connect .settings-pane{padding:12px 8px}
 #view-connect .pane-back{font-size:13.5px}
 #view-connect .pane-item{padding:7px 10px}
 #view-connect .settings-body{padding:20px 28px 32px}
 #view-connect .settings-section{max-width:1040px}
 #view-connect .section-head{margin-bottom:8px}
 #view-connect .agents-lede{margin-bottom:12px}
 .connect-rows>p{padding:8px 6px}
 #connect-agents .group-row{padding:9px 14px}
 #view-connect .agent-detail{gap:12px}
 #view-connect .agent-row{padding:9px 12px}
 #view-connect .github-panel{gap:10px;margin-bottom:16px}
 #view-connect .repo-row{padding:10px 12px}
}
@media (max-width:760px){.connect-guides{grid-template-columns:minmax(0,1fr)}.connect-head,.connect-rows>p{grid-template-columns:minmax(0,1fr) auto}.connect-since{display:none}.connect-access{display:none}}

/* ------------------------------------------------- 7. handles, menus and pages */
/* A menu belongs to the handle that opened it: under it, aligned to its right edge. */
.menu{position:fixed;z-index:200;min-width:212px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0!important;border-radius:8px!important;background:none!important;color:var(--text)!important;font-size:13.5px;text-align:left;white-space:nowrap}
.menu-item:hover:not(:disabled),.menu-item:focus-visible{background:var(--surface-2)!important}
.menu-item svg{width:16px;height:16px;flex:0 0 auto;color:var(--text-3);fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.menu-item[data-danger="true"]{color:var(--danger)!important}
.menu-item[data-danger="true"]:hover:not(:disabled){background:var(--danger-bg)!important}
.menu-divider{display:block;height:1px;margin:5px 8px;background:var(--line-soft)}
.rail-dots{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:9px;background:none;color:var(--text-3)}
.rail-dots:hover:not(:disabled),.rail-dots[aria-expanded="true"]{background:var(--surface);color:var(--text)}
.rail-dots svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.space-settings[aria-expanded="true"]{background:var(--surface);color:var(--text)}
.row-dots{width:30px;height:30px;padding:0;display:grid;place-items:center;border:0!important;border-radius:8px!important;background:none!important;color:var(--text-3)}
.row-dots:hover:not(:disabled),.row-dots[aria-expanded="true"]{background:var(--surface-2)!important;color:var(--text)}
.row-dots svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
/* A page reached from a menu takes the window: the rail is one of the things it manages. */
html[data-view="setup"] #workspace,html[data-view="spaces"] #workspace,html[data-view="connect"] #workspace,html[data-view="workspace"] #workspace{grid-template-columns:0 minmax(0,1fr)}
html[data-view="setup"] #room-rail,html[data-view="spaces"] #room-rail,html[data-view="connect"] #room-rail,html[data-view="workspace"] #room-rail,
html[data-view="setup"] .room-head,html[data-view="spaces"] .room-head,html[data-view="workspace"] .room-head,html[data-view="create-room"] .room-head{display:none}
/* In a meeting the band stays, so mute and leave are never behind a page. The Room's
   name, its tabs and Meet are not, because this screen is not about the Room. */
html[data-meeting="joined"][data-view="setup"] .room-head,
html[data-meeting="joined"][data-view="spaces"] .room-head,
html[data-meeting="joined"][data-view="connect"] .room-head{display:flex}
html[data-meeting="joined"][data-view="setup"] .workspace-heading,
html[data-meeting="joined"][data-view="spaces"] .workspace-heading,
html[data-meeting="joined"][data-view="setup"] #people-pill,
html[data-meeting="joined"][data-view="spaces"] #people-pill,
html[data-meeting="joined"][data-view="setup"] .room-actions,
html[data-meeting="joined"][data-view="spaces"] .room-actions,
html[data-meeting="joined"][data-view="connect"] .workspace-heading,
html[data-meeting="joined"][data-view="connect"] #people-pill,
html[data-meeting="joined"][data-view="connect"] .room-actions{display:none}
.settings-page{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:262px minmax(0,1fr);overflow:hidden}
.settings-pane{min-width:0;padding:16px 12px;background:var(--bg-rail);border-right:1px solid var(--line-soft);overflow-y:auto}
.pane-back{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border:0!important;border-radius:9px!important;background:none!important;color:var(--text)!important;font-size:14.5px;font-weight:600;text-align:left}
.pane-back:hover:not(:disabled){background:var(--surface)!important}
.pane-back svg{width:16px;height:16px;flex:0 0 auto;color:var(--text-3);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pane-subject{display:flex;align-items:center;gap:10px;padding:16px 8px 12px;min-width:0}
.pane-subject .room-head-glyph{width:30px;height:30px;border-radius:9px}
.pane-subject .room-head-glyph svg{width:16px;height:16px}
.pane-subject-name{font-size:13.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pane-nav{display:flex;flex-direction:column;gap:2px}
.pane-item{display:block;width:100%;padding:8px 12px;border:0!important;border-radius:9px!important;background:none!important;color:var(--text-2)!important;font-size:13.5px;text-align:left}
.pane-item:hover:not(:disabled){background:var(--surface)!important;color:var(--text)!important}
.pane-item[aria-current="true"]{background-color:var(--accent-soft)!important;color:var(--accent-ink)!important;font-weight:600;box-shadow:inset 2px 0 0 var(--accent)}
.settings-body{min-width:0;overflow-y:auto;padding:26px max(20px,calc((100% - 900px)/2)) 40px}
.section-title{font:500 24px/1.2 var(--serif);margin:0}
.section-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.section-head-slot{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
/* On this page the cards are the page, so they carry no second frame of their own. */
#view-setup .settings-section .card,#view-setup .settings-section #room-admin{border:0;border-radius:0;background:none;padding:0;margin:0}
/* Rows for what is not here yet: readable, and plainly not something to press. */
.rows-inactive>div{opacity:.55}
.rows-inactive .row-dots:disabled{opacity:1;color:var(--text-3);background:none!important;cursor:default}
.settings-section form>label:not(.admin-default){display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);margin:0 0 6px;flex:1 0 100%}
.settings-section .tool-row{flex-wrap:wrap}
.space-head,.space-list>div,.space-rooms>div{display:grid!important;grid-template-columns:32px minmax(0,1fr) 124px 40px;gap:14px;align-items:center;padding:11px 6px}
.space-head{padding-top:0}
.row-glyph{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink)}
.row-glyph svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.space-list .actions,.space-rooms .actions{justify-self:end;display:flex}
.space-list .cell-role,.space-rooms .cell-role{color:var(--text-2);text-transform:capitalize}
/* Managing one Room is still the Rooms section; the list steps aside while you are in it. */
#section-rooms[data-panel="open"] > .section-head,#section-rooms[data-panel="open"] #space-rooms,
#section-rooms[data-panel="open"] > .section-lede,#section-rooms[data-panel="open"] #space-rooms-status{display:none}
/* The conversation loads a Room's management data for its own header; that must not put
   the panel on this page. Only the Rooms list opens the panel. */
#section-rooms:not([data-panel="open"]) #room-admin{display:none!important}
#room-panel-back{margin-bottom:16px}
/* The create control is borrowed from the rail, so it is laid out for the page it is on. */
[data-rail="collapsed"] #rooms-create-slot .when-open{display:revert!important}
.section-head-slot #new-room-form{display:flex!important;flex-direction:row;align-items:center;gap:8px;width:auto;padding:0}
.section-head-slot #new-room-form input{min-width:220px;background:var(--surface);border-color:var(--line);color:var(--text)}
.section-head-slot #new-room-status{padding:0;margin:0;max-width:280px;text-align:right}
/* Making a Space is a row in the list it is about to join, on the same grid, rather than a
   panel floating over the page. The field is the only thing to fill in, so it carries no label. */
.create-space{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px 0 12px;border-radius:10px!important;font-size:13.5px}
.create-space svg{width:16px;height:16px;stroke-width:2}
.create-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:11px 6px;border-bottom:1px solid var(--line-soft)}
.create-glyph{background:var(--surface-2);color:var(--text-3)}
.create-row input{padding:9px 12px;font-size:13.5px;background:var(--surface);border-color:var(--accent-line)}
.create-row button{white-space:nowrap;padding:8px 16px;border-radius:10px;font-weight:600;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.create-row button:hover:not(:disabled){background:color-mix(in oklab,var(--accent) 86%,var(--text));color:var(--on-accent)}
#new-space-status{margin:10px 6px 0;padding:0;font-size:12.5px}
#new-space-status:empty{display:none}
@media (max-width:760px){
 .settings-page{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
 .settings-pane{border-right:0;border-bottom:1px solid var(--line-soft);padding:10px}
 .pane-nav{flex-direction:row;flex-wrap:wrap;gap:4px}
 .pane-item{width:auto}
 .pane-subject{padding:10px 8px 8px}
 .settings-body{padding:16px 12px 28px}
 .space-head,.space-list>div,.space-rooms>div{grid-template-columns:32px minmax(0,1fr) 40px!important}
 .space-head>span:nth-child(3),.space-list>div>.cell-role,.space-rooms>div>.cell-role{display:none}
}
/* ---- Workspace page ---- */
/* Details reads as a short record, not a form: a label above the one thing it names. */
.workspace-facts{display:flex;flex-wrap:wrap;gap:24px 48px;margin:0 2px 18px}
.workspace-facts p{display:flex;flex-direction:column;gap:5px;margin:0;font-size:14px}
.workspace-facts .sec-label{font-family:var(--mono)}
#workspace-can{max-width:62ch;line-height:1.55}
/* The people here are rows of one grid: mark, name, role, the day, the handle. The day column is the
   invitation's own: when it was sent, or how and when it was answered; a member's row leaves it empty. */
.workspace-rows>div{grid-template-columns:34px minmax(0,1fr) 88px 150px auto!important;gap:12px}
.workspace-rows .cell-when{white-space:nowrap;color:var(--text-3);font-size:13px}
.workspace-rows .cell-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-rows .cell-role{justify-self:start;color:var(--text-2)}
.workspace-rows .actions{display:flex;gap:6px;justify-self:end}
/* An orphan has no name to show, so its id carries the row and is set in the fixed face
   that ids are always given here; the kind sits where a role would. */
.workspace-orphans>div{grid-template-columns:minmax(0,1fr) 100px auto!important;gap:12px}
.workspace-orphans .cell-name{font-family:var(--mono);font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#workspace-more{margin-top:12px}
#workspace-recovery-people:empty{display:none}
@media (max-width:760px){
 .workspace-rows>div{grid-template-columns:34px minmax(0,1fr) auto!important}
 .workspace-rows .cell-role,.workspace-rows .cell-when{display:none}
}

/* ---- Direct messages group and the rail's New Room row ---- */
/* Direct conversations belong to the workspace, not to a Space, so they get their own group
   under the Spaces list, in the same voice as a Space group. */
.direct-group{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding-top:6px;border-top:1px solid var(--line-soft);flex:0 0 auto}
.direct-head{display:flex;align-items:center;padding:4px 8px 2px 6px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
#direct-group[hidden]{display:none}
#direct-rooms:empty{display:none}
/* A Room is made on the Space's Rooms page, where its people are chosen; in the rail the form stays
   out of sight and the row beneath the Rooms points there. */
#room-rail #new-room-form{display:none}
#new-room-open{display:flex;align-items:center;gap:6px;width:100%;padding:7px 8px;border:0;background:none;color:var(--text-3);font:inherit;font-size:13px;border-radius:9px;text-align:left;cursor:pointer}
#new-room-open:hover{background:var(--surface);color:var(--text)}
#new-room-open .new-room-plus{font-size:15px;line-height:1}
/* Who may make Rooms is chosen with the Space's name, as one row. */
.create-policy{font:inherit;font-size:12.5px;color:var(--text-2);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:6px 8px;max-width:220px}

/* ---- Space and Room people ---- */
/* A line under a section head that says what the list below it is, in the page's own voice. */
.section-lede{margin:-8px 0 16px;color:var(--text-2);font-size:13px;max-width:62ch}
/* Candidates from the directory read as members already do, so inviting is recognising a row. */
#invite-results>p{display:grid!important;grid-template-columns:12px 34px minmax(0,1fr) 132px 92px!important;gap:12px;align-items:center;padding:10px 6px}
#invite-results>p .cell-name{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
#invite-results>p .cell-role{justify-self:start;color:var(--text-2);text-transform:capitalize}
#invite-results>p .actions{justify-self:end;display:flex;gap:6px}
#invite-results:not(:empty){border-bottom:1px solid var(--line);margin-bottom:4px}
/* The invite row's own footnote sits under the field, not beside it. */
.invite-note{flex:1 0 100%;margin:8px 2px 0;font-size:12.5px}
/* Who is in a new Room: a choice of two, then the people, then what it costs you to know. */
.who-block{border:0;padding:0;margin:0;min-width:0}
.who-block legend{padding:0;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
.segmented{display:flex;gap:6px;margin:8px 0 0;flex-wrap:wrap}
.segmented label{display:flex!important;align-items:center;gap:7px;margin:0!important;padding:7px 11px;font:inherit!important;
  font-size:13px!important;letter-spacing:normal!important;text-transform:none!important;color:var(--text-2)!important;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;cursor:pointer;flex:0 1 auto}
.segmented label:hover{border-color:var(--accent-line);color:var(--text)!important}
.segmented input{flex:0 0 auto;width:auto;margin:0}
.segmented label:has(input:checked){background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)!important;font-weight:600}
/* Picked people are the chips that are pressed; the rest stay quiet until they are. */
.chip-picker{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;max-height:190px;overflow-y:auto}
.chip-picker .chip{padding:5px 11px!important;font-size:12.5px!important;border-radius:999px!important;
  background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--text-2)!important;align-self:auto!important}
.chip-picker .chip:hover:not(:disabled){border-color:var(--accent-line)!important;color:var(--text)!important}
.chip-picker .chip[aria-pressed="true"]{background:var(--accent-soft)!important;border-color:var(--accent-line)!important;color:var(--accent-ink)!important;font-weight:600}
.who-note{margin:8px 2px 0;font-size:12.5px;color:var(--text-3)}
/* On the Rooms page the form is a block with room for the picker, not a strip in a head. */
.section-head-slot #new-room-form{flex-direction:column!important;align-items:stretch!important;gap:10px;width:min(420px,100%)}
.section-head-slot #new-room-form button[type="submit"]{align-self:flex-start}
/* With no Space open the Rooms block has no home; its New Room row has nothing to point at. */
#space-list>#rail-rooms #new-room-open{display:none}
/* The Workspace page follows the settings pages in a meeting: the band stays, the Room's own chrome does not. */
html[data-meeting="joined"][data-view="workspace"] .room-head{display:flex}
html[data-meeting="joined"][data-view="workspace"] .workspace-heading,
html[data-meeting="joined"][data-view="workspace"] #people-pill,
html[data-meeting="joined"][data-view="workspace"] .room-actions{display:none}
/* The Rooms page's head holds a tall form now: the title sits at the top of it, and the two
   audience choices stack as full rows so neither wraps around its radio. */
#section-rooms .section-head{align-items:flex-start}
.section-head-slot .segmented{flex-direction:column;align-items:stretch;gap:6px}
.section-head-slot .segmented label{justify-content:flex-start;text-align:left;flex:1 1 auto}
/* The head's wide-input rule was written for the name field; a radio is not a text field. */
.section-head-slot #new-room-form input[type="radio"]{flex:0 0 auto;width:auto;min-width:0}
/* The New Room form is a block of its own under the title, not a strip squeezed into the head:
   the name and the Create control on the left, who is in it on the right. */
#section-rooms .section-head{flex-wrap:wrap;align-items:center;row-gap:14px}
#section-rooms .section-head-slot{flex:1 0 100%;margin-left:0;align-items:stretch}
.section-head-slot #new-room-form{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:auto 1fr;gap:12px 24px;
  width:100%!important;padding:16px 18px!important;background:var(--surface);border:1px solid var(--line);border-radius:12px;align-items:start}
.section-head-slot #new-room-form>input{grid-column:1;grid-row:1;min-width:0}
.section-head-slot #new-room-form>.who-block{grid-column:2;grid-row:1/3}
.section-head-slot #new-room-form>button[type="submit"]{grid-column:1;grid-row:2;justify-self:start}
.section-head-slot .segmented{margin-top:6px}
.section-head-slot #new-room-status{text-align:left;max-width:none}
@media (max-width:900px){.section-head-slot #new-room-form{grid-template-columns:1fr;grid-template-rows:auto}
  .section-head-slot #new-room-form>.who-block{grid-column:1;grid-row:auto}.section-head-slot #new-room-form>button[type="submit"]{grid-row:auto}}

/* ---- The Workspace front door ---- */
/* One field and a button, then the invitations addressed to you, inside the landing's column. */
.landing-workspace{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(100%,460px);text-align:center}
.workspace-create{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.workspace-create input{width:100%}
.landing-workspace .people-label{margin:14px 0 4px}
/* An invitation card: who asked and into what, then the two answers. The same card in the rail and on the landing. */
.invite-cards{display:flex;flex-direction:column;gap:6px}
.invite-cards:empty{display:none}
.invite-card{margin:0;display:grid;grid-template-columns:34px minmax(0,1fr);gap:3px 10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:13px;text-align:left}
.invite-card .member-avatar{grid-row:1/3}
.invite-card .invite-text{font-weight:550;min-width:0;overflow-wrap:anywhere}
.invite-card .invite-meta{color:var(--text-3);font-size:12px}
.invite-card .actions{grid-column:2;display:flex;gap:6px;margin-top:6px}
.invite-card .actions button{margin:0;font-size:12px;padding:4px 12px;border-radius:999px}
.invite-card[data-highlight="true"]{border-color:var(--accent-line);background:var(--accent-soft)}
#workspace-inbox-items{padding:0}
#workspace-inbox-note:empty{display:none}
/* Under Teams the Space's People page points at the Workspace's, in a sentence with the link in it. */
.teams-people{margin:0 0 16px;font-size:13.5px;max-width:62ch}
.teams-people .btn-link{display:inline;background:none;border:0;padding:0;font:inherit;color:var(--accent-ink);text-decoration:underline;cursor:pointer}
/* An invited address is a row like a person's, with how it is going where the role would be. */
#workspace-pending>div .cell-role{text-transform:none;font-style:normal}
#workspace-invite select{flex:0 0 auto}

/* ---- The Space layer, folded ---- */
/* A Workspace that holds one Space says so on the root, and the rail reads as that Space: no Spaces
   heading, no Spaces menu, no twisty, and the head is a name rather than a switch. The rail builder
   is the same code either way. */
html[data-space-layer="folded"] #spaces-section>.rail-section-head,html[data-space-layer="folded"] .space-twisty,html[data-space-layer="folded"] .space-group>.section-grip{display:none}
html[data-space-layer="folded"] .space-head{pointer-events:none}
html[data-space-layer="folded"]:not([data-rail="collapsed"]) .space-head{padding-left:10px}
html[data-space-layer="folded"] .space-group{margin-top:0}
/* Which kind of thing a settings page is about, under its name, so two pages with one name still differ. */
.pane-subject-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.pane-subject-kind{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
/* A fresh Space's landing: the team first, then the Room. */
.landing-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:10px}
.landing-actions .lede{margin:0}

/* ---- Newcomer landing, sign-in note, invitation history ---- */
/* The pointer's arrow points at the rail only when there is something there for this person to press. */
.pointer[data-arrow="false"] svg{display:none}
#signin-note{max-width:40ch;margin:4px 0 14px;color:var(--text-2);font-size:14px;line-height:1.5;text-wrap:balance}
#signin-note:empty{display:none}
/* Leaving the Workspace is the one red button on the page, so it is never pressed by mistake. */
#workspace-leave{color:var(--danger);border-color:var(--danger)}
#workspace-leave:hover:not(:disabled){background:var(--danger-bg);color:var(--danger);border-color:var(--danger)}

/* ---- The inbox under the bell ---- */
/* The same panel as Appearance, hung from the bell: Workspace cards first, Space rows after, one refresh. */
.inbox-popover{position:fixed;top:0;left:0;width:max-content;min-width:300px;max-width:min(380px,calc(100vw - 24px));max-height:min(70vh,560px);overflow-y:auto;z-index:120;
  background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.inbox-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.inbox-head button{font-size:12px;padding:4px 10px;border-radius:999px;margin:0}
.inbox-popover .invite-card{background:var(--bg)}
#inbox-items p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:12px}
#inbox-items p span{flex:1 1 100%;font-weight:550}
#inbox-items p button{margin:0;font-size:12px;padding:4px 12px;border-radius:999px}
#inbox-empty{margin:0;font-size:13px}
.inbox-popover:has(.invite-card,#inbox-items p) #inbox-empty{display:none}
/* The bell wears a dot while anything waits; it is the count the two inboxes last reported. */
#activity{position:relative}
#activity:is([data-workspace-invitations]:not([data-workspace-invitations="0"]),[data-space-invitations]:not([data-space-invitations="0"]))::after{
  content:'';position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}

/* ---- The front door ---- */
/* Outside any Workspace the pane has one thing in it. The Room header, the toolbar and the rail's
   Spaces heading have nothing to say there, so they go, and the field and button sit a little above
   the middle of the whole pane, where centred content reads as centred. */
html[data-front-door] .room-head,html[data-front-door] .chat-toolbar,html[data-front-door] #spaces-section .who,html[data-front-door] #spaces-menu-open{display:none}
html[data-front-door] .blank-inner{margin-bottom:14vh}

/* ---- New Room, on the right ---- */
/* The Room is made in the pane, with the rail where it was; Cancel is the only way back it needs. */
.create-room-view{display:flex;justify-content:center;align-items:flex-start}
.create-room-card{width:min(100%,640px);margin-top:8px}
/* In its own page the form is a form, not the rail's quiet row: a full-width name, the two choices
   stacked, the note, then Create Room, always shown. These outrank the rail rules by id. */
#view-create-room #new-room-form{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:0;margin:0}
#view-create-room #new-room-form input{width:100%;font-size:15px;padding:11px 14px;background:var(--surface);border-color:var(--line);color:var(--text)}
#view-create-room #new-room-form input[type="radio"]{flex:0 0 auto;width:auto;padding:0;margin:0}
#view-create-room #new-room-form .segmented{flex-direction:column;align-items:stretch}
#view-create-room #new-room-form .segmented label{flex:1 1 auto;width:100%;justify-content:flex-start;padding:11px 14px;border-radius:12px}
#view-create-room .form-actions{display:flex;gap:10px;align-items:center}
#view-create-room #new-room-form button{display:inline-flex;padding:10px 18px;border-radius:11px}
#view-create-room #new-room-cancel{background:var(--surface);border:1px solid var(--line);color:var(--text-2)}
#view-create-room #new-room-cancel:hover{background:var(--surface-2);color:var(--text)}
#workspace-recovery-picker{margin-top:18px}

/* ---- The People popover as the roster ---- */
/* The × at the end of every other row removes that person; everyone in a Room may. */
.person .roster-remove{border:0;background:none;width:26px;height:26px;padding:0;border-radius:50%;font-size:17px;line-height:1;color:var(--text-3);cursor:pointer}
.person .roster-remove:hover{background:var(--danger-bg);color:var(--danger)}
/* Below the roster: a rule, then the search that adds someone the moment they are chosen. */
.people-sep{height:1px;background:var(--line);margin:8px 6px 6px}
#people-manage .people-label{margin:4px 6px 6px}
.roster-add{display:flex;align-items:center;gap:8px;padding:0 6px}
.roster-add input{flex:1 1 auto;min-width:0;font-size:13px;padding:7px 10px}
.roster-results{display:flex;flex-direction:column;gap:2px;padding:4px 2px 0;max-height:180px;overflow:auto}
.roster-results:empty{display:none}
.roster-candidate{display:flex;align-items:center;gap:9px;padding:6px 8px;border:0;border-radius:9px;background:none;text-align:left;font:inherit;font-size:13.5px;color:var(--text);cursor:pointer;width:100%}
.roster-candidate:hover{background:var(--accent-soft);color:var(--accent-ink)}
#people-manage-status{margin:6px 6px 0}

/* ---- One rhythm for the rail, open or folded ---- */
/* Every row the open rail has, the folded strip has too, at the same height and in the same order:
   the Space as a tile of its initials where its name sits, New Room where New Room sits, then the
   Rooms fifty pixels apart in both. Opening the rail under the pointer moves nothing. */
.space-head{min-height:38px;box-sizing:border-box}
#new-room-open{height:38px;box-sizing:border-box}
[data-rail="collapsed"] .space-head{display:grid!important;place-items:center;width:38px;height:38px;min-height:38px;padding:0;margin:0 auto;border-radius:11px;
  background:rgb(255 255 255/.18);color:#FFFFFF;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;pointer-events:none}
[data-rail="collapsed"] .space-head>*{display:none}
[data-rail="collapsed"] .space-head::before{content:attr(data-initial)}
[data-rail="collapsed"] .space-group{row-gap:0}
.rail-head{min-height:38px} /* The toggle row is 38 tall folded; the open rail keeps the same, so everything under it starts level. */
[data-rail="collapsed"] #new-room-open{margin-top:0} /* Open: 48px rows on a 2px gap; folded: 38px tiles on a 12px gap. Both step 50px, so New Room lands level under the last Room. */

/* ---- Chat and Files beside a meeting ---- */
/* On a wide screen, a joined meeting keeps the pane and the chosen panel takes a column on its right,
   under the same Room header. Narrow screens keep switching views, as before. */
html[data-meeting="joined"][data-side] .conversation{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:auto minmax(0,1fr)}
html[data-meeting="joined"][data-side] .conversation>.room-head{grid-column:1/-1;grid-row:1}
html[data-meeting="joined"][data-side] .conversation>#view-meeting{grid-column:1;grid-row:var(--meeting-content-row,2);min-height:0}
html[data-meeting="joined"][data-side="chat"] .conversation>#view-chat,html[data-meeting="joined"][data-side="attachments"] .conversation>#view-attachments,html[data-meeting="joined"][data-side="transcripts"] .conversation>#view-transcripts{
  grid-column:2;grid-row:var(--meeting-content-row,2);min-height:0;min-width:0;border-left:1px solid var(--line);background:var(--bg)}
html[data-meeting="joined"][data-side="chat"] .conversation>#view-chat{display:flex}
html[data-meeting="joined"][data-side] .conversation>section:not(#view-meeting):not(#view-chat):not(#view-attachments):not(#view-transcripts){display:none}
html[data-meeting="joined"][data-side="chat"] #messages li{max-width:96%}
html[data-meeting="joined"][data-side="chat"] .send-hint{display:none}

/* A danger row whose button this person may not press says nothing at all. */
.danger-row:has(>button[hidden]){display:none}

/* ---- The mic badge on every tile ---- */
/* Status, never a control: the bar mutes. Muted is red and crossed; on and quiet is light green,
   so a working microphone is visible before a word is said; speaking is the same green gone
   solid, with bars lit by the level and a glow. The mic on the tile is not a button. */
.tile-mic{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent-line);pointer-events:none;
  transition:background .15s ease,box-shadow .15s ease}
.tile-mic .mic-glyph{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;grid-area:1/1}
.tile-mic .mic-bars{position:absolute;left:11.5px;top:8px;width:7px;height:8px;display:flex;flex-direction:column-reverse;gap:1.5px;opacity:0}
.tile-mic .mic-bars i{display:block;height:1.5px;border-radius:1px;background:currentColor;opacity:.25}
.tile[data-mic="muted"] .tile-mic{background:var(--danger);color:#FFFFFF;border-color:var(--danger)}
.tile[data-mic="muted"] .tile-mic [data-icon="on"],.tile:not([data-mic="muted"]) .tile-mic [data-icon="off"]{display:none}
.tile[data-mic="speaking"] .tile-mic{background:var(--accent);color:#FFFFFF;border-color:var(--accent);
  box-shadow:0 0 0 5px color-mix(in oklab,var(--accent) 28%,transparent),0 0 14px color-mix(in oklab,var(--accent) 55%,transparent)}
.tile[data-mic="speaking"] .tile-mic .mic-bars{opacity:1}
.tile[data-level="1"] .tile-mic .mic-bars i:nth-child(1),.tile[data-level="2"] .tile-mic .mic-bars i:nth-child(-n+2),.tile[data-level="3"] .tile-mic .mic-bars i{opacity:1}
/* A camera tile keeps its name and badge readable over a bright feed. */
.tile[data-tile-kind="video"] .tile-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;background:rgb(0 0 0/.32);pointer-events:none}
.tile{cursor:pointer}.tile:focus-visible,.screen-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.screen-tile{cursor:pointer}

/* ---- Presenting: a preview of what you share, with Stop beside it ---- */

/* ---- Enlarged: one tile fills the stage, the rest become a strip ---- */
.meeting-surface[data-stage] .meeting-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 84px}
.meeting-surface[data-stage] .meeting-stage>*{grid-column:1}
.meeting-surface[data-stage="tile"] .screen-tile{display:none}
.meeting-surface[data-stage] .tile-grid{grid-row:2}
.meeting-surface[data-stage] #meeting-featured{grid-row:1;grid-template-columns:minmax(0,1fr)}
.meeting-surface[data-stage="screen"] .screen-tile{grid-row:1}
.meeting-surface[data-stage] #meeting-tracks{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;height:auto;overflow-x:auto;overflow-y:hidden;padding:0 4px}
.meeting-surface[data-stage] #meeting-tracks>.tile{flex:0 0 auto;width:60px;height:60px;border-radius:50%}
.meeting-surface[data-stage] #meeting-tracks .tile-foot{display:none}
.meeting-surface[data-stage] #meeting-tracks .tile-mic{width:22px;height:22px;right:-2px;bottom:-2px}
.meeting-surface[data-stage] #meeting-tracks .tile-mic .mic-glyph{width:12px;height:12px}
.meeting-surface[data-stage] #meeting-tracks .tile-mic .mic-bars{display:none}
.meeting-surface[data-stage] #meeting-tracks .avatar-badge{--avatar-size:100%;border-radius:0;font-size:16px}

/* ---- The meeting on a phone ---- */
/* The controls leave the Room head for a bar of their own beneath it, 44px round buttons and a
   labelled Leave, every glyph centred the same way. Tiles: two stack, an odd count gives the
   speaker the width, an even count is equal, the speaker first in every case. */
@media (max-width:760px){
 .room-head{flex-wrap:wrap;row-gap:0}
 .meeting-band{flex:1 0 100%;order:30;min-height:64px;margin:0 -10px 0 -18px;padding:8px 12px;gap:8px;justify-content:flex-end;
   background:var(--surface-2);border-top:1px solid var(--line-soft)}
 .meeting-band #meeting-clock{display:inline-flex;align-items:center;flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;margin-right:auto;border:0;background:none;padding:0;font-family:var(--mono);font-size:12px;color:var(--accent-ink)}
 .meeting-band #meeting-census{display:none} /* The count is on the tiles; the bar keeps the clock. */
 .meeting-band .mtg-btn:has(.mtg-icon){width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
 .meeting-band .mtg-btn-leave,.meeting-band .mtg-btn-leave:has(.mtg-icon){width:auto;height:44px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;gap:0}
 .meeting-band .mtg-btn-leave:has(.mtg-icon) .mtg-btn-text{display:inline}.meeting-band .mtg-btn-leave .mtg-icon{display:none}
 #meeting-featured{grid-template-columns:minmax(0,1fr)!important}
 .meeting-band .mtg-controls-split{display:none}
 .meeting-surface{--grid-gap:10px}
 .tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(0,1fr)}
 .tile-grid[data-tile-count="1"],.tile-grid[data-tile-count="2"]{grid-template-columns:minmax(0,1fr)!important}
 .tile[data-top="true"]{order:-1}
 .tile-grid[data-tile-parity="odd"]{grid-template-rows:minmax(0,1.6fr)}
 .tile-grid[data-tile-parity="odd"] .tile[data-top="true"]{grid-column:1/-1}
 /* A shared screen is the wide top tile; people sit two across beneath it. */
 .meeting-surface[data-tiles="rail"] .meeting-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1.6fr) minmax(0,1fr)}
 .meeting-surface[data-tiles="rail"]:not([data-stage]) .tile-grid{display:grid;overflow:visible;order:1}
 .meeting-surface[data-tiles="rail"]:not([data-stage]) .tile-grid>*{height:auto}
}

/* ---- The Room's four views ---- */
/* Chat, Files, Transcripts and Settings sit side by side on a wide screen. The meeting is its own
   surface, reached by Meet and lit by no tab; while joined, a way back sits where the people were. */
.transcripts-view{padding:18px max(20px,calc((100% - 1160px)/2))}
.transcripts-view .meeting-lobby{padding:0}
.room-view .settings-card{max-width:720px}
#view-room #room-panel-back{display:none}
#view-room #room-admin{margin:0}
.meeting-back{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 8px;border-radius:999px;font-weight:600;font-size:13px;
  color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-line)}
.meeting-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.meeting-back:hover:not(:disabled){background:var(--accent-line)}
.views-menu-open{display:none;width:34px;height:34px;padding:0;border-radius:50%;font-size:16px;letter-spacing:1px;line-height:1;place-items:center}
.topbar-room{display:none}
/* Folded to a strip, the Space list keeps the same inset as the Rooms beneath it. */
/* Folded, the Space tile and the Room tiles share one centre line: the group centres its
   children as the Rooms block already centres its own. */
[data-rail="collapsed"] .space-group{display:flex!important;flex-direction:column;align-items:center;width:100%}
[data-rail="collapsed"] .space-head{margin:0}
[data-rail="collapsed"] .rail-rooms,[data-rail="collapsed"] .rooms-region{padding-left:0;padding-right:0;margin-left:0;margin-right:0}

@media (max-width:760px){
 /* The Room's name lives in the top bar; the head keeps the people and the views. */
 .topbar-room{display:block;flex:1 1 auto;min-width:0;margin:0 8px 0 12px;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--on-bar);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .topbar-room:empty{display:none}
 /* The heading wraps the tabs too, so only the glyph and the titles step aside. */
 html[data-room] .room-head .workspace-heading>.room-head-glyph,html[data-room] .room-head .workspace-heading>.room-titles{display:none}
 html[data-room] .room-head .workspace-heading{gap:8px}
 html[data-room] .room-head #people-pill{margin-right:auto}
 /* One view shows; the rest are behind the dots. In a meeting, Chat is the one on offer. */
 .room-tabs{margin-left:0;gap:8px}
 .room-tabs button:not([aria-selected="true"]){display:none}
 html[data-meeting="joined"] .room-tabs #tab-chat{display:inline-block}
 .views-menu-open{display:grid}
 html[data-meeting="joined"]:not([data-view="meeting"]) .room-head #people-pill{display:none}
 /* Transcripts and Files as condensed rows: the row is the button; no headers, no Open. */
 .data.meetings thead,.data.files thead{display:none}
 /* Meetings: the mark and the date on the first line with the length at its end, who spoke beneath, a chevron. */
 .data.meetings tr.meeting-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;column-gap:10px;padding:8px 4px;border-bottom:1px solid var(--line-soft)}
 .data.meetings tr.meeting-row td{display:block;padding:0;border:0;min-width:0}
 .data.meetings tr.meeting-row .meeting-head{grid-column:1/3;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:10px;align-items:center}
 .data.meetings tr.meeting-row .meeting-head strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
 .data.meetings tr.meeting-row td.who,.data.meetings tr.meeting-row td.muted{grid-column:2;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .data.meetings tr.meeting-row td:nth-child(3){grid-column:3;grid-row:1;justify-self:end;font-size:12px;color:var(--text-3);white-space:nowrap}
 .data.meetings tr.meeting-row td.actions{display:none}
 .data.meetings tr.meeting-row::after{content:"›";grid-column:3;grid-row:2;justify-self:end;align-self:center;color:var(--text-3);font-size:18px;line-height:1}
 /* Files: the name on the first line, then size, by, when and where run together beneath it. */
 .data.files tbody tr:not(.empty-row){display:flex;flex-wrap:wrap;align-items:center;column-gap:4px;row-gap:2px;position:relative;padding:8px 26px 8px 4px;border-bottom:1px solid var(--line-soft)}
 .data.files tbody tr td{display:block;padding:0;border:0;min-width:0}
 .data.files tbody tr td:first-child{flex:1 0 100%;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .data.files tbody tr td:nth-child(n+2):not(:last-child){font-size:12px;color:var(--text-3);white-space:nowrap}
 .data.files tbody tr td:nth-child(n+3):not(:last-child)::before{content:"· "}
 .data.files tbody tr td:last-child,.data.files tbody tr td.actions,.data.files tbody tr td:has(button){display:none} /* The name is the link; Download and the rest wait for the row. */
 .data.files tbody tr:not(.empty-row)::after{content:"›";position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:18px;line-height:1}
 #room-people>div{grid-template-columns:12px 34px minmax(0,1fr) auto auto!important;gap:8px}
 .meeting-lobby:has(tr.meeting-row) .live-row td{display:block}
 .transcripts-view{padding:12px 10px}
 .meeting-detail-row>td{grid-column:1/-1}
}

/* ---- The saved recording of a meeting ---- */
/* Above the notes and the transcript, full width: a heading, how long it stays, the native player,
   and one line of status when there is nothing to play yet or any more. */
.recording{margin:4px 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.recording-head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.recording-head h3{margin:0;font-size:14px}
.recording-note{font-size:12px;color:var(--text-3)}
#recording-audio{display:block;width:100%;max-width:720px;height:40px}
#recording-audio[hidden]{display:none}
#recording-status{margin:6px 0 0;font-size:12.5px}
#recording-status:empty{display:none}

/* ---- One rhythm down the rail ---- */
/* The toggle row, the Space row, the Rooms and New Room step 50px in both modes: the list starts 4px
   lower so the Space row follows the toggle on the step, and the Rooms start 12px under the Space row. */
.space-list{margin-top:4px}
.rail-rooms{margin-top:12px}

/* ---- The rail, redesigned: Spaces as cards, round Rooms, Chats apart ---- */
/* A Room is a solid tone circle carrying a white two-tone mark; a person in Chats is the same circle
   with initials. A Space is a rounded square of initials, so the two never read alike. */
.room-glyph[data-tone],.room-head-glyph[data-tone]{background:var(--tone)!important;color:#FFFFFF!important;border-radius:50%}
.room-glyph{font-weight:700}
.room-glyph svg{width:19px;height:19px}
.room-head-glyph svg{width:21px;height:21px}
.pane-subject .room-head-glyph svg{width:17px;height:17px}
.space-avatar{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:8px;background:var(--accent);color:var(--on-accent);
  font-size:11.5px;font-weight:800;letter-spacing:.02em;line-height:1}
.space-head{font-weight:700}

/* One vertical rhythm, open or folded: opening the rail moves nothing up or down. Every Space is
   48px (a 38px heading inside 5px: the card's 1px border and 4px padding, or the capsule's 5px);
   Spaces are 8px apart; every Room, Chat and New Room row is a 44px step on a 2px gap, the icon
   34px open and 30px folded, centred in the same box; Chats open 13px under the Spaces. */
/* Chats is a fixed section: the Spaces take the free height and scroll inside it, so opening a Space
   with many Rooms never pushes Chats down or off the rail. Chats keep their own capped, scrolling list. */
.space-list{flex:1 1 auto;gap:8px}
.direct-group{flex:0 0 auto}
#space-list>.space-group{margin-top:0}
#space-list>.space-group>.rail-rooms{margin-top:2px;gap:2px}
#rooms button,#direct-rooms button{min-height:44px;box-sizing:border-box;padding-top:5px;padding-bottom:5px}
#new-room-open{height:44px}
#direct-rooms{margin-top:2px;gap:2px;max-height:30vh;overflow-y:auto;overflow-x:hidden}
.direct-group{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);gap:2px} /* Below the Spaces: the same air as above them. */
.direct-head{box-sizing:border-box;height:34px;gap:2px;padding:0 4px 0 0} /* Level with the Spaces heading. */

/* Open, each Space is a card; the open one holds its Rooms, indented under the heading. */
html:not([data-rail="collapsed"]) #space-list>.space-group{background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;padding:4px;
  box-shadow:0 1px 2px rgb(0 0 0/.05)}
html:not([data-rail="collapsed"]) #space-list>.space-group>.rail-rooms{padding:0 0 0 30px}
/* A raised card inside a card would vanish, so the open Room is tinted in the accent instead. */
html:not([data-rail="collapsed"]) #rooms button:hover:not(:disabled),html:not([data-rail="collapsed"]) #direct-rooms button:hover:not(:disabled){
  background:color-mix(in oklab,var(--accent) 8%,var(--surface))}
html:not([data-rail="collapsed"]) #rooms button[aria-current="true"],html:not([data-rail="collapsed"]) #direct-rooms button[aria-current="true"]{
  background:var(--accent-soft);color:var(--accent-ink);box-shadow:none}
html:not([data-rail="collapsed"]) .direct-group{align-items:stretch}
html:not([data-rail="collapsed"]) .direct-head .space-name{flex:1}

/* Chats: its own section, started from the heading's +, never from a search box in the rail. */
.new-chat{margin-left:auto;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:8px;
  background:var(--accent-soft);color:var(--accent-ink);cursor:pointer}
.new-chat:hover{background:var(--accent-line)}
.new-chat svg{width:15px;height:15px;stroke-width:2.4}
#new-dm-form:not([data-open]){display:none}
#new-dm-form[data-open]{position:fixed;z-index:60;width:280px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 14px 34px rgb(0 0 0/.22)}
#new-dm-form[data-open] input{background:var(--bg);border-color:var(--line);color:var(--text)}
#new-dm-form[data-open] .dm-glass{left:22px;top:27px}
#new-dm-form[data-open] .dm-results{margin-top:6px;padding:0;border:0;box-shadow:none;background:none}

/* Folded, every Space is a 48px column: the open one a tinted capsule holding its tile, its Rooms and
   its own +, the others just their tile. */
[data-rail="collapsed"] #room-rail{padding-left:5px;padding-right:5px;padding-bottom:10px} /* Same foot as the open rail, so the anchored Chats sit level. */
[data-rail="collapsed"] #space-list>.space-group{width:48px;margin:0 auto;padding:5px 0;border-radius:18px}
[data-rail="collapsed"] #space-list>.space-group[data-expanded]{background:rgb(255 255 255/.14)}
[data-rail="collapsed"] .space-head{font-family:inherit;font-size:13px;font-weight:800;letter-spacing:.02em}
[data-rail="collapsed"] .space-group[data-expanded] .space-head{background:#FFFFFF;color:var(--accent)}
[data-rail="collapsed"] #rooms button,[data-rail="collapsed"] #direct-rooms button{width:40px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:12px;position:relative}
[data-rail="collapsed"] .room-glyph{flex-basis:30px;height:30px;border-radius:50%;font-size:12.5px}
[data-rail="collapsed"] .room-glyph svg{width:17px;height:17px}
[data-rail="collapsed"] #new-room-open{width:30px;height:30px;margin:7px 0;border-radius:50%;font-size:16px}
[data-rail="collapsed"] #direct-rooms button,[data-rail="collapsed"] #direct-rooms button:hover:not(:disabled),[data-rail="collapsed"] #direct-rooms button[aria-current="true"]{background:none;box-shadow:none}
[data-rail="collapsed"] #rooms button[data-peer] .presence-dot,[data-rail="collapsed"] #direct-rooms button[data-peer] .presence-dot{position:absolute;top:6px;right:4px;margin:0;box-shadow:0 0 0 2px var(--accent)}
/* Folded Chats keep the open layout's rows: a short rule, the + on the heading row, then the people. */
[data-rail="collapsed"] .direct-group{position:relative;align-items:center;border-top-color:transparent}
[data-rail="collapsed"] .direct-group::before{content:"";position:absolute;top:-1px;left:50%;width:28px;margin-left:-14px;height:2px;border-radius:1px;background:rgb(255 255 255/.35)}
[data-rail="collapsed"] .direct-head{padding:0;justify-content:center;width:100%}
[data-rail="collapsed"] .new-chat{margin:0;width:30px;height:30px;border-radius:50%;background:none;border:1.5px dashed rgb(255 255 255/.6);color:rgb(255 255 255/.9)}
[data-rail="collapsed"] .new-chat:hover{border-color:#FFFFFF;color:#FFFFFF;background:rgb(255 255 255/.16)}
[data-rail="collapsed"] #direct-rooms{align-items:center;width:100%}
/* The heading row is 38px in both modes (a 28px avatar on 5px). */
#space-list .space-head{padding-top:5px;padding-bottom:5px}

/* ---- Rearranging: each section has its own heading row, and sections and Spaces move by their grips ---- */
/* The rail's top row is the pin (open) or the toggle (folded), 38px either way. Under it each section
   has a 34px heading in both modes: open, grip + name + its action; folded, the action alone. */
.rooms-region{position:relative}
#spaces-section{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;gap:4px}
.rail-section-head{display:flex;align-items:center;gap:2px;box-sizing:border-box;height:34px;padding:0 4px 0 0;flex:0 0 auto}
.rail-section-head .who{flex:1}
.rail-head{justify-content:flex-end}
.space-list{position:relative}
.section-grip{flex:0 0 auto;display:grid;place-items:center;width:18px;height:28px;padding:0;border:0;border-radius:6px;background:none;
  color:var(--text-3);cursor:grab;opacity:0;transition:opacity .12s ease}
.section-grip svg{width:14px;height:14px;fill:currentColor;stroke:none}
.section-grip:active{cursor:grabbing}
.section-grip:hover{background:color-mix(in oklab,var(--accent) 10%,transparent);color:var(--accent-ink)}
.rail-section:hover .section-grip[data-grip],.section-grip[data-grip]:focus-visible,
.space-group:hover>.section-grip,.space-group>.section-grip:focus-visible{opacity:1}
/* A Space card: grip, heading, menu; its Rooms still sit under the heading, a little further in. */
html:not([data-rail="collapsed"]) #space-list>.space-group{grid-template-columns:auto minmax(0,1fr) auto}
html:not([data-rail="collapsed"]) #space-list .space-head{padding-left:0}
html:not([data-rail="collapsed"]) #space-list>.space-group>.rail-rooms{padding-left:40px}
[data-rail="collapsed"] .space-group>.section-grip{display:none}
/* Folded, the Spaces heading keeps its menu, centred where the name was. */
[data-rail="collapsed"] .rail-section-head{justify-content:center;padding:0}
[data-rail="collapsed"] .rail-dots{color:rgb(255 255 255/.75)}
[data-rail="collapsed"] .rail-dots:hover{color:#FFFFFF;background:rgb(255 255 255/.16)}
/* While a card moves it fades where it was; the line shows where it will land. */
[data-dragging]{opacity:.4}
.drop-line{position:absolute;left:2px;right:2px;height:3px;border-radius:2px;background:var(--accent);pointer-events:none;z-index:5}
.drop-line::before{content:"";position:absolute;left:-2px;top:-2.5px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
/* Chats first: it stands at the top and its rule moves beneath it. */
html[data-rail-order="chats-spaces"] .direct-group{margin-top:0;padding-top:0;border-top:0;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
[data-rail="collapsed"][data-rail-order="chats-spaces"] .direct-group{border-bottom-color:transparent}
[data-rail="collapsed"][data-rail-order="chats-spaces"] .direct-group::before{top:auto;bottom:-1px}

/* ---- Section icons: each section is marked, open or folded ---- */
/* Open, a small icon sits beside CHATS and SPACES. Folded, the heading's own button shows the section's
   icon in white: the bubble starts a chat, the grid opens the Space menu, so each block is labelled. */
.section-icon{display:grid;place-items:center;flex:0 0 auto;width:18px;height:18px;margin-right:6px;color:var(--text-3)}
.section-icon svg{width:15px;height:15px;stroke-width:2}
.icon-folded{display:none}
[data-rail="collapsed"] .icon-open{display:none}
[data-rail="collapsed"] .icon-folded{display:block}
[data-rail="collapsed"] #spaces-menu-open,[data-rail="collapsed"] .new-chat{width:34px;height:30px;margin:0;border:0;border-radius:9px;background:none;color:#FFFFFF}
[data-rail="collapsed"] #spaces-menu-open:hover,[data-rail="collapsed"] .new-chat:hover{background:rgb(255 255 255/.16);color:#FFFFFF}
[data-rail="collapsed"] #spaces-menu-open svg,[data-rail="collapsed"] .new-chat svg{width:20px;height:20px;stroke-width:2}

/* ---- A meeting's record: notes and transcript ---- */
/* Notes are the categories and their items, nothing else. */
#meeting-notes ul{margin:4px 0 10px;padding-left:20px}
#meeting-notes li{margin:5px 0;line-height:1.5}
.note-meta{display:block;font-size:12px;color:var(--text-3)}
/* Side by side on a wide screen; on a phone, two tabs with the notes first. */
.detail-tabs{display:none}
@media (max-width:760px){
 .detail-tabs{display:flex;gap:4px;width:max-content;margin:14px 0 10px;padding:4px;border-radius:999px;background:var(--surface-2)}
 .detail-tabs button{padding:7px 18px;border:0;border-radius:999px;background:none;color:var(--text-2);font-size:13.5px;font-weight:600}
 .detail-tabs button[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgb(0 0 0/.12)}
 .meeting-detail .detail-grid{display:block}
 .meeting-detail:not([data-tab="transcript"]) .detail-transcript,.meeting-detail[data-tab="transcript"] .detail-notes{display:none}
 /* The tab already names the pane. */
 #meeting-notes h3,.detail-transcript .transcript-head h3{display:none}
 #meeting-notes h4:first-of-type{margin-top:2px}
 .transcript-head input{width:100%}
 .transcript{max-height:none}
 /* Time and speaker on one line, the words beneath at full width. */
 .transcript li{grid-template-columns:auto minmax(0,1fr);row-gap:2px;padding:8px 8px}
 .transcript li>span{grid-column:1/-1}
}
/* Grips on the right: headings and cards start at the rail's left edge and the Rooms follow them in.
   A card is heading | menu | grip on its first row, its Rooms beneath across the full width. */
.rail-section-head .section-grip,.direct-head .section-grip{order:9}
html:not([data-rail="collapsed"]) #space-list>.space-group{grid-template-columns:minmax(0,1fr) auto auto}
html:not([data-rail="collapsed"]) #space-list>.space-group>.space-head{grid-column:1;grid-row:1;padding-left:4px}
html:not([data-rail="collapsed"]) #space-list>.space-group>.space-settings{grid-column:2;grid-row:1}
html:not([data-rail="collapsed"]) #space-list>.space-group>.section-grip{grid-column:3;grid-row:1}
html:not([data-rail="collapsed"]) #space-list>.space-group>.rail-rooms{padding-left:22px}
.rail-section-head,.direct-head{padding-left:4px}

/* ---- Reactions: drawn, a little larger ---- */
.reaction-glyph{display:grid;place-items:center;flex:0 0 auto;transition:transform .12s ease}
.reaction-glyph svg{stroke:none}
.reaction-picker{gap:2px}
.reaction-picker button{display:grid;place-items:center;padding:4px 5px}
.message-tools .reaction-picker .reaction-glyph svg{width:26px;height:26px}
.reaction-picker button:hover:not(:disabled) .reaction-glyph{transform:scale(1.18) translateY(-1px)}
.message-reactions button{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 6px;font-size:12.5px;font-weight:600}
.message-reactions .reaction-glyph svg{width:18px;height:18px}
@media (prefers-reduced-motion: reduce){.reaction-glyph{transition:none}.reaction-picker button:hover:not(:disabled) .reaction-glyph{transform:none}}

/* ---- A finished meeting's card: notes in place, transcript, link; spinners while they are produced ---- */
.meeting-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.meeting-card-open{display:inline-flex;align-items:center;gap:7px}
.meeting-card-notes{font-weight:600}
.meeting-card-notes .chev{width:15px;height:15px;transition:transform .15s ease}
.meeting-card-notes[aria-expanded="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
.meeting-card-notes[aria-expanded="true"] .chev{transform:rotate(180deg)}
.meeting-card-copy{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:9px;background:none;color:var(--text-3)}
.meeting-card-copy:hover:not(:disabled){background:var(--surface-2);color:var(--text)}
.meeting-card-copy svg{width:18px;height:18px}
.meeting-card-copy .done,.meeting-card-copy[data-copied="true"] .copy{display:none}
.meeting-card-copy[data-copied="true"] .done{display:block;color:var(--accent-ink)}
.spinner{flex:0 0 auto;width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:2px solid color-mix(in oklab,var(--accent) 22%,transparent);
  border-top-color:var(--accent);animation:record-spin .8s linear infinite}
@keyframes record-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spinner{animation-duration:2.4s}}
.meeting-card-notes-panel{margin-top:12px;padding-top:6px;border-top:1px solid var(--line-soft)}
.meeting-card-notes-panel h4{margin:10px 0 4px;font-size:13px}
.meeting-card-notes-panel ul{margin:2px 0 8px;padding-left:20px}
.meeting-card-notes-panel li{margin:4px 0;line-height:1.5}
/* The notes post, folded into its card: no space of its own; mentions.js counts it seen when its card is. */
#messages li.notes-folded{height:1px;min-height:0;margin-top:calc(-1 * var(--timeline-gap));padding:0;overflow:hidden;opacity:0;pointer-events:none}
/* The record takes the card's full width under its sentence (the card is a wrapping row). */
.meeting-card-record{flex:1 1 100%;min-width:0}
.meeting-card-record .meeting-card-actions{margin-top:2px}
.meeting-card-notes[aria-disabled="true"]{cursor:default}
/* The notes' bullets are list items inside the chat list: they are not message rows. */
#messages .meeting-card-notes-panel li{display:list-item;position:static;max-width:none;grid-template-columns:none;column-gap:0;align-self:auto;font-size:13.5px}

/* ---- The meeting card, sleeker ---- */
/* Meeting cards are not messages: flush left at one width whoever wrote them, no avatar column. */
#messages li[data-kind="meeting_lifecycle"]{grid-template-columns:minmax(0,1fr);align-self:flex-start;width:100%;max-width:min(640px,100%)}
#messages li[data-kind="meeting_lifecycle"] .message-avatar{display:none}
#messages li[data-kind="meeting_lifecycle"]>.meeting-card{grid-column:1}
/* The link sits in the title row, between the title and the time. */
.meeting-card-head{align-items:center}
.meeting-card-head .meeting-card-copy{width:26px;height:26px;border-radius:7px;margin:0 -2px}
.meeting-card-head .meeting-card-copy svg{width:16px;height:16px}
.meeting-card-record .meeting-card-actions{margin-top:0}
/* Bolder progress, and a green check once each part is ready. */
.spinner{width:16px;height:16px;border-width:3px;border-color:color-mix(in oklab,var(--accent) 28%,transparent);border-top-color:var(--accent)}
.ready-check{flex:0 0 auto;width:17px;height:17px;fill:#16A34A;stroke:none}
.ready-check path{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* ---- A meeting in the conversation: its start is one line, its end is the notes message ---- */
#messages li[data-kind="meeting_marker"]{display:block;align-self:stretch;max-width:100%;padding-left:42px}
.meeting-marker{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12.5px;color:var(--text-3)}
.meeting-marker strong{color:var(--text);font-weight:650}
.meeting-marker-cam{width:16px;height:16px;color:var(--accent);flex:0 0 auto}
.live-dot{width:7px;height:7px;border-radius:50%;background:#DC2626;box-shadow:0 0 0 3px rgb(220 38 38/.2);animation:live-pulse 1.6s ease-in-out infinite}
@keyframes live-pulse{50%{box-shadow:0 0 0 5px rgb(220 38 38/.08)}}
@media (prefers-reduced-motion: reduce){.live-dot{animation:none}}
.meeting-marker-join{margin-left:4px;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:650;background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
#messages li[data-kind="meeting_record"]{max-width:min(600px,100%)}
.meeting-avatar{background:var(--accent)!important;color:var(--on-accent)!important;display:grid;place-items:center}
.meeting-avatar::before{content:none}
.meeting-avatar svg{width:16px;height:16px}
.meeting-record{background:var(--surface);border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:8px 13px 10px;font-size:13.5px;min-width:0}
.meeting-record-top{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2)}
.meeting-record-gap{flex:1}
.meeting-record-status{font-weight:600;color:var(--text)}
.meeting-record-line{margin:4px 0 0;color:var(--text-2);font-size:13px}
.meeting-record-preview{color:var(--text);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meeting-record-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.link-btn{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:var(--accent-ink);font-size:12.5px;font-weight:650;cursor:pointer}
.link-btn:hover{text-decoration:underline}
.link-btn svg{width:13px;height:13px}
.meeting-record .meeting-card-notes-panel{margin-top:8px}
.meeting-record-top .meeting-card-copy{width:26px;height:26px;border-radius:7px}
.meeting-record-top .meeting-card-copy svg{width:15px;height:15px}
.meeting-marker-time{white-space:nowrap}
/* The notes' summary row is their toggle. */
.meeting-record-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:8px;margin:-4px 0 -4px -6px;padding:4px 6px;border:0;border-radius:8px;
  background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.meeting-record-toggle:hover:not(:disabled){background:var(--surface-2)}
.meeting-record-toggle:disabled{cursor:default;opacity:1}
.meeting-record-toggle .chev{width:15px;height:15px;color:var(--text-3);transition:transform .15s ease}
.meeting-record-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.meeting-record-people{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A mention is its own colour, not the theme's: on a rail painted in the accent, an accent dot vanishes.
   Rose reads against every palette; folded, the dot is ringed in the rail so it stands off the Room's circle. */
.mention-badge{background:#E11D48;color:#FFFFFF}
[data-rail="collapsed"] .mention-badge{width:10px;height:10px;top:5px;right:4px;background:#E11D48;box-shadow:0 0 0 2px var(--accent)}
.space-avatar::before{content:attr(data-initial)}
/* A Room's own Settings is about the Room: its name, leaving, archiving. People are added and removed from
   the People button in its header. Space settings > Rooms keeps the full list, where there is no header. */
#room-view-slot #room-people-search,#room-view-slot .people-label,#room-view-slot #room-people,#room-view-slot #more-people{display:none!important}
/* When the Room's Settings starts with Leave (someone who cannot rename it), no rule or gap sits above it. */
#room-view-slot #room-admin:has(#rename-room[hidden]) #more-people+.danger-row{border-top:0;margin-top:0;padding-top:0}

/* ---- A Room's own Settings: name, meetings, notes instructions, leave, archive ---- */
/* The meeting and instructions rows belong to the open Room's Settings only; Space settings > Rooms keeps its list. */
.room-setting{display:none}
#room-view-slot #room-meeting-settings,#room-view-slot #notes-instructions:not([hidden]){display:block}
#room-view-slot #notes-instructions-row{display:flex}
#room-view-slot .settings-card{padding:6px 20px 18px}
#room-view-slot #rename-room{display:flex;align-items:center;gap:10px;margin:0 0 4px}
#room-view-slot #rename-room label{font-family:inherit;font-size:13.5px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none;color:var(--text);flex:0 0 auto;min-width:0}
#room-view-slot #rename-room input{flex:1 1 auto;min-width:0;padding:8px 11px;font-size:14px}
#room-view-slot #rename-room button,#room-view-slot .setting-row>button,#room-view-slot .danger-row button{padding:7px 16px;border-radius:9px;font-size:13px;font-weight:600;white-space:nowrap}
.setting-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line-soft)}
.setting-row>div{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.setting-row strong{font-size:13.5px;font-weight:600}
.setting-row .muted{font-size:12.5px}
#room-meeting-settings{margin-top:14px}
.setting-note{margin:-4px 0 4px;font-size:12px;color:var(--text-3)}
#room-view-slot .danger-row{margin-top:0;padding:14px 0}
#room-view-slot .danger-row .archive{color:var(--text)}
#room-view-slot #archive-room{color:var(--danger);border-color:color-mix(in oklab,var(--danger) 40%,var(--line))}
#notes-instructions{padding:0 0 14px}
#notes-instructions label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:6px}
#notes-instructions textarea{width:100%;box-sizing:border-box;resize:vertical;font:12.5px/1.55 var(--mono);color:var(--text-2);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
/* A switch: the track carries the state, the knob slides. Disabled switches still show where they stand. */
.switch{position:relative;flex:0 0 40px;width:40px;height:23px;padding:0;border:0;border-radius:999px;background:#D6D2CB;cursor:pointer}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 2px rgb(0 0 0/.25);transition:left .15s ease}
.switch[aria-checked="true"]{background:var(--accent)}
.switch[aria-checked="true"]::after{left:20px}
.switch:disabled{cursor:not-allowed;opacity:.55}
#room-view-slot #room-admin{padding-top:16px} /* The card starts at its first row. */

/* ---- A Room's own Settings, lean: its name, a Meetings card, a Room card ---- */
#room-view-slot.settings-card{background:none;border:0;box-shadow:none;padding:0;max-width:600px}
#room-view-slot #room-admin{display:flex;flex-direction:column;gap:18px;padding-top:0}
#room-view-slot #room-settings-head{display:flex}
.room-settings-head{align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.room-settings-head .room-head-glyph{width:40px;height:40px}
.room-settings-head strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--serif);font-size:20px;font-weight:600}
.icon-btn{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:none;color:var(--text-3)}
.icon-btn:hover:not(:disabled){background:var(--surface-2);color:var(--text)}
.icon-btn svg{width:16px;height:16px}
#room-view-slot #room-admin:has(#rename-room[hidden]) #room-settings-rename{display:none}
#room-view-slot #room-admin:not([data-renaming]) #rename-room{display:none!important}
#room-view-slot #rename-room{margin:-8px 0 0;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
#room-view-slot #rename-room label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.group-label{display:none}
#room-view-slot .group-label{display:block;margin:0 4px 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
#room-view-slot #room-meeting-settings{margin:0}
#room-view-slot .group-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
#room-view-slot .group-row,#room-view-slot .group-card>.danger-row{display:flex;align-items:center;gap:12px;margin:0;padding:12px 16px;border-top:1px solid var(--line-soft)}
#room-view-slot .group-card>:first-child{border-top:0}
#room-view-slot .group-row strong,#room-view-slot .group-card>.danger-row strong{flex:1;font-size:14px;font-weight:600}
#room-view-slot .group-card>.danger-row .muted{display:none}
#room-view-slot .group-card>.danger-row:has(>button[hidden]){display:none}
#room-view-slot .group-card>.danger-row:has(>button[hidden])+.danger-row{border-top:0}
#room-view-slot #room-danger-group:not(:has(.danger-row>button:not([hidden]))){display:none}
.row-link{padding:4px 0;border:0;background:none;color:var(--accent-ink);font-size:13px;font-weight:650}
.row-link[aria-expanded="false"]::after{content:" \203A"}
#room-view-slot #notes-instructions{padding:0 16px 14px}
/* The panel is a card elsewhere; as a Room's own Settings its sections are the cards. */
#room-view-slot #room-admin{border:0;border-radius:0;background:none;padding:0}
#room-view-slot #notes-instructions textarea{font:13px/1.55 inherit;font-family:inherit;color:var(--text-2)}
/* Empty rows still take a gap in the column: the panel's own title and an empty status line go. */
#room-view-slot #room-admin>.section-head,#room-view-slot #room-admin-status:empty{display:none}
#room-view-slot #rename-room{flex:0 0 auto;flex-wrap:nowrap} /* .tool-row's 260px basis is a width in a row, a height in this column. */

/* ---- New Room: who is in it, and as what ---- */
.role-choice{margin-top:8px}
.pick-person{display:inline-flex;align-items:center}
.pick-person .chip[aria-pressed="true"]{border-top-right-radius:0;border-bottom-right-radius:0}
.role-toggle{margin-left:-1px;padding:5px 10px;border:1px solid var(--accent-line);border-radius:0 999px 999px 0;background:var(--surface);
  color:var(--accent-ink);font-size:12px;font-weight:650;line-height:1.2;cursor:pointer}
.role-toggle[data-role="admin"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* The role pill is the same height as its chip, so the two read as one control. */
.pick-person .chip,.role-toggle{box-sizing:border-box;height:30px;display:inline-flex;align-items:center}

/* ---- New Room, lean: a name card, a People card, then Create Room ---- */
#view-create-room .create-room-card{width:min(100%,560px)}
#view-create-room #new-room-form{gap:18px}
#view-create-room #new-room-form #new-room-name{padding:15px 16px;font-size:17px;font-weight:600;border-radius:14px}
#view-create-room #new-room-form #new-room-name::placeholder{font-weight:500}
#view-create-room .who-block{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;overflow:hidden}
#view-create-room .who-block legend{float:left;width:100%;margin:0 0 10px;padding:0 4px;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--text-3)}
#view-create-room .who-block legend+*{clear:both}
/* Two-way switches: a soft track, the chosen side lifted. The radios stay for keyboards and readers. */
#view-create-room #new-room-form .segmented{display:flex;flex-direction:row;flex-wrap:nowrap;gap:2px;margin:0;padding:3px;border-radius:11px;background:var(--surface-2)}
#view-create-room #new-room-form .segmented label{position:relative;flex:1 1 0;justify-content:center;width:auto;padding:8px 12px;border:0;border-radius:9px;
  background:none;color:var(--text-2)!important;font-size:13.5px!important;font-weight:600;white-space:nowrap;cursor:pointer}
#view-create-room #new-room-form .segmented input{position:absolute;opacity:0;pointer-events:none}
#view-create-room #new-room-form .segmented label:has(input:checked){background:color-mix(in oklab,var(--accent) 16%,var(--surface));color:var(--accent-ink)!important;font-weight:750!important;box-shadow:inset 0 0 0 1.5px var(--accent),0 1px 3px rgba(0,0,0,.10)}
#view-create-room #new-room-form .segmented label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:1px}
#view-create-room .role-choice{display:flex;align-items:center;gap:12px;margin:10px 0 0;padding:4px 4px 0}
#view-create-room .role-choice[hidden]{display:none}
#view-create-room .role-choice-label{flex:1;font-size:14px;font-weight:600}
#view-create-room .role-choice .segmented{flex:0 0 auto;min-width:210px}
/* Picked people: one row each, tap to add; a picked row gets a check and its role. */
#view-create-room .chip-picker{display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;margin:8px -12px -12px;max-height:340px}
#view-create-room .chip-picker[hidden]{display:none}
#view-create-room .pick-person{display:flex;align-items:center;gap:10px;padding:0 16px 0 0;border-top:1px solid var(--line-soft)}
#view-create-room .pick-person .chip{flex:1 1 auto;min-width:0;display:flex!important;align-items:center;gap:12px;height:auto!important;padding:10px 0 10px 14px!important;
  border:0!important;border-radius:0!important;background:none!important;color:var(--text)!important;font-size:14px!important;font-weight:600;text-align:left}
#view-create-room .pick-person .chip::before{content:attr(data-initial);flex:0 0 32px;height:32px;display:grid;place-items:center;border-radius:50%;
  background:color-mix(in oklab,var(--tone,var(--accent)) 16%,var(--surface));color:var(--tone,var(--accent-ink));font-size:12px;font-weight:700}
#view-create-room .pick-person .chip::after{content:"";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;border:2px solid var(--line);box-sizing:border-box}
#view-create-room .pick-person .chip[aria-pressed="true"]::after{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
#view-create-room .pick-person:hover{background:var(--surface-2)}
#view-create-room .pick-person{position:relative;padding:0}
#view-create-room .pick-person .chip{padding-right:52px!important}
#view-create-room .pick-person:has(.role-toggle) .chip{padding-right:128px!important}
#view-create-room .pick-person .role-toggle{position:absolute;right:48px;top:50%;transform:translateY(-50%);margin:0;height:28px;min-width:70px;padding:0 12px;border-radius:999px;font-size:12px;border:1px solid var(--accent-line)}
/* Actions: Create Room leads; Cancel is a quiet word beside it. */
#view-create-room .form-actions{gap:6px}
#view-create-room #new-room-form .form-actions button[type="submit"]{padding:11px 22px;border-radius:12px;font-weight:650}
#view-create-room #new-room-cancel{background:none!important;border:0!important;color:var(--text-2)}
#view-create-room #new-room-cancel:hover{color:var(--text)}
@media (max-width:640px){
  #view-create-room .role-choice .segmented{min-width:0;flex:1 1 auto}
  #view-create-room .form-actions button[type="submit"]{flex:1 1 auto;justify-content:center}
}

/* ---- New Room: the same Meetings card as a Room's Settings ---- */
#view-create-room .group-label{display:block;margin:0 4px 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
#view-create-room .group-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
#view-create-room .group-row{display:flex;align-items:center;gap:12px;margin:0;padding:12px 16px;border-top:1px solid var(--line-soft)}
#view-create-room .group-card>:first-child{border-top:0}
#view-create-room .group-row strong{flex:1;font-size:14px;font-weight:600}
#view-create-room #new-room-form .group-row button{display:grid;padding:0;border-radius:999px}
#view-create-room #new-room-form .group-row .row-link{display:inline-flex;padding:4px 0;border-radius:0;background:none;color:var(--accent-ink)}
#view-create-room .instructions-box{padding:0 16px 14px}
#view-create-room .instructions-box textarea{width:100%;box-sizing:border-box;resize:vertical;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);color:var(--text-2);font-family:inherit;font-size:13px;line-height:1.55}

.recording-warning{padding:.6rem .8rem;border:2px solid #a65300;border-radius:.3rem;color:#603000;font-weight:600;background:#fff0d0}
#meeting-capture-warning{flex:0 0 auto;margin:0;border-radius:0}
html[data-meeting="joined"][data-side] .conversation:has(>#meeting-capture-warning:not([hidden])){grid-template-rows:auto auto minmax(0,1fr);--meeting-content-row:3}
html[data-meeting="joined"][data-side] .conversation>#meeting-capture-warning{grid-column:1/-1;grid-row:2}

/* ---- A Room's icon, chosen in its Settings ---- */
.room-icon-edit{position:relative;flex:0 0 auto;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.room-icon-edit:disabled{cursor:default}
/* A small pencil on the icon says it can be changed; without the right to, there is none. */
.room-icon-edit:not(:disabled)::after{content:"";position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;box-sizing:border-box;border:1px solid var(--line);
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17z'/%3E%3C/svg%3E") center/11px no-repeat}
.room-icon-edit:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.icon-picker[hidden]{display:none!important}
#room-view-slot .icon-picker{display:flex;flex-direction:column;gap:12px;margin:-8px 0 0;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.icon-marks,.icon-tones{display:flex;flex-wrap:wrap;gap:8px}
.icon-choice{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--tone);color:#FFFFFF;cursor:pointer}
.icon-choice svg{width:21px;height:21px}
.tone-choice{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:var(--tone);cursor:pointer}
.icon-choice[aria-pressed="true"],.tone-choice[aria-pressed="true"]{outline:2.5px solid var(--text);outline-offset:2px}
.icon-status{margin:0;font-size:12.5px;color:var(--text-3)}
.icon-status:empty{display:none}
.icon-choice[aria-pressed="true"],.tone-choice[aria-pressed="true"]{background:var(--tone)!important;color:#FFFFFF!important}

/* ---- Workspace and Space settings: a head card over segmented tabs, lists as cards ---- */
#view-setup,#view-workspace{display:block;overflow-y:auto;padding:0 max(16px,calc((100% - 760px)/2)) 48px;background:var(--bg)}
#view-setup .settings-pane,#view-workspace .settings-pane{display:flex;flex-direction:column;gap:14px;padding:14px 0 0;background:none;border:0;overflow:visible}
#view-setup .pane-back,#view-workspace .pane-back{width:auto;align-self:flex-start;margin-left:-8px}
#view-setup .pane-subject,#view-workspace .pane-subject{gap:14px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
#view-setup .pane-subject .room-head-glyph,#view-workspace .pane-subject .room-head-glyph{width:46px;height:46px;border-radius:13px!important;font-size:16px;font-weight:800;letter-spacing:.02em}
#view-setup .pane-subject-text,#view-workspace .pane-subject-text{flex-direction:column-reverse;gap:2px}
#view-setup .pane-subject-name,#view-workspace .pane-subject-name{font-family:var(--serif);font-size:22px;font-weight:600}
#view-setup .pane-subject-kind,#view-workspace .pane-subject-kind{font-family:inherit;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
#view-setup .pane-nav,#view-workspace .pane-nav{flex-direction:row;flex-wrap:nowrap;gap:2px;padding:3px;border-radius:12px;background:var(--surface-2)}
#view-setup .pane-item,#view-workspace .pane-item{flex:1 1 0;width:auto;text-align:center;padding:8px 10px;border-radius:9px!important;font-weight:600}
#view-setup .pane-item[hidden],#view-workspace .pane-item[hidden]{display:none}
#view-setup .pane-item[aria-current="true"],#view-workspace .pane-item[aria-current="true"]{background:color-mix(in oklab,var(--accent) 16%,var(--surface))!important;color:var(--accent-ink)!important;font-weight:750;box-shadow:inset 0 0 0 1.5px var(--accent)}
#view-setup .settings-body,#view-workspace .settings-body{padding:18px 0 0;overflow:visible}
/* The tab names the section, so its own heading goes; a head that carries a button (New Space) stays. */
#view-setup .settings-section>.section-head .section-title,#view-workspace .settings-section>.section-head .section-title{display:none}
#view-setup .settings-section>.section-head:not(:has(.section-head-slot)),#view-workspace .settings-section>.section-head:not(:has(.section-head-slot)){display:none}
#view-workspace .settings-section>.section-head{display:flex;justify-content:flex-end;margin:0 0 10px}
#view-setup #space-team.card{border:0;background:none;box-shadow:none;padding:0}
#view-setup #space-team .table-head{display:none}
/* Lists are cards of rows. */
#view-setup .managed-list:not(:empty),#view-workspace .managed-list:not(:empty),#view-setup #space-members:not(:empty),#view-workspace #workspace-people-rows:not(:empty){
  background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
#view-setup #space-members>p,#view-workspace .workspace-rows>div{padding-left:14px;padding-right:14px}
.managed-row{display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:12px 16px!important;border:0!important;border-top:1px solid var(--line-soft)!important;border-radius:0!important;
  background:none!important;color:var(--text)!important;text-align:left;cursor:pointer}
.managed-row:first-child{border-top:0!important}
.managed-row:hover{background:var(--surface-2)!important}
.managed-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.managed-text strong{font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.managed-text small{font-size:12.5px;color:var(--text-3)}
.managed-role{font-size:12.5px;font-weight:600;color:var(--text-3);white-space:nowrap}
.managed-go{color:var(--text-3);font-size:20px;line-height:1;padding-left:2px}
.managed-mark[data-kind="space"]{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px!important;background:var(--tone)!important;color:#FFFFFF!important;font-size:12px;font-weight:800}
.managed-mark[data-kind="space"]::before{content:attr(data-initial)}
.archived-toggle{display:inline-flex;align-items:center;gap:6px;margin:10px 4px 0;padding:4px 2px!important;border:0!important;background:none!important;color:var(--text-3)!important;font-size:13px;font-weight:600}
.archived-toggle::after{content:"\203A";font-size:16px}
.archived-toggle[aria-expanded="true"]::after{content:"\2039"}
#space-rooms-archived-rows:not([hidden]),#workspace-spaces-archived-rows:not([hidden]){margin-top:8px}
/* One pill per person: their role, and the way to change it. */
.role-pill{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:84px;height:28px;padding:0 12px!important;border-radius:999px!important;border:1.5px solid var(--line)!important;
  background:var(--surface)!important;color:var(--text)!important;font-size:12.5px!important;font-weight:700;white-space:nowrap;justify-self:start;text-transform:none}
.role-pill[data-role="owner"]{background:var(--accent)!important;border-color:var(--accent)!important;color:#FFFFFF!important}
.role-pill[data-role="admin"]{background:var(--accent-soft)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important}
button.role-pill{cursor:pointer}
button.role-pill::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg)}
/* Who in the Workspace is not here yet. */
.missing-card{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:14px 16px;border-radius:14px;background:var(--accent-soft);border:1.5px dashed color-mix(in oklab,var(--accent) 45%,transparent)}
.missing-card[hidden]{display:none}
.face-stack{display:inline-flex;flex:0 0 auto}
.face-stack .member-avatar{width:30px;height:30px;margin-left:-9px;box-shadow:0 0 0 2.5px var(--surface);font-size:11px}
.face-stack .member-avatar:first-child{margin-left:0}
.missing-text{flex:1;min-width:0;display:flex;flex-direction:column}
.missing-text strong{font-size:14px;font-weight:700}
.missing-text span{font-size:12.5px}
#space-missing-all{padding:7px 14px;border-radius:10px;white-space:nowrap}
/* New people, and who is waiting because the Space is full. */
#view-setup .settings-group{margin-top:20px}
#view-setup .settings-group[hidden]{display:none}
#view-setup .group-label{display:block;margin:0 4px 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
#view-setup .group-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
#view-setup .group-row{display:flex;align-items:center;gap:12px;padding:12px 16px}
.group-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.group-row-text strong{font-size:14px;font-weight:600}
.group-row-text .muted{font-size:12.5px}
.waiting-card{margin-top:10px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.waiting-card[hidden]{display:none}
.waiting-head{display:flex;align-items:center;gap:10px;padding:11px 16px;background:color-mix(in oklab,#F5A524 16%,var(--surface));color:color-mix(in oklab,#8A5A00 80%,var(--text));font-size:12.5px}
.waiting-head strong{flex:1;font-size:13.5px}
.waiting-row{display:flex;align-items:center;gap:12px;padding:9px 16px;border-top:1px solid var(--line-soft)}
.waiting-row strong{flex:1;font-size:13.5px;font-weight:600}
.waiting-row .member-avatar{width:28px;height:28px;font-size:11px}
.waiting-row .muted{font-size:12px}
.waiting-notice{background:color-mix(in oklab,#F5A524 14%,var(--surface));border-radius:10px;padding:8px 10px}
/* A Room's meetings: notes follow recording; instructions are the Room's own, saved on their own. */
#meeting-notes-row[data-off="true"] strong,.new-room-meetings .group-row:has(#new-room-notes:disabled) strong{color:var(--text-3)}
.group-note{margin:8px 4px 0;font-size:12.5px;color:var(--text-3)}
.instructions-foot{display:flex;align-items:center;gap:10px;margin-top:8px}
.instructions-foot .muted{flex:1;font-size:12px}
#notes-instructions textarea:not([readonly]),#new-room-instructions textarea{background:var(--surface);color:var(--text)}
#notes-instructions-save{padding:7px 16px;border-radius:9px}
@media (max-width:640px){
  #view-setup .pane-item,#view-workspace .pane-item{padding:7px 6px;font-size:13px}
  .missing-card{flex-wrap:wrap}
  .managed-role{display:none}
}
.managed-row .row-glyph{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--tone);color:#FFFFFF;display:grid;place-items:center}
.managed-row .row-glyph svg{width:19px;height:19px}
@media (max-width:640px){
  #view-setup #space-members>p{grid-template-columns:12px 34px minmax(0,1fr) auto auto!important;gap:10px}
  #view-setup #space-members>p .role-pill{min-width:0}
  .missing-card>.row-link{margin-left:auto}
}

/* A member's Workspace page: the people, read-only, then Leave. No tabs, no details to manage. */
#view-workspace[data-mode="member"] .pane-nav{display:none}
#view-workspace[data-mode="member"] .settings-body{display:flex;flex-direction:column}
#view-workspace[data-mode="member"][data-section="people"] #workspace-section-details{display:block!important;order:2;margin-top:18px}
#view-workspace[data-mode="member"] #workspace-section-details>:not(.danger-row){display:none}
/* The Spaces heading's handle is for those who manage Spaces or may make one; otherwise it is only the section's mark. */
html[data-spaces-manage="false"]:not([data-rail="collapsed"]) #spaces-menu-open{display:none}
html[data-spaces-manage="false"][data-rail="collapsed"] #spaces-menu-open{pointer-events:none}

/* Breathing room by meaning, not one even gap: a meeting (its start line and its notes) reads as one
   unit with space around it; the notes sit close under the line they belong to. Different speakers get
   the timeline gap; one person's run stays close. The first meeting after a day line needs no extra. */
#messages li[data-kind="meeting_marker"]:not(:first-child):not([data-day]){margin-top:12px}
#messages li[data-kind="meeting_marker"]+li[data-kind="meeting_record"]{margin-top:-8px}
#messages li[data-kind="meeting_record"]+li:not([data-kind="meeting_marker"]):not([data-day]){margin-top:12px}
@media (max-width:760px){#messages{--timeline-gap:16px}}

/* ---- Another tab of this browser is the live one: this tab pauses behind a quiet card ---- */
.elsewhere{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(2px)}
.elsewhere-card{display:flex;flex-direction:column;gap:10px;max-width:380px;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgb(0 0 0/.12);text-align:left}
.elsewhere-card strong{font-family:var(--serif);font-size:19px;font-weight:600}
.elsewhere-card p{margin:0;color:var(--text-2);font-size:14px;line-height:1.5}
.elsewhere-card button{align-self:flex-start;margin-top:4px}

/* An agent's answer: Markdown drawn in the chat's own type, folded like meeting notes when long. */
#messages li[data-answer]{max-width:min(860px,100%)}
.agent-answer{white-space:normal}
.agent-answer-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.agent-answer-body>*,.agent-answer-body p,.agent-answer-body ul,.agent-answer-body ol,.agent-answer-body blockquote{margin:0}
.agent-answer-body[data-clipped]{max-height:12.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
/* One voice inside an answer: the chat's sans at the chat's size. Headings are section labels, not
   titles, so they stay in the same face one step heavier; emphasis is one step heavier again, never
   a second typeface or a second scale. */
.agent-answer h3,.agent-answer h4,.agent-answer h5{margin:10px 0 -2px;font-family:inherit;font-weight:650;line-height:1.35;color:var(--text);text-wrap:balance}
.agent-answer h3{font-size:1.04em}.agent-answer h4{font-size:1em}.agent-answer h5{font-size:.95em;letter-spacing:.02em;text-transform:uppercase;color:var(--text-2)}
.agent-answer>.agent-answer-body>h3:first-child,.agent-answer>.agent-answer-body>h4:first-child{margin-top:0}
.agent-answer strong{font-weight:600}
/* A summary the model set in bold reads as one plain lead, not a shout. */
.agent-answer-body>p:first-child>strong:only-child{font-weight:inherit}
.agent-answer a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.agent-answer ul,.agent-answer ol{padding-left:22px;display:flex;flex-direction:column;gap:3px}
.agent-answer ul{list-style:disc}.agent-answer ul ul{list-style:circle}
#messages .agent-answer li{display:list-item;position:static;max-width:none;grid-template-columns:none;column-gap:0;align-self:auto;font-size:inherit;margin:0;padding:0}
.agent-answer li>ul,.agent-answer li>ol,.agent-answer li>p,.agent-answer li>.md-code,.agent-answer li>blockquote{margin-top:4px}
.agent-answer code{font-family:var(--mono);font-size:.86em;background:color-mix(in oklab,var(--text) 7%,transparent);border-radius:4px;padding:0 4px}
.agent-answer blockquote{padding:2px 0 2px 12px;border-left:3px solid var(--line);color:var(--text-2)}
.agent-answer hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.md-code{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden;min-width:0}
.md-code-top{display:flex;align-items:center;gap:8px;padding:5px 10px;border-bottom:1px solid var(--line-soft);font-size:12px;color:var(--text-3)}
.md-code-lang{flex:1;font-family:var(--mono)}
.md-code pre{margin:0;padding:10px 12px;overflow-x:auto;font:12.5px/1.55 var(--mono);white-space:pre;color:var(--text)}
.agent-answer .md-code code{background:none;padding:0;font-size:inherit;border-radius:0}
.md-table{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-width:0}
.md-table table{border-collapse:collapse;width:100%;font-size:.92em;font-variant-numeric:tabular-nums}
.md-table th{text-align:left;font-weight:650;color:var(--text);background:var(--surface-2);white-space:nowrap}
.md-table th,.md-table td{padding:6px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top;overflow-wrap:normal;word-break:normal;min-width:6.5em}
.md-table tr:last-child td{border-bottom:0}
.agent-answer-links{margin-top:10px}
/* The answer's header row: icon, title and size, the chevron at the end, as on a meeting's notes. */
.agent-answer-top{margin:-2px 0 8px;padding-bottom:6px;border-bottom:1px solid color-mix(in oklab,var(--text) 9%,transparent)}
.agent-answer-top .meeting-record-toggle{color:var(--text-3);font-size:12.5px}
.doc-icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--accent-ink)}
/* Diagrams: the drawing, with its source a click away. */
.md-diagram{margin:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0;overflow-x:auto}
.md-diagram img{display:block;max-width:100%;height:auto;margin:0 auto}
.md-diagram-source summary{cursor:pointer;font-size:12px;color:var(--text-3);width:max-content}
.md-diagram-source[open] summary{margin-bottom:6px}
/* A document in the chat: a card that opens the viewer. */
.doc-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:6px 12px;margin-top:6px;padding:10px 12px 10px 14px;
  border:1px solid var(--accent-line);border-radius:14px;background:var(--accent-soft);max-width:min(520px,100%)}
.doc-card-intro{grid-column:1/-1;padding-bottom:8px;margin-bottom:2px;border-bottom:1px solid var(--accent-line);font-size:var(--chat-font);line-height:var(--chat-line);color:var(--text)}
.doc-card:has(.doc-card-intro){max-width:min(640px,100%)}
.doc-card .doc-card-glyph{width:26px;height:26px;stroke-width:1.6}
.doc-card-text{display:flex;flex-direction:column;min-width:0}
.doc-card-text strong{font:600 15px/1.25 var(--serif);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-card-text span{font-size:12.5px;color:var(--text-2)}
.doc-card-download{font-size:12.5px;font-weight:650;color:var(--accent-ink);text-decoration:none}
.doc-card-download:hover{text-decoration:underline}
.doc-card[data-open] .doc-card-open{background:var(--surface);color:var(--text-2)}
/* The viewer docks beside the chat, the way the meeting side panel does. */
.doc-viewer{display:none}
@media (min-width:761px){
html[data-doc="open"] .conversation:has(#view-chat:not([hidden])){display:grid;grid-template-columns:minmax(380px,1fr) minmax(0,1.3fr);grid-template-rows:auto minmax(0,1fr)}
html[data-doc="open"] .conversation:has(#view-chat:not([hidden]))>:not(#view-chat):not(#doc-viewer){grid-column:1/-1}
html[data-doc="open"] .conversation:has(#view-chat:not([hidden]))>#view-chat{grid-column:1;grid-row:2;min-width:0}
html[data-doc="open"] .conversation:has(#view-chat:not([hidden])) #doc-viewer:not([hidden]){display:flex;grid-column:2;grid-row:2}
html[data-doc="open"] #messages li{max-width:94%}
}
.doc-viewer{flex-direction:column;min-width:0;min-height:0;border-left:1px solid var(--line);background:var(--bg)}
.doc-viewer-head{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
.doc-viewer-head>.doc-icon{width:20px;height:20px}
.doc-viewer-titles{flex:1;min-width:0;display:flex;flex-direction:column}
.doc-viewer-titles strong{font:600 17px/1.25 var(--serif);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-viewer-titles span{font-size:12px;color:var(--text-3)}
.doc-viewer-action{font-size:13px;font-weight:650;color:var(--accent-ink);text-decoration:none;padding:6px 8px;border-radius:8px}
.doc-viewer-action:hover{background:var(--surface-2)}
.doc-viewer-close{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:9px;background:none;color:var(--text-2);cursor:pointer}
.doc-viewer-close:hover{background:var(--surface-2);color:var(--text)}
.doc-viewer-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.doc-viewer-back{display:none}
.doc-viewer-body{flex:1;min-height:0;overflow:auto;padding:22px 28px 40px;font-size:var(--chat-font);line-height:var(--chat-line)}
.doc-viewer-body>.agent-answer-body{max-width:760px;margin:0 auto;gap:10px}
.doc-viewer-body h3{font-size:1.3em}.doc-viewer-body h4{font-size:1.1em}
.doc-viewer-note{color:var(--text-3)}
@media (max-width:760px){
  html[data-doc="open"] #doc-viewer:not([hidden]){display:flex;position:fixed;inset:0;z-index:60;border:0;padding-top:env(safe-area-inset-top,0px)}
  .doc-viewer-head{padding:8px 10px;gap:8px;flex-wrap:wrap}
  .doc-viewer-back{display:inline-flex}
  .doc-viewer-head>.doc-icon,.doc-viewer-close{display:none}
  .doc-viewer-titles{order:3;flex-basis:100%}
  .doc-viewer-body{padding:16px 16px 32px}
  .doc-card{grid-template-columns:auto minmax(0,1fr) auto}
  .doc-card-download{grid-column:2}
  .md-diagram img{max-width:none;margin:0}
}

/* Agents & integrations → Agents: a list of the Workspace's agents, and the same grouped cards as a
   Room's Settings for the one being edited. */
.agents-lede{max-width:64ch;margin:0 0 14px}
.agents-list{display:flex;flex-direction:column;gap:8px;max-width:640px}
.agent-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;align-items:center;gap:12px;width:100%;padding:12px 14px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);text-align:left;font:inherit}
button.agent-row{cursor:pointer}
button.agent-row:hover{border-color:var(--accent-line);background:color-mix(in oklab,var(--accent) 5%,var(--surface))}
.agent-glyph{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:700}
.agent-row-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.agent-row-text strong{font:600 16px/1.25 var(--serif)}
.agent-row-text .muted{font-size:12.5px}
.agent-state{font-size:12px;font-weight:650;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--text-3)}
.agent-state[data-on="true"]{background:var(--accent-soft);color:var(--accent-ink)}
.github-panel{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.github-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.repo-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.repo-row[data-off="true"]{opacity:.6}
.repo-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.repo-text strong{font:600 15px/1.25 var(--serif)}
.repo-agents{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px}
.repo-agents label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2)}
.repo-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.repo-actions .switch{flex:none} /* In a column, the switch's 40px basis became its height: a circle, not a switch. */
.repo-error{color:#b42318;font-size:12.5px}
.agent-row-go{font-size:12.5px;font-weight:650;color:var(--accent-ink)}
.agent-detail{display:flex;flex-direction:column;gap:16px;max-width:640px}
.agent-back{align-self:flex-start}
.agent-title{margin:0;font:600 22px/1.2 var(--serif)}
.agent-title:focus{outline:none}
#connect-agents .group-label{display:block;margin:0 4px 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
#connect-agents .group-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
#connect-agents .group-row{display:flex;align-items:center;gap:12px;margin:0;padding:12px 16px;border-top:1px solid var(--line-soft)}
#connect-agents .group-card>:first-child{border-top:0}
#connect-agents .group-row-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
#connect-agents .group-row-text strong{font-size:14px;font-weight:600}
#connect-agents .group-row-text .muted{font-size:12.5px;overflow-wrap:anywhere}
.agent-handle{display:inline-flex;align-items:center;gap:2px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text-2)}
.agent-handle input{width:14ch;padding:7px 0;border:0;background:none;font:inherit;color:var(--text)}
.agent-handle input:focus{outline:none}
.agent-handle:focus-within{border-color:var(--accent-line)}
.agent-handle:has(input[aria-invalid="true"]){border-color:var(--danger)}
.agent-skill-body,.agent-fixed{padding:0 16px 12px;font-size:13px;color:var(--text-2)}
.agent-skill-body summary,.agent-fixed summary{cursor:pointer;font-size:12.5px;color:var(--text-3);width:max-content}
.agent-fixed{padding-top:12px}
.agent-fixed p,.agent-skill-body p{margin:8px 0 0;line-height:1.5}
#agent-notes{display:block;width:100%;box-sizing:border-box;border:0;padding:12px 16px;background:none;font:13.5px/1.55 var(--sans);color:var(--text);resize:vertical;min-height:120px}
#agent-notes:focus{outline:none}
.agent-count{display:block;margin:6px 4px 0;font-size:12px;text-align:right}
.agent-count[data-over="true"]{color:var(--danger);font-weight:650}
.agent-actions{display:flex;gap:10px;flex-wrap:wrap}
.agent-status{margin:-6px 0 0;min-height:1.2em}
.agent-history summary{cursor:pointer;font-size:13px;color:var(--text-2)}
.agent-history ol{margin:8px 0 0;padding-left:20px;font-size:13px;color:var(--text-2)}
@media (max-width:600px){.agent-row{grid-template-columns:32px minmax(0,1fr) auto}.agent-row-go{display:none}.agent-handle input{width:100%}#connect-agents .group-row{flex-wrap:wrap}}

/* A question's agent line under it: who, what it is doing (or why it stopped), and Cancel for the asker. */
#messages li[data-kind="agent_activity"]{display:block;max-width:100%;padding-left:42px;margin-top:calc(-1 * var(--timeline-gap) + 6px)}
.agent-line{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 8px;padding:5px 12px;border-radius:999px;background:var(--surface-2);font-size:12.5px;color:var(--text-2);max-width:100%}
.agent-line strong{color:var(--accent-ink);font-weight:650}
.agent-line [role="status"]{min-width:0;overflow-wrap:anywhere}
.agent-line small{color:var(--text-3)}
.agent-line .spinner{width:12px;height:12px}
#messages li[data-state="failed"] .agent-line,#messages li[data-state="refused"] .agent-line{background:color-mix(in oklab,var(--danger) 10%,var(--surface))}
#messages li[data-state="cancelled"] .agent-line{opacity:.75}
.agent-cancel{font-size:12px}
/* People: the Workspace's agents, tagged rather than added. */
.people-agents{padding:4px 0 2px}
.people-agent{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px}
.people-agent .agent-glyph{width:28px;height:28px;font-size:12px}
.people-agent>span:nth-child(2){flex:1;font-weight:600}
.people-agent>span:nth-child(2) small{display:block;font-weight:400;font-size:11.5px;color:var(--text-3)}
/* Powered by: radio, label, then the model, each control only as wide as it needs. */
#connect-agents .agent-choice{cursor:pointer;flex-wrap:wrap}
#connect-agents .agent-choice .group-row-text{flex:1 1 180px}
#connect-agents .agent-choice input[type="radio"]{flex:none;width:auto;margin:0;padding:0;accent-color:var(--accent)}
#connect-agents .agent-choice select,#connect-agents .agent-model select,.agent-account-form select{flex:none;width:auto;min-width:150px}
.agent-account{flex-wrap:wrap}
.agent-account .group-row-text{flex:1;gap:6px}
.agent-account-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.agent-account-form input{flex:1 1 220px;min-width:0}
#connect-agents .agent-model{flex-wrap:wrap}
#connect-agents .agent-model .group-row-text{flex:1 1 180px}
.people-agents-hint{margin:2px 0 0;font-size:12px;color:var(--text-3)}
/* The @ picker marks agents. */
.mention-option.mention-agent small{color:var(--accent-ink)}
.mention-option:disabled{opacity:.55;cursor:default}

/* Phones: no rail. The menu button opens it as a drawer; its badge counts what is waiting (Dino, 2026-10-10). */
.menu-toggle,.needs-you,.drawer-backdrop{display:none}
.menu-badge{position:absolute;top:3px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#E11D48;color:#FFFFFF;box-shadow:0 0 0 1.5px var(--shell,#1E2A3A);font-size:10px;font-weight:700;line-height:16px;text-align:center;pointer-events:none}
.needs-you{padding:4px 8px 10px;margin-bottom:6px;border-bottom:1px solid var(--line-soft)}
.needs-you .sec-label{display:block;margin:6px 6px 4px}
.needs-you-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:8px 8px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.needs-you-row:hover{background:color-mix(in oklab,currentColor 10%,transparent)}
.needs-you-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.needs-you-row .mention-badge,.needs-you-row .unread-badge{position:static;flex:none}
@media (max-width:760px){
 .menu-toggle{display:inline-flex;position:relative}
 .topbar .brand{display:none}
 #workspace,html[data-view] #workspace{grid-template-columns:minmax(0,1fr)} /* A page view keeps the one column; its zero-width rail column is a wide-screen rule. */
 .conversation{grid-column:1}
 #room-rail{position:fixed;top:var(--topbar-h);bottom:0;left:0;width:min(86vw,320px);transform:translateX(-102%);transition:transform .2s ease;z-index:60;box-shadow:none}
 :root[data-drawer="open"] #room-rail{transform:none;box-shadow:8px 0 30px rgb(0 0 0/.25)}
 #rail-toggle{display:none}
 .drawer-backdrop:not([hidden]){display:block;position:fixed;inset:var(--topbar-h) 0 0 0;background:rgb(0 0 0/.35);z-index:55}
 .needs-you:not([hidden]){display:block;order:-1}
}

/* A message opened from a link is marked for a moment. */
#messages li[data-linked="true"] .message-text{box-shadow:0 0 0 2px var(--accent);transition:box-shadow .3s}

/* ---- Artifacts ---- */
.artifacts-scope .group-label{display:block;margin:0 4px 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.artifacts-scope .group-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.artifacts-scope .group-row{display:flex;align-items:center;gap:12px;margin:0;padding:11px 16px;border-top:1px solid var(--line-soft)}
.artifacts-scope .group-card>:first-child{border-top:0}
.artifacts-scope .group-row-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.artifacts-scope .group-row-text strong{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.artifacts-scope .group-row-text .muted{font-size:12.5px;overflow-wrap:anywhere}
.artifacts-scope .group-row :is(input:not([type="checkbox"]),select,textarea){box-sizing:border-box;width:min(320px,100%);padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font:inherit;font-size:13.5px;color:var(--text)}
.artifacts-scope .group-row textarea{width:min(420px,100%);resize:vertical}
.artifacts-scope .group-row input[type="number"]{width:120px}
.artifacts-scope .group-row input[type="time"]{width:120px}
.artifacts-scope .group-row input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent)}
.artifacts-scope .agent-count[data-over="true"]{color:var(--danger);font-weight:650}
#artifact-instructions{display:block;width:100%;box-sizing:border-box;border:0;padding:12px 16px;background:none;font:13.5px/1.55 var(--sans);color:var(--text);resize:vertical;min-height:120px}
#artifact-instructions:focus{outline:none}
.artifact-tools{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.artifact-archived{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--text-2)}
.artifact-category{margin:14px 4px 0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.artifact-subcategory{margin:2px 4px 0;font-size:13px;font-weight:600;color:var(--text-2)}
.artifact-row{grid-template-columns:36px minmax(0,1fr) auto}
.artifact-wait{font-size:12.5px;color:var(--accent-ink)}
p.artifact-wait{margin:0}
.artifact-state[data-tone="on"],.artifact-state[data-tone="run"]{background:var(--accent-soft);color:var(--accent-ink)}
.artifact-state[data-tone="warn"]{background:var(--danger-bg);color:var(--danger)}
.artifact-state[data-tone="run"]{box-shadow:inset 0 0 0 1px var(--accent-line)}
.artifact-detail,.artifact-editor{max-width:820px}
.artifact-detail>p,.artifact-editor>p{margin:0}
.artifact-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.artifact-actions{align-items:center}
.artifact-room{align-self:flex-start}
.artifact-pinned{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:9px 14px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);font-size:13px}
.artifact-doc{padding:20px 24px;border:1px solid var(--line);border-radius:14px;background:var(--surface);line-height:1.6;min-width:0}
.artifact-checks{list-style:none;margin:0;padding:12px 16px 6px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px}
.artifact-checks li::before{content:"\2713\00a0";color:var(--accent);font-weight:700}
.artifact-checks li[data-ok="false"]::before{content:"\2717\00a0";color:var(--danger)}
.artifact-checks-note{margin:0;padding:0 16px 12px;font-size:12.5px}
.artifact-runs{list-style:none;padding:0!important}
.artifact-run{padding:10px 0;border-top:1px solid var(--line-soft)}
.artifact-run-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.artifact-run p{margin:4px 0;color:var(--text)}
.artifact-hint{margin:0;padding:11px 16px 4px;font-size:12.5px}
.artifact-repo{align-items:flex-start}
.artifact-patterns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 16px 12px}
.artifact-patterns label{display:flex;flex-direction:column;gap:4px;font-size:12px}
.artifact-patterns textarea{box-sizing:border-box;width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font:12.5px/1.5 var(--mono);color:var(--text);resize:vertical}
@media (max-width:760px){
 .artifacts-scope .group-row{flex-wrap:wrap}
 .artifacts-scope .group-row :is(input:not([type="checkbox"]),select,textarea){width:100%}
 .artifact-patterns{grid-template-columns:minmax(0,1fr)}
 .artifact-doc{padding:14px 14px}
}
.skill-row{align-items:flex-start}
.skill-badge{margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:11px;font-weight:650;vertical-align:2px}
.skill-row .agent-skill-body{padding:4px 0 0}
.skill-archived{background:var(--surface-2);color:var(--text-3)}
.agents-new{align-self:flex-start;margin-bottom:4px}
#skill-body{display:block;width:100%;box-sizing:border-box;border:0;padding:12px 16px;background:none;font:13px/1.55 var(--mono);color:var(--text);resize:vertical;min-height:200px}
#skill-body:focus{outline:none}
.skill-row>button{align-self:center;flex:none}
.skill-editor{max-width:820px}