/* Room layout and component presentation. Shared colors live in viewer-theme.css. */
[hidden] { display:none!important; }
body { min-height:100dvh; display:flex; flex-direction:column; font-size:14px; }
a { color:var(--accent); text-underline-offset:3px; }
button,select,input { font:inherit; }
/* One header on every page: the room's, the editor tab's and each panel's.
   It never wraps; viewer-header.js folds actions into its ⋯ menu instead.
   Lift an open menu above the dock/sidebar (20), preserving the normal mobile
   dock order when closed and leaving full editor/artifact panels above it (30). */
/* --column is the conversation column's outer width; its blocks use it less
   the ledger's 24px gutters, while prose keeps its own reading measure. */
:root { --topbar-h:76px; --column:864px; }
.topbar:has(details[open]) { z-index:21; }
.topbar { display:flex; align-items:center; height:var(--topbar-h); min-height:0; padding:0 32px; gap:24px; border-bottom:2px solid var(--ink); flex-wrap:nowrap; background:var(--surface); overflow-x:clip; overflow-y:visible; }
.viewer-panel > .topbar { position:relative; top:auto; flex:none; z-index:11; }
.wordmark { flex:none; font:700 23px var(--font-mono); letter-spacing:-1.6px; color:var(--ink); text-transform:none; text-decoration:none; }
.room-heading { flex:1 1 auto; min-width:0; padding-left:24px; border-left:1px solid var(--line); }
.project-name { display:block; font-size:11px; line-height:1.5; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-name:empty { display:none; }
/* The small line names where the page is: the project, which opens the
   menu of places to go, then the room an open panel covers. */
.crumb { padding:0; border:0; background:none; font:inherit; color:var(--accent); cursor:pointer; text-decoration:none; }
.crumb:hover,.crumb:focus-visible { text-decoration:underline; text-underline-offset:2px; }
.crumb-sep { margin:0 .45em; color:var(--muted); }
.crumbs:not(:empty) + .head-meta:not(:empty)::before { content:'·'; margin:0 .45em; }
/* Back to the page's parent: first in the header, never folded. */
.back { flex:none; display:grid; place-items:center; width:36px; height:36px; margin-right:-12px; padding:0 0 3px; border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--ink); font:400 24px/1 var(--font-ui); cursor:pointer; text-decoration:none; }
.back:hover,.back:focus-visible { border-color:var(--accent); color:var(--accent); }
.nav-menu { min-width:14rem; }
.nav-menu-head { padding:.45rem .6rem .15rem; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.nav-menu-head:not(:first-child) { margin-top:.3rem; border-top:1px solid var(--line); padding-top:.55rem; }
.nav-menu .btn[aria-current="page"] { color:var(--accent); font-weight:600; }
#editing-saved:not(:empty)::before { content:' · '; color:var(--muted); }
#editing-saved[data-error="true"] { color:var(--failed); }
.room-heading h1,.heading-title { display:block; width:100%; margin:2px 0 0; font:600 17px/1.4 var(--font-ui); letter-spacing:-.025em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
input.heading-title { padding:0 4px; margin-left:-5px; border:1px solid transparent; border-radius:3px; background:transparent; }
input.heading-title:not([readonly]):hover { background:var(--surface-2); }
input.heading-title:focus { border-color:var(--accent); background:var(--surface); outline:none; }
input.heading-title[readonly] { cursor:default; }
.header-actions { margin-left:auto; display:flex; gap:10px; align-items:center; flex:none; }
.header-actions .btn { min-height:36px; padding:7px 12px; background:transparent; border:1px solid var(--line); font-size:12px; font-weight:500; border-radius:4px; filter:none; color:var(--ink); }
.header-actions .btn.danger { color:var(--failed); }
.header-actions .btn[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
/* The bell is an icon in the header and a labelled row in the ⋯ menu. */
.bell { display:inline-flex; align-items:center; gap:10px; min-height:36px; min-width:36px; padding:0 8px; background:transparent; border:1px solid var(--line); border-radius:4px; color:var(--muted); font-size:14px; filter:none; }
.bell svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bell.on { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.bell.on svg path:first-child { fill:currentColor; }
.bell.blocked { color:var(--muted); border-color:var(--line); }
.header-actions > .bell .bell-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.head-more { position:relative; flex:none; }
.head-more > summary { list-style:none; display:grid; place-items:center; min-width:36px; min-height:36px; border:1px solid var(--line); border-radius:4px; font-size:16px; line-height:1; cursor:pointer; }
.head-more > summary::-webkit-details-marker { display:none; }
.head-more[open] > summary { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.head-more-body { position:absolute; right:0; top:calc(100% + 10px); z-index:25; width:max-content; min-width:220px; max-width:calc(100vw - 24px); max-height:calc(100dvh - var(--topbar-h) - 24px); overflow-y:auto; display:grid; gap:2px; padding:6px; background:var(--surface); border:1px solid var(--rule-strong); border-radius:4px; box-shadow:var(--shadow); }
.head-more-body > .btn,.head-more-body > .bell,.head-more-body #appearance-menu > summary { display:flex; align-items:center; width:100%; min-height:40px; padding:8px 12px; border:0; border-radius:3px; background:transparent; color:var(--ink); font-size:14px; font-weight:400; text-align:left; }
.head-more-body > .btn:hover,.head-more-body > .bell:hover,.head-more-body #appearance-menu > summary:hover { background:var(--surface-2); }
.head-more-body > .danger { color:var(--failed); }
.head-more-body .appearance-body { position:static; width:auto; border:0; box-shadow:none; padding:4px 12px 12px; }
#appearance-menu { position:relative; }
#appearance-menu > summary { cursor:pointer; list-style:none; font-size:12px; padding:8px 12px; border:1px solid var(--line); border-radius:4px; }
#appearance-menu > summary::after { content:'⌄'; margin-left:10px; }
.appearance-body { position:absolute; right:0; top:calc(100% + 12px); z-index:25; width:244px; display:grid; gap:14px; padding:20px; background:var(--surface); border:1px solid var(--rule-strong); box-shadow:var(--shadow); }
.appearance-body label { display:grid; gap:6px; font-size:12px; color:var(--muted); }
.appearance-body select { padding:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:3px; }
.appearance-body p { margin:0; font-size:11px; color:var(--muted); }
.terminal-state { width:min(560px,calc(100% - 32px)); margin:48px auto 16px; padding:32px; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--failed); border-radius:4px; }
.terminal-state h2 { margin:0 0 12px; font-size:30px; line-height:1.25; letter-spacing:-.035em; font-weight:600; }
.terminal-state p { margin:0; font-size:17px; line-height:1.7; color:var(--muted); text-wrap:pretty; }
.terminal-state .btn { display:inline-block; margin-top:20px; max-width:100%; overflow-wrap:anywhere; text-decoration:none; }
/* With no transcript, give the ended room the center of the available space. */
body:has(#transcript:empty) .terminal-state { margin-block:auto; }
body:has(#transcript:empty):has(#terminal-state:not([hidden])) .dock { margin-top:0; }
.filter { order:0; position:sticky; top:var(--topbar-h); z-index:9; flex:none; margin:0; padding:12px max(24px,calc((100% - var(--column))/2 + 24px)); width:100%; background:var(--ground); border-bottom:1px solid var(--line); }
.filter:has(> button:only-child) { display:none; }
.filter button { background:none; border:0; border-bottom:2px solid transparent; border-radius:0; padding:7px 10px; font-size:12px; }
.filter button[aria-pressed="true"] { color:var(--accent); background:none; box-shadow:none; border-bottom-color:var(--accent); }
.ledger { width:100%; max-width:var(--column); padding:34px 24px 24px; gap:26px; }
.history { width:100%; max-width:var(--column); margin:24px auto 0; padding:0 24px; }
.history-description,.history-note { margin:0 0 12px; font-size:13px; color:var(--muted); }
.history-chat + .history-chat { margin-top:24px; }
.history-chat-title { margin:0 0 12px; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.history-segment { position:relative; border-block:1px solid var(--line); margin-top:-1px; }
.history-collapse { position:absolute; inset:0 auto 0 -24px; display:flex; flex-direction:column; align-items:center; width:20px; padding:0; border:0; border-radius:3px; color:var(--muted); background:transparent; cursor:pointer; text-align:center; }
.history-collapse::before { content:''; position:absolute; top:0; bottom:0; left:9px; width:1px; background:var(--line); }
.history-collapse > span { position:sticky; top:140px; display:block; width:20px; margin-top:14px; background:var(--ground); font-size:22px; line-height:28px; }
.history-collapse:hover,.history-collapse:focus-visible { color:var(--accent); background:var(--accent-soft); }
.history-collapse:hover::before,.history-collapse:focus-visible::before { background:var(--accent); }
.history-collapse:hover > span,.history-collapse:focus-visible > span { background:var(--accent-soft); }
.history-segment > summary { padding:14px 0; cursor:pointer; font-size:14px; font-weight:500; color:var(--muted); }
.history-segment[open] > summary { color:var(--ink); }
.history-body { padding:4px 0 20px; }
.history-ledger { padding:16px 0 0; }
.history-body > .btn { font-size:13px; }
.turn { grid-template-columns:30px minmax(0,1fr); gap:14px; }
.rail::after { display:none; }
.glyph { width:28px; height:28px; border-radius:3px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; font:600 12px var(--font-ui); margin-top:1px; color:var(--ink); }
.turn.ai .glyph { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-soft); }
.turn.guest .glyph,.turn.you .glyph { background:var(--guest-soft); color:var(--guest); border-color:var(--guest-soft); margin-top:12px; }
.turn.guest .content,.turn.you .content { background:color-mix(in srgb,var(--surface-2) 34%,var(--ground)); border-left:2px solid var(--guest); border-radius:0; padding:14px 20px; }
.turn.guest .who .name,.turn.you .who .name { color:var(--ink); }
.who { color:var(--ink); font-size:12px; margin:0 0 12px; gap:8px; }
.badge { color:var(--muted); background:transparent; padding:0; font-weight:400; }
.prose,.prompt { max-width:72ch; font-size:15px; line-height:1.75; }
/* In the conversation, text keeps its reading measure while code, tables
   and other blocks take the column. */
:is(.ledger,.history) :is(.prose,.prompt) { max-width:none; }
:is(.ledger,.history) :is(.prose,.prompt) > :is(p,ul,ol,dl,blockquote,h1,h2,h3,h4,h5,h6) { max-width:72ch; }
.prose h2 { font-size:23px; font-weight:600; letter-spacing:-.035em; line-height:1.35; margin:8px 0 16px; }
.prose p { margin:0 0 14px; }
.prose p:last-child { margin-bottom:0; }
.turn.cont { margin-top:-12px; }
.artifact-card { max-width:none; min-height:68px; padding:12px 16px; gap:14px; border:0; border-bottom:1px solid var(--line); border-radius:3px; }
.artifact-card::before { content:attr(data-type); font:11px var(--font-mono); display:grid; place-items:center; flex:none; width:40px; height:40px; color:var(--accent); background:var(--accent-soft); overflow:hidden; }
.artifact-name { font-weight:600; color:var(--ink); font-size:13px; }
.artifact-card:hover { background:color-mix(in srgb,var(--accent-soft) 40%,var(--surface)); }
.artifact-size { font-size:11px; }
.artifact-open { background:transparent!important; color:var(--accent)!important; border:0!important; font-size:12px; }
.dock { margin-top:auto; background:var(--ground); padding:20px 24px 12px; gap:9px; }
.requests,.own-queue,.dock-strip,.dock-disclosure,.composer,.disclosure,.modeline,.empty-state { max-width:calc(var(--column) - 48px); }
.assistant-working { width:100%; max-width:calc(var(--column) - 48px); margin:0; padding:4px 2px 7px; font-size:15px; font-weight:500; color:var(--ink); }
.assistant-working::before { width:16px; height:16px; margin-right:10px; color:var(--accent); vertical-align:-3px; }
.composer { padding:14px 18px 12px; border-color:var(--rule-strong); border-radius:4px; box-shadow:none; gap:8px; }
.composer-label { font-weight:500; color:var(--ink); font-size:12px; }
.composer textarea { font-size:15px; line-height:1.6; }
.composer-row { gap:6px; }
.composer-row > .btn { min-height:34px; padding:7px 11px; font-size:12px; font-weight:500; }
.composer-row .quiet { background:transparent; border:1px solid transparent; }
.composer-row .quiet:hover { background:var(--surface-2); border-color:var(--line); }
#send-button { min-width:74px; }
#stop-button { background:transparent; color:var(--failed); border:1px solid var(--failed); }
/* Who you are: a chip opening the name form, and a reminder in the composer. */
.composer-identity { min-height:34px; max-width:14rem; padding:4px 8px; border:0; border-radius:4px; background:transparent; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.composer-identity:hover { background:var(--surface-2); color:var(--ink); }
.you-menu { position:relative; flex:none; }
.you-menu > summary { list-style:none; display:flex; align-items:center; gap:8px; min-height:36px; padding:3px 12px 3px 3px; border:1px solid var(--line); border-radius:18px; font-size:12px; cursor:pointer; }
.you-menu > summary::-webkit-details-marker { display:none; }
.you-menu[open] > summary { border-color:var(--accent); }
.you-initials { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--guest-soft); color:var(--guest); font:600 11px/1 var(--font-ui); box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--guest); }
.you-label { max-width:12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.you-body { position:absolute; right:0; top:calc(100% + 10px); z-index:25; width:280px; max-width:calc(100vw - 24px); display:grid; gap:8px; padding:16px; background:var(--surface); border:1px solid var(--rule-strong); border-radius:4px; box-shadow:var(--shadow); }
.you-body label { font-size:12px; font-weight:600; }
.you-body input { min-height:38px; padding:6px 10px; border:1px solid var(--rule-strong); border-radius:3px; background:var(--surface); color:var(--ink); font:inherit; font-size:14px; }
.you-body p { margin:0; font-size:12px; line-height:1.5; color:var(--muted); }
.you-actions { display:flex; justify-content:space-between; gap:8px; margin-top:4px; }
.you-actions .btn { min-height:34px; font-size:12px; }
.you-actions .btn[type=submit] { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
.modeline { margin:0; font-size:13px; gap:14px; width:100%; }
.disclosure { padding:0; font-size:10px; }
#session-box { border:0; border-radius:0; box-shadow:none; background:none; scrollbar-color:var(--rule-strong) transparent; }
:root[data-accents="selective"] #session-box { scrollbar-color:var(--accent) transparent; }
#session-box > summary { padding:0 0 20px; color:var(--ink); list-style:none; cursor:pointer; }
.sidebar-title { font-size:17px; font-weight:600; letter-spacing:-.02em; }
#session-summary { display:block; font-weight:400; font-size:12px; line-height:1.5; white-space:normal; margin-top:6px; }
.dock-disclosure-body { max-height:none; overflow:visible; }
#session-box .dock-disclosure-body > *:not([hidden]):not(:empty) { border:0; padding:0; }
#session-box .dock-submenu { margin:0 0 24px; }
#session-box .dock-submenu > summary { font-size:14px; font-weight:600; color:var(--ink); padding:0 0 12px; list-style:none; white-space:normal; }
#session-box .dock-submenu > summary::after { content:'+'; float:right; color:var(--muted); }
#session-box .dock-submenu[open] > summary::after { content:'−'; }
#commands-summary { font-size:12px; font-weight:400; color:var(--muted); margin-left:6px; }
#editing-box { display:flex; flex-direction:column; }
#editing-items { padding:0; gap:0; }
#editing-items .btn { background:none; color:var(--ink); border:0; border-bottom:1px solid var(--line); border-radius:0; min-height:57px; font-weight:500; font-size:14px; padding:12px 0; display:flex; align-items:center; gap:12px; }
.item-symbol { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:4px; color:var(--accent); background:var(--accent-soft); }
.item-symbol svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.item-symbol.board { color:var(--artifact-secondary); background:var(--artifact-secondary-soft); }
#editing-box .editing-create { padding:12px 0 0; gap:6px; }
#editing-box .editing-create .btn { font-size:12px; font-weight:500; min-height:32px; padding:5px 7px; color:var(--muted); border:1px solid var(--line); border-radius:3px; background:transparent; }
#editing-box .editing-availability { padding:8px 0 0; }
#editing-status { font-size:12px; margin:0; }
#editing-recheck { min-height:24px!important; padding:2px 0; border:0; background:none; font-size:12px; font-weight:400; color:var(--muted); text-decoration:underline; }
#artifacts { padding:0; gap:0; }
#artifacts .dock-chip { width:100%; background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:12px 0; text-align:left; font-size:14px; }
#artifacts .dock-chip-meta { display:none; }
#session-box .activity { margin-bottom:24px; }
.activity h2 { font-size:14px; font-weight:600; margin:0 0 12px; }
#tasks-list { padding:0; }
#tasks-list .task { border:0; padding:8px 0; font-size:13px; }
/* The room-wide actions read as rows, like the section headings above them. */
#session-box .dock-actions { flex-direction:column; flex-wrap:nowrap; gap:0; border-top:1px solid var(--line)!important; padding-top:12px!important; }
#session-box .dock-actions .btn { display:flex; align-items:baseline; gap:6px; width:100%; padding:8px 0; border:0; border-radius:0; background:none; color:var(--ink); font-size:14px; font-weight:600; text-align:left; }
#session-box .dock-actions .btn:hover { filter:none; color:var(--accent); }
#session-box .dock-actions .btn::after { content:'›'; margin-left:auto; color:var(--muted); font-weight:400; }
#session-box #new-session-button::after { content:'+'; }
.dock-count { font-size:12px; font-weight:400; color:var(--muted); }
.skill-search { display:grid; gap:6px; font-size:12px; color:var(--muted); margin-bottom:10px; }
.skill-search input { font-size:14px; min-width:0; width:100%; background:var(--surface); color:var(--ink); border:1px solid var(--line); padding:8px; border-radius:3px; }
#skill-chips { padding:0; gap:5px; }
.skill-chip { white-space:normal; overflow-wrap:anywhere; text-align:left; font:13px/1.5 var(--font-mono); padding:6px 8px; background:var(--surface); }
.skill-chip.armed { background:var(--accent-soft); }
#session-box .disclosure { font-size:12px; }
#session-box .disclosure > summary { font-size:13px; }
.sheet { border-radius:6px; width:min(540px,calc(100vw - 32px)); }
.sheet-form { padding:28px; gap:10px; }
.sheet-title { font-size:24px; letter-spacing:-.04em; color:var(--ink); }
.sheet-note { font-size:13px; line-height:1.7; margin-bottom:8px; }
.invite-tier { padding:14px; border-radius:3px; }
.sheet-actions { margin-top:14px; }
.request-card { border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:4px; box-shadow:none; flex:none; }
.request-card .rhead { letter-spacing:0; text-transform:none; font-size:12px; font-weight:600; padding:14px 18px 0; border:0; }
.request-card .request-body { padding:8px 18px 12px; font:14px/1.65 var(--font-ui); }
.request-card .request-controls { padding:0 18px 16px; border:0; gap:8px; }
.request-card .request-controls > .btn { min-height:36px; padding:7px 12px; font-size:13px; font-weight:500; border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.request-card .request-controls > .btn:hover { background:var(--surface-2); }
.decision-feedback { border-top:1px solid var(--line); }
.decision-feedback > summary { padding:10px 18px; font-size:13px; color:var(--muted); cursor:pointer; }
.decision-feedback[open] > summary { color:var(--ink); }
.decision-feedback .request-feedback { font-size:14px; padding:8px 10px; }
@media (min-width:1100px) {
  /* The sidebar keeps to the window's right edge and the conversation takes
     the rest, up to a column wide enough for code, tables and tool rows. */
  :root { --column:1148px; --side:304px; }
  body:has(#session-box:not([hidden])) { padding-left:24px; padding-right:calc(var(--side) + 40px); }
  body:has(#session-box:not([hidden])) > .topbar { width:auto; margin-left:-24px; margin-right:calc(-1 * (var(--side) + 40px)); }
  #session-box { position:fixed; top:112px; bottom:24px; right:0; width:var(--side); max-height:none; padding:0 16px 0 26px; border-left:1px solid var(--line); overflow-y:auto; scrollbar-width:thin; scrollbar-gutter:stable; }
  #session-box .dock-disclosure-body { max-height:none; }
  #session-box > summary #session-summary { display:none; }
}
@media (min-width:1600px) { :root { --side:360px; } }
/* A whiteboard or document docked beside the chat, under the room's header,
   on a window at least 1800px wide (viewer-editing.js). The chat keeps a
   fixed width and the item takes the rest. In this room opens from the
   header's button as a drawer over the item's right side. */
body:has(#editing-panel.docked) { --chat:860px; --pad-r:calc(100vw - var(--chat)); padding-left:24px; padding-right:var(--pad-r); }
body:has(#editing-panel.docked) > .topbar { width:auto; margin-left:-24px; margin-right:calc(-1 * var(--pad-r)); }
#editing-panel.docked { inset:var(--topbar-h) 0 0 var(--chat); height:auto; border-left:1px solid var(--line); }
#editing-panel.docked > .topbar { height:56px; padding:0 20px; gap:16px; border-bottom-width:1px; }
#editing-panel.docked > .topbar .wordmark { display:none; }
#editing-panel.docked > .topbar .room-heading { padding-left:16px; }
body:has(#editing-panel.docked) #session-box:not([open]) { display:none; }
body:has(#editing-panel.docked) #session-box[open] { z-index:31; top:var(--topbar-h); bottom:0; right:0; width:360px; padding-top:20px; background:var(--surface); box-shadow:var(--shadow); }
body:has(#editing-panel.docked) .room-button { display:grid; }
@media (max-width:1099px) {
  body:has(#session-box:not([hidden])) { padding:0; }
  body:has(#session-box:not([hidden])) > .topbar { width:100%; }
  #session-box { position:static; width:100%; max-width:816px; border:1px solid var(--line); padding:12px 16px; background:var(--surface); }
  #session-box > summary { padding:0; }
  #session-box > summary::after { content:'+'; float:right; }
  #session-box[open] > summary::after { content:'−'; }
  #session-box[open] > summary { padding-bottom:20px; }
  #session-box .dock-disclosure-body { max-height:52dvh; overflow-y:auto; }
  #session-summary { display:none; }
  .dock { padding-top:12px; }
}
@media (max-width:640px) {
  :root { --topbar-h:56px; }
  .topbar { padding:0 12px; gap:8px; }
  .wordmark { font-size:19px; letter-spacing:-1.3px; }
  .room-heading { padding-left:10px; }
  /* A page's details give way to the title; where it is, and a state, stay. */
  .topbar .head-meta { display:none; }
  .back { width:32px; height:32px; margin-right:-4px; }
  .room-heading h1,.heading-title { font-size:15px; margin:0; }
  .header-actions { gap:6px; }
  #editing-box .editing-create .btn { min-height:40px; }
  .filter { padding:6px 12px; }
  .ledger { padding:24px 16px 20px; gap:24px; }
  .turn { grid-template-columns:22px minmax(0,1fr); gap:10px; }
  .glyph { width:22px; height:24px; font-size:10px; }
  .turn.guest .content,.turn.you .content { padding:12px 14px; }
  .prose,.prompt { font-size:14px; }
  .prose h2 { font-size:21px; }
  .artifact-card { flex-wrap:wrap; padding:12px; gap:10px; }
  .artifact-name { white-space:normal; font-size:12px; }
  .artifact-card::before { width:28px; height:34px; font-size:9px; }
  .artifact-size { display:none; }
  .artifact-open { padding:6px; }
  .dock { padding:10px 12px; }
  .composer { padding:12px; }
  .composer textarea { font-size:16px; }
  .composer-row { gap:4px; }
  .composer-identity { display:none; }
  .you-menu > summary { padding:3px; border-color:transparent; }
  .you-label { display:none; }
  /* In this room is one compact row that opens as a sheet over the room. */
  #session-box { padding:0 14px; border-radius:6px; }
  #session-box > summary { display:flex; align-items:center; gap:10px; min-height:42px; padding:0; }
  #session-box > summary::after { content:'›'; margin-left:8px; color:var(--muted); }
  #session-box .sidebar-title { font-size:14px; }
  #session-summary { display:block; margin-left:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--muted); }
  #session-box[open] { position:fixed; left:0; right:0; bottom:0; z-index:40; max-width:none; max-height:78dvh; overflow-y:auto; padding:0 16px calc(16px + env(safe-area-inset-bottom)); border-radius:12px 12px 0 0; box-shadow:0 -8px 28px rgb(0 0 0 / 22%); }
  #session-box[open] > summary { position:sticky; top:0; z-index:1; min-height:52px; margin-bottom:8px; background:var(--surface); border-bottom:1px solid var(--line); }
  #session-box[open] > summary::after { content:'×'; margin-left:auto; font-size:20px; }
  #session-box[open] #session-summary { display:none; }
  #session-box[open] .dock-disclosure-body { max-height:none; overflow:visible; }
  /* The composer starts at one line and grows with its message. */
  .composer-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .composer textarea { min-height:44px; max-height:30dvh; }
  .composer-row > .btn { font-size:11px; padding:6px 9px; }
  .sheet-form { padding:20px; }
  .modeline { font-size:12px; gap:8px; }
}

/* Keep each invitation's action aligned, including when descriptions wrap. */
.invite-tier { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; }
.invite-tier .invite-name,.invite-tier .invite-what { grid-column:1; }
.invite-tier .invite-name { text-transform:capitalize; }
.invite-tier .btn { grid-column:2; grid-row:1 / span 2; min-width:68px; min-height:38px; }
@media (max-width:640px) {
  .invite-tier { grid-template-columns:minmax(0,1fr); }
  .invite-tier .room-actions { grid-column:1; grid-row:auto; justify-content:flex-start; }
}
/* Who else is on this page: overlapping initials, faded while their tab is hidden. */
.presence { display:flex; align-items:center; }
.presence-chip, .presence-more { display:grid; place-items:center; flex:none; width:28px; height:28px; margin-left:-6px; border:2px solid var(--surface); border-radius:50%; font:600 11px/1 var(--font-ui); cursor:default; }
.presence > :first-child { margin-left:0; }
.presence-chip { --hue:220; color:#fff; background:hsl(var(--hue) 52% 42%); }
:root[data-theme="dark"] .presence-chip { color:#111; background:hsl(var(--hue) 60% 72%); }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .presence-chip { color:#111; background:hsl(var(--hue) 60% 72%); } }
:root[data-accents="minimal"] .presence-chip { color:var(--ink); background:var(--surface-2); }
.presence-chip.away { opacity:.45; }
.presence-more { color:var(--ink); background:var(--surface-2); }

/* A short phone, such as an iPhone mini in Safari, keeps its rows for the
   conversation: In this room opens from the header, and a connected status
   line with nothing else to say gives way. A docked item shows the button too. */
.room-button { display:none; place-items:center; min-width:36px; min-height:36px; padding:0; border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--ink); }
.room-button[aria-expanded="true"] { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.room-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
@media (max-width:640px) and (max-height:700px) {
  .room-button { display:grid; }
  #session-box:not([open]) { display:none; }
  #modeline:has(.conn.connected):not(:has(.settings-button,.ml.plan,.ml.tail:not(:empty))) { display:none; }
}