/* VPN-Top Social — общие стили для всех модулей. Один файл, подключается
   ссылкой везде, не копипастится по страницам (18.09.2026, Алексей: "всё
   модульное, не лепи на одну страницу"). */
/* 20.09.2026, второй заход — Алексей на живом скриншоте: "ярко-оранжевый,
   как мандарин, режет глаза... сделай еле видным, практически бесцветным".
   Разобрался, в чём разница с реальным E-Talk: там "свои" пузыри НЕ залиты
   сплошным акцентом вообще — `--bg-bubble-out` в index.css еТalk это едва
   тонированный тёмно-коричневый (#3a3200) на тёмной теме и бледный кремовый
   (#fff3d6) на светлой, акцент (золото) виден только маленькими пятнами
   (кнопки/бейджи), не как заливка целой поверхности. Портирую ТУ ЖЕ технику
   (`--bg-bubble-out`, едва тонированная, не сплошная заливка) + сам
   --accent/--accent2 сделал заметно менее насыщенным (не неон), оттенок
   чуть более оранжевый, чем золото еТalk, как и просил Алексей. */
:root {
  --bg:#0f172a; --bg2:#1e293b; --card:#16233b; --border:#2a3b5c;
  --accent:#deb887; --accent2:#deb887; --text:#f8fafc; --muted:#94a3b8;
  --bg-bubble-out:#3a2a15;
  --icon-filter: brightness(0) invert(1); --bg-hover: rgba(255,255,255,.08);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:#f5f6fa; --bg2:#e9ecf3; --card:#ffffff; --border:#dde1ea;
    --accent:#b8712a; --accent2:#a5621e; --text:#0f172a; --muted:#64748b;
    --bg-bubble-out:#faead4;
    --icon-filter: brightness(0); --bg-hover: rgba(0,0,0,.05);
  }
}
:root[data-theme="light"] {
  --bg:#f5f6fa; --bg2:#e9ecf3; --card:#ffffff; --border:#dde1ea;
  --accent:#b8712a; --accent2:#a5621e; --text:#0f172a; --muted:#64748b;
  --bg-bubble-out:#faead4;
  --icon-filter: brightness(0); --bg-hover: rgba(0,0,0,.05);
}
:root[data-theme="dark"] {
  --bg:#0f172a; --bg2:#1e293b; --card:#16233b; --border:#2a3b5c;
  --accent:#deb887; --accent2:#deb887; --text:#f8fafc; --muted:#94a3b8;
  --bg-bubble-out:#3a2a15;
  --icon-filter: brightness(0) invert(1); --bg-hover: rgba(255,255,255,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;line-height:1.5}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
.test-banner{background:#3a1d00;color:#ffcf9e;text-align:center;font-size:12px;padding:6px 10px;letter-spacing:.02em}
.wrap{max-width:560px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px}
.btn{border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;display:inline-block}
.btn-primary{background:var(--accent);color:#1a0d00}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn:disabled{opacity:.5;cursor:default}
input[type=text],input[type=tel],input[type=email],textarea{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:12px 14px;color:var(--text);font-size:15px;font-family:inherit;margin-bottom:10px}
textarea{resize:vertical;min-height:80px}
.error{color:#ff8a8a;font-size:13px;margin-bottom:10px}
.hint{background:#1a2f1a;border:1px solid #2f5a2f;color:#a8e6a8;font-size:13px;padding:10px 12px;border-radius:8px;margin-bottom:12px}
.muted{color:var(--muted);font-size:14px}
.empty{color:var(--muted);font-size:14px;padding:20px 0;text-align:center}
.back-link{display:inline-block;margin-bottom:14px;color:var(--muted);font-size:14px}
/* 20.09.2026 — Алексей: нажал "Пожаловаться", окошко "залезло под нижнюю
   панель", почти не видно. Причина: .bottom-nav z-index:30 выше, чем у
   toast (20), а bottom:16px вообще попадал ПОД панель по высоте (56px +
   safe-area). Toast теперь всегда выше панели по z-index и по позиции. */
.toast{position:fixed;left:16px;right:16px;bottom:calc(72px + env(safe-area-inset-bottom));max-width:480px;margin:0 auto;background:var(--card);border:1px solid var(--accent);border-radius:10px;padding:12px 16px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.4);transform:translateY(120%);opacity:0;transition:transform .25s,opacity .25s;z-index:40}
.toast.show{transform:translateY(0);opacity:1}
.file-input{display:inline-flex;align-items:center;gap:10px;margin-bottom:10px}
.file-input input[type=file]{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}
.file-input .file-label{border:1px solid var(--border);border-radius:8px;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;background:transparent;color:var(--text)}
.file-input .file-label:hover{border-color:var(--accent2)}
.file-input .file-name{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}

/* 19.09.2026 — touch-first редактирование (Жорик, корректировка ТЗ): никакой
   отдельной страницы "загрузить обложку/аватар", камера прямо на элементе +
   шторка снизу вместо страницы настроек для имени/описания. */
.cam-btn{position:absolute;width:30px;height:30px;border-radius:50%;background:rgba(15,23,42,.75);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.cam-btn img{width:16px;height:16px;filter:brightness(0) invert(1)}
.cam-btn:hover{border-color:var(--accent)}
.cam-btn input[type=file]{position:absolute;width:1px;height:1px;opacity:0}

.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40;display:none;align-items:flex-end;justify-content:center}
.sheet-backdrop.show{display:flex}
.sheet{background:var(--card);width:100%;max-width:560px;border-radius:18px 18px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));max-height:80vh;overflow-y:auto}
.sheet h2{font-size:17px;margin-bottom:14px}
.sheet-actions{display:flex;gap:10px;margin-top:6px}
.sheet-actions .btn{flex:1}

.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);cursor:pointer;flex-shrink:0}
.icon-btn img{width:16px;height:16px;filter:var(--icon-filter);opacity:.85}
.icon-btn:hover{border-color:var(--accent)}

