/* ============================================================
   МИА КОТТИ — персональный AI-стилист
   Структура: основной экран — кошка во весь экран (видна
   целиком, по центру); клик по экрану открывает ателье —
   окно с разделами «Шкаф», «Чат» и «Примерочная»; в шапке
   шкафа — кнопки «Добавить» и «Капсулы», в шапке капсул —
   «Назад»; «Чат» — главный
   чат ателье: стилист советует образы из вещей шкафа
   с фотографиями. Золотая нить и искры.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --background: #0a0806;
  --foreground: #f0e7d6;

  --card: #120f0c;
  --card-foreground: #f0e7d6;

  --primary: #ddb45e;
  --primary-foreground: #0e0a07;

  --secondary: #1e1a16;
  --muted: #181512;
  --muted-foreground: #a89d8a;

  --accent: #292319;
  --accent-foreground: #f0e7d6;

  --border: rgba(221, 180, 94, 0.18);

  --gold: #ddb45e;
  --gold-light: #f3dca1;
  --gold-deep: #aa732b;

  --champagne: #ddcfb8;
  --champagne-75: rgba(221, 207, 184, 0.75);
  --champagne-85: rgba(221, 207, 184, 0.85);

  --chat-user: #ddcfb8;
  --chat-user-foreground: #100c09;

  --gradient-gold: linear-gradient(120deg,
    var(--gold-deep) 0%,
    var(--gold-light) 35%,
    var(--gold) 55%,
    var(--gold-deep) 100%);

  --gradient-panel: linear-gradient(180deg, #14110d 0%, #0e0c09 100%);

  --shadow-gold: 0 30px 80px -30px rgba(221, 180, 94, 0.35);

  --font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bodoni Moda", "Didot", Georgia, serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Как на gravikot.ru: страница неподвижна — никакого пинч-/двойного
   тапа-зума, резинового скролла и авто-инфляции текста.
   Клавиатура уменьшает высоту (interactive-widget=resizes-content),
   поэтому макет не «уезжает» вверх. */
html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: fixed;
  inset: 0;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(221, 180, 94, 0.3); color: var(--gold-light); }

img { display: block; }

button { font-family: inherit; cursor: pointer; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: var(--font-sans);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 400;
}

.font-display { font-family: var(--font-display); }

.text-gold { color: var(--gold); }
.text-gold-light { color: var(--gold-light); }
.text-champagne { color: var(--champagne); }
.text-muted { color: var(--muted-foreground); }

.text-gold-gradient {
  background-image: var(--gradient-gold);
  color: transparent;
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  font-style: italic;
}

