/* ────────────────────────────────────────────────
 * Mobile Search Sheet — Telegram-style bottom sheet
 *
 * Native <dialog> з 92dvh висоти, drag-to-dismiss, sticky search input
 * зверху, scrollable results body. Tap backdrop / ESC / drag down закриває.
 *
 * Активується тільки ≤48em (mobile). На desktop — display: none
 * (desktop пошук живе в header'і inline'ом).
 *
 * Pattern reference: Vaul (Emil Kowalski), Apple Maps search, Telegram.
 * iOS keyboard: visualViewport API → CSS custom property --kb-offset.
 * ──────────────────────────────────────────────── */

/* ═══ Trigger button (replaces inline form on mobile) ═══ */
.mobile-search-trigger {
  display: none;
}

@media (max-width: 48em) {
  /* Hide the inline form copy on mobile — we use the dialog version */
  .headerMobileSearchBar form.search-form {
    display: none;
  }

  .mobile-search-trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    height: 3rem;
    padding: 0 1rem;
    background: var(--color-bg-main);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    border-radius: 0;
  }

  .mobile-search-trigger svg {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-text-white);
  }

  .mobile-search-trigger:active {
    background: var(--overlay-light-05);
  }
}

/* ═══ Dialog (bottom sheet) ═══ */
.search-sheet {
  /* Reset native dialog styles */
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  /* Hidden by default — dialog[open] makes it visible */
  display: none;
}

.search-sheet[open] {
  display: grid;
  /* Row 1 — head (input bar, pin до верху viewport — 0px from top);
     Row 2 — gap (backdrop fills middle, tap-to-dismiss зона);
     Row 3 — panel (chips + results, pin до низу). */
  grid-template-rows: auto 1fr auto;
  z-index: 100003;
  /* overflow: hidden — критично, без цього дочірній panel може вилазити
     за межі dialog'а коли content (chip-row з 5+ чіпами) розширює його
     min-content і ламає всю layout-ширину sheet'а. */
  overflow: hidden;
}

/* ::backdrop — hard cut, як завіса опускається крана. 120ms linear
   замість 300ms ease-out (iOS-feel) — узгоджено з brand vocabulary
   (industrial machinery, instant transitions). */
.search-sheet::backdrop {
  background: rgba(36, 28, 26, 0.6);
  -webkit-backdrop-filter: blur(0.25rem);
  backdrop-filter: blur(0.25rem);
  animation: searchSheetBackdropIn 0.12s linear;
}

@keyframes searchSheetBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ═══ Head (input bar) — pinned до верху viewport ═══ */
.search-sheet__head {
  grid-row: 1;
  /* Defensive — flex children (form, close) не розпирають голову через min-content */
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  /* iOS notch / dynamic island — додаємо safe-area до padding-top */
  padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
}

/* ═══ Inner panel (chips + results) — pinned до низу ═══ */
.search-sheet__panel {
  grid-row: 3;
  /* width — заглушка проти shrink-to-fit в grid'і. Без цього панель може
     розширюватись по min-content свого вмісту (chip-row, dropdown). */
  width: 100%;
  min-width: 0;
  display: grid;
  /* handle / body — head вже зверху окремо, тут тільки drag + scrollable body */
  grid-template-rows: auto 1fr;
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-border);
  /* Висота: 80dvh — лишаємо ~3rem знизу для head'а зверху + 5dvh peek
     для backdrop tap-to-dismiss. Підбирається динамічно через JS на open. */
  max-height: 80dvh;
  height: 80dvh;
  /* Sharp decelerate — той самий curve що у showcase-conveyor (cubic-bezier(0.22,1,0.36,1)).
     Brand consistency: рух як зупинка масивної аграрної машини, не iOS popover. */
  transform: translateY(0);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  /* iOS safe-area керує bottom; head має власний padding */
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
}

