/* ═══════════════════════════════════════════════════════════════════
   EAT — guest theme "cafe": the white coffee-shop look
   Loaded by index.html after tokens/base/components/menu, with the other
   theme sheets; every rule here is scoped to html[data-theme="cafe"], so a
   venue on any other theme is untouched byte for byte. This is cafe.css,
   which used to be a second page (cafe.html + cafe.js), folded into the one
   guest page behind the venue's guest_theme setting (migration 050).

   Two jobs:
     1. Re-point the design tokens to a light palette, so every shared
        component (sheets, toasts, chips, steppers) turns light for free,
        and catch the few colours the shared sheets hardcode.
     2. Lay the menu out as a photo grid, and — on a wide screen only
        (html.split-on, set by switchView) — dock Aria beside it.
   ═══════════════════════════════════════════════════════════════════ */

:root[data-theme="cafe"] {
  /* ── Surfaces (light) ─────────────────────────────────────────── */
  --surface:                   #ffffff;
  --surface-dim:               #f4f3f1;
  --surface-bright:            #e2e0dd;
  --surface-container-lowest:  #ffffff;
  --surface-container-low:     #fafaf9;
  --surface-container:         #ffffff;
  --surface-container-high:    #f4f3f1;
  --surface-container-highest: #eceae7;
  --surface-variant:           #f0efec;

  /* Ink, not gold: the accent is near-black so photos carry the colour. */
  --primary:              #171717;
  --on-primary:           #ffffff;
  --primary-container:    #2b2b2b;
  --on-primary-container: #ffffff;
  --primary-fixed:        #444444;
  --gold-leaf:            #8a6a2f;   /* kept for chef-pick accents only */
  --gold-glow:            #a8823c;

  --on-surface:         #16150f;
  --on-surface-variant: #6f6c66;
  /* Read by the bill sheet, consent and receipt rules with an ivory fallback
     for the dark page: ink here. */
  --text:               var(--on-surface);
  --text-secondary:     var(--on-surface-variant);
  --outline:            #d8d5d0;
  --outline-variant:    #e8e5e1;

  --error:              #b3261e;
  --on-error:           #ffffff;

  --glass-fill:     #ffffff;
  --glass-border:   #e6e3df;
  --light-leak:     rgba(0, 0, 0, 0);
  --gold-shadow:    0 4px 16px rgba(0, 0, 0, 0.10);
  --gold-glow-soft: 0 0 0 rgba(0, 0, 0, 0);
  --elev-panel:     0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="cafe"] body.ambient-bg { background: var(--surface); color: var(--on-surface); }
[data-theme="cafe"] body.ambient-bg::before,
[data-theme="cafe"] body.ambient-bg::after { display: none; }   /* no dark light-leaks */

/* Shared glass panels become plain white cards in daylight. */
[data-theme="cafe"] .glass-card {
  background: var(--surface-container);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
}
[data-theme="cafe"] .glass-card::before { display: none; }

/* Colours the shared sheets hardcode for the dark look. */
[data-theme="cafe"] #app { background: var(--surface); box-shadow: none; }
[data-theme="cafe"] .app-header {
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--outline-variant);
}
[data-theme="cafe"] .brand-title {
  font: 600 26px/1.2 var(--font-display);
  font-size: clamp(16px, 4.4vw, 26px);
  color: var(--on-surface);
  letter-spacing: -0.01em;
}
[data-theme="cafe"] .icon-btn { color: var(--on-surface-variant); }
[data-theme="cafe"] .icon-btn:hover { color: var(--on-surface); }
[data-theme="cafe"] .toggle-row {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--outline-variant);
}
[data-theme="cafe"] .search-row { border-bottom: 1px solid var(--outline-variant); }
[data-theme="cafe"] .search-row input:focus { border-color: var(--on-surface-variant); }
[data-theme="cafe"] .seg-toggle {
  background: var(--surface-container-high);
  backdrop-filter: none;
  box-shadow: none;
}
[data-theme="cafe"] .table-chip {
  border: 1px solid var(--outline);
  color: var(--on-surface-variant);
  background: var(--surface-container-low);
}
[data-theme="cafe"] .sheet-divider { background: var(--outline-variant); border-bottom: none; }
[data-theme="cafe"] .toast { border-color: var(--outline-variant); }
[data-theme="cafe"] .btn-gold {
  background: var(--surface-container-high);
  border-color: var(--outline);
  color: var(--on-surface);
}
[data-theme="cafe"] .btn-gold:hover:not(:disabled) { background: var(--surface-container-highest); color: var(--on-surface); }
[data-theme="cafe"] .btn-gold.solid,
[data-theme="cafe"] .btn-gold.solid:hover:not(:disabled) {
  background: var(--on-surface);
  color: #fff;
  border-color: var(--on-surface);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.45);
}
[data-theme="cafe"] .menu-section-head { border-bottom-color: var(--outline-variant); }
[data-theme="cafe"] .menu-section-count { border-color: var(--outline); color: var(--on-surface-variant); }
[data-theme="cafe"] #join-prompt {
  background: var(--surface);
  border: 1px solid var(--outline);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.25);
}
[data-theme="cafe"] textarea::placeholder { color: var(--on-surface-variant); }

