/* Vyaas · chat surface, menus, drawer and billing pages (docs/chat-mockups.html, requirements §8).
   Uses the Glacier tokens from glacier.css only; no new colours except token-based code highlighting. */

/* ---------- page shell ---------- */
[hidden] { display: none !important; }
.chat-page { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.chat-page .topbar { flex: none; min-height: 48px; padding-top: max(8px, env(safe-area-inset-top)); }
.chat-page .topbar .title { flex: 1; min-width: 0; color: var(--t1); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: 0; font: inherit; text-align: left; padding: 4px 6px; border-radius: 6px; cursor: text; }
.chat-page .topbar .title:hover { background: var(--s2); }
.chat-page .topbar .title.muted { color: var(--t2); font-weight: 400; cursor: default; }
.chat-page .topbar .title.muted:hover { background: none; }
.chat-page .topbar input.title { color: var(--t1); border: 1px solid var(--l2); background: var(--s1); }
.chat-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-main { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding-bottom: 24px; }
.hero { display: none; flex-direction: column; align-items: center; gap: 6px; padding: 0 16px; }
.foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); }
.foot .composer { box-shadow: var(--shadow); }
/* empty state: wordmark + one composer, centred on the gradient (FR-C13) */
/* home (enterprise shell): hero scrolls with the composer and quick actions as one page */
.chat-page.is-empty { display: block; overflow-y: auto; }
.chat-page.is-empty .chat-body { display: flex; flex-direction: column; min-height: 100%; }
.chat-page.is-empty .chat-main { overflow: visible; flex: 0 0 auto; }
.chat-page.is-empty .home { min-height: 0; }
.chat-page.is-empty .home { padding-bottom: 0; }
.chat-page.is-empty .hero { display: flex; }
.chat-page.is-empty .conv { display: none; }
.chat-page.is-empty .foot { display: flex; flex-direction: column; align-items: center; padding: 0 32px 34px; flex: 1 1 auto; }
.chat-page.is-empty .composer.v2 { margin-top: auto; }
.chat-page.is-empty .quick { margin-top: auto; }
.chat-page.is-empty .trust { margin-top: 20px; }
.chat-page.is-empty .foot .composer { box-shadow: var(--shadow); }
.chat-page.is-empty .foot .notices { max-width: 1090px; margin-bottom: 10px; }
.chat-page.is-empty .only-conv { display: none !important; }
.chat-page:not(.is-empty) .only-empty { display: none !important; }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; border: 0; background: transparent; color: var(--t2); cursor: pointer; font: inherit; }
.icon-btn:hover { background: var(--s2); color: var(--t1); }
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.topbar .chip { cursor: pointer; font: inherit; font-size: 12px; }
.topbar button.chip:hover { border-color: var(--l2); }
.topbar .chip.static { cursor: default; }
.topbar .btn.sm { padding: 5px 10px; font-size: 12.5px; }
.avatar-btn { border: 0; padding: 0; background: none; cursor: pointer; display: inline-flex; }
.avatar-btn:hover .avatar { border-color: var(--l2); }

