/* MX Sales Demo — portal styles on top of the vendored Kilsar Design System.
   Tokens only (var(--kls-*)); type via .kls-text-*; spacing/radii from the scale.
   Component recipes are copied from design_system/preview/*.html. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--kls-font-sans);
  background: var(--kls-surface-variant);
  color: var(--kls-on-surface);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font-family: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--kls-on-surface-variant); }
.row { display: flex; align-items: center; gap: var(--kls-space-small); }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--kls-space-small); }
.grow { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-tiny { margin-top: var(--kls-space-tiny); } .mt-small { margin-top: var(--kls-space-small); } .mt-med { margin-top: var(--kls-space-med); }
.kls-mono { font-variant-numeric: tabular-nums; }

/* ---------- icons: PNG/SVG masks tinted by currentColor (as the DS kits do) ---------- */
.ico {
  display: inline-block; width: 24px; height: 24px; flex: none;
  background: currentColor;
  -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain;
}
.ico.s16 { width: 16px; height: 16px; } .ico.s18 { width: 18px; height: 18px; } .ico.s20 { width: 20px; height: 20px; } .ico.s28 { width: 28px; height: 28px; }

/* ---------- brand ---------- */
.lockup { display: inline-flex; align-items: center; gap: var(--kls-space-small); color: var(--kls-on-surface); text-decoration: none; }
.lockup .mark { width: 40px; height: 36px; }
.lockup .word { font-size: var(--kls-h2-size); line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
.wordmark { height: var(--kls-sidebar-logo-size-wordmark); width: auto; display: block; }
[data-theme="dark"] .wordmark { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wordmark { filter: brightness(0) invert(1); } }

/* ---------- shell: rail + header + content (ui_kits/web/chrome.jsx) ---------- */
.shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.rail {
  width: var(--kls-sidebar-width-expanded); flex: none;
  background: var(--kls-sidebar-bg); border-right: var(--kls-sidebar-border);
  padding: var(--kls-sidebar-padding);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--kls-space-med);
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
  transition: width var(--kls-dur-fade-animation) var(--kls-ease-standard);
}
.rail .top { display: flex; flex-direction: column; min-height: 0; }
.rail .brand { height: 40px; display: flex; align-items: center; justify-content: center; }
.rail .brand .mark-only { display: none; width: var(--kls-sidebar-logo-size-mark); height: var(--kls-sidebar-logo-size-mark); }
.rail .ws { height: 24px; margin-top: var(--kls-space-xsmall); text-align: center; }
.rail .tabs { display: flex; flex-direction: column; margin-top: var(--kls-space-large); gap: var(--kls-space-tiny); }
.tab {
  height: var(--kls-sidebar-tab-height); border-radius: var(--kls-sidebar-tab-radius);
  display: flex; align-items: center; gap: var(--kls-space-small); padding: 0 var(--kls-space-small);
  background: var(--kls-sidebar-tab-bg-idle); color: var(--kls-sidebar-tab-label-color);
  border: 0; width: 100%; text-align: left; cursor: pointer; text-decoration: none;
  transition: background var(--kls-dur-fast-animation) var(--kls-ease-standard);
}
.tab:hover { background: var(--kls-tertiary); }
.tab.on { background: var(--kls-sidebar-tab-bg-active); }
.tab .count { margin-left: auto; }
.rail .bottom { display: flex; flex-direction: column; gap: var(--kls-space-tiny); }
.rail .version { text-align: center; margin-top: var(--kls-space-small); color: var(--kls-on-tertiary); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.hdr {
  height: var(--kls-header-height); flex: none; padding: 0 var(--kls-header-padding-x);
  background: var(--kls-header-bg); color: var(--kls-header-fg); border-bottom: var(--kls-header-border);
  display: flex; align-items: center; gap: var(--kls-space-xsmall);
  position: sticky; top: 0; z-index: 5;
}
.hdr .sys { display: flex; align-items: center; gap: var(--kls-space-xsmall); min-width: 0; }
.hdr .spacer { flex: 1; }
.content { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.content > section, .content > .cp { flex: 1; min-height: 0; overflow-y: auto; }
.content > .cp > * { flex: none; } /* scrolling column: children stack, never shrink */
#tab-assistant, #tab-studio, #tab-procedures { overflow: hidden; }

/* Sales preview = the mock's "Viewer Mode" spoof banner (accent-5 bg / accent-4 fg) */
.spoof {
  background: var(--kls-accent-5); color: var(--kls-accent-4);
  padding: var(--kls-space-xsmall) var(--kls-space-small); border-radius: var(--kls-radius-small);
  display: inline-flex; align-items: center; gap: var(--kls-space-xsmall); white-space: nowrap;
}
.spoof a { color: inherit; font-weight: 700; }

/* ProfileWidget — circle, secondary-container bg, initials */
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--kls-secondary-container); color: var(--kls-on-secondary-container);
  border: 1px solid var(--kls-outline-variant);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--kls-label-medium-semibold-size);
}
.avatar.orion { background: var(--kls-primary); color: var(--kls-on-primary); border: 0; width: 28px; height: 28px; }
.avatar.orion img { width: 18px; height: 18px; filter: invert(1); }
[data-theme="dark"] .avatar.orion img { filter: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avatar.orion img { filter: none; } }