/* ---------- Animations ---------- */
@keyframes fade-up {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer-gold {
  0%   { background-position: 0%; }
  100% { background-position: 200%; }
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

@keyframes hint-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.animate-fade-up {
  animation: 1.1s cubic-bezier(0.22, 1, 0.36, 1) both fade-up;
}
.delay-150 { animation-delay: 150ms; }
.delay-300 { animation-delay: 300ms; }

.animate-shimmer-gold {
  animation: 6s linear infinite shimmer-gold;
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up,
  .animate-shimmer-gold,
  .hero-image,
  .hero-hint-gem,
  .hero-hint-text,
  .wardrobe-view .wardrobe-shelf,
  .wardrobe-view .wardrobe-add,
  .wardrobe-view .wardrobe-caps,
  .capsules-view .capsule-card,
  .capsules-view .capsules-back,
  .fitting-view .fitting-empty,
  .fitting-view .fitting-looks-head,
  .fitting-view .fitting-flat-row,
  .fitting-view .look-card,
  .create-view .create-empty,
  .create-view .look-photo,
  .lightbox-slide img,
  .flat-image,
  .flat-gem,
  .shelf-photo.just-added { animation: none; }
  body * { transition: none !important; }
  .chat-overlay { transition: none; }
  .flat-overlay { transition: none; }
}

/* ============================================================
   ОСНОВНОЙ ЭКРАН — кошка во весь экран, видна целиком,
   по центру. Клик по экрану открывает окно ателье.
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  background-image: radial-gradient(90% 70% at 50% 42%, #17120b 0%, var(--background) 75%);
}

.hero-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  -webkit-user-drag: none;
  animation: 1.4s cubic-bezier(0.22, 1, 0.36, 1) both fade-up;
}

.hero:focus-visible {
  outline: 1px solid rgba(221, 180, 94, 0.55);
  outline-offset: -8px;
}

/* Лёгкое затемнение сверху/снизу — читаемость навигации и подсказки */
.hero-fade {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image: linear-gradient(to bottom,
    rgba(10, 8, 6, 0.4) 0%,
    rgba(10, 8, 6, 0) 16%,
    rgba(10, 8, 6, 0) 52%,
    rgba(10, 8, 6, 0.55) 86%,
    rgba(10, 8, 6, 0.9) 100%);
}

.hero-nav {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.brand-logo {
  height: 2.5rem;
  width: 2.5rem;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.35em;
  color: var(--champagne);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.hero-login {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--champagne-85);
  text-decoration: none;
  padding: 0.5rem 0.25rem;
  transition: color 0.25s ease;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.hero-login:hover { color: var(--gold-light); }

/* Подсказка: клик по экрану открывает ателье */
.hero-hint {
  position: absolute;
  inset-inline: 0;
  bottom: 1.6rem;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 0 1.25rem;
  text-align: center;
  pointer-events: none;
}

.hero-hint-gem {
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background-image: var(--gradient-gold);
  box-shadow: 0 0 14px rgba(221, 180, 94, 0.65);
  animation: hint-pulse 3.4s ease-in-out infinite;
}

.hero-hint-text {
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--champagne-85);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
  animation: hint-pulse 3.4s ease-in-out infinite;
}

/* ============================================================
   АТЕЛЬЕ — полноэкранное окно (открывается кликом
   по основному экрану). Сверху навигация «Шкаф / Чат»,
   под ней два окна: гардероб и чат — переключение
   кнопками и свайпом.
   ============================================================ */
.chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
  background-image:
    radial-gradient(120% 55% at 50% -8%, rgba(221, 180, 94, 0.09), transparent 55%),
    var(--gradient-panel);
}
.chat-overlay.open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

body.chat-open { overflow: hidden; }

.chat-window {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ---------- Заглавное меню: Шкаф · Чат · Примерочная ---------- */
.chat-topbar {
  flex-shrink: 0;
  position: relative;
  z-index: 40;   /* панель и её меню — над треком окон */
  display: flex;
  align-items: stretch;
  padding: 0 1.25rem;
  border-bottom: 1px solid rgba(221, 180, 94, 0.2);
  background: rgba(10, 8, 6, 0.5);
}

.chat-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.9rem;   /* интервал между вкладками */
  margin: 0 auto;   /* вкладки по центру панели */
}

.chat-tab {
  position: relative;
  padding: 0.95rem 1.15rem 1rem;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 1.08rem;   /* крупнее в полтора раза (было 0.72rem) */
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  transition: color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Три вкладки крупным кеглем: на узких экранах ужимаем подписи и
   резервируем место под кнопку закрытия, чтобы ничего не наезжало.
   «Создать образ» — длинная подпись, ужимаем раньше обычного */
@media (max-width: 62rem) {
  .chat-tabs { gap: 0.7rem; }
  .chat-tab {
    font-size: 0.98rem;
    letter-spacing: 0.22em;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}
@media (max-width: 40rem) {
  .chat-tabs { gap: 0.45rem; }
  .chat-tab {
    font-size: 0.8rem;
    letter-spacing: 0.09em;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
@media (max-width: 30rem) {
  .chat-topbar { padding-right: 4.25rem; padding-left: 0.9rem; }   /* место под ✕ */
  .chat-tabs { gap: 0.4rem; }
  .chat-tab {
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
}
@media (max-width: 23.5rem) {
  .chat-topbar { padding-right: 4rem; padding-left: 0.75rem; }
  .chat-close { right: 0.9rem; }
  .chat-tabs { gap: 0.28rem; }
  .chat-tab {
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
}
@media (max-width: 20rem) {
  .chat-topbar { padding-right: 3.6rem; padding-left: 0.7rem; }
  .chat-close { right: 0.8rem; }
  .chat-tabs { gap: 0.2rem; }
  .chat-tab {
    font-size: 0.62rem;
    letter-spacing: 0.01em;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

/* Золотая нить — подчёркивает активную вкладку,
   расходится от центра при включении */
.chat-tab::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background-image: var(--gradient-gold);
  opacity: 0;
  transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              right 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.25s ease;
}

.chat-tab.active { color: var(--gold-light); }
.chat-tab.active::after { left: 16%; right: 16%; opacity: 1; }
.chat-tab:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: -4px; }

.chat-close {
  position: absolute;
  top: calc(50% - 1.2rem);
  right: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.4rem;
  width: 2.4rem;
  border: 1px solid rgba(221, 180, 94, 0.4);
  border-radius: 9999px;
  background: transparent;
  color: var(--champagne-85);
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
.chat-close svg { width: 1rem; height: 1rem; }
.chat-close:hover {
  border-color: var(--gold);
  background: rgba(221, 180, 94, 0.12);
  color: var(--gold-light);
}
.chat-close:active { transform: scale(0.92); }
.chat-close:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }

/* ---------- Четыре окна: Примерочная · Чат · Капсулы · Шкаф ----------
   Порядок панелей в треке: свайп вправо двигает к окну
   справа (Шкаф → Капсулы → Чат → Примерочная), влево — назад;
   на краях пружина */
.chat-views {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* вертикаль остаётся прокрутке окон, горизонталь — свайпу */
  touch-action: pan-y;
}

.chat-views-track {
  display: flex;
  width: 400%;
  height: 100%;
  transform: translateX(-25%);   /* по умолчанию — «Создать образ» (вторая панель) */
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.chat-views-track[data-view="fitting"] { transform: translateX(0); }
.chat-views-track[data-view="create"] { transform: translateX(-25%); }
.chat-views-track[data-view="capsules"] { transform: translateX(-50%); }
.chat-views-track[data-view="wardrobe"] { transform: translateX(-75%); }
/* во время живого перетаскивания анимация выключена */
.chat-views-track.dragging { transition: none; }

.wardrobe-view,
.capsules-view,
.fitting-view,
.create-view {
  width: 25%;
  height: 100%;
  overflow: hidden;
  touch-action: pan-y;
}

.wardrobe-view,
.capsules-view,
.fitting-view {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(221, 180, 94, 0.3) transparent;
}
.wardrobe-view::-webkit-scrollbar,
.capsules-view::-webkit-scrollbar { width: 4px; }
.wardrobe-view::-webkit-scrollbar-track,
.capsules-view::-webkit-scrollbar-track { background: transparent; }
.wardrobe-view::-webkit-scrollbar-thumb,
.capsules-view::-webkit-scrollbar-thumb {
  background: rgba(221, 180, 94, 0.25);
  border-radius: 9999px;
}
.wardrobe-view::-webkit-scrollbar-thumb:hover,
.capsules-view::-webkit-scrollbar-thumb:hover { background: rgba(221, 180, 94, 0.45); }

/* ---------- Гардероб ---------- */
.wardrobe-inner {
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 2.75rem;
}

.wardrobe-head {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;   /* на узких экранах кнопки переезжают в две строки */
  gap: 0.7rem;
  padding: 0.5rem 0 1.5rem;
}

/* Кнопки шапки шкафа: «Добавить» — своя вещь, «Капсулы» —
   готовые наборы. Пилюли одной формы; у «Капсул» — ромб-самоцвет */
.wardrobe-add,
.wardrobe-caps {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.62rem 1.45rem;
  border: 1px solid rgba(221, 180, 94, 0.45);
  border-radius: 9999px;
  background: rgba(221, 180, 94, 0.07);
  color: var(--champagne);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease,
    transform 0.15s ease, box-shadow 0.25s ease;
}
.wardrobe-add svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--gold);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.wardrobe-caps::before {
  content: "";
  flex-shrink: 0;
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 1px;
  transform: rotate(45deg);
  background-image: var(--gradient-gold);
}
.wardrobe-add:hover,
.wardrobe-caps:hover {
  border-color: var(--gold);
  background: rgba(221, 180, 94, 0.14);
  color: var(--gold-light);
  box-shadow: 0 8px 30px -12px rgba(221, 180, 94, 0.45);
}
.wardrobe-add:hover svg { transform: rotate(90deg); }
.wardrobe-add:active,
.wardrobe-caps:active { transform: scale(0.96); }
.wardrobe-add:focus-visible,
.wardrobe-caps:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }

.wardrobe-view.shown .wardrobe-add {
  animation: 0.7s cubic-bezier(0.22, 1, 0.36, 1) both fade-up;
}
.wardrobe-view.shown .wardrobe-caps {
  animation: 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both fade-up;
}

/* ---------- Гардероб: полки-ящики по категориям ----------
   В каждой полке — только фотографии вещей в кольцевой
   карусели; тап по фото открывает его на весь экран. */
.wardrobe-shelves {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.wardrobe-shelf {
  overflow: hidden;
  border: 1px solid rgba(221, 180, 94, 0.16);
  border-radius: 0.75rem;
  background: rgba(18, 15, 12, 0.55);
}

/* каскадное появление полок при первом показе шкафа */
.wardrobe-view.shown .wardrobe-shelf {
  animation: 0.7s cubic-bezier(0.22, 1, 0.36, 1) both fade-up;
}
.wardrobe-view.shown .wardrobe-shelf:nth-child(2) { animation-delay: 75ms; }
.wardrobe-view.shown .wardrobe-shelf:nth-child(3) { animation-delay: 150ms; }
.wardrobe-view.shown .wardrobe-shelf:nth-child(4) { animation-delay: 225ms; }
.wardrobe-view.shown .wardrobe-shelf:nth-child(5) { animation-delay: 300ms; }
.wardrobe-view.shown .wardrobe-shelf:nth-child(6) { animation-delay: 375ms; }
.wardrobe-view.shown .wardrobe-shelf:nth-child(7) { animation-delay: 450ms; }

/* шапка полки: категория + количество вещей */
.shelf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1rem 0.7rem;
  border-bottom: 1px solid rgba(221, 180, 94, 0.12);
}

.shelf-title {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--champagne-85);
}

.shelf-count {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1;
  color: var(--gold);
}

.shelf-carousel {
  position: relative;
  padding: 0.85rem 0 1rem;
}

/* фотки у краёв полки мягко растворяются под стрелками */
.shelf-strip {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 1.4rem, #000 calc(100% - 1.4rem), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 1.4rem, #000 calc(100% - 1.4rem), transparent 100%);
}

.shelf-track {
  display: flex;
  gap: 0.6rem;
  margin: 0;
  padding: 0 1rem;
  list-style: none;
  touch-action: pan-y;   /* горизонталь — карусели, вертикаль — прокрутке шкафа */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.shelf-track.dragging { transition: none; cursor: grabbing; }

.shelf-item { flex: 0 0 auto; }

.shelf-photo {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid rgba(221, 180, 94, 0.2);
  border-radius: 0.55rem;
  overflow: hidden;
  background: #0d0b08;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* золотая точка — метка «своей» вещи (добавлена через «Добавить») */
.shelf-item[data-user] .shelf-photo::after {
  content: "";
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: var(--gold);
  box-shadow: 0 0 0 2px rgba(10, 8, 6, 0.75), 0 0 10px rgba(221, 180, 94, 0.8);
}

/* только что добавленная вещь мягко подсвечивается */
@keyframes shelf-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(221, 180, 94, 0); }
  50% { box-shadow: 0 0 0 3px rgba(221, 180, 94, 0.55), 0 0 26px rgba(221, 180, 94, 0.4); }
}
.shelf-photo.just-added { animation: 1.6s ease 0.15s shelf-glow 2; }

.shelf-photo img {
  display: block;
  width: 6.4rem;
  height: 8.55rem;   /* пропорция 3:4 */
  object-fit: cover;
  -webkit-user-drag: none;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.shelf-photo:hover img { transform: scale(1.05); }
.shelf-photo:active img { transform: scale(0.97); }
.shelf-photo:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }

/* стрелки полки */
.shelf-nav {
  position: absolute;
  top: calc(50% + 0.1rem);
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid rgba(221, 180, 94, 0.4);
  border-radius: 9999px;
  background: rgba(10, 8, 6, 0.78);
  color: var(--champagne-85);
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.shelf-prev { left: 0.5rem; }
.shelf-next { right: 0.5rem; }
.shelf-nav svg { width: 0.9rem; height: 0.9rem; }
.shelf-nav:hover {
  border-color: var(--gold);
  background: rgba(221, 180, 94, 0.14);
  color: var(--gold-light);
}
.shelf-nav:active { transform: translateY(-50%) scale(0.9); }
.shelf-nav:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }

.wardrobe-note {
  display: none;   /* подсказка нужна только на тач-экранах */
  margin-top: 1.75rem;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(168, 157, 138, 0.55);
  user-select: none;
}

/* ---------- Полноэкранный просмотр вещи ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: rgba(5, 4, 3, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }

.lightbox-top {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
}

.lightbox-counter {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--champagne-75);
}

.lightbox-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.lightbox-close,
.lightbox-del,
.lightbox-share,
.lightbox-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(221, 180, 94, 0.4);
  border-radius: 9999px;
  background: transparent;
  color: var(--champagne-85);
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
.lightbox-close svg,
.lightbox-del svg,
.lightbox-share svg,
.lightbox-edit svg { width: 1rem; height: 1rem; }
.lightbox-close:hover,
.lightbox-share:hover,
.lightbox-edit:hover {
  border-color: var(--gold);
  background: rgba(221, 180, 94, 0.12);
  color: var(--gold-light);
}
.lightbox-del:hover {
  border-color: rgba(201, 90, 78, 0.9);
  background: rgba(201, 90, 78, 0.14);
  color: #dc9d92;
}
.lightbox-close:active,
.lightbox-del:active,
.lightbox-share:active,
.lightbox-edit:active { transform: scale(0.92); }
.lightbox-close:focus-visible,
.lightbox-del:focus-visible,
.lightbox-share:focus-visible,
.lightbox-edit:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }
.lightbox-del[hidden],
.lightbox-share[hidden],
.lightbox-edit[hidden] { display: none; }

.lightbox-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  touch-action: none;   /* жест целиком наш: и свайп, и тап-закрытие */
}

.lightbox-track {
  display: flex;
  height: 100%;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.lightbox-track.dragging { transition: none; }

.lightbox-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem 1.5rem;
}

.lightbox-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.85);
  -webkit-user-drag: none;
  user-select: none;
  animation: 0.35s cubic-bezier(0.22, 1, 0.36, 1) both photo-in;
}

@keyframes photo-in {
  0% { opacity: 0; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(221, 180, 94, 0.4);
  border-radius: 9999px;
  background: rgba(10, 8, 6, 0.6);
  color: var(--champagne-85);
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.lightbox-nav.prev { left: 0.9rem; }
.lightbox-nav.next { right: 0.9rem; }
.lightbox-nav svg { width: 1rem; height: 1rem; }
.lightbox-nav:hover {
  border-color: var(--gold);
  background: rgba(221, 180, 94, 0.14);
  color: var(--gold-light);
}
.lightbox-nav:active { transform: translateY(-50%) scale(0.9); }
.lightbox-nav:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }

@media (max-width: 30rem) {
  .lightbox-nav { width: 2rem; height: 2rem; }
  .lightbox-nav.prev { left: 0.5rem; }
  .lightbox-nav.next { right: 0.5rem; }
}

/* ============================================================
   «ДОБАВИТЬ ВЕЩЬ» — модалка своего гардероба
   ============================================================ */
.add-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
  background: rgba(5, 4, 3, 0.82);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.add-modal.open { opacity: 1; visibility: visible; }

.add-panel {
  width: 100%;
  max-width: 23rem;
  max-height: calc(100vh - 3rem);
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background-image: var(--gradient-panel);
  border: 1px solid rgba(221, 180, 94, 0.32);
  border-radius: 0.85rem;
  box-shadow: var(--shadow-gold);
  padding: 1.35rem 1.35rem 1.45rem;
  transform: translateY(14px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.add-modal.open .add-panel { transform: none; }

.add-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.add-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--champagne);
}

.add-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(221, 180, 94, 0.4);
  border-radius: 9999px;
  background: transparent;
  color: var(--champagne-85);
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
.add-close svg { width: 0.95rem; height: 0.95rem; }
.add-close:hover {
  border-color: var(--gold);
  background: rgba(221, 180, 94, 0.12);
  color: var(--gold-light);
}
.add-close:active { transform: scale(0.92); }
.add-close:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }

.add-hint {
  margin-bottom: 0.65rem;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(168, 157, 138, 0.8);
}

.add-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.15rem;
}

.add-cat {
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(221, 180, 94, 0.28);
  border-radius: 9999px;
  background: transparent;
  color: var(--champagne-75);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.add-cat:hover {
  border-color: rgba(221, 180, 94, 0.6);
  color: var(--champagne);
}
.add-cat.sel {
  border-color: var(--gold);
  background: rgba(221, 180, 94, 0.15);
  color: var(--gold-light);
}
.add-cat:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }

.add-drop {
  position: relative;
  height: 10.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px dashed rgba(221, 180, 94, 0.4);
  border-radius: 0.65rem;
  overflow: hidden;
  background: rgba(13, 11, 8, 0.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.add-drop:hover,
.add-drop.dragover {
  border-color: var(--gold);
  background: rgba(221, 180, 94, 0.07);
}
.add-drop:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 3px; }

.add-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}
.add-drop-inner svg { width: 1.5rem; height: 1.5rem; color: var(--gold); }
.add-drop-text {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne-75);
}
.add-drop-sub {
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(168, 157, 138, 0.6);
}
.add-drop.has-photo .add-drop-inner { display: none; }

.add-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0.55rem;
  object-fit: contain;
  background: #0d0b08;
}