/* ---------- conversation column ---------- */
.conv { max-width: 680px; margin: 0 auto; padding: 26px 20px 16px; display: flex; flex-direction: column; gap: 24px; }
.u { align-self: flex-end; max-width: 78%; background: var(--s2); border: 1px solid var(--l1); border-radius: 10px 10px 2px 10px; padding: 9px 12px; font-size: 14px; line-height: 1.5; color: var(--t1); white-space: pre-wrap; overflow-wrap: anywhere; }
.u .files { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; white-space: normal; }
.file { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--l1); background: var(--s1); border-radius: 6px; font-size: 11.5px; color: var(--t2); max-width: 100%; }
.file i { flex: none; width: 10px; height: 12px; border: 1.5px solid var(--t3); border-radius: 2px; display: inline-block; }
.file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file button { border: 0; background: none; color: var(--t3); cursor: pointer; padding: 0 2px; font: inherit; line-height: 1; }
.file button:hover { color: var(--bad); }
.a { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.6; color: var(--t1); outline: none; min-width: 0; }
.a .who { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--t3); }
.a .who b { color: var(--t2); font-weight: 500; }
.a .md.plain { white-space: pre-wrap; }
.a .md > :first-child { margin-top: 0; }
.a .md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 .7em; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: 1em 0 .35em; font: 600 14.5px/1.4 var(--sans); color: var(--t1); letter-spacing: -.005em; }
.md h1 { font-size: 18px; } .md h2 { font-size: 16px; } .md h3 { font-size: 15px; }
.md ul, .md ol { margin: 0 0 .7em; padding-left: 22px; }
.md li { margin: 2px 0; }
.md li > p { margin: 0; }
.md a { text-decoration: underline; text-underline-offset: 2px; }
.md blockquote { margin: 0 0 .7em; padding: 2px 12px; border-left: 2px solid var(--l2); color: var(--t2); }
.md hr { border: 0; border-top: 1px solid var(--l1); margin: 14px 0; }
.md img { max-width: 100%; border-radius: 6px; }
.md code { font-family: var(--mono); font-size: .86em; background: var(--code-bg); border: 1px solid var(--l1); padding: .05em .35em; border-radius: 4px; }
.md pre code { background: none; border: 0; padding: 0; font-size: 12.5px; }
.md .tbl { border: 1px solid var(--l1); border-radius: 8px; overflow-x: auto; margin: 4px 0 .8em; }
.md table { border-collapse: collapse; font-size: 13px; min-width: 100%; margin: 0; }
.md th { font: 600 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); background: var(--s2); border-bottom: 1px solid var(--l1); padding: 7px 10px; text-align: left; white-space: nowrap; }
.md td { padding: 7px 10px; border-bottom: 1px solid var(--l1); vertical-align: top; }
.md tr:last-child td { border-bottom: 0; }
.md td[align=right], .md th[align=right] { text-align: right; font-variant-numeric: tabular-nums; }
.code { border: 1px solid var(--l1); border-radius: 8px; overflow: hidden; background: var(--code-bg); font: 12.5px/1.6 var(--mono); margin: 4px 0 .8em; }
.code .h { display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 10px; background: var(--code-head); border-bottom: 1px solid var(--l1); font: 11px var(--sans); color: var(--t3); }
.code .h .sp { flex: 1; }
.code .h button { border: 0; background: none; color: var(--t2); font: 11px var(--sans); padding: 2px 6px; border-radius: 4px; cursor: pointer; }
.code .h button:hover { background: var(--s1); color: var(--t1); }
.code pre { margin: 0; padding: 10px 12px; overflow-x: auto; color: var(--t1); tab-size: 4; }
.code pre code { font-family: var(--mono); }
/* highlight.js, token based so both themes match Glacier (mockups §4) */
.hljs { color: var(--t1); background: transparent; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-type, .hljs-literal, .hljs-tag, .hljs-name { color: var(--link); }
.hljs-string, .hljs-attr, .hljs-regexp, .hljs-template-variable, .hljs-addition, .hljs-quote, .hljs-symbol { color: var(--warn); }
.hljs-comment, .hljs-meta, .hljs-deletion { color: var(--t3); font-style: italic; }
.hljs-number, .hljs-title, .hljs-section, .hljs-attribute, .hljs-variable, .hljs-bullet { color: var(--t1); font-weight: 500; }
.hljs-title.function_, .hljs-title.class_ { color: var(--ok); font-weight: 500; }
.hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 600; }
.think { font-size: 12px; color: var(--t3); }
.think summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; width: fit-content; }
.think summary::-webkit-details-marker { display: none; }
.think summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.think i { width: 12px; height: 12px; border: 1.5px solid var(--t3); border-radius: 50%; display: inline-block; flex: none; }
.think.live i { border-top-color: transparent; }
.think .body { margin: 6px 0 0 20px; padding: 6px 10px; border-left: 2px solid var(--l1); color: var(--t2); white-space: pre-wrap; max-height: 240px; overflow-y: auto; font-size: 12.5px; }
.tools { display: flex; flex-direction: column; gap: 6px; }
.tool { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--l1); border-radius: 6px; background: var(--s1); font-size: 12px; color: var(--t2); width: fit-content; max-width: 100%; }
.tool i { width: 12px; height: 12px; border: 1.5px solid var(--t3); border-radius: 50%; display: inline-block; flex: none; }
.tool.live i { border-top-color: transparent; }
.tool.done i { background: var(--ok); border-color: var(--ok); }
.cite { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px; background: var(--s2); border: 1px solid var(--l1); font: 500 10px var(--mono); color: var(--t2); vertical-align: 2px; margin-left: 2px; }
.acts-row { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--t3); margin-top: -2px; opacity: 0; transition: opacity .15s; }
.a:hover .acts-row, .a:focus-within .acts-row, .a:focus .acts-row, .acts-row.stay { opacity: 1; }
.acts-row button { border: 0; background: none; color: var(--t3); font: inherit; padding: 3px 7px; border-radius: 5px; cursor: pointer; }
.acts-row button:first-child { padding-left: 0; }
.acts-row button:hover:not(:disabled) { color: var(--t1); background: var(--s2); }
.acts-row button:disabled { cursor: default; opacity: .6; }
.acts-row .m { margin-left: auto; font-family: var(--mono); font-size: 10.5px; }
.a .state { font-size: 11.5px; color: var(--t3); display: flex; gap: 8px; align-items: center; }
.a .state button { border: 0; background: none; color: var(--link); font: inherit; font-weight: 500; cursor: pointer; padding: 0; }
.a .state.bad { color: var(--bad); }
.cursor { display: inline-block; width: 6px; height: 14px; background: var(--t1); vertical-align: -2px; margin-left: 1px; }
.md .cursor { position: relative; top: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- composer ---------- */
.composer { position: relative; }
.composer textarea { display: block; line-height: 1.5; overflow-y: auto; }
.composer .row .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer .btn.icon.send { font-size: 15px; }
.composer .btn.stop { border-color: var(--l2); color: var(--t1); padding: 5px 10px; font-size: 12px; }
.composer .btn.stop i { display: inline-block; width: 9px; height: 9px; background: currentColor; border-radius: 1px; }
.composer.locked { opacity: .6; }
.composer.drop { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.composer .chips { display: none; gap: 6px; flex-wrap: wrap; }
.composer .chips:not(:empty) { display: flex; }
.composer .file.up i { border-style: dashed; }
.foot .notices { width: 100%; max-width: 820px; display: flex; flex-direction: column; gap: 6px; }
.foot .notices:empty { display: none; }
.sys { border: 1px solid var(--l1); border-left: 2px solid var(--warn); background: var(--warn-soft); border-radius: 6px; padding: 9px 12px; font-size: 12.5px; color: var(--t1); display: flex; gap: 10px; align-items: flex-start; }
.sys.bad { border-left-color: var(--bad); background: var(--bad-soft); }
.sys .sp { flex: 1; }
.sys a, .sys button { color: var(--link); font: inherit; font-weight: 500; border: 0; background: none; padding: 0; cursor: pointer; white-space: nowrap; }
.guest-line { width: 100%; max-width: 680px; display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--t2); padding: 0 2px; flex-wrap: wrap; }
.guest-line b { color: var(--t1); font-weight: 500; }
.guest-line .sp { flex: 1; }
.guest-line a { font-weight: 500; }
.foot .hint { text-align: center; }

/* ---------- popover menus ---------- */
.pop { position: fixed; z-index: 30; width: 300px; max-width: calc(100vw - 20px); max-height: calc(100dvh - 70px); overflow-y: auto; background: var(--s1); border: 1px solid var(--l1); border-radius: 10px; box-shadow: 0 10px 30px -12px rgba(20, 20, 24, .25), var(--shadow); padding: 8px; font-size: 12.5px; }
:root[data-theme="dark"] .pop { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .7), var(--shadow); }
.pop[hidden] { display: none; }
.pop .sec { padding: 6px 8px 4px; font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.pop .it { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: 6px; color: var(--t1); border: 0; background: none; font: inherit; text-align: left; cursor: pointer; text-decoration: none; }
.pop .it:hover { background: var(--s2); text-decoration: none; }
.pop .it[aria-checked="true"], .pop .it.on { background: var(--s2); }
.pop .it:disabled, .pop .it[aria-disabled="true"] { color: var(--t3); cursor: default; }
.pop .it:disabled:hover { background: none; }
.pop .it small { color: var(--t3); margin-left: auto; font-size: 11px; text-align: right; }
.pop .it .r { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--l2); display: inline-block; flex: none; }
.pop .it[aria-checked="true"] .r { border-color: var(--accent); background: radial-gradient(var(--accent) 40%, transparent 46%); }
.pop .seg { display: flex; gap: 2px; background: var(--s2); border-radius: 6px; padding: 2px; margin: 2px 8px 6px; }
.pop .seg button { flex: 1; text-align: center; padding: 4px 2px; border-radius: 5px; color: var(--t2); font: 12px var(--sans); border: 0; background: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop .seg button[aria-pressed="true"] { background: var(--s1); color: var(--t1); box-shadow: var(--shadow); }
.pop .tg { width: 26px; height: 15px; border-radius: 999px; background: var(--l2); margin-left: auto; position: relative; flex: none; transition: background .15s; }
.pop .tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: left .15s; }
.pop .it[aria-checked="true"] .tg { background: var(--accent); }
.pop .it[aria-checked="true"] .tg::after { left: 13px; background: var(--on-accent); }
.pop .hr { height: 1px; background: var(--l1); margin: 6px 0; }
.pop .who-row { padding: 6px 8px 8px; font-size: 12px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop .who-row b { display: block; color: var(--t1); font-weight: 500; }
.pop .note { padding: 6px 8px 8px; font-size: 12px; line-height: 1.5; color: var(--t2); }
.pop .note b { color: var(--t1); font-weight: 500; }
.pop .meter { margin: 0 8px 8px; font-size: 11px; color: var(--t3); display: grid; gap: 4px; }
.bar { height: 6px; border-radius: 999px; background: var(--s3); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.bar.warn i { background: var(--warn); }
.bar.bad i { background: var(--bad); }

/* ---------- history drawer ---------- */
.dim { position: fixed; inset: 0; z-index: 20; background: rgba(20, 20, 24, .08); }
:root[data-theme="dark"] .dim { background: rgba(0, 0, 0, .35); }
.dim[hidden] { display: none; }
.drawer { position: fixed; left: 0; top: 0; bottom: 0; z-index: 21; width: 272px; max-width: 100vw; background: var(--s1); border-right: 1px solid var(--l1); padding: 12px; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; box-shadow: 12px 0 30px -20px rgba(20, 20, 24, .2); overflow: hidden; }
.drawer[hidden] { display: none; }
.drawer .srch { border: 1px solid var(--l1); border-radius: 6px; padding: 6px 9px; color: var(--t1); font: 12.5px var(--sans); background: var(--s0); width: 100%; }
.drawer .srch::placeholder { color: var(--t3); }
.drawer .srch:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.drawer .btn.new { justify-content: flex-start; font-size: 12.5px; }
.drawer .list { flex: 1; overflow-y: auto; min-height: 0; margin: 0 -4px; padding: 0 4px; }
.drawer .grp { font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--t3); padding: 10px 6px 2px; }
.drawer .li { position: relative; display: flex; align-items: center; border-radius: 6px; color: var(--t2); font-size: 12.5px; }
.drawer .li a { flex: 1; min-width: 0; padding: 6px 8px; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.drawer .li:hover, .drawer .li:focus-within { background: var(--s2); color: var(--t1); }
.drawer .li.on { background: var(--s2); color: var(--t1); }
.drawer .li .ops { display: none; gap: 0; padding-right: 2px; }
.drawer .li:hover .ops, .drawer .li:focus-within .ops { display: inline-flex; }
.drawer .li .ops button { border: 0; background: none; color: var(--t3); font: 12px var(--sans); width: 24px; height: 24px; border-radius: 4px; cursor: pointer; }
.drawer .li .ops button:hover { color: var(--t1); background: var(--s3); }
.drawer .li.pinned a::before { content: "•"; color: var(--accent); margin-right: 6px; }
.drawer .empty { padding: 20px 8px; font-size: 12.5px; color: var(--t2); line-height: 1.55; }
.drawer .bottom { margin-top: auto; border-top: 1px solid var(--l1); padding-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t2); }
.drawer .bottom .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer .bottom .pct { font-family: var(--mono); font-size: 11px; color: var(--t3); text-decoration: none; }
.drawer .close { position: absolute; right: 8px; top: max(8px, env(safe-area-inset-top)); display: none; }
.drawer .close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cursor { animation: vy-blink 1s steps(2) infinite; }
  .think.live i, .tool.live i { animation: vy-spin .9s linear infinite; }
  .drawer { animation: vy-slide .18s ease-out; }
  .pop { animation: vy-pop .12s ease-out; }
}
@keyframes vy-blink { 50% { opacity: 0; } }
@keyframes vy-spin { to { transform: rotate(360deg); } }
@keyframes vy-slide { from { transform: translateX(-12px); opacity: .6; } }
@keyframes vy-pop { from { transform: translateY(-4px); opacity: 0; } }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .conv { padding: 18px 14px 12px; gap: 20px; }
  .u { max-width: 88%; }
  .drawer { width: 100vw; border-right: 0; }
  .drawer .close { display: inline-grid; }
  .foot { padding-left: 10px; padding-right: 10px; }
  .chat-page .topbar { padding-left: 8px; padding-right: 10px; gap: 8px; }
  .wordmark .mark { font-size: 30px; }
  .pop { width: calc(100vw - 20px); left: 10px !important; right: 10px !important; }
}