/* ---------- content pane (preview/content-pane.html) ---------- */
.cp {
  display: flex; flex-direction: column; gap: var(--kls-space-med);
  padding: var(--kls-space-med) var(--kls-space-large) var(--kls-space-xlarge);
  width: 100%; max-width: 1240px; margin: 0 auto;
}
.ph { display: flex; align-items: center; justify-content: space-between; gap: var(--kls-space-med); flex-wrap: wrap; }
.ph .title { color: var(--kls-on-surface); margin-bottom: var(--kls-space-tiny); }
.ph .sub { color: var(--kls-on-surface-variant); }
.ph .actions { display: flex; gap: var(--kls-space-xsmall); align-items: center; flex-wrap: wrap; }
.kpis { display: flex; flex-wrap: wrap; gap: var(--kls-space-small); }
.kpi {
  flex: 1; min-width: 150px;
  background: var(--kls-surface); border: 1px solid var(--kls-outline-variant);
  border-radius: var(--kls-radius-med); padding: var(--kls-space-med);
  display: flex; flex-direction: column; gap: var(--kls-space-xsmall); text-decoration: none; color: inherit;
}
.kpi .top { display: flex; align-items: center; justify-content: space-between; }
.kpi .chip { width: 28px; height: 28px; border-radius: var(--kls-radius-small); display: flex; align-items: center; justify-content: center; background: var(--kls-tertiary); color: var(--kls-on-surface-variant); }
.kpi .v { font-size: 30px; font-weight: 700; line-height: 1.1; }
.kpi .v.ok { color: var(--kls-success); } .kpi .v.warn { color: var(--kls-progress); }
.panel { background: var(--kls-surface); border: 1px solid var(--kls-outline-variant); border-radius: var(--kls-radius-med); overflow: hidden; }
.panel > .toolbar { display: flex; align-items: center; gap: var(--kls-space-small); padding: var(--kls-space-small) var(--kls-space-med); border-bottom: 1px solid var(--kls-outline-variant); flex-wrap: wrap; }
.panel > .body { padding: var(--kls-space-med); display: flex; flex-direction: column; gap: var(--kls-space-small); }
.panel > .foot { padding: var(--kls-space-small) var(--kls-space-med); border-top: 1px solid var(--kls-outline-variant); color: var(--kls-on-surface-variant); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--kls-space-med); align-items: start; }
.grid-halves { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--kls-space-med); }
.seg { display: inline-flex; background: var(--kls-tertiary); border-radius: var(--kls-radius-small); padding: 2px; gap: 2px; align-self: flex-start; }
.seg button { height: 34px; padding: 0 var(--kls-space-med); border: 0; cursor: pointer; background: transparent; color: var(--kls-on-tertiary); border-radius: calc(var(--kls-radius-small) - 1px); font-weight: 600; font-size: var(--kls-label-large-size); }
.seg button.on { background: var(--kls-surface); color: var(--kls-on-surface); }

/* ---------- buttons (preview/buttons-primary.html, buttons-variants.html) ---------- */
.pa-btn, .sa-btn {
  height: 40px; padding: 0 var(--kls-space-med); border-radius: var(--kls-radius-small);
  font-size: var(--kls-label-large-bold-size); line-height: var(--kls-label-large-bold-line); font-weight: var(--kls-label-large-bold-weight);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kls-space-xsmall);
  cursor: pointer; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: background var(--kls-dur-fast-animation) var(--kls-ease-standard);
}
.pa-btn { background: var(--kls-tertiary-container); color: var(--kls-on-tertiary-container); border: 1px solid transparent; }
.pa-btn:hover { background: var(--kls-secondary); }
.pa-btn.inverse { background: var(--kls-primary); color: var(--kls-on-primary); }
.pa-btn.inverse:hover { background: var(--kls-action-primary-hover); }
.sa-btn { background: var(--kls-surface); color: var(--kls-on-surface); border: 1px solid var(--kls-outline-variant); }
.sa-btn:hover { background: var(--kls-tertiary); }
.sa-btn.has-icon { padding-left: var(--kls-space-small); }
.pa-btn[disabled], .sa-btn[disabled] { color: var(--kls-on-surface-variant); cursor: default; }
.pa-btn.full, .sa-btn.full { width: 100%; }
.pa-btn.danger { color: var(--kls-error); }
.plus { width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: url(ds/icons/plus.svg) no-repeat center / contain; mask: url(ds/icons/plus.svg) no-repeat center / contain; }
.txt-btn { background: transparent; border: 0; padding: var(--kls-space-xsmall) var(--kls-space-small); border-radius: var(--kls-radius-xsmall); color: var(--kls-on-surface); font-weight: 700; font-size: var(--kls-label-large-bold-size); cursor: pointer; }
.txt-btn:hover { background: var(--kls-tertiary); }
.txt-btn.danger { color: var(--kls-error); }
.txt-btn.quiet { color: var(--kls-on-surface-variant); font-weight: 600; }
.circle-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--kls-outline-variant); background: var(--kls-surface); color: var(--kls-on-surface);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none;
}
.circle-btn:hover { background: var(--kls-tertiary); }
.circle-btn.solid { background: var(--kls-primary); color: var(--kls-on-primary); border-color: transparent; width: 40px; height: 40px; }
.circle-btn.solid:hover { background: var(--kls-action-primary-hover); }
.circle-btn.solid[disabled] { opacity: .5; cursor: default; }
.icon-btn { width: 32px; height: 32px; border-radius: var(--kls-radius-small); border: 0; background: transparent; color: var(--kls-on-surface-variant); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.icon-btn:hover { background: var(--kls-tertiary-container); color: var(--kls-on-surface); }
.icon-btn.danger:hover { color: var(--kls-error); }

/* ---------- inputs (preview/inputs.html) ---------- */
.field { display: flex; flex-direction: column; gap: var(--kls-space-xsmall); }
.field > .lbl { color: var(--kls-on-surface-variant); }
.itf {
  display: flex; align-items: center; min-height: 48px;
  background: var(--kls-surface); border: 1px solid var(--kls-outline-variant); border-radius: var(--kls-radius-small);
  overflow: hidden; transition: border-color var(--kls-dur-fast-animation);
}
.itf .icon-slot { display: flex; align-items: center; padding-left: var(--kls-space-small); color: var(--kls-on-surface); flex: none; }
.itf input, .itf textarea, .itf select {
  border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; width: 100%;
  padding: var(--kls-space-small); font-family: var(--kls-font-sans);
  font-size: var(--kls-label-large-size); line-height: var(--kls-label-large-line); font-weight: var(--kls-label-large-weight);
  color: var(--kls-on-surface); color-scheme: inherit;
}
.itf textarea { resize: none; min-height: 48px; }
.itf input::placeholder, .itf textarea::placeholder { color: var(--kls-on-surface-variant); opacity: 1; }
.itf:focus-within { border-color: var(--kls-outline-variant); }
.itf[data-error="true"], .itf[data-error="true"]:focus-within { border-color: var(--kls-error); }
.itf.compact { min-height: 40px; } .itf.compact input { padding: var(--kls-space-xsmall) var(--kls-space-small); }
.err-msg { color: var(--kls-error); }
.check { display: flex; align-items: center; gap: var(--kls-space-small); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--kls-on-surface); margin: 0; }
input[type="file"].file { color: var(--kls-on-surface-variant); font-size: var(--kls-label-large-size); }
input[type="file"].file::file-selector-button {
  height: 40px; padding: 0 var(--kls-space-med); margin-right: var(--kls-space-small); border-radius: var(--kls-radius-small);
  border: 1px solid var(--kls-outline-variant); background: var(--kls-surface); color: var(--kls-on-surface);
  font-family: var(--kls-font-sans); font-weight: 700; font-size: var(--kls-label-large-bold-size); cursor: pointer;
}

