/* ============================================================
   Поступ · application chrome
   Layout only. Every colour, radius, shadow and duration comes from
   the design-system tokens in ../styles.css — nothing is hardcoded.
   ============================================================ */

html, body { height: 100% }
body { margin: 0; background: var(--surface-page); overflow: hidden }

.app { display: grid; grid-template-columns: 242px 1fr; height: 100vh; height: 100dvh; overflow: hidden }

/* ---- narrow: the rail keeps its icons but drops its words ----
   Between roughly a small laptop and a tablet there is still room for a rail,
   just not for 242px of it. Labels go, glyphs stay, and the layout survives. */
.app--compact { grid-template-columns: 68px 1fr }
.app--compact .side { padding: 12px 8px; align-items: center }
.app--compact .side__wm span:not(.dot) { display: none }
.app--compact .side__wm { font-size: 24px }
.app--compact .side__brand { flex-direction: column; gap: 12px; padding: 4px 0 12px }
.app--compact .side__k { justify-content: center; padding: 0 }
.app--compact .side__k span, .app--compact .side__k kbd { display: none }
.app--compact .trk-nav__label, .app--compact .trk-nav__group { display: none }
.app--compact .trk-nav__item { justify-content: center; padding: 0 }
.app--compact .trk-nav__badge {
  position: absolute; translate: 12px -12px; min-width: 16px; height: 16px;
  font-size: 9.5px; padding: 0 4px;
}
.app--compact .trk-nav__item { position: relative }
.app--compact .side__foot { flex-direction: column; gap: 8px }
.app--compact .side__me { display: none }
.app--compact .top, .app--compact .scroll { padding-left: 16px; padding-right: 16px }

/* ---- phone: no rail at all ----
   A 242px rail on a 375px screen left 133px for the app itself. Below this
   width navigation moves to the bottom, where a thumb actually reaches. */
.app--phone { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto }
.app--phone .main { grid-row: 1 }
.app--phone .top { padding: 10px 14px; gap: 8px }
.app--phone .top__h { font-size: 18px }
.app--phone .top__over { font-size: 9px }
.app--phone .scroll { padding: 14px 14px 24px }
.app--phone .sheet { gap: 14px }
.app--phone .grid2, .app--phone .notes { grid-template-columns: minmax(0, 1fr) }
.app--phone .hero { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px }
.app--phone .cards4, .app--phone .cards3 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px }

.tabbar {
  grid-row: 2; display: flex; align-items: stretch; justify-content: space-around;
  gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: var(--surface-sunken); border-top: 1px solid var(--border-subtle);
}
.tabbar__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 48px; padding: 4px 2px; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--text-muted); font-family: var(--font-sans);
  font-size: 10px; font-weight: var(--fw-medium); cursor: pointer; position: relative;
  transition: var(--transition-colors);
}
.tabbar__item svg { width: 21px; height: 21px }
.tabbar__item[aria-current="page"] { color: var(--brand-primary) }
.tabbar__item[aria-current="page"] .tabbar__glyph { background: var(--brand-primary-subtle) }
.tabbar__glyph {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 26px; border-radius: var(--radius-full);
  transition: background-color var(--duration-normal) var(--ease-standard);
}
.tabbar__item:focus-visible { outline: none; box-shadow: var(--shadow-focus) }
.tabbar__badge {
  position: absolute; top: 2px; right: 50%; translate: 20px 0;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: var(--radius-full);
  background: var(--brand-primary); color: #fff;
  font-family: var(--font-mono); font-size: 9px; line-height: 15px; text-align: center;
}

/* The floating add button sits above the tab bar, thumb-reachable. */
.fab {
  position: fixed; right: 16px; z-index: 40;
  bottom: calc(76px + env(safe-area-inset-bottom));
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-full);
  background: var(--brand-primary); color: var(--text-on-brand);
  box-shadow: var(--shadow-brand); cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring);
}
.fab:active { transform: scale(.93) }
.fab:focus-visible { outline: none; box-shadow: var(--shadow-focus) }

