@layer tokens, base, device, components, utilities;

/* ──────────────────────────────────────────────────────────────────────────
   TOKENS — OKLCH + light-dark(), so one declaration covers both themes.
   Two greens on purpose: --brand is the vivid fill. #4DA84D is 2.99:1 on
   white, so it is NEVER text on a light ground and NEVER takes white text —
   text ON green is near-black (6.3:1). --accent is the darkened green that is
   safe as text. Green fills on light get --brand-edge, because the brand green
   against the page is 2.75:1, under the 3:1 a boundary needs.
   ────────────────────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    color-scheme: light dark;

    --stage:      light-dark(oklch(90.2% 0.021 134.1), oklch(15.5% 0.006 156.4));
    --bg:         light-dark(oklch(97.0% 0.007 124.4), oklch(17.6% 0.009 169.1));
    --surface:    light-dark(oklch(100%  0.000  89.9), oklch(22.2% 0.014 154.0));
    --surface-2:  light-dark(oklch(94.3% 0.012 133.4), oklch(27.3% 0.019 148.1));
    --line:       light-dark(oklch(88.8% 0.021 131.5), oklch(35.0% 0.022 147.6));
    --ink:        light-dark(oklch(19.8% 0.021 141.9), oklch(94.9% 0.016 139.4));
    --ink-2:      light-dark(oklch(47.4% 0.030 134.5), oklch(75.8% 0.028 138.3));
    --ink-3:      light-dark(oklch(61.2% 0.029 136.4), oklch(62.4% 0.029 138.3));

    --brand:      light-dark(oklch(65.5% 0.155 143.6), oklch(69.1% 0.150 143.5));
    --brand-edge: light-dark(oklch(57.0% 0.134 143.6), transparent);
    --accent:     light-dark(oklch(47.3% 0.110 143.9), oklch(76.1% 0.132 143.9));
    --accent-ink: oklch(17.2% 0.024 154.5);
    --accent-soft:light-dark(oklch(93.0% 0.033 142.5), oklch(28.1% 0.051 147.6));

    --good:       var(--accent);
    --good-soft:  var(--accent-soft);
    --warn:       light-dark(oklch(50.8% 0.106  72.6), oklch(75.9% 0.124  81.1));
    --warn-soft:  light-dark(oklch(94.5% 0.042  82.5), oklch(26.5% 0.031  85.2));
    --crit:       light-dark(oklch(47.7% 0.158  29.1), oklch(69.9% 0.140  28.6));
    --crit-soft:  light-dark(oklch(93.2% 0.028  25.9), oklch(26.4% 0.032  28.8));

    /* illustration palette — the drawings read as baked goods in both themes */
    --il-crust: light-dark(oklch(60.5% 0.098  62.0), oklch(66.0% 0.092  62.0));
    --il-soft:  light-dark(oklch(92.0% 0.035  82.0), oklch(88.0% 0.036  82.0));
    --il-warm:  light-dark(oklch(76.5% 0.128  72.0), oklch(79.0% 0.126  72.0));
    --il-deep:  light-dark(oklch(26.0% 0.022  62.0), oklch(20.0% 0.018  62.0));
    --il-brand: var(--brand);

    --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;
    --display: "Literata", Georgia, "Times New Roman", serif;
    --sans: "Commissioner", system-ui, -apple-system, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

    /* iPhone 17 Pro Max logical resolution */
    --dev-w: 440; --dev-h: 956;
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  html { -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; }
  body {
    background: var(--stage); color: var(--ink);
    font-family: var(--sans); font-size: 16px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    display: grid; place-items: center; padding: 22px 16px;
  }
  h1, h2, h3 {
    font-family: var(--display); font-weight: 800; margin: 0;
    line-height: 1.12; letter-spacing: 0; text-wrap: balance;
  }
  h1 { font-size: 1.7rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.02rem; }
  p { margin: 0; text-wrap: pretty; }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; }
  button, input, textarea { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
  ::selection { background: var(--accent-soft); color: var(--accent); }
}

/* ──────────────────────────────────────────────────────────────────────────
   DEVICE — the app is presented inside an iPhone 17 Pro Max frame.
   One expression drives BOTH dimensions so the frame can only scale, never
   distort; clamping height alone squashes a fixed-width frame.
   ────────────────────────────────────────────────────────────────────────── */
