/* REDESIGN 2026-10 — тёмно-синяя тема с синим акцентом по эталонному экрану «Чаты» (redesign.js).
   Цвет акцента из «Настройки → Оформление» по-прежнему главнее (встроенный стиль перекрывает :root). */
:root {
  --bg: #0b0f17; --rail: #0b0f17; --sidebar: #0d121b; --panel: #121927; --panel-2: #172031;
  --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.11);
  --bubble-in: #172031; --bubble-out: #1a4f9c;
  --accent: #1e88ff; --accent-d: #1677e6; --accent-rgb: 30, 136, 255; --on-accent: #ffffff;
  --accent-hi: #3b9bff; --accent-light: #5aaeff; --accent-pale: #cfe5ff; --accent-2: #1e88ff;
  --online: #22c55e; --text: #eef2f8; --muted: #8b95a8; --muted-2: #667085;
  --input: #131a27; --hover: #121a28; --selected: #16233a; --radius: 16px;
  --grad: linear-gradient(135deg, #1e88ff, #7c3aed); --glow: 0 6px 22px rgba(30,136,255,.35);
  --rd-card: #111827; --rd-border: rgba(148,163,184,.14);
}
html.rd body { background: var(--bg); }
/* ---- общие элементы ---- */
.rd .rail { background: var(--rail); border-color: var(--line); }
.rd .sidebar, .rd .stage, .rd .thread, .rd .pane { background-color: var(--bg); }
.rd .row { border-radius: 14px; }
.rd .row .av, .rd .row > .av { width: 56px; height: 56px; font-size: 21px; }
.rd .row strong { font-weight: 700; }
.rd .row.on { background: var(--selected); }
.rd .row.admin-chat { background: transparent; box-shadow: none; }
.rd .row.admin-chat strong { color: var(--text); }
.rd .row.admin-chat.on { background: var(--selected); }
.rd .unread, .rd .row .badge, .rd .row .count { background: var(--accent) !important; color: #fff !important; }
.rd .bot-tag, .rd .tag-bot, .rd .row .bot { background: transparent !important; color: #5aaeff !important; border: 1px solid rgba(90,174,255,.55); border-radius: 6px; font-size: 10.5px; padding: 0 5px; }
.rd .chat-head, .rd .composer, .rd .dock { background: var(--bg); border-color: var(--line); }
.rd .composer-field, .rd #input, .rd .search-wrap, .rd #search { background: var(--input) !important; border-color: var(--line-2) !important; border-radius: 22px; }
.rd #send, .rd #mic { background: var(--accent); color: #fff; border-radius: 50%; }
.rd .bubble { border-radius: 18px; }
.rd .msg.me .bubble, .rd .msg.out .bubble { background: var(--bubble-out); }
.rd .icon-btn { border-radius: 50%; }
.rd .e2e { background: var(--rd-card); border: 1px solid var(--rd-border); border-radius: 16px; }
.rd .so-card, .rd .gm-panel, .rd .mv-head, .rd .so-picker, .rd .menu-list, .rd .sec-card, .rd .np-row { border-radius: 16px; }
.rd .so-card, .rd .so-picker { background: var(--rd-card); border-color: var(--rd-border); }
.rd .so-btn.pri, .rd .so-reply button, .rd .gm-btn { background: var(--accent) !important; color: #fff; }
.rd .so-ring { background: conic-gradient(from 210deg, #1e88ff, #7c3aed, #f97316, #1e88ff); }
.rd .so-stories { border-bottom: 0; }
/* ---- фильтры-пилюли ---- */
.rd .list-tabs { gap: 8px; padding: 6px 14px 10px; border: 0; }
.rd .list-tabs button { height: 34px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-2); background: transparent; color: var(--text); font-weight: 500; font-size: 14.5px; }
.rd .list-tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.rd .list-tabs button.on .tab-count { background: rgba(255,255,255,.25); color: #fff; }
html.rd-chf #chats .row:not(.rd-ch) { display: none !important; }
html.rd-chf #m-pins { display: none !important; }
/* ---- карточка «Облако» ---- */
.rd-cloud { display: block; width: calc(100% - 28px); margin: 4px 14px 10px; padding: 14px 16px 12px; text-align: left; cursor: pointer; font: inherit; color: var(--text);
  border-radius: 16px; background: var(--rd-card); border: 1px solid var(--rd-border); transition: border-color .15s, transform .15s; }
.rd-cloud:hover { border-color: rgba(30,136,255,.45); }
.rd-cl-top { display: flex; align-items: center; gap: 12px; }
.rd-cl-top b { font-size: 17px; font-weight: 600; }
.rd-cl-txt { margin-left: auto; font-size: 14px; color: #d5dbe6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-cl-top svg:last-child { color: #c3cad8; flex: none; }
.rd-cl-bar { display: flex; gap: 5px; height: 8px; margin: 12px 0 10px; border-radius: 99px; background: #2a3242; overflow: hidden; }
.rd-cl-bar i { display: block; height: 100%; border-radius: 99px; width: 0; transition: width .6s ease; }
.rd-cl-bar i.p, .rd-cl-leg i.p { background: linear-gradient(90deg, #1e88ff, #3b82f6); }
.rd-cl-bar i.v, .rd-cl-leg i.v { background: linear-gradient(90deg, #6366f1, #a855f7); }
.rd-cl-bar i.d, .rd-cl-leg i.d { background: linear-gradient(90deg, #f97316, #fb923c); }
.rd-cl-leg { display: flex; gap: 18px; font-size: 12.5px; color: #c3cad8; }
.rd-cl-leg span { display: inline-flex; align-items: center; gap: 6px; }
.rd-cl-leg i { width: 8px; height: 8px; border-radius: 50%; }
.rd-cl-leg em { font-style: normal; }
/* ---- шапка ---- */
.rd .m-logo.rd-me { background: #1b2333; box-shadow: none; border-radius: 50%; overflow: visible; cursor: pointer; }
.rd .m-logo.rd-me::after { display: none; }
.rd .m-logo.rd-me .av { width: 44px !important; height: 44px !important; border-radius: 50%; }
.rd-dot { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: var(--online); border: 2.5px solid var(--bg); }
.rd .m-round { background: #161d2a; border: 0; color: #e5e9f0; }
.rd .m-round.m-plus { background: var(--accent); color: #fff; box-shadow: 0 6px 20px rgba(30,136,255,.4); }
/* ---- «Лента» ---- */
.rd-feed-nav .rd-feed-ring { display: grid; place-items: center; }
.rd-feed { position: fixed; z-index: 1200; inset: 0 0 0 var(--rd-feed-left, 0); overflow-y: auto; background: var(--bg); color: var(--text); animation: rd-in .2s ease; }
@keyframes rd-in { from { opacity: 0; transform: translateY(10px); } }
.rd-f-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: calc(14px + env(safe-area-inset-top)) 18px 10px; background: linear-gradient(var(--bg) 75%, transparent); }
.rd-f-head h1 { flex: 1; margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.rd-f-head .m-round { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; background: var(--accent); color: #fff; border: 0; cursor: pointer; }
.rd-f-body { max-width: 760px; margin: 0 auto; padding: 0 16px 120px; }
.rd-f-body h3 { display: flex; align-items: center; margin: 18px 2px 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rd-f-link { margin-left: auto; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; cursor: pointer; }
.rd-f-stories { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; }
.rd-f-chans { display: flex; flex-direction: column; gap: 6px; }
.rd-f-chan { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--rd-border); background: var(--rd-card); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rd-f-chan .av { width: 48px; height: 48px; flex: none; }
.rd-f-chan span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rd-f-chan small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-f-chan em { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.rd-ok { font-style: normal; color: #38bdf8; font-size: 12px; }
.rd-f-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rd-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; min-height: 104px; border-radius: 18px; border: 1px solid var(--rd-border); background: var(--rd-card); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .15s, border-color .15s; }
.rd-tile:hover { transform: translateY(-2px); border-color: rgba(30,136,255,.5); }
.rd-t-emo { font-size: 26px; } .rd-tile b { font-size: 15px; } .rd-tile small { font-size: 12px; color: var(--muted); }
.rd-tile.t1 { background: linear-gradient(150deg, rgba(30,136,255,.22), var(--rd-card) 60%); }
.rd-tile.t2 { background: linear-gradient(150deg, rgba(236,72,153,.2), var(--rd-card) 60%); }
.rd-tile.t3 { background: linear-gradient(150deg, rgba(34,197,94,.2), var(--rd-card) 60%); }
.rd-f-empty { margin: 4px 2px; color: var(--muted); font-size: 13.5px; }
/* ---- десктоп ---- */
@media (min-width: 861px) {
  .rd .rail { border-right: 1px solid var(--line); }
  .rd .rail-item.on { background: rgba(30,136,255,.14); color: var(--accent); }

  .rd-feed-nav .rd-feed-ring { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 0 0 3px rgba(30,136,255,.25); }
  .rd-feed-nav .rd-feed-ico svg { width: 20px; height: 20px; color: #fff; }
  .rd-f-tiles { grid-template-columns: repeat(3, 1fr); }
}
/* ---- мобильная версия: 5 вкладок, «Лента» в центре ---- */
@media (max-width: 860px) {
  .rd .rail { background: rgba(11,15,23,.96); border-top: 1px solid var(--line); overflow: visible; }
  .rd .rail .rail-item[data-nav="calls"], .rd .rail #ia-music-nav, .rd .rail #ia-games-nav, .rd .rail .ia-rail-item, .rd .rail [data-nav="music"], .rd .rail [data-nav="games"] { display: none !important; }
  .rd .rail .rail-item { color: #a4adbd; }
  .rd .rail .rail-item.on, .rd .rail .rail-item.on svg { color: var(--accent); }
  .rd .rd-feed-nav { position: relative; overflow: visible; }
  .rd .rd-feed-nav .rd-feed-ring { margin-top: -28px; width: 66px; height: 66px; border-radius: 50%; background: var(--bg);
    box-shadow: 0 0 0 2px rgba(30,136,255,.55), 0 0 26px rgba(30,136,255,.45); }
  .rd .rd-feed-nav .rd-feed-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(160deg, #2b95ff, #1673e0); color: #fff; }
  .rd .rd-feed-nav .rd-feed-ico svg { color: #fff !important; width: 26px; height: 26px; }
  .rd .rd-feed-nav .rail-label { margin-top: 2px; }
  .rd .rd-feed-nav.on .rail-label { color: var(--accent); font-weight: 600; }
  .rd-feed { inset: 0 0 calc(66px + env(safe-area-inset-bottom)) 0; z-index: 900; }
  .rd .m-title { font-size: 32px; font-weight: 800; }
  .rd .m-head { padding-top: calc(14px + env(safe-area-inset-top)); }
  .rd .m-round { width: 46px; height: 46px; }
  .rd-f-tiles { grid-template-columns: repeat(2, 1fr); }
  .rd-cl-txt { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .rd-feed, .rd-cl-bar i { animation: none; transition: none; } }
@media (min-width: 861px) { .rd-cl-free { display: none; } .rd .list-tabs { overflow-x: auto; scrollbar-width: none; } .rd .list-tabs button { flex: none; } }
.rd-me { display: none; position: relative; flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: #1b2333; cursor: pointer; }
.rd-me .av { width: 46px !important; height: 46px !important; border-radius: 50%; font-size: 18px; }
@media (max-width: 860px) { .rd #m-head .m-logo { display: none !important; } .rd-me { display: block; } .rd .m-cloud small { display: none !important; } }
@media (max-width: 860px) { .rd #ia-menu-btn { display: none !important; } }
/* ===== STABLE: без сдвигов раскладки и бесконечных вращений ===== */
.rd .so-stories { height: 92px; min-height: 92px; box-sizing: border-box; align-items: flex-start; }
.rd .so-skel .so-ring { background: #1a2232; }
.rd .so-skel small { width: 44px; height: 10px; border-radius: 5px; background: #1a2232; }
.rd-cloud { height: 104px; box-sizing: border-box; overflow: hidden; }
.rd-cl-txt:empty::before, .rd-cl-txt { min-width: 120px; }
.rd-skel-block { margin: 0 14px; border-radius: 16px; background: linear-gradient(#111827, #111827) padding-box; opacity: .5; }
.rd .list-tabs { height: 50px; box-sizing: border-box; flex-wrap: nowrap; }
.rd .row { min-height: 72px; box-sizing: border-box; }
.rd .av { flex: none; }
.rd .tab-count, .rd .rail-badge, .rd .ia-badge, .rd .gm-dot, .rd .row .unread { position: relative; }
.rd .rail .rail-badge, .rd .ia-badge { position: absolute; }
.rd #chats, .rd #log, .rd .rd-feed, .rd .music-view, .rd .fv-list, .rd .pane { scrollbar-gutter: stable; }
.rd img.photo { aspect-ratio: auto 4 / 3; }
/* декоративные бесконечные анимации — выключены */
.rd .ia-badge, .rd .ia-wheel .ia-wheel-ico svg, .rd .gm-q-claim, .rd .gm-flip.pick .gm-in, .rd .ptr-pill .dot::after,
.rd .ia-music-nav .ia-mn-ico svg, .rd .ia-eq b, .rd .mp-eq b, .rd .mv-note, .rd .ia-p-loading::before { animation: none !important; }
/* загрузчики — статичные, без вращения */
.rd .mp-spin, .rd .ptr-ind.loading svg, .rd .ptr-ind.loading .ptr-arc, .rd [class*="spin"]:not(.lw-spinning):not(.lw-spinning *) { animation-iteration-count: 1 !important; }
.rd .mp-spin { border-color: rgba(30,136,255,.35); }
/* окна появляются только прозрачностью (без «прыжка») */
.rd .ia-modal-card { transform: none !important; transition: none; min-height: min(560px, calc(100dvh - 32px)); }
.rd .so-modal .so-card { transform: none !important; }
.rd .rd-feed { animation: rd-fade .15s ease; }
@keyframes rd-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rd *, .rd *::before, .rd *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 760px) { body.rd-kb .m-nav, body.rd-kb .rd-nav, body.rd-kb .ptr-pill { display: none !important; } }

/* ---- MOBILE UI 10.10.2026: кнопка «Лента» вписана в нижний бар ---- */
@media (max-width: 860px) {
  .rd .rd-feed-nav .rd-feed-ring { margin-top: 0 !important; width: 36px !important; height: 36px !important; background: transparent !important; box-shadow: none !important; }
  .rd .rd-feed-nav .rd-feed-ico { width: 36px !important; height: 36px !important; box-shadow: 0 2px 8px rgba(30,136,255,.35); }
  .rd .rd-feed-nav .rd-feed-ico svg { width: 20px !important; height: 20px !important; }
  .rd .rd-feed-nav .rail-label { margin-top: 1px; }
}
/* ---- MOBILE UI 10.10.2026: админ-панель убрана из нижнего бара (остаётся в настройках) ---- */
@media (max-width: 860px) {
  .rail #admin-rail, .rail .admin-link { display: none !important; }
}
/* ===== MOBILE PERF/A11Y 10.10.2026 (backup_all): производительность, текст, фокус, узкие экраны ===== */
/* фокус с клавиатуры виден везде (заменяет outline:none) */
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #22c55e !important; outline-offset: 2px; }
@media (max-width: 860px) {
  /* без размытия: сплошные полупрозрачные фоны */
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .dock { background: rgba(9, 12, 21, .98) !important; }
  .chat-empty { background: rgba(13, 18, 16, .92) !important; }
  .so-modal, .mp-host.big { background: rgba(3, 6, 5, .85) !important; }
  .call-btn.glass { background: rgba(40, 40, 40, .7) !important; }
  /* лёгкие тени */
  .auth-card, .chat-empty, .so-modal > *, .dock, .rail, #ia-top .ia-ad, #ia-top .ia-wheel { box-shadow: 0 2px 8px rgba(0,0,0,.3) !important; }
  /* лёгкий фон вместо SVG 126 КБ */
  .auth { background: linear-gradient(180deg, rgba(11,15,13,.55), rgba(11,15,13,.92)), url("/static/bg-mountains-m.webp") center bottom / cover no-repeat, var(--bg) !important; }
  .stage:has(.empty:not([hidden])) { background: linear-gradient(180deg, rgba(11,15,13,.7), rgba(11,15,13,.86)), url("/static/bg-mountains-m.webp") center bottom / cover no-repeat !important; }
  .thread { background: linear-gradient(180deg, rgba(11,15,13,.55) 0%, rgba(11,15,13,.25) 40%, rgba(11,15,13,.55) 100%), url("/static/bg-mountains-m.webp") center bottom / cover no-repeat, #0b0f0d !important; }
  /* текст: основной 15px, подписи не меньше 13px */
  body { font-size: 15px; }
  .auth p, .auth label, .auth small, .empty-hint, small, .hint, .muted { font-size: max(13px, 1em); }
  .auth label, .empty-hint { font-size: 13px; }
  #ia-top .ia-ad-desc, #ia-top .ia-wheel-text small { font-size: 12.5px; }
}
/* узкие экраны (до 380px) */
@media (max-width: 380px) {
  .shell .rail .rail-item { padding: 3px 0 2px; }
  .shell .rail .rail-item .rail-label, .shell .rail .ia-label { font-size: 10px; letter-spacing: -.1px; }
  .shell .rail .rail-items > * { min-width: 40px; }
  #ia-top { gap: 6px; padding: 2px 8px 6px; }
  #ia-top .ia-ad, #ia-top .ia-wheel { padding: 6px 8px; gap: 6px; }
  #ia-top .ia-ad { padding-right: 24px; }
  #ia-top .ia-ad-ava, #ia-top .ia-wheel-ico { width: 26px; height: 26px; }
  #ia-top .ia-ad-name b, #ia-top .ia-wheel-text b { font-size: 12.5px; }
  .auth { padding: 14px; }
  .auth-card { padding: 20px 16px; }
}
/* телефон горизонтально */
@media (orientation: landscape) and (max-height: 500px) {
  .auth { padding: 8px; place-items: start center; overflow-y: auto; }
  .auth-card { padding: 14px 18px; }
  .shell .m-head, .chat-head { min-height: 0; padding-top: 4px; padding-bottom: 4px; }
  .shell .rail { padding-top: 2px; padding-bottom: calc(2px + env(safe-area-inset-bottom)); }
  .shell .rail .rail-items > * { min-height: 40px; }
  .shell .rail .rail-item .rail-label, .shell .rail .ia-label { display: none; }
  #ia-top .ia-ad, #ia-top .ia-wheel { min-height: 48px; }
}
/* Облако на главном экране: скрыто по умолчанию */
html:not(.rd-cloud-on) #rd-cloud { display: none !important; }
.rd-cloud-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; font-size: 14px; cursor: pointer; }
/* ---- 10.10.2026: подписи под кружками историй не обрезаются ---- */
.so-stories { align-items: flex-start; }
.so-st { width: 66px; }
.so-st small { display: block; width: 100%; max-width: 66px; font-size: 11.5px !important; line-height: 1.25; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 1px; }
.rd .so-stories { height: auto !important; min-height: 96px; padding-top: 8px; padding-bottom: 10px; overflow-y: visible; }
/* ---- 10.10.2026: ровные круглые кружки в блоке историй под сортировкой ---- */
.so-stories { gap: 8px; }
.so-st { flex: 0 0 66px !important; min-width: 0 !important; min-height: 0 !important; }
.so-ring, .so-tool { box-sizing: border-box !important; flex: none !important; width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; aspect-ratio: 1 / 1; border-radius: 50% !important; padding: 2.5px; overflow: hidden; margin: 0 auto; }
.so-tool { padding: 0; }
.so-ring > .av, .so-ring .av { box-sizing: border-box !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; border-radius: 50% !important; aspect-ratio: 1 / 1; }
.so-ring .av img, .so-ring img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; }
.so-tool svg { width: 24px; height: 24px; }
/* ---- 10.10.2026: подписи под кружками видны и не перекрываются ---- */
.so-stories, .rd .so-stories { position: relative; z-index: 2; box-sizing: border-box !important; height: auto !important; min-height: 106px !important; max-height: none !important; padding: 8px 12px 14px !important; margin-bottom: 6px !important; overflow-y: hidden; align-items: flex-start !important; }
.so-st { height: auto !important; max-height: none !important; gap: 6px !important; justify-content: flex-start; }
.so-st small { position: relative; z-index: 1; display: block !important; height: auto; min-height: 15px; line-height: 15px !important; color: var(--text, #e8eeea) !important; opacity: .82; visibility: visible !important; }
.so-stories + * { margin-top: 0 !important; }
/* ---- 10.10.2026: диалоги чуть выше ---- */
.so-stories, .rd .so-stories { min-height: 96px !important; padding-top: 4px !important; padding-bottom: 8px !important; margin-bottom: 0 !important; }
#chats-pane .list-tabs { padding-top: 0 !important; padding-bottom: 4px !important; }
#chats-pane .rd-cloud { margin-top: 0 !important; margin-bottom: 4px !important; }
#chats-pane .chats, #chats { margin-top: 0 !important; padding-top: 0 !important; }
/* CLOUDBAR: состояния баннера без скачков (высота фиксирована выше) */
.rd-cloud .rd-cl-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rd-cloud.rd-cl-load .rd-cl-txt { opacity: .6; }
.rd-cloud.rd-cl-err .rd-cl-txt { color: #ff8a80; }
.rd-cloud .rd-cl-bar i { transition: width .35s ease; }
.rd-cloud.rd-cl-warn .rd-cl-txt { color: #ffb74d; }

/* MOBNAV (streams v3): на телефоне «Настройки» убраны из нижней панели — вход через аватар «Профиль и настройки» в шапке */
@media (max-width: 860px) { .rd .shell .rail .rail-items #menu-btn { display: none !important; } }