/* ---- left rail ---- */
.side { display: flex; flex-direction: column; background: var(--surface-sunken); border-right: 1px solid var(--border-subtle); padding: 14px 12px; gap: 2px; overflow-y: auto }
.side__brand { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 4px 6px 14px }
.side__wm { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.03em; color: var(--text-brand) }
.side__wm .dot { color: var(--brand-accent) }
.side__k { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; margin-bottom: 8px; padding: 0 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-faint); font-family: var(--font-sans); font-size: 13px; cursor: pointer; transition: var(--transition-colors) }
.side__k span { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.side__k svg { flex: none }
.side__k:hover { border-color: var(--border-strong); color: var(--text-muted) }
.side__k kbd { flex: none; font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; border-radius: 4px; background: var(--surface-sunken); border: 1px solid var(--border-subtle) }
.side__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 9px }
.side__me { flex: 1; min-width: 0; display: flex; flex-direction: column }
.side__me b { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em }
.side__me span { font-size: 11px; color: var(--text-muted) }

/* ---- main column ---- */
.main { display: flex; flex-direction: column; min-width: 0; overflow: hidden }
.top { display: flex; align-items: center; gap: 14px; padding: 14px 26px; background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); flex: none }
.top__t { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.top__over { font-size: 10px; font-weight: 600; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-accent) }
.top__h { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.025em; color: var(--text-primary); line-height: 1.15 }
.top__sp { flex: 1 }
.top__acts { display: flex; align-items: center; gap: 8px }
.scroll { flex: 1; overflow-y: auto; padding: 22px 26px 64px }

/* ---- content scaffolding ---- */
.sheet { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px }
.notes { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 18px; align-items: start }
@media (max-width: 1100px) { .notes { grid-template-columns: minmax(0, 1fr) } }
.notes__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle) }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start }
@media (max-width: 1100px) { .grid2 { grid-template-columns: minmax(0, 1fr) } }
.col { display: flex; flex-direction: column; gap: 14px }
.stack { display: flex; flex-direction: column; gap: 8px }
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px }
.cards4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px }
.sechead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px }
.sechead h3 { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.012em; color: var(--text-primary) }
.sechead .n { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted) }
.muted { font-size: 13px; color: var(--text-muted) }
.panel { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 18px }
.panel--flat { background: var(--surface-sunken); border-color: transparent; box-shadow: none }
.panel__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px }
.panel__hd h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.015em }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 20px; text-align: center; color: var(--text-muted) }
.empty h4 { font-family: var(--font-serif); font-size: 22px; font-weight: 400; color: var(--text-secondary) }
.hero-ring .trk-ring__track { stroke: rgba(255,255,255,.24) }
.hero-ring .trk-ring__fill { stroke: #fff }
.hero-ring .trk-ring__label { color: #fff }
.hero-ring .trk-ring__cap { color: rgba(255,255,255,.72) }
.quote { font-family: var(--font-serif); font-size: 18px; line-height: 1.45; color: var(--text-secondary) }

/* ---- hero (Сьогодні / Вечір) ---- */
.hero { display: flex; align-items: center; gap: 22px; padding: 22px 24px; border-radius: var(--radius-card); background: var(--brand-primary); color: #fff; box-shadow: var(--shadow-brand) }
.hero--evening { background: linear-gradient(135deg, var(--sand-800), var(--sand-900)) }
[data-theme="dark"] .hero--evening { background: linear-gradient(135deg, #2B2119, #120D0A) }
.hero__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px }
.hero__over { font-size: 10px; font-weight: 600; letter-spacing: var(--ls-wider); text-transform: uppercase; opacity: .78 }
.hero__h { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.025em; line-height: 1.15 }
.hero__p { font-size: 14px; opacity: .84; line-height: 1.5; max-width: 46ch }

/* ---- week grid (Тиждень) ---- */
.wgrid { display: grid; grid-template-columns: minmax(120px, 1.6fr) repeat(7, minmax(30px, 1fr)); gap: 5px; align-items: center }
.wgrid__h { text-align: center; font-size: 10px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-faint); padding-bottom: 4px }
.wgrid__h[data-today="true"] { color: var(--brand-primary) }
.wgrid__n { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); min-width: 0 }
.wgrid__n span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wgrid__n svg { flex: none; width: 15px; height: 15px }
.wcell { aspect-ratio: 1; width: 100%; border: 1.5px solid var(--border-subtle); border-radius: var(--radius-sm); background: transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-spring) }
.wcell:hover:not(:disabled) { border-color: var(--brand-primary) }
.wcell:active:not(:disabled) { transform: scale(.9) }
.wcell:focus-visible { outline: none; box-shadow: var(--shadow-focus) }
.wcell svg { width: 13px; height: 13px }
.wcell[data-done="true"] { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff }
.wcell[data-today="true"] { border-color: var(--brand-primary); border-style: dashed }
.wcell:disabled { cursor: default; opacity: .4 }

/* ---- agenda / lists ---- */
.agenda { display: flex; flex-direction: column; gap: 2px }
.ag { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--radius-md); transition: background-color var(--duration-fast) var(--ease-standard) }
.ag:hover { background: var(--surface-hover) }
.ag__time { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); width: 44px; flex: none; font-variant-numeric: tabular-nums }
.ag__spine { width: 3px; align-self: stretch; min-height: 26px; border-radius: 2px; flex: none }
.ag__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px }
.ag__ttl { font-size: 13.5px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ag__dur { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono) }
.ag__x { opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard) }
.ag:hover .ag__x { opacity: 1 }

