/* Kite chat demo · generic assistant window (not Claude/ChatGPT styling). Tokens only, light theme.
   Layout never depends on playback: every message is always laid out, the log has a fixed height,
   and .is-pending only changes opacity/transform (see chat-demo.js). The live demo adds a mini Kite admin (.adm)
   whose panes also have fixed heights; its changes are opacity, class and text swaps inside reserved boxes. */

.demo{margin:0}
.demo__panel[hidden]{display:none}

/* ---------- Window ---------- */
.chat{--chat-h:420px;background:var(--k-surface);border:1px solid var(--k-line);border-radius:var(--k-r-lg);box-shadow:var(--k-sh-pop);overflow:hidden;display:flex;flex-direction:column;text-align:left}
@media (min-width:640px){.chat{--chat-h:480px}}
@media (min-width:1024px){.chat{--chat-h:520px}}
.demo--hero .chat{box-shadow:var(--k-sh-dialog),0 0 0 1px var(--k-line)}
@media (min-width:1024px){.demo--hero .chat{--chat-h:470px}}

.chat__bar{display:flex;align-items:center;gap:var(--k-s-2);height:48px;padding:0 var(--k-s-4);background:var(--k-head);border-bottom:1px solid var(--k-line)}
.chat__avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--k-select);color:var(--k-cobalt);flex:none}
.chat__avatar svg{width:16px;height:16px}
.chat__title{font-size:var(--k-fs-14);font-weight:var(--k-w-heavy);color:var(--k-ink)}
.chat__conn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--k-fs-12);font-weight:var(--k-w-bold);color:var(--k-ok);background:var(--k-ok-bg);border-radius:var(--k-r-pill);padding:2px 10px}
.chat__conn i{width:7px;height:7px;border-radius:50%;background:var(--k-paid-dot)}

.chat__log{position:relative;height:var(--chat-h);overflow-y:auto;overscroll-behavior:contain;padding:var(--k-s-5) var(--k-s-4);display:flex;flex-direction:column;gap:var(--k-s-4);scrollbar-width:thin;scrollbar-color:var(--k-line-2) transparent}
@media (min-width:640px){.chat__log{padding:var(--k-s-5)}}
.chat__log:focus-visible{outline-offset:-3px}

/* ---------- Messages ---------- */
.msg{font-size:var(--k-fs-15);line-height:1.5;color:var(--k-ink)}
.msg--user{align-self:flex-end;max-width:86%}
.msg__bubble{margin:0;background:var(--k-select);border-radius:18px 18px 6px 18px;padding:10px 14px;font-weight:var(--k-w-semi)}
.msg--agent{align-self:stretch;max-width:100%}
.msg__who{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:var(--k-fs-13);font-weight:var(--k-w-heavy);color:var(--k-ink)}
.msg__who svg{width:16px;height:16px;color:var(--k-string-strong)}
.msg__work{display:flex;align-items:center;gap:var(--k-s-2);margin:0 0 var(--k-s-2);font-size:var(--k-fs-13);color:var(--k-muted)}
/* Work line: a small diamond; pulses while the agent works, settles to the ok tone when done. */
.msg__spin{width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--k-paid-dot);flex:none}
.msg__work.is-working .msg__spin{background:var(--k-cobalt)}
.msg__body{display:flex;flex-direction:column;gap:var(--k-s-3)}
.msg__body>*{margin:0}
.msg__note{font-size:var(--k-fs-13);color:var(--k-muted)}

.msg__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:var(--k-s-2)}
.msg__stats div{background:var(--k-raised);border:1px solid var(--k-line);border-radius:var(--k-r-md);padding:8px 12px}
.msg__stats dt{font-size:var(--k-fs-12);color:var(--k-muted);font-weight:var(--k-w-bold)}
.msg__stats dd{margin:0;font-size:var(--k-fs-20);font-weight:var(--k-w-heavy);letter-spacing:-.01em;color:var(--k-ink)}