.add-foot {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.3rem;
}

.add-cancel,
.add-save {
  flex: 1;
  padding: 0.8rem 0.5rem;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
.add-cancel {
  border: 1px solid rgba(221, 180, 94, 0.25);
  background: transparent;
  color: var(--champagne-75);
}
.add-cancel:hover {
  border-color: rgba(221, 180, 94, 0.55);
  color: var(--champagne);
}
.add-save {
  border: 1px solid rgba(221, 180, 94, 0.55);
  background: rgba(221, 180, 94, 0.1);
  color: var(--gold-light);
}
.add-save:hover:enabled {
  border-color: var(--gold);
  background: rgba(221, 180, 94, 0.18);
}
.add-save:disabled {
  opacity: 0.4;
  cursor: default;
}
.add-cancel:active,
.add-save:active:enabled { transform: scale(0.97); }
.add-cancel:focus-visible,
.add-save:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }

/* ---------- «РЕДАКТИРОВАТЬ ВЕЩЬ»: фото, описание Миы, размер ---------- */
.edit-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9.5rem;
  margin-bottom: 0.9rem;
  border: 1px solid rgba(221, 180, 94, 0.22);
  border-radius: 0.65rem;
  background: rgba(13, 11, 8, 0.55);
  overflow: hidden;
}
.edit-photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.edit-desc {
  margin: 0 0 1.05rem;
  font-size: 0.78rem;
  line-height: 1.5;
  font-style: italic;
  color: rgba(196, 184, 161, 0.85);
}
.edit-desc[hidden] { display: none; }