/* ---- notes ---- */
.nlist { display: flex; flex-direction: column; gap: 4px; max-height: 62vh; overflow-y: auto; padding-right: 2px }
.nitem { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 11px 12px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; text-align: left; cursor: pointer; transition: var(--transition-colors) }
.nitem:hover { background: var(--surface-hover) }
.nitem[data-active="true"] { background: var(--surface-card); border-color: var(--border-subtle); box-shadow: var(--shadow-xs) }
.nitem__t { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em }
.nitem__t i { width: 7px; height: 7px; border-radius: 50%; flex: none }
.nitem__x { font-size: 12px; color: var(--text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.nitem__d { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint) }
.ntitle { width: 100%; border: 0; background: transparent; outline: none; font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.025em; color: var(--text-primary); padding: 0 0 6px }
.ntitle::placeholder { color: var(--text-faint) }
.nbody { width: 100%; min-height: 46vh; border: 0; background: transparent; outline: none; resize: none; font-family: var(--font-serif); font-size: 19px; line-height: 1.6; color: var(--text-secondary) }
.nbody::placeholder { color: var(--text-faint) }

/* ---- focus log ---- */
.flog { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-sunken) }
.flog__m { font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: var(--text-primary); font-variant-numeric: tabular-nums }
.flog__t { flex: 1; min-width: 0; font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* ---- companion ---- */
.ins { display: flex; gap: 13px; padding: 16px; border-radius: var(--radius-card); background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs) }
.ins__ic { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: color-mix(in oklab, var(--_c) 13%, transparent); color: var(--_c) }
.ins__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.ins__t { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--text-primary); letter-spacing: -0.005em; line-height: 1.3 }
.ins__x { font-size: 13px; color: var(--text-muted); line-height: 1.5 }

/* ---- streak flame ----
   Ochre is the brand's celebration colour, so the live flame is ochre.
   "At risk" cools and dims rather than alarming: a missed day is never an error. */
.flame { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle }
.flame__glyph { position: relative; display: block; flex: none }
.flame__glyph svg { display: block; position: absolute; inset: 0 }
.flame__outer { fill: var(--brand-accent); transform-origin: 50% 90% }
.flame__inner { fill: var(--ochre-200); transform-origin: 50% 90%; opacity: .95 }
.flame__n { font-family: var(--font-mono); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--text-accent); font-variant-numeric: tabular-nums; line-height: 1 }
.flame__u { font-family: var(--font-sans); font-weight: var(--fw-medium); opacity: .7; margin-left: 3px }

@keyframes flame-flicker {
  0%, 100% { transform: scale(1, 1) }
  25%      { transform: scale(1.06, 0.96) }
  50%      { transform: scale(0.95, 1.05) }
  75%      { transform: scale(1.03, 0.98) }
}
@keyframes flame-inner {
  0%, 100% { transform: scale(1) translateY(0); opacity: .95 }
  40%      { transform: scale(0.86) translateY(1px); opacity: .75 }
  70%      { transform: scale(1.08) translateY(-1px); opacity: 1 }
}