.msg__kv{background:var(--k-raised);border:1px solid var(--k-line);border-radius:var(--k-r-md);padding:2px 12px}
.msg__kv div{display:grid;grid-template-columns:96px 1fr;gap:var(--k-s-3);padding:8px 0;border-top:1px solid var(--k-line)}
.msg__kv div:first-child{border-top:0}
.msg__kv dt{font-size:var(--k-fs-13);color:var(--k-muted);font-weight:var(--k-w-bold)}
.msg__kv dd{margin:0;font-size:var(--k-fs-14);font-weight:var(--k-w-semi)}
@media (max-width:420px){.msg__kv div{grid-template-columns:1fr;gap:0}}

.msg__rows{list-style:none;padding:0;background:var(--k-raised);border:1px solid var(--k-line);border-radius:var(--k-r-md)}
.msg__rows li{display:grid;grid-template-columns:1fr auto;grid-template-areas:"n t" "d t";column-gap:var(--k-s-3);align-items:center;padding:8px 12px;border-top:1px solid var(--k-line)}
.msg__rows li:first-child{border-top:0}
.msg__rows b{grid-area:n;font-size:var(--k-fs-14)}
.msg__rows span{grid-area:d;font-size:var(--k-fs-13);color:var(--k-muted)}
.msg__rows .tag{grid-area:t}
.tag{font-style:normal;font-size:var(--k-fs-12);font-weight:var(--k-w-heavy);border-radius:var(--k-r-pill);padding:2px 9px;white-space:nowrap}
.tag--under{background:var(--k-under-bg);color:var(--k-under)}
.tag--refund{background:var(--k-refund-bg);color:var(--k-refund)}
.tag--wait{background:var(--k-wait-bg);color:var(--k-wait)}
.tag--ok{background:var(--k-ok-bg);color:var(--k-ok)}
.tag--over{background:var(--k-over-bg);color:var(--k-over)}

.msg__done{list-style:none;padding:0;display:grid;gap:6px}
.msg__done li{display:flex;gap:var(--k-s-2);align-items:flex-start}
.msg__done svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--k-ok)}

.msg__chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--k-s-2)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--k-fs-13);font-weight:var(--k-w-bold);color:var(--k-ink);background:var(--k-raised);border:1px solid var(--k-line-2);border-radius:var(--k-r-pill);padding:5px 12px}
.chip svg{width:14px;height:14px;display:none}
.chip.is-picked{background:var(--k-chip-on-bg);color:var(--k-chip-on-ink);border-color:var(--k-chip-on-bg)}
.chip.is-picked svg{display:block}

.msg-div{display:flex;align-items:center;gap:var(--k-s-3);margin:var(--k-s-1) 0;font-size:var(--k-fs-12);font-weight:var(--k-w-heavy);letter-spacing:.04em;text-transform:uppercase;color:var(--k-muted)}
.msg-div::before,.msg-div::after{content:"";flex:1;height:1px;background:var(--k-line-2)}

/* ---------- Composer (decorative; the typed text is also in the message above) ---------- */
.chat__composer{display:flex;align-items:center;gap:var(--k-s-2);padding:10px var(--k-s-3);border-top:1px solid var(--k-line);background:var(--k-surface)}
.chat__input{flex:1;min-width:0;min-height:42px;display:flex;align-items:center;padding:0 var(--k-s-4);background:var(--k-raised);border:1px solid var(--k-line-2);border-radius:var(--k-r-pill);font-size:var(--k-fs-14);color:var(--k-muted);white-space:nowrap;overflow:hidden}
.chat__input.is-typing{color:var(--k-ink);border-color:var(--k-cobalt)}
.chat__input.is-typing::after{content:"";width:2px;height:1.1em;margin-left:1px;background:var(--k-ink);flex:none}
.chat__send{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--k-cobalt);color:var(--k-on-cobalt);flex:none}
.chat__send svg{width:18px;height:18px}

/* ---------- Caption + control ---------- */
.demo__cap{display:flex;align-items:center;justify-content:space-between;gap:var(--k-s-3);margin-top:var(--k-s-3);font-size:var(--k-fs-13);color:var(--k-ink-2)}
.demo-ctrl{flex:none;min-height:var(--k-hit);padding:0 var(--k-s-4);border-radius:var(--k-r-pill);border:1px solid var(--k-line-2);background:var(--k-raised);color:var(--k-ink);font:inherit;font-size:var(--k-fs-14);font-weight:var(--k-w-heavy);cursor:pointer;transition:background-color var(--k-dur) var(--k-ease)}
.demo-ctrl:hover{background:var(--k-hover)}
.demo-ctrl[hidden]{display:none}