@layer device {
  .stage { display: grid; gap: 13px; justify-items: center; }
  .stage-caption {
    font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-3);
    & b { color: var(--ink); }
  }
  .device {
    --dh: min(calc(var(--dev-h) * 1px), calc(100dvh - 84px),
              calc((100vw - 32px) * var(--dev-h) / var(--dev-w)));
    height: var(--dh);
    width: calc(var(--dh) * var(--dev-w) / var(--dev-h));
    container: device / inline-size;
    background: var(--bg); border: 1px solid var(--line); border-radius: 46px;
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 2px 4px oklch(20% .02 142 / .10), 0 30px 70px -28px oklch(20% .02 142 / .5);
  }
  .notch {
    position: absolute; inset-block-start: 9px; inset-inline-start: 50%;
    translate: -50% 0; inline-size: 112px; block-size: 28px;
    background: var(--ink); border-radius: var(--r-pill); z-index: 40; opacity: .92;
  }
  .statusbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 26px 4px; font-family: var(--mono); font-size: .68rem;
    font-weight: 600; flex: none;
  }
  /* On a real phone the frame IS the screen. */
  @media (max-width: 520px) {
    body { padding: 0; display: block; }
    .stage { gap: 0; }
    .stage-caption, .notch { display: none; }
    .device {
      width: 100%; height: 100dvh; border-radius: 0; border: 0; box-shadow: none;
    }
    .statusbar { padding-block-start: calc(10px + env(safe-area-inset-top, 0px)); }
  }
}