.flame--active .flame__outer { animation: flame-flicker 1.7s var(--ease-in-out) infinite }
.flame--active .flame__inner { animation: flame-inner 1.1s var(--ease-in-out) infinite }

/* cooler, slower, dimmer — never red */
.flame--atRisk .flame__outer { fill: var(--sand-400); animation: flame-flicker 3.4s var(--ease-in-out) infinite }
.flame--atRisk .flame__inner { fill: var(--ochre-300); animation: flame-inner 2.6s var(--ease-in-out) infinite }
.flame--atRisk .flame__n { color: var(--text-muted) }

.flame--none .flame__outer { fill: var(--sand-300) }
.flame--none .flame__inner { fill: var(--sand-200) }
.flame--none .flame__n { color: var(--text-faint) }

.flame--frozen .flame__outer { fill: var(--teal-200) }
.flame--frozen .flame__inner { fill: var(--teal-100) }
.flame--frozen .flame__n { color: var(--info-text) }
.flame__frost { position: absolute; inset: 0; fill: none; stroke: var(--info); stroke-width: 1.6; stroke-linecap: round; opacity: .85 }
[data-theme="dark"] .flame--frozen .flame__outer { fill: var(--teal-500) }
[data-theme="dark"] .flame--frozen .flame__inner { fill: var(--teal-200) }

.flame--celebrate .flame__glyph { animation: psp-pop var(--duration-slower) var(--ease-spring) }

@media (prefers-reduced-motion: reduce) {
  .flame__outer, .flame__inner { animation: none !important }
}

/* ---- confetti ---- */
.confetti { position: absolute; inset: 0; display: block; pointer-events: none; z-index: 5 }
.confetti i { position: absolute; top: 50%; left: 50%; border-radius: 2px; animation: psp-confetti 1100ms var(--ease-out) forwards }
@media (prefers-reduced-motion: reduce) { .confetti { display: none } }

/* ---- streak card ---- */
.streak { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: hidden }
.streak::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 8% 0%, var(--brand-accent-subtle), transparent 60%); pointer-events: none }
.streak--none::before, .streak--atRisk::before { opacity: .45 }
.streak--frozen::before { background: radial-gradient(120% 90% at 8% 0%, var(--info-subtle), transparent 60%) }
.streak__main { display: flex; align-items: center; gap: 16px; position: relative }
.streak__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.streak__h { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 20px; letter-spacing: var(--ls-tight); color: var(--text-primary) }
.streak__p { font-size: 13px; color: var(--text-muted); line-height: 1.45 }
.streak__best { flex: none; align-self: flex-start }
.streak__next { position: relative }
.streak__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative }

/* ---- week calendar ---- */
.cal { display: flex; flex-direction: column; min-width: 0 }
.cal__head {
  position: sticky; top: 0; z-index: 6;
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  background: var(--surface-card); border-bottom: 1px solid var(--border-subtle);
}
.cal__headdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) }
.cal__day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 4px; border-left: 1px solid var(--border-subtle) }
.cal__day[data-today="true"] { background: var(--brand-primary-subtle) }
.cal__dow { font-size: 10px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-faint) }
.cal__day[data-today="true"] .cal__dow { color: var(--brand-primary) }
.cal__num { font-family: var(--font-mono); font-size: 15px; color: var(--text-primary) }
.cal__day[data-today="true"] .cal__num { color: var(--brand-primary) }

.cal__body { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable }
.cal__grid { display: grid; grid-template-columns: 56px minmax(0, 1fr) }
.cal__gutter { position: relative }
.cal__hour { position: absolute; right: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint) }
.cal__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative }
.cal__col { position: relative; border-left: 1px solid var(--border-subtle); touch-action: none; cursor: crosshair }
.cal__col[data-today="true"] { background: color-mix(in oklab, var(--brand-primary) 3%, transparent) }
.cal__line { position: absolute; left: 0; right: 0; height: 1px; background: var(--border-subtle); opacity: .55; pointer-events: none }

