/* Телефонная раскладка (11.09, Творец: «все кнопки адекватно видны, ничто не мешало»).
   Замер пробой 390x844 до правки: поле ввода на y=1643 (за экраном), 22 из 31 кнопки мельче 36px,
   6 кнопок перекрыты, ⟳ поверх крестиков кодекса/ноши/телефона, время дважды, точки свайпа 7x7
   под плашкой времени. Файл подключён последним и действует только на узком экране. */
@media (max-width: 760px) {
  /* ── 1. Поле ввода всегда в экране. Карточка «Что нового» (intro.js) стоит в #main рядом с лентой,
        и её 1200px выталкивали композер за нижний край - писать ход было некуда. Лента и полосы
        над ней сжимаются, композер и ряд кнопок - никогда. */
  #main { overflow: hidden; }
  #main > .composer, #main > #hudActions, #main > #giftBar, #main > #attachBar, #main > #cycleTag { flex-shrink: 0; }
  #log { min-height: 32%; }
  #main > #worldNewsBar { flex-shrink: 0; }
  #main > #nudgeBar, #main > .intro-wrap { flex-shrink: 1; min-height: 0; overflow-y: auto; }
  #main > .intro-wrap { max-height: 30%; margin: 0 var(--space-2); }
  .svc-x { min-width: 40px; min-height: 40px; }
  /* композер не последний - нижний отступ под home-indicator держит ряд кнопок под ним */
  .composer { padding-bottom: var(--space-2); }
  #input { min-height: 44px; }

  /* ── 2. Верхний ряд: ☰ слева, экраны свайпа по центру, 📱 справа. ⟳ живёт в шапке меню,
        индикатор памяти - служебный, на телефоне не нужен. */
  #hardReload, #memDot { display: none !important; }
  #phoneToggle {
    top: calc(8px + var(--tg-top, 0px) + env(safe-area-inset-top)) !important; right: 8px !important;
    width: 44px; height: 44px;
  }
  /* на боковых экранах справа своя кнопка «🌿 в сцену», а 📱 там - одна из точек */
  body:not([data-swipe="center"]) #phoneToggle { display: none; }

  /* точки свайпа были 7x7 и лежали под плашкой времени - теперь это вкладки с иконками,
     активная подписана словом (заголовок бокового экрана им и заменён) */
  #swipeDots {
    left: 58px; right: 56px; top: calc(10px + var(--tg-top, 0px) + env(safe-area-inset-top));
    gap: 2px; align-items: center;
    /* восьмой экран (🎒 Ноша, 25.09) на узком телефоне не влезает: полоса листается, активная
       точка подкручивается к середине (swipe.js go), а не обрезается по краям */
    justify-content: center; justify-content: safe center;
    overflow-x: auto; scrollbar-width: none;
  }
  #swipeDots::-webkit-scrollbar { display: none; }
  #swipeDots .swipe-dot { flex: 0 0 auto; }
  #swipeDots .swipe-dot {
    width: auto; min-width: 26px; height: 36px; padding: 0 3px; border-radius: 18px;
    background: transparent; opacity: .55; font-size: 15px; line-height: 36px; color: var(--ink);
  }
  #swipeDots .swipe-dot.on {
    width: auto; padding: 0 10px; border-radius: 18px; opacity: 1; font-size: 0;
    background: rgba(var(--accent-rgb), .16); border: 1px solid rgba(var(--accent-rgb), .55);
  }
  #swipeDots .swipe-dot.on::after { content: attr(title); font-size: 13px; font-weight: 600; white-space: nowrap; }
  .swipe-panel-h > span:first-child { visibility: hidden; }

  /* ── 3. Плашка времени: в сцене время уже есть в чипе мира - там её не показываем. Нужна она
        поверх слоёв (телефон, кодекс, ноша, студия, боковые экраны) - и там уходит вниз, чтобы
        не ложиться на заголовки и крестики. */
  #worldClockPill {
    display: none; top: auto; bottom: calc(6px + env(safe-area-inset-bottom));
    padding: 2px 10px; font-size: 11.5px; font-weight: 600; opacity: .9;
  }
  body:not([data-swipe="center"]) #worldClockPill,
  body.phone-on #worldClockPill, body.codex-on #worldClockPill, body.bag-on #worldClockPill,
  body:has(#studio:not(.hidden)) #worldClockPill { display: block; }
  body.phone-chat-open #worldClockPill, body:has(#sidebar.open) #worldClockPill, body #worldClockPill:empty { display: none !important; }

  /* ── 4. Чип мира в одну строку: ⬇ «скачать тайтл» - служебная, остальное листается пальцем */
  #cycleTag { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #cycleTag::-webkit-scrollbar { display: none; }
  #cycleTag > * { flex-shrink: 0; }
  .ct-imp:not(.ct-go):not(.ct-clock-edit):not(.ct-cal):not(.ct-news):not(.ct-freeze) { display: none; }
  .ct-imp { min-width: 36px; min-height: 36px; }

  /* ── 5. «С чего начать» - одна листаемая строка вместо пяти (190px ленты) */
  .nudge { max-width: none; margin: 4px var(--space-2) 6px; padding: 6px 10px; }
  .nudge-chips { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .nudge-chips::-webkit-scrollbar { display: none; }
  .nudge-chip { flex: 0 0 auto; min-height: 36px; }
  .nudge-b { width: 34px; height: 34px; }

  /* ── 6. Нижний ряд действий в одну строку с прокруткой, 📖 и 🎒 переехали сюда (mobile.js) */
  /* ширину прибиваем к экрану: без этого ряд вырастал до 618px, и хвост кнопок уезжал за край без прокрутки */
  .hud-actions {
    width: 100% !important; max-width: 100%; min-width: 0; box-sizing: border-box;
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 6px;
    padding-left: var(--space-3); padding-right: var(--space-3); scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .hud-actions::-webkit-scrollbar { display: none; }
  .hud-actions > button { flex: 0 0 auto; }
  #hudActions #codexToggle, #hudActions #bagToggle {
    position: static !important; inset: auto !important; transform: none !important; opacity: 1 !important;
    width: 44px; height: 44px; margin: 0;
  }

  /* ── 7. Ревизор: плавающая плашка лежала поверх поля ввода. Свёрнутую прячем, о находках
        говорит точка на 🔍 в нижнем ряду; раскрытая - во всю ширину над композером. */
  #revizor-box:not(.open) { display: none; }
  #revizor-box.open { left: 8px; right: 8px; max-width: none; bottom: calc(150px + env(safe-area-inset-bottom)); }
  #revizorBtn { position: relative; }
  body:has(#revizor-box) #revizorBtn::after {
    content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
    background: #8fd3ff; box-shadow: 0 0 0 2px var(--panel-2);
  }

  /* ── 8. Телефон: колонка сетки была 1fr = minmax(auto, 1fr) и росла по самой широкой строке
        (режимы «Отдыхаю/Обычный/…» с nowrap) до 565px - крестик закрытия стоял на x=526, за экраном. */
  .ph-frame { grid-template-columns: minmax(0, 1fr); }
  .ph-side, .ph-chat { min-width: 0; }
  .ph-x, .ph-back { min-width: 44px; min-height: 44px; opacity: .85; }
  .ph-groups { overflow-x: auto; scrollbar-width: none; }

  /* ── 9. Шапка меню: ⟳ рядом с «+ Новый» */
  #drawerReload {
    flex: 0 0 auto; width: 40px; height: 40px; margin-left: 6px; border-radius: var(--radius);
    background: var(--panel); border: 1px solid var(--border); color: var(--ink); font-size: 18px; cursor: pointer;
  }
}