@layer components {
  /* Three things used to fight for this row — wordmark, points and a two-word
     persona switcher — with no shrink strategy, so the switcher was pushed off
     the edge whenever the frame narrowed. Now the wordmark is allowed to
     truncate, and the switcher collapses to an icon before anything clips. */
  .topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 14px 10px; border-bottom: 2px solid var(--ink); flex: none;
    view-transition-name: topbar;
  }
  .wordmark {
    font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0;
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    & small {
      display: block; font-family: var(--mono); font-weight: 500; font-size: .5rem;
      letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-top: 1px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
  }
  .tb-right { display: flex; align-items: center; gap: 7px; flex: none; }
  .tb-switch {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 6px 11px; border-radius: var(--r-pill);
    background: var(--surface-2); border: 1px solid var(--line);
    font-family: var(--mono); font-size: .62rem; font-weight: 600; color: var(--ink-2);
    transition: scale .13s ease, border-color .18s ease, color .18s ease;
    & .tb-ico { font-size: .82rem; line-height: 1; }
    &:active { scale: .94; }
    &:hover { border-color: var(--brand-edge); color: var(--accent); }
  }
  .screens {
    flex: 1; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth;
  }
  .screen {
    padding: 16px 18px 24px; display: grid; gap: 14px; align-content: start;
    /* minmax(0,1fr), not the default auto: a grid column sizes to its widest
       child, so one wide row (the mood grid) stretched the whole screen and
       pushed every other element off the right edge. */
    grid-template-columns: minmax(0, 1fr);
  }

  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface);
    border-top: 1px solid var(--line); flex: none;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    view-transition-name: tabbar;
    & a {
      text-align: center; font-size: .66rem; font-weight: 600; color: var(--ink-3);
      display: grid; gap: 3px; padding: 5px 2px; border-radius: var(--r-sm);
      /* «Κατάλογος» is long; without this the four labels run together */
      min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      & .ico { font-size: 1.14rem; line-height: 1; }
      &[aria-current="page"] { color: var(--accent); }
    }
  }

  .card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: 15px;
    &.lift { box-shadow: 0 1px 2px oklch(20% .02 142 / .07); border-color: transparent; }
  }
  .panel { background: var(--surface-2); border-radius: var(--r-md); padding: 14px; }

  .btn {
    font-weight: 700; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    border-radius: var(--r-pill); padding: 10px 17px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    transition: filter .15s, border-color .15s;
    &.primary { background: var(--brand); color: var(--accent-ink); border-color: var(--brand-edge); }
    &.primary:active { filter: brightness(.94); }
    &.ghost { background: none; border-color: transparent; color: var(--accent); padding-inline: 6px; }
    &.block { width: 100%; }
    &.sm { padding: 7px 13px; font-size: .85rem; }
    &:disabled { opacity: .5; cursor: not-allowed; }
  }

  .badge {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    font-size: .7rem; font-weight: 600; padding: 3px 9px; border-radius: var(--r-sm);
    background: var(--surface-2); color: var(--ink-2);
    /* Allergen + critical never rely on hue alone — they always carry a word or
       icon, because red/green is the common colour-blind confusion and this is
       a food-safety surface. */
    &.allergen { background: var(--warn-soft); color: var(--warn); }
    &.diet     { background: var(--good-soft); color: var(--good); }
    &.crit     { background: var(--crit-soft); color: var(--crit);
                 font-family: var(--mono); letter-spacing: .04em; }
    &.accent   { background: var(--accent-soft); color: var(--accent); }
    /* signature inversion: near-black block, green type */
    &.invert   { background: var(--ink); color: var(--brand);
                 font-family: var(--mono); letter-spacing: .03em; }
  }
  .eyebrow {
    /* No text-transform: Greek capitals lose their tonos by convention and CSS
       uppercasing keeps it («ΚΆΡΤΑ ΚΑΦΈ» is wrong). Use the |grup filter. */
    font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
    color: var(--ink-3); font-weight: 600;
  }

  .wallet {
    background: var(--brand); border: 1px solid var(--brand-edge); color: var(--accent-ink);
    border-radius: var(--r-lg); padding: 20px; position: relative; overflow: hidden;
    view-transition-name: wallet;
    &::after {
      content: ""; position: absolute; inset: auto -50px -80px auto;
      width: 210px; height: 210px; border-radius: 50%; background: oklch(17% .02 154 / .06);
    }
    & > * { position: relative; }
    & .points {
      font-family: var(--display); font-size: 3.5rem; font-weight: 800; line-height: .88;
      letter-spacing: -.01em; font-variant-numeric: tabular-nums;
    }
    & .tier {
      font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
      text-transform: uppercase; font-weight: 600; opacity: .82;
    }
  }
  .meter {
    height: 6px; border-radius: var(--r-pill); background: oklch(17% .02 154 / .18); overflow: hidden;
    & > i { display: block; height: 100%; background: var(--accent-ink);
            border-radius: var(--r-pill); transition: width .45s ease; }
  }
  .stamps { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
  .stamp {
    aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed var(--line);
    display: grid; place-items: center; font-size: .72rem; color: var(--ink-3);
    &.on { background: var(--brand); border-style: solid;
           border-color: var(--brand-edge); color: var(--accent-ink); }
  }

  .plist { display: grid; gap: 10px; }
  .pcard {
    display: grid; grid-template-columns: 50px 1fr auto; gap: 11px; align-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 11px; width: 100%; text-align: left;
    & .glyph { width: 50px; height: 50px; border-radius: var(--r-sm);
               background: var(--surface-2); display: grid; place-items: center; font-size: 1.45rem; }
    & .name { display: block; font-weight: 700; font-size: .95rem; line-height: 1.25; }
    & .meta { display: block; font-size: .75rem; color: var(--ink-2);
              font-variant-numeric: tabular-nums; }
    & .price { font-family: var(--display); font-weight: 800; letter-spacing: 0;
               font-variant-numeric: tabular-nums; white-space: nowrap; }
  }
  .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }

  .thread { display: flex; flex-direction: column; gap: 12px; }
  .bubble {
    max-width: 88%; padding: 11px 14px; border-radius: var(--r-lg);
    font-size: .93rem; white-space: pre-wrap;
    &.me { align-self: flex-end; background: var(--brand); border: 1px solid var(--brand-edge);
           color: var(--accent-ink); border-end-end-radius: 5px; font-weight: 500; }
    &.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--line);
            border-end-start-radius: 5px; }
  }
  /* The transparency strip: what the assistant actually looked up. */
  .toolstrip {
    align-self: flex-start; display: flex; flex-wrap: wrap; gap: 5px; max-width: 95%;
    & .badge { background: var(--surface-2); color: var(--ink-3);
               font-family: var(--mono); font-size: .63rem; }
  }
  .cite {
    display: inline-flex; gap: 5px; font-family: var(--mono); font-size: .68rem; font-weight: 600;
    background: var(--accent-soft); color: var(--accent); padding: 4px 9px; border-radius: var(--r-sm);
  }
  .composer {
    border-top: 1px solid var(--line); background: var(--bg); flex: none; display: grid; gap: 9px;
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
    & .field { display: flex; gap: 8px; align-items: end; }
    & textarea {
      flex: 1; resize: none; field-sizing: content; max-height: 100px; min-width: 0;
      border: 1px solid var(--line); background: var(--surface); color: var(--ink);
      border-radius: var(--r-lg); padding: 10px 15px; font-size: .92rem;
    }
  }
  .chips {
    display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
  }
  .chip {
    flex: 0 0 auto; font-size: .82rem; background: var(--surface); border: 1px solid var(--line);
    color: var(--ink-2); border-radius: var(--r-pill); padding: 7px 13px;
    white-space: nowrap; cursor: pointer;
    &:active { border-color: var(--brand-edge); color: var(--accent); }
  }
  .dots i {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--brand); margin-right: 3px; animation: blink 1.2s infinite;
    &:nth-child(2) { animation-delay: .2s; }
    &:nth-child(3) { animation-delay: .4s; }
  }
  @keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

  .stile {
    display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
    width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line);
    border-inline-start: 3px solid var(--tile, var(--brand));
    border-radius: var(--r-md); padding: 13px 14px;
    & .glyph { font-size: 1.3rem; }
  }
  .step {
    display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start;
    padding: 11px 0; border-bottom: 1px solid var(--line);
    &:last-child { border-bottom: 0; }
    &.done .txt { text-decoration: line-through; color: var(--ink-3); }
    &.done .tick { background: var(--brand); border-color: var(--brand-edge); color: var(--accent-ink); }
  }
  .tick {
    width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line);
    background: var(--surface); display: grid; place-items: center; font-size: .78rem; cursor: pointer;
  }
  .kpi {
    display: grid; gap: 2px;
    & .v { font-family: var(--display); font-size: 1.9rem; font-weight: 800;
           letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
  }
  .table {
    width: 100%; border-collapse: collapse; font-size: .82rem;
    & th { text-align: left; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
           text-transform: uppercase; color: var(--ink-3); padding: 6px 7px;
           border-bottom: 2px solid var(--ink); font-weight: 600; }
    & td { padding: 8px 7px; border-bottom: 1px solid var(--line); }
  }
  .flash {
    padding: 10px 14px; border-radius: var(--r-md); font-size: .88rem; font-weight: 600;
    &.success { background: var(--good-soft); color: var(--good); }
    &.error   { background: var(--crit-soft); color: var(--crit); }
  }
  .switcher {
    display: flex; gap: 4px; background: var(--surface-2); border-radius: var(--r-pill); padding: 3px;
    & a { font-size: .72rem; font-weight: 700; padding: 5px 11px;
          border-radius: var(--r-pill); color: var(--ink-3); white-space: nowrap; }
    & a[aria-current="page"] { background: var(--brand); color: var(--accent-ink); }
  }
  .demo-note {
    font-family: var(--mono); font-size: .64rem; color: var(--ink-3);
    border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 6px 9px;
  }
}