/* ---------- pills & status badges (preview/pill.html, status-badges.html) ---------- */
.pill { display: inline-flex; align-items: center; gap: var(--kls-space-xsmall); padding: var(--kls-space-tiny) var(--kls-space-small); border-radius: var(--kls-radius-small); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; background: var(--kls-tertiary); color: var(--kls-on-surface-variant); }
.pill.info { background: var(--kls-info-container); color: var(--kls-on-info-container); }
.pill.success { background: var(--kls-success-container); color: var(--kls-on-success-container); }
.pill.warn { background: var(--kls-progress-container); color: var(--kls-on-progress-container); }
.pill.error { background: var(--kls-error-container); color: var(--kls-on-error-container); }
.pill.count { background: var(--kls-tertiary-container); color: var(--kls-on-tertiary-container); padding: 0 var(--kls-space-xsmall); min-width: 20px; justify-content: center; }
.badge { display: inline-flex; align-items: center; gap: var(--kls-space-xsmall); padding: var(--kls-space-tiny) var(--kls-space-small); border-radius: var(--kls-radius-small); font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.badge.s-pending    { background: var(--kls-tertiary);           color: var(--kls-on-surface-variant); }
.badge.s-building   { background: var(--kls-info-container);     color: var(--kls-on-info-container); }
.badge.s-ready      { background: var(--kls-success-container);  color: var(--kls-on-success-container); }
.badge.s-active     { background: var(--kls-on-surface);         color: var(--kls-surface); }
.badge.s-failed     { background: var(--kls-error-container);    color: var(--kls-on-error-container); }
.badge.s-deprecated { background: var(--kls-progress-container); color: var(--kls-on-progress-container); }
.badge .glyph { width: 13px; height: 13px; flex: none; }
@keyframes kls-spin { to { transform: rotate(360deg); } }
.spin { animation: kls-spin 900ms linear infinite; }

/* ---------- data table (preview/data-table.html) ---------- */
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th { text-align: left; padding: var(--kls-space-small) var(--kls-space-med); font-size: 14px; font-weight: 500; color: var(--kls-on-surface-variant); border-bottom: 1px solid var(--kls-outline-variant); white-space: nowrap; }
.data-table tbody tr { border-bottom: 1px solid var(--kls-outline-variant); }
.data-table tbody tr:last-child { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--kls-tertiary); }
.data-table tbody td { padding: var(--kls-space-small) var(--kls-space-med); font-size: 14px; font-weight: 500; color: var(--kls-on-surface); vertical-align: middle; white-space: nowrap; }
.data-table tbody td:first-child { white-space: normal; }
.data-table td.muted, .data-table .muted { color: var(--kls-on-surface-variant); font-weight: 500; }
.data-table .col-action { width: 1%; text-align: right; white-space: nowrap; }
.data-table a.plain { text-decoration: none; }
.data-table a.plain:hover { text-decoration: underline; }
.table-wrap { overflow-x: auto; }

