/* Стили Mini App «Кото-шеф».
   Цвета и радиусы — те же токены, что в Figma (коллекция theme), с теми же
   именами, что у daisyUI: поэтому daisyUI-компоненты сразу берут наши цвета. */

/* --- Тема --- */
/* [data-theme="chef"] стоит на <html>. Такой селектор «сильнее», чем тема
   daisyUI по умолчанию, поэтому наши значения побеждают. */
[data-theme="chef"] {
  color-scheme: light;

  --color-base-100: #fffcf8;
  --color-base-200: #fbf3ea;
  --color-base-300: #eadbcb;
  --color-base-content: #3b2a20;
  --color-base-content-muted: #75604f; /* наш дополнительный токен */
  --color-primary: #f4a27a;
  --color-primary-content: #3d1e0f;
  --color-primary-strong: #b2532a; /* наш дополнительный токен */
  --color-secondary: #f6bcc6;
  --color-secondary-content: #4a1d2a;
  --color-accent: #f6cb6e;
  --color-accent-content: #3d2a05;
  --color-neutral: #4a3a30;
  --color-neutral-content: #fff5ec;
  --color-info: #8db8e6;
  --color-info-content: #0e2a47;
  --color-success: #8ccb9b;
  --color-success-content: #10301a;
  --color-warning: #f5be4f;
  --color-warning-content: #3a2600;
  --color-error: #c2443a;
  --color-error-content: #ffffff;
  --color-error-soft: rgb(194 68 58 / 0.12); /* error с прозрачностью 12% */

  --radius-box: 24px;
  --radius-field: 14px;
  --radius-selector: 999px;

  /* Тень elevation/float из Figma. */
  --shadow-float: 0 8px 24px rgb(59 42 32 / 0.12), 0 1px 2px rgb(59 42 32 / 0.08);

  /* Безопасные зоны. В Telegram (полноэкранный режим) их сообщает сам Telegram
     через переменные --tg-…; в обычном браузере берём системные env(…) или 0. */
  --safe-top: calc(
    var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) +
      var(--tg-content-safe-area-inset-top, 0px)
  );
  --safe-bottom: var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));

  /* Высота нижней панели и её отступ снизу — нужны тосту и отступу контента. */
  --dock-h: 64px;
  --dock-gap: 8px;
}

/* --- Основа --- */
html,
body {
  background: var(--color-base-200);
  color: var(--color-base-content);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent; /* без серой вспышки при тапе на iPhone */
}

/* Текстовые стили из Figma — по одному классу на стиль. */
.t-display { font: 800 32px/38px "Nunito", sans-serif; letter-spacing: -0.32px; }
.t-title { font: 700 20px/26px "Nunito", sans-serif; letter-spacing: -0.06px; }
.t-subtitle { font: 700 17px/22px "Nunito", sans-serif; }
.t-body { font: 500 16px/24px "Manrope", sans-serif; }
.t-body-sm { font: 500 14px/20px "Manrope", sans-serif; }
.t-label { font: 700 16px/20px "Manrope", sans-serif; }
.t-chip { font: 600 14px/18px "Manrope", sans-serif; }
.t-title-lg { font: 800 24px/30px "Nunito", sans-serif; letter-spacing: -0.12px; }
.t-caption { font: 600 12px/16px "Manrope", sans-serif; letter-spacing: 0.12px; }
.muted { color: var(--color-base-content-muted); }

/* Экран: сверху отступ под шапку Telegram, снизу — место под Dock,
   чтобы последняя карточка не пряталась за панелью. */
.screen {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 480px;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 8px) 0 calc(var(--safe-bottom) + var(--dock-h) + 76px);
}

/* Отступы по бокам — 16px, как в макете (390 − 358 = 32). */
.px-page { padding-left: 16px; padding-right: 16px; }