/* The frame scales down on short windows, so type has to answer to the FRAME
   width, not the viewport — that is what the container context is for. */
@layer components {
  @container device (width < 420px) {
    /* first to go: the switcher's word, then the staff name, then the tagline */
    .tb-switch .tb-lbl { display: none; }
    .tb-switch { padding: 7px 9px; }
    .tb-switch .tb-ico { font-size: .95rem; }
  }
  @container device (width < 370px) {
    .tb-who { display: none; }
    .wordmark small { display: none; }
    .topbar { padding-inline: 12px; }
  }
  @container device (width < 400px) {
    .screen { padding-inline: 14px; }
    h1 { font-size: 1.45rem; }
    .wallet { padding: 17px; }
    .wallet .points { font-size: 2.9rem; }
    .pcard { grid-template-columns: 42px 1fr auto; }
    .pcard .glyph { width: 42px; height: 42px; font-size: 1.2rem; }
  }
  @container device (width < 340px) {
    .wallet .points { font-size: 2.3rem; }
    .tabbar a { font-size: .58rem; }
    .bubble { font-size: .86rem; }
  }
}

@layer utilities {
  .pad { padding-inline: 18px; }
  .row { display: flex; align-items: center; gap: 10px; }
  .between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .grow { flex: 1; }
  .stack { display: grid; gap: 14px; }
  .muted { color: var(--ink-2); }
  .tiny { font-size: .78rem; }
  .num { font-variant-numeric: tabular-nums; }
  .mono { font-family: var(--mono); }
  .scroll-x { overflow-x: auto; }
  [hidden] { display: none !important; }
}