.edit-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
}

.edit-size-input {
  width: 100%;
  padding: 0.65rem 0.95rem;
  border: 1px solid rgba(221, 180, 94, 0.28);
  border-radius: 9999px;
  background: rgba(13, 11, 8, 0.55);
  color: var(--champagne);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.edit-size-input:focus {
  border-color: var(--gold);
  background: rgba(221, 180, 94, 0.07);
}
.edit-size-input::placeholder { color: rgba(168, 157, 138, 0.55); }

/* ---------- «УДАЛИТЬ ВЕЩЬ?» — подтверждение ---------- */
.confirm-title {
  margin-bottom: 0.7rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--champagne);
}
.confirm-text {
  margin-bottom: 1.25rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(196, 184, 161, 0.9);
}
.confirm-yes {
  flex: 1;
  padding: 0.8rem 0.5rem;
  border: 1px solid rgba(201, 90, 78, 0.55);
  border-radius: 9999px;
  background: rgba(201, 90, 78, 0.12);
  color: #e5a49a;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.15s ease;
}
.confirm-yes:hover {
  border-color: rgba(201, 90, 78, 0.9);
  background: rgba(201, 90, 78, 0.2);
  color: #efbdb4;
}
.confirm-yes:active { transform: scale(0.97); }
.confirm-yes:focus-visible { outline: 1px solid rgba(201, 90, 78, 0.8); outline-offset: 2px; }