/* ---------- Attachments on a user message (pasted list, link, file) ---------- */
.msg__att{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.att{display:flex;align-items:flex-start;gap:6px;max-width:100%;font-size:var(--k-fs-12);color:var(--k-ink-2);background:var(--k-raised);border:1px solid var(--k-line-2);border-radius:var(--k-r-sm);padding:5px 10px}
.att svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--k-muted)}
.att span{min-width:0;overflow-wrap:anywhere}
/* The pasted list is clamped visually; screen readers still get every address. */
.att--paste span{font-family:var(--k-mono);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Pillar demos (one conversation beside a pillar's points) ---------- */
.demo--solo .chat{--chat-h:400px}
@media (min-width:1024px){.demo--solo .chat{--chat-h:440px}}
.demo__impact{margin:0 0 var(--k-s-3);font-size:var(--k-fs-14);color:var(--k-ink-2)}
.demo__impact b{color:var(--k-string-strong)}

/* ---------- Live demo (Kite Agent section): tabs, then chat beside the mini Kite admin ---------- */
.demo--live{display:grid;gap:var(--k-s-4)}
.demo--live .demo__cap{margin-top:0}
.demo__tabs{display:grid;grid-template-columns:1fr 1fr;gap:var(--k-s-2)}
.scn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:var(--k-hit);padding:10px 14px;text-align:left;font:inherit;color:var(--k-ink);background:var(--k-raised);border:1px solid var(--k-line);border-radius:var(--k-r-md);cursor:pointer;transition:background-color var(--k-dur) var(--k-ease),border-color var(--k-dur) var(--k-ease)}
.scn:hover{background:var(--k-hover)}
.scn[aria-selected="true"]{background:var(--k-select);border-color:var(--k-cobalt);box-shadow:inset 0 0 0 1px var(--k-cobalt)}
.scn__n{font-size:var(--k-fs-12);font-weight:var(--k-w-heavy);color:var(--k-muted);letter-spacing:.06em}
.scn__t{font-size:var(--k-fs-15);font-weight:var(--k-w-black);line-height:1.3}
.scn__a{display:none}
.demo__stage{min-width:0}
/* Below 1024px the tabs are one swipeable row, so tabs + chat + the live strip fit a 390×844 screen together
   (the update must be visible without scrolling the page). The row runs to the screen edges, its right edge fades
   and the third tab peeks, so it reads as "more this way". chat-demo.js keeps the selected tab in view. */
@media (max-width:1023px){
  .demo--live{gap:var(--k-s-3)}
  .demo--live .demo__tabs{--edge:var(--k-s-5);position:relative;display:flex;gap:var(--k-s-2);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);scrollbar-width:none;margin:0 calc(-1 * var(--edge));padding:2px var(--edge);-webkit-mask-image:linear-gradient(90deg,var(--k-ink) calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,var(--k-ink) calc(100% - 56px),transparent)}
  .demo--live .demo__tabs::after{content:"";flex:none;width:32px} /* lets the last tab scroll clear of the fade */
  .demo--live .demo__tabs::-webkit-scrollbar{display:none}
  .demo--live .scn{flex:none;flex-direction:row;align-items:center;gap:8px;scroll-snap-align:start;white-space:nowrap}
}
@media (min-width:768px) and (max-width:1023px){.demo--live .demo__tabs{--edge:var(--k-s-8)}}
@media (min-width:1024px){
  .demo__tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--k-s-3)}
  .scn{padding:var(--k-s-3) var(--k-s-4)}
  .scn__t{font-size:var(--k-fs-16)}
  .scn__a{display:block;font-size:var(--k-fs-13);color:var(--k-ink-2);line-height:1.4}
}

/* Split: side by side from 1024px, both panes with fixed heights. Below that the chat runs full width with the
   live strip pinned under it; the admin itself opens in the bottom sheet. */
