/* Мобильная версия панели — общий слой для всех страниц (Сергей 7956 через
   btrit, 26.09): на телефоне не мелко (текст 15–16 px), всё под палец (не
   меньше 44 px), окна — на весь экран, без «блока в блоке» и без прокрутки
   вбок. Подключается auth.js на каждой странице; правила только под
   max-width 640px, широкий экран не трогается. Цвета — токенами страниц. */
/* элементы мобильного слоя на широком экране не показываются */
.tf-menu-btn,.tf-back,.tf-menu,.tf-fbtn,.tf-fs-h,.tf-fs-f,.tf-tabbar,.tf-tabfade{display:none}
@media (max-width:640px){
  html{-webkit-text-size-adjust:100%}
  body{font-size:15px}

  /* шапка: логотип, название и кнопка «Меню»; вкладки — в меню */
  /* шапка без линии снизу (Сергей, TG 17:31: «линии, отбивающие хедер, не нужны») */
  .top{height:60px !important;padding:0 8px 0 12px !important;gap:8px !important;overflow:visible !important;
    border-bottom:0 !important}
  .top nav,.top .clock,.top .sep,.top > a,.top .who .rl,.top .who .nm,.top .who .theme,.top .who .out{display:none !important}
  .top .left{padding-left:50px !important;gap:8px !important}
  /* логотип — по той же линии 20 px, что заголовок и плитки (Сергей, TG 27.09 04:26) */
  .top .logo{left:20px !important;top:6px !important;height:44px !important}
  .top .brand{font-size:17px !important}
  .top .who{display:none !important}
  .tf-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;
    margin-left:auto !important;border:0;border-radius:14px;background:transparent;color:var(--ink,#17161A);cursor:pointer}
  .tf-menu-btn:active{background:var(--accent,#E9E6ED)}
  .tf-menu:not([hidden]){position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;overflow:auto;
    height:100dvh;background:var(--bg,#F4F3EF);color:var(--ink,#17161A)}
  .tf-menu[hidden]{display:none}
  /* шапки и подвалы окон — без полос (Сергей, TG 2580, 30.09) */
  .tf-menu .mh{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 12px 8px 20px;
    position:sticky;top:0;background:var(--bg,#F4F3EF)}
  .tf-menu .mh b{font-size:18px}
  .tf-menu .mh button{margin-left:auto}
  .tf-menu a{display:flex;align-items:center;min-height:56px;padding:0 20px;border-bottom:1px solid var(--line,#E2E0D9);
    font-size:18px;color:var(--ink,#17161A);text-decoration:none}
  .tf-menu a.on{font-weight:600;box-shadow:inset 4px 0 0 var(--ink,#17161A);background:var(--panel,#EFEEEA)}
  .tf-menu .tf-menu-wait{min-height:56px;display:flex;align-items:center;padding:0 20px;margin:0;color:var(--muted,#6B6A66)}
  /* «Установить на телефон» (Сергей 7963): строка меню того же вида, что
     разделы; на iPhone и без системного окна — короткая инструкция под ней */
  .tf-menu .tf-install{display:flex;align-items:center;width:100%;min-height:56px;padding:0 20px;border:0;
    border-bottom:1px solid var(--line,#E2E0D9);background:transparent;color:var(--purple-ink,#443F4D);
    font:inherit;font-size:18px;text-align:left;cursor:pointer}
  .tf-menu .tf-howto:empty{display:none}
  .tf-menu .tf-howto .how{padding:14px 20px 16px;border-bottom:1px solid var(--line,#E2E0D9);font-size:15px;line-height:1.5}
  .tf-menu .tf-howto ol{margin:0;padding-left:20px}
  .tf-menu .tf-howto li{margin:4px 0}
  /* безопасные отступы установленного приложения: вырез и полоса «домой» */
  .top{padding-left:max(14px, env(safe-area-inset-left)) !important;padding-right:max(10px, env(safe-area-inset-right)) !important}
  .tf-menu:not([hidden]){padding-bottom:env(safe-area-inset-bottom)}
  body.tf-detail-open #detailcol{padding-bottom:env(safe-area-inset-bottom) !important}
  .tf-menu .me{padding:18px 20px;display:flex;flex-direction:column;gap:12px;font-size:15px;color:var(--muted,#3A3834)}
  .tf-menu .me b{color:var(--ink,#17161A);font-size:17px}
  .tf-menu .me .row{display:flex;gap:10px;flex-wrap:wrap}
  /* крестик меню и листа фильтров — круг с линиями, как .mdl-x в panel.css
     (Сергей, 27.09 15:40); mobile.css есть на всех страницах, panel.css — нет */
  .tf-x{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
    min-width:44px;min-height:44px;padding:0;border:1px solid var(--soft,#DBD8CF);border-radius:50%;
    background:var(--panel,#EFEEEA);color:var(--ink,#17161A);cursor:pointer}
  @keyframes tf-sheet-in{from{transform:translateY(100%)}to{transform:none}}
  @keyframes tf-sheet-out{from{transform:none}to{transform:translateY(100%)}}
  .tf-btn{min-height:44px;padding:0 16px;border:1px solid var(--soft,#DBD8CF);border-radius:12px;
    background:var(--white,#fff);color:var(--ink,#17161A);font:inherit;font-size:15px;cursor:pointer}

  /* Фильтры списков (auth.js TF.phoneFilters): над списком — поиск и
     «Фильтры · N»; блок фильтров — окном на весь экран */
  .tf-fbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;min-height:48px;
    padding:0 14px;border:1px solid var(--soft,#DBD8CF);border-radius:12px;background:var(--white,#fff);
    color:var(--ink,#17161A);font:inherit;font-size:16px;font-weight:500;cursor:pointer}
  .tf-fbtn b{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;
    border-radius:12px;background:var(--ink,#17161A);color:var(--bg,#F4F3EF);font-size:13px;font-weight:600}
  .tf-fbox:not(.tf-fs-open){display:none !important}
  .tf-fbox.tf-fs-open{position:fixed;inset:0;z-index:950;display:block !important;overflow:auto;height:100dvh;
    margin:0 !important;padding:0 0 calc(92px + env(safe-area-inset-bottom)) !important;background:var(--bg,#F4F3EF)}
  .tf-fs-open .tf-fs-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;min-height:60px;
    padding:8px 12px 8px 16px;background:var(--bg,#F4F3EF)}
  .tf-fs-open .tf-fs-h b{flex:1 1 auto;font-size:18px}
  .tf-fs-open .tf-fs-f{position:fixed;left:0;right:0;bottom:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;
    gap:10px;padding:8px 28px max(12px, calc(env(safe-area-inset-bottom) - 12px));background:var(--bg,#F4F3EF)}
  .tf-fs-f .tf-fs-n{flex:1 1 100%;font-size:14px;color:var(--muted,#3A3834)}
  .tf-fs-f .tf-btn{flex:1 1 0;min-height:50px;border-radius:999px;font-size:16px;font-weight:500}
  .tf-fs-f .tf-btn.go{background:var(--ink,#17161A);color:var(--bg,#F4F3EF);border-color:var(--ink,#17161A)}
  /* внутри окна ряды кнопок переносятся, а не уходят за край */
  .tf-fbox.tf-fs-open .row,.tf-fbox.tf-fs-open .seg{display:flex !important;flex-wrap:wrap !important;gap:8px !important;
    overflow:visible !important;padding:14px 16px 0 !important;border:0 !important;background:transparent !important}
  .tf-fbox.tf-fs-open .seg > *,.tf-fbox.tf-fs-open .row > button{min-height:44px !important;border-radius:12px !important;
    border:1px solid var(--soft,#DBD8CF) !important;padding:0 14px !important;font-size:15px !important}
  body.tf-fs-open{overflow:hidden}

  /* Нижняя панель вместо шапки (Сергей, TG 27.09 04:29): шапка с логотипом
     и кнопкой меню на телефоне не показывается; плавающая стеклянная панель
     внизу, над полосой «домой» (образец — mitdeutsch) */
  body.tf-has-tabbar .top{display:none !important}
  body.tf-has-tabbar{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  .tf-tabfade{display:block;position:fixed;left:0;right:0;bottom:0;z-index:790;pointer-events:none;
    height:calc(90px + env(safe-area-inset-bottom));
    /* мягче, чем в mitDeutsch: сквозь стекло должно просвечивать содержимое */
    background:linear-gradient(to top, color-mix(in srgb, var(--bg,#F4F3EF) 70%, transparent) 0%,
      color-mix(in srgb, var(--bg,#F4F3EF) 25%, transparent) 45%, transparent 100%)}
  .tf-tabbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:800;
    padding:0 24px calc(10px + env(safe-area-inset-bottom))}
  /* «жидкое стекло» (Сергей, TG 04:37): прозрачнее, блик сверху, светлый
     кант по краю, чуть ярче фон под панелью; преломление через SVG-фильтр
     Safari не поддерживает — эффект собран тем, что работает на iPhone */
  .tf-tabs{position:relative;overflow:hidden;display:flex;justify-content:space-around;align-items:center;gap:2px;
    padding:6px;border-radius:32px;
    background:linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 55%, rgba(255,255,255,.12) 100%),
      color-mix(in srgb, var(--white,#fff) 42%, transparent);
    -webkit-backdrop-filter:blur(26px) saturate(190%) brightness(1.06);
    backdrop-filter:blur(26px) saturate(190%) brightness(1.06);
    border:1px solid rgba(255,255,255,.42);
    box-shadow:0 12px 40px rgba(0,0,0,.18),0 2px 10px rgba(0,0,0,.08),
      inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.18),inset 0 0 18px rgba(255,255,255,.10)}
  /* блик — светлое пятно у верхнего края, как отражение */
  .tf-tabs::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(120% 70% at 30% -20%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
      radial-gradient(80% 60% at 90% 120%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%)}
  .tf-tabs > *{position:relative}
  :root[data-theme="dark"] .tf-tabs{border-color:rgba(255,255,255,.14);
    background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 55%, rgba(255,255,255,.05) 100%),
      color-mix(in srgb, var(--white,#1C1D22) 48%, transparent);
    box-shadow:0 12px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.06)}
  :root[data-theme="dark"] .tf-tabs::before{opacity:.35}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .tf-tabs{border-color:rgba(255,255,255,.14);
      background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 55%, rgba(255,255,255,.05) 100%),
        color-mix(in srgb, var(--white,#1C1D22) 48%, transparent);
      box-shadow:0 12px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.06)}
    :root:not([data-theme="light"]) .tf-tabs::before{opacity:.35}
  }
  .tf-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:54px;padding:4px 2px;border:0;border-radius:26px;background:transparent;color:var(--muted,#3A3834);
    text-decoration:none !important;font:inherit;font-size:12px;font-weight:500;letter-spacing:0;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:transform .12s ease}
  .tf-tab svg{width:24px;height:24px}
  /* активный пункт — стеклянная капсула со своим бликом */
  .tf-tab.on{color:var(--ink,#17161A);
    background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 8px rgba(0,0,0,.08)}
  :root[data-theme="dark"] .tf-tab.on{background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 8px rgba(0,0,0,.3)}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .tf-tab.on{background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 8px rgba(0,0,0,.3)}
  }
  .tf-tab.on svg{stroke-width:2.2}
  .tf-tab:active{transform:scale(.94)}

  /* под палец: поля и кнопки не ниже 44 px, текст полей — 16 px (иначе iOS
     увеличивает страницу при фокусе) */
  input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:44px;font-size:16px !important}
  button{min-height:40px}
  .urlchips .uc button{min-width:32px;min-height:32px;font-size:18px}


  /* Дашборд и вход: карточки на телефоне — без рамок, строками (первый круг
     7956, «без блока в блоке»); у плоской формы входа и тень снимается —
     иначе на светлой теме оставалось серое пятно без карточки (второй круг) */
  .wrap{padding:16px 20px !important}
  .wrap .card{border:0 !important;border-radius:0 !important;padding:16px 0 !important;background:transparent !important;
    box-shadow:none !important}

  /* мелкие подписи страниц — не меньше 14 px (замер 26.09: метки, чипы
     каналов, время, подписи оси и легенды были 9,5–11,5 px; Сергей, TG 17:30:
     «от мелкого текста вообще избавляться») */
  .ch,.tag,.mgr,.meta,.when,.foot,.note,.at,.what,.from,.clock2,.count,
  .sort,.showf,.lab span,.top2 span,.legend span,.ends span,.toggle span,.lft span{font-size:14px !important}
  .num small,.when i,.card .lab,.xaxis span,.head .note{font-size:14px !important}
  .line{padding:12px 0 !important;font-size:14px}

  /* Списки: прокручивается страница, а не окошко внизу экрана (Сергей, TG
     17:11, 26.09 — на Прогреве первая строка списка стояла на 509 px из 844) */
  .app{height:auto !important;max-height:none !important;min-height:100dvh;overflow:visible !important}
  .frame,.main,.board,.listcol,.rows,.scroller{height:auto !important;max-height:none !important;
    min-height:0 !important;overflow:visible !important}

  /* Прогрев и Разговоры: список на весь экран, подробности — поверх, на
     весь экран, с «← Назад» (класс ставит auth.js при выборе строки) */
  .board{overflow:visible !important}
  .listcol{max-height:none !important}
  #detailcol{display:none !important}
  body.tf-detail-open #detailcol{display:block !important;position:fixed;inset:0;z-index:900;height:100dvh;
    overflow:auto;background:var(--bg,#F4F3EF);padding:0 !important;width:auto !important}
  body.tf-detail-open #detailcol > .card{border:0 !important;border-radius:0 !important;box-shadow:none !important;
    min-height:100%;margin:0 !important}
  body.tf-detail-open{overflow:hidden}
  body.tf-detail-open .tf-back{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:6px;min-height:64px;
    padding:6px 16px 6px 6px;background:var(--bg,#F4F3EF)}
  .tf-back .tf-chev{flex:0 0 auto;width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;
    border:0;border-radius:14px;background:transparent;color:var(--ink,#17161A);cursor:pointer}
  .tf-back .tf-back-t{flex:1 1 auto;min-width:0;font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tf-back .tf-more{flex:0 0 auto;min-height:44px;padding:0 14px;border:1px solid var(--soft,#DBD8CF);border-radius:12px;
    background:var(--white,#fff);color:var(--ink,#17161A);font:inherit;font-size:15px;cursor:pointer}
  /* шапка подробностей свёрнута, пока не нажали «Подробнее» */
  body.tf-detail-open #detailcol:not(.tf-dhead-open) .dhead{display:none !important}
  body.tf-detail-open #detailcol.tf-dhead-open .dhead{position:fixed !important;left:0;right:0;
    top:calc(64px + env(safe-area-inset-top));z-index:920;max-height:72dvh;overflow:auto;
    background:var(--bg,#F4F3EF);border-radius:0 0 22px 22px;box-shadow:0 18px 40px rgba(0,0,0,.22);
    animation:tf-drop .22s cubic-bezier(.2,.7,.2,1)}
  @keyframes tf-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  /* пустой экран подробностей (письмо в очереди, разговора нет) — по центру
     видимого экрана под шапкой, а не прижат кверху (Сергей, 27.09 15:35) */
  body.tf-detail-open #detailcol .empty{min-height:calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
    justify-content:center}
  .tf-dscrim{display:none}
  /* «Подробнее» уходит вверх, откуда выехал; меню «Ещё» и лист фильтров —
     выезжают снизу и уезжают вниз (Сергей, 27.09 15:41) */
  @keyframes tf-rise{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px)}}
  body.tf-detail-open #detailcol.tf-dhead-open.tf-out .dhead{animation:tf-rise .22s ease forwards}
  .tf-menu:not([hidden]){animation:tf-sheet-in .3s cubic-bezier(.2,.8,.2,1)}
  .tf-menu.tf-out{animation:tf-sheet-out .24s cubic-bezier(.4,0,1,1) forwards}
  .tf-fbox.tf-fs-open{animation:tf-sheet-in .3s cubic-bezier(.2,.8,.2,1)}
  .tf-fbox.tf-fs-open.tf-out{animation:tf-sheet-out .24s cubic-bezier(.4,0,1,1) forwards}
  body.tf-detail-open #detailcol.tf-dhead-open .tf-dscrim{display:block;position:fixed;left:0;right:0;bottom:0;
    top:calc(64px + env(safe-area-inset-top));z-index:915;background:rgba(0,0,0,.28)}
}
/* масштаб в панели не тянется (Сергей, TG 2586, 30.09): на сенсорном экране
   щипок и двойное касание — только прокрутка. Вместе с viewport
   user-scalable=no и жестами iOS в auth.js: сам viewport iOS не соблюдает. */
@media (pointer:coarse){
  html,body,body *{touch-action:pan-x pan-y}
}
/* ориентация — вертикальная (2586): Android держит её по манифесту, iOS
   закрепить не даёт — в установленном приложении поворот закрыт подсказкой */
@media (display-mode:standalone) and (orientation:landscape) and (max-height:500px){
  body::after{content:"Поверните телефон вертикально";position:fixed;inset:0;z-index:5000;display:flex;
    align-items:center;justify-content:center;padding:24px;background:var(--bg,#F4F3EF);color:var(--ink,#17161A);
    font-size:18px;font-weight:500;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .tf-menu,.tf-fbox,.tf-menu.tf-out,.tf-fbox.tf-out,#detailcol .dhead{animation:none !important}
}