/* Нижняя панель (19.09.2026) — портирована со стиля кабинета EnigmaJob. */
body.has-bottom-nav{padding-bottom:64px}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);border-top:1px solid var(--border);display:flex;justify-content:space-around;height:56px;padding-bottom:env(safe-area-inset-bottom)}
.bn-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);text-decoration:none;font-size:11px}
.bn-tab:hover{text-decoration:none}
.bn-tab img{width:20px;height:20px;filter:var(--icon-filter);opacity:.6}
.bn-tab.bn-active{color:var(--accent2)}
.bn-tab.bn-active img{opacity:1;filter:var(--icon-filter) drop-shadow(0 0 6px var(--accent))}
/* 22.09.2026 — счётчик непрочитанных на кнопке "Эфир" (без капа, хоть 500) */
.bn-icon-wrap{position:relative;display:inline-flex}
.bn-badge{position:absolute;top:-6px;right:-10px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--accent2);color:#1a0d00;font-size:10px;line-height:16px;text-align:center;font-weight:700;box-shadow:0 0 0 2px var(--card)}

/* 20.09.2026 — вложения/эмодзи/композер, портировано из реального E-Talk
   (index.css: .composerInputWrap/.emojiPicker/.attachMenu), общий модуль
   для всех чат-страниц Social (Площадь/чат сообщества/личка/группа). */
.social-attach{margin:6px 0}
.social-attach-image{max-width:min(240px,100%);max-height:320px;border-radius:8px;display:block;cursor:pointer}
.social-attach-audio{width:100%;max-width:260px;height:36px}
.social-attach-file{display:inline-flex;align-items:center;gap:6px;color:var(--accent2);text-decoration:none;font-size:13px}

.social-composer-input-wrap{position:relative;flex:1;display:flex;align-items:center;min-width:0}
.social-composer-input-wrap input[type="text"]{flex:1;width:100%;border-radius:24px;padding:13px 44px;font-size:15px;margin-bottom:0}
/* 23.09.2026 — поле ввода росло не резиновым: <input> физически не может
   показать вторую строку, набранный текст просто уезжал за край (Алексей
   поймал на живых скриншотах WhatsApp-эталона). Заменено на <textarea>,
   растущую построчно до 5 строк (см. socialAutoGrowTextarea в
   social-auth.js), дальше — внутренний скролл, как в WhatsApp/Telegram. */
.social-composer-input-wrap textarea{flex:1;width:100%;border-radius:24px;padding:13px 44px;font-size:15px;margin-bottom:0;resize:none;line-height:1.35;max-height:118px;overflow-y:auto;display:block}
.social-composer-input-wrap .icon-btn{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;width:auto;height:auto;padding:4px}
.social-composer-input-wrap .icon-btn img{opacity:.75}
.social-composer-emoji-btn{left:8px}
.social-composer-attach-btn{right:8px}

.social-emoji-picker{position:relative;max-height:180px;overflow-y:auto;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:2px}
.social-emoji-btn{background:none;border:none;font-size:22px;padding:6px;border-radius:8px;cursor:pointer}
.social-emoji-btn:hover{background:var(--bg-hover,rgba(255,255,255,.08))}