/* Cross-document view transitions: a server-rendered Django app that moves
   like a native one, with no SPA framework. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s ease both; }
::view-transition-new(root) { animation: vt-in  .22s ease both; }
@keyframes vt-out { to { opacity: 0; translate: 0 -4px; } }
@keyframes vt-in  { from { opacity: 0; translate: 0 6px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ──────────────────────────────────────────────────────────────────────────
   MOTION & DEPTH
   Everything animates FROM a visible resting state on load — nothing is parked
   at opacity:0 waiting on an observer, so the first paint is already complete.
   ────────────────────────────────────────────────────────────────────────── */
@layer components {
  /* Cards rise in sequence as a screen paints. */
  .screen > * { animation: rise .42s cubic-bezier(.22,.68,.32,1) both; }
  .screen > *:nth-child(1) { animation-delay: .00s }
  .screen > *:nth-child(2) { animation-delay: .045s }
  .screen > *:nth-child(3) { animation-delay: .09s }
  .screen > *:nth-child(4) { animation-delay: .135s }
  .screen > *:nth-child(5) { animation-delay: .18s }
  .screen > *:nth-child(6) { animation-delay: .225s }
  .screen > *:nth-child(n+7) { animation-delay: .27s }
  @keyframes rise { from { opacity: 0; translate: 0 14px; } }

  /* Rows inside a list stagger too, so a long catalog unrolls. */
  .plist > * { animation: rise .38s cubic-bezier(.22,.68,.32,1) both; }
  .plist > *:nth-child(2) { animation-delay: .04s }
  .plist > *:nth-child(3) { animation-delay: .08s }
  .plist > *:nth-child(4) { animation-delay: .12s }
  .plist > *:nth-child(n+5) { animation-delay: .16s }

  /* Everything tappable acknowledges the tap. */
  .pcard, .stile, .card.lift, .btn, .chip, .tick {
    transition: scale .13s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  }
  .pcard:active, .stile:active, .card.lift:active { scale: .985; }
  .btn:active { scale: .96; }
  .tick:active { scale: .9; }

  /* The brand field gets a slow sheen — the only ambient motion in the app. */
  .wallet::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, oklch(100% 0 0 / .17) 50%, transparent 62%);
    translate: -120% 0; animation: sheen 7s ease-in-out 1.2s infinite;
  }
  @keyframes sheen { 0% { translate: -120% 0 } 22%, 100% { translate: 120% 0 } }

  /* Chat turns arrive rather than appear. */
  .bubble, .toolstrip, .plist { animation: pop .32s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes pop { from { opacity: 0; translate: 0 8px; scale: .985; } }

  /* Progress bars fill from empty on load, so a 60% shift reads as progress. */
  .meter > i { animation: fill .7s cubic-bezier(.3,.8,.3,1) both; }
  @keyframes fill { from { inline-size: 0 } }

  /* Stamps land one after another. */
  .stamp.on { animation: stamp .34s cubic-bezier(.2,1.5,.4,1) both; }
  .stamps .stamp:nth-child(2) { animation-delay: .04s }
  .stamps .stamp:nth-child(3) { animation-delay: .08s }
  .stamps .stamp:nth-child(4) { animation-delay: .12s }
  .stamps .stamp:nth-child(5) { animation-delay: .16s }
  .stamps .stamp:nth-child(6) { animation-delay: .20s }
  .stamps .stamp:nth-child(7) { animation-delay: .24s }
  .stamps .stamp:nth-child(8) { animation-delay: .28s }
  @keyframes stamp { from { opacity: 0; scale: .4; rotate: -18deg; } }
}

/* ──────────────────────────────────────────────────────────────────────────
   DEPTH — white-on-near-white was the "empty" problem. Surfaces now sit on a
   warmer ground with a faint crumb texture, and cards carry a real edge.
   ────────────────────────────────────────────────────────────────────────── */