/* --- Котики --- */
/* Лапки у приветствия. position: absolute — их положение не влияет на текст. */
.greeting { position: relative; }
.paw { position: absolute; width: 24px; height: 24px; pointer-events: none; }
.paw-1 { right: 71px; top: 0; rotate: 20deg; }
.paw-2 { right: 47px; top: 23px; rotate: 35deg; }
.paw-3 { right: 24px; top: -4px; rotate: 25deg; }

/* Котик выглядывает из-за верхнего края карточки. Он стоит в разметке
   раньше карточки, поэтому карточка закрывает нижнюю часть головы. */
.peek-host { position: relative; }
.peek {
  position: absolute;
  right: 50px;
  width: 72px;
  height: 40px;
  pointer-events: none;
}
.peek + * { position: relative; } /* карточка после котика — поверх него */

/* --- Кнопки (daisyUI btn + размеры и стили из Figma) --- */
.btn {
  height: 48px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--radius-field);
  border: none;
  box-shadow: none;
  font: 700 16px/20px "Manrope", sans-serif;
}
.btn-sm {
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  font: 600 14px/18px "Manrope", sans-serif;
}
/* --btn-bg / --btn-fg — «ручки», через которые daisyUI красит кнопку. */
.btn-soft-chef { --btn-bg: var(--color-base-300); --btn-fg: var(--color-base-content); }
.btn-error-soft { --btn-bg: var(--color-error-soft); --btn-fg: var(--color-error); }
.btn-primary-chef { --btn-bg: var(--color-primary); --btn-fg: var(--color-primary-content); }
.btn-ghost-chef { --btn-bg: transparent; --btn-fg: var(--color-base-content); }

/* --- Карточки --- */
.card-chef {
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
}

/* Карточка блюда */
.dish { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.dish-photo {
  width: 100%;
  aspect-ratio: 332 / 180; /* пропорция фото из макета — масштабируется с шириной */
  object-fit: cover; /* фото обрезается по краям, а не растягивается */
  border-radius: 12px;
  display: block;
}
.dish-nophoto {
  height: 112px;
  border-radius: 12px;
  background: var(--color-base-200);
  display: grid;
  place-items: center;
  font-size: 40px;
}
.dish-body { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; overflow-wrap: anywhere; }
.dish-meta { display: flex; align-items: center; gap: 10px; }

/* Ценник: 💋 — розовый (secondary), 🤗 — медовый (accent). */
.price {
  display: inline-flex;
  gap: 3px;
  padding: 4px 10px;
  border-radius: var(--radius-selector);
  font: 600 14px/18px "Manrope", sans-serif;
}
.price-kiss { background: var(--color-secondary); color: var(--color-secondary-content); }
.price-hug { background: var(--color-accent); color: var(--color-accent-content); }

/* Баннер «Новые заказы» — вся карточка нажимается. */
.banner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 14px;
  text-align: left;
  cursor: pointer;
}
.banner-count {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-selector);
  background: var(--color-info);
  color: var(--color-info-content);
  display: grid;
  place-items: center;
}

/* --- Чипсы категорий --- */
/* Ряд листается вбок пальцем; полосу прокрутки прячем. */
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-selector);
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  font: 600 14px/18px "Manrope", sans-serif;
  color: var(--color-base-content);
  cursor: pointer;
}
/* Выбранный: рамка 2px. Вторую половину рамки рисуем тенью внутрь,
   чтобы чипс не «прыгал» по ширине на 2px при выборе. */
.chip.is-selected {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

/* --- Состояния: пусто / ошибка / загрузка --- */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 20px 20px;
  text-align: center;
}
.peek-state { right: 19px; top: -40px; } /* котик сидит на верхнем крае карточки */
.state .btn { width: 100%; }

/* Скелетон — серые плашки на месте будущего контента. Без «блика» (решено в дизайне). */
.sk { background: rgb(234 219 203 / 0.55); border-radius: 999px; }
.sk-box { border-radius: 12px; }