/* ---------- empty state (preview/empty-state.html) ---------- */
.empty { padding: var(--kls-space-xlarge) var(--kls-space-med); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--kls-space-small); color: var(--kls-on-surface-variant); }
.medallion { width: 56px; height: 56px; border-radius: var(--kls-radius-med); background: var(--kls-tertiary); display: flex; align-items: center; justify-content: center; color: var(--kls-on-surface-variant); }
.empty .title { color: var(--kls-on-surface); }
.empty .body { max-width: 320px; }

/* ---------- AlertPrompt (preview/dialogs.html) ---------- */
.scrim { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: var(--kls-space-med); }
.scrim.open { display: flex; }
.scrim::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(4px); background: color-mix(in oklab, var(--kls-surface) 80%, transparent); }
.alert { position: relative; width: 360px; max-width: 100%; background: var(--kls-surface); border-radius: var(--kls-radius-small); box-shadow: var(--kls-drop-shadow); padding: var(--kls-space-med) var(--kls-space-med) var(--kls-space-small); display: flex; flex-direction: column; gap: var(--kls-space-small); }
.alert .title { color: var(--kls-on-secondary); }
.alert .msg { color: var(--kls-on-secondary); }
.alert .actions { display: flex; justify-content: flex-end; gap: var(--kls-space-tiny); margin-top: var(--kls-space-tiny); }

/* ---------- centered pages (login / join / index / ended / error) ---------- */
.center-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--kls-space-med); }
.center-card { width: 420px; max-width: 100%; background: var(--kls-surface); border: 1px solid var(--kls-outline-variant); border-radius: var(--kls-radius-med); box-shadow: var(--kls-drop-shadow); padding: var(--kls-space-large); display: flex; flex-direction: column; gap: var(--kls-space-med); }
.center-card form { display: flex; flex-direction: column; gap: var(--kls-space-small); }
.center-card .foot { color: var(--kls-on-surface-variant); text-align: center; }

