/* Оболочка киоска Bayt al-Mandi.
   Палитра и раскладка — из макета, который сверстал GPT по нашему брифу;
   всё живое (голос, касса, чек) подключено к нашему бэкенду. Экраны
   переключаются атрибутом data-screen на .app, а не пересборкой DOM:
   звук и сокет живут дольше экрана. */
@import url("/fonts/plex.css");


:root {
  --ground: #14120F;
  --panel: #1E1B17;
  --bone: #EDE8DF;
  --muted: #9A9084;
  --brass: #B59247;
  --coral: #E86F31;
  --sage: #5E8C6A;
  --glass: rgba(30, 27, 23, .68);
  --line: rgba(181, 146, 71, .26);

  /* Псевдонимы прежней палитры: перенесённые блоки (риал, настройки, чек,
     разговор) написаны на старых именах. Переименовывать их значило бы
     править работающий код ради косметики — вместо этого сводим имена. */
  --bg: var(--ground);
  --panel2: rgba(20, 18, 15, .58);
  --text: var(--bone);
  --dim: var(--muted);
  --gold: var(--brass);
  --live: var(--coral);
  --ok: var(--sage);
  --warn: #d98b4a;
  --blue: #7ea6c9;
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* Без этого правила [hidden] проигрывает любому display в каскаде, и лист
   настроек открывался сам собой поверх витрины. */
[hidden] { display: none !important; }
body.locked { overflow: hidden; }
html, body { margin: 0; min-height: 100%; background: var(--ground); color: var(--bone); }
body { font-family: 'IBM Plex Sans', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0; overflow-x: clip; }
/* Арабский набирается своей гарнитурой и на 8% крупнее: при равном кегле
   он читается мельче латиницы, а на стенде читают с двух метров. */
[dir="rtl"] body, [dir="rtl"] .app { font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif; font-size: 108%; }
button { font: inherit; }
.app {
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 18%, rgba(232, 111, 49, .17), transparent 31rem),
    radial-gradient(circle at 18% 12%, rgba(181, 146, 71, .16), transparent 28rem),
    linear-gradient(180deg, rgba(20, 18, 15, .14), var(--ground) 82%),
    url("/assets/images/texture_khoos.png");
  position: relative;
}
.hero {
  min-height: 100vh;
  padding: clamp(18px, 3vw, 44px);
  display: grid;
  grid-template-rows: auto 1fr;
  position: relative;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20,18,15,.98) 0%, rgba(20,18,15,.78) 37%, rgba(20,18,15,.20) 76%),
    linear-gradient(180deg, rgba(20,18,15,.15), rgba(20,18,15,.9)),
    url("/assets/images/hero_kitchen.jpg") center / cover;
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(181,146,71,.18), transparent 26%, rgba(232,111,49,.11) 82%, transparent);
  mix-blend-mode: screen;
  opacity: .8;
  z-index: -1;
}
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.brand { display: flex; gap: 14px; align-items: center; min-width: 0; }
.brand-mark { width: 46px; height: 46px; border-radius: 13px; border: 1px solid var(--line); background: rgba(20,18,15,.62); display: grid; place-items: center; color: var(--brass); box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.brand-title { display: grid; gap: 2px; }
.brand-title strong { color: var(--brass); font-size: clamp(16px, 1.5vw, 21px);
  letter-spacing: .18em; white-space: nowrap; }
.brand-title span { color: rgba(237,232,223,.72); font-size: 14px; }
.lang { border: 1px solid var(--line); color: var(--bone); background: rgba(30,27,23,.56); border-radius: 999px; display: flex; padding: 5px; gap: 4px; backdrop-filter: blur(14px); }
.lang button { border: 0; color: var(--muted); background: transparent; border-radius: 999px; padding: 9px 13px; cursor: pointer; }
.lang button.active { color: var(--ground); background: var(--brass); }
.hero-main { align-self: end; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 470px); gap: clamp(26px, 5vw, 72px); align-items: end; padding-bottom: min(8vh, 76px); }
.eyebrow { color: var(--brass); font-weight: 700; text-transform: uppercase; letter-spacing: .24em; font-size: 13px; margin: 0 0 18px; }
h1 { font-family: 'IBM Plex Serif', Georgia, 'Times New Roman', serif; font-size: clamp(58px, 9vw, 142px); line-height: .88; max-width: 930px; margin: 0; font-weight: 500; }
.lead { max-width: 650px; color: rgba(237,232,223,.78); font-size: clamp(18px, 1.7vw, 27px); line-height: 1.36; margin: 26px 0 34px; }
.cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.primary, .secondary, .mic-button, .send-button { border: 0; cursor: pointer; color: var(--bone); }
.primary { min-height: 64px; border-radius: 999px; padding: 0 28px 0 12px; background: linear-gradient(135deg, var(--coral), #b84e25); display: inline-flex; gap: 16px; align-items: center; box-shadow: 0 22px 64px rgba(232,111,49,.35); font-weight: 800; }
.primary .circle { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,18,15,.28); }
.secondary { min-height: 56px; border-radius: 999px; padding: 0 20px; background: rgba(237,232,223,.08); border: 1px solid rgba(237,232,223,.15); }
.glass {
  border: 1px solid rgba(181,146,71,.23);
  background: linear-gradient(145deg, rgba(30,27,23,.72), rgba(20,18,15,.42));
  box-shadow: 0 24px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(237,232,223,.08);
  backdrop-filter: blur(18px);
}
.hero-card { border-radius: 8px; padding: 20px; transform: translateY(0); animation: float 7s ease-in-out infinite; }
.status-row { display: flex; justify-content: space-between; color: rgba(237,232,223,.68); font-size: 13px; text-transform: uppercase; letter-spacing: .16em; }
.wave { height: 96px; margin: 26px 0; display: flex; align-items: center; justify-content: center; gap: 7px; }
.wave i { width: 6px; border-radius: 999px; background: linear-gradient(var(--coral), var(--brass)); animation: wave 1.1s ease-in-out infinite; height: calc(20px + var(--h) * 1px); animation-delay: calc(var(--d) * .06s); }
.mini-ticket { border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 11px; }
.mini-line { display: flex; justify-content: space-between; color: rgba(237,232,223,.82); }
.mini-line b { color: var(--brass); }
.experience { min-height: 100vh; padding: clamp(14px, 2.6vw, 36px); display: grid; gap: 18px; }

/* Экран заказа занимает ровно окно и делится на две строки: неподвижный
   верх и содержимое. Прокрутка живёт ВНУТРИ сетки блюд, поэтому ни
   заголовок, ни фильтры, ни настройки не уезжают — сколько бы блюд ни
   показывали. Раньше при «Десертах» короткий документ утягивал вниз всё
   разом, а на 939×887 панель заказа оказывалась за нижним краем. */
.order-experience {
  height: 100svh; min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.order-experience > .layout {
  min-height: 0;
  display: grid;
  /* Панель заказа сжимается вместе с экраном: на 939 px фиксированные
     390 оставляли меню 478 px, и названия блюд ломались в две строки. */
  grid-template-columns: minmax(0, 1fr) clamp(290px, 30vw, 390px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px 22px;
}
/* Тулбар и сетка становятся ячейками общей сетки: так панель заказа можно
   выровнять по фильтрам, а не по краю экрана. */
.menu-shell { display: contents; }
.order-experience .menu-toolbar { grid-column: 1; grid-row: 1; }
.order-experience .menu {
  grid-column: 1; grid-row: 2;
  /* Высота задана явно: на растяжение грид-элемента полагаться нельзя —
     сетка блюд с 15 карточками разворачивалась на 2900 px внутри строки
     в 610 и вылезала за экран. */
  min-height: 0; height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
}
.order-experience .order-panel {
  grid-column: 2; grid-row: 1 / span 2;   /* вровень с фильтрами */
  position: static; min-height: 0; height: 100%;
  /* Панель НЕ прокручивается целиком: иначе итог и кнопка уезжают вместе
     со списком. Прокручивается только список позиций — см. ниже. */
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* Список позиций — единственное, что растёт. При восьми блюдах он налезал
   на «Итого» и кнопку микрофона: список рисовался поверх них, цифры
   читались сквозь названия. Своя полоса прокрутки, а итог и голос стоят. */
.order-lines {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; padding-inline-end: 6px;
  scrollbar-width: thin; scrollbar-color: rgba(181,146,71,.4) transparent;
}
.order-lines::-webkit-scrollbar { width: 6px; }
.order-lines::-webkit-scrollbar-thumb { background: rgba(181,146,71,.4); border-radius: 6px; }
.order-panel .totals, .order-panel .voice-bar,
.order-panel .handoff, .order-panel .send-button { flex: 0 0 auto; }
.kiosk-head {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand title tools";
}
.kiosk-head > .brand { grid-area: brand; }
.kiosk-head > .head-title { grid-area: title; text-align: center; }
.kiosk-head > .head-tools { grid-area: tools; justify-self: end; }

/* Узко — заголовок уходит на свою строку, а язык и настройки ОСТАЮТСЯ
   наверху: они органы управления, и проваливаться под контент им нельзя. */
@media (max-width: 900px) {
  .kiosk-head {
    grid-template-columns: auto auto;
    grid-template-areas: "brand tools" "title title";
    justify-content: space-between; row-gap: 12px;
  }
  .kiosk-head > .head-title { text-align: center; white-space: normal; }
}

/* На телефоне слово BAYT AL-MANDI и язык с настройками не помещаются в
   одну строку и наезжали друг на друга. Остаётся знак — он и так ведёт
   домой, а название написано на каждой карточке ниже. Уступает текст, а
   не органы управления: без них гость не сменит язык. */
@media (max-width: 560px) {
  .kiosk-head > .brand .brand-title { display: none; }
  .head-tools { gap: 7px; }
  .head-tools select { padding: 9px 34px 9px 12px; font-size: 13px;
    background-position: right 12px center; }
  [dir="rtl"] .head-tools select { padding: 9px 12px 9px 34px;
    background-position: left 12px center; }
  .gear { width: 38px; min-height: 38px; }
  .kiosk-head > .head-title { font-size: clamp(21px, 6.4vw, 30px); }
}
/* Логотип — кнопка «домой», но выглядеть должен логотипом. */
button.brand { border: 0; background: none; padding: 0; cursor: pointer;
  color: inherit; text-align: start; border-radius: 12px; }
button.brand:hover .brand-mark { border-color: rgba(181,146,71,.6); }
button.brand:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }

/* Заголовок занял место, где стояли пилюли шагов. «Меню Байт аль-Манди»
   убрано: гость и так стоит у их киоска. */
.head-title { margin: 0; font-family: 'IBM Plex Serif', Georgia, serif;
  font-weight: 500; font-size: clamp(24px, 2.6vw, 40px); line-height: 1;
  white-space: nowrap; }
.stage-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(237,232,223,.12); color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.pill.active { color: var(--ground); background: var(--brass); border-color: var(--brass); }
.pill.done { color: var(--sage); border-color: rgba(94,140,106,.55); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 22px; align-items: start; }
.menu-shell { min-width: 0; }
.menu-toolbar {
  display: flex; justify-content: center; gap: 20px;
  margin: 0; padding: 0 0 4px;
}
/* Никакой подложки: лента — стекло со своим фоном, а карточки под неё не
   заезжают вовсе. Прокручивается только сетка блюд, всё остальное стоит. */
.category-tabs { flex: 0 1 auto; }

.menu-toolbar { flex-wrap: wrap; }
.menu-heading p { margin: 0 0 5px; color: var(--brass); font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.menu-heading h2 { margin: 0; font-family: 'IBM Plex Serif', Georgia, 'Times New Roman', serif; font-size: clamp(34px, 4vw, 58px); font-weight: 500; line-height: 1; }
.category-tabs { display: flex; gap: 5px; padding: 5px; overflow-x: auto; border: 1px solid var(--line); background: rgba(30,27,23,.62); backdrop-filter: blur(14px); border-radius: 8px; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
/* Узкая колонка — короче подписи, иначе последний раздел уезжает за край
   и до него надо доскроллить, хотя места хватает. */
@media (max-width: 1150px) {
  .category-tabs button { padding: 0 9px; font-size: 13px; }
}
@media (max-width: 980px) {
  .category-tabs button { padding: 0 7px; font-size: 12px; min-height: 34px; }
}
.category-tabs button { min-height: 38px; padding: 0 13px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; white-space: nowrap; transition: color .2s ease, background .2s ease; }
/* Подсветка активного раздела — один элемент, который переезжает под
   кнопками. Раньше фон просто перекрашивался у двух кнопок сразу, и
   переключение читалось как мигание, а не как движение. */
.category-tabs { position: relative; isolation: isolate; }
.category-tabs::before {
  content: ""; position: absolute; z-index: -1;
  top: 5px; bottom: 5px; left: 0;
  width: var(--tab-w, 0); transform: translateX(var(--tab-x, 0));
  border-radius: 6px;
  background: linear-gradient(135deg, #d6b76e, var(--brass));
  box-shadow: 0 8px 20px rgba(181,146,71,.2);
  transition: transform .34s cubic-bezier(.2,.8,.22,1), width .34s cubic-bezier(.2,.8,.22,1);
}
.category-tabs.jump::before { transition: none; }   /* первая отрисовка */
.category-tabs button.active { color: #17130d; }
.category-tabs button { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .category-tabs::before { transition: none; }
}
.menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dish-card { min-height: 294px; border-radius: 8px; padding: 0; display: grid; grid-template-rows: 195px auto; text-align: start; color: var(--bone); border: 1px solid rgba(181,146,71,.17); background: linear-gradient(150deg, rgba(34,30,25,.88), rgba(20,18,15,.58)); position: relative; overflow: hidden; cursor: pointer; transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.dish-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 62%; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(181,146,71,.13), transparent 66%); opacity: .8; }
.dish-card:hover { transform: translateY(-5px); border-color: rgba(181,146,71,.58); background: rgba(34,30,25,.93); box-shadow: 0 24px 52px rgba(0,0,0,.22); }
.dish-image { min-width: 0; height: 212px; padding: 20px 12px 0; display: grid; place-items: center; position: relative; }
.dish-card img { width: 100%; height: 172px; object-fit: contain; filter: drop-shadow(0 24px 18px rgba(0,0,0,.3)); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.dish-card:hover img { transform: scale(1.06) translateY(-3px) rotate(-.5deg); }
.dish-meta { display: grid; align-content: end; gap: 7px; min-height: 98px; padding: 14px 15px 16px; border-top: 1px solid rgba(181,146,71,.12); background: linear-gradient(180deg, rgba(20,18,15,.1), rgba(20,18,15,.42)); position: relative; z-index: 1; }
.dish-top { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.dish-top h3 { margin: 0; font-size: 18px; line-height: 1.1; }
.price { color: var(--brass); font-weight: 800; white-space: nowrap; }
.desc {
  color: var(--muted); font-size: 13px; margin: 0; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dish-card .alg { color: var(--warn); font-size: 12px; opacity: .9; }
/* Ряд карточек ровный: высота описания больше не тянет сетку. */
.menu {
  grid-auto-rows: min-content; align-content: start; align-items: start;
  /* Полоса прокрутки жила вплотную к правому ряду карточек. Отодвигаем её
     отступом, а не прозрачностью: тонкая полоса поверх еды читается как
     дефект картинки. */
  padding-inline-end: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(181,146,71,.45) transparent;
}
.menu::-webkit-scrollbar { width: 8px; }
.menu::-webkit-scrollbar-thumb { background: rgba(181,146,71,.45);
  border-radius: 8px; background-clip: padding-box; border: 2px solid transparent; }
.menu::-webkit-scrollbar-track { background: transparent; }

.menu-shell { scroll-margin-top: 18px; }
.dish-card { min-height: 336px; grid-template-rows: 212px 1fr; }
.dish-meta { min-height: 0; }
.plus { position: absolute; z-index: 2; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,18,15,.7); color: var(--brass); border: 1px solid rgba(181,146,71,.34); backdrop-filter: blur(9px); transition: transform .2s ease, background .2s ease; }
.dish-card:hover .plus { transform: rotate(90deg); background: var(--brass); color: var(--ground); }
.dish-card.just-added { animation: dishTap .42s cubic-bezier(.2,.8,.2,1); }
.dish-card.just-added .plus { color: var(--ground); background: var(--sage); border-color: rgba(237,232,223,.45); transform: rotate(90deg) scale(1.08); }
.qty-chip { position: absolute; z-index: 2; left: 12px; top: 12px; min-width: 34px; height: 34px; border-radius: 17px; padding: 0 10px; display: grid; place-items: center; color: var(--bone); background: var(--coral); font-size: 12px; font-weight: 800; box-shadow: 0 10px 24px rgba(232,111,49,.26); animation: qtyPop .35s cubic-bezier(.2,.9,.25,1.25); }
.flying-dish { position: fixed !important; z-index: 9999; margin: 0 !important; padding: 0 !important; object-fit: contain; pointer-events: none; will-change: transform, opacity; filter: drop-shadow(0 26px 22px rgba(0,0,0,.48)) drop-shadow(0 0 12px rgba(181,146,71,.28)); }
.order-panel { position: sticky; top: 18px; border-radius: 8px; padding: 18px; min-height: 560px; display: flex; flex-direction: column; }
.order-panel.order-catch { animation: orderCatch .62s cubic-bezier(.2,.8,.2,1); }
.order-panel.order-catch .order-title h2 { animation: orderTitle .62s cubic-bezier(.2,.8,.2,1); }
.order-title { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.order-title h2 { margin: 0; font-size: 18px; letter-spacing: .13em; text-transform: uppercase; }
.order-lines { display: grid; gap: 9px; padding: 18px 0; min-height: 150px; }
.order-line { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px; border-radius: 8px; background: rgba(237,232,223,.055); animation: pop .32s ease both; }
.order-line span { color: rgba(237,232,223,.74); font-size: 13px; }
.empty { color: var(--muted); line-height: 1.45; padding: 16px 0; }
.total { margin-top: auto; border-top: 1px solid var(--line); padding-top: 16px; display: flex; justify-content: space-between; font-size: 22px; }
.voice-bar { margin-top: 16px; padding: 14px; border-radius: 8px; border: 1px solid rgba(232,111,49,.28); background: rgba(232,111,49,.075); }
.voice-actions { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* Полоса собрана из трёх строк: кнопка с состоянием, распознанная речь,
   уровень микрофона. Раньше строка состояния и расшифровка боролись за
   одну высоту, и в вертикальной раскладке полоса разъезжалась. */
.voice-bar { display: grid; gap: 10px; }
.voice-copy .transcript { margin: 2px 0 0; font-size: 13px; }
.mic-wrap { position: relative; width: 62px; height: 62px; flex: 0 0 auto; }
.mic-wrap::before, .mic-wrap::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(232,111,49,.55); animation: pulse 1.8s ease-out infinite; opacity: 0; }
.mic-wrap::after { animation-delay: .55s; }
.mic-button { position: relative; z-index: 1; width: 62px; height: 62px; border-radius: 50%; background: var(--coral); display: grid; place-items: center; box-shadow: 0 18px 45px rgba(232,111,49,.28); }
.transcript { min-height: 48px; color: rgba(237,232,223,.86); line-height: 1.35; }
.word { display: inline-block; margin-right: 5px; animation: word .28s ease both; }
.send-button { width: 100%; min-height: 58px; margin-top: 14px; border-radius: 999px; background: linear-gradient(135deg, var(--sage), #436c4e); font-weight: 800; opacity: .44; pointer-events: none; }
.send-button.ready { opacity: 1; pointer-events: auto; box-shadow: 0 20px 54px rgba(94,140,106,.28); }
.confirmation { min-height: calc(100vh - 116px); display: grid; place-items: center; padding: 20px; }
.printer-scene { width: min(960px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 70px); align-items: center; }
.success-copy h2 { font-family: 'IBM Plex Serif', Georgia, 'Times New Roman', serif; font-size: clamp(48px, 7vw, 96px); line-height: .93; margin: 0; }
.success-copy p { color: rgba(237,232,223,.74); font-size: 20px; line-height: 1.45; }
.printer { height: 470px; position: relative; display: grid; place-items: center; }
.printer-box { position: absolute; top: 82px; width: 390px; height: 130px; border-radius: 8px; background: linear-gradient(180deg, #3a342b, #1d1a16); border: 1px solid var(--line); box-shadow: 0 36px 88px rgba(0,0,0,.43); }
.printer-box::before { content: ""; position: absolute; left: 42px; right: 42px; top: 42px; height: 18px; border-radius: 999px; background: #0d0c0a; box-shadow: inset 0 2px 8px rgba(0,0,0,.7); }
.ticket { position: absolute; top: 130px; width: 312px; min-height: 285px; padding: 28px 26px; color: #1e1b17; background: #ede8df; border-radius: 0 0 8px 8px; transform-origin: top; animation: print 1.5s cubic-bezier(.19,1,.22,1) both; box-shadow: 0 28px 50px rgba(0,0,0,.26); }
.ticket h3 { margin: 0 0 18px; color: #14120f; letter-spacing: .12em; }
.ticket-line { display: flex; justify-content: space-between; border-top: 1px dashed rgba(20,18,15,.24); padding: 10px 0; }
.sage-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 11px rgba(94,140,106,.16); display: inline-block; margin-right: 10px; }
[dir="rtl"] .layout { direction: rtl; }
[dir="rtl"] .dish-top, [dir="rtl"] .order-line, [dir="rtl"] .total, [dir="rtl"] .order-title { direction: rtl; }
[dir="rtl"] .order-panel.order-catch .order-title h2 { animation-name: orderTitleRtl; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
@keyframes wave { 0%,100% { transform: scaleY(.55); opacity: .55; } 50% { transform: scaleY(1.45); opacity: 1; } }
@keyframes pulse { 0% { transform: scale(.72); opacity: .76; } 100% { transform: scale(1.65); opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(9px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes word { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes print { from { transform: translateY(-180px) scaleY(.18); opacity: .1; } to { transform: translateY(0) scaleY(1); opacity: 1; } }
@keyframes dishTap { 0%,100% { filter: brightness(1); } 45% { filter: brightness(1.12); } }
@keyframes qtyPop { from { opacity: 0; transform: translateY(7px) scale(.72); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes orderCatch { 0%,100% { border-color: rgba(181,146,71,.23); box-shadow: 0 24px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(237,232,223,.08); } 45% { border-color: rgba(214,183,110,.72); box-shadow: 0 24px 74px rgba(0,0,0,.36), 0 0 0 4px rgba(181,146,71,.1), inset 0 1px 0 rgba(237,232,223,.18); } }
@keyframes orderTitle { 0%,100% { color: var(--bone); transform: translateX(0); } 45% { color: #d6b76e; transform: translateX(4px); } }
@keyframes orderTitleRtl { 0%,100% { color: var(--bone); transform: translateX(0); } 45% { color: #d6b76e; transform: translateX(-4px); } }
@media (max-width: 1080px) {
  .hero-main, .layout, .printer-scene { grid-template-columns: 1fr; }
  .hero-card, .order-panel { position: static; }
  .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hero { min-height: 100svh; }
  .topbar, .kiosk-head { align-items: flex-start; flex-direction: column; }
  .menu-toolbar { align-items: stretch; flex-direction: column; }
  .category-tabs { width: 100%; }
  .menu { grid-template-columns: 1fr; }
  .dish-card { min-height: 290px; grid-template-rows: 194px auto; }
  .dish-image { height: 194px; padding-top: 18px; }
  .dish-card img { height: 158px; }
  .order-panel { min-height: auto; }
  .printer { height: 430px; transform: scale(.86); }
  .brand-title strong { font-size: 15px; }
}
@media (max-width: 1080px), (orientation: portrait) {
  /* Узкий экран — заказ ВНИЗУ, под меню, а не сбоку: справа для него уже
     нет места, а внизу он под большим пальцем. Отдельной строкой сетки,
     а не position: fixed — так он в той же раскладке, что и всё
     остальное, и меню над ним прокручивается своей полосой. */
  .order-experience > .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .order-experience .menu-toolbar { grid-column: 1; grid-row: 1; }
  .order-experience .menu { grid-column: 1; grid-row: 2; }
  .order-experience .order-panel {
    grid-column: 1; grid-row: 3;
    height: auto; max-height: clamp(230px, 34svh, 330px);
    padding: 12px 14px;
    border-color: rgba(181,146,71,.34);
    background: linear-gradient(160deg, rgba(34,30,25,.94), rgba(20,18,15,.88));
    box-shadow: 0 -18px 58px rgba(0,0,0,.42), inset 0 1px 0 rgba(237,232,223,.1);
  }
  .order-title { flex: 0 0 auto; padding-bottom: 9px; }
  .order-title h2 { font-size: 16px; }
  .order-lines {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(181,146,71,.46) transparent;
    padding: 8px 4px 8px 0;
  }
  .order-lines::-webkit-scrollbar { width: 5px; }
  .order-lines::-webkit-scrollbar-thumb { background: rgba(181,146,71,.46); border-radius: 5px; }
  .order-line { padding: 9px 10px; }
  .empty { margin: 0; padding: 8px 0; }
  .total { flex: 0 0 auto; margin-top: 0; padding-top: 8px; font-size: 18px; }
  .voice-bar { flex: 0 0 auto; margin-top: 7px; padding: 7px 9px; }
  .mic-wrap, .mic-button { width: 46px; height: 46px; }
  .transcript { min-height: 0; margin: 0; font-size: 13px; }
  .send-button { flex: 0 0 auto; min-height: 44px; margin-top: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition: none !important; }
}


/* ═══ Наши узлы, которых в макете не было ═══════════════════════════ */

.head-tools { display: flex; align-items: center; gap: 10px; }
/* Родную стрелку убираем и рисуем свою. Браузер прижимает её вплотную к
   правому краю, а у пилюли там скругление в 20 с лишним пикселей — стрелка
   попадала прямо на дугу и выглядела приклеенной. Своя стоит в прямой части
   поля и держит отступ от границы. */
.head-tools select {
  appearance: none; -webkit-appearance: none;
  background-color: rgba(30,27,23,.72);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23EDE8DF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  color: var(--bone); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 44px 10px 18px;
  font: inherit; font-size: 14px; cursor: pointer;
}
.head-tools select:hover { border-color: rgba(181,146,71,.5); }
.head-tools select:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
/* В RTL стрелка уходит налево вместе с текстом. */
[dir="rtl"] .head-tools select {
  background-position: left 18px center;
  padding: 10px 18px 10px 44px;
}
/* Раскрытый список рисует система: на тёмной странице он был белым. */
.head-tools select option { background: #1e1b17; color: #ede8df; }
.gear, .ghost {
  background: rgba(30,27,23,.56); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; min-height: 40px; padding: 0 13px; cursor: pointer;
  display: inline-grid; place-items: center;
}
.gear { width: 42px; padding: 0; }
.gear svg { width: 19px; height: 19px; }
.timer { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 14px; }
.hero-note { color: var(--coral); margin: 18px 0 0; min-height: 1em; font-size: 15px; }
.live { color: var(--sage); }
.live.on { color: var(--coral); }

/* Витрина: мини-чек и волна наполняются из настоящего меню, а не из
   выдуманных цен, поэтому размечены пусто и заполняются скриптом. */
.mini-line b { color: var(--brass); }

/* Панель заказа: наши тотал и «с неподтверждённым» вместо одной строки. */
.totals { margin-top: auto; }
.total.dim { font-size: 15px; color: var(--muted); border-top: 0; padding-top: 6px; }
.order-line .mods { color: var(--brass); font-size: 12px; }
.order-line.pendingline { opacity: .62; border: 1px dashed rgba(181,146,71,.4); }
.order-line .qty { font-variant-numeric: tabular-nums; }
/* Убрать позицию рукой. Крестик проявляется на строке, а не висит всегда:
   в панели их было бы столько же, сколько блюд, и они спорили бы с ценой
   за внимание. На касании он есть сразу — на тач-экране hover не бывает. */
.lineright { display: flex; align-items: center; gap: 10px; }

/* Шаг количества. Цифра между кнопками — моноширинная, иначе строка
   дёргается при переходе с 9 на 10. */
.stepper {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid rgba(181,146,71,.28); border-radius: 999px;
  background: rgba(20,18,15,.5);
}
.stepper button {
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: transparent; color: var(--bone); font-size: 15px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  transition: background .16s ease, color .16s ease;
}
.stepper button:hover { background: rgba(181,146,71,.22); color: var(--brass); }
.stepper button:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.stepper .qty {
  min-width: 18px; text-align: center; font-variant-numeric: tabular-nums;
  font-size: 14px; color: var(--bone);
}
.drop {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(232,111,49,.35); background: transparent; color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.drop:hover { color: var(--coral); border-color: var(--coral); background: rgba(232,111,49,.12); }
.drop:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* Голосовая полоса: подпись состояния рядом с микрофоном. */
.voice-copy { min-width: 0; flex: 1; }
.voice-copy b { display: block; font-size: 15px; letter-spacing: .04em; }
.callstate { transition: opacity .16s ease, transform .16s ease; }
.callstate.swap { opacity: 0; transform: translateY(-4px); }
.voice-bar .level { margin-top: 10px; }
.mic-button.on { background: var(--sage); }
.mic-wrap.idle::before, .mic-wrap.idle::after { animation: none; opacity: 0; }

/* Задача коллеге — прямо в панели заказа, а не отдельной колонкой. */
.handoff { margin-top: 14px; padding: 12px; border-radius: 8px;
  border: 1px solid rgba(181,146,71,.45); background: rgba(181,146,71,.08); }
.handoff h3 { margin: 0 0 8px; font-size: 13px; color: var(--brass);
  text-transform: uppercase; letter-spacing: .12em; }
.handoff h3::before { content: '↗'; margin-inline-end: 7px; }
.hitem { font-size: 14px; color: rgba(237,232,223,.86); margin-bottom: 6px; line-height: 1.4; }
.hitem b { color: var(--brass); margin-inline-end: 6px; }

/* Блюдо в меню, о котором агент говорит прямо сейчас. */
.dish-card.talking { border-color: rgba(214,183,110,.85); background: rgba(52,45,34,.95); }
.dish-card.talking img { transform: scale(1.06); }
.dish-card.dimmed { opacity: .38; }
/* Блюдо уже в заказе: видно по карточке, а не только по чипу с числом —
   на стенде смотрят на витрину, а не в панель справа. */
.dish-card.hit { border-color: rgba(232,111,49,.5); background: rgba(46,34,26,.9); }
.dish-card.hit .dish-meta { border-top-color: rgba(232,111,49,.3); }

/* Чек печатается из настоящего тикета кассы — моноширинный, как на ленте. */
.ticket pre { margin: 0; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #1e1b17; white-space: pre; }

/* Разговор виден только в режиме разработки. */
.talk { margin-top: 18px; padding: 16px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(30,27,23,.55); }
.talk h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted); }
#lines { max-height: 320px; }
body:not(.dev) .devonly { display: none !important; }

/* Экраны переключает screen() атрибутом hidden — см. app.js. */


/* ═══ Перенесено из прежней вёрстки ══════════════════════════════ */

/* ─── Символ саудовского риала ──────────────────────────────────────── */
/* Официальная отрисовка SAMA (общественное достояние), поданная маской —
   цвет наследуется от текста. Кодовая точка символа U+20C1, вошла в
   Unicode 17.0; шрифта с ней нет ни одного, включая IBM Plex Sans Arabic,
   поэтому рисуем, а не набираем.
   Правило SAMA: символ ВСЕГДА слева от числа, на всех языках, включая
   арабский — в RTL он не переворачивается. Отсюда direction: ltr. */
.rs { direction: ltr; display: inline-flex; align-items: baseline; gap: .32em; }
.rs::before {
  content: ""; flex: none; width: .62em; height: .72em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201124.14%201256.39%22%3E%20%3Cpath%20d%3D%22M699.62%2C1113.02h0c-20.06%2C44.48-33.32%2C92.75-38.4%2C143.37l424.51-90.24c20.06-44.47%2C33.31-92.75%2C38.4-143.37l-424.51%2C90.24Z%22%2F%3E%20%3Cpath%20d%3D%22M1085.73%2C895.8c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.33v-135.2l292.27-62.11c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.27V66.13c-50.67%2C28.45-95.67%2C66.32-132.25%2C110.99v403.35l-132.25%2C28.11V0c-50.67%2C28.44-95.67%2C66.32-132.25%2C110.99v525.69l-295.91%2C62.88c-20.06%2C44.47-33.33%2C92.75-38.42%2C143.37l334.33-71.05v170.26l-358.3%2C76.14c-20.06%2C44.47-33.32%2C92.75-38.4%2C143.37l375.04-79.7c30.53-6.35%2C56.77-24.4%2C73.83-49.24l68.78-101.97v-.02c7.14-10.55%2C11.3-23.27%2C11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z%22%2F%3E%20%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201124.14%201256.39%22%3E%20%3Cpath%20d%3D%22M699.62%2C1113.02h0c-20.06%2C44.48-33.32%2C92.75-38.4%2C143.37l424.51-90.24c20.06-44.47%2C33.31-92.75%2C38.4-143.37l-424.51%2C90.24Z%22%2F%3E%20%3Cpath%20d%3D%22M1085.73%2C895.8c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.33v-135.2l292.27-62.11c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.27V66.13c-50.67%2C28.45-95.67%2C66.32-132.25%2C110.99v403.35l-132.25%2C28.11V0c-50.67%2C28.44-95.67%2C66.32-132.25%2C110.99v525.69l-295.91%2C62.88c-20.06%2C44.47-33.33%2C92.75-38.42%2C143.37l334.33-71.05v170.26l-358.3%2C76.14c-20.06%2C44.47-33.32%2C92.75-38.4%2C143.37l375.04-79.7c30.53-6.35%2C56.77-24.4%2C73.83-49.24l68.78-101.97v-.02c7.14-10.55%2C11.3-23.27%2C11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z%22%2F%3E%20%3C%2Fsvg%3E") no-repeat center / contain;
  opacity: .78; transform: translateY(.02em);
}

.level { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.level i { display: block; height: 100%; width: 0; background: var(--live); transition: width .08s; }

/* ─── Настройки ─────────────────────────────────────────────────────── */
.settings { position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-start; justify-content: flex-end; z-index: 20; }
.sheet { background: var(--panel); border-inline-start: 1px solid var(--line);
  width: 340px; max-width: 92vw; height: 100%; padding: 18px; overflow-y: auto; }
.shead { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; }
.shead button { background: none; border: 0; color: var(--dim); font-size: 18px; cursor: pointer; }
.sheet label { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px;
  font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.sheet select, .sheet .wide {
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 10px; font-size: 14px; width: 100%;
  text-transform: none; letter-spacing: 0; cursor: pointer;
}
.tech { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--dim); font-size: 12px; line-height: 1.6; }

.modal { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.62);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.ticketcard {
  position: relative; background: #f4f1ea; color: #16181b;
  border-radius: 10px; padding: 20px 18px; max-height: 86vh; overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0,0,0,.6);
  animation: ticketin .3s cubic-bezier(.2,.8,.3,1);
}
@keyframes ticketin { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.ticketcard pre {
  margin: 0; white-space: pre; direction: ltr; text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.55;
}
.ticketcard .x { position: absolute; top: 6px; inset-inline-end: 8px;
  background: none; border: 0; color: #8a8578; font-size: 17px; cursor: pointer;
  min-width: 32px; min-height: 32px; }

.convo { display: flex; flex-direction: column; min-height: 240px; flex: 1; }
#lines { flex: 1; min-height: 0; overflow-y: auto; padding-inline-end: 6px; }
#lines::-webkit-scrollbar { width: 6px; }
#lines::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
#lines .row { margin-bottom: 11px; }
#lines .who { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
#lines .guest .who { color: var(--blue); }
#lines .agent .who { color: var(--gold); }
#lines .txt { margin-top: 2px; font-size: 15px; overflow-wrap: anywhere; }
.interim { color: var(--dim); font-style: italic; min-height: 20px; font-size: 14px; }

#typeBar { display: flex; gap: 8px; }
#typeBar input {
  flex: 1; min-width: 0; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px;
  font-size: 15px; font-family: inherit;
}
#typeBar input:focus { outline: none; border-color: var(--gold); }
#typeBar button { background: var(--gold); color: #1a1206; border: 0;
  border-radius: 9px; padding: 0 16px; font-size: 17px; cursor: pointer; }

/* ─── Визуальное сопровождение разговора ─────────────────────────────── */
/* Гость слышит блюдо — и видит, о чём речь. Всё на transform и opacity:
   анимация ширины и высоты дёргает раскладку. Длительности в пределах
   150–300 мс для микровзаимодействий, полёт строки — 380 мс, это уже
   пространственный переход, а не микрожест. */

#menu .mi.talking {
  animation: talking 2.6s ease-out;
}
@keyframes talking {
  0%   { background: rgba(217,164,65,.22); }
  18%  { background: rgba(217,164,65,.22); }
  100% { background: rgba(217,164,65,0); }
}
#menu .mi.talking .mn { color: var(--gold); }

/* Призрак строки, летящий из меню в заказ. */
.ghost {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 15px; color: var(--gold);
  background: var(--panel2); border: 1px solid var(--gold);
  border-radius: 8px; padding: 6px 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
.ghost .alg, .ghost .mdesc { display: none; }

/* Количество: выросло или уменьшилось — видно без чтения цифры. */
#order .qty.up   { animation: qup .5s cubic-bezier(.2,.8,.3,1); }
#order .qty.down { animation: qdown .5s cubic-bezier(.2,.8,.3,1); }
@keyframes qup   { 30% { transform: translateY(-5px); color: var(--ok); } }
@keyframes qdown { 30% { transform: translateY(5px);  color: var(--warn); } }

/* Уважение к системной настройке: правило помечено как High severity. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}