.search-sheet__body {
  /* Same defensive: body може містити dropdown з широким контентом */
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Chip-row перенесений з form'и сюди — потрібен власний padding
   (раніше отримував від .search-sheet__head; тут body padding нуль). */
.search-sheet__body .ss-chip-row {
  padding-inline: 1rem;
  min-width: 0;
  max-width: 100%;
}

/* Hydraulic slam entrance — overshoot + settle, як гідравлічний прес.
   Multi-keyframe pattern узгоджений з ramImpact (line 2023 in index.css):
   удар → mini-rebound → стабілізація. */
.search-sheet[open] .search-sheet__panel {
  animation: searchSheetSlam 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes searchSheetSlam {
  0%   { transform: translateY(100%); }
  78%  { transform: translateY(-1.5%); }   /* overshoot — рідина в гідравліці */
  100% { transform: translateY(0); }
}

/* Під час drag — JS виставляє inline transform, відключаємо CSS animation */
.search-sheet--dragging .search-sheet__panel {
  transition: none;
  animation: none;
}

/* Закриття: різке падіння тиску — швидше за відкриття (200ms vs 280ms).
   Селектор з [open] обов'язковий — інакше специфічність нижча за
   .search-sheet[open] .search-sheet__panel і slam перебиває drop. */
.search-sheet[open].search-sheet--closing .search-sheet__panel {
  animation: searchSheetDrop 0.2s cubic-bezier(0.85, 0, 0.85, 1) forwards;
}

@keyframes searchSheetDrop {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

/* ═══ Drag handle (gold bar) ═══ */
.search-sheet__handle {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.5rem;
  cursor: grab;
  touch-action: none;
  /* Touch-target — handle area більша ніж візуальний bar */
  -webkit-tap-highlight-color: transparent;
}

.search-sheet__handle:active {
  cursor: grabbing;
}

.search-sheet__handle::before {
  content: '';
  display: block;
  width: 4rem;
  height: 0.25rem;
  background: var(--color-accent);
  opacity: 0.6;
}

/* ═══ Head (sticky search input) ═══ */
.search-sheet__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.search-sheet__head form.search-form {
  flex: 1;
  /* min-width: 0 — критично! Без цього flex item має min-width: auto
     і розширюється до min-content свого контенту (chip-row з 4+ чіпами
     розпирає form'у на 640px і ламає layout). */
  min-width: 0;
  position: relative;
  margin: 0;
  /* Override .search-form { display: flex; justify-content: flex-end } з index.css —
     у sheet'і нам треба щоб .input-group, .ss-chip-row, .ss-dropdown стекалися
     вертикально, а не лежали горизонтальним рядом. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}

.search-sheet__head .input-group {
  width: 100%;
  min-width: 0;
}

.search-sheet__head .ss-chip-row {
  /* Дозволяємо chip-row стиснутись до form-width і scroll'ити внутрішньо */
  min-width: 0;
  max-width: 100%;
}

.search-sheet__head .input-group {
  position: relative;
  display: flex;
  width: 100%;
}

.search-sheet__head input[type="search"] {
  flex: 1;
  width: 100%;
  height: 3rem;
  padding: 0.75rem 3.5rem 0.75rem 1rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg-main);
  color: var(--color-text-white);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  border-radius: 0;
  outline: 0;
  /* font-size ≥1rem — iOS не зумить input при focus */
}

.search-sheet__head input[type="search"]::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.search-sheet__head .search-form button[type="submit"] {
  position: absolute;
  right: 0;
  top: 0;
  width: 3rem;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.search-sheet__close {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 0;
}

.search-sheet__close:active {
  background: var(--overlay-light-10);
}

.search-sheet__close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ═══ Body (scrollable results) ═══ */
.search-sheet__body {
  overflow-y: auto;
  /* Prevent rubber-band scroll chain to dialog/page */
  overscroll-behavior: contain;
  /* iOS keyboard offset — JS sets --kb-offset px value */
  padding-bottom: calc(var(--kb-offset, 0px) + 1rem);
  -webkit-overflow-scrolling: touch;
}

/* ═══ Override .ss-dropdown коли воно всередині sheet ═══ */
/* smart-search.js рендерить .ss-dropdown в form. Усередині sheet
   нам не треба fixed-positioning (sheet вже бере цю роль) — навпаки,
   треба щоб dropdown став inline blocком і займав всю площу body. */
.search-sheet__body .ss-dropdown,
.search-sheet__body .live-search-dropdown {
  /* Reset all the mobile-bottom-sheet hacks из index.css */
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  max-height: none !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: auto !important;
  padding-top: 0 !important;
  margin: 0;
  animation: none !important;
}

/* Прибираємо drag handle котрий index.css додає до .ss-dropdown::before */
.search-sheet__body .ss-dropdown::before,
.search-sheet__body .live-search-dropdown::before {
  display: none !important;
}

/* Sticky search-form dropdown в sheet НЕ потрібен — form тримає тільки input,
   а сам ss-dropdown ми вручну рендеримо в body. smart-search.js робить
   form.appendChild(dropdown), тому переносимо через JS у body. */

/* ═══ Body lock коли sheet відкритий (доповнення до JS lock) ═══ */
body.search-sheet-open {
  /* JS виставить position: fixed; top: -scrollY; width: 100% */
  overflow: hidden;
}