/* ---------- settings and billing pages ---------- */
.site { min-height: 100dvh; display: flex; flex-direction: column; }
.site .topbar { border-bottom: 1px solid var(--l1); background: var(--s1); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.site .topbar .wordmark.small .mark { font-size: 18px; }
.site .topbar nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.site .topbar nav a { color: var(--t2); padding: 5px 9px; border-radius: 6px; font-size: 13px; }
.site .topbar nav a:hover { background: var(--s2); color: var(--t1); text-decoration: none; }
.site .topbar nav a.on { color: var(--t1); font-weight: 500; }
.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-right)) 80px max(16px, env(safe-area-inset-left)); }
.wrap.narrow { max-width: 760px; }
.page-h { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.page-h h1 { margin: 0; font: 600 26px/1.2 var(--sans); letter-spacing: -.025em; text-wrap: balance; }
.page-h p { margin: 0; color: var(--t2); max-width: 64ch; font-size: 14.5px; }
.page-h .controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
h2.sec-h { font: 600 15px/1.3 var(--sans); margin: 34px 0 10px; letter-spacing: -.01em; }
h2.sec-h small { color: var(--t3); font-weight: 400; font-size: 12.5px; margin-left: 8px; }
.seg { display: inline-flex; gap: 2px; background: var(--s2); border: 1px solid var(--l1); border-radius: 7px; padding: 2px; }
.seg button, .seg a { padding: 5px 12px; border-radius: 5px; color: var(--t2); font: 500 12.5px var(--sans); border: 0; background: none; cursor: pointer; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.seg button[aria-pressed="true"], .seg a.on { background: var(--s1); color: var(--t1); box-shadow: var(--shadow); }
.seg small { color: var(--ok); font-weight: 500; font-size: 11px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.plan { position: relative; background: var(--s1); border: 1px solid var(--l1); border-radius: 10px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.plan.hi { border-color: var(--accent); box-shadow: var(--shadow); }
.plan .tagp { position: absolute; top: -10px; left: 16px; font: 600 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; background: var(--accent); color: var(--on-accent); padding: 3px 8px; border-radius: 999px; }
.plan .nm { font: 600 15px var(--sans); }
.plan .pr { font: 600 28px/1.1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan .pr small { font: 400 12px var(--sans); color: var(--t2); letter-spacing: 0; margin-left: 4px; }
.plan .pr .gst { display: block; font: 400 11px var(--sans); color: var(--t3); margin-top: 4px; letter-spacing: 0; }
.plan .alloc { font-size: 13px; color: var(--t2); line-height: 1.5; padding: 8px 10px; background: var(--s0); border: 1px solid var(--l1); border-radius: 7px; }
.plan .alloc b { color: var(--t1); font-weight: 600; }
.plan ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--t2); display: grid; gap: 4px; flex: 1; }
.plan form { margin-top: 4px; display: grid; }
.plan .btn, .plan form .btn { width: 100%; }
.plan .cur { text-align: center; font-size: 12.5px; color: var(--t3); padding: 8px 0 2px; }
.strip { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 20px; font-size: 12.5px; color: var(--t2); padding: 14px 16px; background: var(--s1); border: 1px solid var(--l1); border-radius: 10px; }
.strip b { color: var(--t1); font-weight: 600; display: block; }
.strip form { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; }
.strip input[type=number] { width: 64px; border: 1px solid var(--l2); border-radius: 6px; padding: 5px 7px; font: 13px var(--sans); background: var(--s1); color: var(--t1); }
.tablewrap { overflow-x: auto; border: 1px solid var(--l1); border-radius: 8px; background: var(--s1); }
.tablewrap table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tablewrap th { text-align: left; font: 600 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); background: var(--s2); border-bottom: 1px solid var(--l1); padding: 8px 12px; white-space: nowrap; }
.tablewrap td { padding: 8px 12px; border-bottom: 1px solid var(--l1); vertical-align: top; }
.tablewrap tr:last-child td { border-bottom: 0; }
.tablewrap .r { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12px; }
.tablewrap td.dim, .tablewrap .muted { color: var(--t3); }
.tablewrap .empty { color: var(--t3); text-align: center; padding: 22px; }
.meters { display: grid; gap: 14px; margin: 6px 0 4px; }
.meter-row { display: grid; gap: 6px; font-size: 12.5px; color: var(--t2); }
.meter-row .lbl { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.meter-row b { color: var(--t1); font-weight: 500; }
.meter-row .bar { height: 8px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.kpi { background: var(--s1); border: 1px solid var(--l1); border-radius: 8px; padding: 12px 14px; }
.kpi .v { font: 600 18px/1.2 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .k { font-size: 11.5px; color: var(--t3); margin-top: 2px; }
.card-b { background: var(--s1); border: 1px solid var(--l1); border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.card-b .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.card-b .row .sp { flex: 1; }
.card-b h3 { margin: 0; font: 600 18px/1.2 var(--sans); letter-spacing: -.02em; }
.card-b .muted { color: var(--t2); font-size: 13px; }
.pill { display: inline-block; font: 600 10.5px/1 var(--sans); letter-spacing: .04em; padding: 4px 8px; border-radius: 999px; background: var(--s2); color: var(--t2); text-transform: uppercase; }
.pill.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.pill.warn { color: var(--warn); background: var(--warn-soft); }
.pill.bad { color: var(--bad); background: var(--bad-soft); }
.flash { display: grid; gap: 6px; margin-bottom: 16px; }
.flash .notice.success { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--s1)); }
.flash .notice.error { border-left-color: var(--bad); background: var(--bad-soft); }
.flash .notice.info { border-left-color: var(--l2); background: var(--s2); }
.plan .mdl + .mdl::before { content: ", "; }
.btn.danger { color: var(--bad); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.ghost { border-color: transparent; background: transparent; }
.sandbox-tag { display: inline-flex; align-items: center; gap: 8px; font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--warn); background: var(--warn-soft); border: 1px solid var(--l1); padding: 5px 10px; border-radius: 999px; width: fit-content; }
.lines { display: grid; gap: 6px; font-size: 13.5px; }
.lines div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--l1); }
.lines div:last-child { border-bottom: 0; font-weight: 600; }
.lines .n { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .wrap { padding-top: 18px; }
  .page-h h1 { font-size: 22px; }
}

/* ---------- owner review, 31 Oct: wider column, header theme toggle, premium drawer ---------- */
/* The conversation column takes at least 60 % of the viewport on desktop (was a fixed 680 px). */
:root { --col: max(60vw, 720px); }
.conv, .foot .composer, .foot .notices, .guest-line { max-width: var(--col); }
.chat-page.is-empty .foot .composer { max-width: 936px; }
.chat-page:not(.is-empty) .foot .composer, .chat-page:not(.is-empty) .foot .notices { max-width: min(var(--col), 820px); }
.u { max-width: 72%; }
.md table { width: 100%; }

/* Appearance toggle in the header, top left */
.theme-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--s2); border: 1px solid var(--l1); }
.theme-seg button { width: 28px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--t2); cursor: pointer; display: grid; place-items: center; }
.theme-seg button svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-seg button:hover { color: var(--t1); }
.theme-seg button[aria-pressed="true"] { background: var(--s1); color: var(--accent); box-shadow: 0 1px 2px rgba(15, 28, 46, .10); }
.theme-seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* History drawer: calmer surface, brighter text, clear active state */
.drawer { width: 300px; padding: 14px 12px; gap: 8px; background: linear-gradient(180deg, var(--s1) 0%, var(--s0) 100%); border-right: 1px solid var(--l1); box-shadow: 24px 0 48px -32px rgba(15, 28, 46, .28); }
.drawer .srch { height: 36px; padding: 0 12px 0 34px; border-radius: 9px; border-color: var(--l2); background: var(--s1) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238696ad' stroke-width='1.8' stroke-linecap='round'><circle cx='11' cy='11' r='6.5'/><path d='M20 20l-4-4'/></svg>") no-repeat 11px center / 15px; font-size: 13px; color: var(--t1); }
.drawer .btn.new { height: 36px; border-radius: 9px; border: 1px dashed var(--l2); background: transparent; color: var(--accent); font-weight: 600; font-size: 13px; padding: 0 12px; }
.drawer .btn.new:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--accent); }
.drawer .grp { color: var(--t2); font-size: 10.5px; letter-spacing: .14em; padding: 14px 8px 4px; }
.drawer .li { color: var(--t1); font-size: 13.5px; border-radius: 9px; margin: 1px 0; }
.drawer .li a { padding: 9px 10px; }
.drawer .li:hover, .drawer .li:focus-within { background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--t1); }
.drawer .li.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--t1); font-weight: 500; box-shadow: inset 3px 0 0 var(--accent); }
.drawer .li .ops button { color: var(--t2); }
.drawer .empty { color: var(--t2); font-size: 13px; }
.drawer .bottom { margin: 6px -4px 0; padding: 10px 10px; border: 1px solid var(--l1); border-radius: 10px; background: var(--s1); color: var(--t1); font-size: 13px; }
.drawer .bottom .nm { font-weight: 500; }
.drawer .bottom .pct { color: var(--accent); font-weight: 600; font-size: 12px; }
.drawer .close { color: var(--t2); }

@media (max-width: 760px) {
  :root { --col: 100%; }
  .theme-seg button { width: 26px; height: 24px; }
  .drawer { width: 100vw; }
}

/* Breadcrumb in the shell topbar's left slot (settings, billing, workspace pages) */
.top-left .title .crumb-sep { color: var(--t3); margin: 0 2px; font-weight: 400; }
.top-left .title a { color: var(--t2); text-decoration: none; }
.top-left .title a:hover { color: var(--t1); }
.top-left .title b { color: var(--t1); font-weight: 600; }

/* Maker line under the composer (owner request 1 Nov): centred, quiet, premium */
.crafted { display: inline-flex; align-items: center; gap: 10px; font: 500 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--t3); margin-top: 2px; }
.crafted img { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1px var(--l1); }
.crafted b { font-weight: 600; color: var(--t2); letter-spacing: .14em; }