/* ══ Category tab bar ═════════════════════════════════════════════ */
[data-theme="cafe"] .cat-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--outline-variant);
}
[data-theme="cafe"] .cat-nav button {
  font: 500 14px/1 var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  color: var(--on-surface-variant);
  padding-bottom: 12px;
  border-bottom: 2px solid transparent;
}
[data-theme="cafe"] .cat-nav button:hover { color: var(--on-surface); }
[data-theme="cafe"] .cat-nav button.active {
  color: var(--on-surface);
  border-bottom-color: var(--on-surface);
  font-weight: 600;
}

/* ══ Allergen filter chips (shown only when the menu declares any) ═ */
[data-theme="cafe"] .allergen-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px var(--pad-mobile) 10px;
  flex-shrink: 0;
}
/* A menu with no allergen data gets no row: the attribute must win over the
   display above, or an empty padded band sits under the tabs. */
[data-theme="cafe"] .allergen-row[hidden] { display: none; }
[data-theme="cafe"] .allergen-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid var(--outline);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--on-surface-variant);
  font: 400 13px/1 var(--font-body);
  cursor: pointer;
  transition: all 0.18s var(--ease-lux);
  white-space: nowrap;
}
[data-theme="cafe"] .allergen-chip .material-symbols-outlined { font-size: 17px; }
[data-theme="cafe"] .allergen-chip:hover { border-color: var(--on-surface-variant); color: var(--on-surface); }
/* "on" = actively hiding that allergen, so it reads as a struck-through exclusion */
[data-theme="cafe"] .allergen-chip.excluded {
  background: var(--on-surface);
  border-color: var(--on-surface);
  color: var(--surface);
  text-decoration: line-through;
}
[data-theme="cafe"] .allergen-hint {
  font: 400 12px/1.4 var(--font-body);
  color: var(--on-surface-variant);
  padding: 0 var(--pad-mobile) 14px;
  border-bottom: 1px solid var(--outline-variant);
  flex-shrink: 0;
}

/* ══ Menu grid ════════════════════════════════════════════════════ */
[data-theme="cafe"] .menu-list { padding: 8px 0 120px; gap: 0; }
[data-theme="cafe"] .menu-section { gap: 0; }
[data-theme="cafe"] .menu-section-head {
  font: 600 26px/1.2 var(--font-display);
  color: var(--on-surface);
  margin: 34px 0 6px;
  padding-bottom: 0;
  border-bottom: none;
}
[data-theme="cafe"] .menu-section:first-child .menu-section-head { margin-top: 18px; }
[data-theme="cafe"] .menu-section-count { display: none; }
[data-theme="cafe"] .cafe-section-rule {
  width: 46px; height: 3px;
  background: var(--on-surface);
  border-radius: 2px;
  margin-bottom: 22px;
}
[data-theme="cafe"] .menu-section-body.cafe-grid,
[data-theme="cafe"] .cafe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px 14px;
}

[data-theme="cafe"] .cafe-card { display: flex; flex-direction: column; cursor: pointer; }
[data-theme="cafe"] .cafe-card.unavailable { opacity: 0.45; cursor: not-allowed; }

[data-theme="cafe"] .cafe-card-img {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-variant);
}
[data-theme="cafe"] .cafe-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease-lux); }
[data-theme="cafe"] .cafe-card:hover .cafe-card-img img { transform: scale(1.04); }

/* Photo stand-in: a calm tinted tile, not a broken-image box. */
[data-theme="cafe"] .cafe-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.9), transparent 60%),
    linear-gradient(150deg, #efece6 0%, #e3ded4 100%);
  color: #b9b0a0;
}
[data-theme="cafe"] .cafe-ph .material-symbols-outlined { font-size: 44px; }

[data-theme="cafe"] .cafe-add {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.10);
  color: #171717;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  transition: all 0.2s var(--ease-lux);
}
[data-theme="cafe"] .cafe-add:hover { background: #171717; color: #fff; transform: scale(1.07); }
[data-theme="cafe"] .cafe-add .material-symbols-outlined { font-size: 21px; }

[data-theme="cafe"] .cafe-chef {
  position: absolute;
  left: 10px; top: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--gold-leaf);
  font: 600 10px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
[data-theme="cafe"] .cafe-sold {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  font: 600 12px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--on-surface);
}
[data-theme="cafe"] .cafe-card h3 {
  font: 400 16px/1.35 var(--font-body);
  color: var(--on-surface);
  margin-top: 12px;
}
[data-theme="cafe"] .cafe-card .cafe-price {
  font: 500 16px/1 var(--font-body);
  color: var(--on-surface);
  margin-top: 7px;
}
[data-theme="cafe"] .cafe-card .cafe-allergens { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
[data-theme="cafe"] .cafe-tag {
  font: 400 10px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--on-surface-variant);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
}
[data-theme="cafe"] .menu-empty .material-symbols-outlined { color: var(--outline); }