.live{display:grid;gap:var(--k-s-3)}
.live .chat{--chat-h:300px}
.adm{height:330px}
@media (min-width:640px){.live .chat{--chat-h:340px}.adm{height:440px}}
@media (max-width:1023px){.live__laptop{display:none}}

/* ---------- Live strip: only what the last message changed in the admin ---------- */
.strip{background:var(--k-surface);border:1px solid var(--k-line);border-radius:var(--k-r-md);box-shadow:var(--k-sh-pop);padding:var(--k-s-2) var(--k-s-2) var(--k-s-3) var(--k-s-4)}
.strip__head{display:flex;align-items:center;justify-content:space-between;gap:var(--k-s-2)}
.strip__t{margin:0;display:flex;align-items:center;gap:8px;min-width:0;font-size:var(--k-fs-13);font-weight:var(--k-w-heavy);color:var(--k-ink-2)}
.strip__t i{width:8px;height:8px;border-radius:50%;background:var(--k-paid-dot);flex:none}
.strip__open{flex:none;min-height:var(--k-hit);padding:0 var(--k-s-4);border-radius:var(--k-r-pill);border:1px solid var(--k-line-2);background:var(--k-raised);color:var(--k-ink);font:inherit;font-size:var(--k-fs-14);font-weight:var(--k-w-heavy);cursor:pointer;transition:background-color var(--k-dur) var(--k-ease)}
.strip__open:hover{background:var(--k-hover)}
.strip__list{list-style:none;margin:var(--k-s-1) var(--k-s-2) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(72px,auto);gap:var(--k-s-2)}
.strip__i{display:flex;flex-direction:column;justify-content:space-between;gap:2px;min-width:0;padding:6px 10px;border:1px solid var(--k-line);border-radius:var(--k-r-sm);background:var(--k-raised)}
.strip__k{font-size:var(--k-fs-12);font-weight:var(--k-w-bold);color:var(--k-muted)}
.strip__v{font-size:var(--k-fs-16);font-weight:var(--k-w-heavy);color:var(--k-ink);line-height:1.35;min-width:0}
.strip__v .num{font-size:var(--k-fs-20);letter-spacing:-.01em}
.strip__v .adm-muted{color:var(--k-ink)}
.strip .tag{white-space:normal;overflow-wrap:anywhere}
.strip .fx-swap{vertical-align:baseline}

/* ---------- Bottom sheet: the full admin, lent by the selected panel (chat-demo.js) ---------- */
.sheet{position:fixed;inset:auto 0 0;margin:0 auto;width:min(100%,760px);max-width:none;height:min(86dvh,720px);max-height:none;padding:0 0 env(safe-area-inset-bottom);border:0;border-radius:var(--k-r-xl) var(--k-r-xl) 0 0;background:var(--k-canvas);color:var(--k-ink);box-shadow:var(--k-sh-dialog);overflow:hidden;flex-direction:column}
.sheet[open]{display:flex}
.sheet::backdrop{background:var(--k-scrim)}
html:has(.sheet[open]){overflow:hidden}
.sheet__head{position:relative;flex:none;display:flex;align-items:center;gap:var(--k-s-3);padding:var(--k-s-4) var(--k-s-2) var(--k-s-2) var(--k-s-5);background:var(--k-surface);border-bottom:1px solid var(--k-line)}
.sheet__grip{position:absolute;left:50%;top:6px;width:40px;height:4px;margin-left:-20px;border-radius:var(--k-r-pill);background:var(--k-line-2)}
.sheet__t{flex:1;min-width:0;margin:0;display:grid;line-height:1.3}
.sheet__t b{font-size:var(--k-fs-18);font-weight:var(--k-w-black)}
.sheet__t span{font-size:var(--k-fs-14);color:var(--k-ink-2)}
.sheet__x{flex:none;width:var(--k-hit);height:var(--k-hit);display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--k-ink);cursor:pointer}
.sheet__x:hover{background:var(--k-hover)}
.sheet__x svg{width:22px;height:22px}
.sheet__x:focus-visible{outline-offset:-3px}
.sheet__body{flex:1;min-height:0;display:flex;flex-direction:column}
.sheet .adm{flex:1;height:auto;min-height:0;border:0;border-radius:0;box-shadow:none}
@media (prefers-reduced-motion:no-preference){
  .sheet[open]{animation:k-sheet-up var(--k-dur-slow) var(--k-ease-lift)}
  .sheet[open]::backdrop{animation:k-sheet-fade var(--k-dur-slow) var(--k-ease)}
}
@keyframes k-sheet-up{from{transform:translateY(100%)}}
@keyframes k-sheet-fade{from{opacity:0}}
@media (min-width:1024px){
  .live{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--k-s-4)}
  .live .chat{--chat-h:520px}
  .adm{height:auto}
}

