/* ============================================================
   Kidora Shell Skin — Storybook redesign, May 2026
   ------------------------------------------------------------
   Targets the existing #sidebar, .sb-*, .topbar, #messages,
   #welcome, .quick-bar, .input-bar markup so the redesign
   doesn't require rewriting the SPA's JS or breaking selectors
   the existing code depends on.

   Loads AFTER the inline <style> block so these rules win the
   cascade and override the dark-navy treatment.

   Scoped to [data-design="storybook"] so the rules only apply
   under the new design system — toggling the attribute away
   restores the old look.

   ============================================================ */

[data-design="storybook"] body {
  background: var(--k-bg);
  color: var(--k-ink);
  font-family: var(--k-font-sans);
}

/* ---- App layout container ---- */
[data-design="storybook"] #app {
  background: var(--k-bg);
}

/* ============================================================
   SIDEBAR — 296px white surface, ink text, sky/coral accents
   ============================================================ */
[data-design="storybook"] #sidebar {
  width: 296px;
  background: var(--k-surface);
  border-right: 1px solid var(--k-line);
  color: var(--k-ink);
  /* Top padding intentionally 0 so the brand block can carry its own padding
     and its bottom border lands on the same y-axis as the topbar's border. */
  padding: 0 16px 12px;
  gap: 4px;
}

/* Brand block — heights matched to topbar so the dividers line up across
   the seam. Topbar = padding 18 + content ~36 = ~72px tall; brand mirrors. */
[data-design="storybook"] .sb-brand {
  padding: 18px 4px;
  border-bottom: 1px solid var(--k-line);
  margin-bottom: 12px;
  min-height: 72px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* Section summaries — caption styling on muted ink */
[data-design="storybook"] .sb-section > summary,
[data-design="storybook"] .sb-section-label,
[data-design="storybook"] .sb-daycare-label,
[data-design="storybook"] .sb-quick-label {
  color: var(--k-ink-muted);
  font-family: var(--k-font-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 8px 2px;
}
[data-design="storybook"] .sb-section > summary::after {
  border-right-color: var(--k-ink-muted);
  border-bottom-color: var(--k-ink-muted);
}
[data-design="storybook"] .sb-section > summary:hover,
[data-design="storybook"] .sb-section > summary:hover::after {
  color: var(--k-ink);
  border-color: var(--k-ink);
}

/* Daycare cards — outlined when active, tinted hover */
[data-design="storybook"] #dc-list {
  padding: 0 0 8px;
}
[data-design="storybook"] .sb-daycare-card {
  background: var(--k-bg-alt);
  border: 2px solid transparent;
  border-radius: var(--k-r-md);
  padding: 7px 12px;
  margin-bottom: 4px;
  color: var(--k-ink);
  transition: background var(--k-dur-fast) var(--k-ease),
              border-color var(--k-dur-fast) var(--k-ease);
}
[data-design="storybook"] .sb-daycare-card:hover {
  background: var(--k-sky-soft);
}
[data-design="storybook"] .sb-daycare-card.active,
[data-design="storybook"] .sb-daycare-card[aria-current="true"] {
  background: var(--k-surface);
  border-color: var(--k-sky);
  box-shadow: var(--k-shadow-sm);
}
[data-design="storybook"] .sb-daycare-name {
  color: var(--k-ink);
  font-size: 14px;
  font-weight: 700;
}
[data-design="storybook"] .sb-daycare-dot {
  background: var(--k-good);
}
[data-design="storybook"] .sb-daycare-stats {
  color: var(--k-ink-muted);
  font-size: 11px;
  font-weight: 500;
}

/* Tablet Mode CTA — the hero blue button with 4px solid drop shadow */
[data-design="storybook"] .sb-tablet-btn {
  background: linear-gradient(135deg, var(--k-sky), color-mix(in srgb, var(--k-sky) 75%, var(--k-plum))) !important;
  color: var(--k-ink-on-color) !important;
  border-radius: var(--k-r-md);
  padding: 10px 14px;
  margin: 4px 0 6px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 3px 0 rgba(23, 34, 56, 0.22);
  transition: filter var(--k-dur-fast) var(--k-ease),
              transform var(--k-dur-fast) var(--k-ease),
              box-shadow var(--k-dur-fast) var(--k-ease);
}
[data-design="storybook"] .sb-tablet-btn:hover { filter: brightness(1.05); }
[data-design="storybook"] .sb-tablet-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(23, 34, 56, 0.22);
}
[data-design="storybook"] .sb-tablet-btn .sc-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--k-r-sm);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  flex-shrink: 0;
}
[data-design="storybook"] .sb-tablet-btn .sc-label { color: #fff; font-weight: 800; }
[data-design="storybook"] .sb-tablet-btn .sc-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 1px;
  letter-spacing: 0;
  text-transform: none;
}

