/* ===== Мобильная версия (v.5.22): фильтры, топ-5, нижнее меню =====
   Подключать ПОСЛЕДНИМ, после minimal-style.css. Действует только на экранах до 820px.
   Нижнее меню включается скриптом mobile-update.js (класс html.mb-on). */

/* ---------- Нижняя панель вкладок + шторка «Ещё» (стили не зависят от размера экрана,
   но элементы создаются и показываются только когда mb-on) ---------- */
.mb-bar,.mb-sheet,.mb-backdrop{display:none}

@media (max-width:820px){

  /* ===== 1. Нижнее меню ===== */
  html.mb-on body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  /* старое меню (гамбургер, боковая панель, горизонтальная лента вкладок) на телефоне не нужно */
  html.mb-on #navToggle,
  html.mb-on #mobileMenuBtn,
  html.mb-on .nav-backdrop,
  html.mb-on #sidebar,
  html.mb-on #mainNav{display:none !important}
  html.mb-on .shell{display:block}

  html.mb-on .mb-bar{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    position:fixed;left:0;right:0;bottom:0;z-index:900;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    background:var(--bg-elev,#131a22);border-top:1px solid var(--border,rgba(255,255,255,.1));
  }
  html.mb-on.mb-kb .mb-bar{display:none}          /* пока открыта клавиатура — панель не мешает */
  .mb-item{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:52px;padding:0 2px;border:0;background:none;color:var(--muted,#8e98a4);
    font:600 11px/1.1 var(--font-body,inherit);cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .mb-ico{display:flex;align-items:center;justify-content:center;width:54px;height:30px;border-radius:15px}
  .mb-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .mb-lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mb-item.active{color:var(--accent-text,#6B9DFF)}
  .mb-item.active .mb-ico{background:rgba(var(--accent-rgb,61,127,255),.18)}
  .mb-item:active .mb-ico{background:rgba(var(--accent-rgb,61,127,255),.12)}
  .mb-item:focus-visible{outline:2px solid var(--accent,#3D7FFF);outline-offset:-2px;border-radius:10px}
  .mb-dot{position:absolute;top:3px;left:calc(50% + 9px);min-width:8px;height:8px;border-radius:4px;background:var(--red,#ff4d4d);box-shadow:0 0 0 2px var(--bg-elev,#131a22)}

  /* шторка «Ещё» */
  html.mb-on .mb-backdrop{display:block;position:fixed;inset:0;z-index:940;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s}
  html.mb-on .mb-backdrop.open{opacity:1;pointer-events:auto}
  html.mb-on .mb-sheet{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:950;max-height:82vh;overflow-y:auto;overscroll-behavior:contain;
    padding:8px 14px calc(18px + env(safe-area-inset-bottom,0px));
    background:var(--bg-elev,#131a22);border-top:1px solid var(--border,rgba(255,255,255,.1));border-radius:18px 18px 0 0;
    transform:translateY(105%);transition:transform .24s cubic-bezier(.22,.8,.3,1);visibility:hidden;
  }
  html.mb-on .mb-sheet.open{transform:none;visibility:visible}
  .mb-grab{width:40px;height:4px;border-radius:2px;background:var(--border,rgba(255,255,255,.2));margin:2px auto 8px}
  .mb-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
  .mb-sheet-head b{font-size:16px}
  .mb-close{width:44px;height:44px;border:0;background:none;color:var(--muted,#8e98a4);font-size:20px;cursor:pointer}
  .mb-group-t{margin:14px 2px 8px;font-size:12.5px;font-weight:700;color:var(--muted,#8e98a4)}
  .mb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mb-chip{
    position:relative;display:flex;align-items:center;min-height:46px;padding:0 14px;text-decoration:none;text-align:left;
    border:1px solid var(--border,rgba(255,255,255,.1));border-radius:12px;background:var(--bg-elev-2,#1a222c);
    color:var(--text,#e8ecf4);font:600 14px/1.2 var(--font-body,inherit);cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .mb-chip.active{border-color:var(--accent,#3D7FFF);background:rgba(var(--accent-rgb,61,127,255),.14);color:var(--accent-text,#6B9DFF)}
  .mb-chip:active{background:rgba(var(--accent-rgb,61,127,255),.12)}
  .mb-chip .nav-alert-dot{margin-left:auto}
  .mb-chip.mb-wide{grid-column:1/-1;justify-content:center}
  html.mb-lock{overflow:hidden}
  @media (prefers-reduced-motion:reduce){html.mb-on .mb-sheet,html.mb-on .mb-backdrop{transition:none}}

  /* ===== 2. Фильтры рейтинга (Год / Месяц / День): компактные строки-чипы ===== */
  html .rk-side{display:flex;flex-direction:column;padding:10px 0 4px;border-radius:12px}
  html .rk-side .rk-side-title{display:none}
  html .rk-side>.rk-opt{
    width:auto;align-self:flex-start;min-height:36px;margin:0 12px 8px;padding:0 14px;gap:8px;
    border:1px solid var(--border);border-radius:999px;background:var(--bg-elev-2);box-shadow:none;
  }
  html .rk-side .rk-side-groups{display:block}
  html .rk-side .rk-side-groups>div{display:flex;align-items:center;padding:6px 0;border-top:1px solid var(--border)}
  html .rk-side .rk-side-groups>div>.rk-group-title{
    flex:0 0 62px;padding:0 0 0 12px;background:none;border:0;
    font-family:var(--font-body);font-size:12px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--muted);
  }
  html .rk-side .rk-group-opts{
    position:relative;display:flex;flex:1 1 auto;min-width:0;flex-wrap:nowrap;gap:6px;
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:2px 26px 2px 2px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  }
  html .rk-side .rk-group-opts::-webkit-scrollbar{display:none}
  html .rk-side .rk-group-opts .rk-opt{
    flex:0 0 auto;width:auto;min-width:44px;min-height:36px;padding:0 13px;justify-content:center;white-space:nowrap;
    border:1px solid var(--border);border-radius:999px;background:var(--bg-elev-2);font-size:13px;box-shadow:none;
  }
  html .rk-side .rk-opt.active{
    border-color:var(--accent);background:rgba(var(--accent-rgb),.14);color:var(--accent-text);box-shadow:none;
  }

  /* ===== 3. Порядок блоков главной: фильтры → топ-5 → рейтинг → трансферы ===== */
  html .ov-grid{display:flex;flex-direction:column;gap:12px}
  html .ov-grid .ov-left,
  html .ov-grid .rk-layout,
  html .ov-grid .ov-aside{display:contents}
  html .ov-grid .rk-side{order:1}
  html .ov-grid .ov-aside>.t5-box{order:2}
  html .ov-grid .rk-main-col{order:3}
  html .ov-grid .ov-aside>:not(.t5-box){order:4}

  /* ===== 4. Топ-5: горизонтальная лента карточек ===== */
  html .t5-box{padding:12px;margin:0;overflow:hidden}
  html .t5-head{margin-bottom:4px}
  html .t5-head>b{font-size:15px}
  html .t5-tabs .btn{min-height:32px;padding:0 12px;font-size:12px}
  html .t5-note{margin:0 0 8px}
  html .t5-body{
    display:flex;gap:8px;margin:0 -12px;padding:2px 12px 6px;
    overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  html .t5-body::-webkit-scrollbar{display:none}
  html .t5-body .empty{flex:1 1 100%}
  html .t5-row{
    position:relative;flex:0 0 124px;flex-direction:column;align-items:center;gap:6px;text-align:center;scroll-snap-align:start;
    padding:14px 8px 10px;border:1px solid var(--border);border-radius:12px;background:var(--bg-elev-2);
  }
  html .t5-row:first-child{border-color:rgba(var(--accent-rgb),.6)}
  html .t5-row .t5-n{position:absolute;top:7px;left:9px;width:auto;font-size:12px}
  html .t5-row .avatar,
  html .t5-row .avatar-fallback{width:50px !important;height:50px !important}
  html .t5-row .t5-name{align-items:center;width:100%}
  html .t5-row .t5-name b{max-width:100%;font-size:14px}
  html .t5-row .t5-stat{align-items:center;font-size:17px}
  html .t5-row .t5-sub{grid-template-columns:auto auto;column-gap:10px}
  html .t5-box>.btn{min-height:40px}

  /* ===== 5. Мелочи: крупные зоны нажатия в рейтинге ===== */
  html .rk-nav button{width:42px;height:42px}
  html .rk-headbar{gap:8px}
}

/* ===== 6. Боковая панель-«шторка» (старое меню): прокрутка и нижний отступ =====
   Нужна, если нижнее меню не включилось (например, закэширован старый скрипт) — тогда панель
   должна листаться, а последние пункты («Профиль» и др.) не должны прятаться за плавающими кнопками. */
@media (max-width:820px){
  html:not(.mb-on) #sidebar{
    max-height:100vh;max-height:100dvh;
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  }
  /* inline-правило телефона делает #mainNav горизонтальной прокруткой — в шторке это ломает вертикальный скролл */
  html[data-layout="side"]:not(.mb-on) #mainNav{
    overflow:visible;scroll-snap-type:none;
    padding-bottom:calc(110px + env(safe-area-inset-bottom,0px));
  }
  html[data-layout="side"]:not(.mb-on) #mainNav .nav-item{flex:none;white-space:normal}
}

/* кнопки, поднятые скриптом над нижней панелью, прячем, пока открыта шторка «Ещё» */
html.mb-lock [data-mb-lift]{visibility:hidden !important}

/* ===== 7. Чат (CSTV Chat) на телефоне ===== */
@media (max-width:760px){
  /* кнопки действий: не висят поверх соседних сообщений, а раскрываются по тапу на сообщение (скрипт ставит .mb-act) */
  html .msg-bubble .msg-bubble-actions{
    position:static;opacity:1;display:none;justify-content:flex-end;gap:8px;
    margin-top:8px;padding-top:8px;border-top:1px solid var(--border);
  }
  html .msg-bubble.mb-act .msg-bubble-actions{display:flex}
  html .msg-bubble .msg-bubble-actions>*{
    flex:0 0 auto;width:38px !important;height:38px !important;min-width:0 !important;min-height:0 !important;
    padding:0 !important;font-size:16px;
  }
  html .msg-bubble.mb-act{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.5)}
  html .msg-bubbles{padding:12px 10px}

  /* поле ввода: помещается в экран, кнопка отправки компактная, шрифт 16px (без авто-зума на iPhone) */
  html .msg-input-row{box-sizing:border-box;width:100%;max-width:100%;gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))}
  html .msg-input-row input{flex:1 1 0;width:auto;min-width:0;padding:10px 14px;font-size:16px}
  html .msg-input-row .msg-input-extra-btn{flex:0 0 38px;width:38px !important;height:38px !important;min-width:0 !important;min-height:0 !important;padding:0}
  html .msg-input-row button[type="submit"]{flex:0 0 auto;min-width:0 !important;height:38px;min-height:0 !important;padding:0 14px}

  /* шапка диалога: «Назад» в одну строку, иконки компактнее, длинное название — максимум 2 строки */
  html .msg-thread-head{gap:8px;padding:10px}
  html .msg-thread-head .msg-back-btn{height:38px !important;min-height:0 !important;padding:0 10px;white-space:nowrap}
  html .msg-thread-head button:not(.msg-back-btn){flex:0 0 38px;width:38px !important;height:38px !important;min-width:0 !important;min-height:0 !important;padding:0}
  html .msg-thread-head>div{min-width:0;flex:1 1 auto}
  html .msg-thread-head [class*="title"],
  html .msg-thread-head [class*="name"],
  html .msg-thread-head b{
    font-size:15px !important;line-height:1.25;overflow:hidden;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  }
}