.social-attach-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:16px 4px}
.social-attach-menu-item{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px}
.social-attach-menu-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff}
.social-attach-menu-icon img{width:22px;height:22px;filter:brightness(0) invert(1)}
.social-attach-menu-icon-gallery{background:#2d5fa8}
.social-attach-menu-icon-camera{background:#b5384f}
.social-attach-menu-icon-doc{background:#6a4fa0}

.social-voice-recording{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.social-recording-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ff5a5a;animation:social-pulse 1s infinite}
@keyframes social-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* 20.09.2026, третий заход — композер переделан по реальному E-Talk:
   круглая кнопка отправки/микрофона СНАРУЖИ пилюли поля (не текстовая
   кнопка на пол-экрана), сама пилюля с иконками внутри (см.
   .social-composer-input-wrap выше). Композер всегда снизу экрана
   (порядок в DOM: лента, потом композер) — раньше был наверху, реальный
   баг с телефона Алексея. */
.social-composer-row{display:flex;align-items:center;gap:8px;flex-shrink:0}
.social-send-btn{width:44px;height:44px;border-radius:50%;background:var(--accent);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0}
.social-send-btn img{width:18px;height:18px;filter:brightness(0)}
.social-send-btn:disabled{opacity:.4;cursor:default}

/* Панель выделенного сообщения — по прямому запросу Алексея: НЕ текст
   "Пожаловаться/Заблокировать" под каждым сообщением (засоряет ленту),
   а закреплённая полоска НАД композером, появляется только когда одно
   сообщение выделено тапом (long-press на реальном E-Talk, тап — наш
   упрощённый вариант первой версии). */
.social-selection-bar{display:flex;align-items:center;gap:4px;padding:8px 4px;border-top:1px solid var(--border);flex-shrink:0;overflow-x:auto}
.social-selection-bar .ssb-spacer{flex:1}
.social-selection-bar button{background:none;border:none;color:var(--text);font-size:13px;padding:6px 10px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0}
.social-selection-bar button:hover{background:var(--bg-hover)}
.social-selection-bar button img{width:16px;height:16px;filter:var(--icon-filter);opacity:.8}
.social-selection-bar .ssb-danger{color:#ff8a8a}
/* 21.09.2026 — визуальное отличие "уже заблокирован" (кнопка теперь значит
   "разблокировать") от обычного danger-состояния. */
.social-selection-bar .ssb-active{background:var(--bg-hover);color:var(--accent2)}
/* 21.09.2026 — раньше тут стоял filter:none (для кнопки без иконки, текстом,
   никогда не проверялось визуально) — trash.svg/block.svg монохромные
   (stroke="currentColor", как остальные иконки сайта), через <img> currentColor
   не подхватывается, filter:none давал чёрный силуэт, невидимый на тёмной
   теме ("корзину не видел"). Просто наследуют общее правило .social-
   selection-bar button img выше — тот же var(--icon-filter), что у всех. */
.msg.selected{outline:2px solid var(--accent2);outline-offset:1px}

/* 20.09.2026 — пересылка (Forward), список целевых чатов в bottom sheet. */
.social-forward-item{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);cursor:pointer}
.social-forward-item:last-child{border-bottom:none}
.social-forward-item input{margin:0;width:18px;height:18px;flex-shrink:0}
.msg-forwarded-label{font-size:11px;color:var(--muted);margin-bottom:2px;display:flex;align-items:center;gap:4px;font-style:italic}

/* 20.09.2026 — "официальная" галочка (Алексей: "как у Meta, только
   оранжевая") вместо текстовой плашки "Сообщество"/"Официально". */
.social-verified-badge{display:inline-flex;vertical-align:middle;margin-left:4px;color:var(--accent);flex-shrink:0}
.social-verified-badge svg{width:16px;height:16px;display:block}

/* 21.09.2026 — лайки/просмотры/поделиться, тот же приём, что у article.html
   (.ce-bar), просто под токены тёмной/светлой темы Social вместо фиксированных
   hex блога. */
.social-eng-bar{display:flex;align-items:center;gap:16px;margin-top:10px;position:relative;font-size:13px;color:var(--muted)}
.social-eng-views{display:inline-flex;align-items:center;gap:5px}
.social-eng-like,.social-eng-share,.social-eng-comment{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--muted);font-size:13px;font-family:inherit;cursor:pointer;padding:0}
.social-eng-like:hover,.social-eng-share:hover,.social-eng-comment:hover{color:var(--accent2)}
.social-eng-like.social-eng-liked{color:#ef4444}
.social-eng-share-menu{position:absolute;top:100%;left:0;margin-top:6px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px;min-width:180px;z-index:20;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.social-eng-share-menu[hidden]{display:none}
.social-eng-share-menu a,.social-eng-share-menu button{display:block;padding:8px 10px;color:var(--text);text-decoration:none;border-radius:6px;font-size:13px;font-family:inherit;background:none;border:none;text-align:left;cursor:pointer;width:100%}
.social-eng-share-menu a:hover,.social-eng-share-menu button:hover{background:rgba(255,255,255,.08)}
/* 22.09.2026 — комментарии к постам */
.social-comments-panel{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.social-comments-panel[hidden]{display:none}
.social-comments-list{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.social-comments-loading,.social-comments-empty{font-size:13px;color:var(--muted)}
.social-comment-head{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.social-comment-author{font-size:12px;font-weight:700;color:var(--accent2);text-decoration:none}
.social-comment-time{font-size:11px;color:var(--muted)}
.social-comment-body{font-size:13px;white-space:pre-wrap;word-break:break-word}
.social-comments-form{display:flex;gap:8px;align-items:flex-end}
.social-comments-input{flex:1;resize:none;min-height:34px;max-height:100px;padding:7px 10px;border-radius:10px;border:1px solid var(--border);background:var(--bg2);color:var(--text);font-size:13px;font-family:inherit}
.social-comments-submit{flex-shrink:0;padding:7px 14px;border-radius:10px;border:none;background:var(--accent2);color:#1a0d00;font-weight:600;font-size:13px;cursor:pointer}
.social-comments-submit:disabled{opacity:.6;cursor:default}
.social-comments-login{font-size:13px;color:var(--accent2)}