/* ══ Aria pane, daylight ══════════════════════════════════════════ */
[data-theme="cafe"] .msg-bubble {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  color: var(--on-surface);
}
[data-theme="cafe"] .msg-row.user .msg-bubble {
  background: var(--on-surface);
  color: #fff;
  border-color: var(--on-surface);
}
[data-theme="cafe"] .aria-avatar {
  background: var(--surface-container-highest);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
}
[data-theme="cafe"] .aria-input-wrap { border-top: 1px solid var(--outline-variant); background: var(--surface); }
[data-theme="cafe"] .aria-input-box { background: var(--surface-container-high); border: 1px solid var(--outline); }
[data-theme="cafe"] .aria-input-box textarea { color: var(--on-surface); }
[data-theme="cafe"] .send-btn { background: var(--on-surface); color: #fff; }
[data-theme="cafe"] .typing-dot { background: var(--on-surface-variant); }
[data-theme="cafe"] .aria-pane-head { display: none; }

/* Voice input: the dark theme's gold-on-ink recording state would glare on
   white, so the café pane recruits the ink colour and keeps the ring. */
[data-theme="cafe"] .aria-input-box .mic-btn { color: var(--on-surface-variant); }
[data-theme="cafe"] .aria-input-box .mic-btn:hover { color: var(--on-surface); }
[data-theme="cafe"] .aria-input-box .mic-btn.recording {
  background: var(--on-surface);
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
[data-theme="cafe"] .aria-input-box .mic-btn.recording::after { border-color: var(--primary); }
[data-theme="cafe"] .voice-status { color: var(--on-surface-variant); }

/* ══ Wide split: the menu left, Aria docked right (≥981px only) ═══
   switchView sets html.split-on when the theme has the split and the screen
   is wide. The page itself then never scrolls — each pane owns its own
   scrollbar, so the header and tabs stay put and Aria does not drift away
   with the menu. On a phone none of this applies: the café look scrolls
   the window like every other theme. */
html.split-on[data-theme="cafe"], html.split-on[data-theme="cafe"] body { height: 100%; overflow: hidden; }
html.split-on[data-theme="cafe"] #app {
  max-width: none;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
html.split-on[data-theme="cafe"] .app-header { padding: 14px 28px; }
html.split-on[data-theme="cafe"] .toggle-row { padding: 10px 28px; justify-content: space-between; }
html.split-on[data-theme="cafe"] .seg-toggle { display: none; }
html.split-on[data-theme="cafe"] .split {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
html.split-on[data-theme="cafe"] #view-menu {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
}
html.split-on[data-theme="cafe"] #view-aria {
  flex: 0 0 400px;
  min-height: 0;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  border-left: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
}
/* Belt and braces: a hidden pane stays hidden even under the split. */
html.split-on[data-theme="cafe"] #view-aria.hidden { display: none !important; }
html.split-on[data-theme="cafe"] .aria-pane-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--outline-variant);
  flex-shrink: 0;
}
html.split-on[data-theme="cafe"] .aria-pane-head .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}
html.split-on[data-theme="cafe"] .aria-pane-head h2 { font: 600 15px/1 var(--font-body); letter-spacing: 0.01em; }
html.split-on[data-theme="cafe"] .aria-pane-head p { font: 400 12px/1 var(--font-body); color: var(--on-surface-variant); margin-top: 4px; }
html.split-on[data-theme="cafe"] .cat-nav { position: static; flex-shrink: 0; }
html.split-on[data-theme="cafe"] .cat-nav ul { gap: 28px; padding: 14px 28px 0; }
html.split-on[data-theme="cafe"] .allergen-row { padding-left: 28px; padding-right: 28px; }
html.split-on[data-theme="cafe"] .allergen-hint { padding-left: 28px; padding-right: 28px; }
html.split-on[data-theme="cafe"] .menu-scroll { padding: 0 28px; flex: 1; min-height: 0; overflow-y: auto; }
html.split-on[data-theme="cafe"] .menu-section-head { scroll-margin-top: 12px; }
/* The waiter / bill / track pills belong over the menu pane, not centred
   across the split (which left them squeezed into circles at the seam). */
