/* Единственный набор теней: --elev-1 для «парящих» панелей (хедеры, композер),
     --elev-2 для модалок/драверов/попапов. Заменяет ad-hoc box-shadow по файлу. */
  :root{
    --elev-1:0 1px 2px rgba(17,17,20,.06);
    --elev-2:0 10px 28px -10px rgba(17,17,20,.22),0 2px 6px rgba(17,17,20,.06);
  }
  html,body{height:100%}
  body{background:var(--bg);margin:0}
  /* в режиме приложения весь сайт не скроллим — скроллится только
     история чата и список контактов внутри своих контейнеров */
  /* высота = видимая область: на мобиле сжимается под клавиатуру (см. JS
     visualViewport), иначе композер уезжает под неё. Фолбэк — dvh/vh. */
  body.app-on{overflow:hidden;height:100vh;height:100dvh;height:var(--vh-app,100dvh)}

  /* ---------- screens ---------- */
  #landing{display:none}#landing.on{display:block}
  #app{display:none}#app.on{display:grid}

  /* ---------- landing (стиль основного сайта) ---------- */
  header.nav-bar{position:sticky;top:0;z-index:50;background:rgba(244,244,245,.8);
    backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .nav-bar .wrap{display:flex;align-items:center;gap:24px;height:66px}
  .nav-bar a.lnk{color:var(--text-2);font-weight:500;font-size:14px}
  .nav-bar a.lnk:hover{color:var(--text)}
  .hero{padding:clamp(34px,5vw,60px) 0 clamp(48px,8vw,96px)}
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:52px;align-items:center}
  .htext,.preview{min-width:0}
  .htext .h1{margin-top:16px;max-width:15ch}
  .htext .lead{margin-top:18px;max-width:46ch}

  /* быстрый онбординг прямо в hero */
  .ob{margin-top:28px;max-width:420px}
  .ob .input{width:100%;box-sizing:border-box}
  .ob .row2{display:flex;gap:10px;margin-top:12px}
  .ob .row2 .input{flex:1}
  .ob .hint{color:var(--muted);font-size:12.5px;margin-top:10px}
  .codebox{font-family:var(--display);font-weight:800;font-size:16px;
    background:var(--accent-soft);border:1px dashed var(--line-2);
    border-radius:var(--radius-xs);padding:12px 14px;word-break:break-all;
    text-align:center;margin:14px 0 6px;cursor:pointer;position:relative;
    transition:border-color .15s ease,background .15s ease;user-select:all}
  .codebox:hover{border-color:var(--accent)}
  .codebox.copied{border-style:solid;border-color:var(--good);background:rgba(34,197,94,.1)}
  .codehint{color:var(--muted);font-size:12px;text-align:center;margin:0 0 12px;
    display:flex;align-items:center;justify-content:center;gap:5px}
  .codehint.ok{color:var(--good);font-weight:600}
  .lnks{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
  .lnks a{flex:1;text-align:center;text-decoration:none;white-space:nowrap}
  .err{color:var(--bad);font-size:13px;margin-top:10px;min-height:17px}

  /* превью интерфейса мессенджера — парящая карточка */
  .preview{display:flex;justify-content:center}
  .pv{width:100%;max-width:480px;background:var(--card);border:1px solid var(--line);
    border-radius:20px;overflow:hidden;display:grid;grid-template-columns:150px 1fr;
    height:380px;box-shadow:0 22px 44px -14px rgba(17,17,20,.25),
    0 4px 12px rgba(17,17,20,.07)}
  .pv-l{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
  .pv-lh{padding:13px 14px;border-bottom:1px solid var(--line);
    font-family:var(--display);font-weight:800;font-size:13px}
  .pv-c{display:flex;align-items:center;gap:9px;padding:10px 12px;
    border-bottom:1px solid var(--line)}
  .pv-c.sel{background:var(--accent-soft)}
  .pv-av{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);
    display:flex;align-items:center;justify-content:center;font-size:15px;
    flex:none;position:relative}
  .pv-av .d{position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;
    border-radius:50%;background:var(--good);border:2px solid var(--card)}
  .pv-cn{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .pv-cp{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;margin-top:1px}
  .pv-bdg{margin-left:auto;background:var(--accent);color:#fff;font-size:10px;
    font-weight:700;min-width:16px;height:16px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;padding:0 4px;flex:none}
  .pv-r{display:flex;flex-direction:column;min-width:0;background:var(--bg)}
  .pv-rh{padding:11px 14px;border-bottom:1px solid var(--line);background:var(--card);
    display:flex;align-items:center;gap:9px}
  .pv-rn{font-size:12.5px;font-weight:700}
  .pv-rs{font-size:10.5px;color:var(--good)}
  .pv-msgs{flex:1;padding:14px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
  .pv-b{max-width:74%;padding:7px 11px;border-radius:14px;font-size:12px;line-height:1.35}
  .pv-b.them{align-self:flex-start;background:var(--card);border:1px solid var(--line)}
  .pv-b.me{align-self:flex-end;background:var(--accent);color:#fff}
  .pv-comp{padding:9px 12px;border-top:1px solid var(--line);background:var(--card);
    display:flex;gap:8px;align-items:center}
  .pv-comp .f{flex:1;background:var(--card-2);border:1px solid var(--line-2);
    border-radius:999px;padding:7px 12px;font-size:11px;color:var(--muted)}
  .pv-comp .s{width:28px;height:28px;border-radius:50%;background:var(--accent);
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:12px;flex:none}
  /* секция возможностей */
  .feats{padding:0 0 clamp(44px,8vw,90px)}
  .feats .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
  .feat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:20px;transition:transform .2s ease,box-shadow .2s ease}
  .feat:hover{transform:translateY(-3px);
    box-shadow:0 14px 30px -12px rgba(17,17,20,.18)}
  .feat .ic{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);
    display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:13px}
  .feat .ft{font-family:var(--display);font-weight:800;font-size:15px}
  .feat .fp{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.45}
  @media(max-width:760px){.feats .grid{grid-template-columns:1fr}}
  footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);
    font-size:12px}
  footer .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center;
    justify-content:center;opacity:.65}
  footer a{text-decoration:underline;text-underline-offset:2px}

  @media(max-width:920px){
    .hero .wrap{grid-template-columns:minmax(0,1fr);gap:34px}
    .htext .h1,.htext .lead,.ob{margin-left:0;margin-right:0}
    .preview{max-width:560px;margin:0 auto;width:100%}
  }
  @media(max-width:520px){
    .htext .h1{font-size:clamp(26px,7.4vw,34px);max-width:100%}
    .pv{grid-template-columns:120px 1fr;height:330px}
    .nav-bar .wrap{gap:10px;height:58px}
  }

  /* ---------- app (3-пейн) ---------- */
  #app{height:100vh;height:100dvh;height:var(--vh-app,100dvh);
    grid-template-columns:340px 1fr;grid-template-rows:1fr;
    max-height:100vh;max-height:100dvh;max-height:var(--vh-app,100dvh);
    overflow:hidden}
  #app .lhead,.lfoot,.rhead,.composer,.rec-bar,.attach,.edbar{flex:none}
  /* min-height:0 на колонках и скролл-зонах — иначе flex:1-дитя «толкает»
     композер ниже вьюпорта (его не видно из-за overflow:hidden) */
  .col-l{border-right:1px solid var(--line);display:flex;flex-direction:column;
    background:var(--card);min-width:0;min-height:0;height:100%}
  .col-r{display:flex;flex-direction:column;min-width:0;background:var(--bg);
    min-height:0;height:100%}
  /* зона перетаскивания файлов: backdrop достаточно плотный, чтобы гасить
     лежащие под ним пузыри .b.me (которые тоже в --accent — иначе текст
     «Отпустите...» сливался с собственным сообщением). + blur для премиум-
     ощущения. Светлая и тёмная — разные подложки. */
  .col-r.dropping{position:relative}
  .col-r.dropping::after{content:'Отпустите — прикрепим картинку';
    position:absolute;inset:12px;border:2px dashed var(--accent);border-radius:18px;
    background:rgba(255,255,255,.90);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    display:flex;align-items:center;justify-content:center;color:var(--accent);
    font-weight:700;font-size:15px;z-index:30;pointer-events:none}
  html[data-theme-resolved="dark"] .col-r.dropping::after{
    background:rgba(20,20,26,.90)}
  .lhead{padding:16px 18px;box-shadow:var(--elev-1);
    display:flex;align-items:center;gap:12px;position:relative;z-index:1}
  .lhead .ttl{font-family:var(--display);font-weight:800;font-size:16px}
  .clist{flex:1;overflow-y:auto;min-height:0;overscroll-behavior:contain;touch-action:pan-y}
  .crow{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer}
  /* Тонкая разделительная линия только МЕЖДУ рядами и сдвинута за аватарку,
     чтобы не выглядеть «сеткой». Раньше border-bottom давал жирную решётку. */
  .crow + .crow{background-image:linear-gradient(var(--line),var(--line));
    background-size:calc(100% - 56px) 1px;background-position:56px 0;
    background-repeat:no-repeat}
  .crow:hover{background:var(--card-2)}
  .crow.sel{background:var(--accent-soft)}
  .ava{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);
    display:flex;align-items:center;justify-content:center;font-size:22px;
    flex-shrink:0;position:relative;overflow:visible}
  .ava>img{width:100%;height:100%;border-radius:50%;object-fit:cover}
  .ava .dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;
    border-radius:50%;background:var(--good);border:2px solid var(--card);
    z-index:2}
  .cmid{flex:1;min-width:0}
  .cname{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cprev{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;margin-top:2px}
  .cright{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
  .ctime{color:var(--muted);font-size:11px}
  .badge{background:var(--accent);color:#fff;font-size:11px;font-weight:700;
    min-width:18px;height:18px;border-radius:9px;padding:0 5px;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s ease}
  /* приглушённый счётчик для muted-чатов: не оттягивает внимание */
  .crow.muted{opacity:.72}
  .crow.muted .badge{background:var(--card-2);color:var(--muted);font-weight:600}
  /* бейдж подписки НуКста = голографический gif как на itd.com.
     Картинка единственный источник истины — никаких CSS-градиентов. */
  .nuks{width:16px;height:16px;display:inline-block;vertical-align:-3px;
    margin-left:5px;flex:none;user-select:none;pointer-events:none}
  .rhead .nm .nuks{width:18px;height:18px;vertical-align:-4px;margin-left:6px}
  .pc-nm .nuks{width:22px;height:22px;vertical-align:-5px;margin-left:8px}
  .rhead{padding:13px 18px;box-shadow:var(--elev-1);background:var(--card);
    display:flex;align-items:center;gap:12px;position:relative;z-index:1}
  .rhead .nm{font-weight:700}
  .rhead .st{color:var(--muted);font-size:12px}
  .iconbtn{background:none;border:0;cursor:pointer;font-size:18px;color:var(--text-2);
    padding:6px;border-radius:8px;text-decoration:none;position:relative}
  /* невидимая ≥44px hit-area — Apple HIG / Material требуют ≥44×44.
     Визуальный размер кнопки не меняется. */
  .iconbtn::before{content:"";position:absolute;inset:-7px}
  /* В композере gap:7px, hit-area соседних кнопок не должна
     перекрываться (иначе тап рядом с plus случайно тригерит voc).
     -3px = чистый зазор 1px между hit-зонами. */
  .composer .iconbtn::before{inset:-3px}
  .iconbtn:hover{background:var(--accent-soft)}
  .menu{position:absolute;right:14px;top:54px;background:var(--card);
    border:1px solid var(--line);border-radius:var(--radius-sm);
    box-shadow:var(--elev-2);z-index:9;display:none;overflow:hidden}
  .menu.on{display:block}
  .menu div{padding:10px 18px;cursor:pointer;font-size:14px}
  .menu div:hover{background:var(--accent-soft)}
  /* мини-меню «+» над композером: позиционируется относительно .composer */
  .plus-sheet{left:10px;top:auto;bottom:calc(100% + 6px);right:auto;min-width:172px}
  /* нажатие на ряд/кнопку — короткий «вдавливаемый» отклик. Подхватывается
     делегированным pointerdown/up (см. initPressFeedback в JS). */
  .pressing{transform:scale(.97);transition:transform .08s ease-out}
  /* Skeleton-ряды в чат-листе пока грузится /contacts.
     Лучше blank-flash на холодном старте. */
  .crow.skel{cursor:default;pointer-events:none}
  .crow.skel .ava{background:var(--card-2)}
  .sk-line{height:11px;border-radius:6px;margin:4px 0;
    background:linear-gradient(90deg,var(--card-2),var(--accent-soft),var(--card-2));
    background-size:200% 100%;animation:sk 1.2s linear infinite}
  .sk-line.w70{width:70%}
  .sk-line.w40{width:40%;height:9px;opacity:.7}
  .crow.skel .ava{background-size:200% 100%;animation:sk 1.2s linear infinite}
  @keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
  /* «бамп» бейджа непрочитанных при инкременте — лёгкая анимация-attention */
  @keyframes bump{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
  .badge.bump{animation:bump .22s ease-out}
  /* картинка проявляется через CSS-blur вместо blank-rect — дёшево и без бэкенда */
  .b img.blur-up{filter:blur(10px);transition:filter .25s ease}
  .b img.blur-up.loaded{filter:none}
  .msgs{flex:1;overflow-y:auto;min-height:0;padding:18px;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain;touch-action:pan-y}
  /* строка сообщения: аватар-колонка (вход.) + пузырь, как в Telegram */
  /* flex-wrap:wrap — чтобы .reacts (flex-basis:100%) уезжал на новую строку
     ПОД пузырём, не расширяя его. До этого был .bcol-wrapper, но он с
     min-width:0 сжимался к min-content и пинчил .b ниже его max-width. */
  .mrow{display:flex;align-items:flex-end;gap:8px;max-width:100%;flex-wrap:wrap}
  .mrow.them{justify-content:flex-start}
  .mrow.me{justify-content:flex-end}
  .mrow.ge{margin-bottom:9px}     /* отступ после последнего в серии */
  .mav{width:30px;height:30px;flex:none;border-radius:50%;
    background:var(--accent-soft);display:flex;align-items:center;
    justify-content:center;font-size:15px;overflow:hidden;align-self:flex-end}
  .mav:empty{background:transparent}   /* спейсер у не-последних — невидим */
  .mav>img{width:100%;height:100%;object-fit:cover}
  /* overflow-wrap:break-word (а не anywhere!) — слова переносятся ТОЛЬКО когда
     не помещаются целиком; короткие слова не рубятся посреди. `anywhere`
     ранее ломал слова после 5 символов даже когда места хватало (жалоба
     2026-05-26). */
  .b{max-width:min(560px,68%);padding:8px 13px;border-radius:18px;font-size:14px;
    line-height:1.4;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap;position:relative;
    -webkit-touch-callout:none;touch-action:pan-y;
    /* короткий timing для «отпружинить обратно» когда .pressing снимается */
    transition:transform .22s cubic-bezier(.2,.7,.2,1)}
  /* Telegram-style: пузырь сжимается ПРОГРЕССИВНО все ~280мс long-press,
     не «бамп» в начале. .28s транзишн совпадает с таймером — к моменту
     срабатывания пузырь как раз на максимуме (.94). Отпустил раньше —
     короткая .22s транзишн (с .b базовой) возвращает к 1.0. */
  .b.pressing{transform:scale(.94);
    transition:transform .28s cubic-bezier(.4,0,.6,1);
    -webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;touch-action:none}
  /* На картинках scale .94 был визуально как «трясёт» (большой пузырь дёргается
     на 6%). Отключаем сжатие для медиа-пузырей — long-press всё равно работает
     (lp-pressing ловится на html), просто без visual squeeze на самой картинке. */
  .b.media.pressing{transform:none}
  /* во время свайпа-для-ответа палец «ведёт» пузырь без сглаживания */
  .b.swiping{transition:none}
  .b.media img{-webkit-touch-callout:default}   /* картинку — можно «сохранить» */
  /* на тач-экранах гасим нативное выделение текста — иначе долгое нажатие
     запускает системную лупу/выделение и перебивает меню действий.
     На десктопе (точный курсор) выделение мышью остаётся. */
  @media (pointer:coarse){
    .b{-webkit-user-select:none;user-select:none}
    .b.media img{-webkit-user-select:auto;user-select:auto}
  }
  /* «Глушилка» нативной long-press selection / iOS-лупы / double-tap zoom.
     Класс ставится на <html> на pointerdown и снимается на отпускании.
     !important — чтобы перебить любую более специфичную выборку (включая
     старые правки в style.css). На <html> + потомки — чтобы захватить и
     bm-pop, и любые async-всплывающие элементы. */
  html.lp-pressing, html.lp-pressing *,
  html.lp-active, html.lp-active *{
    -webkit-user-select:none !important; user-select:none !important;
    -webkit-touch-callout:none !important;
  }
  .b.them{background:var(--card);border:1px solid var(--line)}
  .b.me{background:var(--accent);color:#fff}
  /* группировка: смежные пузыри одной серии — «слипшиеся» углы */
  .b.them:not(.gf){border-top-left-radius:7px}
  .b.them:not(.gl){border-bottom-left-radius:7px}
  .b.me:not(.gf){border-top-right-radius:7px}
  .b.me:not(.gl){border-bottom-right-radius:7px}
  /* Время сообщения «обтекается» текстом — float:right ⇒ если последняя строка
     текста короткая, время висит на ней же; если длинная — переходит на
     отдельную строку внутри пузыря. Без расширения облака. (Telegram-style.)
     .b теперь — flow-root (clearfix), чтобы float не «вытекал». */
  .b{display:flow-root}
  .b > .bt{
    float:right;display:inline-flex;align-items:center;gap:4px;
    margin:3px 0 -2px 8px;
    font:500 11px/1 var(--font);color:var(--muted);
    white-space:nowrap;opacity:.85;
  }
  .b.me > .bt{color:rgba(255,255,255,.78)}
  /* медиа-bubble (kind!=text): .bt у нас уже в правом нижнем углу под изображением,
     там float может конфликтовать со скруглением картинки — оставляем block-fallback. */
  .b.media:not(.hascap) > .bt{
    float:none;display:flex;justify-content:flex-end;margin:4px 0 0;
  }
  /* галочки доставки/прочтения */
  .ckwrap{display:inline-flex;align-items:center}
  .ck{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;
    stroke-linejoin:round;opacity:.75}
  /* «прочитано» = двойная галочка той же тушью + полная непрозрачность;
     цвет не разводим (раньше был #34b7f1 — конкурировал с акцентом) */
  .ck.rd{opacity:1}
  .b.me .ck{stroke:rgba(255,255,255,.85)}
  .sep{align-self:center;color:var(--muted);font-size:12px;margin:10px 0}
  /* @упоминания */
  .mention{color:var(--accent);font-weight:600}
  .b.me .mention{color:#fff;text-decoration:underline}
  /* линкифицированные URL в теле сообщения. На своём пузыре (.b.me) текст
     белый, поэтому ссылка — белая с подчёркиванием; на чужом — accent. */
  .b .lnk{color:var(--accent);text-decoration:underline;word-break:break-word}
  .b.me .lnk{color:#fff;text-decoration:underline}
  .b .lnk:hover{filter:brightness(.92)}
  .b.me .lnk:hover{filter:brightness(.95)}
  .mention.me{background:var(--accent);color:#fff;border-radius:5px;padding:0 4px}
  .b.me .mention.me{background:#fff;color:var(--accent);text-decoration:none}
  .composer{padding:12px 16px;background:var(--card);
    box-shadow:0 -1px 2px rgba(17,17,20,.06);
    display:flex;gap:10px;align-items:flex-end;position:relative;z-index:1}
  /* выпадашка автодополнения @ */
  .mention-pop{position:absolute;bottom:calc(100% + 4px);left:12px;right:12px;
    max-height:220px;overflow-y:auto;background:var(--card);border:1px solid var(--line);
    border-radius:14px;box-shadow:var(--shadow);z-index:25;padding:5px}
  .mn-it{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
    cursor:pointer;font-size:13.5px}
  .mn-it:hover,.mn-it.sel{background:var(--accent-soft)}
  .mn-av{width:30px;height:30px;flex:none;border-radius:50%;background:var(--accent-soft);
    display:flex;align-items:center;justify-content:center;font-size:15px}
  .mn-un{color:var(--muted);margin-left:4px}
  .composer textarea{flex:1;resize:none;max-height:130px;font:inherit;
    border:1px solid var(--line-2);border-radius:var(--radius-xs);
    padding:11px 14px;outline:none;background:var(--card-2)}
  .composer .iconbtn{padding:8px;flex:none;border-radius:10px;
    color:var(--text-2);display:flex;align-items:center;
    justify-content:center;touch-action:none}
  .composer .iconbtn:hover{color:var(--text)}
  .composer .iconbtn svg{width:22px;height:22px;display:block}
  .composer .iconbtn.recording{background:var(--bad-bg);color:var(--bad);
    transform:scale(1.08)}
  .rec-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;
    border-top:1px solid var(--line);background:var(--card-2);
    font-size:13px;color:var(--bad);flex:none}
  .rec-bar .dot{width:10px;height:10px;border-radius:50%;
    background:var(--bad);animation:recpulse 1s ease-in-out infinite}
  @keyframes recpulse{0%,100%{opacity:1}50%{opacity:.3}}
  .rec-bar .hint{color:var(--muted);font-size:12px;font-weight:500}
  .attach{display:flex;gap:8px;padding:8px 14px;border-top:1px solid var(--line);
    background:var(--card);overflow-x:auto;flex:none}
  .attach .thumb{position:relative;width:62px;height:62px;border-radius:10px;
    overflow:hidden;flex:none;border:1px solid var(--line);background:var(--card-2)}
  .attach .thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .attach .thumb .x{position:absolute;right:3px;top:3px;width:18px;height:18px;
    border-radius:50%;background:rgba(17,17,20,.62);color:#fff;font-size:11px;
    line-height:1;display:flex;align-items:center;justify-content:center;
    cursor:pointer;border:0;padding:0}
  /* меню действий «⋯» на СВОИХ сообщениях */
  .b.own{position:relative}
  .bmore{position:absolute;top:-9px;right:-9px;width:22px;height:22px;
    border-radius:50%;background:rgba(17,17,20,.72);color:#fff;border:0;
    font-size:12px;line-height:1;padding:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .12s ease}
  .b.own:hover .bmore{opacity:1}
  @media(hover:none){ .bmore{opacity:.7} }
  /* контекст-меню: прозрачный контейнер с двумя «карточками» (как в ТГ) */
  .bm-pop{position:absolute;z-index:30;display:none;background:transparent;
    /* пока меню открыто — ВСЁ внутри без выделения/лупы/double-tap-zoom;
       так палец, который водится по меню после long-press, не триггерит
       нативную систему выделения текста Safari/Chrome */
    -webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;touch-action:manipulation}
  .bm-pop *{-webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;touch-action:manipulation}
  .bm-pop.on{display:flex;flex-direction:column;gap:8px;
    animation:bmIn .26s cubic-bezier(.16,.84,.44,1) both}
  .bm-pop.closing{animation:bmOut .14s cubic-bezier(.4,0,.6,1) forwards;pointer-events:none}
  /* Меню «вырастает» из пузыря: transform-origin задаём в placePopup,
     scale от .7 → 1, opacity 0 → 1 (прозрачность набирает полную раньше
     скейла — меньше «pop-in», больше «выдоха»). */
  @keyframes bmIn{
    0%   {opacity:0; transform:scale(.7)}
    55%  {opacity:1}
    100% {opacity:1; transform:scale(1)}}
  @keyframes bmOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.94)}}
  /* drag-to-item: палец водится по меню после удержания — пункт под
     пальцем подсвечивается; на отпускании срабатывает (см. attachLongPress) */
  .bm-menu button.lp-hover{background:var(--accent-soft)}
  .bm-react .re.lp-hover{transform:scale(1.25);background:var(--accent-soft)}
  /* плавающая капсула реакций НАД меню */
  .bm-react{display:flex;gap:3px;padding:6px 9px;background:var(--card);
    border:1px solid var(--line);border-radius:999px;box-shadow:var(--elev-2);
    width:max-content}
  .bm-react .re{border:0;background:transparent;cursor:pointer;font-size:21px;
    line-height:1;padding:3px 4px;border-radius:50%;transition:transform .1s}
  .bm-react .re:hover{transform:scale(1.25)}
  /* карточка действий */
  .bm-menu{background:var(--card);border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--elev-2);overflow:hidden;min-width:196px}
  .bm-menu button{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
    border:0;background:transparent;font:500 14px/1.2 var(--font);
    padding:11px 16px;cursor:pointer;color:var(--text)}
  .bm-menu button:hover{background:var(--accent-soft)}
  .bm-menu .mi{display:inline-flex;color:var(--text-2)}
  .bm-menu .danger{color:var(--bad)}
  .bm-menu .danger .mi{color:var(--bad)}
  /* чипы реакций под пузырём */
  /* Реакции — sibling .b в .mrow с flex-basis:100% (forces новая строка).
     Negative margin-top — лёгкий overlap с нижним краем bubble. justify-content
     управляется отдельно для me/them. */
  .reacts{display:flex;flex-wrap:wrap;gap:4px;
    flex-basis:100%;margin:-8px 0 0;
    padding:0 12px;position:relative;z-index:1}
  .mrow.me .reacts{justify-content:flex-end}
  .mrow.them .reacts{justify-content:flex-start;padding-left:48px}  /* отступ под аватар */
  /* Floating heart при двойном тапе по пузырю на мобиле (как TG/Instagram).
     Появляется в центре .b, увеличивается и уезжает вверх + fade-out за 700мс.
     pointer-events:none чтобы не блокировать последующие тапы. */
  .b{position:relative}
  .tap-heart{
    position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%) scale(.2);
    font-size:48px;line-height:1;pointer-events:none;
    z-index:5;opacity:0;
    animation:tapHeart .7s cubic-bezier(.2,.7,.2,1) forwards;
    text-shadow:0 2px 8px rgba(0,0,0,.18);
  }
  @keyframes tapHeart{
    0%   {transform:translate(-50%,-50%) scale(.2);opacity:0}
    25%  {transform:translate(-50%,-50%) scale(1.25);opacity:1}
    60%  {transform:translate(-50%,-90%) scale(1.05);opacity:1}
    100% {transform:translate(-50%,-180%) scale(.85);opacity:0}
  }
  /* Чип реакции = «отдельный кружок» под пузырём:
     белый/тёмный фон + тонкая рамка + лёгкая тень. Не наследует фон bubble
     (т.к. .rchip больше НЕ child .b — раньше для .b.me был белый фон, теперь
     чип сам по себе, нейтральный). */
  .rchip{font:600 11.5px/1 var(--font);padding:4px 9px;border-radius:999px;
    cursor:pointer;border:1px solid var(--line);background:var(--card);
    color:var(--text);display:inline-flex;align-items:center;gap:3px;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    transition:.12s ease;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .rchip:hover{border-color:var(--accent);color:var(--accent)}
  /* Свой голос — заливка accent-ом */
  .rchip.mine{background:var(--accent);color:#fff;border-color:var(--accent)}
  .rchip.mine:hover{filter:brightness(1.06);color:#fff}
  /* Dark-тема: фон чуть светлее карточки чтобы кружок был виден */
  html[data-theme-resolved="dark"] .rchip{background:var(--card-2);
    border-color:rgba(255,255,255,.10)}
  html[data-theme-resolved="dark"] .rchip:hover{border-color:var(--accent);color:var(--accent)}
  /* заголовок пересланного */
  .b .fwdh{font-size:11.5px;font-weight:700;color:var(--accent);
    margin-bottom:3px;opacity:.9}
  .b.me .fwdh{color:#fff;opacity:.85}
  /* превью-карточка поста ИТД (unfurl ссылки) — белая «репост»-карточка
     внутри пузыря; всегда читаемая независимо от цвета пузыря */
  .itdcard{display:block;margin-top:8px;border:1px solid var(--line);
    border-radius:12px;overflow:hidden;background:var(--card);color:var(--text);
    text-decoration:none;max-width:300px}
  .b.me .itdcard{border-color:rgba(255,255,255,.35)}
  .itdcard.loading{padding:11px 13px;font-size:12.5px;color:var(--muted)}
  .itdcard .ic-h{display:flex;align-items:center;gap:8px;padding:9px 11px 7px}
  .itdcard .ic-av{width:24px;height:24px;border-radius:50%;flex:none;
    background:var(--accent-soft);display:flex;align-items:center;
    justify-content:center;font-size:13px}
  .itdcard .ic-nm{font-weight:700;font-size:12.5px;color:var(--text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .itdcard .ic-img{width:100%;max-height:200px;object-fit:cover;display:block}
  .itdcard .ic-tx{padding:8px 11px;font-size:13px;line-height:1.4;
    color:var(--text-2);white-space:pre-wrap;word-break:break-word}
  .itdcard .ic-f{padding:7px 11px;font-size:11px;color:var(--accent);
    font-weight:600;border-top:1px solid var(--line)}
  /* просмотрщик картинок (лайтбокс) — поверх всего, не новая вкладка */
  .lbox{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:90;display:none;
    align-items:center;justify-content:center;padding:18px;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .lbox.on{display:flex;animation:pcOv .15s ease}
  .lbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;
    box-shadow:0 12px 40px rgba(0,0,0,.5)}
  .lbox-x{position:absolute;top:14px;right:16px;width:40px;height:40px;border:0;
    border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:18px;
    cursor:pointer;display:flex;align-items:center;justify-content:center}
  .lbox-x:hover{background:rgba(255,255,255,.28)}
  /* модалка подтверждения (в стиле карточек приложения) */
  .cfm-ov{position:fixed;inset:0;background:rgba(17,17,20,.46);z-index:95;
    display:none;align-items:center;justify-content:center;padding:18px;
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .cfm-ov.on{display:flex;animation:pcOv .16s ease}
  .cfm{width:100%;max-width:360px;background:var(--card);border-radius:18px;
    box-shadow:0 24px 60px -16px rgba(17,17,20,.4);padding:22px 22px 18px;
    text-align:center}
  .cfm-ov.on .cfm{animation:pcIn .26s cubic-bezier(.2,.75,.2,1)}
  .cfm-t{font-family:var(--display);font-weight:800;font-size:17px;margin-bottom:8px}
  .cfm-b{font-size:13.5px;line-height:1.5;color:var(--text-2);margin-bottom:18px}
  .cfm-act{display:flex;gap:10px}
  .cfm-act .btn{flex:1}
  .btn-danger{background:var(--bad);color:#fff;border:0}
  .btn-danger:hover{filter:brightness(.95)}
  /* закреплённое сообщение — баннер под шапкой */
  .pinbar{display:flex;align-items:center;gap:10px;padding:8px 14px;flex:none;
    border-bottom:1px solid var(--line);background:var(--card);cursor:pointer}
  .pinbar .pic{font-size:15px}
  .pinbar .pmid{flex:1;min-width:0;border-left:2px solid var(--accent);padding-left:9px}
  .pinbar .pwho{font-size:11.5px;font-weight:700;color:var(--accent)}
  .pinbar .ptxt{font-size:12.5px;color:var(--text-2);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .pinbar .x{border:0;background:transparent;cursor:pointer;color:var(--muted);
    font-size:13px;padding:4px}
  /* поиск по чату */
  .iconbtn.rsearch{padding:8px;color:var(--text-2)}
  .iconbtn.rsearch svg{width:19px;height:19px}
  /* persistent voice player (живёт в шапке чата, переживает переключение чата) */
  .vplbar{display:flex;align-items:center;gap:10px;padding:8px 14px;flex:none;
    border-bottom:1px solid var(--line);background:var(--accent-soft)}
  .vpl-btn{border:0;background:var(--accent);color:#fff;cursor:pointer;
    width:32px;height:32px;border-radius:50%;font:600 13px/1 var(--font);
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    transition:filter .14s}
  .vpl-btn:hover{filter:brightness(1.07)}
  .vpl-from{font:600 12px/1.2 var(--font);color:var(--text);max-width:120px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none}
  .vpl-prog{flex:1;height:4px;background:rgba(0,0,0,.12);border-radius:2px;
    overflow:hidden;cursor:pointer;min-width:40px}
  html[data-theme-resolved="dark"] .vpl-prog{background:rgba(255,255,255,.18)}
  .vpl-fill{height:100%;background:var(--accent);width:0%;transition:width .12s linear}
  .vpl-time{font:500 11.5px/1 var(--font);color:var(--text-2);min-width:34px;
    text-align:right;flex:none;font-variant-numeric:tabular-nums}
  .vpl-speed{border:1px solid var(--line-2);background:transparent;cursor:pointer;
    border-radius:8px;padding:3px 7px;font:600 11px/1 var(--font);color:var(--text-2);
    min-width:30px}
  .vpl-speed:hover{border-color:var(--accent);color:var(--accent)}
  .vpl-x{border:0;background:transparent;cursor:pointer;color:var(--muted);
    font-size:14px;padding:2px 6px}
  .vpl-x:hover{color:var(--bad)}
  /* Громкость голосовых: слайдер хранится в localStorage и применяется ко всем
     audio-проигрываниям. Кнопка 🔊/🔈/🔇 = мгновенный mute-toggle. */
  .vpl-vol-btn{border:0;background:transparent;cursor:pointer;color:var(--text-2);
    font-size:14px;padding:2px 4px}
  .vpl-vol-btn:hover{color:var(--accent)}
  .vpl-vol{flex:none;width:78px;cursor:pointer;accent-color:var(--accent)}

  /* #edit 5: multi-select toolbar + выделенный пузырь.
     Полоса вставляется сразу под rhead через _renderSelectBar; visual style
     совпадает с rhead — чтобы выглядело как «вторая шапка». */
  .selbar{display:flex;align-items:center;gap:10px;padding:9px 14px;flex:none;
    background:var(--accent-soft);border-bottom:1px solid var(--line);
    position:relative;z-index:5}
  .selbar #sb-x{border:0;background:transparent;cursor:pointer;color:var(--text);
    font-size:18px;padding:2px 8px;border-radius:6px}
  .selbar #sb-x:hover{background:var(--card)}
  .selbar .sb-cnt{flex:1;font:600 13.5px/1 var(--font);color:var(--text)}
  .selbar .sb-del{border:0;background:var(--bad);color:#fff;cursor:pointer;
    border-radius:8px;padding:7px 14px;font:600 12.5px/1 var(--font)}
  .selbar .sb-del:hover{filter:brightness(1.08)}
  .b.selected{outline:2px solid var(--accent);outline-offset:2px;
    box-shadow:0 0 0 4px var(--accent-soft)}

  /* #edit 6: альбом картинок (kind=album). Grid 2-col для 2-4 фото,
     3-col для 5+. Все картинки aspect-ratio:1 + object-fit:cover чтобы
     одинаково обрезались — компактный «плиточный» вид как в Telegram. */
  .album{display:grid;gap:2px;border-radius:14px;overflow:hidden;
    max-width:min(380px,72%)}
  .album.album-2{grid-template-columns:1fr 1fr}
  .album.album-3{grid-template-columns:1fr 1fr 1fr}
  .album img{display:block;width:100%;aspect-ratio:1;object-fit:cover;
    cursor:zoom-in;background:var(--accent-soft)}
  /* особый layout для 3 фото: первая большая сверху, две внизу */
  .album.album-2.n3{grid-template-columns:1fr 1fr}
  .album.album-2.n3 img:first-child{grid-column:1 / 3;aspect-ratio:2}

  /* #edit ??: опросы. Создание (модалка) + рендер в чате (.poll-card). */
  .pollc-card{max-width:440px}
  .pollc-q{width:100%;padding:10px 12px;border:1px solid var(--line-2);
    border-radius:10px;font:500 14px/1.3 var(--font);background:var(--card);
    color:var(--text);margin-bottom:10px;box-sizing:border-box}
  .pollc-opts{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
  .pollc-opts input{width:100%;padding:8px 30px 8px 12px;border:1px solid var(--line-2);
    border-radius:8px;font:500 13.5px/1.3 var(--font);background:var(--card);
    color:var(--text);box-sizing:border-box}
  .pollc-row{position:relative;display:flex;align-items:center}
  .pollc-row .pollc-x{position:absolute;right:8px;background:transparent;border:0;
    cursor:pointer;color:var(--muted);font-size:14px;padding:2px 4px}
  .pollc-row .pollc-x:hover{color:var(--bad)}
  .pollc-add{margin:4px 0;background:transparent;border:1px dashed var(--line-2);
    color:var(--accent);padding:7px 12px;border-radius:8px;cursor:pointer;
    font:600 12.5px/1 var(--font);width:100%}
  .pollc-add:hover{background:var(--accent-soft)}
  .pollc-multi{display:flex;align-items:center;gap:8px;margin-top:10px;
    font-size:13px;color:var(--text-2);cursor:pointer}
  .poll-card{max-width:340px;display:flex;flex-direction:column;gap:8px;
    padding:4px 0}
  .poll-card .poll-q{font:600 14.5px/1.35 var(--font);color:var(--text)}
  .poll-card .poll-meta{font-size:11.5px;color:var(--muted)}
  .poll-card .poll-opts{display:flex;flex-direction:column;gap:6px}
  .poll-opt{position:relative;display:block;width:100%;text-align:left;
    border:1px solid var(--line-2);background:var(--card);color:var(--text);
    border-radius:10px;padding:9px 12px;cursor:pointer;overflow:hidden;
    font:500 13.5px/1.35 var(--font);
    -webkit-appearance:none;appearance:none}
  .poll-opt:hover{border-color:var(--accent)}
  .poll-opt .poll-bar{position:absolute;left:0;top:0;bottom:0;
    background:var(--accent-soft);z-index:0;transition:width .25s}
  .poll-opt .poll-row{position:relative;z-index:1;display:flex;
    align-items:center;gap:8px;justify-content:space-between}
  .poll-opt.mine{border-color:var(--accent);color:var(--accent);font-weight:600}
  .poll-opt .poll-pct{font-variant-numeric:tabular-nums;font-size:12px;
    color:var(--muted);min-width:38px;text-align:right}
  .poll-opt.mine .poll-pct{color:var(--accent)}
  .poll-card .poll-close-btn{align-self:flex-end;background:transparent;border:0;
    cursor:pointer;color:var(--muted);font-size:12px;text-decoration:underline}
  .poll-card.closed{opacity:.85}
  .poll-card .poll-closed-label{font-size:11.5px;color:var(--muted);font-style:italic}
  /* #edit 7: dark-тема для опросов.
     В пузыре собственного сообщения (.b.me) фон — фирменный accent (синий),
     поэтому опции и текст внутри уходили в чёрный по умолчанию (button user-agent).
     Принудительно ставим контрастные цвета И в light, и в dark.
     Дублируем поверх дарк-темы — гарантия что .b.me .poll-* не наследует невидимое. */
  .b.me .poll-q, .b.me .poll-meta, .b.me .poll-closed-label,
  .b.me .poll-close-btn{color:#fff}
  .b.me .poll-opt{background:rgba(255,255,255,.92);color:var(--accent);
    border-color:rgba(255,255,255,.6)}
  .b.me .poll-opt.mine{background:#fff;border-color:#fff;color:var(--accent)}
  .b.me .poll-opt .poll-bar{background:rgba(74,92,240,.18)}
  .b.me .poll-opt .poll-pct{color:rgba(74,92,240,.78)}
  .b.me .poll-opt.mine .poll-pct{color:var(--accent)}
  /* В тёмной теме базовый .poll-opt уже сидит на var(--card)=тёмный с var(--text)=светлый,
     но Safari иногда теряет это для <button> — явно дублируем. */
  html[data-theme-resolved="dark"] .poll-opt{color:var(--text);background:var(--card-2)}
  html[data-theme-resolved="dark"] .poll-opt .poll-bar{background:rgba(74,92,240,.22)}
  html[data-theme-resolved="dark"] .poll-opt.mine{color:#fff;
    background:rgba(74,92,240,.18);border-color:var(--accent)}
  html[data-theme-resolved="dark"] .poll-opt.mine .poll-pct{color:#fff}
  html[data-theme-resolved="dark"] .poll-q{color:var(--text)}
  /* В моём пузыре в тёмной теме .b.me остался белый — оверрайды из light применяются */

  /* voice-блок в чате — самодостаточный плеер (▶/⏸ + прогресс + время + скорость).
     Шапочный #vpl остаётся как «sticky»-вариант: он появляется ТОЛЬКО когда
     активный mini уехал из вида (IntersectionObserver), чтобы не дублировать UI. */
  /* #edit 3: speed-кнопка убрана из inline-войса — теперь только в #vpl (шапке).
     Сетка пересобрана с 3 колонок на 2 (play | wf/time). */
  .vau-mini{display:inline-grid;
    grid-template-columns:46px 1fr;
    grid-template-rows:auto auto;
    grid-template-areas:"play wf" "play time";
    align-items:center;gap:4px 12px;padding:9px 12px;
    border-radius:16px;background:var(--accent-soft);color:var(--accent);
    font:600 13px/1 var(--font);min-width:200px;max-width:340px;
    transition:filter .14s,outline-color .14s}
  .b.me .vau-mini{background:#fff;color:var(--accent)}
  html[data-theme-resolved="dark"] .vau-mini{background:rgba(255,255,255,.10);color:var(--text)}
  html[data-theme-resolved="dark"] .b.me .vau-mini{background:#fff;color:var(--accent)}
  .vau-mini.playing{outline:2px solid var(--accent);outline-offset:1px}
  .b.me .vau-mini.playing{outline:2px solid #fff}
  /* touch-action:manipulation убирает 300мс click-delay и double-tap-zoom на
     мобилах — «кнопка иногда не нажимается» (#edit 3). */
  .vau-play{grid-area:play;border:0;cursor:pointer;width:46px;height:46px;
    border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;
    align-items:center;justify-content:center;font:600 17px/1 var(--font);
    flex:none;transition:filter .14s,transform .12s;touch-action:manipulation;
    -webkit-tap-highlight-color:transparent}
  .vau-play:hover{filter:brightness(1.07);transform:scale(1.03)}
  /* Telegram-style waveform: ряд столбиков разной высоты, заливаются по progress */
  .vau-wf{grid-area:wf;display:flex;align-items:center;gap:2px;height:28px;
    cursor:pointer;padding:2px 0;min-width:60px;overflow:hidden;
    touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .vau-wf .vau-bar{flex:1 1 0;min-width:2px;max-width:5px;
    background:currentColor;opacity:.32;border-radius:2px;
    transition:opacity .12s linear,background .12s linear}
  .vau-wf .vau-bar.on{opacity:1}
  .vau-time{grid-area:time;font:500 11.5px/1 var(--font);opacity:.78;
    font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
  .vau-time::after{content:'';width:6px;height:6px;border-radius:50%;
    background:currentColor;opacity:.55;flex:none}
  .vau-mini.played .vau-time::after{display:none}
  /* .vau-speed остался только в шапочном #vpl (см. .vpl-speed выше);
     inline-копия удалена в #edit 3. */

  .srchbar{display:flex;align-items:center;gap:8px;padding:8px 14px;flex:none;
    border-bottom:1px solid var(--line);background:var(--card)}
  .srchbar input{flex:1;border:1px solid var(--line-2);border-radius:var(--radius-xs);
    padding:8px 12px;outline:none;background:var(--card-2);font:inherit}
  .srchbar #srch-cnt{font-size:12px;color:var(--muted);white-space:nowrap}
  .srchbar .x{border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:14px}
  /* ↑/↓ навигация по результатам — компактные круглые кнопки */
  .srchbar .srch-nav{border:0;background:transparent;cursor:pointer;
    color:var(--text-2);font:600 14px/1 var(--font);width:24px;height:24px;
    border-radius:6px;display:inline-flex;align-items:center;justify-content:center}
  .srchbar .srch-nav:hover{background:var(--accent-soft);color:var(--accent)}
  .b.hit{outline:2px solid var(--accent);outline-offset:1px}
  .b.dim{opacity:.4}
  /* модалка пересылки */
  .fwd-ov{position:fixed;inset:0;background:rgba(17,17,20,.45);z-index:40;
    display:none;align-items:center;justify-content:center;padding:18px}
  .fwd-ov.on{display:flex}
  /* кастомный confirm — заменяет браузерный confirm() */
  .cc-ov{position:fixed;inset:0;background:rgba(17,17,20,.45);z-index:80;
    display:flex;align-items:center;justify-content:center;padding:18px;
    opacity:0;transition:opacity .14s ease}
  .cc-ov.on{opacity:1}
  .cc-card{background:var(--card);border-radius:14px;box-shadow:var(--shadow);
    width:min(340px,100%);padding:18px 18px 14px;
    transform:translateY(6px);transition:transform .18s ease}
  .cc-ov.on .cc-card{transform:translateY(0)}
  .cc-title{font:700 15px/1.3 var(--font);margin-bottom:6px;color:var(--text)}
  .cc-body{font:400 14px/1.4 var(--font);color:var(--text);margin-bottom:14px;
    white-space:pre-wrap;word-break:break-word}
  .cc-foot{display:flex;justify-content:flex-end;gap:8px}
  .cc-btn{border:0;border-radius:10px;padding:9px 16px;cursor:pointer;
    font:600 13px/1 var(--font);background:transparent;color:var(--text);
    transition:background .14s,color .14s,filter .14s}
  .cc-cancel{color:var(--text-2)}
  .cc-cancel:hover{background:var(--accent-soft)}
  .cc-ok{background:var(--accent);color:#fff}
  .cc-ok:hover{filter:brightness(1.05)}
  .cc-danger{background:var(--bad);color:#fff}
  .cc-danger:hover{filter:brightness(1.05)}
  .fwd-card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);
    width:min(380px,100%);max-height:78vh;display:flex;flex-direction:column;overflow:hidden}
  .fwd-head{display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px;font-weight:700;border-bottom:1px solid var(--line)}
  .fwd-head .x{border:0;background:transparent;cursor:pointer;font-size:15px;color:var(--muted)}
  .fwd-card input{margin:12px 16px 6px;border:1px solid var(--line-2);
    border-radius:12px;padding:11px 14px;outline:none;background:var(--card-2);
    font:inherit;color:var(--text);transition:border-color .15s,background .15s}
  .fwd-card input::placeholder{color:var(--muted)}
  .fwd-card input:focus{border-color:var(--accent);background:var(--card)}
  .fwd-card input + input{margin-top:0}   /* два инпута подряд — без двойного зазора */
  .fwd-list{overflow-y:auto;padding:4px 8px 10px}
  .fwd-row{display:flex;align-items:center;gap:11px;padding:9px 10px;
    border-radius:12px;cursor:pointer}
  .fwd-row:hover{background:var(--accent-soft)}
  .fwd-row .ava{width:38px;height:38px;font-size:19px}
  .fwd-nm{font-weight:600;font-size:14px}
  .fwd-empty{padding:18px;text-align:center;color:var(--muted);font-size:13px}
  /* «Редактирование сообщения» — полоса над composer */
  /* edbar/rpbar — всегда в DOM-потоке (display:flex), но схлопнуты до 0
     по умолчанию. На .on плавно раскрываются. Раньше display:flex/none
     убивал анимацию — теперь max-height/opacity дают плавность. */
  .edbar{display:flex;align-items:center;gap:10px;padding:0 14px;
    border-top:1px solid var(--line);background:var(--accent-soft);
    font-size:12.5px;color:var(--text-2);flex:none;
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .18s ease-out,opacity .14s ease-out,padding .18s ease-out}
  .edbar.on{max-height:60px;opacity:1;padding:9px 14px}
  .edbar .x{margin-left:auto;cursor:pointer;color:var(--bad);font-weight:700;
    border:0;background:transparent;font-size:12.5px}
  /* «Ответ на сообщение» — полоса над composer (как edbar, но с акцентной
     левой границей и цитатой) */
  .rpbar{display:flex;align-items:center;gap:10px;padding:0 14px;
    border-top:1px solid var(--line);background:var(--accent-soft);flex:none;
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .18s ease-out,opacity .14s ease-out,padding .18s ease-out}
  .rpbar.on{max-height:64px;opacity:1;padding:8px 14px}
  .rpbar .q{flex:1;min-width:0;border-left:3px solid var(--accent);
    padding-left:9px;line-height:1.25}
  .rpbar .q .qa{font-size:12px;font-weight:700;color:var(--accent)}
  .rpbar .q .qt{font-size:12.5px;color:var(--text-2);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .rpbar .x{cursor:pointer;color:var(--bad);font-weight:700;border:0;
    background:transparent;font-size:12.5px}
  /* цитата внутри пузыря (на что отвечают): однострочный inline-формат —
     «<автор> <текст…»>. Раньше двухстрочная — съедала ~22px на каждом ответе. */
  .b .quote{display:block;border-left:3px solid currentColor;opacity:.85;
    padding:2px 0 2px 8px;margin-bottom:5px;cursor:pointer;max-width:100%;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:1.35}
  .b .quote .qa{display:inline;font-weight:700;margin-right:6px;opacity:.9}
  .b .quote .qt{display:inline;opacity:.85}
  .b.me .quote{border-left-color:rgba(255,255,255,.7)}
  .b.them .quote{border-left-color:var(--accent)}
  /* удалённое сообщение / метка изменено */
  .b.del{opacity:.7;font-style:italic;color:var(--muted)}
  .b .em{margin-right:5px;font-size:10.5px;opacity:.7;font-style:italic}
  /* медиа-сообщения: прозрачный «пузырь», картинка/audio говорят сами */
  .b.media{background:transparent;border:0;padding:0;max-width:min(280px,72%)}
  .b.media img{display:block;max-width:100%;max-height:340px;
    border-radius:14px;cursor:zoom-in}
  .b.media audio{display:block;width:100%;min-width:220px}
  /* подпись под медиа: пузырь прозрачный, поэтому color от .b.me (#fff)
     делал бы подпись невидимой на светлом фоне — фиксируем читаемый цвет */
  .b.media .cap{margin-top:6px;font-size:13.5px;line-height:1.35;
    padding:2px 4px;color:var(--text);white-space:pre-wrap;
    word-break:break-word}
  .b.media.me .cap{text-align:right}
  .b.media .bt{margin-top:2px;text-align:right;color:var(--muted);opacity:1}
  /* фото/видео С ПОДПИСЬЮ — единый пузырь (картинка сверху, текст в «облачке»
     снизу, как в Telegram). Без подписи медиа остаётся прозрачным (правила выше). */
  .b.media.hascap{background:var(--card);border:1px solid var(--line);
    padding:0;overflow:hidden;min-width:150px;max-width:min(320px,80%)}
  .b.media.me.hascap{background:var(--accent);border-color:transparent}
  .b.media.hascap img{width:100%;border-radius:0;max-height:360px;object-fit:cover}
  .b.media.hascap .cap{margin-top:0;padding:7px 12px 0;text-align:left}
  .b.media.me.hascap .cap{color:#fff;text-align:left}
  .b.media.hascap .bt{margin-top:1px;padding:1px 12px 7px}
  .b.media.me.hascap .bt{color:rgba(255,255,255,.72)}
  /* ---------- видео-кружок (плеер в ленте) ---------- */
  .circle{position:relative;width:200px;height:200px;border-radius:50%;
    overflow:hidden;background:var(--card-2);cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    box-shadow:0 4px 18px -6px rgba(17,17,20,.25),inset 0 0 0 1px var(--line)}
  .circle video{width:100%;height:100%;object-fit:cover;display:block}
  .circle .cring{position:absolute;inset:0;width:100%;height:100%;
    pointer-events:none;transform:rotate(-90deg)}
  .circle .cring circle{fill:none;stroke:#fff;stroke-width:2.5;
    opacity:0;stroke-linecap:round;transition:stroke-dashoffset .1s linear,opacity .2s;
    filter:drop-shadow(0 0 2px rgba(0,0,0,.35))}
  .circle.playing .cring circle{opacity:.95}
  .circle .cplay{position:absolute;inset:0;display:flex;align-items:center;
    justify-content:center;background:rgba(17,17,20,.14);color:#fff;
    transition:opacity .2s}
  .circle.playing .cplay{opacity:0;pointer-events:none}
  .circle .cplay svg{width:42px;height:42px;
    filter:drop-shadow(0 1px 5px rgba(0,0,0,.45))}
  .circle .cdur{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
    background:rgba(17,17,20,.5);color:#fff;font-size:11px;font-weight:600;
    padding:2px 9px;border-radius:11px;letter-spacing:.3px;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  /* ---------- видео-кружок (оверлей записи: светлая карточка) ---------- */
  .crec-ov{position:fixed;inset:0;background:rgba(17,17,20,.46);z-index:95;display:none;
    align-items:center;justify-content:center;padding:18px;
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .crec-ov.on{display:flex;animation:pcOv .16s ease}
  .crec-card{position:relative;width:100%;max-width:332px;background:var(--card);
    border-radius:26px;box-shadow:0 24px 60px -16px rgba(17,17,20,.4);
    padding:26px 24px 22px;display:flex;flex-direction:column;align-items:center;gap:16px}
  .crec-ov.on .crec-card{animation:pcIn .26s cubic-bezier(.2,.75,.2,1)}
  .crec-x{position:absolute;top:13px;right:13px;width:34px;height:34px;border:0;
    border-radius:50%;background:var(--card-2);color:var(--muted);font-size:15px;
    cursor:pointer;line-height:1;transition:background .15s,color .15s}
  .crec-x:hover{background:var(--accent-soft);color:var(--text)}
  .crec-stage{position:relative;width:min(62vw,248px);height:min(62vw,248px);
    border-radius:50%;overflow:hidden;background:var(--card-2);
    box-shadow:0 8px 26px -10px rgba(17,17,20,.3),inset 0 0 0 1px var(--line)}
  .crec-stage video{width:100%;height:100%;object-fit:cover;display:block;
    transform:scaleX(-1)}
  .crec-stage.review video{transform:none;cursor:pointer}
  .crec-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
    transform:rotate(-90deg)}
  .crec-ring circle{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;
    transition:stroke-dashoffset .1s linear}
  .crec-timer{color:var(--text);font-size:15px;font-weight:700;min-height:20px;
    letter-spacing:.5px;font-variant-numeric:tabular-nums;font-family:var(--display)}
  .crec-hint{color:var(--muted);font-size:12.5px;text-align:center;
    max-width:264px;min-height:17px;line-height:1.4}
  .crec-ctl{display:flex;align-items:center;justify-content:center;gap:26px;
    min-height:64px;margin-top:2px}
  .crec-rec{width:64px;height:64px;border-radius:50%;border:3px solid var(--line-2);
    background:var(--card);cursor:pointer;display:flex;align-items:center;
    justify-content:center;padding:0;transition:transform .12s,border-color .15s}
  .crec-rec:hover{border-color:var(--accent)}
  .crec-rec:active{transform:scale(.93)}
  .crec-rec .dot{width:46px;height:46px;border-radius:50%;background:var(--bad);
    transition:width .2s,height .2s,border-radius .2s}
  .crec-rec.rec .dot{width:22px;height:22px;border-radius:6px}
  .crec-side{width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;
    background:var(--card-2);color:var(--text-2);display:flex;align-items:center;
    justify-content:center;font-size:21px;transition:transform .12s,background .15s,filter .15s}
  .crec-side:hover{background:var(--accent-soft)}
  .crec-side:active{transform:scale(.93)}
  .crec-side.send{background:var(--accent);color:#fff}
  .crec-side.send:hover{filter:brightness(1.06)}
  .crec-side svg{width:23px;height:23px}
  @media (max-width:600px){ .circle{width:184px;height:184px} }
  .empty{flex:1;display:flex;align-items:center;justify-content:center;
    color:var(--muted);text-align:center;padding:30px}
  .back{display:none}
  /* кликабельный @username рядом с ником */
  .cnrow,.nmrow{display:flex;align-items:baseline;gap:7px;min-width:0}
  .cnrow .cname{flex:0 1 auto}
  .uchip{font-size:11.5px;font-weight:600;color:var(--text-2);
    background:var(--accent-soft);border-radius:999px;padding:1px 8px;
    text-decoration:none;white-space:nowrap;flex:none;line-height:1.5}
  .uchip:hover{color:var(--accent)}
  .uchip-clk{cursor:pointer}
  .lhead .mewrap{display:flex;align-items:center;gap:12px;flex:1;min-width:0;
    cursor:pointer;border-radius:12px;padding:4px;margin:-4px}
  .lhead .mewrap:hover{background:var(--accent-soft)}
  #r-open{cursor:pointer}
  /* карточка профиля (данные парсятся из ИТД) */
  @keyframes pcOv{from{opacity:0}to{opacity:1}}
  @keyframes pcIn{from{opacity:0;transform:translateY(10px) scale(.975)}
    to{opacity:1;transform:none}}
  @keyframes pcAv{from{opacity:0;transform:scale(.55)}
    to{opacity:1;transform:none}}
  .pc-ov{position:fixed;inset:0;background:rgba(17,17,20,.46);z-index:60;
    display:none;align-items:center;justify-content:center;padding:18px;
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .pc-ov.on{display:flex;animation:pcOv .16s ease}
  .pc{width:100%;max-width:404px;background:var(--card);border-radius:22px;
    overflow:hidden;box-shadow:var(--elev-2);
    max-height:92vh;overflow-y:auto}
  .pc-ov.on .pc{animation:pcIn .28s cubic-bezier(.2,.75,.2,1)}
  .pc-ban{height:104px;background:var(--accent-soft);position:relative}
  .pc-ban img{width:100%;height:100%;object-fit:cover;display:block}
  .pc-ban::after{content:"";position:absolute;left:0;right:0;bottom:0;
    height:46px;background:linear-gradient(transparent,rgba(17,17,20,.16))}
  .pc-x{position:absolute;right:12px;top:12px;width:30px;height:30px;
    border:0;border-radius:50%;background:rgba(255,255,255,.88);cursor:pointer;
    font-size:14px;color:#111;z-index:3;display:flex;align-items:center;
    justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.18)}
  .pc-x:hover{background:#fff}
  .pc-bd{padding:0 24px 24px;position:relative;z-index:1;text-align:center}
  .pc-av{width:84px;height:84px;border-radius:50%;background:var(--card);
    border:4px solid var(--card);box-shadow:0 0 0 1px var(--line),
    0 6px 18px -6px rgba(17,17,20,.35);display:flex;align-items:center;
    justify-content:center;font-size:40px;line-height:1;margin:-46px auto 12px;
    position:relative;z-index:2;overflow:hidden}
  .pc-ov.on .pc-av{animation:pcAv .36s cubic-bezier(.2,.8,.2,1) .05s both}
  .pc-nm{font-family:var(--display);font-weight:800;font-size:20px;
    line-height:1.2}
  .pc-un{display:inline-block;margin-top:4px;font-size:13px;font-weight:600;
    color:var(--text-2);text-decoration:none}
  .pc-un:hover{color:var(--accent);text-decoration:underline;
    text-underline-offset:2px}
  .pc-bio{margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--text-2);
    white-space:pre-wrap;word-break:break-word;text-align:left}
  .pc-lp{margin-top:16px;background:var(--card-2);border:1px solid var(--line);
    border-radius:14px;padding:13px 15px;text-align:left}
  .pc-lp .lab{font-size:10.5px;color:var(--muted);font-weight:700;
    text-transform:uppercase;letter-spacing:.05em}
  .pc-lp .tx{font-size:13px;line-height:1.45;margin-top:7px;white-space:pre-wrap;
    word-break:break-word}
  .pc-lp img{margin-top:10px;max-width:100%;border-radius:10px;display:block}
  .pc-lp .mt{font-size:11px;color:var(--muted);margin-top:10px;
    display:flex;gap:12px;align-items:center}
  .pc-lp .mt a{color:var(--text-2);text-decoration:underline;
    text-underline-offset:2px}
  /* Карточка действий профиля — компактный grid.
     Слои:
       .pc-primary   — главная accent-кнопка («Написать сообщение»), full width
       .pc-pill-row  — flex-wrap row с secondary пилюлями (мут / ИТД / статус)
       .pc-danger-row — destructive (бан), отдельный ряд внизу
     Пилюли: иконка слева, текст справа, опц. ✕ для clear (внутри статус-пилла). */
  .pc-act{display:flex;flex-direction:column;gap:8px;margin-top:18px}
  .pc-primary{
    width:100%;border:0;cursor:pointer;border-radius:12px;
    background:var(--accent);color:#fff;
    padding:13px 16px;font:600 14.5px/1.2 var(--font);
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    transition:filter .14s ease,transform .12s ease;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  }
  .pc-primary:hover{filter:brightness(1.06)}
  .pc-primary:active{transform:scale(.985)}
  .pc-primary .pc-pill-ic{font-size:16px;line-height:1}
  .pc-pill-row,.pc-danger-row{display:flex;gap:8px;flex-wrap:wrap}
  .pc-pill{
    flex:1 1 140px;min-width:0;
    border:1px solid var(--line-2);background:var(--card-2);color:var(--text);
    border-radius:10px;padding:9px 12px;cursor:pointer;
    font:500 13px/1.2 var(--font);
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    transition:.14s ease;text-decoration:none;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
    -webkit-appearance:none;appearance:none;
  }
  .pc-pill:hover{border-color:var(--accent);color:var(--accent);
    background:var(--accent-soft)}
  .pc-pill:active{transform:scale(.98)}
  .pc-pill .pc-pill-ic{font-size:14.5px;line-height:1;flex:none}
  .pc-pill .pc-pill-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  .pc-pill .pc-pill-x{
    margin-left:4px;opacity:.55;font-size:11.5px;line-height:1;
    padding:2px 4px;border-radius:6px;
    transition:.12s ease;
  }
  .pc-pill .pc-pill-x:hover{opacity:1;color:var(--bad);background:rgba(231,76,60,.10)}
  .pc-pill.danger{color:var(--bad);border-color:rgba(231,76,60,.45)}
  .pc-pill.danger:hover{background:rgba(231,76,60,.08);color:var(--bad);
    border-color:var(--bad)}
  /* Dark-тема: чуть мягче рамка/фон чтобы кнопки не сливались с карточкой */
  html[data-theme-resolved="dark"] .pc-pill{
    background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);
  }
  html[data-theme-resolved="dark"] .pc-pill:hover{
    background:var(--accent-soft);border-color:var(--accent)
  }
  /* На узком экране — пилюли 2 в ряд (или 1 если совсем мало места) */
  @media (max-width:380px){
    .pc-pill{flex:1 1 calc(50% - 4px);font-size:12.5px;padding:8px 10px}
  }
  /* реферал — ИТД-монохром; акцент = .grad-перелив (как «Sync»),
     точечно на ключевом тексте, без кричащих заливок */
  /* вкладки списка чатов: Все / Контакты */
  /* Разделитель: системные пины (Личка — общий чат + Новости лички) → ↓ ↓ ↓
     обычный список. Двойная тонкая линия с лёгким accent-туманом, чтобы
     визуально отделить «всегда-наверху» от регулярных бесед. */
  .clist-sep{
    height:0;margin:6px 14px 4px;
    border-top:1px solid var(--line);
    box-shadow:0 1px 0 0 var(--card) inset;
    position:relative;opacity:.85;
  }
  .clist-sep::before{
    content:'';position:absolute;left:8px;right:8px;top:2px;height:0;
    border-top:1px dashed rgba(74,92,240,.22);
  }
  html[data-theme-resolved="dark"] .clist-sep{border-top-color:rgba(255,255,255,.10)}
  html[data-theme-resolved="dark"] .clist-sep::before{border-top-color:rgba(74,92,240,.30)}
  .ltabs{flex:none;display:flex;gap:4px;padding:5px 10px;background:var(--card)}
  .ltab{flex:1;border:0;background:transparent;cursor:pointer;
    font:600 12.5px/1 var(--font);color:var(--muted);padding:6px 6px;
    border-radius:999px;transition:.15s ease}
  .ltab.on{background:var(--accent-soft);color:var(--text)}
  .clist-empty{padding:24px 18px;text-align:center;color:var(--muted);
    font-size:12.5px;line-height:1.5}
  .cname .star{color:var(--accent);font-size:11px;margin-left:4px}
  .ltab-add{flex:none;border:0;background:var(--accent-soft);cursor:pointer;
    color:var(--accent);font-size:15px;width:32px;border-radius:999px;
    line-height:1;font-weight:700}
  .ltab-add:hover{filter:brightness(.97)}
  /* поиск по списку чатов (фильтр клиентский, над .clist) */
  .csearch{flex:none;display:flex;align-items:center;gap:7px;margin:0 10px 6px;
    padding:7px 10px;background:var(--card-2);border:1px solid var(--line-2);
    border-radius:999px;transition:border-color .15s ease}
  .csearch:focus-within{border-color:var(--accent)}
  .csearch-ic{width:15px;height:15px;color:var(--muted);flex:none}
  .csearch-in{flex:1;border:0;background:transparent;outline:none;min-width:0;
    font:500 13px/1 var(--font);color:var(--text)}
  .csearch-in::placeholder{color:var(--muted)}
  .csearch-clr{flex:none;border:0;background:transparent;cursor:pointer;
    color:var(--muted);font-size:13px;line-height:1;padding:2px}
  .csearch-clr:hover{color:var(--text)}
  /* вкладка # Личка — лента ИТД-постов вместо списка чатов */
  .llichka{flex:1;display:flex;flex-direction:column;min-height:0;
    overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
  .lichka-hint{flex:none;padding:12px 16px;font-size:11.5px;line-height:1.55;
    color:var(--muted);background:var(--accent-soft);border-bottom:1px solid var(--line)}
  .lichka-hint b{color:var(--accent)}
  .lichka-list{padding:8px 0;display:flex;flex-direction:column;gap:8px}
  .lpost{margin:0 12px;padding:12px;background:var(--card);
    border:1px solid var(--line);border-radius:12px;display:flex;
    flex-direction:column;gap:8px}
  .lpost-head{display:flex;align-items:center;gap:10px;min-width:0}
  .lpost-av{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);
    display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}
  .lpost-meta{min-width:0;display:flex;flex-direction:column;line-height:1.2}
  .lpost-name{font-weight:700;font-size:13px;color:var(--text);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
  .lpost-sub{font-size:11px;color:var(--muted);overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .lpost-reasons{margin-left:auto;display:flex;gap:4px;flex:none}
  .lpost-reasons span{font-size:10px;font-weight:700;padding:2px 6px;
    border-radius:6px;background:var(--accent-soft);color:var(--accent)}
  .lpost-reasons span.r-owner{background:var(--accent);color:#fff}
  .lpost-reasons span.r-repost{background:#9c66ff;color:#fff}
  .lpost-body{font-size:13.5px;line-height:1.5;color:var(--text);
    white-space:pre-wrap;word-break:break-word;max-height:200px;overflow:hidden;
    position:relative}
  .lpost-body.expanded{max-height:none}
  .lpost-body.clip::after{content:'…';position:absolute;right:0;bottom:0;
    background:var(--card);padding-left:6px}
  .lpost-img{display:block;width:100%;max-height:320px;object-fit:cover;
    border-radius:8px;background:var(--accent-soft)}
  .lpost-foot{display:flex;align-items:center;gap:14px;font-size:11.5px;
    color:var(--muted);font-variant-numeric:tabular-nums}
  .lpost-foot a{margin-left:auto;color:var(--accent);text-decoration:none;
    font-weight:600}
  .lpost-foot a:hover{text-decoration:underline}
  .lichka-empty{padding:32px 18px;text-align:center;color:var(--muted);
    font-size:13px;line-height:1.6}
  /* имя отправителя в беседе (над пузырём) */
  .b .sndr{font-size:11.5px;font-weight:600;margin-bottom:1px;color:var(--accent);opacity:.92;
    cursor:default}
  .b .sndr .sndr-name{cursor:pointer}
  .b .sndr .sndr-name:hover{text-decoration:underline}
  /* 3-way bridge: имя автора из TG/Discord + бейдж-логотип источника.
     PNG-логотип вместо эмодзи (см. messenger.js: img.sndr-src-img). */
  .b .sndr-ext .sndr-src{font-size:13px;line-height:1;margin-right:4px;
    vertical-align:-1px;opacity:.95;display:inline-flex;align-items:center}
  .b .sndr-ext .sndr-src-img{width:14px;height:14px;object-fit:contain;
    border-radius:3px;display:block;cursor:pointer;
    transition:transform .12s ease}
  .b .sndr-ext .sndr-src-img:hover{transform:scale(1.18)}
  /* Bridge-info модалка: объяснение «откуда сообщение» + кнопки на TG/DS */
  .brinfo-card{max-width:380px}
  .brinfo-card .brinfo-icon{display:flex;justify-content:center;
    margin:-4px 0 10px}
  .brinfo-card .brinfo-icon img{width:48px;height:48px;border-radius:10px;
    object-fit:contain}
  .brinfo-card .cfm-t{text-align:center;font-size:17px;margin-bottom:6px}
  .brinfo-card .cfm-b{text-align:center;line-height:1.55;
    color:var(--text-2);font-size:13.5px;padding:0 4px}
  .brinfo-links{display:flex;flex-direction:column;gap:8px;
    margin:14px 0 6px}
  .brinfo-btn{display:flex;align-items:center;justify-content:center;
    gap:10px;padding:11px 14px;text-decoration:none;font-weight:600;
    font-size:13.5px;border:1px solid var(--line);background:var(--card)}
  .brinfo-btn img{flex:0 0 auto}
  .brinfo-btn:hover{background:var(--bg-elev)}
  .brinfo-btn[hidden]{display:none}
  .b .sndr-ext .sndr-name{cursor:default}
  .b .sndr-ext .sndr-name:hover{text-decoration:none}   /* нет профиля во вне */
  /* Цветовая подложка под бейдж — мягкая, не визуально-кричит */
  .b .sndr.sndr-tg .sndr-src{filter:drop-shadow(0 0 1px rgba(0,136,204,.35))}
  .b .sndr.sndr-ds .sndr-src{filter:drop-shadow(0 0 1px rgba(88,101,242,.4))}
  /* На медиа-пузырях .b.media{padding:0} обнуляет отступы (чтобы картинка шла
     по краю) — но это же визуально «съедало» имя отправителя слева. Возвращаем
     левый отступ только на .sndr внутри медиа-пузыря. */
  .b.media .sndr{padding:0 12px}
  /* модалка новой беседы / инфо */
  .ng-foot{display:flex;align-items:center;justify-content:space-between;
    padding:10px 16px;border-top:1px solid var(--line)}
  #ng-cnt{font-size:12.5px;color:var(--muted)}
  #ng-create,.gi-btn{border:0;border-radius:999px;padding:9px 18px;cursor:pointer;
    font:600 13px/1 var(--font);background:var(--accent);color:#fff}
  /* #gi-view / #gi-edit могут содержать длинный список участников + описание + кнопки.
     Без overflow-y:auto всё это вылезает за пределы 78vh-карточки и не скроллится. */
  #gi-view,#gi-edit{overflow-y:auto;min-height:0;flex:1 1 auto}
  .gi-btn{margin:8px 16px;display:block;width:calc(100% - 32px);text-align:center}
  .gi-btn.danger{background:transparent;color:var(--bad);border:1px solid var(--line-2)}
  .gi-btn.neutral{background:transparent;color:var(--text-2);border:1px solid var(--line-2)}
  .gi-sub{padding:4px 16px 8px;color:var(--muted);font-size:12.5px}
  .fwd-row.sel{background:var(--accent-soft)}
  .fwd-row .pick{margin-left:auto;color:var(--accent);font-weight:700}
  .gi-acts{margin-left:auto;display:flex;gap:8px;align-items:center}
  .fwd-row .rm{color:var(--bad);cursor:pointer;font-size:12px;
    border:0;background:transparent;white-space:nowrap}
  .gi-edit{border:0;background:transparent;cursor:pointer;color:var(--muted);
    font-size:14px}
  .gi-invite{margin:2px 16px 8px;padding:10px 12px;background:var(--accent-soft);
    border-radius:12px}
  .gi-inv-link{font-size:11.5px;color:var(--text-2);word-break:break-all;
    margin-bottom:8px}
  .gi-inv-act{display:flex;gap:8px}
  .gi-inv-act button{border:0;border-radius:999px;padding:7px 14px;cursor:pointer;
    font:600 12px/1 var(--font);background:var(--accent);color:#fff}
  .gi-inv-act button.ghost{background:transparent;color:var(--muted);
    border:1px solid var(--line-2)}
  .lfoot{margin-top:auto;flex:none;padding:8px 14px;
    border-top:1px solid var(--line);background:var(--card);
    display:flex;flex-direction:column;align-items:center;gap:7px}
  .tp-mini{font:600 12px/1 var(--font);color:var(--text-2);
    background:transparent;border:1px solid var(--line-2);
    border-radius:999px;padding:7px 18px;cursor:pointer;
    transition:.15s ease;white-space:nowrap}
  .tp-mini:hover{background:var(--accent-soft);color:var(--text)}
  /* кнопка-приглашение: акцентная, копирует ссылку в один клик */
  .inv-mini{font:700 12px/1 var(--font);color:var(--accent);
    background:var(--accent-soft);border:1px solid transparent;
    border-radius:999px;padding:8px 18px;cursor:pointer;
    transition:.15s ease;white-space:nowrap;display:flex;
    align-items:center;gap:7px;max-width:100%}
  .inv-mini:hover{filter:brightness(.97)}
  .inv-mini .ic{font-size:13px}
  /* баннер-запрос уведомлений */
  .notif-bar{flex:none;padding:10px 13px;background:var(--accent-soft);
    border-bottom:1px solid var(--line);font-size:12.5px;color:var(--text-2);
    display:flex;flex-direction:column;gap:7px}
  .notif-bar .nb-act{display:flex;gap:7px}
  .notif-bar button{border:0;border-radius:999px;padding:6px 14px;cursor:pointer;
    font:600 12px/1 var(--font);background:var(--accent);color:#fff}
  .notif-bar button.ghost{background:transparent;color:var(--muted)}
  .rf-mark{margin-top:11px;font-size:12.5px;color:var(--muted);
    display:flex;flex-wrap:wrap;gap:5px;align-items:center;
    justify-content:center;text-align:center;line-height:1.5}
  .rf-mark a{color:var(--text-2);text-decoration:underline;
    text-underline-offset:2px}
  .rf-pio{display:inline-flex;align-items:center;gap:5px;font-weight:800;
    font-size:11.5px;padding:3px 10px;border-radius:999px;
    background:var(--accent-soft);color:var(--text-2)}
  .rf-panel{margin-top:16px;border:1px solid var(--line);border-radius:16px;
    padding:15px 16px;text-align:left;background:var(--card)}
  .rf-h{font-weight:800;font-size:13.5px;display:flex;align-items:center;
    gap:7px;color:var(--text)}
  .rf-stat{display:flex;gap:24px;margin-top:12px}
  .rf-stat b{font-family:var(--display);font-size:20px;display:block;
    line-height:1.05;color:var(--text)}
  .rf-stat .k{color:var(--muted);font-size:10px;text-transform:uppercase;
    letter-spacing:.05em;margin-top:3px}
  .rf-cta{margin-top:14px;width:100%;border:1px solid var(--accent);
    border-radius:12px;padding:12px;font-weight:700;font-size:13.5px;
    color:#fff;cursor:pointer;background:var(--accent);
    transition:background .15s ease}
  .rf-cta:hover{background:#2a2a30}
  .rf-link{margin-top:9px;font-size:11px;color:var(--muted);
    background:var(--card-2);border:1px solid var(--line);border-radius:9px;
    padding:8px 10px;word-break:break-all;text-align:center}
  .rf-note{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.5}
  .rf-list{margin-top:13px;display:flex;flex-direction:column}
  .rf-row{display:flex;align-items:center;gap:10px;padding:8px 2px;
    border-top:1px solid var(--line)}
  .rf-row .ava{width:30px;height:30px;font-size:15px}
  .rf-row .nm{font-size:12.5px;font-weight:600;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;min-width:0}
  .rf-row .un{font-size:11px;color:var(--muted);text-decoration:none}
  .rf-row .un:hover{text-decoration:underline}
  .rf-row .mc{margin-left:auto;font-size:11.5px;color:var(--text-2);
    white-space:nowrap;flex:none}
  .rf-empty{margin-top:11px;font-size:12.5px;color:var(--muted)}
  /* место в топах в карточке — тихо, ~11px muted, без акцента */
  .rf-rank{margin-top:9px;font-size:11px;color:var(--muted)}
  /* вторичный пункт «Топы» — отдельной тонкой строкой под пригласить */
  /* модалка топов */
  .tp-ov{position:fixed;inset:0;background:rgba(17,17,20,.46);z-index:60;
    display:none;align-items:center;justify-content:center;padding:18px;
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .tp-ov.on{display:flex;animation:pcOv .16s ease}
  .tp{width:100%;max-width:404px;background:var(--card);border-radius:22px;
    box-shadow:0 24px 60px -16px rgba(17,17,20,.4);max-height:88vh;
    display:flex;flex-direction:column;overflow:hidden}
  .tp-ov.on .tp{animation:pcIn .28s cubic-bezier(.2,.75,.2,1)}
  .tp-hd{display:flex;align-items:center;justify-content:space-between;
    padding:18px 18px 0}
  .tp-hd .h3{font-family:var(--display);font-weight:800;font-size:17px}
  .tp .seg{display:flex;margin:14px 18px 4px}
  .tp .seg button{flex:1;padding:10px 12px;font-size:13px}
  .tp-inv{margin:14px 18px 2px;border:1px solid var(--line);
    border-radius:14px;padding:13px 15px}
  .tp-inv .t{font-weight:800;font-size:13.5px;display:flex;
    align-items:center;gap:7px}
  .tp-inv .s{margin-top:5px;font-size:12px;color:var(--muted)}
  .tp-inv .lk{margin-top:9px;font-size:11px;color:var(--muted);
    background:var(--card-2);border:1px solid var(--line);border-radius:9px;
    padding:8px 10px;word-break:break-all;text-align:center}
  .tp-inv .btn{margin-top:10px}
  .tp-list{overflow-y:auto;padding:8px 12px 14px}
  .tp-row{display:flex;align-items:center;gap:11px;padding:9px 8px;
    border-radius:12px;cursor:pointer}
  .tp-row:hover{background:var(--accent-soft)}
  .tp-rk{width:30px;text-align:center;font-weight:800;font-size:14px;
    color:var(--muted);flex:none}
  .tp-row .ava{width:34px;height:34px;font-size:17px}
  .tp-mid{min-width:0;flex:1}
  .tp-nm{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .tp-un{font-size:11px;color:var(--muted)}
  .tp-c{margin-left:auto;font-size:12.5px;font-weight:700;
    color:var(--text-2);white-space:nowrap;flex:none}
  .tp-empty{padding:26px;text-align:center;color:var(--muted);font-size:13px}
  @media(max-width:860px){
    #app.on{grid-template-columns:1fr}
    .col-r{display:none;position:fixed;inset:0;background:var(--bg);z-index:5}
    #app.show-conv .col-l{display:none}
    #app.show-conv .col-r{display:flex}
    .back{display:inline-block}
  }
  /* мобильная отзывчивость: модалки/композер/seg плотнее */
  @media(max-width:560px){
    .pc-ov,.tp-ov{padding:10px}
    .pc,.tp{max-width:100%;border-radius:18px}
    .pc-bd{padding:0 18px 18px}
    .pc-nm{font-size:18px}
    .tp-hd{padding:14px 14px 0}
    .tp-hd .h3{font-size:16px}
    .tp .seg{margin:12px 14px 2px}
    .tp .seg button{padding:9px 8px;font-size:12px}
    .tp-inv{margin:12px 14px 2px;padding:11px 13px}
    .tp-list{padding:6px 8px 12px}
    .tp-row{gap:9px;padding:8px 6px}
    .tp-rk{width:26px;font-size:13px}
    .tp-row .ava{width:30px;height:30px;font-size:15px}
    .tp-c{font-size:12px}
    /* поднимаем панель ввода над home-indicator iOS + чуть выше для удобного тапа */
    .composer{padding:7px 10px;gap:7px;padding-bottom:calc(env(safe-area-inset-bottom) + 12px)}
    .rec-bar{padding-bottom:calc(env(safe-area-inset-bottom) + 12px)}
    /* ≥16px у всех полей ввода — иначе iOS авто-зумит при фокусе */
    .composer textarea{padding:9px 12px;font-size:16px}
    .fwd-card input,.srchbar input,.ob .input,#lg-un{font-size:16px}
    .composer .btn{padding:9px 14px}
    .lhead{padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top))}
    .lhead .ttl{font-size:15px}
    /* юзернейм-чип под "Личка" на мобиле — дубль идентичности, прячем */
    #me-nm{display:none}
    .clist .crow{padding:9px 14px}
    .ava{width:40px;height:40px;font-size:20px}
    /* fix: padding-bottom уже добавляется композером, повторно не нужно */
    .msgs{padding:10px 12px 6px}
    .b{font-size:13.5px;max-width:82%;padding:7px 12px}
    .rhead{padding:8px 12px;gap:10px;padding-top:calc(8px + env(safe-area-inset-top))}
    .rhead .ava{width:36px;height:36px;font-size:18px}
    /* юзернейм-чип @username в шапке разговора прячем — один тап до карточки профиля */
    .rhead .uchip{display:none}
    .lfoot{padding:7px 12px;padding-bottom:calc(7px + env(safe-area-inset-bottom))}
    .tp-mini{padding:6px 16px;font-size:11.5px}
    /* нижний пункт в карточке профиля компактнее */
    .rf-panel{padding:13px 14px}
    .rf-row .ava{width:28px;height:28px;font-size:14px}
  }
  /* ---------- нативное поведение на тач-экранах ---------- */
  /* серый flash при тапе — убрать везде (выглядит как «веб-страница») */
  *{-webkit-tap-highlight-color:transparent}
  /* картинки не должны «призрачно» таскаться при долгом нажатии/драге */
  img{-webkit-user-drag:none}
  @media (pointer:coarse){
    /* долгое нажатие/тап в пустом месте больше не выделяет «невидимый» текст
       и не вызывает системную лупу/коллаут. Поля ввода — исключение ниже. */
    .col-l,.col-r{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
    input,textarea,[contenteditable]{-webkit-user-select:auto;user-select:auto;
      -webkit-touch-callout:default}
    .codebox{-webkit-user-select:all;user-select:all}
  }
  /* во время свайпа «назад» показываем список под уезжающим чатом (мобила) */
  @media(max-width:860px){
    #app.show-conv.drag-back .col-l{display:flex}
  }

  /* ---------- беседы: создание/инфо/права ---------- */
  .ng-top{display:flex;gap:10px;align-items:center;margin:12px 16px 0}
  .ng-top input{flex:1;margin:0;border:1px solid var(--line-2);border-radius:12px;
    padding:11px 14px;outline:none;background:var(--card-2);font:inherit;color:var(--text)}
  .emoji-btn{flex:none;width:48px;height:48px;border-radius:12px;border:1px solid var(--line-2);
    background:var(--card-2);font-size:24px;cursor:pointer;display:flex;
    align-items:center;justify-content:center;line-height:1;padding:0}
  .emoji-btn:hover{border-color:var(--accent)}
  #ng-desc,#ge-desc{margin:10px 16px 0;width:calc(100% - 32px);box-sizing:border-box;
    border:1px solid var(--line-2);border-radius:12px;padding:10px 13px;outline:none;
    background:var(--card-2);font:inherit;color:var(--text);resize:none}
  .seg2-row{display:flex;gap:8px;margin:10px 16px 0}
  .seg2{flex:1;border:1px solid var(--line-2);background:var(--card-2);cursor:pointer;
    font:600 13px/1 var(--font);color:var(--text-2);padding:10px 8px;border-radius:12px;
    transition:.15s}
  .seg2.on{background:var(--accent);color:#fff;border-color:var(--accent)}
  .uname-field{display:flex;align-items:center;margin:10px 16px 0;
    border:1px solid var(--line-2);border-radius:12px;background:var(--card-2);
    padding:0 12px;gap:2px}
  .uname-field .at{color:var(--muted);font-weight:600}
  .uname-field input{flex:1;border:0;background:transparent;outline:none;
    padding:11px 4px;font:inherit;color:var(--text)}
  .uname-hint{margin:5px 16px 0;font-size:11.5px;color:var(--muted)}
  .uname-hint.bad{color:var(--bad)}
  .uname-hint.ok{color:var(--good)}
  #ng-ov.addmode .ng-only{display:none}
  /* инфо беседы — «шапка» */
  .gi-hero{display:flex;flex-direction:column;align-items:center;gap:6px;
    padding:16px 16px 6px;text-align:center}
  .gi-hero-av{width:84px;height:84px;font-size:42px}
  .gi-hero-t{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.2}
  .gi-hero-un{font-size:13px;color:var(--accent);font-weight:600}
  .gi-desc{margin:2px 18px 8px;font-size:13.5px;line-height:1.5;color:var(--text-2);
    white-space:pre-wrap;word-break:break-word;text-align:center}
  .gi-public,.gi-invite{margin:6px 16px;padding:11px 13px;background:var(--card-2);
    border:1px solid var(--line);border-radius:12px}
  .gi-public .lab,.gi-invite .lab{font-size:10.5px;color:var(--muted);font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
  .gi-pub-link,.gi-inv-link{font-size:12px;color:var(--text-2);word-break:break-all;margin-bottom:8px}
  .gi-mini{border:0;border-radius:999px;padding:7px 14px;cursor:pointer;
    font:600 12px/1 var(--font);background:var(--accent);color:#fff}
  .gi-sech{margin:12px 18px 4px;font-size:11px;font-weight:700;color:var(--muted);
    text-transform:uppercase;letter-spacing:.05em}
  .gi-badge{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;
    background:var(--accent-soft);color:var(--accent);margin-left:6px;white-space:nowrap}
  .gi-badge.muted{background:var(--card-2);color:var(--muted)}
  .gi-badge.red{background:var(--bad-bg);color:var(--bad)}
  .fwd-row.clk{cursor:pointer}
  .gi-acts .mng{color:var(--text-2);cursor:pointer;font-size:16px;border:0;
    background:transparent;padding:4px}
  /* права (чек-листы) */
  .perm-list{margin:4px 16px 0;display:flex;flex-direction:column;gap:2px}
  .perm-row{display:flex;align-items:center;gap:10px;padding:9px 4px;cursor:pointer;
    font-size:13.5px;border-bottom:1px solid var(--line)}
  .perm-row:last-child{border-bottom:0}
  .perm-row .pk{margin-left:auto;width:40px;height:23px;border-radius:999px;
    background:var(--line-2);position:relative;transition:.15s;flex:none}
  .perm-row .pk::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;
    border-radius:50%;background:#fff;transition:.15s}
  .perm-row.on .pk{background:var(--accent)}
  .perm-row.on .pk::after{transform:translateX(17px)}
  .ge-foot,.mm-foot{display:flex;gap:10px;padding:14px 16px}
  .ge-foot button,.mm-foot button{flex:1;border:0;border-radius:999px;padding:11px;
    cursor:pointer;font:600 13px/1 var(--font);background:var(--accent);color:#fff}
  .ge-foot button.ghost,.mm-foot button.ghost{background:transparent;color:var(--text-2);
    border:1px solid var(--line-2)}
  /* управление участником */
  .mm-body{padding:6px 0 4px}
  .mm-sub{padding:4px 18px 8px;color:var(--muted);font-size:12.5px}
  .mm-act{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
    border:0;background:transparent;font:500 14px/1.2 var(--font);padding:12px 18px;
    cursor:pointer;color:var(--text);border-top:1px solid var(--line)}
  .mm-act:hover{background:var(--accent-soft)}
  .mm-act.danger{color:var(--bad)}
  .mm-dur{display:flex;gap:6px;flex-wrap:wrap;padding:6px 16px 10px}
  .mm-dur button{border:1px solid var(--line-2);background:var(--card-2);cursor:pointer;
    border-radius:999px;padding:7px 12px;font:600 12px/1 var(--font);color:var(--text-2)}
  .mm-dur button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
  /* пикер эмодзи */
  .emoji-pop{position:fixed;z-index:120;display:none;background:var(--card);
    border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
    padding:8px;width:268px;max-height:240px;overflow-y:auto;
    grid-template-columns:repeat(7,1fr);gap:2px}
  .emoji-pop.on{display:grid}
  .emoji-pop button{border:0;background:transparent;cursor:pointer;font-size:22px;
    line-height:1;padding:6px;border-radius:8px}
  .emoji-pop button:hover{background:var(--accent-soft)}

  /* ---------- кнопка «к последним» (внутри активной беседы) ---------- */
  #conv{position:relative}
  .scroll-bot{position:absolute;right:14px;width:42px;height:42px;border-radius:50%;
    border:1px solid var(--line);background:var(--card);color:var(--text-2);
    cursor:pointer;display:none;align-items:center;justify-content:center;
    box-shadow:var(--elev-2);
    transition:transform .15s, opacity .15s, background .15s;
    z-index:8;opacity:0;transform:translateY(8px);
    /* над композером (≈58px) + safe-area iOS */
    bottom:calc(58px + env(safe-area-inset-bottom))}
  .scroll-bot.on{display:flex;opacity:1;transform:translateY(0)}
  .scroll-bot:hover{background:var(--accent-soft);color:var(--text)}
  .scroll-bot svg{width:22px;height:22px;display:block}
  /* маркер начала истории (когда has_more=false) */
  .sep.start{opacity:.6;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
    margin:6px 0 12px}

  /* ===================== ТЁМНАЯ ТЕМА =====================
     Включается атрибутом html[data-theme-resolved="dark"] (его ставит
     инлайн-скрипт в <head> по localStorage + системной настройке).
     Палитра переопределяет CSS-переменные → почти всё «окно» темнеет само.
     --accent — индиго: служит и заливкой пузыря (белый текст на ней ≥4.5:1),
     и цветом ссылок/упоминаний на тёмной карточке. */
  html[data-theme-resolved="dark"]{
    --bg:#0f0f12; --card:#1a1a20; --card-2:#26262e;
    --text:#f0f0f3; --text-2:#a6abb5; --muted:#6e7280;
    --line:#2a2a32; --line-2:#363640;
    --accent:#4a5cf0; --accent-soft:#23232b;
    --good:#37c172; --good-bg:#16301f;
    --bad:#f06363; --bad-bg:#3a1f1f;
    --warn:#d6a93a; --warn-bg:#332a14;
    --shadow:0 1px 2px rgba(0,0,0,.45),0 14px 36px rgba(0,0,0,.55);
    --shadow-sm:0 1px 2px rgba(0,0,0,.45);
    --elev-1:0 1px 2px rgba(0,0,0,.45);
    --elev-2:0 10px 28px -8px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.35);
    color-scheme:dark;
  }
  /* фиксы захардкоженных светлых поверхностей (наследуются из style.css/верстки) */
  html[data-theme-resolved="dark"] ::selection{background:var(--accent);color:#fff}
  html[data-theme-resolved="dark"] .btn{background:var(--card-2);color:var(--text);
    border-color:var(--line-2)}
  html[data-theme-resolved="dark"] .btn:hover{background:var(--accent-soft)}
  html[data-theme-resolved="dark"] .btn-primary{background:var(--accent);color:#fff;
    border-color:var(--accent)}
  html[data-theme-resolved="dark"] .btn-primary:hover{filter:brightness(1.1)}
  html[data-theme-resolved="dark"] .input,
  html[data-theme-resolved="dark"] .select,
  html[data-theme-resolved="dark"] textarea.input{background:var(--card-2);
    color:var(--text);border-color:var(--line-2)}
  html[data-theme-resolved="dark"] .input:focus{border-color:var(--accent)}
  html[data-theme-resolved="dark"] .seg button.on{background:var(--card-2);color:var(--text)}
  /* чип реакции на «чужом» пузыре: rgba(0,0,0,.06) на тёмном не виден */
  html[data-theme-resolved="dark"] .rchip{background:rgba(255,255,255,.10);color:var(--text)}
  /* свою реакцию ВСЕГДА выделяем акцентом, иначе на dark-теме mine
     перебивается общим тёмным правилом выше (одинаковая специфичность) */
  html[data-theme-resolved="dark"] .rchip.mine{background:var(--accent);color:#fff;
    box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
  /* «сообщение удалено» в пузыре: дефолтный --muted на тёмной — сливается
     с фоном (особенно с заливкой .b.me=accent). Подсвечиваем контрастнее. */
  html[data-theme-resolved="dark"] .b.del{color:rgba(240,240,243,.62)}
  html[data-theme-resolved="dark"] .b.me.del{color:rgba(255,255,255,.78)}
  /* выделение текста внутри СВОЕГО пузыря (.b.me с заливкой --accent):
     дефолтная браузерная подсветка часто синяя → сливается. Принудительно
     инверсный контраст и в светлой, и в тёмной теме (одно правило). */
  .b.me ::selection{background:#fff;color:var(--accent)}
  .b.me::selection{background:#fff;color:var(--accent)}
  .b.me .cap::selection,
  .b.me.hascap .cap::selection{background:#fff;color:var(--accent)}
  /* шапка лендинга — стеклянная светлая → делаем стеклянной тёмной */
  html[data-theme-resolved="dark"] header.nav-bar{background:rgba(15,15,18,.8)}
  /* переключатель темы */
  .theme-tgl{font-size:16px}

  /* ===================== выезжающее меню (drawer) =====================
     Telegram-style. Гамбургер в .lhead открывает; backdrop затемняет
     основное приложение, drawer выезжает слева. Внутри drawer — стек
     экранов (главное → профиль/настройки), переход slide-translateX. */
  .dr-burger{padding:7px;color:var(--text-2)}
  .dr-burger svg{width:22px;height:22px;display:block}
  .dr-back{position:fixed;inset:0;background:rgba(0,0,0,.42);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:99}
  .dr-back.on{opacity:1;pointer-events:auto}
  .dr{position:fixed;left:0;top:0;height:100%;height:100dvh;
    height:var(--vh-app,100dvh);width:min(320px,92vw);background:var(--card);
    border-right:1px solid var(--line);transform:translateX(-100%);
    transition:transform .22s cubic-bezier(.22,.61,.36,1);
    box-shadow:var(--elev-2);z-index:100;display:flex;flex-direction:column;
    overflow:hidden}
  .dr.on{transform:translateX(0)}
  .dr-stack{position:relative;flex:1;min-height:0;overflow:hidden}
  .dr-screen{position:absolute;inset:0;display:flex;flex-direction:column;
    background:var(--card);
    transition:transform .22s cubic-bezier(.22,.61,.36,1),opacity .18s ease;
    transform:translateX(100%);opacity:0;pointer-events:none}
  .dr-screen.cur{transform:translateX(0);opacity:1;pointer-events:auto}
  .dr-screen.prev{transform:translateX(-22%);opacity:.6;pointer-events:none}
  .dr-screen[data-name="dr-main"]{transform:translateX(0);opacity:1;
    pointer-events:auto}
  .dr-screen[data-name="dr-main"].prev{transform:translateX(-22%);
    opacity:.6;pointer-events:none}

  /* шапка экрана (sticky сверху) */
  .dr-shead{flex:none;padding:14px 16px;display:flex;align-items:center;
    gap:8px;border-bottom:1px solid var(--line);min-height:54px;
    box-sizing:border-box}
  .dr-shead .dr-back-btn{border:0;background:transparent;cursor:pointer;
    font-size:22px;line-height:1;color:var(--text-2);padding:4px 8px;
    border-radius:8px}
  .dr-shead .dr-back-btn:hover{background:var(--accent-soft);color:var(--text)}
  .dr-shead .dr-ttl{font-family:var(--display);font-weight:800;font-size:15px;
    color:var(--text)}

  /* тело экрана (скроллится отдельно) */
  .dr-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}

  /* шапка главного экрана: аватар+имя (открыть ИТД-профиль),
     эмодзи-статус отдельной кликабельной строкой (открыть picker) */
  .dr-me{padding:18px 16px 14px;display:flex;flex-direction:column;gap:10px;
    border-bottom:1px solid var(--line)}
  .dr-me .dr-mav{width:64px;height:64px;border-radius:50%;
    background:var(--accent-soft);display:flex;align-items:center;
    justify-content:center;font-size:30px;overflow:hidden;position:relative;
    cursor:pointer;transition:transform .15s ease}
  .dr-me .dr-mav:hover{transform:scale(1.04)}
  .dr-me .dr-mav>img{width:100%;height:100%;border-radius:50%;
    object-fit:cover}
  .dr-me .dr-mnm{font-family:var(--display);font-weight:800;font-size:16px;
    color:var(--text);line-height:1.2;cursor:pointer;
    padding:4px 8px;border-radius:8px;
    transition:background .15s ease;align-self:flex-start;
    max-width:calc(100% - 0px);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .dr-me .dr-mnm:hover{background:var(--accent-soft)}
  .dr-me .dr-mst{font-size:13px;color:var(--accent);font-weight:600;
    display:inline-flex;align-items:center;gap:6px;line-height:1.2;
    border:0;background:transparent;cursor:pointer;text-align:left;
    padding:6px 10px;border-radius:8px;
    transition:background .15s ease;font-family:var(--font);
    align-self:flex-start;max-width:100%;min-width:0}
    /* НЕ ставим overflow:hidden + text-overflow:ellipsis + white-space:nowrap
       на сам flex-контейнер: это срезает оба края (видно «аш стату» вместо
       «🌙 Ваш статус ✕»). Клиппинг — только на текстовом чайлде. */
  .dr-me .dr-mst:hover{background:var(--accent-soft)}
  .dr-me .dr-mst .em{font-size:18px;line-height:1;flex:none}
  .dr-me .dr-mst .empty{color:var(--muted);font-weight:500;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  /* текстовый span между .em и .x (просто <span>) — единственный кто
     ужимается; гарантируем что emoji и ✕ видны всегда. */
  .dr-me .dr-mst > span:not(.em):not(.x):not(.empty){
    flex:1 1 auto;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dr-me .dr-mst .x{margin-left:4px;color:var(--muted);font-size:14px;
    font-weight:500;padding:0 6px;border-radius:50%;flex:none;
    transition:background .12s ease}
  .dr-me .dr-mst .x:hover{background:var(--bad);color:#fff}

  /* строка пункта меню */
  .dr-row{display:flex;align-items:center;gap:14px;padding:12px 18px;
    cursor:pointer;font-size:14.5px;color:var(--text);
    border:0;background:transparent;width:100%;text-align:left;
    transition:background .12s ease}
  .dr-row:hover{background:var(--accent-soft)}
  .dr-row .dr-ic{flex:none;width:22px;height:22px;color:var(--text-2);
    display:flex;align-items:center;justify-content:center}
  .dr-row .dr-ic svg{width:22px;height:22px}
  .dr-row .dr-lb{flex:1;min-width:0}
  .dr-row.danger{color:var(--bad)}
  .dr-row.danger .dr-ic{color:var(--bad)}

  /* разделитель между группами пунктов */
  .dr-sep{height:1px;background:var(--line);margin:8px 0}

  /* pill-toggle (как у iOS): для «Ночной режим» и «Уведомления» */
  .dr-tog{flex:none;width:40px;height:22px;border-radius:999px;
    background:var(--line-2);position:relative;transition:background .18s ease;
    cursor:pointer}
  .dr-tog::after{content:'';position:absolute;top:2px;left:2px;
    width:18px;height:18px;border-radius:50%;background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.25);
    transition:transform .18s cubic-bezier(.34,1.32,.46,1)}
  .dr-tog.on{background:var(--accent)}
  .dr-tog.on::after{transform:translateX(18px)}

  /* подвал главного экрана: версия */
  .dr-foot{flex:none;padding:10px 18px 14px;color:var(--muted);font-size:11.5px;
    text-align:center;line-height:1.5;border-top:1px solid var(--line)}
  .dr-foot a{color:var(--muted);text-decoration:underline;
    text-underline-offset:2px}

  /* профиль (dr-profile) */
  .dr-pf{padding:18px 18px 12px}
  .dr-pf .dr-pav{width:96px;height:96px;border-radius:50%;
    background:var(--accent-soft);display:flex;align-items:center;
    justify-content:center;font-size:46px;margin:0 auto 12px;overflow:hidden}
  .dr-pf .dr-pav>img{width:100%;height:100%;border-radius:50%;
    object-fit:cover}
  .dr-pf .dr-pnm{text-align:center;font-family:var(--display);font-weight:800;
    font-size:18px;margin-top:2px}
  .dr-pf .dr-pun{text-align:center;font-size:13px;color:var(--muted);
    margin-top:3px}
  .dr-pf .dr-pbio{text-align:center;font-size:13.5px;color:var(--text-2);
    margin-top:10px;padding:0 6px;line-height:1.5;white-space:pre-wrap;
    word-break:break-word}
  .dr-pf .dr-pf-sec{margin-top:18px;padding:0 4px}
  .dr-pf .dr-pf-lab{font-size:11px;text-transform:uppercase;
    letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:8px}
  .dr-pf .dr-pf-emo{display:flex;align-items:center;gap:10px}
  .dr-pf .dr-pf-emo-btn{flex:1;border:1px solid var(--line-2);
    background:var(--card-2);border-radius:14px;padding:12px 14px;
    cursor:pointer;font-size:18px;text-align:left;color:var(--text);
    display:flex;align-items:center;gap:10px;transition:.15s ease}
  .dr-pf .dr-pf-emo-btn:hover{border-color:var(--accent)}
  .dr-pf .dr-pf-emo-btn .pl{color:var(--muted);font-size:14px;font-weight:500}
  .dr-pf .dr-pf-emo-x{border:0;background:transparent;cursor:pointer;
    color:var(--muted);font-size:18px;padding:6px 10px;border-radius:8px}
  .dr-pf .dr-pf-emo-x:hover{background:var(--accent-soft);color:var(--bad)}
  .dr-pf .dr-pf-note{margin-top:18px;padding:11px 13px;background:var(--card-2);
    border:1px solid var(--line);border-radius:12px;font-size:12px;
    color:var(--muted);line-height:1.5}

  /* настройки (dr-settings) */
  .dr-st{padding:8px 0}
  .dr-st .dr-sec-h{font-size:11px;text-transform:uppercase;
    letter-spacing:.06em;color:var(--muted);font-weight:700;
    padding:14px 18px 6px}
  .dr-st .dr-seg{display:flex;gap:6px;padding:4px 18px 8px}
  .dr-st .dr-seg button{flex:1;border:1px solid var(--line-2);
    background:transparent;border-radius:999px;padding:9px 8px;
    cursor:pointer;font:600 12.5px/1 var(--font);color:var(--text-2);
    transition:.15s ease}
  .dr-st .dr-seg button.on{background:var(--accent);color:#fff;
    border-color:var(--accent)}
  .dr-st .dr-seg button:hover:not(.on){background:var(--accent-soft);
    color:var(--text)}

  /* radio Группа|Канал в форме ng-ov */
  .ng-kind-row{margin-bottom:6px}
  #ng-ov.channel-mode .ng-kind-row .seg2[data-k="channel"]{
    background:var(--accent);color:#fff;border-color:var(--accent)}

  /* мобильная адаптация — drawer уже max width:86vw, кнопка-гамбургер
     должна быть видна */
  @media(max-width:520px){
    .dr-burger{padding:6px}
    .dr-burger svg{width:20px;height:20px}
  }

  /* ===================== touch UX оптимизация =====================
     1. Запрет горизонтального скролла страницы целиком (предотвращает
        случайные "прыжки" при свайпах слева→направо).
     2. touch-action: pan-y на body — браузер обрабатывает ТОЛЬКО
        вертикальный pan жест. JS-обработчики touch продолжают работать
        (наш swipe в .clist для возврата к последней беседе остаётся).
     3. -webkit-tap-highlight-color:transparent — отключаем тёмное
        мерцание iOS при tap'е (у нас свой :active feedback).
     4. Sticky-hover на touch: на устройствах без указателя `:hover`
        триггерится при touchstart и не уходит до tap-elsewhere. Это
        порождает «зависшую» подсветку под пальцем при скролле списка
        чатов. Подавляем все hover-эффекты для интерактивных строк,
        кнопок и иконок; вместо них даём короткий :active (нажатие). */
  html{overflow-x:hidden;-webkit-tap-highlight-color:transparent}
  body{overflow-x:hidden;overscroll-behavior-x:none;touch-action:pan-y}
  /* у .attach (горизонтальная лента прикреплений) свой horizontal scroll */
  .attach{touch-action:pan-x}

  @media (hover:none){
    /* подавление hover-эффектов: фон/трансформы/фильтры */
    .crow:hover, .dr-row:hover, .fwd-row:hover, .menu div:hover,
    .iconbtn:hover, .composer .iconbtn:hover, .tp-mini:hover,
    .ltab-add:hover, .inv-mini:hover, .dr-shead .dr-back-btn:hover,
    .dr-me .dr-mav:hover, .dr-me .dr-mnm:hover, .dr-me .dr-mst:hover,
    .feat:hover{
      background:transparent !important;
      transform:none !important;
      filter:none !important;
      box-shadow:none !important;
    }
    /* для тёмной темы тоже */
    html[data-theme-resolved="dark"] .btn:hover{
      background:transparent !important;
    }
    /* тактильный feedback на нажатие (короткий :active) */
    .crow:active{background:var(--card-2)}
    .dr-row:active{background:var(--accent-soft)}
    .fwd-row:active{background:var(--accent-soft)}
    .menu div:active{background:var(--accent-soft)}
    .iconbtn:active{background:var(--accent-soft)}
    .dr-me .dr-mnm:active, .dr-me .dr-mst:active{background:var(--accent-soft)}
    /* selected состояние (.sel) не должно мигать под пальцем во время
       скролла — оставляем background как есть для .crow.sel */
    .crow.sel:active{background:var(--accent-soft)}
  }

/* ---------- broadcast-канал «Андрей Сделал Канал» (см. messenger/channel.py) ---------- */
/* Composer скрыт для не-владельцев: вместо инпута видна полоска-плашка
   «Только @dev_ пишет в этот канал». В is-channel + chan-readonly режиме.
   ВАЖНО: id="conv" в messenger.html НЕ имеет класса .conv — селекторы
   обязаны быть на #conv (а не .conv), иначе CSS не матчится и юзер
   видит обычный композер → шлёт → ловит 403 с сервера (плохо). */
#conv.chan-readonly .composer, #conv.chan-readonly #composer,
#conv.chan-readonly .input-wrap, #conv.chan-readonly #plus-btn,
#conv.chan-readonly #voc-btn, #conv.chan-readonly #send,
#conv.chan-readonly #inp{display:none !important;}
#conv.chan-readonly::after{
  content:"Только владелец канала может писать. Реакции и комментарии — ниже постов.";
  display:block; padding:14px 18px; text-align:center;
  font-size:13px; color:var(--muted, #8e9aaa);
  background:var(--panel, rgba(0,0,0,0.04));
  border-top:1px solid var(--border, rgba(0,0,0,0.08));
  position:sticky; bottom:0; z-index:5;
}
/* В канале (любому юзеру) — сообщения занимают чуть больше места,
   как ленту постов (не такие узкие пузыри как в чате). */
#conv.is-channel .msg{max-width:min(720px, 96%);}
/* «💬 N» / «💬 Комментировать» кнопка под каждым постом канала.
   Inline-pill, светлый фон, тапаемая → openThread(post_id). */
.cmtbtn{
  display:inline-flex; align-items:center; gap:4px;
  margin-top:6px; padding:5px 11px;
  border:none; border-radius:14px; cursor:pointer;
  font-size:12px; line-height:1; font-weight:500;
  background:var(--accent-soft, rgba(0,128,200,0.08));
  color:var(--accent, #2d8fd0);
  transition:background 0.15s;
}
.cmtbtn:hover{background:var(--accent-soft, rgba(0,128,200,0.16));}
.cmtbtn.empty{opacity:0.75; font-weight:400;}
.cmtbtn:active{transform:scale(0.97);}