/* Generic sidebar quick-chip — icon tile + label + sub + chevron */
[data-design="storybook"] .sb-section .sb-quick-chip {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--k-r-md);
  padding: 6px 10px;
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--k-ink-soft);
  font-weight: 600;
  font-size: 14px;
}
[data-design="storybook"] .sb-section .sb-quick-chip:hover {
  background: var(--k-bg-alt);
  color: var(--k-ink);
}
[data-design="storybook"] .sb-section .sb-quick-chip .sc-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--k-r-sm);
  background: var(--k-sky-soft);
  color: var(--k-sky);
  flex-shrink: 0;
}
[data-design="storybook"] .sb-section .sb-quick-chip .sc-icon svg,
[data-design="storybook"] .sb-section .sb-quick-chip .sc-icon .k-svg {
  width: 16px;
  height: 16px;
}
[data-design="storybook"] .sb-section .sb-quick-chip .sc-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
[data-design="storybook"] .sb-section .sb-quick-chip .sc-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--k-ink-muted);
  letter-spacing: 0;
  text-transform: none;
}
/* Chevron at end of row */
[data-design="storybook"] .sb-section .sb-quick-chip::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--k-ink-muted);
  border-bottom: 1.5px solid var(--k-ink-muted);
  transform: rotate(-45deg);
  flex-shrink: 0;
  margin-right: 2px;
}

/* Per-item icon tints — distinct color per row inside each section
   so Documents/Dashboards/News & Insights aren't all sage. */
[data-design="storybook"] .sb-section:nth-of-type(1) .sb-quick-chip:nth-of-type(1) .sc-icon { background: var(--k-coral-soft); color: var(--k-coral); }
[data-design="storybook"] .sb-section:nth-of-type(1) .sb-quick-chip:nth-of-type(2) .sc-icon { background: var(--k-sage-soft); color: var(--k-sage); }
[data-design="storybook"] .sb-section:nth-of-type(1) .sb-quick-chip:nth-of-type(3) .sc-icon { background: var(--k-sunshine-soft); color: var(--k-warn); }
[data-design="storybook"] .sb-section:nth-of-type(2) .sb-quick-chip:nth-of-type(1) .sc-icon { background: var(--k-plum-soft); color: var(--k-plum); }
[data-design="storybook"] .sb-section:nth-of-type(2) .sb-quick-chip:nth-of-type(2) .sc-icon { background: var(--k-sky-soft); color: var(--k-sky); }
[data-design="storybook"] .sb-section:nth-of-type(2) .sb-quick-chip:nth-of-type(3) .sc-icon { background: var(--k-coral-soft); color: var(--k-coral); }

/* Sidebar footer — user pill. Height tuned to match the chat composer
   on the right so the bottoms line up visually. */