/* ---------- Mini Kite admin: a faithful, smaller rebuild of docs/design/screens/admin-*.html ---------- */
.adm{display:flex;flex-direction:column;min-width:0;background:var(--k-canvas);border:1px solid var(--k-line);border-radius:var(--k-r-lg);box-shadow:var(--k-sh-pop);overflow:hidden;text-align:left;font-size:var(--k-fs-13);line-height:1.45;color:var(--k-ink)}
.adm__bar{display:flex;align-items:center;gap:6px;height:36px;flex:none;padding:0 var(--k-s-3);background:var(--k-head);border-bottom:1px solid var(--k-line)}
.adm__bar i{width:9px;height:9px;border-radius:50%;background:var(--k-line-2);flex:none}
.adm__url{margin-left:var(--k-s-2);flex:1;min-width:0;font-size:var(--k-fs-12);color:var(--k-muted);background:var(--k-raised);border-radius:var(--k-r-pill);padding:2px 12px;white-space:nowrap;overflow:hidden}
.adm__body{flex:1;min-height:0;display:flex}

/* Sidebar: paper → sky (DESIGN §4 gradient slot 2), active item = select tone + cobalt diamond. */
.adm__side{display:none;flex:none;width:164px;background:var(--k-grad-side);border-right:1px solid var(--k-line);padding:var(--k-s-4) var(--k-s-2)}
@media (min-width:600px){.adm__side{display:block}}
.adm__brand{display:flex;gap:8px;align-items:center;margin:0 0 var(--k-s-4);padding:0 var(--k-s-2)}
.adm__brand svg{width:22px;height:22px;flex:none;color:var(--k-ink)}
.adm__brand b{display:block;font-size:var(--k-fs-15);font-weight:var(--k-w-black);line-height:1.2}
.adm__brand small{display:block;font-size:var(--k-fs-11);color:var(--k-muted)}
.adm__nav{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.adm__nav li{position:relative;display:flex;align-items:center;gap:8px;height:32px;padding:0 10px 0 20px;border-radius:var(--k-r-sm);color:var(--k-ink-2);font-weight:var(--k-w-semi);white-space:nowrap}
.adm__nav svg{width:16px;height:16px;flex:none}
.adm__nav li.is-on{background:var(--k-select);color:var(--k-ink);font-weight:var(--k-w-heavy)}
.adm__nav li.is-on::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--k-cobalt);transform:rotate(45deg);border-radius:1px}
/* 1024–1279: the admin column is narrow, so the sidebar folds to an icon rail. */
@media (min-width:1024px) and (max-width:1279px){
  .adm__side{width:52px;padding:var(--k-s-4) 6px}
  .adm__brand{justify-content:center;padding:0}
  .adm__brand span,.adm__nav span{display:none}
  .adm__nav li{justify-content:center;padding:0}
  .adm__nav li.is-on::before{left:2px}
}

.adm__main{flex:1;min-width:0;display:flex;flex-direction:column}
.adm__top{flex:none;display:flex;align-items:center;gap:var(--k-s-2);height:44px;padding:0 var(--k-s-3);border-bottom:1px solid var(--k-line);background:var(--k-surface)}
.adm__search{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--k-line-2);border-radius:var(--k-r-sm);background:var(--k-raised);color:var(--k-muted);font-size:var(--k-fs-12);white-space:nowrap;overflow:hidden}
.adm__search svg{width:14px;height:14px;flex:none}
/* "Kite Agent" pill: the dot turns cobalt while Claude/ChatGPT is working through Kite. */
.adm__agent{flex:none;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--k-r-pill);background:var(--k-select);font-size:var(--k-fs-12);font-weight:var(--k-w-heavy)}
.adm__agent i{width:7px;height:7px;border-radius:50%;background:var(--k-paid-dot)}
.adm__agent.is-working i{background:var(--k-cobalt)}