/* ---------- Assistant (composed from tokens; no DS card exists for chat) ---------- */
.assistant { flex: 1; min-height: 0; display: flex; }
.thread-col { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.thread { flex: 1; overflow-y: auto; padding: var(--kls-space-med) var(--kls-space-large); }
.thread .inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--kls-space-med); }
.turn { display: flex; gap: var(--kls-space-small); align-items: flex-start; }
.turn.user { justify-content: flex-end; }
.turn.user .bubble { max-width: 80%; background: var(--kls-secondary-container); color: var(--kls-on-secondary-container); border: 1px solid var(--kls-outline-variant); border-radius: var(--kls-radius-med); border-bottom-right-radius: var(--kls-radius-xsmall); padding: var(--kls-space-small) var(--kls-space-med); white-space: pre-wrap; }
.turn.assistant .avatar { margin-top: 2px; }
.turn.assistant .md { flex: 1; min-width: 0; color: var(--kls-on-surface); font-size: var(--kls-body-large-size); line-height: 1.6; font-weight: 500; }
.md p { margin: 0 0 var(--kls-space-small); } .md p:last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3, .md h4 { margin: var(--kls-space-small) 0 var(--kls-space-xsmall); font-weight: 700; font-size: var(--kls-subtitle-small-size); color: var(--kls-on-surface); }
.md ul, .md ol { margin: var(--kls-space-xsmall) 0 var(--kls-space-small) var(--kls-space-med); padding: 0; } .md li { margin: var(--kls-space-tiny) 0; }
.md ol { list-style: decimal; } .md ul { list-style: disc; }
.md strong { font-weight: 700; } .md em { color: var(--kls-on-surface-variant); }
.md code { font-family: var(--kls-font-mono, var(--kls-font-sans)); background: var(--kls-tertiary); padding: 0 var(--kls-space-tiny); border-radius: var(--kls-radius-xsmall); font-size: .9em; }
.md hr { border: 0; border-top: 1px solid var(--kls-outline-variant); margin: var(--kls-space-small) 0; }
.md table { border-collapse: collapse; margin: var(--kls-space-xsmall) 0 var(--kls-space-small); font-size: var(--kls-label-large-size); }
.md th, .md td { border: 1px solid var(--kls-outline-variant); padding: var(--kls-space-tiny) var(--kls-space-xsmall); text-align: left; }
.cite { display: inline-flex; align-items: center; padding: 0 var(--kls-space-xsmall); border-radius: var(--kls-radius-xsmall); background: var(--kls-accent-8); color: var(--kls-accent-9); font-size: .72em; font-weight: 700; line-height: 1.5; vertical-align: baseline; margin: 0 1px; cursor: pointer; text-decoration: none; }
.cite:hover { background: var(--kls-info-container); }
.typing::after { content: "▍"; color: var(--kls-on-surface-variant); animation: kls-blink 1s steps(1) infinite; }
@keyframes kls-blink { 50% { opacity: 0; } }
.composer { flex: none; background: var(--kls-surface); border-top: 1px solid var(--kls-outline-variant); padding: var(--kls-space-small) var(--kls-space-large); }
.composer .inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--kls-space-xsmall); }
.composer .box { display: flex; align-items: flex-end; gap: var(--kls-space-xsmall); }
.composer .itf { flex: 1; }
.composer .hint { display: flex; justify-content: space-between; gap: var(--kls-space-small); flex-wrap: wrap; color: var(--kls-on-surface-variant); }
.sources { width: 320px; flex: none; border-left: 1px solid var(--kls-outline-variant); background: var(--kls-surface); overflow-y: auto; padding: var(--kls-space-med); display: flex; flex-direction: column; gap: var(--kls-space-small); }
.src { display: flex; flex-direction: column; gap: var(--kls-space-tiny); border: 1px solid var(--kls-outline-variant); border-radius: var(--kls-radius-small); padding: var(--kls-space-xsmall) var(--kls-space-small); text-decoration: none; color: var(--kls-on-surface); }
.src:hover { background: var(--kls-tertiary); }
.src .head { display: flex; align-items: center; gap: var(--kls-space-xsmall); min-width: 0; }
.src .snip { color: var(--kls-on-surface-variant); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- sales console sign-in ---------- */
.gsi-wrap { display: flex; justify-content: center; min-height: 44px; }
.dev-login { display: flex; flex-direction: column; gap: var(--kls-space-xsmall); border-top: 1px dashed var(--kls-outline-variant); padding-top: var(--kls-space-small); }
.hdr .who { max-width: 200px; margin-right: var(--kls-space-xsmall); }

/* ---------- sales console: org detail ---------- */
.spoof.flash { background: var(--kls-success-container); color: var(--kls-on-success-container); }
.spoof.flash.bad { background: var(--kls-error-container); color: var(--kls-on-error-container); }
.min0 { min-width: 0; }
.panel > .toolbar > div { min-width: 0; }
.grid-2 > .stack, .grid-halves > .panel { min-width: 0; }
.dropzone.compact { margin: var(--kls-space-small) var(--kls-space-med); padding: var(--kls-space-small) var(--kls-space-med); border-width: 1px; cursor: pointer; }
.dropzone.compact .busy { display: flex; flex-direction: column; gap: var(--kls-space-xsmall); text-align: left; }
.dropzone.compact .busy[hidden], .dropzone.compact .idle[hidden] { display: none; }
.content > section, .content > .cp { scrollbar-width: thin; scrollbar-color: var(--kls-outline-variant) transparent; }
.content > section::-webkit-scrollbar, .content > .cp::-webkit-scrollbar { width: 8px; }
.content > section::-webkit-scrollbar-thumb, .content > .cp::-webkit-scrollbar-thumb { background: var(--kls-outline-variant); border-radius: var(--kls-radius-pill); }
.content > section::-webkit-scrollbar-track, .content > .cp::-webkit-scrollbar-track { background: transparent; }

/* ---------- library ---------- */
.dropzone { border: 2px dashed var(--kls-outline); border-radius: var(--kls-radius-med); background: var(--kls-surface); padding: var(--kls-space-large); text-align: center; transition: border-color var(--kls-dur-fast-animation), background var(--kls-dur-fast-animation); }
.dropzone.drag { border-color: var(--kls-on-surface); background: var(--kls-tertiary); }
.dropzone .link { background: none; border: 0; padding: 0; color: var(--kls-on-surface); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .sources { display: none; } .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .rail { width: var(--kls-sidebar-width-collapsed); }
  .rail .ws, .rail .tab .lbl, .rail .tab .count, .rail .version, .rail .wordmark { display: none; }
  .rail .brand .mark-only { display: block; }
  .tab { justify-content: center; padding: 0; }
  .cp { padding: var(--kls-space-med) var(--kls-space-med) var(--kls-space-xlarge); }
  .thread, .composer { padding-left: var(--kls-space-med); padding-right: var(--kls-space-med); }
}
@media (max-width: 640px) {
  .shell { flex-direction: column-reverse; }
  .rail { width: 100%; height: auto; position: sticky; bottom: 0; top: auto; flex-direction: row; align-items: center; justify-content: space-between; padding: var(--kls-space-xsmall) var(--kls-space-small); border-right: 0; border-top: var(--kls-sidebar-border); gap: var(--kls-space-xsmall); }
  .rail .top { flex-direction: row; align-items: center; gap: var(--kls-space-xsmall); flex: 1; }
  .rail .brand { display: none; }
  .rail .tabs { flex-direction: row; margin: 0; flex: 1; }
  .tab { height: 40px; }
  .rail .bottom { flex-direction: row; }
  .main { min-height: 0; flex: 1; height: auto; }
  .hdr { position: static; }
  .kpi .v { font-size: 24px; }
  .ph .actions { width: 100%; }
}

/* ---------- PDF viewer drawer (DS DrawerOverlay: right, 426 collapsed / 50% expanded, 12px inset) ---------- */
#pdf-scrim { position: fixed; inset: 0; z-index: 40; background: var(--kls-scrim); display: none; }
#pdf-scrim.open { display: block; }
.drawer {
  position: fixed; top: var(--kls-space-small); right: var(--kls-space-small); bottom: var(--kls-space-small);
  width: min(50vw, 760px); min-width: 426px; max-width: calc(100vw - 2 * var(--kls-space-small));
  z-index: 41; background: var(--kls-surface); border-radius: var(--kls-radius-med); box-shadow: var(--kls-drop-shadow);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(calc(100% + var(--kls-space-small))); transition: transform var(--kls-dur-fade-animation) var(--kls-ease-standard), width var(--kls-dur-fade-animation) var(--kls-ease-standard);
}
.drawer.open { transform: none; }
.drawer.wide { width: calc(100vw - 2 * var(--kls-space-small)); }
.drawer .head { display: flex; align-items: center; gap: var(--kls-space-xsmall); padding: var(--kls-space-small) var(--kls-space-med); border-bottom: 1px solid var(--kls-outline-variant); flex-wrap: wrap; }
.drawer .head .ttl { flex: 1; min-width: 160px; }
.drawer .pager { display: inline-flex; align-items: center; gap: var(--kls-space-tiny); }
#pdf-prev .ico { transform: scaleX(-1); }
.drawer .pager input { width: 56px; height: 32px; text-align: center; border: 1px solid var(--kls-outline-variant); border-radius: var(--kls-radius-small); background: var(--kls-surface); color: var(--kls-on-surface); font-family: inherit; font-size: var(--kls-label-large-size); }
.pdf-stage { flex: 1; overflow: auto; background: var(--kls-surface-variant); padding: var(--kls-space-small); }
.pdf-page { position: relative; margin: 0 auto; width: max-content; box-shadow: var(--kls-drop-shadow); background: var(--kls-color-base-white); }
.pdf-page canvas { display: block; }
#pdf-highlights { position: absolute; inset: 0; pointer-events: none; }
.pdf-hl { position: absolute; background: var(--kls-accent-4); opacity: .35; border-radius: 2px; }
#pdf-status { position: absolute; left: 50%; top: var(--kls-space-large); transform: translateX(-50%); padding: var(--kls-space-xsmall) var(--kls-space-small); background: var(--kls-inverse-surface); color: var(--kls-on-inverse-surface); border-radius: var(--kls-radius-small); }
@media (max-width: 640px) { .drawer { top: 0; right: 0; bottom: 0; left: 0; width: auto; min-width: 0; max-width: none; border-radius: 0; } }

/* ---------- Design Studio ---------- */
.ico.flip { transform: scaleX(-1); } .ico.flip-v { transform: scaleY(-1); }
.pill.ex { cursor: pointer; border: 0; font-family: inherit; } .pill.ex:hover { background: var(--kls-tertiary-container); }
.pill.mention { background: var(--kls-accent-8); color: var(--kls-accent-9); cursor: pointer; border: 0; font-family: inherit; max-width: 100%; }
.pill.mention .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; display: inline-block; vertical-align: bottom; }
.pill.mention .x { margin-left: var(--kls-space-tiny); opacity: .7; }
.itf.mention-box { flex-direction: column; align-items: stretch; }
.itf.mention-box .chips { padding: var(--kls-space-xsmall) var(--kls-space-small) 0; gap: var(--kls-space-tiny); }
.itf.mention-box .chips[hidden] { display: none; }
.mention-menu { position: fixed; z-index: 60; background: var(--kls-surface); border: 1px solid var(--kls-outline-variant); border-radius: var(--kls-radius-small); box-shadow: var(--kls-drop-shadow); width: min(560px, calc(100vw - 32px)); max-height: 320px; display: flex; flex-direction: column; overflow: hidden; }
.mention-menu .head { flex: none; display: flex; justify-content: space-between; gap: var(--kls-space-small); padding: var(--kls-space-xsmall) var(--kls-space-small); border-bottom: 1px solid var(--kls-outline-variant); color: var(--kls-on-surface-variant); }
.mention-menu .list { overflow-y: auto; padding: var(--kls-space-tiny) 0; }
.mention-menu .list button { display: flex; align-items: center; gap: var(--kls-space-small); width: 100%; text-align: left; background: transparent; border: 0; padding: var(--kls-space-xsmall) var(--kls-space-small); font: inherit; color: var(--kls-on-surface); cursor: pointer; min-width: 0; }
.mention-menu .list button .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-menu .list button .m { flex: none; color: var(--kls-on-surface-variant); font-variant-numeric: tabular-nums; }
.mention-menu .list button:hover, .mention-menu .list button.on { background: var(--kls-tertiary); }
.mention-menu .list button:disabled { cursor: default; color: var(--kls-on-surface-variant); }
.mention-menu .list button:disabled:hover { background: transparent; }
#tab-studio, #tab-procedures { display: flex; flex-direction: column; }
#studio-home, #proc-list { flex: 1; min-height: 0; overflow-y: auto; }
#studio-home > *, #proc-list > * { flex: none; } /* scroll container: children stack, never shrink */
.studio { flex: 1; min-height: 0; display: flex; }
.studio-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; height: 100%; }
.studio-bar { height: 48px; flex: none; display: flex; align-items: center; gap: var(--kls-space-xsmall); padding: 0 var(--kls-space-med); border-bottom: 1px solid var(--kls-outline-variant); background: var(--kls-surface); }
.studio-thread { flex: 1; overflow-y: auto; padding: var(--kls-space-med) var(--kls-space-large); }
.studio-thread .inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--kls-space-med); }
.activity { display: flex; flex-direction: column; gap: var(--kls-space-tiny); margin-bottom: var(--kls-space-xsmall); }
.activity .act { display: flex; align-items: center; gap: var(--kls-space-xsmall); color: var(--kls-on-surface-variant); }
.activity .act .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kls-success); flex: none; }
.activity .act.running .dot { background: var(--kls-info); animation: kls-blink 1s steps(1) infinite; }
.activity .act.failed .dot { background: var(--kls-error); }
.activity.folded .act:not(:last-child) { display: none; }
.activity summary { cursor: pointer; color: var(--kls-on-surface-variant); list-style: none; }
.qcard { border: 1px solid var(--kls-outline-variant); border-radius: var(--kls-radius-med); padding: var(--kls-space-small) var(--kls-space-med); background: var(--kls-surface); display: flex; flex-direction: column; gap: var(--kls-space-xsmall); margin-top: var(--kls-space-xsmall); }
.qcard .opts { display: flex; flex-wrap: wrap; gap: var(--kls-space-xsmall); }
.qcard.answered { opacity: .6; }
.srcrow { display: flex; flex-wrap: wrap; gap: var(--kls-space-xsmall); margin-top: var(--kls-space-xsmall); }
.srcrow .pill { cursor: pointer; border: 0; font-family: inherit; }
.studio-draft { width: 460px; flex: none; border-left: 1px solid var(--kls-outline-variant); background: var(--kls-surface); display: flex; flex-direction: column; min-height: 0; height: 100%; }
.studio-draft-body { flex: 1; overflow-y: auto; padding: var(--kls-space-med); display: flex; flex-direction: column; gap: var(--kls-space-small); }
#studio-draft-form { display: flex; flex-direction: column; gap: var(--kls-space-small); }
.draft-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--kls-space-small); }
.draft-step { border: 1px solid var(--kls-outline-variant); border-radius: var(--kls-radius-med); padding: var(--kls-space-small); display: flex; flex-direction: column; gap: var(--kls-space-xsmall); background: var(--kls-surface-variant); }
.draft-step.changed { border-color: var(--kls-info); }
.studio-savebar { flex: none; border-top: 1px solid var(--kls-outline-variant); padding: var(--kls-space-small) var(--kls-space-med); display: flex; justify-content: flex-end; gap: var(--kls-space-xsmall); align-items: center; }
.sess-row { display: flex; align-items: center; gap: var(--kls-space-small); padding: var(--kls-space-xsmall) 0; border-bottom: 1px solid var(--kls-outline-variant); }
.sess-row:last-child { border-bottom: 0; }
.sess-row .t { cursor: pointer; } .sess-row .t:hover { text-decoration: underline; }
.proc-doc { width: 820px; max-width: 100%; margin-top: var(--kls-space-med); }
.proc-steps { margin: 0; padding-left: var(--kls-space-med); display: flex; flex-direction: column; gap: var(--kls-space-small); }
.proc-steps li { padding-left: var(--kls-space-xsmall); }
.proc-note { background: var(--kls-progress-container); color: var(--kls-on-progress-container); border-radius: var(--kls-radius-small); padding: var(--kls-space-xsmall) var(--kls-space-small); margin-top: var(--kls-space-tiny); }
@media (max-width: 1100px) { .studio { flex-direction: column; } .studio-chat { height: auto; flex: 1 1 50%; } .studio-draft { width: auto; height: auto; flex: 1 1 50%; border-left: 0; border-top: 1px solid var(--kls-outline-variant); } }
@media print { .no-print, .rail, .hdr { display: none !important; } body { background: var(--kls-color-base-white); } .proc-doc { box-shadow: none; border: 0; } }