[data-design="storybook"] .sb-footer {
  margin-top: auto;
  padding: 10px 12px;
  background: var(--k-bg-alt);
  border-radius: var(--k-r-md);
  border-top: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
}
[data-design="storybook"] .sb-user-av {
  width: 36px;
  height: 36px;
  background: var(--k-plum);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  border-radius: 50%;
}
[data-design="storybook"] .sb-user-email {
  color: var(--k-ink);
  font-size: 12px;
  font-weight: 600;
}
[data-design="storybook"] .sb-signout,
[data-design="storybook"] .sb-theme-btn {
  color: var(--k-ink-muted);
  background: none;
}
[data-design="storybook"] .sb-signout:hover,
[data-design="storybook"] .sb-theme-btn:hover {
  background: var(--k-surface);
  color: var(--k-ink);
}

/* Mobile backdrop */
[data-design="storybook"] #sb-backdrop { background: rgba(23, 34, 56, 0.36); }
[data-design="storybook"] .sb-close { color: var(--k-ink-muted); }

/* ============================================================
   TOPBAR — rebuilt to spec (2026-05-21).
   64×64 Sabrina avatar block (white surface, plum bg behind SVG)
   + green online dot bottom-right, caption eyebrow "Sabrina · here
   to help" + greeting headline addressing user by name, two
   header tiles (Here today / Time), Available pill on far right.
   ============================================================ */
[data-design="storybook"] .topbar {
  background: var(--k-surface);
  border-bottom: 1px solid var(--k-line);
  padding: 18px 28px;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 16px;
  /* `nowrap` (was `wrap`) so the topbar can never grow taller than its
     content on a single row. At mobile widths a wrapped second row pushed
     the topbar to 137px tall — 65px below the sidebar brand divider — and
     broke the seam across the page. With nowrap, we keep height equal to
     the sidebar brand (--shell-header-h-storybook = ~72px) at every width.
     Tightening padding + hiding the fullscreen button on small screens
     (see media queries below) is what makes nowrap fit without overflow. */
  flex-wrap: nowrap;
  min-width: 0;
}
/* Tighten topbar at tablet/phone so the row stays one-tall and the
   sidebar brand vs topbar bottom border keep aligning across the seam.
   Both surfaces get matched min-height per breakpoint. */
@media (max-width: 900px) {
  [data-design="storybook"] .topbar { padding: 12px 16px; gap: 10px; min-height: 64px; }
  [data-design="storybook"] .sb-brand { min-height: 64px; padding: 12px 4px; }
}
@media (max-width: 600px) {
  [data-design="storybook"] .topbar { padding: 8px 12px; gap: 8px; min-height: 56px; }
  [data-design="storybook"] .sb-brand { min-height: 56px; padding: 8px 4px; }
  /* The "Your Daycare Secretary" subtitle adds ~16px of height; on mobile
     where header height is tight, hide it and let just "Sabrina" stand. */
  [data-design="storybook"] .topbar-sub { display: none; }
  /* Shrink the "Available" pill to free room for the daycare pill (more useful). */
  [data-design="storybook"] .sabrina-pill { padding: 5px 8px; font-size: 11px; }
  /* Width-based hide too (covers desktops shrunk to mobile width — the
     hover/pointer media query only fires on real touch devices). */
  [data-design="storybook"] #k-fs-btn { display: none !important; }
}
/* Also hide the fullscreen button on ALL touch devices regardless of width.
   iPad Safari is wide (≥768px) but its Fullscreen API is also gated to
   <video> — showing a non-working button on iPad would be worse than not
   showing it. (hover:none) + (pointer:coarse) is the canonical touch test. */
@media (hover: none) and (pointer: coarse) {
  [data-design="storybook"] #k-fs-btn { display: none !important; }
}
@media (max-width: 380px) {
  [data-design="storybook"] .sabrina-pill > [data-i18n="online"],
  [data-design="storybook"] .sabrina-pill > span:not(.s-dot) { display: none; }
  [data-design="storybook"] .sabrina-pill { padding: 5px; }
}

/* ── Primary CTA chip (Who's Here?) ──
   Storybook's generic .qa-chip rule was overriding the legacy
   .qa-chip--primary orange-fill, leaving the primary action invisible
   (same white card as the other 5 chips). Re-emphasize it here with
   storybook-level specificity. */