html.split-on[data-theme="cafe"] .float-stack {
  left: 28px; right: auto; transform: none;
  bottom: 24px;
  width: 320px; max-width: 320px;
}
html.split-on[data-theme="cafe"] .cafe-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 26px 22px; }
html.split-on[data-theme="cafe"] .aria-scroll { padding: 20px 18px; flex: 1; min-height: 0; overflow-y: auto; }
html.split-on[data-theme="cafe"] .aria-input-wrap {
  /* menu.css pins this bar position:fixed for the single column. In the split
     it must be a normal flex child at the foot of the pane, or it floats over
     the scroll area and hides the last ~106px of messages. */
  position: static;
  max-width: none;
  width: auto;
  transform: none;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   ARIA INTRODUCTION — luxury 3D entrance (café theme only)
   Shown once before the language gate; sets the tone before any UI.
   ══════════════════════════════════════════════════════════════════ */
[data-theme="cafe"] .aria-intro-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0b09;
  overflow: hidden;
  transition: opacity 0.9s var(--ease-lux), visibility 0.9s;
}
[data-theme="cafe"] .aria-intro-screen.dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Slow drifting radial light — the "depth" behind the orb. */
[data-theme="cafe"] .aria-intro-bg {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 30% 40%, rgba(212,175,55,0.18), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(242,202,80,0.12), transparent 50%);
  animation: intro-drift 14s ease-in-out infinite alternate;
}
@keyframes intro-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.12); }
}
[data-theme="cafe"] .aria-intro-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 32px;
  text-align: center;
  perspective: 1000px;
}
/* The orb: layered spheres on a tilted 3D axis. */
[data-theme="cafe"] .aria-intro-orb {
  position: relative;
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  animation: orb-float 6s ease-in-out infinite;
}
@keyframes orb-float {
  0%, 100% { transform: translateY(0) rotateY(0deg)   rotateX(8deg); }
  50%      { transform: translateY(-16px) rotateY(180deg) rotateX(-8deg); }
}
[data-theme="cafe"] .orb-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff4cf, #f2ca50 35%, #d4af37 62%, #8a6f1e 100%);
  box-shadow:
    inset -12px -12px 28px rgba(0,0,0,0.45),
    inset 8px 8px 20px rgba(255,255,255,0.25),
    0 18px 50px rgba(212,175,55,0.45);
}
[data-theme="cafe"] .orb-glow {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,202,80,0.32), transparent 68%);
  animation: orb-pulse 3.4s ease-in-out infinite;
}
@keyframes orb-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}
/* Copy: the typing IS the entrance. Each line reserves its height so the
   block doesn't jolt as lines appear; the caret rides the line being typed. */
[data-theme="cafe"] .aria-intro-text {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
[data-theme="cafe"] .aria-intro-title {
  font: 700 62px/1 var(--font-display);
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #fff4cf, #f2ca50 45%, #d4af37);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
  min-height: 68px;
}
[data-theme="cafe"] .aria-intro-subtitle {
  font: 500 17px/1.4 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d0c5af;
  margin-bottom: 16px;
  min-height: 24px;
}
[data-theme="cafe"] .aria-intro-desc {
  font: 400 14px/1.7 var(--font-body);
  color: rgba(208,197,175,0.72);
  max-width: 330px;
  min-height: 48px;
}
[data-theme="cafe"] .is-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: text-bottom;
  background: currentColor;
  animation: caret-blink 0.85s step-end infinite;
}
/* The title's text is a transparent gradient clip, so currentColor would
   be invisible — give its caret an explicit gold. */
[data-theme="cafe"] #aria-type-1.is-typing::after { background: #f2ca50; height: 0.78em; }
@keyframes caret-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
[data-theme="cafe"] .aria-intro-btn {
  padding: 15px 52px;
  border: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #f2ca50, #d4af37);
  color: #3c2f00;
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 32px rgba(212,175,55,0.42);
  transition: opacity 0.6s var(--ease-lux), transform 0.6s var(--ease-lux), box-shadow 0.3s var(--ease-lux);
}
[data-theme="cafe"] .aria-intro-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 42px rgba(212,175,55,0.6); }
/* The button stays out of the way until the last line finishes. */
[data-theme="cafe"] .aria-intro-btn.is-pending { opacity: 0; transform: translateY(14px); pointer-events: none; }

@media (max-width: 480px) {
  [data-theme="cafe"] .aria-intro-orb   { width: 120px; height: 120px; }
  [data-theme="cafe"] .aria-intro-title { font-size: 46px; min-height: 52px; }
  [data-theme="cafe"] .aria-intro-text  { min-height: 230px; }
}
/* Respect reduced-motion: keep the composition, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  [data-theme="cafe"] .aria-intro-bg,
  [data-theme="cafe"] .aria-intro-orb,
  [data-theme="cafe"] .orb-glow,
  [data-theme="cafe"] .is-typing::after { animation: none; }
}