/* Studio experience: shared visual hierarchy, responsive work surfaces and preferences. */
:root {
  --bg: #080a0f;
  --side: #0b0d12;
  --raise: #11151c;
  --raise-2: #181d26;
  --raise-3: #222936;
  --raise-4: #30394a;
  --line: #202632;
  --line-2: #303846;
  --line-3: #465166;
  --text: #f1f3f8;
  --text-2: #c1c9d8;
  --text-3: #9aa7bb;
  --text-4: #8794a9;
  --surface: rgb(15 19 27 / .94);
}
body { font-size: 14px; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .48; }
input::placeholder, textarea::placeholder { color: var(--text-4); }
input:not([type=checkbox]):not([type=range]), select, textarea { border-radius: 9px; }
.btn { height: 38px; font-size: 13px; border-radius: 9px; }
.btn.primary { color: #091018; background: #edf2fa; border-color: #edf2fa; box-shadow: 0 2px 5px #0003; }
.btn.primary:hover { background: #fff; transform: translateY(-1px); }
.btn.subtle { border-color: var(--line-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.ib { color: var(--text-3); }
.switch input:focus-visible + span { outline: 2px solid rgb(var(--tint)); outline-offset: 4px; }
.pill { font-size: 11px; letter-spacing: .01em; }

/* A quiet navigation rail with clear, persistent location. */
.app { --side-w: 248px; }
.side { border-color: var(--line); background: var(--side); overflow-y: auto; overscroll-behavior: contain; }
.side-top { height: 78px; flex: none; padding-inline: 12px; }
.brand { gap: 11px; height: 44px; font-size: 14px; letter-spacing: .055em; }
.brand img { width: 30px; height: 30px; }
.brand > span { display: grid; gap: 2px; line-height: 1.3; }
.brand small { font: 9px var(--mono); color: var(--text-4); letter-spacing: .23em; }
.side-actions { padding: 0 12px 14px; gap: 6px; }
.side-row { height: 38px; border-radius: 8px; padding-inline: 11px; font-size: 12.5px; gap: 11px; }
.side-row.strong { border: 1px solid var(--line-2); background: #1a202b; }
.side-row.strong:hover { background: #252e3c; border-color: var(--line-3); }
.side-row .hint { opacity: .8; font-size: 10px; background: transparent; border-color: transparent; }
.side-row.on { background: rgb(var(--tint) / .10); color: #fff; box-shadow: inset 0 0 0 1px rgb(var(--tint) / .13); }
.side-row.on::before { content: ""; position: absolute; left: -12px; height: 18px; width: 3px; background: rgb(var(--tint)); border-radius: 0 3px 3px 0; }
.side-nav { padding: 0 12px 10px; gap: 3px; border-top: 0; flex: none; }
.nav-label { color: var(--text-4); font: 10px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; padding: 12px 11px 6px; }
.nav-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 31px; padding: 8px 11px; border-radius: 5px; text-align: left; cursor: pointer; }
.nav-toggle:hover, .nav-toggle:focus-visible { background: var(--raise-2); color: var(--text-2); }
.nav-toggle::after { content: ""; width: 6px; height: 6px; margin-right: 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; }
.nav-toggle[aria-expanded="false"]::after { transform: rotate(-45deg); }
.nav-group { display: grid; gap: 2px; padding-bottom: 4px; }
.nav-group .side-row { min-height: 35px; }
.side-actions .side-row > svg, .side-nav .side-row > svg { display: none; }
.tabbar button svg { display: none; }
.side-label { padding: 14px 23px 6px; border-top: 1px solid var(--line); font-size: 11px; flex-shrink: 0; }
.chat-group { font-size: 10px; padding-top: 10px; color: var(--text-4); }
.chat { font-size: 12px; border-radius: 8px; height: 34px; }
.chats { padding-inline: 12px; min-height: 80px; }
.chat:focus-within .chat-more, .msg:focus-within .msg-actions { opacity: 1; }
.side-foot { border-color: var(--line); padding: 10px; flex: none; }
.account { border: 1px solid var(--line); background: #10141c; }
.account-text b { font-size: 12px; }
.account-text span { font-size: 11px; margin-top: 3px; }
.avatar, .avatar img { width: 29px; height: 29px; }

/* Header and canvas. Backdrops remain visible around opaque reading surfaces. */
.main { background: var(--bg); }
.top { height: 64px; border-bottom: 1px solid var(--line); background: rgb(10 13 19 / .94); padding: 0 20px; gap: 8px; }
.switcher { font-size: 13px; padding-inline: 10px; gap: 8px; }
.switcher-name { font-weight: 600; }
.switcher-sub { font-size: 11px; border: 1px solid var(--line-2); padding: 2px 7px; border-radius: 5px; }
.crumb { font: 12px var(--sans); gap: 8px; }
.crumb:not(:empty)::before { content: "/"; color: var(--line-3); }
.top-center { justify-content: flex-start; margin-left: 8px; }
.top-title { padding-inline: 4px; text-align: left; font-size: 12px; }
.top-actions { margin-left: auto; gap: 5px; }
.command-trigger { height: 32px; display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line-2); padding: 0 9px; border-radius: 7px; color: var(--text-3); font-size: 11px; }
.command-trigger:hover { color: var(--text); background: var(--raise-2); }
.command-trigger svg { width: 14px; height: 14px; }
.command-trigger kbd { font-size: 9px; padding: 3px 4px; }
#focus-toggle[aria-pressed="true"], #live-toggle[aria-expanded="true"] { color: rgb(var(--tint)); background: rgb(var(--tint) / .1); }
.backdrop { opacity: calc(var(--bd-user) * var(--bd-space) * .64); }
.shade, .app[data-space="home"] .shade { background: linear-gradient(180deg, rgb(8 10 15 / .3), rgb(8 10 15 / .1) 25%, rgb(8 10 15 / .8) 100%); }
.spaces { container-type: inline-size; }
.space-inner { max-width: 1140px; padding: 34px 40px 64px; }
.space[data-space="cad"] { min-height: 100%; }
.cad-shell { display: flex; flex-direction: column; height: 100%; min-height: min(760px, calc(100dvh - 100px)); background: #090f16; }
.cad-bar { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 9px 22px; border-bottom: 1px solid var(--line); background: #0e1520; }
.cad-bar-title { display: grid; gap: 3px; margin-right: auto; }
.cad-bar-title small { color: #8bc5b7; font: 10px var(--mono); letter-spacing: .1em; }
.cad-bar-title strong { color: var(--text); font-size: 14px; }
.cad-live { color: #a4dfce; font-size: 11px; }
.cad-live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #71dbaf; }
.cad-frame { display: block; width: 100%; flex: 1; min-height: 620px; border: 0; background: #081019; }
.cad-unavailable { display: grid; gap: 14px; }
.cad-unavailable h1 { margin: 0; font-size: clamp(28px, 3vw, 40px); }
.cad-unavailable .lede { max-width: 640px; margin: 0; }
.cad-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.cad-steps span { padding: 18px; border: 1px solid var(--line-2); border-radius: 9px; color: var(--text-2); background: var(--raise); font-size: 12px; }
@media (max-width: 700px) {
  .cad-bar { padding: 8px 12px; gap: 8px; }
  .cad-live { display: none; }
  .cad-bar .btn { font-size: 11px; padding-inline: 8px; }
  .cad-frame { min-height: 620px; }
  .cad-steps { grid-template-columns: 1fr; }
}
.space-inner.wide { max-width: 1600px; }
.space-inner.narrow { max-width: 960px; }
.space-head { align-items: center; gap: 22px; margin: 0 0 28px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.space-heading { flex: 1; min-width: min(100%, 260px); }
.eyebrow { display: flex; align-items: center; gap: 8px; font: 10px var(--mono); letter-spacing: .11em; }
.eyebrow svg { width: 15px; height: 15px; }
.space-head h1 { font-size: clamp(28px, 2.7vw, 38px); margin-top: 12px; font-weight: 600; letter-spacing: -.04em; }
.lede { font-size: 13px; line-height: 1.65; margin-top: 10px; max-width: 610px; color: var(--text-3); }
.space-actions { align-items: center; flex-wrap: wrap; gap: 7px; }
.space[aria-busy="true"] .space-head::after { position: absolute; top: 8px; right: 24px; font-size: 10px; }

/* Home is a launch surface, with a task composer and real runtime context. */
.space[data-space="home"] { align-items: flex-start; }
.home { max-width: 1120px; padding: 44px 48px 48px; gap: 18px; margin: 0 auto; justify-items: stretch; }
.home-heading { margin-bottom: 7px; }
.home-eyebrow { color: var(--text-3); font-size: 10px; letter-spacing: .14em; }
.home h1 { text-align: left; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.15; letter-spacing: -.045em; margin-top: 17px; font-weight: 550; }
.home-lede { margin: 12px 0 0; color: var(--text-3); font-size: 14px; }
.home-section-label { display: flex; justify-content: space-between; gap: 16px; align-items: center; font-size: 12px; font-weight: 550; margin-top: 9px; }
.home-section-label > .muted, .home-section-label button { font-size: 11px; font-weight: 400; color: var(--text-3); }
.home-section-label button:hover { color: rgb(var(--tint)); }
.quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.quick button { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; position: relative; gap: 12px; height: auto; min-height: 124px; border-radius: 12px; padding: 15px; background: var(--surface); backdrop-filter: none; text-align: left; }
.quick button:hover { background: #1b2030; border-color: rgb(var(--tint) / .5); transform: translateY(-2px); }
.quick-icon { width: 30px; height: 30px; border: 1px solid rgb(var(--tint) / .18); border-radius: 8px; display: grid; place-items: center; background: rgb(var(--tint) / .07); }
.quick-copy { display: grid; gap: 5px; }
.quick-copy b { color: var(--text); font-size: 12px; font-weight: 550; }
.quick-copy small { color: var(--text-3); font-size: 11px; line-height: 1.45; }
.quick .quick-arrow { position: absolute; top: 22px; right: 12px; width: 13px; height: 13px; color: var(--text-4); }
.home-status { gap: 12px; margin: 0; border: 0; border-radius: 0; background: none; }
.status-cell { border-radius: 12px; padding: 14px 18px; border: 1px solid var(--line-2); background: var(--surface); gap: 4px; }
.status-cell:hover { background: var(--raise-2); border-color: var(--line-3); }
.status-top { display: flex; justify-content: space-between; color: var(--text-3); margin-bottom: 2px; }
.status-top svg { width: 15px; height: 15px; }
.status-top svg:last-child { width: 12px; }
.status-cell b { font: 500 26px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.status-cell > span:last-child { font-size: 11px; }
.recent-chats { gap: 10px; }
.recent-chat { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 13px; background: var(--surface); }
.recent-icon { display: grid; place-items: center; color: var(--text-3); }
.recent-icon svg { width: 17px; }
.recent-copy { min-width: 0; flex: 1; display: grid; gap: 5px; }
.recent-copy b { font-size: 12px; }
.recent-copy small { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-chat > svg { width: 12px; color: var(--text-4); }

/* Readable conversations and a more deliberate composer. */
.composer { border-radius: 18px; background: #121721; border-color: #3b465b; box-shadow: 0 12px 32px #0004; }
.composer:focus-within { border-color: rgb(var(--tint) / .7); box-shadow: 0 0 0 3px rgb(var(--tint) / .08); }
.app[data-space="home"] .composer { box-shadow: 0 14px 42px #0005; }
.composer textarea { padding: 19px 20px 10px; min-height: 70px; font-size: 15px; }
.composer-row { padding: 7px 12px 12px; gap: 8px; }
.cbtn, .chip { border-radius: 9px; height: 32px; background: #191f2a; border-color: #30394b; }
.cbtn { width: 32px; }
.chip { font-size: 11px; padding-inline: 10px; }
.send { border-radius: 10px; width: 34px; height: 34px; }
.composer-hint { font: 10px var(--sans); color: var(--text-4); margin-right: 8px; }
.space[data-space="chat"] .col { width: 100%; max-width: none; padding: 24px clamp(20px, 3.2vw, 64px); }
.scroll { padding-bottom: 220px; }
.bubble { background: #202b3b; border: 1px solid #344157; border-radius: 18px 18px 5px 18px; padding: 14px 19px; }
.msg.ai { padding: 18px 0 28px; }
.msg.ai::before { content: "AXIOM-R"; display: block; color: var(--text-3); font: 600 10px var(--mono); letter-spacing: .1em; margin-bottom: 13px; }
.msg-actions { margin-top: 10px; }
.activity { padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgb(13 17 25 / .92); margin-bottom: 16px; }
.activity.open > .lane { max-height: none; overflow: visible; padding-right: 0; }
.step.think .step-sub { font-style: normal; font-size: 12px; }
.thought-detail { min-width: 0; }
.thought-caption { margin: 2px 0 10px; color: var(--text-3); font-size: 12px; line-height: 1.45; }
.thought.md { max-height: none; overflow: visible; padding: 6px 0 6px 16px; border: 0; border-left: 2px solid var(--line-3); background: transparent; color: var(--text-2); font-size: 14px; font-style: normal; line-height: 1.7; white-space: normal; overflow-wrap: anywhere; }
.thought.md p, .thought.md ul, .thought.md ol { margin-bottom: .65em; }
.thought.md > :last-child { margin-bottom: 0; }
.agent, .blk, .code, .log { background: #0d121b; }
.space[data-space="chat"] .blk,
.space[data-space="chat"] .code pre,
.space[data-space="chat"] .table-scroll,
.space[data-space="chat"] .json-tree { max-height: none; }
.code { border-radius: 10px; }
.code-head { background: #19212e; }
.md table { font-size: 13px; }
.md tbody tr:hover { background: #ffffff04; }
.composer-slot.bottom { background: linear-gradient(180deg, transparent, var(--bg) 38px); }
.composer-slot.bottom .composer-wrap { max-width: 820px; }
.fineprint { font-size: 10px; margin-block: 9px 13px; }

/* Reusable work surfaces and collection navigation. */
.panel, .card, .tool-card, .skill { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--line-2); border-radius: 12px; }
.panel, .card { padding: 21px; }
.card:hover { border-color: var(--line-3); }
.card-row { gap: 9px; }
.card-row > b { font-size: 14px; }
.card-row > .muted { font-size: 12px; }
.card-actions { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 17px; }
.card-actions .btn { margin-top: 0; height: 32px; font-size: 12px; }
.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 16px; }
.stack { gap: 14px; }
.panel-title { color: var(--text); font-size: 12px; letter-spacing: .01em; margin-bottom: 18px; }
.panel-title.spaced { margin-block: 30px 15px; }
.overview-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.overview-cell { border: 1px solid var(--line-2); border-radius: 12px; padding: 17px 20px; background: var(--surface); display: grid; gap: 7px; }
.overview-label { display: flex; gap: 8px; color: var(--text-3); align-items: center; font-size: 11px; }
.overview-label svg { width: 15px; height: 15px; color: rgb(var(--tint)); }
.overview-cell > b { font-size: 29px; font-weight: 550; font-variant-numeric: tabular-nums; line-height: 1.2; }
.overview-cell > small { color: var(--text-4); font-size: 11px; }
.collection-controls { padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: rgb(12 16 23 / .96); gap: 9px; margin-bottom: 20px; }
.collection-search { border: 0; background: transparent; padding-inline: 8px; }
.collection-search:focus-within { outline: 1px solid rgb(var(--tint) / .5); }
.collection-search input { font-size: 12px; padding-block: 6px !important; }
.collection-controls select { font-size: 12px; padding: 6px 10px; }
.collection-controls > span { font: 10px var(--mono); padding: 0 7px; }
.filter-reset { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); padding: 5px; font-size: 11px; border-radius: 6px; }
.filter-reset:hover { background: var(--raise-3); }
.filter-reset svg { width: 12px; height: 12px; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; min-height: 220px; padding: 32px 24px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-3); }
.empty-icon { width: 46px; height: 46px; border: 1px solid rgb(var(--tint) / .2); background: rgb(var(--tint) / .06); border-radius: 13px; display: grid; place-items: center; color: rgb(var(--tint)); }
.empty-icon svg { width: 21px; height: 21px; }
.empty h3 { margin: 3px 0 0; font-size: 17px; font-weight: 500; color: var(--text); }
.empty p { margin: 0; max-width: 420px; font-size: 13px; line-height: 1.65; }
.empty .btn { margin-top: 7px; }
.results { gap: 8px; }
.result { padding: 18px 20px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 10px; gap: 6px; }
.result:hover { border-color: rgb(var(--tint) / .4); background: var(--raise-2); }
.r-meta { font: 10px var(--mono); margin-top: 2px; }
.searchbar { background: var(--surface); border-radius: 12px; }

/* Workspace, knowledge and operations each retain their own useful structure. */
.ws { grid-template-columns: 250px minmax(0, 1fr) 290px; gap: 12px; height: calc(100dvh - 270px); min-height: 460px; }
.ws > .panel { padding: 12px; }
.ws-tree .collection-controls { padding: 4px; }
.ws-tree .collection-search { min-width: 0; }
.ws-view > .empty { height: 100%; border: 0; background: none; }
.ws-changes .empty { min-height: 170px; padding-inline: 14px; background: #0c1119; }
.ws-changes .empty p { font-size: 12px; }
.workspace-path { padding: 0 0 12px; margin-bottom: 10px; }
.workspace-path .btn { padding-inline: 10px; }
.file-row { margin-bottom: 2px; }
.file { height: 36px; }
.file.selected { background: rgb(var(--tint) / .1); color: var(--text); box-shadow: inset 2px 0 rgb(var(--tint)); }
.file-head { min-height: 38px; margin-bottom: 9px; border-bottom: 1px solid var(--line); }
.file-head b { font-size: 11px; }
.segmented { display: inline-flex; gap: 3px; padding: 3px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); margin-bottom: 12px; }
.segmented button { padding: 4px 11px; border-radius: 5px; color: var(--text-3); font-size: 11px; }
.segmented button[aria-pressed="true"] { color: var(--text); background: var(--raise-3); }
.file-document { padding: 18px 12px; }
.skills { grid-template-columns: 270px minmax(0, 1fr); gap: 18px; }
.skill { border-radius: 10px; padding: 16px; gap: 8px; }
.skill.on { background: rgb(var(--tint) / .08); box-shadow: inset 3px 0 rgb(var(--tint)); }
.skill b { color: var(--text); font-size: 12px; }
.skill span { font-size: 12px; }
.doc { max-height: calc(100dvh - 290px); min-height: 340px; padding: 26px; }
.skill-tools { gap: 7px; }
.skill-tools .btn { font-size: 11px; padding-inline: 10px; height: 32px; }
.inline { background: var(--surface); padding: 15px; border-radius: 12px; border: 1px solid var(--line-2); margin-top: 18px; }
.facts li { padding: 12px; background: #111822; border-color: var(--line); }
.facts li.none { min-height: 86px; align-items: center; justify-content: center; border-style: solid; font-size: 12px; }
#model-aliases { margin-bottom: 28px; }
#model-aliases .card > .mono { font-size: 12px; overflow-wrap: anywhere; }
#model-aliases .card { border-top: 2px solid rgb(var(--tint) / .35); }
#sys-out > .profiles-panel { grid-column: 1 / -1; }
.profiles-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 24px; }
.profiles-panel > .panel-title { grid-column: 1 / -1; }
.profile-row { gap: 12px; align-items: flex-start; }
.profile-row b { font-size: 13px; }
.profile-row p { font-size: 12px; }
.profile-row small { font-size: 10px; }
.profile-row .btn { font-size: 11px; padding-inline: 9px; height: 30px; }
.kv { font-size: 12px; gap: 11px 10px; }
.kv code { font-size: 11px; }
.tool-card { padding: 16px 19px; }
.tool-card summary b { font-size: 12px; flex: 1; overflow-wrap: anywhere; }
.tool-card[open] { border-color: rgb(var(--tint) / .4); }

/* Activity, command surfaces and forms. */
.act-dock { background: #0c1018; border-color: var(--line-2); width: 340px; padding-inline: 20px; gap: 10px; }
.act-dock-head { min-height: 64px; border-bottom: 1px solid var(--line); }
.act-dock-head b { font-size: 13px; }
.core { width: 120px; height: 120px; }
.stats div { background: #131a25; border-color: var(--line); border-radius: 9px; }
.stats b { font-size: 23px; }
.events { gap: 7px; }
.events li { padding: 10px; border: 1px solid var(--line); background: #121924; font-size: 11px; }
.events time { font-size: 9px; }
.modal, .palette, .popover, .menu { background: #131923; border-color: #364055; border-radius: 14px; }
.modal { padding: 12px 24px 24px; }
.modal-head { min-height: 50px; margin-bottom: 12px; }
.modal-head h2 { font-size: 19px; font-weight: 550; }
.modal-foot { padding-top: 16px; border-top: 1px solid var(--line); }
.editor-body { gap: 21px; padding: 2px 6px 10px 0; }
.editor-body > p.muted { margin: 0; padding: 12px 14px; border-radius: 9px; background: #1a2230; font-size: 12px; }
.editor-form { max-height: calc(100dvh - 82px); gap: 12px; }
.form-field { gap: 8px; font-size: 12px; }
.form-field small { line-height: 1.5; }
.file-editor { background: #0c111a; line-height: 1.75; }
.settings-section { text-transform: uppercase; letter-spacing: .11em; color: rgb(var(--tint)); font: 10px var(--mono); padding: 15px 0 9px; }
.setting { gap: 24px; padding-block: 17px; }
.setting b { font-size: 13px; }
.setting p { font-size: 12px; }
.setting select { max-width: 170px; font-size: 12px; }
.pal-item { min-height: 46px; }
.pal-item.kb { box-shadow: inset 2px 0 rgb(var(--tint)); background: rgb(var(--tint) / .1); }
.toasts { align-items: flex-end; left: auto; right: 24px; bottom: 24px; transform: none; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: #1c2532; border-color: #3e4c61; border-radius: 10px; font-size: 12px; box-shadow: 0 10px 40px #0005; }
.toast.good { border-color: #287058; }
.toast.bad { border-color: #9b4148; }
.login { background: radial-gradient(ellipse at 50% 35%, #18233c, #080b12 65%); }
.login-card { border: 1px solid var(--line-2); background: #121823; border-radius: 20px; padding: 36px; }

/* Focus changes layout without overwriting the user's saved sidebar/activity choices. */
.app.focus-mode { grid-template-columns: 0 minmax(0, 1fr); }
.focus-mode .side, .focus-mode .act-dock { visibility: hidden; }
.focus-mode .backdrop { display: none; }
.focus-mode .main { margin-right: 0; }
.focus-mode #side-open { display: inline-grid; }
@media (min-width: 1280px) {
  .app.live-open:not(.focus-mode) .main { margin-right: 340px; }
  .app.live-open .act-dock { box-shadow: none; }
}
:root[data-density="compact"] .side-row { height: 32px; }
:root[data-density="compact"] .nav-label { padding-top: 8px; }
:root[data-density="compact"] .card, :root[data-density="compact"] .panel { padding: 14px; }
:root[data-density="compact"] .space-inner { padding-top: 22px; }
:root[data-density="compact"] .space-head { margin-bottom: 18px; padding-bottom: 18px; }
:root[data-density="compact"] .overview-cell { padding: 12px 16px; }
:root[data-density="compact"] .overview-cell > small { display: none; }
:root[data-density="compact"] .collection-controls { padding: 5px; }
:root[data-density="compact"] .skill { padding: 11px 14px; }
:root[data-density="compact"] .tool-card { padding-block: 10px; }

/* Respond to actual available canvas width, including an open activity dock. */
@container (max-width: 1100px) {
  .ws { grid-template-columns: 230px minmax(0, 1fr); height: auto; }
  .ws-changes { grid-column: 1 / -1; }
  .ws-tree, .ws-view { min-height: 370px; max-height: 64vh; }
  .space-inner { padding-inline: 28px; }
  .home { padding-inline: 32px; }
  .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick button { min-height: 100px; flex-direction: row; gap: 10px; padding: 16px 13px; }
  .quick-icon { flex: none; }
  .quick .quick-arrow { display: none; }
}
@container (max-width: 740px) {
  .home { padding: 28px 22px; gap: 14px; }
  .home h1 { font-size: 34px; }
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick button { min-height: 92px; }
  .home-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recent-chats { grid-template-columns: 1fr; }
  .recent-chat:not(:first-child) { display: flex; }
  .space-inner { padding: 26px 20px 40px; }
  .space-head { gap: 18px; }
  .space-actions { width: 100%; }
  .overview-strip { gap: 8px; }
  .overview-cell { padding: 13px 12px; }
  .overview-cell > small { display: none; }
  .overview-label { font-size: 10px; gap: 5px; }
  .overview-label svg { display: none; }
  .overview-cell > b { font-size: 24px; }
  .ws, .skills, .two { grid-template-columns: 1fr; height: auto; }
  .ws-changes { grid-column: auto; }
  .ws-tree, .ws-view { min-height: 0; }
  .ws-view > .empty { min-height: 210px; }
  .doc { max-height: none; }
  .inline { grid-template-columns: 1fr; }
  .collection-search { flex-basis: 100%; }
  .composer-hint { display: none; }
}
@media (max-width: 1100px) {
  .command-trigger > span, .command-trigger kbd { display: none; }
  .command-trigger { width: 32px; justify-content: center; }
  .top { padding-inline: 12px; gap: 3px; }
}
@media (max-width: 900px) {
  .side { width: min(300px, 86vw); --side-w: min(300px, 86vw); }
  .top { height: 58px; gap: 2px; }
  .switcher { padding-inline: 6px; font-size: 12px; gap: 4px; }
  .top-actions { gap: 0; }
  .top .ib { width: 32px; }
  .top .only-collapsed { display: none !important; }
  .working { display: none; }
  .space[data-space="chat"] .col { padding: 16px 18px; }
  .bubble { max-width: 92%; }
  .msg-actions { opacity: 1; flex-wrap: wrap; }
  .composer-slot.bottom { padding: 28px 12px 0; }
  .composer textarea { min-height: 60px; }
  .composer-row { padding-bottom: 9px; }
  .fineprint { font-size: 9px; line-height: 1.4; }
  .tabbar { background: #0e141f; border-color: var(--line-2); }
  .tabbar button.on { background: rgb(var(--tint) / .12); }
  .tabbar button { font-size: 10px; }
  .act-dock { width: min(360px, 94vw); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .toasts { bottom: calc(76px + env(safe-area-inset-bottom)); right: 16px; }
  .file-row > .ib { width: 32px; height: 36px; }
  .setting { gap: 12px; }
  .setting select { max-width: 132px; }
  .setting input[type="range"] { width: 105px; }
  .modal { padding-inline: 18px; }
  .editor-body { padding-right: 2px; }
}
@media (max-width: 440px) {
  .space[data-space="chat"] .col { padding: 14px 12px; }
  .home { padding-inline: 18px; }
  .home h1 { font-size: 31px; }
  .home-lede { font-size: 12px; }
  .home-section-label > .muted { display: none; }
  .quick button { flex-direction: column; min-height: 132px; padding: 14px; }
  .quick-copy b { font-size: 12px; }
  .status-cell { padding: 12px 14px; }
  .space-inner { padding-inline: 16px; }
  .space-head h1 { font-size: 28px; }
  .space-actions .btn { font-size: 11px; padding-inline: 10px; }
  .overview-cell { padding: 12px 10px; }
  .overview-label { font-size: 10px; line-height: 1.4; }
  .profiles-panel { grid-template-columns: minmax(0, 1fr); }
  .command-trigger { display: none; }
  .switcher-name { font-size: 12px; }
}
@media (max-height: 760px) and (min-width: 901px) {
  .side-top { height: 60px; }
  .side-row { height: 32px; }
  .nav-label { padding-top: 8px; }
  .side-actions { padding-bottom: 5px; }
  .home { padding-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .quick button:hover, .btn.primary:hover { transform: none; }
}
@media (max-width: 440px) {
  .quick button:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; min-height: 72px; align-items: center; }
}
/* Documents keep words intact; narrow skill browsers become a horizontal selector. */
.md table { min-width: 480px; }
.md th, .md td { overflow-wrap: normal; }
@container (max-width: 900px) {
  .skills { grid-template-columns: minmax(0, 1fr); }
  .skill-list { display: flex; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; }
  .skill-list .skill { flex: 0 0 235px; min-width: 0; scroll-snap-align: start; }
  .skill-list .skill > span:not(.pill) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .doc { max-height: none; }
}

/* Mission authoring, transcript inspection, and connected workflow controls. */
.mission-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.mission-card { display:grid; gap:9px; padding:17px; border:1px solid var(--line-2); border-radius:12px; background:#111822; text-align:left; }
.mission-card > svg { color:rgb(var(--tint)); }
.mission-card b { font-size:13px; font-weight:550; }
.mission-card span { color:var(--text-3); font-size:12px; line-height:1.5; }
.mission-card:hover { background:var(--raise-2); border-color:var(--line-3); }
.mission-card[aria-pressed="true"] { border-color:rgb(var(--tint) / .65); background:rgb(var(--tint) / .08); box-shadow:inset 0 0 0 1px rgb(var(--tint) / .12); }
.inspector-body { max-height:65dvh; overflow:auto; padding:4px 2px 16px; }
.inspector .modal-foot { flex-wrap:wrap; }
.detail-grid { display:grid; grid-template-columns:140px minmax(0,1fr); gap:0; margin:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.detail-grid dt, .detail-grid dd { padding:12px 16px; margin:0; border-bottom:1px solid var(--line); font-size:12px; overflow-wrap:anywhere; }
.detail-grid dt { color:var(--text-3); background:#0e151f; }
.detail-grid dd { font-family:var(--mono); }
.detail-grid :nth-last-child(-n+2) { border-bottom:0; }
.app:not([data-space="chat"]) .chat-only { display:none; }
.conversation-search { position:absolute; top:0; left:0; right:0; z-index:5; display:flex; align-items:center; gap:8px; padding:9px 20px; min-height:58px; border-bottom:1px solid var(--line-2); background:#111822; }
.conversation-search > svg { color:var(--text-3); width:16px; }
.conversation-search input { min-width:0; flex:1; padding-block:7px; font-size:12px; }
.conversation-search > span { font:10px var(--mono); color:var(--text-3); }
.conversation-search .ib { width:28px; height:28px; }
.space[data-space="chat"]:has(.conversation-search:not([hidden])) .scroll { top:58px; }
.space[data-space="chat"]:has(.recovery:not([hidden])) .conversation-search { top:60px; }
.space[data-space="chat"]:has(.recovery:not([hidden])):has(.conversation-search:not([hidden])) .scroll { top:118px; }
.msg.search-match { border-radius:10px; outline:1px solid rgb(var(--tint) / .18); outline-offset:8px; margin-block:18px; }
.msg.search-current { outline:2px solid rgb(var(--tint) / .7); background:rgb(var(--tint) / .04); }
.search-options { display:flex; gap:16px; margin:0 0 20px; }
.search-options .form-field { flex:1; max-width:240px; }
.search-options select { width:100%; font-size:12px; }
.upload-list { display:grid; gap:8px; }
.upload-row { display:flex; gap:12px; align-items:center; padding:12px 15px; border:1px solid var(--line-2); border-radius:8px; background:#111822; }
.upload-row > span { flex:1; min-width:0; overflow-wrap:anywhere; }
.upload-row small { color:var(--text-3); white-space:nowrap; }
.upload-row svg { color:rgb(var(--tint)); }
.import-preview { padding:14px; border:1px solid var(--line-2); border-radius:10px; background:#0e151f; color:var(--text-2); font-size:12px; }
.facts { min-height:90px; }
#mem-u-use, #mem-m-use { display:grid; justify-items:end; gap:4px; font-size:10px; }
#mem-u-use meter, #mem-m-use meter { width:110px; height:5px; accent-color:rgb(var(--tint)); }
.schedule-presets { display:flex; flex-wrap:wrap; gap:8px; margin-top:-8px; }
.schedule-presets .btn { height:30px; font-size:11px; }
.readiness { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 22px; margin-bottom:24px; background:rgb(var(--tint) / .06); border:1px solid rgb(var(--tint) / .22); border-radius:12px; }
.readiness b { font-weight:550; font-size:13px; }
.readiness p { margin:5px 0 0; font-size:12px; color:var(--text-3); }
.readiness .btn { flex:none; }
.profile-actions { display:grid; gap:6px; flex:none; }
.activity-count { color:var(--text-3); font:10px/1.5 var(--mono); }
.activity-controls > .btn { justify-content:center; height:30px; font-size:11px; }
.activity-controls > .btn[aria-pressed="true"] { color:var(--warn); border-color:#5a4820; }
.grid > .empty { grid-column:1 / -1; }
.specification-card .mono { overflow-wrap:anywhere; font-size:11px; }
.specification-card .card-row > svg { width:16px; color:rgb(var(--tint)); }
.build-stage { display:flex; flex-wrap:wrap; gap:10px; padding:13px; border:1px solid var(--line); border-radius:10px; background:#0c121c; }
.build-stage .pill { height:27px; }
@container (max-width:740px) { .readiness { align-items:flex-start; flex-direction:column; gap:12px; } }
@media (max-width:600px) {
  .mission-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mission-card { padding:13px; }
  .mission-card span { font-size:11px; }
  .detail-grid { grid-template-columns:100px minmax(0,1fr); }
  .detail-grid dt, .detail-grid dd { padding:10px; font-size:11px; }
  .conversation-search { gap:4px; padding-inline:10px; flex-wrap:wrap; }
  .conversation-search > span { order:6; width:100%; }
  .space[data-space="chat"]:has(.conversation-search:not([hidden])) .scroll { top:80px; }
  .space[data-space="chat"]:has(.recovery:not([hidden])):has(.conversation-search:not([hidden])) .scroll { top:140px; }
  .top #export { display:none; }
}

/* Response formats: readable documents, accessible data controls and lossless source views. */
.md h6 { margin: 1.4em 0 .5em; font-size: 1em; font-weight: 650; }
.md h2, .md h3, .md h4, .md h5, .md h6 { scroll-margin-top: 100px; }
.md-callout { margin: 1em 0; padding: 16px 18px; border: 1px solid #34485f; border-left: 3px solid #77baff; border-radius: 10px; background: #152235; }
.md-callout .callout-title { display: block; margin-bottom: 5px; color: #a6d4ff; }
.md-callout > :last-child { margin-bottom: 0; }
.md-callout.tip { background: #112c25; border-color: #315849; border-left-color: #6bd3aa; }
.md-callout.tip .callout-title { color: #96e4c3; }
.md-callout.warning, .md-callout.caution { background: #302619; border-color: #665039; border-left-color: #e9ba73; }
.md-callout.warning .callout-title, .md-callout.caution .callout-title { color: #f2cc92; }
.format-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; color: var(--text-2); font: 12px/1.4 var(--sans); }
.format-bar input, .format-bar select, .code-tools select { min-width: 0; max-width: 100%; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 6px; background: #111b2b; color: var(--text); font: inherit; }
.format-bar input { flex: 1 1 130px; width: 130px; }
.format-bar button, .response-outline button, .json-tree button, .msg-actions > button:not(.ib) { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 8px; border-radius: 6px; font-size: 12px; color: var(--text-2); }
.format-bar button:hover, .response-outline button:hover, .json-tree button:hover, .msg-actions > button:not(.ib):hover { color: var(--text); background: var(--raise-3); }
.format-bar svg { width: 14px; height: 14px; flex-shrink: 0; }
.format-count { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.md .table { overflow: hidden; }
.table-scroll { overflow: auto; max-height: 600px; }
.table-controls { background: #101926; border-bottom: 1px solid var(--line); }
.md th > button, .structured-output th > button { display: inline-flex; align-items: center; gap: 12px; color: inherit; font: inherit; text-align: inherit; }
.md th svg, .structured-output th svg { width: 12px; height: 12px; opacity: .45; }
.md th[aria-sort="ascending"] svg, .structured-output th[aria-sort="ascending"] svg { transform: rotate(180deg); opacity: 1; }
.md th[aria-sort="descending"] svg, .structured-output th[aria-sort="descending"] svg { opacity: 1; }
.code-head { height: auto; min-height: 40px; flex-wrap: wrap; gap: 8px; padding: 8px 10px 8px 14px; }
.code-head .lang { overflow-wrap: anywhere; min-width: 0; }
.code-size { margin-right: auto; font-size: 10px; color: var(--text-4); white-space: nowrap; }
.code-tools { flex-wrap: wrap; align-items: center; }
.code-tools button[aria-pressed="true"] { background: #243950; color: #c6e4ff; }
.code-tools select { padding: 3px 6px; font-size: 11px; max-width: 120px; }
.code pre { max-height: 540px; display: flex; align-items: flex-start; gap: 18px; tab-size: 4; }
.code.expanded pre { max-height: none; }
.code pre code { display: block; min-width: 0; font: inherit; }
.code-gutter { display: none; position: sticky; left: 0; flex-shrink: 0; user-select: none; color: #718098; text-align: right; font: inherit; background: #0a0a0a; }
.code.numbered:not(.wrap) .code-gutter { display: block; }
.code.wrap pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
.code-content > .table { border: 0; border-radius: 0; margin: 0; }
.svg-preview { display: block; max-width: 100%; max-height: 70vh; margin: auto; }
.structured-output { min-width: 0; margin: 8px 0 12px; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.structured-output .format-bar { background: #101926; }
.structured-output .format-bar b { margin-right: auto; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.structured-output .blk { border: 0; border-radius: 0; }
.structured-output .table { margin: 0; }
.structured-output table { width: 100%; border-collapse: collapse; font-size: 12px; }
.structured-output th, .structured-output td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; overflow-wrap: anywhere; }
.json-tree { padding: 12px 16px; max-height: 540px; overflow: auto; background: #0b1320; color: #c9d6e8; font: 12px/1.7 var(--mono); }
.json-branch > summary { cursor: pointer; padding: 3px 0; overflow-wrap: anywhere; }
.json-key { color: #a8c9f7; margin-right: 10px; }
.json-children { margin-left: 8px; padding-left: 16px; border-left: 1px solid #27364a; }
.json-leaf { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; overflow-wrap: anywhere; }
.json-leaf .json-key { flex: 0 1 auto; }
.json-value { min-width: 0; white-space: pre-wrap; }
.json-string { color: #bce2bc; }
.json-number, .json-boolean { color: #e8c286; }
.json-null { color: #acafc7; }
.response-inspector { display: grid; gap: 20px; }
.response-inspector > p { margin: 0; }
.response-inspector .format-bar { padding: 0; }
.response-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; font: 12px var(--mono); color: var(--text-2); }
.response-outline { display: grid; justify-items: start; gap: 3px; margin-top: 8px; }
.response-outline .outline-level-3 { margin-left: 12px; }
.response-outline .outline-level-4, .response-outline .outline-level-5, .response-outline .outline-level-6 { margin-left: 24px; }
.response-source > summary { cursor: pointer; padding: 10px 0; font-size: 13px; color: var(--text-2); }
.msg-actions { flex-wrap: wrap; }
.msg:focus-within .msg-actions { opacity: 1; }
@media (max-width: 600px) {
  .format-bar { gap: 6px; padding: 8px; }
  .table-controls input { flex-basis: 60%; }
  .code-head { padding: 8px; }
  .code-tools { width: 100%; gap: 4px; }
  .code-tools button { padding: 0 6px; }
  .code pre { padding: 12px; gap: 12px; }
  .step-body { padding-left: 10px; }
  .json-tree { padding: 10px; }
  .json-children { padding-left: 10px; margin-left: 2px; }
  .msg-actions { opacity: 1; }
}
.format-bar button.ok, .code-tools button.ok { color: #98e4bd; }
.format-bar button.ok::after, .code-tools button.ok::after { content: "Copied"; font-size: 10px; }
.diff button.hunk { display: block; width: 100%; text-align: left; cursor: pointer; }
.diff button.hunk:hover { color: var(--text); background: #20344c; }