/* Screens stack in one box; a second screen replaces the first when its key fires. Each scrolls on its own. */
.adm__screens{flex:1;min-height:0;position:relative}
.adm__screen{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--k-s-4);background:var(--k-canvas);scrollbar-width:thin;scrollbar-color:var(--k-line-2) transparent}
.adm__screen:focus-visible{outline-offset:-3px}
.adm__crumb{margin:0;font-size:var(--k-fs-12);color:var(--k-muted)}
.adm__title{margin:2px 0 0;display:flex;align-items:center;gap:var(--k-s-2);flex-wrap:wrap;font-size:var(--k-fs-20);font-weight:var(--k-w-black);letter-spacing:-.02em;line-height:1.25}
.adm__sub{margin:2px 0 var(--k-s-3);color:var(--k-ink-2)}

.adm .tag{font-size:var(--k-fs-11);padding:1px 8px}
.adm .num{font-variant-numeric:tabular-nums}
.adm-muted{color:var(--k-ink-2);white-space:nowrap}
.adm-dot{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.adm-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--k-paid-dot);flex:none}

/* Filter chips with counts; the first one is the pressed "Tất cả". */
/* Sticky, so the counters stay in sight while new rows push the list down. */
.adm-counts{list-style:none;margin:0 0 var(--k-s-2);padding:var(--k-s-2) 0;display:flex;flex-wrap:wrap;gap:6px;position:sticky;top:calc(-1 * var(--k-s-4));z-index:1;background:var(--k-canvas)}
.adm-counts li{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--k-line-2);border-radius:var(--k-r-pill);background:var(--k-raised);font-size:var(--k-fs-12);font-weight:var(--k-w-bold)}
.adm-counts li:first-child{background:var(--k-chip-on-bg);color:var(--k-chip-on-ink);border-color:var(--k-chip-on-bg)}
.adm-counts b{font-weight:var(--k-w-heavy);border-radius:var(--k-r-xs);padding:0 2px}
.adm-counts li:first-child b{color:var(--k-chip-on-count)}

.adm-tabs{list-style:none;margin:0 0 var(--k-s-3);padding:0;display:flex;gap:var(--k-s-4);border-bottom:1px solid var(--k-line);font-weight:var(--k-w-bold);color:var(--k-ink-2);overflow:hidden;white-space:nowrap}
.adm-tabs li{padding:6px 0}
.adm-tabs li.is-on{color:var(--k-ink);box-shadow:inset 0 -2px 0 var(--k-cobalt)}

.adm-card{background:var(--k-surface);border:1px solid var(--k-line);border-radius:var(--k-r-md);margin:0 0 var(--k-s-3);overflow:hidden}
.adm-card__h{margin:0;padding:10px 12px;font-weight:var(--k-w-heavy);border-bottom:1px solid var(--k-line)}

/* Table (DESIGN §5): 40px rows, zebra, selected = select tone + 3px cobalt inset. */
.adm-tbl{position:relative}
.adm-tbl table{width:100%;border-collapse:separate;border-spacing:0} /* separate: a pending row hides its own borders too */
.adm-tbl th{height:32px;padding:0 10px;text-align:left;font-size:var(--k-fs-11);font-weight:var(--k-w-heavy);color:var(--k-muted);background:var(--k-head);white-space:nowrap}
.adm-tbl td{height:40px;padding:5px 10px;border-top:1px solid var(--k-line);vertical-align:middle}
.adm-tbl tbody tr:nth-child(even){background:var(--k-zebra)}
.adm-tbl .r{text-align:right}
.adm-tbl .num{white-space:nowrap}
.adm-tbl tr.is-sel{background:var(--k-select);box-shadow:inset 3px 0 0 var(--k-cobalt)}
.adm-tbl tr.is-flag b{color:var(--k-under)}
@media (max-width:599px){
  .adm__screen{padding:var(--k-s-3)}
  .adm-counts{top:calc(-1 * var(--k-s-3))}
  .adm-tbl .hide-sm,.adm-tbl .adm-av{display:none}
  .adm-tbl th,.adm-tbl td{padding-left:8px;padding-right:8px}
  .adm-tbl .tag{white-space:normal}
}
.adm-empty{position:absolute;left:0;right:0;top:32px;margin:0;padding:var(--k-s-6) var(--k-s-4);text-align:center;color:var(--k-muted)}
.adm-who{display:flex;align-items:center;gap:8px;min-width:0}
.adm-who b{display:block;font-weight:var(--k-w-bold);overflow-wrap:break-word}
.adm-who small{display:block;color:var(--k-muted);font-size:var(--k-fs-11);overflow-wrap:break-word}
.adm-av{flex:none;width:26px;height:26px;border-radius:var(--k-r-sm);display:grid;place-items:center;background:var(--k-select);color:var(--k-string-strong);font-style:normal;font-size:10px;font-weight:var(--k-w-heavy)}