/* тост-уведомление */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 10px);
  z-index: 400;
  max-width: min(84vw, 26rem);
  padding: 0.72rem 1.25rem;
  border-radius: 9999px;
  border: 1px solid rgba(221, 180, 94, 0.45);
  background: rgba(14, 11, 8, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--champagne);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.app-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ---------- Капсулы ---------- */
.capsules-inner {
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 2.75rem;
}

.capsules-head {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;   /* на узких экранах кнопка и заголовок — в две строки */
  gap: 0.7rem;
  padding: 0.5rem 0 1.5rem;
}

/* Кнопка «Назад» в шапке капсул: возврат в шкаф; стрелка —
   шеврон влево, при наведении отъезжает к краю */
.capsules-back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.62rem 1.45rem;
  border: 1px solid rgba(221, 180, 94, 0.45);
  border-radius: 9999px;
  background: rgba(221, 180, 94, 0.07);
  color: var(--champagne);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease,
    transform 0.15s ease, box-shadow 0.25s ease;
}
.capsules-back svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--gold);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.capsules-back:hover {
  border-color: var(--gold);
  background: rgba(221, 180, 94, 0.14);
  color: var(--gold-light);
  box-shadow: 0 8px 30px -12px rgba(221, 180, 94, 0.45);
}
.capsules-back:hover svg { transform: translateX(-0.2rem); }
.capsules-back:active { transform: scale(0.96); }
.capsules-back:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }

.capsules-view.shown .capsules-back {
  animation: 0.7s cubic-bezier(0.22, 1, 0.36, 1) both fade-up;
}

.capsules-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  color: var(--champagne);
}

.capsules-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.capsule-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(221, 180, 94, 0.16);
  border-radius: 0.75rem;
  background: rgba(18, 15, 12, 0.55);
}

/* каскадное появление карточек при первом показе капсул */
.capsules-view.shown .capsule-card {
  animation: 0.7s cubic-bezier(0.22, 1, 0.36, 1) both fade-up;
}
.capsules-view.shown .capsule-card:nth-child(2) { animation-delay: 70ms; }
.capsules-view.shown .capsule-card:nth-child(3) { animation-delay: 140ms; }
.capsules-view.shown .capsule-card:nth-child(4) { animation-delay: 210ms; }

.capsule-photo {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid rgba(221, 180, 94, 0.14);
}
.capsule-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.capsule-card:hover .capsule-photo img { transform: scale(1.04); }

.capsule-info {
  padding: 0.95rem 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.capsule-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  color: var(--champagne);
}

.capsule-meta {
  margin-top: 0.25rem;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}

.capsule-items {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.capsule-item {
  border: 1px solid rgba(221, 180, 94, 0.22);
  border-radius: 9999px;
  padding: 0.28rem 0.62rem;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.capsule-ask {
  margin-top: 0.9rem;
  border: 1px solid rgba(221, 180, 94, 0.35);
  border-radius: 9999px;
  background: transparent;
  color: var(--champagne-85);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.45rem 0.95rem;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
.capsule-ask:hover {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(221, 180, 94, 0.08);
}
.capsule-ask:active { transform: scale(0.95); }
.capsule-ask:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }

.capsules-note {
  display: none;   /* подсказка нужна только на тач-экранах */
  margin-top: 1.75rem;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(168, 157, 138, 0.55);
  user-select: none;
}

/* ---------- Окно «Примерочная» ----------
   Пока — изящное пустое состояние с двумя маршрутами:
   открыть шкаф или попросить Миу собрать образ */
.fitting-inner {
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 2.75rem;
}

.fitting-head {
  text-align: center;
  padding: 0.5rem 0 1.5rem;
}

.fitting-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  color: var(--champagne);
}

.fitting-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 17rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 1px solid rgba(221, 180, 94, 0.16);
  border-radius: 0.75rem;
  background: rgba(18, 15, 12, 0.55);
}

.fitting-gem {
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background-image: var(--gradient-gold);
  box-shadow: 0 0 14px rgba(221, 180, 94, 0.6);
  margin-bottom: 0.5rem;
}

.fitting-empty-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  color: var(--champagne);
}

.fitting-empty-sub {
  max-width: 26rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.fitting-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.1rem;
}