@layer device {
  .device::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    opacity: .55;
    background-image:
      radial-gradient(circle at 12% 18%, oklch(65.5% .155 143.6 / .06) 0 38%, transparent 39%),
      radial-gradient(circle at 88% 4%,  oklch(65.5% .155 143.6 / .05) 0 30%, transparent 31%);
    background-repeat: no-repeat;
  }
  .screens { position: relative; z-index: 1; }
}
@layer components {
  .card, .pcard, .stile {
    box-shadow: 0 1px 0 oklch(20% .02 142 / .04), 0 1px 3px oklch(20% .02 142 / .05);
  }
  .card.lift {
    box-shadow: 0 2px 4px oklch(20% .02 142 / .06), 0 10px 22px -12px oklch(20% .02 142 / .22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen > *, .plist > *, .bubble, .toolstrip, .meter > i, .stamp.on {
    animation: none !important; opacity: 1 !important; translate: none !important;
    scale: none !important; rotate: none !important;
  }
  .wallet::before { animation: none; display: none; }
}

/* ── richer section tiles: the emoji-on-white row was the empty one ── */
@layer components {
  .statrow {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
    background: var(--line); border: 1px solid var(--line);
    border-radius: var(--r-md); overflow: hidden;
    & > div {
      background: var(--surface); padding: 11px 10px; display: grid; gap: 1px; text-align: center;
      & b { font-family: var(--display); font-size: 1.22rem; font-weight: 800; }
      & span { font-size: .66rem; color: var(--ink-3); font-family: var(--mono); }
    }
  }
  .stile.rich {
    grid-template-columns: 46px 1fr auto; gap: 13px; padding: 13px;
    position: relative; overflow: hidden;
    /* a wash of the section's own colour, so six rows are not six white boxes */
    background:
      linear-gradient(100deg, color-mix(in oklch, var(--tile) 13%, transparent) 0 44%,
                              transparent 78%),
      var(--surface);
    & .well {
      inline-size: 46px; block-size: 46px; border-radius: 13px; display: grid; place-items: center;
      font-size: 1.32rem; background: color-mix(in oklch, var(--tile) 20%, var(--surface));
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--tile) 34%, transparent);
    }
    & .t { display: block; font-weight: 700; font-size: .97rem; line-height: 1.2; }
    & .d { display: block; margin-top: 2px; }
    & .chev { color: color-mix(in oklch, var(--tile) 70%, var(--ink-3)); font-size: 1.2rem; }
    &:active { scale: .985; }
  }
  .metarow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
  .pill {
    font-family: var(--mono); font-size: .6rem; font-weight: 600; padding: 2px 7px;
    border-radius: var(--r-pill); color: var(--ink-2);
    background: color-mix(in oklch, var(--tile) 14%, var(--surface-2));
    &.mine { background: var(--accent-soft); color: var(--accent); }
  }
}

/* ── product illustrations ─────────────────────────────────────────────── */
@layer components {
  .food { display: block; }
  .pcard .glyph {
    background:
      radial-gradient(circle at 30% 26%, color-mix(in oklch, var(--il-warm) 26%, transparent), transparent 62%),
      var(--surface-2);
    overflow: hidden;
  }
  .pcard:active .food { scale: 1.08; }
  .food { transition: scale .18s cubic-bezier(.2,.8,.3,1); }
  .hero-glyph {
    inline-size: 86px; block-size: 86px; border-radius: 20px; flex: none;
    display: grid; place-items: center;
    background:
      radial-gradient(circle at 30% 24%, color-mix(in oklch, var(--il-warm) 30%, transparent), transparent 64%),
      var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line);
    animation: heroin .5s cubic-bezier(.2,.9,.3,1) both;
  }
  @keyframes heroin { from { opacity: 0; scale: .82; rotate: -6deg; } }
}
@layer components {
  .mini {
    inline-size: 30px; block-size: 30px; border-radius: 9px; display: grid; place-items: center;
    background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  }
}