/* Course tree: chapters with a chevron, lessons with a type icon. */
.adm-ch+.adm-ch{border-top:1px solid var(--k-line)}
.adm-ch__row{margin:0;display:flex;align-items:center;gap:6px;padding:9px 12px;font-weight:var(--k-w-heavy)}
.adm-ch__row b{flex:1;min-width:0}
.adm-ch__chev{width:14px;height:14px;flex:none;color:var(--k-muted);transition:transform var(--k-dur) var(--k-ease)}
.adm-ch.is-open .adm-ch__chev{transform:rotate(90deg)}
.adm-ch__n{font-size:var(--k-fs-12);color:var(--k-muted);font-weight:var(--k-w-semi);white-space:nowrap}
.adm-ch__list{list-style:none;margin:0;padding:0 8px 8px}
.adm-ls{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 18px;border-radius:var(--k-r-sm)}
.adm-ls.is-sel{background:var(--k-select);box-shadow:inset 3px 0 0 var(--k-cobalt)}
.adm-ico{width:16px;height:16px;flex:none;color:var(--k-muted)}
.adm-ls__t{flex:1;min-width:0}
.adm-ls__t b{display:block;font-weight:var(--k-w-bold)}
.adm-ls__t small{display:block;color:var(--k-muted);font-size:var(--k-fs-11)}
.adm-ls__tags{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
@media (max-width:599px){.adm-ls{flex-wrap:wrap}.adm-ls__tags{flex-basis:100%;justify-content:flex-start;padding-left:24px}}

/* Lesson detail: attached files + protection switches (always on in this demo). */
.adm-files{list-style:none;margin:0;padding:10px 12px;display:grid;gap:8px}
.adm-files li{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--k-line);border-radius:var(--k-r-sm);background:var(--k-raised)}
.adm-files .adm-ico{margin-top:2px}
.adm-files b{display:block;font-weight:var(--k-w-bold);overflow-wrap:anywhere}
.adm-files small{display:block;color:var(--k-muted);font-size:var(--k-fs-11)}
.adm-toggles{list-style:none;margin:0;padding:0 12px 12px;display:grid;gap:6px}
.adm-toggles li{display:flex;align-items:center;gap:8px;font-weight:var(--k-w-semi)}
.adm-sw{width:28px;height:16px;border-radius:var(--k-r-pill);background:var(--k-cobalt);position:relative;flex:none}
.adm-sw::after{content:"";position:absolute;right:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--k-on-cobalt)}