/* --- Нижняя панель (Dock) --- */
.dock-bar {
  position: fixed;
  z-index: 20;
  left: 16px;
  right: 16px;
  bottom: calc(var(--safe-bottom) + var(--dock-gap));
  max-width: 448px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dock-tabs {
  flex: 1;
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: var(--radius-selector);
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  box-shadow: var(--shadow-float);
}
.dock-tab {
  flex: 1;
  height: 52px;
  border-radius: var(--radius-selector);
  font: 600 14px/18px "Manrope", sans-serif;
  color: var(--color-base-content-muted);
  cursor: pointer;
}
.dock-tab.is-active {
  background: var(--color-base-300);
  color: var(--color-base-content);
  font: 700 16px/20px "Manrope", sans-serif;
}

/* Кнопка «+» с ушками (FAB/cat): ушки торчат над кругом и не влияют на размер.
   Класс не «fab»: так называется компонент daisyUI, он прячет всё, кроме первого ребёнка. */
.cat-fab {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  cursor: pointer;
}
.cat-fab-ears { position: absolute; left: 0; top: -11.43px; width: 64px; height: 27.43px; }
.cat-fab-circle {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-selector);
  background: var(--color-primary);
  color: var(--color-primary-content);
  box-shadow: var(--shadow-float);
  display: grid;
  place-items: center;
  font: 800 30px/30px "Nunito", sans-serif;
}
.cat-fab:active .cat-fab-circle { scale: 0.96; }

/* Затухание контента над Dock. */
.fade {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--safe-bottom) + 116px);
  pointer-events: none; /* сквозь градиент можно нажимать */
  background: linear-gradient(to bottom, rgb(251 243 234 / 0), var(--color-base-200) 55%);
}

/* --- Тост --- */
.toast-wrap {
  position: fixed;
  z-index: 50; /* выше шторки — ошибка должна быть видна */
  left: 16px;
  right: 16px;
  bottom: calc(var(--safe-bottom) + var(--dock-gap) + var(--dock-h) + 12px);
  max-width: 448px;
  margin: 0 auto;
  pointer-events: none;
}
.toast-chef {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border-radius: var(--radius-box);
  background: var(--color-neutral);
  color: var(--color-neutral-content);
  box-shadow: var(--shadow-float);
  font: 500 14px/20px "Manrope", sans-serif;
  animation: toast-in 0.2s ease-out;
}
.toast-emoji {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 16px;
  background: var(--color-base-100);
}
.toast-chef.is-error .toast-emoji { background: var(--color-secondary); }
@keyframes toast-in {
  from { opacity: 0; translate: 0 8px; }
}

/* --- Заказы --- */
.order { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.order-thumb {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
}
/* Без фото — эмодзи категории на персиково-медовом градиенте, как в макете. */
.order-thumb-empty {
  display: grid;
  place-items: center;
  font-size: 28px;
  background: linear-gradient(127deg, var(--color-primary) 0%, var(--color-accent) 71%);
}
.order-note {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--color-base-200);
}

/* Бейдж статуса (Status badge): цвет — по статусу. */
.status-badge {
  flex: none;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-selector);
  display: inline-flex;
  align-items: center;
  font: 600 14px/18px "Manrope", sans-serif;
  white-space: nowrap;
}
.badge-new { background: var(--color-info); color: var(--color-info-content); }
.badge-cooking { background: var(--color-warning); color: var(--color-warning-content); }
.badge-done { background: var(--color-success); color: var(--color-success-content); }
.badge-declined { background: var(--color-error); color: var(--color-error-content); }
.badge-cancelled { background: var(--color-base-300); color: var(--color-base-content-muted); }

/* --- Форма блюда --- */
/* Пока открыта форма, Dock и его затухание не нужны: у формы своя кнопка. */
body.is-form .dock-bar,
body.is-form .fade { display: none; }

.back-btn {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-selector);
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 14px/18px "Manrope", sans-serif;
}

/* Поле ввода (Input в Figma). Рамка 1px; в фокусе и при ошибке «вторую»
   половину рамки рисуем тенью внутрь — поле не меняет размер. */