.cal__ev { position: absolute; border-radius: var(--radius-sm); border-left: 3px solid; padding: 3px 6px; overflow: hidden; cursor: grab; user-select: none; touch-action: none; box-shadow: var(--shadow-xs); display: flex; flex-direction: column; gap: 1px; transition: box-shadow var(--duration-fast) var(--ease-standard) }
.cal__ev:hover { box-shadow: var(--shadow-sm) }
.cal__ev[data-dragging="true"] { cursor: grabbing; box-shadow: var(--shadow-lg); opacity: .95 }
.cal__evt { font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cal__evm { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); white-space: nowrap }
.cal__grip { position: absolute; left: 0; right: 0; height: 7px; cursor: ns-resize }
.cal__grip--top { top: 0 }
.cal__grip--bottom { bottom: 0 }
.cal__ev:hover .cal__grip::after { content: ""; position: absolute; left: 50%; translate: -50% 0; width: 22px; height: 2px; border-radius: 2px; background: var(--border-strong) }
.cal__grip--top::after { top: 2px }
.cal__grip--bottom::after { bottom: 2px }

.cal__ghost { position: absolute; left: 2%; width: 96%; border-radius: var(--radius-sm); border: 1.5px dashed var(--brand-primary); background: var(--brand-primary-subtle); color: var(--brand-primary); font-family: var(--font-mono); font-size: 10px; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 20 }
.cal__now { position: absolute; left: 0; right: 0; height: 2px; background: var(--brand-primary); z-index: 25; pointer-events: none }
.cal__now::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-primary) }

/* ---- consultant chat ---- */
.chat { overflow: hidden }
.chat__tabs { padding: 12px 14px 0 }
.chat__thread { display: flex; flex-direction: column; gap: 14px; padding: 16px; min-height: 220px; max-height: 52vh; overflow-y: auto }
.chat__intro { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 8px 2px }
.chat__ic { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: color-mix(in oklab, var(--_c) 13%, transparent); color: var(--_c) }

.msg { display: flex; gap: 10px; max-width: 100%; animation: psp-fade-up var(--duration-normal) var(--ease-out) both }
.msg__ic { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--brand-primary-subtle); color: var(--brand-primary); margin-top: 2px }
.msg__b { min-width: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary) }
.msg--user { justify-content: flex-end }
.msg--user .msg__b { background: var(--brand-primary); color: var(--text-on-brand); padding: 10px 14px; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg); max-width: 78% }
.msg--error .msg__ic { background: var(--danger-subtle); color: var(--danger-text) }
.msg--error .msg__b { color: var(--danger-text) }
.md-p { margin: 0 0 8px }
.md-p:last-child { margin-bottom: 0 }
.md-list { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px }
.md-list:last-child { margin-bottom: 0 }
.msg__b code { background: var(--surface-sunken); padding: 1px 5px; border-radius: var(--radius-xs); font-size: .92em }
.msg--user .msg__b code { background: rgba(255,255,255,.2) }
.msg__dots { display: inline-flex; gap: 4px; padding: 6px 0 }
.msg__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: psp-pulse 1.1s var(--ease-in-out) infinite }
.msg__dots i:nth-child(2) { animation-delay: .18s }
.msg__dots i:nth-child(3) { animation-delay: .36s }

.chat__bar { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border-subtle); background: var(--surface-sunken) }
.chat__bar .trk-textarea { min-height: 40px; max-height: 150px }
.chat__foot { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--border-subtle); font-size: 12px }
.linkish { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0; font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); cursor: pointer; transition: var(--transition-colors) }
.linkish:hover { color: var(--text-primary) }
.chat__ctx { padding: 0 14px 14px }
.ctxdump { margin: 0; padding: 12px; max-height: 260px; overflow: auto; background: var(--surface-sunken); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 11px; line-height: 1.55; color: var(--text-muted); white-space: pre-wrap; word-break: break-word }

/* ---- misc ---- */
.row { display: flex; align-items: center; gap: 10px }
.row--wrap { flex-wrap: wrap }
.grow { flex: 1; min-width: 0 }
.fields { display: flex; flex-direction: column; gap: 14px }
.field { display: flex; flex-direction: column; gap: 6px }
.field > label { font-size: 12px; font-weight: 600; color: var(--text-secondary) }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums }
.legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted) }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: block }