/* ============================================================
   MOBILE ADAPTATION LAYER  (mobile-adapt.css)
   ------------------------------------------------------------
   Подключается в app.blade.php ПОСЛЕ @vite, статически из /public.
   НЕ требует пересборки проекта.

   ЖЕЛЕЗНОЕ ПРАВИЛО: все правила — ТОЛЬКО внутри @media (max-width…).
   ПК-версия (>=1024px) не затрагивается ни одним селектором.

   Брейкпоинты проекта (Tailwind):
     < 640px  — телефоны
     640–1023 — планшеты
     >=1024   — ПК (НЕ ТРОГАЕМ)

   Версия слоя: v1 (базовый безопасный слой). Дата: 2026-09-08.
   ============================================================ */

/* ---------- Телефоны: < 640px ---------- */
@media (max-width: 639px) {

  /* Убираем случайный горизонтальный скролл, но НЕ через глобальный '*'
     (это ломало вёрстку раньше). Ограничиваем только корневые контейнеры. */
  html,
  body,
  #app {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Медиа не должны выпирать за экран.
     ВАЖНО: не задаём height:auto — селектор #app img по специфичности
     перебивает Tailwind-классы высоты (напр. h-[46px] у логотипа) и ломает
     картинки/иконки с заданной высотой. Ограничиваем только ширину. */
  #app img,
  #app video,
  #app canvas {
    max-width: 100%;
  }

  /* Широкие таблицы — горизонтальная прокрутка внутри своей обёртки,
     а не растягивание всей страницы */
  #app table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Длинные строки кода/URL не рвут макет */
  #app pre,
  #app code {
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* ----- Шлифовка по страницам (корень страниц: .container.mx-auto) ----- */

  /* Длинные слова (username, ID, названия чатов) не выталкивают ширину */
  .container.mx-auto :where(h1, h2, h3, p, span, a) {
    overflow-wrap: break-word;
  }

  /* Ряды кнопок-действий (flex-nowrap) могут сжиматься, а не переполняться */
  .container.mx-auto .flex.flex-nowrap > button {
    min-width: 0;
  }

  /* Чуть плотнее боковые отступы страниц на узких экранах */
  .container.mx-auto {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Убираем большой пустой отступ между плавающей кнопкой меню (☰)
     и заголовком страницы. Резерв под кнопку даёт pt-16 у <main>,
     поэтому верхний padding самого контейнера на мобильном не нужен. */
  .container.mx-auto {
    padding-top: 0.25rem;
  }

  /* Сайдбар: убираем верхний и нижний padding у обёртки селектора бота
     (блок .flex.flex-col.p-3 с кнопкой .bot-selector-trigger). */
  .flex.flex-col.p-3:has(.bot-selector-trigger) {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* ----- Drawer в стиле PrimeVue (без пересборки, поверх сборки) -----
     Нацелено на существующие элементы: фон-затемнение и панель сайдбара.
     Всё в @media <640px — ПК не затрагивается. */

  /* Скрим: тёмный фон + лёгкое размытие вместо плоского bg-opacity-50 */
  .fixed.inset-0.bg-black.bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* Панель: плавающая тень, скруглённый правый край, мягкий выезд */
  .sidebar-container {
    border-right: none !important;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.28), 4px 0 16px rgba(0, 0, 0, 0.18);
    transition: left 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  /* ----- Модалка «Добавить кнопку»: уже боковые поля панели на телефоне -----
     Только padding-left/right -> 0.5rem. Вертикальные поля (p-6/p-5) остаются.
     Открывается из сценариев (rounded-3xl max-w-lg p-6) и из магазина
     (rounded-lg max-h-[90vh] overflow-y-auto p-5). Селекторы по классам панели,
     специфичность перебивает утилиты — без !important. */
  .rounded-3xl.max-w-lg.p-6,
  .rounded-lg.overflow-y-auto.p-5 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  /* ----- Плейсхолдер «Выберите сообщение для редактирования» -----
     На телефоне прячем: правая колонка-заглушка редактора сценариев зря
     занимает экран. Комбинация классов матчит ровно 2 таких блока
     (OutputMessageScenarios и EditorScenarios), ничего лишнего. */
  .flex-1.max-w-2xl.rounded-2xl.shadow-md {
    display: none;
  }
  /* ----- Модалка «Добавить кнопку»: стабильный размер + блок прокрутки фона -----
     Панели: .rounded-3xl.max-w-lg.p-6 (сценарии), .rounded-lg.overflow-y-auto.p-5 (магазин). */

  /* Оверлей (родитель панели): прижать окно к верху, не центрировать; сам
     оверлей скроллится, чтобы у высоких типов (Приём платежа) кнопки внизу
     оставались доступны. */
  .fixed.inset-0:has(> .rounded-3xl.max-w-lg.p-6),
  .fixed.inset-0:has(> .rounded-lg.overflow-y-auto.p-5) {
    align-items: flex-start;
    overflow-y: auto;
  }

  /* Ширина панели фиксирована (не зависит от контента) — окно не меняет размер
     по горизонтали при переключении типа кнопки. */
  .rounded-3xl.max-w-lg.p-6,
  .rounded-lg.overflow-y-auto.p-5 {
    width: 100%;
  }

  /* Пока модалка открыта — запретить прокрутку страницы под ней. */
  body:has(.rounded-3xl.max-w-lg.p-6),
  body:has(.rounded-lg.overflow-y-auto.p-5) {
    overflow: hidden;
  }
  /* ----- Модалка «Добавить кнопку»: опустить ниже + иконка ☰ на задний план -----
     Оверлей уже прижат к верху (align-items:flex-start). Добавляем отступ
     сверху, чтобы окно не липло к краю. */
  .fixed.inset-0:has(> .rounded-3xl.max-w-lg.p-6),
  .fixed.inset-0:has(> .rounded-lg.overflow-y-auto.p-5) {
    padding-top: 5rem;
  }

  /* Плавающая кнопка вызова сайдбара (fixed top-4 left-4 z-50) перекрывает
     модалку (оверлей сценариев z-40). Пока модалка открыта — уводим её ПОД
     оверлей (на задний план). */
  body:has(.rounded-3xl.max-w-lg.p-6) .fixed.top-4.left-4,
  body:has(.rounded-lg.overflow-y-auto.p-5) .fixed.top-4.left-4 {
    z-index: 10;
  }
}