/* ── assistant empty state: it has to sell the feature, not apologise ── */
@layer components {
  .moodgrid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px;
  }
  .mood {
    display: grid; justify-items: center; gap: 5px; padding: 11px 6px 9px; cursor: pointer;
    min-width: 0; overflow-wrap: anywhere;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    transition: scale .14s ease, border-color .18s ease, background .18s ease;
    & .mood-art {
      inline-size: 46px; block-size: 46px; border-radius: 13px; display: grid; place-items: center;
      background:
        radial-gradient(circle at 32% 26%, color-mix(in oklch, var(--il-warm) 30%, transparent), transparent 66%),
        var(--surface-2);
    }
    & .mood-l { font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.15; }
    &:active { scale: .95; border-color: var(--brand-edge); }
  }
  .railhead { margin-top: 20px; }
  .rail {
    display: flex; gap: 9px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-top: 9px; padding-bottom: 4px; scrollbar-width: none;
    /* fade the cut-off edge so a scrollable row reads as scrollable, not broken */
    mask-image: linear-gradient(90deg, #000 0 88%, transparent 100%);
    &::-webkit-scrollbar { display: none; }
  }
  .freshcard {
    flex: 0 0 auto; inline-size: 116px; scroll-snap-align: start; cursor: pointer;
    display: grid; justify-items: start; gap: 3px; padding: 11px; text-align: left;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    transition: scale .14s ease, border-color .18s ease;
    & .fresh-art {
      inline-size: 52px; block-size: 52px; border-radius: 14px; display: grid; place-items: center;
      margin-bottom: 3px;
      background:
        radial-gradient(circle at 32% 26%, color-mix(in oklch, var(--il-warm) 32%, transparent), transparent 66%),
        var(--surface-2);
    }
    & .fresh-n { font-size: .74rem; font-weight: 700; line-height: 1.2; }
    & .fresh-m { font-size: .66rem; color: var(--ink-2); }
    &:active { scale: .96; border-color: var(--brand-edge); }
  }
  .howto { margin-top: 20px; display: grid; gap: 8px; }
  .ghost {
    display: grid; gap: 7px; padding: 12px; border-radius: var(--r-md);
    background: var(--surface-2); border: 1px dashed var(--line);
    & .bubble { max-width: 100%; font-size: .8rem; padding: 8px 11px; animation: none; }
    & .bubble.me { justify-self: end; }
    & .toolstrip { animation: none; }
    & .badge { font-size: .58rem; }
  }
}

