/* ═══════════════════════════════════════════════════════════════
   mobile-v3.css — Мобильная адаптация LASTOP GROUP
   ═══════════════════════════════════════════════════════════════
   Версия: 3.0 (вторая попытка, начата 15.05.26)
   Killswitch: env MOBILE_V3_DISABLE=1 + restart lastop сервиса

   ПРАВИЛА:
   - Все правила обёрнуты в @media (max-width: XXXpx)
   - Top-level только для CSS-переменных и универсальных
     нормализаций (touch-action и т.п.)
   - Каждое правило снабжено комментарием с целью
   - Никаких !important без обоснования в комментарии

   См. также:
   - web/assets/mobile-injector.js — мобильная JS-логика
   - cmd/server/main.go renderHTMLInject() — точка подключения
   - Obsidian: 07 — Правила работы с Codex (раздел «📱»)
   - Obsidian: 23 — Дорожная карта мобильной адаптации
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   TOP-LEVEL: CSS-переменные и универсальные нормализации
   Допустимы по правилу И2 (см. Obsidian 07 раздел «📱»)
   ─────────────────────────────────────────────────────────────── */

:root {
  /* Fluid font-size: на узких экранах слегка меньше, на широких — обычный.
     clamp(min, preferred, max) — на 360px даст ~13px, на 640px ~14px. */
  --m-fs-sm: clamp(12.5px, 3.4vw, 14px);
  --m-fs-md: clamp(13.5px, 3.6vw, 15px);

  /* Высота будущего bottom-nav (используется на этапе 2+ для padding-bottom main). */
  --m-bn-height: 64px;

  /* Безопасная зона снизу (notch / home indicator на iPhone). */
  --m-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Универсальные нормализации для touch-устройств.
   Top-level допустимо: правила безопасны для десктопа
   (touch-action на не-touch устройствах = no-op,
   tap-highlight видим только на touch). */
button,
a,
[role="button"],
.nav-item,
.icon-btn,
.ftab {
  /* Убираем синюю подсветку при тапе на iOS Safari. И2: универсальная норма. */
  -webkit-tap-highlight-color: transparent;
  /* Убирает 300ms задержку double-tap zoom на старых iOS. */
  touch-action: manipulation;
}

/* ───────────────────────────────────────────────────────────────
   @media ≤640px — основная мобильная зона
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Чуть-чуть уменьшаем базовый шрифт чтобы текст не ломал layout
     на узких экранах. Не агрессивно — fluid через clamp. */
  html.lt-shell body,
  html.lt-shell-2col body {
    font-size: var(--m-fs-sm);
  }

  /* Главное переопределение grid: одна колонка, две строки.
     Прячем areas logo/nav/right — оставляем только topbar и main.
     specificity (0,2,1) перебивает все @media-зоны в shell-layout.css
     которые работают до ≤740, и top-level html.lt-shell .shell (0,2,1). */
  html.lt-shell .shell,
  html.lt-shell-2col .shell {
    grid-template-columns: 1fr;
    grid-template-rows: 56px 1fr;
    grid-template-areas:
      "topbar"
      "main";
    gap: 8px;
    padding: 8px;
  }

  /* Скрываем элементы которые не помещаются в мобильный layout.
     Логотип убираем — место занимает топбар.
     .nav скрываем — его заменит bottom-nav на этапе 2.
     .right уже скрыт с ≤1000 в shell-layout.css, дублируем для надёжности. */
  html.lt-shell .logo-cell,
  html.lt-shell-2col .logo-cell,
  html.lt-shell .nav,
  html.lt-shell-2col .nav,
  html.lt-shell .right,
  html.lt-shell-2col .right {
    display: none;
  }

  /* На мобиле main скроллится сам (на десктопе шеллом).
     Без этого контент уезжает за пределы viewport. */
  html.lt-shell .main,
  html.lt-shell-2col .main {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Topbar — единственный survivor сверху. Убедимся что он
     не пытается растянуть какие-то ячейки колонок. */
  html.lt-shell .topbar,
  html.lt-shell-2col .topbar {
    grid-template-columns: 1fr auto;
  }
}

/* ───────────────────────────────────────────────────────────────
   @media ≤375px — узкие устройства (iPhone SE и подобные)
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 375px) {

  /* Ещё компактнее padding shell. */
  html.lt-shell .shell,
  html.lt-shell-2col .shell {
    gap: 6px;
    padding: 6px;
  }
}