[data-design="storybook"] .quick-bar .qa-chip.qa-chip--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(61, 122, 201, 0.22);
}
[data-design="storybook"] .quick-bar .qa-chip.qa-chip--primary:hover {
  background: var(--accent-active, #2B5A96);
  border-color: var(--accent-active, #2B5A96);
}
[data-design="storybook"] .quick-bar .qa-chip.qa-chip--primary .qi {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
[data-design="storybook"] .topbar-v2 .topbar-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--k-r-md);
  background: var(--k-surface);  /* light bg lets the warm orange face read clean, not muddy */
  border: 1px solid var(--k-line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
[data-design="storybook"] .topbar-v2 .topbar-avatar svg {
  border-radius: 50%;
  display: block;
}
[data-design="storybook"] .topbar-v2 .topbar-avatar-dot {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 16px;        /* bumped from 14 — more discernible at glance distance */
  height: 16px;
  border-radius: 50%;
  background: var(--k-good);
  border: 3px solid var(--k-surface);
  box-shadow: 0 0 0 1px var(--k-line);
}
[data-design="storybook"] .topbar-v2 .topbar-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;             /* more breathing room between eyebrow + greeting */
  min-width: 0;
}
[data-design="storybook"] .topbar-v2 .topbar-eyebrow {
  font-family: var(--k-font-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-sky);
  line-height: 1.2;
}
[data-design="storybook"] .topbar-v2 .topbar-greeting {
  font-family: var(--k-font-display);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
  color: var(--k-ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
/* Use a deeper coral and underline-on-hover semantic so the name reads as
   "Sabrina addressing YOU" — not as a link affordance. */
[data-design="storybook"] .topbar-v2 .topbar-greeting #topbar-greeting-name {
  color: #C8442C;       /* deeper coral — distinct emphasis, less hyperlink-y */
  font-weight: 900;
}

/* Two stat tiles next to greeting */
[data-design="storybook"] .topbar-v2 .topbar-tiles {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
[data-design="storybook"] .topbar-v2 .topbar-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--k-bg-alt);
  border-radius: var(--k-r-md);
}
[data-design="storybook"] .topbar-v2 .topbar-tile[data-tone="sage"]     { background: var(--k-sage-soft); }
[data-design="storybook"] .topbar-v2 .topbar-tile[data-tone="sky"]      { background: var(--k-sky-soft); }
[data-design="storybook"] .topbar-v2 .topbar-tile[data-tone="sunshine"] { background: var(--k-sunshine-soft); }
[data-design="storybook"] .topbar-v2 .topbar-tile-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  color: var(--k-ink);
}
[data-design="storybook"] .topbar-v2 .topbar-tile[data-tone="sage"] .topbar-tile-icon { color: var(--k-sage); }
[data-design="storybook"] .topbar-v2 .topbar-tile[data-tone="sky"]  .topbar-tile-icon { color: var(--k-sky); }
[data-design="storybook"] .topbar-v2 .topbar-tile[data-tone="sunshine"] .topbar-tile-icon { color: var(--k-warn); }
/* Hide empty-state em-dash tiles so the header doesn't read as broken.
   JS replaces the value with real data and the tile reveals itself. */
[data-design="storybook"] .topbar-v2 .topbar-tile.is-empty { display: none; }
[data-design="storybook"] .topbar-v2 .topbar-tile-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-design="storybook"] .topbar-v2 .topbar-tile-label {
  font-family: var(--k-font-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--k-ink-muted);
}
[data-design="storybook"] .topbar-v2 .topbar-tile-value {
  font-family: var(--k-font-sans);
  font-size: 14px;
  font-weight: 800;
  color: var(--k-ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Legacy mini title/sub kept for back-compat but hidden in v2 */
[data-design="storybook"] .topbar-v2 .topbar-title,
[data-design="storybook"] .topbar-v2 .topbar-sub { display: none; }

/* The new topbar already shows online state via the avatar dot — the legacy
   "Available" pill is redundant. Hide it in v2 to declutter the header. */
[data-design="storybook"] .topbar-v2 .sabrina-pill { display: none; }
[data-design="storybook"] .sabrina-pill {
  background: var(--k-good-soft);
  color: var(--k-good);
  border-radius: var(--k-r-pill);
  padding: 6px 14px;
  font-weight: 700;
  font-size: 12px;
}
[data-design="storybook"] .sabrina-pill .s-dot { background: var(--k-good); }
[data-design="storybook"] .sb-toggle { color: var(--k-ink); }

/* Narrow viewports — hide the tiles, keep avatar + greeting */
@media (max-width: 1024px) {
  [data-design="storybook"] .topbar-v2 .topbar-tiles { display: none; }
}
@media (max-width: 640px) {
  [data-design="storybook"] .topbar-v2 .sabrina-pill { display: none; }
  [data-design="storybook"] .topbar-v2 .topbar-greeting { font-size: 16px; }
}

/* ============================================================
   MESSAGES + WELCOME — chat conversation area
   ============================================================ */
[data-design="storybook"] #messages {
  background: var(--k-bg);
  padding: 28px;
  gap: 20px;
}

[data-design="storybook"] #welcome {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-lg);
  border-top-left-radius: 8px;
  padding: 28px;
  box-shadow: var(--k-shadow-sm);
  color: var(--k-ink);
}
[data-design="storybook"] .wc-name {
  font-family: var(--k-font-display);
  font-size: clamp(26px, 6vw, 32px);
  font-weight: 800;
  color: var(--k-ink);
  margin-top: 16px;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
[data-design="storybook"] .wc-sub {
  color: var(--k-sky);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 6px;
}
[data-design="storybook"] .wc-msg {
  color: var(--k-ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin-top: 12px;
}
[data-design="storybook"] .wc-chips-label {
  color: var(--k-ink-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 20px;
}
[data-design="storybook"] .wc-chips {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
[data-design="storybook"] .wc-chips button,
[data-design="storybook"] .wc-chips .wc-chip {
  background: var(--k-surface);
  border: 2px solid var(--k-line-strong);
  border-radius: var(--k-r-pill);
  padding: 8px 14px;
  font-family: var(--k-font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--k-ink);
  cursor: pointer;
  transition: background var(--k-dur-fast) var(--k-ease),
              border-color var(--k-dur-fast) var(--k-ease);
}
[data-design="storybook"] .wc-chips button:hover,
[data-design="storybook"] .wc-chips .wc-chip:hover {
  background: var(--k-sky-soft);
  border-color: var(--k-sky);
  color: var(--k-sky);
}

/* Chat message bubbles (the dynamic ones rendered into #messages).
   Live DOM inspection showed actual structure is:
     <div class="msg-row agent"> <div class="msg-avatar"></div> <div class="msg-bubble"> ... </div> </div>
     <div class="msg-row user">  <div class="msg-bubble"> ... </div> <div class="msg-avatar"></div> </div>
   (the `.sabrina` qualifier I assumed never existed). */
[data-design="storybook"] .msg-row {
  font-family: var(--k-font-sans);
}
[data-design="storybook"] .msg-row.agent .msg-bubble {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-lg);
  border-top-left-radius: 6px;
  box-shadow: var(--k-shadow-sm);
  color: var(--k-ink);
  padding: 14px 18px;
}
[data-design="storybook"] .msg-row.user .msg-bubble {
  background: var(--k-sky);
  color: var(--k-ink-on-color);
  border: 1px solid transparent;
  border-radius: var(--k-r-lg);
  border-top-right-radius: 6px;
  padding: 14px 18px;
}
/* Timestamp / meta line under each bubble */
[data-design="storybook"] .msg-row .msg-time,
[data-design="storybook"] .msg-row .msg-meta {
  color: var(--k-ink-muted);
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}
[data-design="storybook"] .msg-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--k-sky), var(--k-plum));
  color: #fff;
  font-weight: 800;
}