.studio-bar .meta { color: var(--kls-on-surface-variant); white-space: nowrap; }
.turn.assistant .md.typing .text:empty::after { content: "Thinking…"; color: var(--kls-on-surface-variant); animation: kls-blink 1.2s steps(1) infinite; }
#studio-stop { display: none; } .studio.streaming #studio-stop { display: inline-flex; } .studio.streaming #studio-send { display: none; }

/* ---------- Procedures: list + step runner ---------- */
.proc-card { display: flex; flex-direction: column; gap: var(--kls-space-xsmall); background: var(--kls-surface); border: 1px solid var(--kls-outline-variant); border-radius: var(--kls-radius-med); padding: var(--kls-space-med); text-decoration: none; color: inherit; cursor: pointer; }
.proc-card:hover { border-color: var(--kls-outline); }
.proc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--kls-space-small); }
.progress { height: 6px; border-radius: var(--kls-radius-pill); background: var(--kls-tertiary-container); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--kls-on-surface); width: 0; transition: width var(--kls-dur-fade-animation) var(--kls-ease-standard); }
.runner { flex: 1; min-height: 0; display: flex; }
.runner-list { width: 320px; flex: none; border-right: 1px solid var(--kls-outline-variant); background: var(--kls-surface); display: flex; flex-direction: column; min-height: 0; height: 100%; }
.runner-list .steps { flex: 1; overflow-y: auto; padding: var(--kls-space-xsmall) 0; }
.runner-list .step { display: flex; align-items: flex-start; gap: var(--kls-space-small); padding: var(--kls-space-xsmall) var(--kls-space-med); cursor: pointer; border-left: 3px solid transparent; }
.runner-list .step:hover { background: var(--kls-tertiary); }
.runner-list .step.on { background: var(--kls-surface-container-lowest); border-left-color: var(--kls-on-surface); }
.runner-list .step .n { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--kls-outline); font-size: 12px; font-weight: 700; }
.runner-list .step.done .n { background: var(--kls-success); color: var(--kls-on-success); border-color: transparent; }
.runner-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; height: 100%; }
.runner-body { flex: 1; overflow-y: auto; padding: var(--kls-space-large); }
.runner-body .inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--kls-space-med); }
.callout { border-radius: var(--kls-radius-med); padding: var(--kls-space-small) var(--kls-space-med); border: 1px solid transparent; white-space: pre-wrap; }
.callout.warn { background: var(--kls-progress-container); color: var(--kls-on-progress-container); }
.callout.error { background: var(--kls-error-container); color: var(--kls-on-error-container); }
.callout.info { background: var(--kls-info-container); color: var(--kls-on-info-container); }
.runner-foot { flex: none; border-top: 1px solid var(--kls-outline-variant); background: var(--kls-surface); padding: var(--kls-space-small) var(--kls-space-large); display: flex; align-items: center; gap: var(--kls-space-xsmall); }
.runner-foot .spacer { flex: 1; }
.done-state { text-align: center; padding: var(--kls-space-xlarge) 0; display: flex; flex-direction: column; align-items: center; gap: var(--kls-space-small); }
@media (max-width: 900px) { .runner { flex-direction: column; } .runner-list { width: auto; height: auto; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--kls-outline-variant); } .runner-main { height: auto; } .runner-body { padding: var(--kls-space-med); } .runner-foot { padding: var(--kls-space-small) var(--kls-space-med); } }