.fitting-cta {
  padding: 0.68rem 1.5rem;
  border: 1px solid rgba(221, 180, 94, 0.42);
  border-radius: 9999px;
  background: transparent;
  color: var(--champagne-85);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease,
    box-shadow 0.25s ease, transform 0.15s ease;
}
.fitting-cta:hover {
  border-color: var(--gold);
  background: rgba(221, 180, 94, 0.1);
  color: var(--gold-light);
}
.fitting-cta:active { transform: scale(0.96); }
.fitting-cta:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }
.fitting-cta--gold {
  border-color: rgba(221, 180, 94, 0.75);
  background: rgba(221, 180, 94, 0.12);
  color: var(--gold-light);
}
.fitting-cta--gold:hover { background: rgba(221, 180, 94, 0.18); }

.fitting-note {
  display: none;   /* подсказка нужна только на тач-экранах */
  margin-top: 1.75rem;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(168, 157, 138, 0.55);
  user-select: none;
}

/* каскадное появление при первом показе примерочной */
.fitting-view.shown .fitting-empty {
  animation: 0.7s cubic-bezier(0.22, 1, 0.36, 1) both fade-up;
}

/* ============================================================
   ПРИМЕРОЧНАЯ — РАЗДЕЛ «ОБРАЗЫ»
   Карточки образов, собранных Мией в чате «Создать образ»:
   лента фотографий вещей и кнопка «В одну картинку»
   ============================================================ */
.fitting-looks {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.fitting-looks[hidden] { display: none; }

/* когда образы есть — пустое состояние уступает место разделу */
.fitting-view.has-looks .fitting-empty { display: none; }

.fitting-looks-head {
  text-align: center;
  padding: 0.25rem 0 0.1rem;
}

.fitting-looks-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--champagne);
}

.fitting-looks-sub {
  margin-top: 0.35rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.fitting-flat-row {
  display: flex;
  justify-content: center;
  padding-bottom: 0.35rem;
}

/* ---------- Карточка образа ---------- */
.look-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.15rem 1.1rem 1.05rem;
  border: 1px solid rgba(221, 180, 94, 0.16);
  border-radius: 0.85rem;
  background: rgba(18, 15, 12, 0.55);
}

.look-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}

.look-card-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.25;
  color: var(--champagne);
}

.look-card-meta {
  flex: none;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.look-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.look-thumb {
  position: relative;
  width: 4.9rem;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.look-thumb img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0.4rem;
  border: 1px solid rgba(221, 180, 94, 0.3);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.look-thumb:hover img {
  border-color: var(--gold);
  box-shadow: 0 10px 30px -12px rgba(221, 180, 94, 0.4);
}
.look-thumb:active img { transform: scale(0.96); }
.look-thumb:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }

/* золотая точка — в образ вплетена ваша вещь */
.look-thumb[data-user]::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background-image: var(--gradient-gold);
  box-shadow: 0 0 8px rgba(221, 180, 94, 0.8);
}

.look-card-actions {
  display: flex;
}

.look-flat {
  padding: 0.55rem 1.2rem;
  border: 1px solid rgba(221, 180, 94, 0.42);
  border-radius: 9999px;
  background: transparent;
  color: var(--champagne-85);
  font-family: var(--font-sans);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease,
    transform 0.15s ease, box-shadow 0.25s ease;
}
.look-flat:hover {
  border-color: var(--gold);
  background: rgba(221, 180, 94, 0.12);
  color: var(--gold-light);
  box-shadow: 0 8px 30px -12px rgba(221, 180, 94, 0.45);
}
.look-flat:active { transform: scale(0.96); }
.look-flat:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }

/* каскад карточек при первом показе примерочной */
.fitting-view.shown .fitting-looks-head,
.fitting-view.shown .fitting-flat-row,
.fitting-view.shown .look-card {
  animation: 0.7s cubic-bezier(0.22, 1, 0.36, 1) both fade-up;
}
.fitting-view.shown .look-card:nth-of-type(2) { animation-delay: 0.07s; }
.fitting-view.shown .look-card:nth-of-type(3) { animation-delay: 0.14s; }
.fitting-view.shown .look-card:nth-of-type(4) { animation-delay: 0.21s; }

/* ============================================================
   ПРОСМОТР «ОДНОЙ КАРТИНКИ» — все вещи образа на одном
   холсте: лоадер-самоцвет, картинка, кнопка «Сохранить»
   ============================================================ */
.flat-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  flex-direction: column;
  background: rgba(5, 4, 3, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.flat-overlay.open { opacity: 1; visibility: visible; }

.flat-top {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
}

.flat-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--champagne-75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flat-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}

.flat-save {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(221, 180, 94, 0.55);
  border-radius: 9999px;
  background: rgba(221, 180, 94, 0.12);
  color: var(--gold-light);
  font-family: var(--font-sans);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.15s ease;
}
.flat-save svg { width: 0.9rem; height: 0.9rem; }
.flat-save:hover {
  border-color: var(--gold);
  background: rgba(221, 180, 94, 0.2);
}
.flat-save:active { transform: scale(0.95); }
.flat-save:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }
.flat-save[hidden] { display: none; }

.flat-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(221, 180, 94, 0.4);
  border-radius: 9999px;
  background: transparent;
  color: var(--champagne-85);
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
.flat-close svg { width: 1rem; height: 1rem; }
.flat-close:hover {
  border-color: var(--gold);
  background: rgba(221, 180, 94, 0.12);
  color: var(--gold-light);
}
.flat-close:active { transform: scale(0.92); }
.flat-close:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }

.flat-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(221, 180, 94, 0.3) transparent;
  padding: 0 1rem 1.5rem;
}
.flat-stage::-webkit-scrollbar { width: 4px; }
.flat-stage::-webkit-scrollbar-track { background: transparent; }
.flat-stage::-webkit-scrollbar-thumb {
  background: rgba(221, 180, 94, 0.25);
  border-radius: 9999px;
}