/* ───────────────────────────────────────────────────────────────
   Э2 — Bottom-nav и sheet-меню (только ≤640)
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Bottom-nav: фиксирован снизу, всегда поверх контента.
     z-index 100 — выше карточек, ниже модалок (модалки 200+). */
  .m-bn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    height: calc(var(--m-bn-height) + var(--m-safe-bottom));
    padding-bottom: var(--m-safe-bottom);
    background: var(--w, #fff);
    border-top: 1px solid var(--bdr, #DDE8E2);
    box-shadow: 0 -2px 12px rgba(30, 138, 76, 0.06);
  }

  /* Пункт bottom-nav: иконка сверху, подпись снизу.
     position:relative — нужно для абсолютного ::before (риска активного).
     transition охватывает color и transform для плавности. */
  .m-bn-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    text-decoration: none;
    color: var(--gmt, #5A8A6A);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Scale-down при тапе — тактильный feedback в iOS-стиле. */
  .m-bn-item:active {
    transform: scale(0.92);
  }

  /* Риска-индикатор сверху активного пункта.
     Невидима по умолчанию (opacity:0), появляется на .m-bn-active.
     transform-origin:center + scaleX делают «раздвижение» риски. */
  .m-bn-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 28px;
    height: 3px;
    border-radius: 0 0 99px 99px;
    background: var(--g, #1E8A4C);
    opacity: 0;
    transform: translateX(-50%) scaleX(0.3);
    transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .m-bn-ico {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .m-bn-lbl {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    transition: font-weight 200ms ease;
  }

  /* Активный пункт — зелёный + риска проявляется + иконка чуть крупнее +
     подпись жирнее. Subtle, но заметный «здесь я». */
  .m-bn-active {
    color: var(--g, #1E8A4C);
  }
  .m-bn-active::before {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
  .m-bn-active .m-bn-ico {
    transform: scale(1.05);
  }
  .m-bn-active .m-bn-lbl {
    font-weight: 700;
  }

  /* Reduce-motion: пользователи с включённой настройкой получают
     мгновенные смены без анимаций (a11y-best-practice). */
  @media (prefers-reduced-motion: reduce) {
    .m-bn-item,
    .m-bn-item::before,
    .m-bn-ico,
    .m-bn-lbl {
      transition: none;
    }
    .m-bn-item:active {
      transform: none;
    }
  }

  /* Компенсация под bottom-nav: контент main не должен уезжать под него. */
  html.lt-shell .main,
  html.lt-shell-2col .main {
    padding-bottom: calc(var(--m-bn-height) + var(--m-safe-bottom) + 12px);
  }

  /* Sheet-меню: затемнение фона. */
  .m-menu-bg {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(15, 25, 18, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .m-menu-bg.m-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Sheet-меню: сам контейнер, выезжает снизу.
     Использую display:grid для прямого размещения дочерних .m-menu-item
     в плитки 3 в ряд. Header (.m-menu-handle, .m-menu-title)
     растягивается на всю ширину через grid-column:1/-1. */
  .m-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 160;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--w, #fff);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 6px 14px calc(18px + var(--m-safe-bottom));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  .m-menu.m-open {
    transform: translateY(0);
  }

  /* Полоска-«ручка»: растягивается на все 3 колонки grid. */
  .m-menu-handle {
    grid-column: 1 / -1;
    width: 36px;
    height: 4px;
    border-radius: 99px;
    background: var(--bdr, #DDE8E2);
    margin: 8px auto 4px;
  }

  /* Заголовок sheet: на всю ширину. */
  .m-menu-title {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 700;
    color: var(--gmt, #5A8A6A);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 4px 6px;
  }

  /* Плитка sheet-меню: вертикальная композиция — иконка сверху, текст снизу.
     aspect-ratio:1 даёт квадратные плитки.
     Светло-зелёный фон + граница в стиле карточек платформы. */
  .m-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    aspect-ratio: 1;
    padding: 10px 6px;
    border-radius: 14px;
    background: var(--gp, #F0FAF4);
    border: 1px solid var(--bdr, #DDE8E2);
    text-decoration: none;
    color: var(--t, #1A2A22);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    transition: background 120ms ease, transform 120ms ease, border-color 120ms ease;
  }
  .m-menu-item:active {
    background: var(--gl, #E8F5EE);
    border-color: var(--gb, #C0DECA);
    transform: scale(0.97);
  }
  .m-menu-item svg {
    width: 26px;
    height: 26px;
    color: var(--g, #1E8A4C);
    flex-shrink: 0;
  }

  /* При открытом меню — запретить скролл фона. */
  html.m-menu-locked,
  html.m-menu-locked body {
    overflow: hidden;
  }

  /* ─── Топбар на мобиле: компактный профиль вместо широкой плашки ─── */

  /* Колокольчик: функцию забирает пункт «Уведомления» в bottom-nav. */
  html.lt-shell .notif-bell-wrap,
  html.lt-shell-2col .notif-bell-wrap {
    display: none;
  }

  /* Обёртка профиля: снимаем «карточные» стили — фон, рамку, тень, padding.
     На десктопе .profile-dd-wrap — белая карточка с min-height:56px и border,
     из-за чего без колокольчика выглядела как пустая плашка («призрак»).
     На мобиле делаем её просто контейнером под аватар + dropdown. */
  html.lt-shell .topbar > .profile-dd-wrap,
  html.lt-shell-2col .topbar > .profile-dd-wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: 0;
    height: auto;
    padding: 0;
    width: auto;
    flex: 0 0 auto;
  }

  /* Карточка профиля: на ≤1000 в shell-layout.css она display:none.
     На мобиле возвращаем как компактный кружок-аватар без имени/роли/стрелки.
     Перебиваем specificity (0,4,1) — выше чем (0,3,1) из shell-layout.css. */
  html.lt-shell .topbar > .profile-dd-wrap > .topbar-profile,
  html.lt-shell-2col .topbar > .profile-dd-wrap > .topbar-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 0;
    padding: 0;
    border: 1.5px solid var(--bdr, #DDE8E2);
    border-radius: 50%;
    background: var(--gp, #F0FAF4);
    flex: 0 0 36px;
  }

  /* Аватар внутри: занимает весь круг, без скруглений-квадрата с десктопа. */
  html.lt-shell .topbar > .profile-dd-wrap > .topbar-profile > .tp-av,
  html.lt-shell-2col .topbar > .profile-dd-wrap > .topbar-profile > .tp-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 12px;
  }

  /* Имя+роль и стрелка-шеврон — на мобиле в круглой кнопке не помещаются. */
  html.lt-shell .topbar > .profile-dd-wrap > .topbar-profile > .tp-info,
  html.lt-shell .topbar > .profile-dd-wrap > .topbar-profile > .tp-arrow,
  html.lt-shell-2col .topbar > .profile-dd-wrap > .topbar-profile > .tp-info,
  html.lt-shell-2col .topbar > .profile-dd-wrap > .topbar-profile > .tp-arrow {
    display: none;
  }

  /* Dropdown профиля: открывается от кнопки-аватара. Выравниваем по правому краю,
     ширина с учётом viewport. */
  html.lt-shell .topbar > .profile-dd-wrap > .profile-dd,
  html.lt-shell-2col .topbar > .profile-dd-wrap > .profile-dd {
    right: 0;
    left: auto;
    width: min(280px, calc(100vw - 16px));
  }

  /* ─── Sheet-меню: Настройки отдельным блоком в самом низу ─── */

  /* Тонкий divider перед последним пунктом (Настройки), растянутый
     на все 3 колонки grid. Визуально отделяет «системный» пункт от контентных плиток. */
  .m-menu-item.m-menu-settings {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 14px 16px;
    margin-top: 6px;
    border-radius: 12px;
    background: var(--w, #fff);
    border-color: var(--bdr, #DDE8E2);
    font-size: 14px;
    text-align: left;
    /* Псевдоэлемент-разделитель сверху имитирует визуальный gap-блок */
    position: relative;
  }
  .m-menu-item.m-menu-settings::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 8px;
    right: 8px;
    height: 1px;
    background: var(--bdr, #DDE8E2);
  }
  .m-menu-item.m-menu-settings svg {
    width: 22px;
    height: 22px;
  }
  /* Стрелка-шеврон справа: подсказка что это list-row, а не плитка. */
  .m-menu-item.m-menu-settings::after {
    content: "›";
    margin-left: auto;
    font-size: 22px;
    line-height: 1;
    color: var(--gmt, #5A8A6A);
    font-weight: 400;
  }
}

/* ───────────────────────────────────────────────────────────────
   Э6 — Главная (home-auth) на мобиле
   Селекторы привязаны к классам в самой home-auth.html.
   Все правила внутри @media ≤640.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* ── Баннер «Добрый день, …» ── */
  /* На десктопе .home-banner — flex row (привет слева, статистики справа).
     На мобиле растягиваем в вертикальный стек чтобы не давить контент. */
  .home-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
  }
  /* Статистики (Участников / Новостей / Событий) занимают всю ширину
     родителя — три цифры в ряд, без правого выравнивания. */
  .hb-stats {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
  /* Цифры чуть мельче, чтобы 3 пункта точно влезали на 360-390px. */
  .hbs-num {
    font-size: 22px;
  }
  .hbs-lbl {
    font-size: 10px;
  }

  /* ── Compose-bar ── */
  /* Уменьшаем padding и размер кнопки «Опубликовать», иначе
     placeholder обрезается слишком сильно. */
  .compose-bar {
    padding: 8px 10px;
    gap: 8px;
  }
  .compose-bar .cb-ph {
    font-size: 13px;
    /* Многоточие если фраза не помещается. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .compose-bar .cb-btn {
    padding: 8px 14px;
    font-size: 12px;
    flex-shrink: 0;
  }

  /* ── Feed-toolbar (фильтры Все/Новости/Проекты/Компании/Форум) ── */
  /* Горизонтальный скролл вместо переполнения — паттерн iOS Safari. */
  .feed-toolbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    /* Скрываем нативный scrollbar (стиль уже есть в shell-layout.css но дублируем для надёжности). */
    scrollbar-width: none;
  }
  .feed-toolbar::-webkit-scrollbar {
    display: none;
  }
  .feed-toolbar .ftab {
    flex-shrink: 0;
  }

  /* ── Post-card в ленте ── */
  /* Компактнее padding, иначе на 390px карточки выглядят пустоватыми. */
  .post-card {
    padding: 12px;
    border-radius: 14px;
  }
  /* Аватар автора чуть меньше. */
  .post-card .pc-av {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
  .post-card .pc-name {
    font-size: 13px;
  }
  .post-card .pc-text {
    font-size: 13px;
  }
}

/* ───────────────────────────────────────────────────────────────
   Э6.1 — Календарь на мобиле: убрать статичные «Сегодня/Скоро»,
   при тапе на день — выезжает блок со списком событий этого дня
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Скрываем правую колонку календаря — карточки «Сегодня», «Скоро»
     и кнопку «Создать событие». На мобиле они обрезаются и выглядят
     неаккуратно. Создание события — через тап на день. */
  .cal-hero-right {
    display: none;
  }

  /* Календарь и его внутренний блок берут всю ширину виджета. */
  .cal-hero-body {
    grid-template-columns: 1fr;
  }
  .cal-hero-left {
    width: 100%;
  }

  /* Блок «события выбранного дня» — выезжает снизу календаря.
     Появляется только когда .m-cal-daysheet получает класс .m-open. */
  .m-cal-daysheet {
    margin-top: 10px;
    padding: 12px;
    border-radius: 12px;
    background: var(--gp, #F0FAF4);
    border: 1px solid var(--bdr, #DDE8E2);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 200ms ease,
                padding 220ms cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 220ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .m-cal-daysheet.m-open {
    max-height: 70vh;
    opacity: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .m-cal-daysheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .m-cal-daysheet-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--t, #1A2A22);
  }
  .m-cal-daysheet-close {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: transparent;
    border: 0;
    color: var(--gmt, #5A8A6A);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
  }
  .m-cal-daysheet-close:active {
    background: var(--w, #fff);
  }
  .m-cal-daysheet-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  /* Пункт-событие в day-sheet: иконка-цвет слева, заголовок+мета справа. */
  .m-cal-evrow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--w, #fff);
    border: 1px solid var(--bdr, #DDE8E2);
    text-decoration: none;
    color: var(--t, #1A2A22);
  }
  .m-cal-evrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
  }
  .m-cal-evrow-body {
    flex: 1;
    min-width: 0;
  }
  .m-cal-evrow-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 2px;
    /* Многоточие если не помещается */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-cal-evrow-meta {
    font-size: 11px;
    color: var(--gmt, #5A8A6A);
  }
  .m-cal-daysheet-empty {
    font-size: 12px;
    color: var(--gmt, #5A8A6A);
    text-align: center;
    padding: 16px 8px;
  }
}

/* Следующие этапы добавляют сюда настройки, списочные и т.д. */