/* ---------- runs: notes, sheets, assistant drawer ---------- */
.run-meta { padding: var(--kls-space-small) var(--kls-space-med); border-bottom: 1px solid var(--kls-outline-variant); }
.runner-list .step .badges { display: flex; gap: var(--kls-space-tiny); margin-top: 2px; }
.notes-sec { border-top: 1px solid var(--kls-outline-variant); padding-top: var(--kls-space-med); display: flex; flex-direction: column; gap: var(--kls-space-small); }
.note { display: flex; gap: var(--kls-space-small); align-items: flex-start; border: 1px solid var(--kls-outline-variant); border-radius: var(--kls-radius-med); padding: var(--kls-space-small) var(--kls-space-med); background: var(--kls-surface); }
.note .who { color: var(--kls-on-surface-variant); }
.note .txt { white-space: pre-wrap; }
.note.resolved { opacity: .6; }
.kind { display: inline-flex; align-items: center; gap: var(--kls-space-tiny); padding: var(--kls-space-tiny) var(--kls-space-xsmall); border-radius: var(--kls-radius-xsmall); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 14px; white-space: nowrap; }
.kind.note { background: var(--kls-tertiary); color: var(--kls-on-surface-variant); }
.kind.issue { background: var(--kls-error-container); color: var(--kls-on-error-container); }
.kind.deviation { background: var(--kls-progress-container); color: var(--kls-on-progress-container); }
.kind.tip { background: var(--kls-info-container); color: var(--kls-on-info-container); }
.kind-pick { display: flex; gap: var(--kls-space-xsmall); flex-wrap: wrap; }
.kind-pick button { border: 1px solid var(--kls-outline-variant); background: var(--kls-surface); border-radius: var(--kls-radius-small); padding: var(--kls-space-xsmall) var(--kls-space-small); font: inherit; font-weight: 600; font-size: var(--kls-label-medium-medium-size); color: var(--kls-on-surface); cursor: pointer; }
.kind-pick button.on { background: var(--kls-on-surface); color: var(--kls-surface); border-color: transparent; }
.alert.sheet { width: 440px; gap: var(--kls-space-small); }
.alert.sheet .field { margin-top: var(--kls-space-xsmall); }
.chat-drawer { width: min(44vw, 640px); }
.chat-drawer .thread { flex: 1; overflow-y: auto; }
.chat-drawer .composer { border-top: 1px solid var(--kls-outline-variant); }
.src-note { display: flex; flex-direction: column; gap: var(--kls-space-tiny); border: 1px solid var(--kls-outline-variant); border-radius: var(--kls-radius-small); padding: var(--kls-space-xsmall) var(--kls-space-small); }
.run-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--kls-space-small); }