/* margin:auto центрирует и не срезает верх длинной картинки */
.flat-image {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.85);
  -webkit-user-drag: none;
  user-select: none;
  animation: 0.35s cubic-bezier(0.22, 1, 0.36, 1) both photo-in;
}
/* длинный коллаж — на всю ширину, листаем сверху вниз */
.flat-image.tall {
  max-height: none;
  height: auto;
  width: 100%;
  max-width: 40rem;
}

.flat-loader {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  text-align: center;
  padding: 1.5rem;
}
.flat-overlay.loading .flat-loader { display: flex; }
.flat-overlay.loading .flat-image { display: none; }

.flat-gem {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background-image: var(--gradient-gold);
  box-shadow: 0 0 16px rgba(221, 180, 94, 0.6);
  animation: 1.6s ease-in-out infinite flat-gem-pulse;
}

@keyframes flat-gem-pulse {
  0%, 100% { opacity: 0.55; transform: rotate(45deg) scale(0.85); }
  50% { opacity: 1; transform: rotate(45deg) scale(1.12); }
}

.flat-loader-text {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* ============================================================
   Окно «Создать образ» — отдельный чат со стилистом:
   своя лента сообщений, поле ввода и пустое состояние
   с чипами-поводами; ответы сопровождаются галереей
   фотографий вещей из шкафа
   ============================================================ */
.create-view {
  display: flex;
  flex-direction: column;
}

/* каскадное появление при первом показе */
.create-view.shown .create-empty {
  animation: 0.7s cubic-bezier(0.22, 1, 0.36, 1) both fade-up;
}

/* Пустое состояние чата «Создать образ» — независимо от
   основного чата: прячется, когда появилась своя переписка */
.create-empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem;
  text-align: center;
  pointer-events: none;
}

.create-view.has-messages .create-empty { display: none; }

.create-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  pointer-events: auto;
}

.create-chip {
  padding: 0.5rem 1.05rem;
  border: 1px solid rgba(221, 180, 94, 0.35);
  border-radius: 9999px;
  background: rgba(221, 180, 94, 0.05);
  color: var(--champagne-85);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease,
    transform 0.15s ease;
}
.create-chip:hover {
  border-color: var(--gold);
  background: rgba(221, 180, 94, 0.12);
  color: var(--gold-light);
}
.create-chip:active { transform: scale(0.95); }
.create-chip:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }

/* ---------- Галерея вещей под ответом стилиста ---------- */
.look-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.95rem;
}

.look-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 4.7rem;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  animation: 0.5s cubic-bezier(0.22, 1, 0.36, 1) both fade-up;
}
.look-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0.45rem;
  border: 1px solid rgba(221, 180, 94, 0.3);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.look-photo:hover img {
  border-color: var(--gold);
  box-shadow: 0 10px 30px -12px rgba(221, 180, 94, 0.4);
}
.look-photo:active img { transform: scale(0.96); }
.look-photo:focus-visible { outline: 1px solid rgba(221, 180, 94, 0.7); outline-offset: 2px; }

.look-photo-name {
  font-size: 0.58rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--muted-foreground);
}

/* золотая точка — ваша вещь вплетена в образ */
.look-photo[data-user]::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background-image: var(--gradient-gold);
  box-shadow: 0 0 8px rgba(221, 180, 94, 0.8);
}

/* ---------- Пустое состояние: самоцвет и подписи ----------
   (используются внутри пустых состояний окон) */
.chat-empty-gem {
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background-image: var(--gradient-gold);
  box-shadow: 0 0 14px rgba(221, 180, 94, 0.6);
  margin-bottom: 0.5rem;
}

.chat-empty-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  color: var(--champagne);
}

.chat-empty-sub {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
}

/* ---------- Лента сообщений ---------- */
.chat-body {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(221, 180, 94, 0.3) transparent;
}
.chat-body::-webkit-scrollbar { width: 4px; }
.chat-body::-webkit-scrollbar-track { background: transparent; }
.chat-body::-webkit-scrollbar-thumb {
  background: rgba(221, 180, 94, 0.25);
  border-radius: 9999px;
}
.chat-body::-webkit-scrollbar-thumb:hover { background: rgba(221, 180, 94, 0.45); }

.chat-messages {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 1.75rem 1.25rem;
}

/* ---------- Строки и пузыри сообщений ---------- */
.msg-row {
  display: flex;
  animation: msg-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.msg-row.no-anim { animation: none; }
.msg-row.user { justify-content: flex-end; }
.msg-row.assistant { justify-content: flex-start; }

.msg {
  padding: 0.625rem 0.875rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.msg.user {
  max-width: 85%;
  background: var(--chat-user);
  color: var(--chat-user-foreground);
  border: 1px solid rgba(221, 180, 94, 0.35);
  border-radius: 0.9rem 0.9rem 0.25rem 0.9rem;
}

/* Ответ стилиста — просто текст во всю ширину окна:
   без рамки, без фона, без иконки */
.msg.assistant {
  flex: 1 1 auto;
  max-width: 100%;
  padding: 0;
  color: var(--champagne);
}

/* Разметка внутри ответов стилиста */
.msg.assistant p { margin-bottom: 0.5rem; }
.msg.assistant p:last-child { margin-bottom: 0; }
.msg.assistant strong { color: var(--gold-light); font-weight: 500; }
.msg.assistant em { color: var(--gold-light); }
.msg.assistant ul {
  margin: 0.375rem 0 0.5rem 0;
  padding-left: 0;
  list-style: none;
}
.msg.assistant ul li {
  padding-left: 1rem;
  position: relative;
  margin-bottom: 0.3rem;
}
.msg.assistant ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* ---------- Индикатор набора ---------- */
.typing-row { animation: none; }

.typing-bubble {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 0.5rem 0;
}
.typing-bubble span {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--gold);
  animation: typing-dot 1.2s ease-in-out infinite;
}
.typing-bubble span:nth-child(2) { animation-delay: 0.15s; }
.typing-bubble span:nth-child(3) { animation-delay: 0.3s; }
.typing-bubble span.typing-label {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  animation: none;
  margin-right: 8px;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--gold);
}

