:root {
  color-scheme: dark;
  --bg: #0a0c10;
  --panel: #11151b;
  --panel-raised: #151b23;
  --line: #28313d;
  --line-soft: #1e2630;
  --text: #f5f7fa;
  --muted: #9ca8b8;
  --blue: #75a7ff;
  --blue-strong: #2f63c7;
  --amber: #ffbf69;
  --green: #4fd09b;
  --red: #ff7b7b;
  --violet: #ad8cff;
  --shadow: 0 20px 70px rgb(0 0 0 / 32%);
  /* One-inspired tokens for future quiet chrome. Not the live theme. */
  --room-ground: #f7f7f7;
  --room-paper: #fff;
  --room-ink: #262523;
  --room-muted: #5c5c5c;
  --room-quiet: #8b8985;
  --room-line: #ebebe9;
  --room-rule: #e7e4df;
  --room-hover: #4d4a46;
  --room-dark: #171715;
  --room-green: #48a16b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button, select { min-height: 2.6rem; }
button { cursor: pointer; }
a { color: var(--blue); }

.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 100; padding: .75rem 1rem; background: white; color: black; clip-path: inset(50%); }
.skip-link:focus { clip-path: none; }
.app-shell { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; padding: .8rem clamp(1rem, 3vw, 2.5rem); border-bottom: 1px solid rgb(255 255 255 / 8%); background: rgb(10 12 16 / 86%); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand-mark { display: grid; place-items: center; width: 2.5rem; aspect-ratio: 1; border: 1px solid #4c6f9f; background: linear-gradient(145deg, #1f3150, #101822); color: #cfe0ff; font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.brand div { display: grid; gap: .15rem; }
.brand strong { font-size: .98rem; letter-spacing: -.01em; }
.brand span:last-child { color: var(--muted); font-size: .76rem; }
.topbar-actions { display: flex; align-items: end; gap: .75rem; }
label { color: var(--muted); font-size: .76rem; font-weight: 650; letter-spacing: .02em; }
select, input, textarea { width: 100%; border: 1px solid var(--line); border-radius: .45rem; background: #0b0f14; color: var(--text); outline: none; }
select, input { min-height: 2.6rem; padding: 0 .75rem; }
textarea { padding: .7rem .8rem; line-height: 1.5; resize: vertical; }
select:focus, input:focus, textarea:focus, button:focus-visible, a:focus-visible { border-color: var(--blue); outline: 2px solid rgb(117 167 255 / 32%); outline-offset: 2px; }

main { max-width: 1540px; margin: 0 auto; padding: 2rem clamp(1rem, 3vw, 2.5rem) 4rem; }
.room-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin: .6rem 0 2rem; }
.eyebrow { margin: 0 0 .45rem; color: var(--blue); font-size: .69rem; font-weight: 800; letter-spacing: .14em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .45rem; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.04; letter-spacing: -.055em; }
h2 { margin-bottom: 0; font-size: 1rem; letter-spacing: -.015em; }
h3 { margin: .8rem 0 .45rem; font-size: 1.05rem; line-height: 1.3; letter-spacing: -.02em; }
.room-purpose { max-width: 46rem; margin-bottom: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.member-stack { display: flex; flex-direction: row-reverse; padding-top: .6rem; }
.member-avatar { position: relative; display: grid; place-items: center; width: 2.6rem; aspect-ratio: 1; margin-left: -.55rem; border: 2px solid var(--bg); border-radius: 50%; background: #263249; color: white; font-size: .72rem; font-weight: 800; }
.member-avatar.agent { background: #3c2c60; }

.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.summary-card { min-height: 7.3rem; padding: .9rem 1rem; border: 1px solid var(--line-soft); background: rgb(255 255 255 / 2%); }
.summary-card > span { display: block; color: var(--muted); font-size: .76rem; }
.summary-card strong { display: block; margin: .25rem 0 .1rem; font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.summary-card p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }

.panel { min-width: 0; border: 1px solid var(--line-soft); border-radius: 1rem; background: var(--panel); }
.panel-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: 1rem; border-bottom: 1px solid var(--line-soft); }
.panel-header .eyebrow { margin-bottom: .3rem; }
.count-chip { display: grid; min-width: 2rem; min-height: 1.7rem; place-items: center; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: .72rem; }

.message-list { height: min(48vh, 34rem); margin: 0; padding: .3rem 1rem; overflow-y: auto; list-style: none; }
.message { display: grid; grid-template-columns: 2rem 1fr; gap: .7rem; padding: .85rem 0; }
.message.grouped { position: relative; padding-top: .12rem; padding-bottom: .35rem; }
.message.grouped .message-avatar { visibility: hidden; }
.message.grouped .message-meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.grouped-time { display: none; }
.message.grouped:hover .grouped-time, .message.grouped:focus-within .grouped-time {
  display: block; position: absolute; left: 0; top: .15rem; width: 2rem; color: #738092; font-size: .55rem; line-height: 1.2; text-align: right;
}
.message.mentioned { border-radius: .4rem; background: rgb(173 140 255 / 10%); }
.chat-divider { grid-column: 1 / -1; margin: .55rem 0 .2rem; color: #8b97a8; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.chat-divider.unread { color: var(--amber); }
.message-avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #27334a; color: white; font-size: .65rem; font-weight: 800; }
.message-avatar.agent { border-radius: .45rem; background: #3a2c57; color: #e7ddff; }
.message-content { min-width: 0; }
.message-content p { margin-bottom: .4rem; color: #dfe5ed; font-size: .9rem; line-height: 1.55; overflow-wrap: anywhere; }
.message-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin-bottom: .25rem; }
.message-meta strong { font-size: .84rem; }
.message-meta span { padding: .08rem .34rem; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: .62rem; text-transform: uppercase; }
.message-meta time { margin-left: auto; color: #738092; font-size: .7rem; }
.mention { padding: 0; border: 0; background: transparent; color: var(--violet); font: inherit; font-weight: 650; cursor: pointer; }
.mention.agent { color: var(--text); font-weight: 850; }
.mention:hover { text-decoration: underline; }
.work-link { color: var(--muted); font-size: .72rem; text-decoration: none; }
.work-link:hover { color: var(--blue); }
.composer { position: relative; padding: 1rem; background: #0d1117; }
.mention-list { position: absolute; right: 1rem; bottom: calc(100% - .35rem); left: 1rem; z-index: 5; margin: 0; padding: .25rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--panel-raised); box-shadow: var(--shadow); list-style: none; }
.mention-option { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 44px; padding: .4rem .7rem; border: 0; border-radius: .35rem; background: transparent; color: var(--text); text-align: left; }
.mention-option span { color: var(--muted); font-size: .68rem; }
.mention-option.active, .mention-option:hover { background: #1d2734; }
.composer > label { display: block; margin-bottom: .45rem; }
.composer-row { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: end; }
.form-hint { margin: .45rem 0 0; color: #748093; font-size: .69rem; }
.draft-recovery-toggle { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.draft-recovery-toggle input, .check-option input { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin: 0; padding: 0; accent-color: var(--blue); }

.button { padding: .58rem .85rem; border: 1px solid transparent; border-radius: .42rem; color: var(--text); font-size: .78rem; font-weight: 750; }
.button.primary { background: var(--blue-strong); }
.button.primary:hover { background: #2858b8; }
.button.secondary { border-color: var(--line); background: #1a222d; }
.button.secondary:hover, .button.ghost:hover { background: #212b38; }
.button.ghost { border-color: var(--line); background: transparent; color: var(--muted); }
.new-work-form { margin: 1rem; padding: 1rem; border: 1px solid #375074; background: #111a27; }
.new-work-form label { display: grid; gap: .35rem; margin-bottom: .75rem; }
.work-checks { min-width: 0; margin: 0 0 .75rem; padding: .8rem; border: 1px solid var(--line); }
.work-checks legend { padding: 0 .3rem; font-size: .8rem; }
.new-work-form .check-option { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.check-option span { min-width: 0; overflow-wrap: anywhere; }
.form-actions { display: flex; justify-content: flex-end; gap: .5rem; }

.work-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; max-height: 72vh; padding: 1rem; overflow-y: auto; }
.work-card { padding: 1rem; border: 1px solid var(--line); background: var(--panel-raised); scroll-margin-top: 6rem; }
.work-card-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.state, .mode { font-size: .65rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.state { padding: .25rem .45rem; border: 1px solid #3c526f; background: #172335; color: #bcd5ff; }
.state-completed { border-color: #2e795e; background: #112b23; color: #7ce2b7; }
.state-blocked { border-color: #855a35; background: #2d2015; color: #ffbe7c; }
/* Round-2 #117: done chip — marks terminally finished work at a glance. */
.done-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .5rem; border-radius: 999px;
  border: 1px solid #2e795e; background: #112b23; color: #7ce2b7; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.done-chip.result-posted { background: var(--panel); color: var(--muted); border-color: var(--room-rule); }
.work-card-header .done-chip { margin-left: .5rem; }
.message-links .done-chip { margin-left: .4rem; }
.mode { color: var(--muted); }
.definition { color: var(--muted); font-size: .8rem; line-height: 1.5; }
.work-facts { display: grid; gap: .35rem; margin: .8rem 0; }
.work-next-step { margin: .6rem 0; color: var(--muted); font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.work-facts > div { display: grid; grid-template-columns: 6.2rem 1fr; gap: .5rem; }
.work-facts dt { color: #768397; font-size: .7rem; }
.work-facts dd { margin: 0; color: #d8dee8; font-size: .75rem; line-height: 1.4; overflow-wrap: anywhere; }
.receipt { margin-top: .9rem; padding: .85rem; border: 1px solid #2a4c43; background: #0d211b; }
.receipt-label { margin-bottom: .4rem !important; color: var(--green) !important; font-size: .63rem !important; font-weight: 850; letter-spacing: .1em; }
.receipt-attribution { display: grid; gap: .3rem; margin: 0 0 .7rem; }
.receipt-attribution > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .5rem; }
.receipt-attribution dt { color: #87a59b; font-size: .75rem; }
.receipt-attribution dd { margin: 0; color: #d6e8e1; font-size: .875rem; overflow-wrap: anywhere; }
.receipt p { margin-bottom: .55rem; color: #cce2da; font-size: .77rem; line-height: 1.45; }
.receipt a { display: inline-block; font-size: .72rem; text-decoration: none; }
.receipt code { float: right; color: #9bbbae; font-size: .68rem; }
.blocker { margin-top: .8rem; padding: .75rem; border-left: 3px solid var(--amber); background: #241b12; }
.blocker strong { color: var(--amber); font-size: .72rem; }
.blocker p { margin: .25rem 0 0; color: #e8caa8; font-size: .75rem; }
.decision { margin-top: .8rem; padding: .75rem; border-left: 3px solid var(--blue); background: #101f36; }
.decision strong { color: #a9c8ff; font-size: .72rem; }
.decision p { margin: .25rem 0 0; color: #c5d4ee; font-size: .75rem; }
.claim { margin-top: .75rem; color: var(--muted); font-size: .7rem; }
.claim summary { cursor: pointer; color: var(--violet); }
.claim p { margin: .35rem 0 0; overflow-wrap: anywhere; }
.work-actions { display: flex; flex-wrap: wrap; gap: .45rem; min-height: 2.6rem; align-items: center; margin-top: .9rem; }

.event-list { margin: 0; padding: .8rem 1rem 0; list-style: none; }
.event-list li { display: grid; gap: .25rem; padding: .8rem 0; overflow-wrap: anywhere; }
.event-list li + li { border-top: 1px solid var(--line-soft); }
.event-list strong { display: block; color: #dbe2ec; font-size: .73rem; }
.event-list p { margin: .15rem 0 0; color: #738093; font-size: .67rem; }
.prototype-note { margin: .6rem 1rem 1rem; padding: .8rem; border-top: 1px solid var(--line); color: #7f8b9b; font-size: .7rem; line-height: 1.55; }
.prototype-note strong { color: #aeb8c5; }
.status { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; max-width: min(24rem, calc(100vw - 2rem)); padding: .75rem 1rem; border: 1px solid #315d4e; background: #10271f; color: #a7e7cd; font-size: .78rem; opacity: 0; transform: translateY(.5rem); transition: .18s ease; pointer-events: none; }
.status.visible { opacity: 1; transform: translateY(0); }
.status.error { border-color: #704242; background: #2a1616; color: #ffb0b0; }
/* Quiet Focus A4: composer-local failure text stays in flow beside the draft. */
.form-status { position: static; opacity: 1; transform: none; pointer-events: auto; max-width: none; margin: .35rem 0 0; padding: .5rem .75rem; }
.form-status:not(.visible) { display: none; }

.community-shell { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; max-width: 1440px; min-height: calc(100vh - 4.5rem); margin: auto; padding: 0; }

.room-stage { min-width: 0; padding: 1.5rem; }
.room-stage .room-heading { margin: 0 0 1rem; }
.room-stage h1 { max-width: 44rem; font-size: clamp(1.75rem, 3vw, 2.75rem); }
.room-presence-summary { display: grid; justify-items: end; gap: .35rem; white-space: nowrap; }
.room-presence-summary > span { color: var(--green); font-size: .69rem; font-weight: 700; }
.room-stage .conversation-panel { min-height: calc(100vh - 13rem); }
.conversation-header p:last-child { max-width: 38rem; margin: .35rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.message-list { height: calc(100vh - 26rem); min-height: 24rem; }
.message { scroll-margin-top: 6rem; content-visibility: auto; contain-intrinsic-size: auto 4.5rem; }
.audience-chip { display: inline-block; margin: 0 0 .2rem; color: #8195af; font-size: .66rem; }
.message-links { display: flex; align-items: center; gap: .8rem; min-height: 1.25rem; }
.message-to-work, .text-button { padding: 0; border: 0; background: transparent; color: var(--blue); font-size: .69rem; font-weight: 700; }
.message-to-work:hover, .text-button:hover { text-decoration: underline; }
@media (hover: hover) and (pointer: fine) {
  .message-links .message-to-work:not([data-message-action="reply"]) { opacity: 0; }
  .message:is(:hover, :focus-within) .message-links .message-to-work { opacity: 1; }
}
.composer-toolbar { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.composer-toolbar label { white-space: nowrap; }
.composer-toolbar select { width: auto; min-width: 0; max-width: 100%; min-height: 44px; padding-block: 0; font-size: .72rem; }
.composer-toolbar .text-button { margin-left: auto; }

.context-rail { display: grid; align-content: start; gap: .8rem; min-width: 0; padding: 1.5rem 1rem 2rem 0; }
.presence-list { display: grid; padding: .55rem .8rem .8rem; }
.presence-heading { margin: .55rem 0 .1rem; color: var(--room-quiet); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.presence-heading:first-child { margin-top: 0; }
.presence-member { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: start; gap: .65rem; min-width: 0; padding: .55rem .15rem; cursor: pointer; }
.presence-member:hover { background: rgb(255 255 255 / 3%); }
.presence-member .member-avatar { width: 2.2rem; margin: .1rem 0 0; border-color: var(--panel); }
.presence-member > div:nth-child(2) { display: grid; min-width: 0; gap: .15rem; }
.member-head { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.member-handle { overflow: hidden; color: var(--text); font-size: .82rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.member-handle-agent { color: var(--text); font-weight: 850; letter-spacing: -.02em; }
.done-chip { flex: 0 0 auto; display: inline-grid; place-items: center; min-height: 1.15rem; padding: .05rem .38rem; border: 1px solid var(--room-rule); border-radius: 99px; background: color-mix(in srgb, var(--room-green) 16%, var(--room-dark)); color: var(--room-green); font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.member-status { margin: 0; color: var(--room-quiet); font-size: .65rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-rail .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.context-rail .summary-card { min-height: 5.8rem; padding: .65rem; }
.context-rail .summary-card > span { font-size: .64rem; }
.context-rail .summary-card strong { font-size: 1.35rem; }
.context-rail .summary-card p { display: none; }
.context-rail .work-list { max-height: 46vh; }
.source-context { margin-bottom: .75rem; padding: .65rem; border-left: 2px solid var(--violet); background: #1a1625; color: #b9acce; font-size: .69rem; line-height: 1.45; }
.source-link { color: var(--violet); font-size: .68rem; text-decoration: none; }
button.source-link { background: none; border: 0; padding: .25rem 0; text-align: left; }
.record-panel { box-shadow: none; }
.record-panel > summary { cursor: pointer; list-style: none; }
.record-panel > summary::-webkit-details-marker { display: none; }
.record-panel > summary > span:first-child { display: grid; gap: .18rem; }
.record-panel > summary .eyebrow { margin: 0; }
.record-panel .event-list { max-height: 22rem; overflow-y: auto; }

@media (max-width: 1180px) {
  .community-shell { grid-template-columns: 11rem minmax(26rem, 1fr) 23rem; }
  .room-stage { padding-inline: 1rem; }
  .context-rail { padding-right: .75rem; }
}

@media (max-width: 940px) {
  .community-shell { display: block; }
  .room-stage { padding: 1rem; }
  .room-stage .conversation-panel { min-height: auto; }
  .message-list { height: 34rem; min-height: 20rem; }
  .context-rail { grid-template-columns: 1fr 1fr; padding: 0 1rem 2rem; }
  .context-rail .work-panel, .context-rail .record-panel { grid-column: 1 / -1; }
  .context-rail .work-list { max-height: none; }
}

@media (max-width: 780px) {
  .topbar, .room-heading { align-items: stretch; }
  .topbar { position: static; flex-direction: column; }
  .topbar-actions { justify-content: space-between; }
  .room-heading { flex-direction: column; gap: .75rem; }
  .room-presence-summary { justify-items: start; }
  .member-stack { flex-direction: row; }
  .context-rail { grid-template-columns: 1fr; }
  .context-rail .work-panel, .context-rail .record-panel { grid-column: auto; }
  .message-list { height: auto; min-height: 26rem; max-height: none; }
  .work-list { max-height: none; }
}

@media (max-width: 500px) {
  .room-stage, .context-rail { padding-inline: .75rem; }
  .topbar { padding-inline: .75rem; }
  .topbar-actions, .composer-row { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; }
  .composer-toolbar { flex-wrap: wrap; }
  .composer-toolbar select { width: 100%; }
  .composer-toolbar .text-button { margin-left: 0; }
  .context-rail .summary-grid { grid-template-columns: repeat(3, 1fr); }
  .work-facts > div { grid-template-columns: 5.4rem 1fr; }
  .receipt code { float: none; display: block; margin-top: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Connected pilot: preserve the conversation-first layout without demo status. */
[hidden] { display: none !important; }
.connection-status { margin: 0; padding: .65rem clamp(1rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: .875rem; }
.connection-bar { position: relative; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--line-soft); }
.connection-bar .connection-status { flex: 1; min-width: 0; border: 0; padding-right: 0; overflow-wrap: anywhere; }
.connection-status[data-state="connected"]::before { content: ""; display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; margin-right: .5rem; background: var(--green); vertical-align: middle; }
#connection-details { margin-right: clamp(1rem, 3vw, 2.5rem); color: var(--muted); font-size: .875rem; }
#connection-details > summary { cursor: pointer; min-height: 44px; padding-block: .8rem; }
#connection-explanation { position: absolute; z-index: 15; top: 100%; right: 1rem; margin: .25rem 0 0; width: min(26rem, calc(100vw - 2rem)); padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--panel-raised); box-shadow: var(--shadow); line-height: 1.5; overflow-wrap: anywhere; }
.room-guide { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; margin: 0 1rem .75rem; padding: .85rem 1rem; border: 1px solid var(--line-soft); border-radius: .65rem; background: rgb(255 255 255 / 3%); }
.room-guide[hidden] { display: none; }
.room-guide p { margin: 0; flex: 1 1 16rem; color: var(--muted); font-size: .95rem; line-height: 1.5; }
#room-guide-dismiss { width: auto; }
#people-hint:empty { display: none; }
.auth-panel { max-width: 28rem; margin: clamp(1rem, 8vw, 6rem) auto; padding: clamp(1.25rem, 4vw, 2.5rem); }
#auth-panel { width: min(100% - 2rem, 22rem); margin: clamp(4rem, 20vh, 12rem) auto; border: 0; background: transparent; box-shadow: none; }
#auth-panel #auth-title { margin: 0 0 2.25rem; }
.welcome-wordmark { white-space: normal; text-align: center; font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif; font-size: clamp(2.25rem, 7vw, 3rem) !important; font-weight: 500; letter-spacing: -.065em; line-height: 1.15; }
.welcome-wordmark span { font-weight: 300; color: #c5c8df; }
#auth-panel { max-width: 26rem; width: min(100% - 2rem, 26rem); }
.agent-setup-button { width: 100%; margin-bottom: .75rem; background: transparent; border: 1px solid var(--line); color: var(--muted); }
.agent-setup-button span { margin-left: .5rem; }
#agent-setup-status:empty { display: none; }
#agent-setup-status { text-align: center; font-size: .8rem; }
.app-shell:has(#auth-panel:not([hidden])) .topbar { background: transparent; border: 0; backdrop-filter: none; justify-content: flex-end; }
.app-shell:has(#auth-panel:not([hidden])) .topbar .brand { display: none; }
#project-help-button { border: 1px solid var(--line); border-radius: 50%; width: 2rem; min-height: 2rem; padding: 0; color: var(--muted); }
.project-help { width: min(32rem, calc(100% - 2rem)); max-height: 85dvh; overflow-y: auto; }
.project-help header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.project-help p { color: var(--muted); }
.project-help summary { cursor: pointer; padding: .5rem 0; }
#agent-setup-prompt { margin: .5rem 0; font-size: .85rem; }
.inbox-views { display: flex; gap: .25rem; margin: .5rem 0; }
.inbox-views button { flex: 1; border: 0; border-radius: .4rem; background: transparent; color: var(--muted); }
.inbox-views button[aria-pressed="true"] { background: var(--panel-raised); color: var(--text); }
#inbox-search { margin-bottom: .75rem; }
.messaging-setup { margin-top: .75rem; }
.messaging-setup summary { cursor: pointer; padding: .5rem 0; }
#sign-in-entry { list-style: none; text-align: center; cursor: pointer; }
#sign-in-entry::-webkit-details-marker { display: none; }
#key-access[open] > summary { margin-bottom: 1.5rem; }
#auth-panel:has(#provider-join:not([hidden])) #key-access { margin-top: .75rem; }
#provider-join-status:empty { display: none; }
.app-shell:has(#auth-panel:not([hidden])) #refresh-button { display: none; }
.app-shell:has(#auth-panel:not([hidden]) #auth-error.error.visible):has(#connection-status[data-state="other"]) #refresh-button { display: inline-flex; }
#auth-lead { margin: -0.6rem 0 1.1rem; }
.auth-kind { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; }
.auth-kind .button { flex: 1 1 8rem; width: auto; min-width: 0; }
.auth-kind .button[aria-pressed="true"] { border-color: var(--blue); color: var(--text); background: rgb(255 255 255 / 6%); }
.auth-kind .button.suggested { box-shadow: inset 0 0 0 1px var(--amber); }
.key-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; align-items: center; width: 100%; min-width: 0; }
#access-key-reveal { width: auto; }
.invite-paste { margin-top: 1.1rem; color: var(--muted); font-size: .875rem; }
#invite-link { width: 100%; max-width: 100%; margin: .35rem 0 0; box-sizing: border-box; }
.app-shell:has(#auth-panel:not([hidden])) #identity-label,
.app-shell:has(#auth-panel:not([hidden])) .connection-bar:has([data-state="signed-out"]) { display: none; }
.auth-panel h1 { margin-bottom: 1.5rem; overflow-wrap: anywhere; }
.auth-panel h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.12; }
.auth-panel p, dialog p { line-height: 1.6; }
#invitation-summary:empty { display: none; }
.auth-panel form, #action-fields, #action-form, #invitation-account-form, .invitation-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
#action-text-body, #result-body { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 22rem; overflow: auto; font: inherit; font-size: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .65rem; }
#action-context { overflow-wrap: anywhere; }
#action-text, #action-form { min-width: 0; }
.auth-panel label, dialog label { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; }
#auth-error { color: var(--red); min-height: 1.5rem; margin: 0; }
#identity-label { align-self: center; overflow-wrap: anywhere; }
.topbar-actions { flex-wrap: wrap; }
.empty-note { padding: 1.25rem; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.empty-note .text-button { min-height: 44px; margin-top: .35rem; }
.room-guide { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; margin: 0 0 .75rem; padding: .85rem 1rem; border: 1px solid var(--line-soft); border-radius: .65rem; background: rgb(255 255 255 / 3%); }
.room-guide[hidden] { display: none; }
.room-guide p { margin: 0; flex: 1 1 16rem; color: var(--muted); font-size: .95rem; line-height: 1.5; }
#room-guide-dismiss { width: auto; }
#people-hint:empty { display: none; }
.reply-bar, .cursor-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem 1rem; border-top: 1px solid var(--line-soft); font-size: .875rem; color: var(--muted); }
.reply-bar-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
#reply-mention[aria-pressed="true"] { color: var(--text); }
#reply-mention[hidden] { display: none; }
#request-mode-bar { flex-wrap: wrap; }
#request-mode-label { flex: 1 1 auto; overflow-wrap: anywhere; }
.contribution-next { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .25rem 1rem .9rem; }
.contribution-next > div:first-child { min-width: 0; }
.contribution-next p { margin: .2rem 0 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.contribution-actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
#review-brief p { white-space: pre-wrap; overflow-wrap: anywhere; }
#review-brief { padding: .75rem 0; border-bottom: 1px solid var(--line-soft); }
#review-brief summary { cursor: pointer; min-height: 44px; padding-block: .65rem; }
@media (max-width: 600px) {
  .contribution-next { align-items: stretch; flex-direction: column; gap: .6rem; }
  .contribution-actions { flex-wrap: wrap; }
}
.request-state { display: inline-block; margin-right: .5rem; color: var(--muted); font-size: .875rem; }
.message-content p { font-size: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.form-hint, .prototype-note, .source-link, .audience-chip, .message-meta span, .message-meta time, .member-status, .work-facts, .definition, .receipt p, .receipt a, .blocker p, .decision p, .source-context { font-size: .875rem; }
label, input, textarea, select { font-size: 1rem; }
.presence-member details { font-size: .875rem; color: var(--muted); max-width: 16rem; overflow-wrap: anywhere; }
.presence-member details p { font-size: .875rem; line-height: 1.5; }
.context-rail .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.context-rail .summary-card > span { font-size: .875rem; }
.receipt code, .event-list code { display: block; overflow-wrap: anywhere; max-width: 100%; }
dialog { width: min(38rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 2rem); overflow: auto; border: 1px solid var(--line); border-radius: .85rem; padding: clamp(1rem, 4vw, 2rem); background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
dialog::backdrop { background: rgb(0 0 0 / 72%); }
dialog h2 { margin: 0; }
dialog p { margin: 0; color: var(--muted); }
.portable-section { display: grid; gap: .8rem; margin-top: 1rem; }
.portable-section[hidden] { display: none; }
.portable-section textarea { width: 100%; min-height: 12rem; resize: vertical; font: inherit; font-size: 1rem; line-height: 1.5; }
.portable-section label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.portable-section input[type="checkbox"] { width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; padding: 0; flex: none; }
.portable-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
#portable-work-title { overflow-wrap: anywhere; }
#portable-status { margin-top: .8rem; }
#portable-original-body { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.5; max-height: 14rem; overflow: auto; }
#result-copy-dialog summary { cursor: pointer; min-height: 44px; padding-block: .65rem; color: var(--muted); font-size: .875rem; }
#result-copy-dialog .form-hint { overflow-wrap: anywhere; }
#result-copy-dialog > .panel-header { padding: 0 0 .75rem; align-items: flex-start; gap: .75rem; }
#reminder-work-title, #reminder-preview, .reminder-list { overflow-wrap: anywhere; }
#reminder-custom-label[hidden] { display: none; }
.reminder-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.reminder-list li a { grid-column: 1; }
.reminder-list li small { grid-column: 1; color: var(--muted); font-size: .875rem; }
.reminder-list li button { grid-column: 2; grid-row: 1 / 3; }
#reminder-load-error:empty, #reminder-current:empty { display: none; }
.access-help { margin-top: 1rem; }
.access-help summary { cursor: pointer; min-height: 44px; }
.access-help p { color: var(--muted); }
button, .button, .message-to-work { min-height: 44px; }
.status { max-width: min(40rem, calc(100vw - 2rem)); overflow-wrap: anywhere; pointer-events: none; }
.invitation-dialog { width: min(42rem, calc(100vw - 1.5rem)); }
.invitation-dialog[aria-busy="true"] { cursor: wait; }
.invitation-boundary { padding: .8rem .9rem; border-left: 3px solid var(--blue); background: #101f36; color: #c8d9f6; }
.invitation-details { display: grid; gap: .65rem; margin: 0; padding: .9rem; border: 1px solid var(--line); background: #0d1117; }
.invitation-details[hidden] { display: none; }
.invitation-details > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; }
.invitation-details dt { color: var(--muted); font-size: .76rem; font-weight: 650; }
.invitation-details dd { min-width: 0; margin: 0; color: var(--text); font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.invitation-details code { display: block; margin-top: .2rem; color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.invitation-feedback { min-height: 1.35rem; color: var(--green) !important; overflow-wrap: anywhere; }
.invitation-feedback.error { color: var(--red) !important; }
.invitation-feedback:empty { display: none; }
.invitation-actions { margin-top: .25rem; }
@media (max-width: 500px) {
  .auth-panel { margin: 1rem .75rem; padding: min(1.25rem, 5vw); }
  .cursor-row, .reply-bar { align-items: stretch; flex-direction: column; }
  .context-rail .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invitation-details > div { grid-template-columns: 1fr; gap: .2rem; }
  .invitation-actions { flex-direction: column-reverse; align-items: stretch; }
}

/* Conversations stay navigable without replacing the composer during live updates. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.conversation-search { padding: .85rem 1rem; border-bottom: 1px solid var(--line-soft); }
.conversation-search label { display: block; margin-bottom: .45rem; font-size: .875rem; }
.search-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.search-row input { min-width: 0; flex: 1 1 10rem; }
#search-mentions { width: auto; flex: 0 0 auto; }
#search-mentions[aria-pressed="true"] { color: var(--text); background: #212b38; }
.search-results { padding: .75rem 1rem; background: #101a29; border-bottom: 1px solid #344e72; }
.search-results p { margin-bottom: .5rem; color: var(--muted); font-size: .875rem; }
.search-results ol { max-height: 18rem; overflow-y: auto; list-style: none; padding: 0; margin: 0; }
.search-results li + li { border-top: 1px solid var(--line); }
.search-results a { display: grid; gap: .4rem; padding: .8rem .5rem; font-size: 1rem; text-decoration: none; overflow-wrap: anywhere; }
.search-results a:hover { background: #1a2940; }
.search-results a span { color: var(--text); white-space: pre-wrap; }
.search-results a small { color: var(--muted); }
.thread-bar { display: flex; gap: 1rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid #374463; background: #171c2a; }
.thread-bar > div { min-width: 0; }
.thread-bar h3 { margin: 0 0 .3rem; overflow-wrap: anywhere; }
.thread-bar p { margin: 0; color: var(--muted); font-size: .875rem; }
.thread-bar button { flex-shrink: 0; }
.message-list { scroll-behavior: auto; overflow-anchor: none; height: clamp(20rem, 48vh, 40rem); }
.message:focus-visible, .message-list:focus-visible, .work-card:focus-visible, .presence-member:focus-visible, .event-list li:focus-visible, #room-title:focus-visible, #conversation-title:focus-visible, #thread-title:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.message-time { margin-left: auto; text-decoration: none; }
.message-time time { color: var(--muted); }
.message-links { flex-wrap: wrap; gap: .3rem 1rem; }
.message-to-work, .thread-link { font-size: .875rem; }
.thread-link { padding: .4rem .65rem; border: 1px solid #374b68; border-radius: .45rem; background: #172335; color: #bcd5ff; }
.reply-preview { display: block; padding: .3rem 0; }
.reactions { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .15rem; }
.reaction { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 44px; min-height: 44px; padding: .25rem .5rem; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); font-size: .875rem; }
.reaction.used { color: var(--text); background: #1a2940; }
.reaction[aria-pressed="true"] { color: #d5e4ff; background: #21385c; border-color: var(--blue); }
.reaction:hover { border-color: var(--blue); }
button:disabled { cursor: wait; opacity: .6; }
.new-messages-button { display: block; width: calc(100% - 2rem); margin: .5rem 1rem; border: 1px solid #4777b1; border-radius: .4rem; color: #dceaff; background: #1c3454; }
.conversation-boundaries { margin-top: .6rem; color: var(--muted); font-size: .875rem; }
.conversation-boundaries summary { cursor: pointer; padding: .35rem 0; }
.conversation-boundaries p { margin: .4rem 0 0; line-height: 1.5; }
.count-chip { padding-inline: .6rem; white-space: nowrap; }
@media (max-width: 1180px) { .community-shell { grid-template-columns: 10rem minmax(0, 1fr) 21rem; } }
@media (max-width: 1020px) {
  .community-shell { display: block; }
  .context-rail { padding: 0 1rem 2rem; }
}
@media (max-width: 500px) {
  .thread-bar { flex-direction: column; align-items: stretch; gap: .5rem; }
  .message-list { height: 60dvh; min-height: 18rem; }
  .conversation-header { flex-wrap: wrap; }
  .room-presence-summary { white-space: normal; }
}

/* One quiet return entry before conversation; deeper history is disclosed. */
.return-brief-panel { padding: 0; overflow: hidden; margin-bottom: 1rem; }
.return-brief-panel > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .75rem 2.5rem .75rem 1rem; cursor: pointer; list-style: none; min-height: 44px; }
.return-brief-panel > summary::-webkit-details-marker { display: none; }
.return-brief-panel > summary::after { content: "▸"; position: absolute; right: .9rem; margin-top: .35rem; color: var(--muted); }
.return-brief-panel[open] > summary::after { content: "▾"; }
.return-brief-panel > summary { position: relative; font-size: 1rem; }
.catchup-signals { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--muted); }
.catchup-signals, .catchup-signals small { font-size: .875rem; font-weight: 400; }
.catchup-signals :empty { display: none; }
.return-brief-body { display: grid; gap: .9rem; padding: 0 .85rem .85rem; border-top: 1px solid var(--line-soft); }
.return-brief-body h3 { margin: .75rem 0 .5rem; font-size: 1rem; }
.return-brief-body details > summary { min-height: 44px; padding: .65rem 0; cursor: pointer; font-size: .875rem; }
.rb-boundary { display: block; font-size: .75rem; font-weight: 400; color: var(--muted); }
.rb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.rb-event { font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
#rb-attention-list .rb-event { display: grid; gap: .15rem; padding-block: .35rem; }
.rb-event .work-link { color: var(--blue); font-size: .875rem; text-decoration: underline; text-underline-offset: .18em; }
#rb-attention-list .work-link { font-size: 1rem; padding-block: .3rem; min-height: 44px; display: flex; align-items: center; }
#rb-show-all { font-size: .875rem; min-height: 44px; }
.rb-event-link { display: block; padding: .16rem; border-radius: .2rem; color: inherit; text-decoration: none; }
.rb-event-link:hover { background: #1a2940; }
.rb-seq { color: var(--muted); font-variant-numeric: tabular-nums; }
.rb-type { color: var(--muted); }
.rb-actor { font-weight: 600; }
.rb-detail { color: var(--muted); }
.rb-empty { font-size: .875rem; color: var(--muted); list-style: none; }
.rb-history { max-height: 16rem; overflow-y: auto; }
.rb-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.rb-note { margin: .45rem 0 0; font-size: .875rem; color: var(--muted); }
.rb-note:empty { display: none; }

/* Narrow widths: the rail stacks and the brief reads as a full-width sheet/panel */
@media (max-width: 780px) {
  .return-brief-panel { border-radius: 14px; box-shadow: var(--shadow); }
  .return-brief-panel > summary { padding: .65rem 2rem .65rem .85rem; }
  .return-brief-body { padding: 0 1rem 1rem; }
  .rb-history { max-height: 45vh; }
}
.share-dialog { width: min(38rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.5rem; border-radius: 1rem; }
.share-dialog p, .share-dialog label, .share-dialog input, .share-dialog select { font-size: 1rem; line-height: 1.5; }
.share-dialog label { display: block; margin-block: .75rem .35rem; }
.share-dialog textarea { font-size: 1rem; overflow-wrap: anywhere; }
.share-dialog input, .share-dialog select { width: 100%; min-height: 2.75rem; }
.share-dialog .button { margin-block: .5rem; }
.share-dialog > .panel-header { padding: 0 0 .75rem; align-items: flex-start; flex-wrap: nowrap; }
.share-dialog > .panel-header h2 { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.share-dialog > .panel-header .button { flex-shrink: 0; margin: 0; }
.share-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.share-link-list { padding-left: 1.25rem; }
.share-link-list li { padding-block: .5rem; }
.share-dialog details { margin-block: .75rem; }
.share-dialog summary { cursor: pointer; min-height: 44px; padding-block: .65rem; font-size: .875rem; color: var(--muted); }
#share-settings-summary { display: block; padding-left: 1rem; font-size: .8rem; margin-top: .2rem; }
#share-link-form > .button { width: 100%; }
#share-management { border-top: 1px solid var(--line-soft); padding-top: .35rem; }
#share-link-status:empty, #share-management-status:empty { display: none; }
#share-link-url { font-family: inherit; }
@media (max-width: 480px) { .share-settings { grid-template-columns: 1fr; gap: 0; } }

/* Font-relative reflow: fixed viewport breakpoints alone miss enlarged text.
   em in a container query uses this container's computed font size. */
.app-shell { container: room-shell / inline-size; }
@container room-shell (max-width: 70em) {
  .community-shell { display: block; }
  .topbar { position: static; flex-wrap: wrap; }
  .topbar-actions { min-width: 0; }
  .room-heading { flex-wrap: wrap; }
  .room-heading > *, .room-presence-summary { min-width: 0; max-width: 100%; }
  .room-presence-summary { white-space: normal; }
  .member-stack { flex-wrap: wrap; }
  .context-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 1rem 2rem; }
  .context-rail .work-panel, .context-rail .record-panel, .context-rail .return-brief-panel { grid-column: 1 / -1; }
  .context-rail .work-list { max-height: none; }
  .room-stage h1 { overflow-wrap: anywhere; }
  .composer-toolbar, .composer-row, .message-links, .reply-bar, .cursor-row { flex-wrap: wrap; }
}
@container room-shell (max-width: 40em) {
  .topbar, .room-heading { flex-direction: column; align-items: stretch; }
  .new-work-form { margin: .5rem; padding: .5rem; }
  .work-checks { padding: .5rem; }
  .form-actions { flex-wrap: wrap; }
  .form-actions .button { max-width: 100%; overflow-wrap: anywhere; }
  .context-rail { grid-template-columns: minmax(0, 1fr); }
  .context-rail .summary-grid { grid-template-columns: minmax(0, 1fr); }
  .composer-toolbar select { width: 100%; }
  .composer-toolbar .text-button { margin-left: 0; }
  .message { grid-template-columns: minmax(0, 1fr); }
  .message-avatar { display: none; }
  .work-facts > div { grid-template-columns: minmax(0, 1fr); }
}

/* Conversation first. These surfaces reveal detail without relocating controls. */
.topbar { position: static; min-height: 4rem; background: var(--bg); backdrop-filter: none; }
.brand-mark { border-radius: .75rem; background: var(--panel-raised); border-color: var(--line); }
.topbar-actions { align-items: center; flex-direction: row; gap: .5rem; }
#identity-label { font-size: .8rem; color: var(--muted); }
.icon-button { display: inline-grid; place-items: center; min-width: 44px; width: 44px; height: 44px; align-self: end; padding: .5rem; border-radius: 50%; }
.icon-button svg { pointer-events: none; }
.community-shell { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; }
.room-navigation { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .35rem 1rem; padding: .4rem 1.5rem; border-bottom: 1px solid var(--line); }
.room-navigation button { min-height: 44px; padding: .35rem .6rem; }
.room-navigation span { font-size: .85em; }
#conversation-title, #work-title, #return-brief-panel { scroll-margin-top: 1rem; }
@media (max-width: 1020px) {
  .room-navigation { position: sticky; top: 0; z-index: 6; background: var(--bg); }
  #work-title, #return-brief-panel, #conversation-title, #people-panel { scroll-margin-top: 3.5rem; }
}
.return-help { margin-top: 1rem; font-size: .9rem; }
.return-help p { max-width: 44rem; }
.room-stage .room-heading { align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.room-stage h1 { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; letter-spacing: -.035em; }
.room-about { color: var(--muted); font-size: .875rem; }
.room-about .room-purpose { font-size: .875rem; margin-top: .5rem; }
.room-presence-summary { flex-shrink: 0; }
.room-presence-summary > span { color: var(--muted); }
.conversation-panel { overflow: hidden; }
.room-stage .conversation-panel { min-height: 0; }
.conversation-header { border: 0; padding-bottom: .25rem; }
.conversation-search { border: 0; }
.conversation-search input { border-color: transparent; background: var(--bg); }
.message-list { min-height: 16rem; height: clamp(16rem, 43dvh, 38rem); padding-inline: 1.25rem; }
.message-meta span { border: 0; padding: 0; text-transform: none; font-size: .75rem; }
.message-links { display: inline-flex; flex-wrap: wrap; gap: .75rem; vertical-align: top; }
.reaction { border-color: var(--line-soft); }
.reaction:hover { background: var(--panel-raised); }
.composer { border-top: 1px solid var(--line-soft); background: transparent; }
.composer-toolbar { flex-wrap: wrap; }
.composer-toolbar select { width: auto; max-width: min(100%, 16rem); border-color: transparent; background: transparent; padding-left: 0; font-size: .875rem; }
.audience-note { color: var(--muted); font-size: .75rem; }
.composer-toolbar .text-button { margin-left: auto; font-size: .875rem; }
.composer-row { grid-template-columns: minmax(0, 1fr) 44px; }
.composer-row textarea { border-radius: .85rem; }
#draft-hint { font-size: .75rem; color: var(--muted); }
.conversation-boundaries > summary { min-height: 44px; display: list-item; padding-block: .75rem; }
.cursor-row { border: 0; padding-top: 0; }
.context-rail { display: flex; flex-direction: column; padding-top: 1.5rem; gap: .75rem; }
.context-rail > * { width: 100%; }
.presence-panel > summary, .work-details > summary { cursor: pointer; min-height: 44px; padding: .8rem 1rem; color: var(--muted); }
.work-panel { order: -1; }
.context-rail .work-list { max-height: 65dvh; padding: 0 1rem; gap: 0; }
.work-card { border: 0; border-top: 1px solid var(--line-soft); padding: 1.25rem 0; background: transparent; }
.work-card:first-child { border-top: 0; }
.work-card h3 { margin-top: .65rem; }
.state { border: 0; border-radius: .35rem; text-transform: none; letter-spacing: 0; font-size: .75rem; }
.work-details { margin-top: .5rem; }
.work-drafts, .work-help { overflow-wrap: anywhere; }
.help-offers { list-style: none; margin: .5rem 0; padding: 0; }
.help-offer { padding: .75rem 0; border-top: 1px solid var(--line, #e5e5e5); }
.help-offer p { margin: .4rem 0; white-space: pre-wrap; }
.help-offer-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.help-offer-heading strong { font-size: .875rem; font-weight: 600; }
.help-offer-heading .form-hint { flex-shrink: 0; }
.offer-history > summary { cursor: pointer; padding: .5rem 0; font-size: .8125rem; }
.work-drafts > summary, .work-help > summary { min-height: 44px; padding: .5rem 0; font-size: .875rem; cursor: pointer; }
.work-drafts .source-link { display: block; min-height: 44px; padding: .4rem 0; }
.work-details > summary { padding: .5rem 0; font-size: .875rem; }
.work-details .mode, .work-details .source-link { display: block; margin: .5rem 0; }
.work-details .receipt { border-radius: .6rem; }
.work-actions:empty { display: none; }
.work-actions { margin-top: .25rem; }
.new-work-form { margin: 0; padding: 0; border: 0; background: transparent; }
.new-work-form h2 { margin-bottom: 1.25rem; }
.work-card h3, .work-card .definition { overflow-wrap: anywhere; white-space: pre-wrap; }
.work-link { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 40rem) {
  .work-facts > div, .receipt-attribution > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}
#work-options { margin-block: .75rem; }
#work-options > summary { cursor: pointer; padding: .65rem 0; min-height: 44px; font-size: .875rem; }
#work-options-summary { display: block; padding-block: .25rem; font-size: .8rem; color: var(--muted); }
#work-dialog .form-actions { margin-top: 1.25rem; }
.reviewer-unavailable { padding: .75rem; border: 1px solid var(--line); border-radius: .6rem; margin-bottom: .75rem; }
.reviewer-unavailable p { margin: 0 0 .5rem; font-size: .875rem; line-height: 1.5; color: var(--muted); }
.work-checks { border-radius: .6rem; }
summary { overflow-wrap: anywhere; }
@container room-shell (max-width: 65em) {
  .community-shell { display: block; }
  .context-rail { padding: 0 1rem 2rem; }
  .context-rail .work-list { max-height: none; }
}
@container room-shell (max-width: 40em) {
  .topbar { flex-direction: row; align-items: center; gap: .5rem; }
  .brand div { display: none; }
  .brand-mark { width: 2rem; }
  .topbar-actions { justify-content: end; margin-left: auto; }
  #identity-label { flex-basis: auto; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .room-stage .room-heading { align-items: start; }
  .room-presence-summary { display: none; }
  .composer-toolbar .text-button { margin-left: 0; }
  .composer-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .message { grid-template-columns: 1.75rem minmax(0, 1fr); gap: .5rem; }
  .message-avatar { display: grid; width: 1.75rem; height: 1.75rem; }
  .message-list { padding-inline: .75rem; min-height: 12rem; height: clamp(12rem, 26dvh, 18rem); }
  .work-checks { padding: .5rem; }
}
/* Private setup stays within narrow mobile dialogs; never show it by default. */
#agent-connect-dialog pre { white-space: pre-wrap; overflow-wrap: anywhere; }
#agent-connect-dialog textarea { max-width: 100%; overflow-wrap: anywhere; }
.agent-roster { display: flex; flex-wrap: wrap; gap: .45rem; margin: .45rem 0 .2rem; }
.agent-roster .button { width: auto; min-height: 44px; padding: 0 .7rem; }
.agent-capabilities { margin: .2rem 0 .6rem; padding-left: 1.1rem; }
.agent-capabilities li { margin: .15rem 0; }
#agent-host-snippets pre { overflow-x: auto; font-size: .78rem; }
.pending-save { margin: 0 1rem 1rem; max-width: calc(100% - 2rem); }
#room-instructions-dialog { width: min(38rem, calc(100vw - 2rem)); box-sizing: border-box; }
#room-instructions-dialog p { overflow-wrap: anywhere; }
#room-instructions-view p, #room-instructions-comparison p { white-space: pre-wrap; font-size: 1rem; line-height: 1.5; }
#room-instructions-dialog h3 { margin: 1rem 0 .25rem; font-size: 1rem; }
#room-instructions-dialog label { display: grid; gap: .35rem; margin: .85rem 0; font-size: 1rem; }
#room-instructions-dialog textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; resize: vertical; }
.instructions-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
#room-instructions-latest { border-left: 2px solid currentColor; padding-left: .75rem; margin: 1rem 0; }

/* Inbox and Rooms share the shell; private source content stays in its own view. */
.workspace-nav { display: flex; gap: 1.5rem; padding: 0 1rem; border-bottom: 1px solid var(--line); }
.workspace-nav button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); padding: .9rem .2rem; font: inherit; cursor: pointer; }
.workspace-nav button[aria-current="page"] { color: var(--text); border-bottom-color: currentColor; }
.inbox-panel { display: grid; grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr); min-height: 65vh; }
.inbox-sidebar { padding: 1.25rem 1rem; border-right: 1px solid var(--line); }
.inbox-sidebar header, .inbox-source-heading, .inbox-draft-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.inbox-sidebar h1 { font-size: 1.25rem; margin: 0; }
.inbox-row { display: grid; gap: .4rem; width: 100%; padding: 1rem .75rem; border: 0; border-radius: .5rem; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.inbox-row span { font-size: .8rem; color: var(--muted); }
.inbox-row strong { font-weight: 550; }
#account-rooms-list .inbox-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 44px; }
#account-rooms-list .inbox-row span { font-size: .9rem; min-height: 44px; display: inline-flex; align-items: center; }
#agent-import-checklist { margin: 0 0 1rem; padding-left: 1.25rem; display: grid; gap: .45rem; }
#agent-import-checklist code { display: block; margin-top: .25rem; overflow-wrap: anywhere; }
.inbox-row[aria-current="true"] { background: rgba(128, 160, 160, .12); }
.inbox-row:hover { background: rgba(128, 160, 160, .08); }
.inbox-reader { padding: clamp(1.2rem, 4vw, 3rem); max-height: calc(100vh - 12rem); overflow-y: auto; }
.inbox-reader > * { max-width: 46rem; margin-left: auto; margin-right: auto; }
.inbox-source-heading { align-items: flex-start; }
.inbox-source-heading h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); line-height: 1.2; margin: .55rem 0 .75rem; }
.inbox-source-body { margin-top: 2rem; margin-bottom: 2.5rem; line-height: 1.65; }
.inbox-source-body p { white-space: pre-wrap; }
.inbox-reader, .inbox-row, .inbox-share-dialog { overflow-wrap: anywhere; }
.inbox-draft-form { display: grid; gap: .8rem; }
.inbox-draft-form label { font-weight: 550; }
.inbox-draft-form textarea { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.5; padding: 1rem; resize: vertical; }
.inbox-draft-actions { flex-wrap: wrap; justify-content: flex-end; }
.inbox-draft-actions [role="status"] { margin-right: auto; color: var(--muted); font-size: .85rem; }
.inbox-conflict { border-left: 2px solid currentColor; padding-left: 1rem; margin-top: 2rem; }
.inbox-conflict h3 { font-size: 1rem; }
.inbox-conflict pre { white-space: pre-wrap; font: inherit; }
.inbox-conflict > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.inbox-results { margin-bottom: 2rem; }
.inbox-results h3 { font-size: .9rem; color: var(--muted); }
.inbox-result-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .6rem 0; }
.inbox-result-row > span { color: var(--muted); font-size: .85rem; flex: 1; }
#inbox-result-dialog pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.6; }
#inbox-result-dialog details { margin: 1rem 0; }
#inbox-origin:empty { display: none; }
.inbox-send-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; }
.inbox-send-panel > p { flex: 1; margin: 0; }
.inbox-send-panel > div { margin-left: auto; }
.inbox-send-panel p:empty { display: none; }
#inbox-send-body, #inbox-reply-body { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.6; }
#inbox-reply-local-body, #inbox-reply-original-body { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.6; }
#inbox-reply-dialog.comparing { width: min(58rem, calc(100vw - 2rem)); }
.inbox-reply-versions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.inbox-reply-versions h3 { margin: 0; font-size: .85rem; color: var(--muted); }
#inbox-reply-local-state { font-weight: 400; }
#inbox-reply-original { margin: 1rem 0; color: var(--muted); }
#inbox-reply-original pre { color: var(--text); }
@media (min-width: 700px) {
  .comparing .inbox-reply-versions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .comparing #inbox-reply-local { border-left: 1px solid var(--line-soft); padding-left: 1.5rem; }
}
.inbox-reply-addresses { display: grid; gap: .4rem; font-size: .85rem; }
.inbox-reply-addresses > div { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: .6rem; }
.inbox-reply-addresses dt { color: var(--muted); }
.inbox-reply-addresses dd { margin: 0; }
#inbox-reply-subject { font-size: 1.05rem; margin-top: 1.4rem; }
#inbox-send-subject { font-size: 1rem; }
.inbox-share-dialog { width: min(38rem, calc(100vw - 2rem)); box-sizing: border-box; max-height: 90vh; overflow: auto; }
#inbox-share-paragraphs label { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 0; line-height: 1.5; }
#inbox-share-paragraphs input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; min-height: 1.1rem; margin-top: .3rem; }
#inbox-share-paragraphs span { white-space: pre-wrap; }
.inbox-back { display: none; }
.room-heading-actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.work-views { display: flex; align-items: center; gap: .75rem; }
.work-views h2 { margin: 0; font: inherit; }
.work-views button { background: none; border: 0; padding: .35rem 0; min-height: 44px; font: inherit; color: var(--muted); cursor: pointer; }
.work-views button[aria-pressed="true"] { color: var(--text); font-weight: 700; }
.result-row { padding: 1rem 0; border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.result-row:first-child { border-top: 0; }
.result-row > button, .result-row > a { display: block; min-height: 44px; padding: .4rem 0; background: none; border: 0; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.result-row p { margin: .25rem 0 .5rem; color: var(--muted); font-size: .875rem; }
.result-row .result-meta { display: flex; align-items: center; gap: .75rem; font-size: .75rem; color: var(--muted); }
#room-actions-open { white-space: nowrap; min-height: 44px; }
#room-actions-open kbd { margin-left: .4rem; color: var(--muted); font: inherit; font-size: .75rem; }
#room-actions-dialog { width: min(30rem, calc(100vw - 1.5rem)); padding: 1rem; }
#room-actions-dialog .panel-header { margin-bottom: .75rem; }
#room-actions-dialog h2 { font-size: 1rem; }
#room-actions-query { width: 100%; box-sizing: border-box; }
#room-actions-list { display: grid; gap: .15rem; margin-top: .5rem; }
#room-actions-list button { border: 0; border-radius: .4rem; padding: .65rem .75rem; min-height: 44px; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
#room-actions-list button:hover, #room-actions-list button:focus-visible { background: var(--panel-soft, #202735); }
@media (pointer: coarse) { #room-actions-open kbd { display: none; } }
@container room-shell (max-width: 40em) {
  .room-stage .room-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .75rem; }
  .room-heading > div:first-child { display: contents; }
  .room-heading h1 { grid-column: 1 / -1; }
  .room-heading .room-about { grid-column: 1; align-self: center; }
  .room-heading-actions { grid-column: 2; grid-row: 2; }
}
.app-shell:has(#inbox-panel:not([hidden])) .connection-bar,
.app-shell:has(#inbox-panel:not([hidden])) #invite-people-button,
.app-shell:has(#inbox-panel:not([hidden])) #refresh-button { display: none; }
.app-shell:has(#inbox-panel:not([hidden])) .workspace-nav {
  position: sticky; top: 0; z-index: 3; background: var(--bg);
}
#inbox-share-paragraphs label { color: var(--text); font-weight: 400; letter-spacing: normal; }
#inbox-share-audience { max-height: 8rem; overflow-y: auto; }
#inbox-excerpt-text { box-sizing: border-box; }
#inbox-excerpt-preview { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 16rem; overflow: auto; font: inherit; }
@media (max-width: 720px) {
  .inbox-panel { grid-template-columns: minmax(0, 1fr); }
  .inbox-sidebar { border-right: 0; }
  .inbox-panel:not(.reading) .inbox-reader, .inbox-panel.reading .inbox-sidebar { display: none; }
  .inbox-reader { max-height: none; padding: 1.25rem; }
  .inbox-panel.reading .inbox-back { display: block; margin: 1rem 1.25rem 0; text-align: left; }
  .inbox-source-heading { flex-wrap: wrap; }
}
/* Files stay subordinate to the conversation, with a full keyboard/touch target. */
.message-files { display: flex; flex-wrap: wrap; gap: .5rem; }
.message-files:empty { display: none; }
.file-download { display: flex; align-items: center; gap: .75rem; max-width: 100%; min-height: 44px; }
.file-download span { overflow-wrap: anywhere; text-align: left; min-width: 0; }
.file-download small { flex-shrink: 0; }
.composer-file { display: flex; gap: .5rem; align-items: center; min-height: 44px; }
.composer-file > span { overflow-wrap: anywhere; min-width: 0; flex: 1; }
.composer-file button { min-height: 44px; }
#composer-files > small { display: block; margin: .25rem 0; }
#automations-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; }
.automation-heading, .automation-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.automation-layout { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr); gap: 1.25rem; }
#automation-list { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; }
#automation-list button { text-align: left; overflow-wrap: anywhere; }
#automation-list [aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: -2px; }
.automation-prompt { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; max-height: 200px; overflow: auto; }
.automation-limits { display: grid; gap: .5rem; }
#automation-form { margin-top: 1rem; }
#automation-form input, #automation-form select, #automation-form textarea { box-sizing: border-box; width: 100%; margin: .25rem 0 .75rem; }
#automations-dialog button { min-height: 44px; }
#automation-status:empty { display: none; }
@media (max-width: 600px) { .automation-layout { grid-template-columns: minmax(0, 1fr); } }
/* Symbol-only actions retain generous targets and native keyboard operation. */
.quick-action { min-width: 44px; min-height: 44px; font-size: 1.1rem; }