.field {
  width: 100%;
  height: 52px;
  padding: 14px 16px;
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  font: 500 16px/24px "Manrope", sans-serif; /* 16px — иначе iPhone приближает страницу при фокусе */
  color: var(--color-base-content);
  outline: none;
}
.field::placeholder { color: var(--color-base-content-muted); opacity: 0.8; }
.field:focus {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary), 0 0 0 4px rgb(244 162 122 / 0.25);
}
.field.is-error {
  border-color: var(--color-error);
  box-shadow: inset 0 0 0 1px var(--color-error);
}
.field-area { height: 120px; resize: none; }

.field-helper {
  display: flex;
  gap: 8px;
  font: 600 12px/16px "Manrope", sans-serif;
  letter-spacing: 0.12px;
  color: var(--color-base-content-muted);
}
.field-helper.is-error { color: var(--color-error); }

/* Сегменты валюты (Segmented): серая подложка, выбранный — светлая «таблетка». */
.segmented {
  display: flex;
  gap: 4px;
  height: 44px;
  padding: 4px;
  border-radius: var(--radius-field);
  background: var(--color-base-300);
}
.segment {
  flex: 1;
  min-width: 0;
  border-radius: 10px;
  font: 600 14px/18px "Manrope", sans-serif;
  color: var(--color-base-content-muted);
  white-space: nowrap;
  cursor: pointer;
}
.segment.is-selected {
  background: var(--color-base-100);
  color: var(--color-base-content);
  box-shadow: 0 1px 3px rgb(59 41 33 / 0.12);
}

/* Выбор фото: пустой — пунктирная рамка; с фото — картинка и кнопки в углу. */
.photo-empty {
  height: 200px;
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  border: 2px dashed var(--color-base-300);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
.photo-filled {
  height: 200px;
  border-radius: var(--radius-box);
  background-size: cover; /* фото заполняет блок, лишнее обрезается */
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 12px;
}

/* Текстовая кнопка «Убрать» у времени готовки. */
.link-btn {
  font: 700 13px/16px "Manrope", sans-serif;
  color: var(--color-primary-strong);
  cursor: pointer;
}

/* Кнопка «Добавить в меню» прилипает к низу экрана, над ней — затухание. */
.form-submit {
  position: fixed;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 16px calc(var(--safe-bottom) + 8px);
  background: linear-gradient(to bottom, rgb(251 243 234 / 0), var(--color-base-200) 45%);
}
.form-submit .btn { max-width: 448px; margin: 0 auto; display: flex; }
.btn-primary-chef:disabled { --btn-bg: var(--color-primary); opacity: 0.7; }

/* --- Шторка снизу --- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(59 42 32 / 0.45);
  animation: fade-in 0.2s ease-out;
}
.sheet-wrap {
  position: fixed;
  z-index: 41;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  animation: sheet-in 0.25s ease-out;
}
.sheet {
  position: relative; /* поверх котика, который выглядывает из-за края */
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px 16px calc(var(--safe-bottom) + 16px);
  border-radius: 24px 24px 0 0;
  background: var(--color-base-100);
}
.sheet-content { display: flex; flex-direction: column; gap: 16px; }
/* Блюдо в шторке «Заказываем?»: плашка с крупной миниатюрой. */
.sheet-dish {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  background: var(--color-base-200);
}
.sheet-thumb {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;
}
.sheet-thumb.order-thumb-empty { font-size: 34px; }
/* Неактивная error-soft кнопка («Отказаться», пока причина не выбрана) — бледная. */
.btn-error-soft:disabled { --btn-bg: var(--color-error-soft); --btn-fg: var(--color-error); opacity: 0.4; }
.sheet-grabber {
  align-self: center;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-base-300);
}
body.is-locked { overflow: hidden; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-in { from { translate: 0 100%; } }

/* --- Dev-панель (только в браузере, не в Telegram) --- */
.dev {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 16px;
  border-bottom: 1px dashed var(--color-base-300);
  font: 600 12px/16px "Manrope", sans-serif;
  color: var(--color-base-content-muted);
}
.dev[hidden] { display: none; }