/* ---------- Поле ввода ---------- */
.chat-composer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: rgba(10, 8, 6, 0.5);
  padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom, 0px)) 1rem;
}

.composer-wrap {
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  border: 1px solid rgba(221, 180, 94, 0.32);
  border-radius: 0.75rem;
  background: rgba(10, 8, 6, 0.6);
  padding: 0.375rem 0.375rem 0.375rem 0.875rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.composer:focus-within {
  border-color: rgba(221, 180, 94, 0.6);
  box-shadow: 0 0 0 1px rgba(221, 180, 94, 0.28), 0 0 30px -10px rgba(221, 180, 94, 0.25);
}

#create-input {
  flex: 1;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0.5rem 0;
  min-height: 1.5rem;
  max-height: 8rem;
}
#create-input::placeholder { color: rgba(168, 157, 138, 0.7); }

.composer-send {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  border: 0;
  border-radius: 9999px;
  background-image: var(--gradient-gold);
  background-size: 200%;
  color: var(--primary-foreground);
  transition: opacity 0.2s ease, transform 0.15s ease, background-position 0.6s ease;
}
.composer-send svg { width: 0.9rem; height: 0.9rem; }
.composer-send:hover:not(:disabled) {
  opacity: 0.9;
  background-position: 100%;
  transform: translateY(-1px);
}
.composer-send:active:not(:disabled) { transform: scale(0.94); }
.composer-send:disabled { opacity: 0.45; cursor: not-allowed; }

.composer-hint {
  margin-top: 0.375rem;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: rgba(168, 157, 138, 0.6);
  user-select: none;
}

/* Всем окнам ателье разрешена только вертикальная прокрутка:
   горизонталь отдана свайпу между окнами, зум-жесты
   отключены и здесь */
.chat-body,
#create-input {
  touch-action: pan-y;
}

/* ============================================================
   SPARKS — слой золотых искр (над чатом: вспышка открытия
   видна поверх fading-окна; внутри чата искры отключены в JS)
   ============================================================ */
.sparks {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}

/* ============================================================
   MODAL (Войти)
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(5, 4, 3, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: msg-in 0.3s ease both;
}

.modal-card {
  width: 100%;
  max-width: 24rem;
  background-image: var(--gradient-panel);
  border: 1px solid rgba(221, 180, 94, 0.35);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-gold);
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
}

.modal-card img {
  height: 3.5rem;
  width: 3.5rem;
  margin: 0 auto 1rem auto;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--champagne);
}

.modal-text {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.modal-close {
  margin-top: 1.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(221, 180, 94, 0.4);
  background: transparent;
  color: var(--champagne-85);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.625rem 1.5rem;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.modal-close:hover {
  border-color: var(--gold);
  background: rgba(221, 180, 94, 0.1);
  color: var(--gold-light);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 48rem) {
  .hero-nav { padding: 1.5rem 2.5rem; }
  .hero-hint { bottom: 2rem; }

  .chat-topbar { padding: 0 2rem; }
  .chat-close { right: 2rem; }
  .chat-messages { gap: 1.125rem; padding: 1.75rem 2rem 2rem 2rem; }
  .chat-composer { padding: 1rem 2rem calc(1rem + env(safe-area-inset-bottom, 0px)) 2rem; }

  .wardrobe-inner { padding: 2.25rem 2rem 3rem; }
  .wardrobe-shelves { gap: 1.25rem; }
  .shelf-photo img { width: 7.2rem; height: 9.6rem; }

  .capsules-inner { padding: 2.25rem 2rem 3rem; }
  .capsules-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

  .fitting-inner { padding: 2.25rem 2rem 3rem; }
  .fitting-empty { min-height: 20rem; }

  .fitting-looks { gap: 1.35rem; }
  .look-card { padding: 1.35rem 1.3rem 1.25rem; }
  .look-strip { gap: 0.65rem; }
  .look-thumb { width: 5.4rem; }

  .look-photos { gap: 0.65rem; }
  .look-photo { width: 5.4rem; }

  .msg { font-size: 0.95rem; }
  .msg.user { max-width: 70%; }
}

@media (pointer: coarse) {
  /* 16px — iOS Safari не приближает страницу при фокусе в поле */
  #create-input { font-size: 1rem; }

  /* подсказка про свайп — только там, где есть палец */
  .wardrobe-note { display: block; }
  .capsules-note { display: block; }
  .fitting-note { display: block; }
}

@media (max-width: 26rem) {
  .wardrobe-shelves { gap: 0.85rem; }
  .shelf-track { gap: 0.5rem; padding: 0 0.85rem; }
  .shelf-photo img { width: 5.6rem; height: 7.5rem; }
  .capsules-grid { gap: 0.9rem; }

  .fitting-empty { min-height: 14rem; padding: 1.75rem 1rem; }

  .fitting-looks { gap: 0.95rem; }
  .look-card { padding: 0.95rem 0.9rem 0.9rem; gap: 0.75rem; }
  .look-card-title { font-size: 0.98rem; }
  .look-card-meta { font-size: 0.52rem; letter-spacing: 0.1em; }
  .look-strip { gap: 0.45rem; }
  .look-thumb { width: 4.05rem; }

  .flat-caption { font-size: 0.82rem; }
  .flat-save { padding: 0.45rem 0.9rem; font-size: 0.56rem; }

  .look-photos { gap: 0.45rem; }
  .look-photo { width: 4.05rem; }
  .look-photo-name { font-size: 0.54rem; }

  .add-modal { padding: 0.9rem; }
  .add-panel { padding: 1.15rem 1.05rem 1.25rem; }
  .add-drop { height: 9rem; }
  .add-cat { padding: 0.45rem 0.7rem; }
  .edit-photo { height: 8rem; }
  .edit-desc { margin-bottom: 0.9rem; }
}