/* ---------- analytics (dataviz: thin single-series bars, recessive axes, text in text tokens) ---------- */
.bars { display: flex; flex-direction: column; gap: var(--kls-space-xsmall); }
.bar-row { display: grid; grid-template-columns: minmax(160px, 28%) 1fr auto; gap: var(--kls-space-small); align-items: center; min-height: 28px; }
.bar-row .lbl { color: var(--kls-on-surface); }
.bar-row .track { position: relative; height: 12px; background: var(--kls-surface-variant); border-radius: var(--kls-radius-xsmall); overflow: hidden; }
.bar-row .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--kls-on-surface); border-radius: 0 var(--kls-radius-xsmall) var(--kls-radius-xsmall) 0; min-width: 2px; transition: width var(--kls-dur-fade-animation) var(--kls-ease-standard); }
.bar-row:hover .fill { background: var(--kls-color-neutral-600); }
[data-theme="dark"] .bar-row:hover .fill { background: var(--kls-color-neutral-300); }
.bar-row .val { color: var(--kls-on-surface-variant); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 56px; text-align: right; }
.bar-row .extra { display: inline-flex; gap: var(--kls-space-tiny); margin-left: var(--kls-space-xsmall); }
.an-tip { position: fixed; z-index: 60; pointer-events: none; background: var(--kls-inverse-surface); color: var(--kls-on-inverse-surface); padding: var(--kls-space-xsmall) var(--kls-space-small); border-radius: var(--kls-radius-small); font-size: 12px; line-height: 16px; box-shadow: var(--kls-drop-shadow); display: none; }
.feed-item { display: flex; gap: var(--kls-space-small); align-items: flex-start; padding: var(--kls-space-xsmall) 0; border-bottom: 1px solid var(--kls-outline-variant); }
.feed-item:last-child { border-bottom: 0; }