:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  line-height: 1.5;
  --ink: #e8e5dc;
  --ink-strong: #fbfaf5;
  --ink-muted: #9ca8a6;
  --ink-faint: #6f7c7a;
  --canvas: #0f1416;
  --surface: #151c1e;
  --surface-raised: #1b2426;
  --surface-soft: #202a2b;
  --line: #2a3638;
  --line-strong: #3a494a;
  --teal: #72c7b5;
  --teal-strong: #9be0ce;
  --amber: #f2b66d;
  --coral: #ef8e79;
  --blue: #8cb8e8;
  --shadow: rgb(0 0 0 / 25%);
  --radius-sm: 6px;
  --radius-md: 10px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { min-block-size: 100%; background: var(--canvas); }

body {
  min-block-size: 100vh;
  min-block-size: 100svh;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
}

button, input, textarea, select { min-inline-size: 0; font: inherit; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
[hidden] { display: none !important; }

:where(button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

svg { inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.brand-mark svg, .conversation-icon svg { fill: currentColor; stroke: none; }

.icon-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.skip-link {
  position: fixed;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  z-index: 100;
  padding: .55rem .8rem;
  border-radius: var(--radius-sm);
  color: #121718;
  background: var(--amber);
  font-weight: 700;
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.app-frame {
  display: grid;
  grid-template-columns: minmax(238px, 278px) minmax(0, 1fr) minmax(246px, 296px);
  min-block-size: 100vh;
  min-block-size: 100svh;
  overflow: hidden;
  background: var(--canvas);
}

.sidebar, .inspector { background: var(--surface); }
.sidebar { display: flex; min-block-size: 100vh; min-block-size: 100svh; flex-direction: column; padding: 1.45rem .85rem .8rem; border-inline-end: 1px solid var(--line); }
.inspector { min-block-size: 100vh; min-block-size: 100svh; padding: 1.55rem 1.15rem 1rem; border-inline-start: 1px solid var(--line); overflow-y: auto; }
.icon-button.sidebar-toggle, .sidebar-backdrop { display: none; }

.brand-lockup { display: flex; align-items: center; gap: .7rem; padding: 0 .5rem 1.5rem; }
.brand-mark { display: grid; inline-size: 2.25rem; block-size: 2.25rem; place-items: center; border: 1px solid #4b6f69; border-radius: 8px; color: var(--teal-strong); background: #1a302f; }
.brand-mark svg { inline-size: 1.35rem; block-size: 1.35rem; }
.brand-name { margin: 0; color: var(--ink-strong); font-size: .78rem; font-weight: 800; letter-spacing: .13em; }
.brand-name span { color: var(--teal); font-weight: 650; }
.brand-subtitle { margin: .12rem 0 0; color: var(--ink-muted); font-size: .72rem; }

.new-thread-button { display: flex; align-items: center; gap: .6rem; min-block-size: 2.7rem; padding: 0 .75rem; border: 1px solid #41665f; border-radius: var(--radius-sm); color: #0e1717; background: var(--teal); font-size: .86rem; font-weight: 750; }
.new-thread-button:hover { background: var(--teal-strong); }
.new-thread-button svg { inline-size: 1rem; block-size: 1rem; }
.new-thread-button kbd { margin-inline-start: auto; color: #42645f; background: rgb(255 255 255 / 28%); }

kbd { padding: .1rem .32rem; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink-faint); background: var(--surface-soft); font-family: inherit; font-size: .68rem; line-height: 1.2; }

.search-wrap { display: flex; align-items: center; gap: .45rem; min-block-size: 2.2rem; margin: 1.05rem 0 1.35rem; padding: 0 .65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-faint); background: #12191b; }
.search-wrap:focus-within { border-color: var(--line-strong); color: var(--ink-muted); }
.search-wrap svg { inline-size: .9rem; block-size: .9rem; flex: none; }
.search-wrap input { inline-size: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .79rem; }
.search-wrap input::placeholder { color: var(--ink-faint); }
.search-wrap kbd { margin-inline-start: auto; }

.thread-filters { display: flex; flex-wrap: wrap; gap: .28rem; margin: 0 .45rem 1rem; }
.thread-filter { display: inline-flex; align-items: center; gap: .25rem; min-block-size: 1.65rem; padding: 0 .45rem; border: 1px solid transparent; border-radius: 999px; color: var(--ink-faint); background: #12191b; font-size: .62rem; white-space: nowrap; }
.thread-filter:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface-soft); }
.thread-filter[aria-pressed="true"] { border-color: #42665f; color: var(--teal-strong); background: #1b2b2a; }
.thread-filter span { min-inline-size: 1rem; color: inherit; font-size: .58rem; font-variant-numeric: tabular-nums; text-align: center; }

.thread-list-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 .55rem .55rem; color: var(--ink-muted); font-size: .69rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.muted-count { min-inline-size: 1.3rem; padding: .06rem .3rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-faint); font-size: .65rem; text-align: center; }
.thread-list { display: flex; flex: 1; flex-direction: column; gap: .18rem; min-block-size: 4rem; overflow-y: auto; scrollbar-width: thin; }
.thread-item { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto; gap: .48rem; align-items: start; inline-size: 100%; padding: .63rem .58rem; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--ink-muted); background: transparent; text-align: start; }
.thread-item:hover { color: var(--ink); background: #1b2425; }
.thread-item[aria-current="true"] { border-color: #38524f; color: var(--ink-strong); background: #1b2b2a; }
.thread-item__icon { margin-block-start: .16rem; color: var(--ink-faint); }
.thread-item[aria-current="true"] .thread-item__icon { color: var(--teal); }
.thread-item__body { min-inline-size: 0; }
.thread-item__title { display: block; overflow: hidden; font-size: .79rem; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.thread-item__preview { display: block; overflow: hidden; margin-block-start: .15rem; color: var(--ink-faint); font-size: .69rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.thread-item__time { margin-block-start: .1rem; color: var(--ink-faint); font-size: .62rem; white-space: nowrap; }
.thread-item__lock { inline-size: .75rem; block-size: .75rem; margin-block-start: .18rem; color: var(--amber); }
.thread-empty { padding: 2.3rem .8rem; color: var(--ink-faint); text-align: center; }
.empty-glyph { display: block; margin-block-end: .35rem; color: var(--line-strong); font-size: 1.5rem; line-height: 1; }
.thread-empty p { margin: 0; font-size: .78rem; }
.thread-empty small { display: block; margin-block-start: .25rem; font-size: .68rem; }

.sidebar-footer { display: flex; align-items: center; gap: .5rem; margin-block-start: 1rem; padding: .7rem .45rem .1rem; border-block-start: 1px solid var(--line); }
.bridge-status { display: flex; flex: 1; min-inline-size: 0; align-items: center; gap: .55rem; }
.bridge-status > div { min-inline-size: 0; }
.bridge-status strong, .bridge-status span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bridge-status strong { color: var(--ink); font-size: .73rem; font-weight: 650; }
.bridge-status span:not(.status-dot) { margin-block-start: .05rem; color: var(--ink-faint); font-size: .65rem; }
.status-dot { display: inline-block; inline-size: .46rem; block-size: .46rem; flex: none; border-radius: 50%; background: var(--ink-faint); box-shadow: 0 0 0 3px rgb(111 124 122 / 10%); }
[data-state="online"] .status-dot, [data-state="running"] .status-dot { background: var(--teal); box-shadow: 0 0 0 3px rgb(114 199 181 / 13%); }
[data-state="running"] .status-dot { animation: pulse 1.5s ease-in-out infinite; }
[data-state="error"] .status-dot { background: var(--coral); box-shadow: 0 0 0 3px rgb(239 142 121 / 13%); }
[data-state="waiting"] .status-dot { background: var(--amber); box-shadow: 0 0 0 3px rgb(242 182 109 / 13%); }
@keyframes pulse { 50% { opacity: .45; transform: scale(.74); } }

.icon-button { display: inline-grid; inline-size: 2rem; block-size: 2rem; flex: none; place-items: center; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--ink-muted); background: transparent; }
.icon-button:hover { border-color: var(--line); color: var(--ink); background: var(--surface-soft); }
.icon-button svg { inline-size: 1rem; block-size: 1rem; }

.workspace { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; min-inline-size: 0; min-block-size: 100vh; min-block-size: 100svh; background: #111719; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-block-size: 3.6rem; padding: 0 1.55rem; border-block-end: 1px solid var(--line); }
.topbar-context { display: flex; align-items: center; gap: .75rem; min-inline-size: 0; }
.eyebrow { color: var(--ink-faint); font-size: .64rem; font-weight: 800; letter-spacing: .14em; }
.connection-label { display: inline-flex; align-items: center; gap: .38rem; color: var(--ink-faint); font-size: .68rem; }
.connection-label[data-state="online"] { color: var(--teal); }
.connection-label[data-state="running"] { color: var(--amber); }
.connection-label[data-state="error"] { color: var(--coral); }
.topbar-actions { display: flex; gap: .3rem; }

.conversation-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.45rem 2rem 1.15rem; }
.conversation-title-wrap { display: flex; min-inline-size: 0; align-items: center; gap: .8rem; }
.conversation-icon { display: grid; inline-size: 2.35rem; block-size: 2.35rem; flex: none; place-items: center; border: 1px solid #3e5d58; border-radius: 8px; color: var(--teal); background: #182725; }
.conversation-icon svg { inline-size: 1.2rem; block-size: 1.2rem; }
h1, h2, p { margin-block-start: 0; }
.conversation-head h1 { overflow: hidden; max-inline-size: min(58vw, 44rem); margin: 0; color: var(--ink-strong); font-size: 1.08rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.conversation-head p { overflow: hidden; max-inline-size: 48rem; margin: .23rem 0 0; color: var(--ink-faint); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.state-badge { display: inline-flex; align-items: center; min-block-size: 1.65rem; padding: 0 .55rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-faint); background: #161e20; font-size: .66rem; font-weight: 700; }
.state-badge[data-state="running"] { border-color: #70553a; color: var(--amber); background: #282118; }
.state-badge[data-state="done"] { border-color: #365b53; color: var(--teal); background: #172522; }
.state-badge[data-state="error"] { border-color: #69443d; color: var(--coral); background: #2a1d1c; }

.read-only-note { display: flex; align-items: center; gap: .55rem; margin: 0 2rem .6rem; padding: .5rem .7rem; border: 1px solid #5e4d36; border-radius: var(--radius-sm); color: #d8b580; background: #211d17; font-size: .7rem; }
.read-only-note svg { inline-size: .9rem; block-size: .9rem; flex: none; }
.read-only-note span { flex: 1; min-inline-size: 0; }
.read-only-note button { margin-inline-start: 0; padding: .22rem .45rem; border-radius: 4px; color: var(--amber); background: transparent; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.read-only-note button:first-of-type { margin-inline-start: auto; }
.read-only-note button:hover { background: rgb(242 182 109 / 12%); }

.message-pane { position: relative; min-inline-size: 0; min-block-size: 0; }
.message-list { block-size: 100%; min-inline-size: 0; min-block-size: 0; padding: .5rem 2rem 4.5rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--line-strong) transparent; scrollbar-gutter: stable; touch-action: pan-y; }
.scroll-to-latest { position: absolute; inset-block-end: 1rem; inset-inline-start: 50%; z-index: 3; display: inline-flex; min-block-size: 2.2rem; align-items: center; gap: .42rem; padding: 0 .75rem; border: 1px solid #4c6d66; border-radius: 6px; color: var(--teal-strong); background: #172321; box-shadow: 0 .65rem 1.5rem rgb(0 0 0 / 38%); font-size: .69rem; font-weight: 750; transform: translateX(-50%); white-space: nowrap; }
.scroll-to-latest:hover { border-color: #668e85; background: #1d302d; }
.scroll-to-latest svg { inline-size: .85rem; block-size: .85rem; }
.conversation-empty { display: grid; inline-size: 100%; min-inline-size: 0; min-block-size: 100%; place-content: center; justify-items: center; padding: 4rem 1rem; color: var(--ink-muted); text-align: center; }
.conversation-empty h2 { margin: 1.2rem 0 .35rem; color: var(--ink); font-size: 1rem; }
.conversation-empty p { inline-size: min(100%, 30rem, calc(100vw - 2rem)); max-inline-size: 100%; margin: 0; color: var(--ink-faint); font-size: .75rem; overflow-wrap: anywhere; }
.empty-orbit { display: flex; align-items: center; justify-content: center; gap: .35rem; inline-size: 4rem; block-size: 4rem; border: 1px solid #36524f; border-radius: 50%; color: var(--teal); background: #172524; }
.empty-orbit span { inline-size: .35rem; block-size: .35rem; border-radius: 50%; background: currentColor; }
.empty-orbit span:nth-child(2) { inline-size: .5rem; block-size: .5rem; opacity: .7; }
.empty-orbit span:nth-child(3) { opacity: .35; }

.message-stack { display: flex; flex-direction: column; gap: 1.05rem; max-inline-size: 940px; margin: 0 auto; }
.message-row { display: flex; gap: .75rem; align-items: flex-start; }
.message-row--user { justify-content: flex-end; }
.message-avatar { display: grid; inline-size: 1.8rem; block-size: 1.8rem; flex: none; place-items: center; border-radius: 6px; color: #14201f; background: var(--teal); font-size: .7rem; font-weight: 850; }
.message-row--user .message-avatar { order: 2; color: #221b13; background: var(--amber); }
.message-bubble { min-inline-size: 0; max-inline-size: min(82%, 760px); padding: .72rem .88rem; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); }
.message-row--user .message-bubble { border-color: #5d4c36; background: #29221a; }
.message-meta { display: flex; align-items: center; gap: .5rem; margin-block-end: .38rem; color: var(--ink-faint); font-size: .63rem; }
.message-meta strong { color: var(--ink-muted); font-weight: 700; }
.message-text { margin: 0; color: var(--ink); font-size: .8rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-text code, .message-text pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.message-text code { padding: .08rem .22rem; border-radius: 3px; color: var(--teal-strong); background: #182726; font-size: .76rem; }
.message-text--muted { color: var(--ink-muted); }
.message-time { margin-block-start: .4rem; color: var(--ink-faint); font-size: .62rem; }
.message-card { margin-inline-start: 2.55rem; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 7px; background: #151d1e; }
.message-card__head { display: flex; align-items: center; gap: .45rem; color: var(--ink-muted); font-size: .7rem; font-weight: 700; }
.message-card__head svg { inline-size: .9rem; block-size: .9rem; color: var(--blue); }
.message-card__body { margin: .42rem 0 0; color: var(--ink-faint); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .7rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-card--reasoning { border-style: dashed; background: transparent; }
.message-card--reasoning .message-card__head svg { color: var(--amber); }
.message-card--file .message-card__head svg { color: var(--teal); }

.composer-shell { padding: .4rem 2rem 1.35rem; }
.composer-context { display: flex; align-items: center; gap: .4rem; max-inline-size: 940px; margin: 0 auto .45rem; color: var(--ink-faint); font-size: .67rem; }
.composer-context svg { inline-size: .85rem; block-size: .85rem; color: var(--teal); }
.composer-form { max-inline-size: 940px; margin: 0 auto; padding: .6rem .68rem .5rem; border: 1px solid var(--line-strong); border-radius: 9px; background: #182022; box-shadow: 0 .7rem 1.8rem var(--shadow); }
.composer-form:focus-within { border-color: #567b74; }
.composer-form textarea { display: block; inline-size: 100%; min-block-size: 2.3rem; max-block-size: 10rem; resize: vertical; padding: .25rem .25rem .45rem; border: 0; outline: 0; color: var(--ink-strong); background: transparent; font-size: .8rem; line-height: 1.5; }
.composer-form textarea::placeholder { color: var(--ink-faint); }
.composer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.composer-hint { color: var(--ink-faint); font-size: .65rem; }
.composer-actions { display: flex; align-items: center; gap: .45rem; }
.quick-settings { max-inline-size: 940px; margin: .65rem auto 0; border-block-start: 1px solid var(--line); }
.quick-settings summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-block-size: 1.9rem; padding: .25rem 0; color: var(--ink-faint); cursor: pointer; font-size: .65rem; list-style: none; }
.quick-settings summary::-webkit-details-marker { display: none; }
.quick-settings summary::after { color: var(--ink-faint); content: "+"; font-size: .9rem; line-height: 1; }
.quick-settings[open] summary::after { content: "−"; }
.quick-settings summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.quick-settings__title, .quick-settings__toggle { display: inline-flex; align-items: center; gap: .4rem; }
.quick-settings__title { font-weight: 750; }
.quick-settings__title svg { inline-size: .82rem; block-size: .82rem; color: var(--teal); }
.quick-settings__summary { margin-inline-start: auto; color: var(--ink-faint); }
.quick-settings__body { display: flex; align-items: center; gap: .75rem; min-block-size: 2.25rem; margin-block-end: .15rem; padding: .35rem .55rem; border: 1px solid var(--line); border-radius: 6px; background: #151d1e; }
.quick-settings__toggle { color: var(--ink-muted); font-size: .67rem; cursor: pointer; }
.quick-settings__toggle input { inline-size: .9rem; block-size: .9rem; margin: 0; accent-color: var(--teal); }
.interrupt-button, .send-button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-block-size: 2.05rem; padding: 0 .72rem; border-radius: 5px; font-size: .72rem; font-weight: 750; }
.interrupt-button { border: 1px solid #674b3e; color: var(--coral); background: #271e1b; }
.interrupt-button:hover { background: #33231f; }
.interrupt-button svg { inline-size: .78rem; block-size: .78rem; }
.send-button { color: #14201f; background: var(--teal); }
.send-button:hover { background: var(--teal-strong); }
.send-button svg { inline-size: .82rem; block-size: .82rem; }

.inspector-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding-block-end: 1.3rem; border-block-end: 1px solid var(--line); }
.inspector h2 { margin: .25rem 0 0; color: var(--ink-strong); font-size: .98rem; }
.inspector-section { padding-block: 1.25rem; border-block-end: 1px solid var(--line); }
.section-label { margin-block-end: .65rem; color: var(--ink-faint); font-size: .63rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.run-status-card { display: flex; align-items: center; gap: .65rem; padding: .75rem; border: 1px solid var(--line); border-radius: 7px; background: #171f20; }
.run-status-icon { display: grid; inline-size: 1.75rem; block-size: 1.75rem; flex: none; place-items: center; border-radius: 6px; color: var(--teal); background: #1d302d; }
.run-status-card[data-state="running"] .run-status-icon { color: var(--amber); background: #30271b; }
.run-status-card[data-state="error"] .run-status-icon { color: var(--coral); background: #30201f; }
.run-status-card strong, .run-status-card span { display: block; }
.run-status-card strong { color: var(--ink); font-size: .72rem; }
.run-status-card span { margin-block-start: .15rem; color: var(--ink-faint); font-size: .64rem; line-height: 1.35; }
.detail-list { display: flex; flex-direction: column; gap: .55rem; }
.detail-row { display: flex; align-items: flex-start; gap: .5rem; color: var(--ink-muted); font-size: .7rem; line-height: 1.4; }
.detail-row svg { inline-size: .84rem; block-size: .84rem; flex: none; margin-block-start: .13rem; color: var(--ink-faint); }
.detail-row span { min-inline-size: 0; overflow-wrap: anywhere; }
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.metric { min-block-size: 3.7rem; padding: .55rem .45rem; border: 1px solid var(--line); border-radius: 6px; background: #171f20; text-align: center; }
.metric span, .metric small { display: block; }
.metric span { overflow: hidden; color: var(--ink-strong); font-size: .95rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.metric small { margin-block-start: .18rem; color: var(--ink-faint); font-size: .6rem; }
.event-label { display: flex; align-items: center; justify-content: space-between; }
.text-button { padding: .1rem 0; color: var(--ink-faint); background: transparent; font-size: .62rem; }
.text-button:hover { color: var(--ink); }
.event-list { display: flex; max-block-size: 14rem; flex-direction: column; gap: .55rem; overflow-y: auto; scrollbar-width: thin; }
.event-row { display: grid; grid-template-columns: .42rem minmax(0, 1fr); gap: .48rem; align-items: start; }
.event-row::before { inline-size: .35rem; block-size: .35rem; margin-block-start: .25rem; border-radius: 50%; background: var(--teal); content: ""; }
.event-row[data-kind="codex_error"]::before, .event-row[data-kind="bridge_error"]::before { background: var(--coral); }
.event-row[data-kind="turn_started"]::before { background: var(--amber); }
.event-row__title { overflow: hidden; color: var(--ink-muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.event-row__time { margin-block-start: .08rem; color: var(--ink-faint); font-size: .58rem; }
.event-empty { margin: .2rem 0; color: var(--ink-faint); font-size: .67rem; }

.toast-region { position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; z-index: 20; display: flex; max-inline-size: min(23rem, calc(100vw - 2rem)); flex-direction: column; gap: .45rem; }
.toast { padding: .65rem .8rem; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); background: #202a2b; box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / 35%); font-size: .72rem; }
.toast[data-tone="error"] { border-color: #69443d; color: #ffd0c3; background: #2a1d1c; }

.modal-dialog { inline-size: min(100% - 2rem, 29rem); padding: 0; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); background: var(--surface-raised); box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 55%); }
.modal-dialog::backdrop { background: rgb(5 8 9 / 72%); backdrop-filter: blur(3px); }
.modal-card { position: relative; padding: 1.45rem; }
.modal-close { position: absolute; inset-block-start: .8rem; inset-inline-end: .8rem; }
.modal-kicker { color: var(--teal); font-size: .61rem; font-weight: 800; letter-spacing: .14em; }
.modal-card h2 { margin: .35rem 0 .35rem; color: var(--ink-strong); font-size: 1.05rem; }
.modal-card > p { margin: 0 0 1.1rem; color: var(--ink-muted); font-size: .73rem; line-height: 1.55; }
.modal-card code { color: var(--teal-strong); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .7rem; }
.modal-card label { display: block; margin-block-end: .35rem; color: var(--ink-muted); font-size: .68rem; font-weight: 700; }
.modal-card input, .modal-card select { inline-size: 100%; min-block-size: 2.35rem; margin-block-end: .85rem; padding: .45rem .6rem; border: 1px solid var(--line-strong); border-radius: 5px; outline: 0; color: var(--ink); background: #12191b; font-size: .76rem; }
.modal-card input:focus, .modal-card select:focus { border-color: #628a81; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); gap: .65rem; }
.form-error { margin-block-start: -.35rem !important; color: var(--coral) !important; font-size: .68rem !important; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-block-start: 1rem; }
.primary-button, .secondary-button { min-block-size: 2.25rem; padding: 0 .8rem; border-radius: 5px; font-size: .72rem; font-weight: 750; }
.primary-button { color: #14201f; background: var(--teal); }
.primary-button:hover { background: var(--teal-strong); }
.secondary-button { border: 1px solid var(--line-strong); color: var(--ink-muted); background: transparent; }
.secondary-button:hover { color: var(--ink); background: var(--surface-soft); }
.approval-details { max-block-size: 10rem; margin: 0; padding: .65rem; overflow: auto; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-faint); background: #12191b; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .66rem; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 1180px) {
  .app-frame { grid-template-columns: minmax(224px, 252px) minmax(0, 1fr); }
  .inspector { display: none; }
  .inspector.is-open { position: fixed; inset: 0 0 0 auto; z-index: 12; display: block; inline-size: min(296px, 88vw); box-shadow: -1rem 0 2.5rem rgb(0 0 0 / 35%); }
  .inspector-toggle { display: inline-grid; }
}

@media (min-width: 1181px) { .inspector-toggle { display: none; } }

@media (max-width: 760px) {
  body.sidebar-open { overflow: hidden; }
  .app-frame { display: block; overflow: visible; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; inline-size: min(21rem, 88vw); min-block-size: 100vh; min-block-size: 100svh; padding: .85rem .7rem .65rem; border-inline-end: 1px solid var(--line); border-block-end: 0; box-shadow: 1rem 0 2.5rem rgb(0 0 0 / 32%); overflow-y: auto; transform: translateX(-105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  .sidebar.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
  .icon-button.sidebar-toggle { display: inline-grid; inline-size: 2.75rem; block-size: 2.75rem; margin-inline-end: .15rem; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 24; display: block; inline-size: 100%; block-size: 100%; padding: 0; border: 0; border-radius: 0; background: rgb(4 8 9 / 68%); opacity: 0; transition: opacity .22s ease; }
  .sidebar-backdrop.is-visible { opacity: 1; }
  .brand-lockup { padding-block-end: .85rem; }
  .new-thread-button { min-block-size: 2.45rem; }
  .search-wrap { margin: .7rem 0 .75rem; }
  .thread-filters { margin-block-end: .75rem; }
  .thread-list-heading { padding-block-end: .35rem; }
  .thread-list { max-block-size: 9.5rem; }
  .sidebar-footer { margin-block-start: .65rem; padding-block-start: .55rem; }
  .workspace { block-size: 100vh; block-size: 100svh; min-block-size: 100vh; min-block-size: 100svh; }
  .topbar { min-block-size: 3.1rem; padding-inline: .85rem; }
  .topbar .eyebrow { display: none; }
  .conversation-head { align-items: flex-start; padding: 1rem .9rem .8rem; }
  .conversation-head h1 { max-inline-size: 65vw; font-size: .98rem; }
  .conversation-head p { max-inline-size: 70vw; }
  .conversation-actions { padding-block-start: .18rem; }
  .read-only-note { align-items: flex-start; flex-wrap: wrap; margin-inline: .9rem; font-size: .67rem; }
  .read-only-note span { flex-basis: calc(100% - 1.5rem); }
  .read-only-note button { align-self: center; min-block-size: 44px; padding-inline: .65rem; }
  .read-only-note button:first-of-type { margin-inline-start: auto; }
  .message-list { padding-inline: .85rem; padding-block-end: 4.5rem; }
  .scroll-to-latest { min-block-size: 2.75rem; }
  .message-stack { gap: .85rem; }
  .message-bubble { max-inline-size: calc(100% - 2.55rem); }
  .message-card { margin-inline-start: 0; }
  .composer-shell { padding: .35rem .85rem 1rem; }
  .composer-hint { display: none; }
  .composer-toolbar { justify-content: flex-end; }
  .quick-settings { margin-block-start: .5rem; }
  .quick-settings__body { flex-wrap: wrap; }
}

@media (max-width: 430px) {
  .brand-name { font-size: .72rem; }
  .new-thread-button kbd, .search-wrap kbd { display: none; }
  .conversation-title-wrap { gap: .55rem; }
  .conversation-icon { inline-size: 2rem; block-size: 2rem; }
  .state-badge { padding-inline: .42rem; font-size: .6rem; }
  .interrupt-button span { display: none; }
  .interrupt-button { inline-size: 2.05rem; padding: 0; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .scroll-to-latest { inset-inline-end: .7rem; inset-inline-start: auto; padding-inline: .6rem; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-backdrop { transition: none; }
}