/* Quiz attempt */
.adm-stats{margin:0 0 var(--k-s-3);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.adm-stats div{background:var(--k-surface);border:1px solid var(--k-line);border-radius:var(--k-r-md);padding:8px 10px}
.adm-stats dt{font-size:var(--k-fs-11);color:var(--k-muted);font-weight:var(--k-w-bold)}
.adm-stats dd{margin:0;font-size:var(--k-fs-18);font-weight:var(--k-w-heavy)}
.adm-stats .adm-stats__note{font-size:var(--k-fs-11);font-weight:var(--k-w-semi);color:var(--k-muted)}
.adm-ans{list-style:none;margin:0;padding:0}
.adm-ans li{padding:10px 12px}
.adm-ans li+li{border-top:1px solid var(--k-line)}
.adm-ans p{margin:0}
.adm-ans__q{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--k-fs-11);font-weight:var(--k-w-heavy);color:var(--k-muted)}
.adm-ans__t{margin:2px 0 4px!important;font-weight:var(--k-w-semi)}
.adm-ans__a{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.adm-ans__l{font-size:var(--k-fs-11);color:var(--k-muted)}
.adm-ans code{font-family:var(--k-mono);font-size:var(--k-fs-12);background:var(--k-head);border-radius:var(--k-r-xs);padding:1px 6px;overflow-wrap:anywhere}
.adm-ans__more{margin:0;padding:8px 12px;border-top:1px solid var(--k-line);color:var(--k-muted);font-size:var(--k-fs-12)}

/* Suggested feedback: a dashed select-tone draft until the teacher sends it, then a plain sent comment. */
.adm-note{margin:0 0 var(--k-s-3);padding:12px;border-radius:var(--k-r-md);background:var(--k-select);border:1px dashed var(--k-cobalt)}
.adm-note.is-sent{background:var(--k-surface);border:1px solid var(--k-line);box-shadow:inset 3px 0 0 var(--k-paid-dot)}
.adm-note p{margin:0}
.adm-note__h{margin-bottom:6px!important;display:flex;align-items:center;gap:6px;font-size:var(--k-fs-12);font-weight:var(--k-w-heavy);color:var(--k-string-strong)}
.adm-note.is-sent .adm-note__h{color:var(--k-ok)}
.adm-note__h svg{width:14px;height:14px;flex:none}
.adm-note__t{margin-bottom:10px!important}
.adm-btn{display:inline-flex;align-items:center;height:30px;padding:0 12px;margin-right:6px;border-radius:var(--k-r-pill);border:1px solid var(--k-line-2);background:var(--k-raised);font-weight:var(--k-w-heavy);font-size:var(--k-fs-12)}
.adm-btn--primary{background:var(--k-grad-primary);color:var(--k-on-cobalt);border-color:transparent}
.adm-btn--primary.is-pressed{box-shadow:0 0 0 var(--k-ring-w) var(--k-ring-color)}
.adm-sent{display:inline-flex;align-items:center;gap:6px;height:30px;font-weight:var(--k-w-heavy);font-size:var(--k-fs-12);color:var(--k-ok)}
.adm-sent svg{width:16px;height:16px}

/* ---------- Before/after twins ----------
   A swap keeps both states in one grid cell, so its size never changes. Without JS (or after playback)
   the "before" twin is hidden; chat-demo.js shows it (.is-before) while rewinding. */
.fx-swap{display:inline-grid;vertical-align:middle}
.fx-swap>*{grid-area:1 / 1}
[data-fx-out]:not(.is-before){visibility:hidden}
.is-anim .adm__screen.is-pending{visibility:hidden}

/* ---------- Playback states (only when JS runs and motion is allowed) ---------- */
@media (prefers-reduced-motion:no-preference){
  .is-anim [data-step],.is-anim [data-part],.is-anim [data-fx]{transition:opacity var(--k-dur-slow) var(--k-ease),transform var(--k-dur-slow) var(--k-ease-lift)}
  .is-anim .is-pending{opacity:0;transform:translateY(6px)}
  .msg__work.is-working .msg__spin{animation:k-chat-pulse .9s var(--k-ease) infinite alternate}
  .adm__agent.is-working i{animation:k-live-dot .9s var(--k-ease) infinite alternate}
  .chat__input.is-typing::after{animation:k-chat-caret 1s steps(1) infinite}
  /* Soft cobalt flash on whatever just changed; plays once. */
  .is-flash{animation:k-live-flash 1.8s var(--k-ease) 1}
}
@keyframes k-chat-pulse{from{transform:rotate(45deg) scale(.7);opacity:.55}to{transform:rotate(45deg) scale(1.15);opacity:1}}
@keyframes k-live-dot{from{transform:scale(.7);opacity:.55}to{transform:scale(1.2);opacity:1}}
@keyframes k-chat-caret{50%{opacity:0}}
@keyframes k-live-flash{from{background-color:var(--k-select);box-shadow:inset 0 0 0 2px var(--k-cobalt)}}