/* Typing indicator */
[data-design="storybook"] #typing .typing-bubble {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-lg);
  border-top-left-radius: 6px;
  box-shadow: var(--k-shadow-sm);
  padding: 14px 18px;
}
[data-design="storybook"] #typing .t-dot {
  background: var(--k-ink-muted);
}

/* ============================================================
   QUICK BAR — "TAP TO ASK SABRINA" 6-col tile grid
   ============================================================ */
[data-design="storybook"] .quick-bar {
  background: var(--k-bg);
  padding: 12px 28px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 12px;
  overflow-x: visible;
}
[data-design="storybook"] .quick-bar .qa-chip {
  background: var(--k-surface);
  border: 2px solid var(--k-line);
  border-radius: var(--k-r-md);
  padding: 8px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: auto;
  color: var(--k-ink);
  font-family: var(--k-font-sans);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  /* Mobile touch hardening (added 2026-05-23):
     - manipulation: kills the 300ms tap delay and double-tap-zoom on the chip,
       which together caused phantom mis-fires on iOS Safari.
     - tap-highlight-color: removes the gray flash iOS draws over tapped buttons.
     - user-select / touch-callout: kills the long-press text-select + image
       callout that older iOS shows over buttons.  */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  transition: border-color var(--k-dur-fast) var(--k-ease),
              background var(--k-dur-fast) var(--k-ease);
}
[data-design="storybook"] .quick-bar .qa-chip:hover {
  border-color: var(--k-sky);
  background: var(--k-sky-soft);
}
[data-design="storybook"] .quick-bar .qa-chip .qi {
  width: 34px;
  height: 34px;
  border-radius: var(--k-r-sm);
  background: var(--k-sky-soft);
  color: var(--k-sky);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
[data-design="storybook"] .quick-bar .qa-chip .qi svg,
[data-design="storybook"] .quick-bar .qa-chip .qi .k-svg { width: 18px; height: 18px; }
[data-design="storybook"] .quick-bar .qa-chip:nth-child(6n+1) .qi { background: var(--k-coral-soft); color: var(--k-coral); }
[data-design="storybook"] .quick-bar .qa-chip:nth-child(6n+2) .qi { background: var(--k-sage-soft); color: var(--k-sage); }
[data-design="storybook"] .quick-bar .qa-chip:nth-child(6n+3) .qi { background: var(--k-sky-soft); color: var(--k-sky); }
[data-design="storybook"] .quick-bar .qa-chip:nth-child(6n+4) .qi { background: var(--k-plum-soft); color: var(--k-plum); }
[data-design="storybook"] .quick-bar .qa-chip:nth-child(6n+5) .qi { background: var(--k-sunshine-soft); color: var(--k-warn); }
[data-design="storybook"] .quick-bar .qa-chip:nth-child(6n+6) .qi { background: var(--k-good-soft); color: var(--k-good); }
/* ── Cluster dividers (qa_incidents → qa_menu, qa_staff → qa_allergies) ──
   Vertical hairline between chip clusters. Hidden by default; the desktop
   storybook grid uses :nth-child colors instead of dividers. We re-enable
   them in the scroll layouts (≤900px) where they're meaningful again. */
[data-design="storybook"] .quick-bar .qa-divider { display: none; }

/* Quickbar chip interaction state. Inline drag-to-reorder was removed
   (lived in Settings → Customize quick actions instead), so the old
   .qa-grip / .dragging / .drop-target / cursor:grab rules are gone. */
[data-design="storybook"] .quick-bar .qa-chip {
  user-select: none;
  position: relative;
  transition: border-color var(--k-dur-fast) var(--k-ease),
              background var(--k-dur-fast) var(--k-ease);
}

/* ── Wide screens (>900px): keep the storybook auto-fit grid (8+ chips at once) ── */

/* ── Tablet (≤900px): switch to a single-row horizontal scroller ──
   The grid layout wrapped to 2-3 rows on narrow screens — measured 30-46%
   of viewport-height waste on iPhone. Flex + overflow-x:auto restores a
   single row that scrolls sideways (familiar iOS Settings/App Store pattern).
   Chips keep the stacked icon-over-label shape so they remain tappable. */
@media (max-width: 900px) {
  [data-design="storybook"] .quick-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding: 10px 14px 8px;
    /* Hide scrollbar but keep scrollability */
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  [data-design="storybook"] .quick-bar::-webkit-scrollbar { display: none; }
  [data-design="storybook"] .quick-bar .qa-chip {
    flex: 0 0 auto;
    min-width: 86px;
    scroll-snap-align: start;
  }
  /* Cluster dividers visible again in the scroll layout */
  [data-design="storybook"] .quick-bar .qa-divider {
    display: inline-block;
    flex: 0 0 auto;
    width: 1px;
    align-self: stretch;
    margin: 6px 4px;
    background: var(--k-line, rgba(20, 25, 60, .12));
  }
}

/* ── Phone (≤700px): pill layout — icon BESIDE label, not above ──
   The stacked card was the second contributor to vertical waste (77px tall).
   Pills are ~40px tall; combined with the single-row scroll above, the
   quickbar now occupies ~50px (≈6% of an iPhone 14 portrait viewport) vs
   the broken 258px (30.6%). */
/* Pill breakpoint bumped 700→800 so iPad mini portrait (744px) and iPad
   standard portrait (768px) also get the short pill layout instead of the
   taller stacked-card layout. Was wasting ~40px of header on iPads. */
@media (max-width: 800px) {
  [data-design="storybook"] .quick-bar {
    gap: 8px;
    padding: 8px 12px 6px;
  }
  [data-design="storybook"] .quick-bar .qa-chip {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 8px;
    min-width: auto;
    min-height: 40px;
    font-size: 12.5px;
    border-radius: 999px;
    border-width: 1.5px;
  }
  [data-design="storybook"] .quick-bar .qa-chip .qi {
    width: 26px;
    height: 26px;
  }
  [data-design="storybook"] .quick-bar .qa-chip .qi svg,
  [data-design="storybook"] .quick-bar .qa-chip .qi .k-svg { width: 15px; height: 15px; }
  /* Divider gets a little breathing room in the pill row */
  [data-design="storybook"] .quick-bar .qa-divider { margin: 4px 2px; }
}

/* ── Tiny phone (≤375px): tighten further for iPhone SE & old Android ── */
@media (max-width: 375px) {
  [data-design="storybook"] .quick-bar { padding: 6px 10px 5px; gap: 6px; }
  [data-design="storybook"] .quick-bar .qa-chip { padding: 6px 10px 6px 7px; font-size: 12px; min-height: 38px; }
  [data-design="storybook"] .quick-bar .qa-chip .qi { width: 24px; height: 24px; }
}

/* ── Landscape-phone catch (any device under 500px tall): force pills ──
   Width-based breakpoints miss this case — iPhone 14 landscape is 844×390,
   which falls into the ≤900px tablet branch (stacked cards, ~95px tall =
   24% of a 390px-tall viewport). Height-based override flips to the pill
   layout so the bar drops to ~50px (≈13%) and the chat gets that space back. */
@media (max-height: 500px) {
  [data-design="storybook"] .quick-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 6px 12px 5px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  [data-design="storybook"] .quick-bar::-webkit-scrollbar { display: none; }
  [data-design="storybook"] .quick-bar .qa-chip {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    min-width: auto;
    min-height: 38px;
    font-size: 12.5px;
    border-radius: 999px;
    border-width: 1.5px;
  }
  [data-design="storybook"] .quick-bar .qa-chip .qi { width: 24px; height: 24px; }
  [data-design="storybook"] .quick-bar .qa-chip .qi svg,
  [data-design="storybook"] .quick-bar .qa-chip .qi .k-svg { width: 14px; height: 14px; }
  [data-design="storybook"] .quick-bar .qa-divider {
    display: inline-block;
    flex: 0 0 auto;
    width: 1px;
    align-self: stretch;
    margin: 4px 2px;
    background: var(--k-line, rgba(20, 25, 60, .12));
  }
}

/* ============================================================
   COMPOSER — rounded surface, 2px line border, primary send
   ============================================================ */
[data-design="storybook"] .input-bar {
  background: var(--k-bg);
  border-top: none;
  padding: 12px 28px 14px;
  align-items: stretch;
  gap: 10px;
}
[data-design="storybook"] #input {
  background: var(--k-surface);
  border: 2px solid var(--k-line-strong);
  border-radius: var(--k-r-lg);
  padding: 14px 18px;
  color: var(--k-ink);
  font-family: var(--k-font-sans);
  /* 16px (not 15) so iOS Safari does not auto-zoom + shift the layout on focus
     of the most-tapped control on the app. */
  font-size: 16px;
  font-weight: 500;
  min-height: 56px;
  transition: border-color var(--k-dur-fast) var(--k-ease),
              box-shadow var(--k-dur-fast) var(--k-ease);
}
[data-design="storybook"] #input::placeholder { color: var(--k-ink-muted); }
[data-design="storybook"] #input:focus {
  border-color: var(--k-sky);
  background: var(--k-surface);
  box-shadow: 0 0 0 4px var(--k-sky-soft);
}
/* Talk button — square 56×56 to match Send's footprint, with icon over a
   small label. Press-and-hold uses Web Speech API; on release the transcript
   drops into #input and immediately submits. The .listening state turns it
   coral with a faster heartbeat pulse so users feel Sabrina is hearing them. */