/* ══ assistant: mode bar, mode picker, live voice ══════════════════════ */
@layer components {
  .modebar {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
    padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--bg); flex: none;
    & .mb-back {
      inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center;
      background: var(--surface-2); font-size: 1.3rem; line-height: 1; color: var(--ink-2);
    }
    & .mb-t { font-family: var(--display); font-weight: 800; font-size: 1rem; }
    & .mb-r { display: flex; gap: 6px; align-items: center; }
    & .mb-alt, & .mb-new {
      font-family: var(--mono); font-size: .64rem; font-weight: 600; padding: 6px 10px;
      border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2);
      border: 1px solid var(--line); cursor: pointer;
    }
    & .mb-new { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
  }

  .modepick { display: grid; gap: 11px; margin-top: 4px; }
  .modecard {
    position: relative; display: grid; gap: 4px; padding: 17px; border-radius: var(--r-lg);
    border: 1px solid var(--line); background: var(--surface); overflow: hidden;
    transition: scale .15s ease, box-shadow .2s ease;
    &:active { scale: .985; }
    & .mc-t { font-family: var(--display); font-weight: 800; font-size: 1.28rem; }
    & .mc-d { font-size: .8rem; color: var(--ink-2); max-width: 30ch; }
    & .mc-tag {
      position: absolute; inset-block-start: 14px; inset-inline-end: 14px;
      font-family: var(--mono); font-size: .56rem; font-weight: 600; letter-spacing: .1em;
      padding: 3px 8px; border-radius: var(--r-pill);
      background: var(--surface-2); color: var(--ink-3);
    }
    & .mc-tag.live { background: var(--brand); color: var(--accent-ink); }
    &.voice {
      background:
        radial-gradient(120% 90% at 12% 0%, color-mix(in oklch, var(--brand) 26%, transparent), transparent 62%),
        var(--surface);
    }
    &.off { opacity: .62; }
    & .mc-art { display: flex; gap: 6px; margin-bottom: 4px;
      & > span { inline-size: 36px; block-size: 36px; border-radius: 11px; display: grid;
                 place-items: center; background: var(--surface-2); } }
  }
  /* three dots that breathe, so the voice card reads as "live" at rest */
  .mc-orb { display: flex; gap: 5px; align-items: center; margin-bottom: 6px;
    & i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--brand);
          animation: breathe 2.2s ease-in-out infinite; }
    & i:nth-child(2) { animation-delay: .25s; opacity: .8 }
    & i:nth-child(3) { animation-delay: .5s; opacity: .6 } }
  @keyframes breathe { 0%,100% { scale: 1 } 50% { scale: 1.55 } }

  /* ---- staff: mode first, then the section (the customer picker, compacted) ---- */
  .modeseg {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px;
    padding: 5px; border-radius: var(--r-lg); background: var(--surface-2);
    border: 1px solid var(--line);
    & a {
      display: grid; gap: 1px; justify-items: center; padding: 10px 6px 11px;
      border-radius: calc(var(--r-lg) - 5px); color: var(--ink-2);
      transition: background .18s ease, color .18s ease;
    }
    & .ms-t { font-family: var(--display); font-weight: 800; font-size: 1rem; }
    & .ms-ico { font-size: 1.05rem; line-height: 1; margin-bottom: 4px; }
    & .ms-d {
      font-family: var(--mono); font-size: .56rem; font-weight: 600; letter-spacing: .1em;
      text-transform: uppercase; color: var(--ink-3);
    }
    & a[aria-current] {
      background: var(--brand); color: var(--accent-ink);
      box-shadow: 0 7px 20px -12px color-mix(in oklch, var(--brand) 80%, transparent);
      & .ms-d { color: color-mix(in oklch, var(--accent-ink) 62%, transparent); }
    }
    & a.off { opacity: .45; }
  }
  /* the live dots, at the size a segment can carry */
  .ms-orb { display: flex; gap: 4px; align-items: center; margin-bottom: 5px; block-size: 1.05rem;
    & i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--brand);
          animation: breathe 2.2s ease-in-out infinite; }
    & i:nth-child(2) { animation-delay: .25s; opacity: .8 }
    & i:nth-child(3) { animation-delay: .5s; opacity: .6 } }
  .modeseg a[aria-current] .ms-orb i { background: var(--accent-ink); }

  /* the staff answer's receipt: the article it came from */
  .citecard {
    display: grid; gap: 7px; justify-items: start; padding: 12px 13px;
    border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
    border-inline-start: 3px solid var(--accent);
    & header { display: grid; gap: 4px; justify-items: start; }
    & .h { font-family: var(--display); font-weight: 800; font-size: .95rem; line-height: 1.25; }
    & .b {
      font-size: .86rem; color: var(--ink-2); line-height: 1.5;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
    }
    &.open .b { -webkit-line-clamp: unset; }
  }
  .fade { animation: pop .3s cubic-bezier(.2,.7,.3,1) both; }

  /* ---- voice stage ---- */
  .voicescreen { align-content: start; }
  .voicestage { display: grid; justify-items: center; gap: 9px; padding: 22px 0 6px; }
  .orb {
    --level: 0;
    position: relative; inline-size: 148px; block-size: 148px; border: 0; background: none;
    cursor: pointer; display: grid; place-items: center;
  }
  .orb-core {
    inline-size: 92px; block-size: 92px; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand); color: var(--accent-ink); font-size: 1.7rem;
    box-shadow: 0 10px 30px -10px color-mix(in oklch, var(--brand) 60%, transparent);
    scale: calc(1 + var(--level) * .16);
    transition: scale .08s linear, background .3s ease;
  }
  .orb-ring {
    position: absolute; border-radius: 50%; border: 2px solid var(--brand); opacity: 0;
    inline-size: 92px; block-size: 92px;
  }
  .orb[data-state="listening"] .orb-ring,
  .orb[data-state="speaking"] .orb-ring { animation: pulse 2.6s ease-out infinite; }
  .orb[data-state="listening"] .r2, .orb[data-state="speaking"] .r2 { animation-delay: .85s }
  .orb[data-state="listening"] .r3, .orb[data-state="speaking"] .r3 { animation-delay: 1.7s }
  @keyframes pulse { 0% { opacity: .5; scale: 1 } 100% { opacity: 0; scale: 1.6 } }
  .orb[data-state="connecting"] .orb-core { animation: breathe 1.1s ease-in-out infinite; }
  .orb[data-state="speaking"] .orb-core { background: var(--accent); color: #fff; }
  .orb[data-state="error"] .orb-core { background: var(--crit); color: #fff; }
  .voicestate { font-family: var(--display); font-weight: 800; font-size: 1.14rem; }

  .transcript { display: grid; gap: 9px; margin-top: 4px; }
  .vline {
    display: grid; gap: 2px; padding: 10px 13px; border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--line);
    animation: pop .3s cubic-bezier(.2,.7,.3,1) both;
    & .who { font-family: var(--mono); font-size: .56rem; letter-spacing: .12em;
             text-transform: uppercase; color: var(--ink-3); }
    & .what { font-size: .92rem; }
    &.me { background: var(--accent-soft); border-color: transparent;
           & .what { color: var(--accent); font-weight: 600 } }
  }
  .voicebar .field { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-orb i, .ms-orb i, .orb-ring, .orb[data-state] .orb-core { animation: none !important; }
  .fade { animation: none !important; }
}