[data-design="storybook"] .composer-talk {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 56px;
  height: 56px;
  padding: 0;
  background: var(--k-surface);
  color: var(--k-ink);
  border: 2px solid var(--k-line-strong);
  border-radius: var(--k-r-lg);
  font-family: var(--k-font-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--k-dur-fast) var(--k-ease),
              border-color var(--k-dur-fast) var(--k-ease),
              color var(--k-dur-fast) var(--k-ease);
}
[data-design="storybook"] .composer-talk svg { width: 22px; height: 22px; }
[data-design="storybook"] .composer-talk:hover {
  background: var(--k-bg-alt);
  border-color: var(--k-sky);
  color: var(--k-sky);
}
[data-design="storybook"] .composer-talk.listening {
  background: var(--k-coral);
  border-color: var(--k-coral);
  color: var(--k-ink-on-color);
  animation: composerListenPulse 700ms ease-in-out infinite;
}
@keyframes composerListenPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 107, 79, 0.55); }
  50%      { box-shadow: 0 0 0 10px rgba(242, 107, 79, 0.0); }
}

[data-design="storybook"] #send {
  width: 56px;
  height: 56px;
  background: var(--k-sky);
  color: #fff;
  border-radius: var(--k-r-lg);
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(23, 34, 56, 0.22);
  transition: filter var(--k-dur-fast) var(--k-ease),
              transform var(--k-dur-fast) var(--k-ease),
              box-shadow var(--k-dur-fast) var(--k-ease);
}
[data-design="storybook"] #send:hover { filter: brightness(1.05); transform: none; }
[data-design="storybook"] #send:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(23, 34, 56, 0.22);
}
/* Storybook hides the keyboard-shortcut hint — it's discoverable and was
   pinning the input box ~28px above the sidebar user pill. The hint is also
   already hidden by kidora-polish.css for tablet+mobile widths. */
[data-design="storybook"] .input-hint {
  display: none;
}

/* ============================================================
   Hide the old theme toggle button — Storybook is the new look,
   light/dark switching belongs to the legacy era we're leaving.
   ============================================================ */
[data-design="storybook"] .sb-theme-btn { display: none; }