/* ===== ForYou Design System: светлая тема ===== */
:root{
  --bg:#f4f5f6;--panel:#ffffff;--input:#f0f2f3;--text:#1d2429;--dim:#69757d;
  --accent:#526d82;--accent2:#6f899c;--on-accent:#ffffff;--out:#526d82;--out-text:#ffffff;
  --in:#ffffff;--in-text:#1d2429;--border:#e2e6e8;--header:rgba(255,255,255,.94);
  --shadow:0 1px 2px rgba(22,30,35,.04),0 8px 28px rgba(22,30,35,.06);--glow:none;
  --chat:linear-gradient(160deg,#f1f3f4 0%,#e9edef 100%);
  --chip-on-bg:rgba(82,109,130,.11);
  --danger:#c0444d;--success:#34815b;--warning:#a66c18;--radius:16px;
  --empty-img:url('/empty-light.png');
}
/* ===== ForYou Design System: тёмная тема ===== */
[data-theme="dark"]{
  --bg:#111315;--panel:#191c1f;--input:#22262a;--text:#eef1f2;--dim:#929ca3;
  --accent:#8ba8be;--accent2:#a1b9ca;--on-accent:#11171b;--out:#607f96;--out-text:#ffffff;
  --in:#202428;--in-text:#eef1f2;--border:#2b3034;--header:rgba(25,28,31,.94);
  --shadow:0 1px 2px rgba(0,0,0,.25),0 10px 30px rgba(0,0,0,.18);--glow:none;
  --chat:linear-gradient(160deg,#141719 0%,#0f1113 100%);
  --chip-on-bg:rgba(139,168,190,.15);
  --danger:#e06b73;--success:#68b58a;--warning:#d8a353;--radius:16px;
  --empty-img:url('/empty-dark.png');
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:#202428;color:var(--text);font-feature-settings:"cv02","cv03","cv04","cv11";text-rendering:optimizeLegibility}
#app{position:fixed;top:0;left:0;right:0;height:var(--app-h, 100%);display:flex;justify-content:center;background:#202428}
.frame{width:100%;max-width:460px;height:100%;display:flex;flex-direction:column;background:var(--bg);overflow:hidden;position:relative}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:inherit}
.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{width:6px}.scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.hide{display:none!important}

/* ===== Плашка восстановления соединения ===== */
.conn-banner{flex:0 0 auto;max-height:0;padding:0 10px;overflow:hidden;background:#f59e0b;color:#1a1a1a;
  font-size:12.5px;font-weight:600;text-align:center;display:flex;align-items:center;justify-content:center;
  transition:max-height .25s ease,padding .25s ease}
.conn-banner.show{max-height:34px;padding:7px 10px}

.hdr{flex:0 0 auto;background:var(--header);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:12px 14px;min-height:56px;box-shadow:var(--shadow);z-index:5}
.hdr h1{font-size:18px;margin:0;font-weight:700}
.hdr .sub{font-size:12px;color:var(--dim);min-height:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr .sub .typing-status{color:var(--accent)}
.iconbtn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;flex:0 0 auto}
.iconbtn:active{background:var(--input)}
.accentbtn{background:var(--accent);color:var(--on-accent);border-radius:12px;padding:13px 16px;font-weight:700;font-size:15px;width:100%;box-shadow:var(--glow)}
.accentbtn:disabled{opacity:.5}
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex:0 0 auto;overflow:hidden;background-size:cover;background-position:center;user-select:none}

.auth{flex:1;display:flex;flex-direction:column;justify-content:center;padding:26px 24px;overflow-y:auto}
.logo{font-size:34px;font-weight:800;letter-spacing:-1px;text-align:center;margin-bottom:4px}
.logo span{color:var(--accent);text-shadow:var(--glow)}
.tagline{text-align:center;color:var(--dim);font-size:13px;margin-bottom:26px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--dim);margin:0 0 5px 4px;font-weight:600}
.field input{width:100%;background:var(--input);border:1px solid var(--border);border-radius:12px;padding:13px 14px;font-size:15px;color:var(--text);outline:none}
.field input:focus{border-color:var(--accent)}
.row2{display:flex;gap:10px}.row2>*{flex:1}
.switchline{text-align:center;margin-top:18px;font-size:14px;color:var(--dim)}
.switchline b,.switchline a{color:var(--accent);cursor:pointer}
.auth-ok{background:rgba(34,197,94,.12);color:#86efac;padding:12px 14px;border-radius:12px;font-size:14px;margin-bottom:12px;line-height:1.45}
.consent-row{display:flex;gap:10px;align-items:flex-start;margin:8px 0 14px;font-size:13px;line-height:1.45;color:var(--dim)}
.consent-row input{width:auto;margin:3px 0 0;flex:0 0 auto}
.consent-row a{color:var(--accent)}
.auth-legal{margin-top:16px;text-align:center;font-size:12px;color:var(--dim);line-height:1.55}
.auth-legal a{color:var(--accent)}
.err{background:rgba(255,60,80,.12);color:#ff5a72;border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:12px;border:1px solid rgba(255,60,80,.25)}

.list{flex:1}
.ptr-indicator{height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--accent);flex-shrink:0;transition:height .2s ease}
.ptr-indicator svg{width:22px;height:22px;display:block}
.ptr-indicator.ptr-spin{animation:ptr-rotate .8s linear infinite}
@keyframes ptr-rotate{to{transform:rotate(360deg)}}
.cell{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer}
.cell:active{background:var(--input)}
.cell .meta{flex:1;min-width:0}
.cell .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cell .name{font-weight:600;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell .time{font-size:11.5px;color:var(--dim);flex:0 0 auto}
.cl-check{display:inline-flex;align-items:center;color:var(--dim);flex:0 0 auto;margin-right:-2px}
.cl-check svg{width:16px;height:16px}
.cl-check.read{color:var(--accent)}
/* галочки статуса в пузыре сообщения (1=отправлено, 2 тусклые=доставлено, 2 ярко-голубые=прочитано) */
.b-time .rcheck-b{display:inline-flex;align-items:center;vertical-align:-3px;margin-left:1px;opacity:.62}
.b-time .rcheck-b svg{width:14px;height:14px}
.b-time .rcheck-b.read{opacity:1;color:#8fd8ff}
.b-time .rcheck-pending svg{width:12px;height:12px}
.b-time .b-failedmark{display:inline-flex;align-items:center;vertical-align:-2px;color:#ff8a8a}
.b-time .b-failedmark svg{width:13px;height:13px}
.cell .preview{font-size:13.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.cell .preview.typing-status{color:var(--accent)}
.cell .nick{font-size:12.5px;color:var(--accent)}
.divider{height:1px;background:var(--border);margin-left:66px}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--dim);padding:40px 30px;gap:8px}
.empty .big{font-size:40px}.empty h3{margin:6px 0 0;color:var(--text);font-size:17px}
.empty p{margin:0;font-size:13.5px;line-height:1.5;max-width:260px}
.linkbtn{color:var(--accent);font-weight:600;font-size:14px;padding:8px}

.nav{flex:0 0 auto;display:flex;background:var(--header);border-top:1px solid var(--border)}
.nav button{flex:1;padding:9px 0 11px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--dim);font-size:10.5px;font-weight:600}
.nav button .ic{font-size:21px}
.nav button.on{color:var(--accent)}

.chatwrap{flex:1;display:flex;flex-direction:column;background:var(--chat);min-height:0}
.msgs{flex:1;padding:12px 10px 6px;display:flex;flex-direction:column;gap:3px}
.bubble{max-width:80%;padding:8px 11px 7px;border-radius:16px;font-size:14.5px;line-height:1.35;position:relative;word-wrap:break-word;box-shadow:var(--shadow)}
.b-in{align-self:flex-start;background:var(--in);color:var(--in-text);border-bottom-left-radius:5px}
.b-out{align-self:flex-end;background:var(--out);color:var(--out-text);border-bottom-right-radius:5px}
.b-sender{font-size:12.5px;font-weight:700;color:var(--accent);margin-bottom:2px}
.b-time{font-size:10px;opacity:.7;text-align:right;margin-top:2px}
.b-media img,.b-media video{max-width:230px;max-height:300px;border-radius:11px;display:block;margin-bottom:3px}
.b-expired{font-size:13px;font-style:italic;opacity:.7;padding:14px;text-align:center;border:1px dashed currentColor;border-radius:11px;margin-bottom:3px}
.daysep{align-self:center;background:rgba(0,0,0,.18);color:#fff;font-size:11px;padding:3px 10px;border-radius:10px;margin:6px 0}

.composer{position:relative;flex:0 0 auto;display:flex;align-items:flex-end;gap:8px;padding:8px 10px;background:var(--header);border-top:1px solid var(--border)}
.composer textarea{flex:1;resize:none;background:var(--input);border:1px solid var(--border);border-radius:20px;padding:11px 14px;font-size:15px;color:var(--text);outline:none;max-height:120px;line-height:1.3}
.composer textarea:focus{border-color:var(--accent)}

/* ===== Кнопка скрытия клавиатуры (снизу, как в Telegram) ===== */
.kb-dismiss{display:none;position:absolute;top:-44px;right:8px;width:34px;height:34px;border-radius:50%;
  background:var(--panel);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow);
  align-items:center;justify-content:center;font-size:18px;line-height:1;z-index:40}
.kb-dismiss:active{transform:scale(.92)}
.frame.kb-open .kb-dismiss{display:flex}
.sendbtn{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:19px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:var(--glow)}
.sendbtn:disabled{opacity:.4}
.composer .sendbtn{display:none}
.composer.has-text .sendbtn{display:flex}
.composer.has-text .composer-voice,.composer.has-text .composer-video{display:none}
.mediaprev{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--input);border-top:1px solid var(--border)}
.mediaprev img,.mediaprev video{width:46px;height:46px;border-radius:8px;object-fit:cover}

.overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:30;display:flex;flex-direction:column}
.sheet{margin-top:auto;background:var(--panel);border-radius:20px 20px 0 0;max-height:88%;display:flex;flex-direction:column}
.full{position:absolute;inset:0;background:var(--bg);z-index:25;display:flex;flex-direction:column}
.sheet-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 6px}
.sheet-h h2{margin:0;font-size:18px;font-weight:700}
.profcard{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 20px 18px}
.profname{font-size:20px;font-weight:700}
.profdesc{font-size:13.5px;color:var(--dim);text-align:center;max-width:280px;line-height:1.45}
.section-t{font-size:12px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;padding:18px 18px 8px}
.opt{display:flex;align-items:center;gap:12px;padding:13px 18px;cursor:pointer}
.opt:active{background:var(--input)}
.opt .ic{font-size:18px;width:24px;text-align:center}.opt .lbl{flex:1;font-size:15px}
.optsel{flex:0 0 auto;background:var(--input);color:var(--text);border:1px solid var(--border);border-radius:8px;
  padding:6px 10px;font-size:13px;font-family:inherit;max-width:42%}
.themegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px 16px 18px}
.themecard{border:2px solid var(--border);border-radius:14px;padding:12px;cursor:pointer;display:flex;align-items:center;gap:10px}
.themecard.on{border-color:var(--accent);background:var(--chip-on-bg)}
.swatch{width:34px;height:34px;border-radius:9px;flex:0 0 auto;position:relative;overflow:hidden;border:1px solid var(--border)}
.swatch span{position:absolute;right:0;top:0;width:55%;height:100%}
.themecard .tl{font-size:14px;font-weight:600}
.searchbar{padding:10px 14px;background:var(--header);border-bottom:1px solid var(--border)}
.searchbar input{width:100%;background:var(--input);border:1px solid var(--border);border-radius:12px;padding:11px 14px;font-size:15px;color:var(--text);outline:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 8px}
.chip{background:var(--accent);color:var(--on-accent);border-radius:20px;padding:5px 12px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.check{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--border);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:13px}
.check.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.toast{position:absolute;bottom:78px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 18px;border-radius:22px;font-size:13.5px;font-weight:600;z-index:60;box-shadow:0 4px 20px rgba(0,0,0,.3);max-width:90%;text-align:center}
.hint{font-size:12px;color:var(--dim);padding:0 18px 4px;line-height:1.4}
.spin{width:30px;height:30px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:rot .7s linear infinite;margin:30px auto}
@keyframes rot{to{transform:rotate(360deg)}}
.boot-wait{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 24px;gap:6px}
.boot-msg{font-size:14px;font-weight:600;color:var(--text);margin-top:6px}
.boot-sub{font-size:12.5px;color:var(--dim)}
.boot-wait .linkbtn{margin-top:10px}

/* ================= ОБНОВЛЁННЫЙ ДИЗАЙН (3 темы) ================= */

/* Заголовок без жёсткой линии — мягче */
.hdr{border-bottom:1px solid var(--border)}

/* Поиск в списке чатов */
.chatsearch{display:flex;gap:10px;padding:8px 14px 6px;background:var(--header)}
.chatsearch .box{flex:1;display:flex;align-items:center;gap:9px;background:var(--input);border:1px solid var(--border);border-radius:13px;padding:11px 14px}
.chatsearch .box svg{flex:0 0 auto;opacity:.6}
.chatsearch input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:15px;min-width:0}
.chatsearch input::placeholder{color:var(--dim)}
.chatsearch .filtbtn{width:48px;border-radius:13px;background:var(--input);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:17px}

/* Чипы-фильтры */
.chips-row{display:flex;gap:8px;padding:4px 14px 12px;overflow-x:auto;background:var(--header);border-bottom:1px solid var(--border)}
.chips-row::-webkit-scrollbar{display:none}
.fchip{flex:0 0 auto;padding:8px 17px;border-radius:22px;border:1px solid var(--border);
  font-size:13.5px;font-weight:600;color:var(--dim);background:var(--panel);transition:all .15s;white-space:nowrap}
.fchip.on{color:var(--bg);border-color:var(--text);background:var(--text);font-weight:700}

/* ===== Пустые состояния с иллюстрациями ===== */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;
  text-align:center;padding:30px 28px;gap:0}
.empty-illu{width:240px;height:240px;max-width:62vw;max-height:62vw;background-image:var(--empty-img);
  background-size:contain;background-repeat:no-repeat;background-position:center;margin-bottom:8px}
.empty-title{font-size:23px;font-weight:800;color:var(--text);margin:4px 0 10px;letter-spacing:-.3px}
.empty-sub{font-size:15px;color:var(--dim);line-height:1.5;max-width:280px;margin-bottom:26px}
.empty-cta{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--on-accent);
  border-radius:28px;padding:15px 30px;font-weight:700;font-size:15.5px;
  box-shadow:0 10px 26px rgba(59,124,255,.32);transition:transform .12s}
.empty-cta:active{transform:scale(.97)}
[data-theme="dark"] .empty-cta{box-shadow:0 10px 26px rgba(59,130,246,.30)}

/* мелкое пустое состояние (фильтр/поиск ничего не нашёл) */
.empty-mini{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 30px;text-align:center;color:var(--dim);gap:6px}
.empty-mini .big{font-size:34px;opacity:.8}

/* ===== Скруглённая нижняя навигация с точкой ===== */
.nav{border-top:1px solid var(--border);padding-bottom:max(6px,env(safe-area-inset-bottom))}
.nav button{position:relative}
.nav button.on .ic{filter:drop-shadow(var(--glow))}
.nav .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:2px;box-shadow:var(--glow)}

/* ===== Кнопка установки приложения (на экране входа) ===== */
.install-block{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);text-align:center}
.install-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--input);color:var(--text);border:1px solid var(--border);border-radius:14px;
  padding:13px 16px;font-size:15px;font-weight:700;transition:transform .12s,border-color .15s;
  text-decoration:none;box-sizing:border-box;cursor:pointer}
.install-btn:active{transform:scale(.98)}
.install-btn svg{color:var(--accent)}
.install-hint{font-size:12.5px;color:var(--dim);line-height:1.5;margin-top:10px}
.install-hint b{color:var(--text)}

/* ===== Глазик на поле пароля ===== */
.pass-wrap{position:relative;display:flex;align-items:center}
.pass-wrap input{flex:1;padding-right:44px}
.eye-btn{position:absolute;right:10px;font-size:17px;background:none;border:none;cursor:pointer;
  color:var(--dim);padding:6px;line-height:1;transition:opacity .15s}
.eye-btn:active{opacity:.6}

/* ===== Экран обязательного обновления ===== */
#update-screen{position:fixed;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;padding:24px;z-index:9999}
.update-card{background:#fff;border-radius:24px;padding:36px 24px;
  max-width:340px;width:100%;text-align:center;box-shadow:0 24px 64px rgba(0,0,0,.5)}
.update-icon{font-size:54px;margin-bottom:14px;color:#3b7cff;animation:rot 1s linear infinite}
.update-title{font-size:19px;font-weight:800;color:#0d1620;margin-bottom:10px;line-height:1.3}
.update-sub{font-size:14px;color:#7a8694;line-height:1.55;margin-bottom:24px}
.update-progress{width:100%;height:8px;background:#eef1f6;border-radius:8px;overflow:hidden}
.update-progress-bar{width:0%;height:100%;background:#3b7cff;border-radius:8px;transition:width .9s ease}

/* ===== Онлайн-точка ===== */
.online-dot{position:absolute;bottom:1px;right:1px;width:13px;height:13px;background:#22c55e;
  border-radius:50%;border:2px solid var(--header);flex:0 0 auto}
[data-theme="dark"] .online-dot{border-color:var(--bg)}

/* ===== Непрочитанные ===== */
.unread-badge{background:var(--accent);color:var(--on-accent);border-radius:22px;
  padding:2px 7px;font-size:11.5px;font-weight:700;min-width:20px;text-align:center}
.name-bold{font-weight:800}
.preview-bold{color:var(--text);font-weight:600}

/* ===== Лайтбокс ===== */
.lightbox-overlay{position:absolute;inset:0;background:rgba(0,0,0,.92);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:20px}
.lb-img{max-width:100%;max-height:100%;border-radius:12px;object-fit:contain;
  box-shadow:0 8px 40px rgba(0,0,0,.6)}
.lb-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.18);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center}

/* ===== Панель действий у сообщений ===== */
.msg-actions{display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--panel);border-radius:14px;
  box-shadow:var(--shadow);margin-bottom:4px;animation:pop .15s ease;min-width:200px;max-width:84%}
.ma-out{align-self:flex-end}
.ma-in{align-self:flex-start}
.ma-emojis{display:flex;justify-content:space-between;gap:2px;padding:0 2px 6px;border-bottom:1px solid var(--border)}
.ma-emoji{font-size:21px;padding:4px;border-radius:10px;transition:transform .1s;flex:1;text-align:center}
.ma-emoji:active{transform:scale(1.25)}
.ma-menu{display:flex;flex-direction:column;gap:1px}
.ma-item{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:8px;font-size:14.5px;
  font-weight:500;color:var(--text);text-align:left;width:100%}
.ma-item:active{background:var(--input)}
.ma-ic{font-size:17px;width:22px;text-align:center;flex:0 0 auto}

/* ===== Реакции ===== */
.reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px;margin-bottom:2px;padding:0 4px;max-width:80%}
.reactions.r-out{align-self:flex-end;justify-content:flex-end}
.reactions.r-in{align-self:flex-start;justify-content:flex-start}
.react-pill{display:inline-flex;align-items:center;gap:3px;background:var(--input);
  border:1px solid var(--border);border-radius:22px;padding:3px 8px;font-size:13px;cursor:pointer}
.react-pill.mine{background:var(--chip-on-bg,rgba(59,124,255,.12));border-color:var(--accent)}

/* ===== Пересылка ===== */
.fwd-label{font-size:11.5px;color:var(--accent);font-weight:600;margin-bottom:3px;opacity:.85}

/* ===== Тогглы ===== */
.toggle-sw{position:relative;width:44px;height:24px;flex:0 0 auto;cursor:pointer}
.toggle-sw input{opacity:0;width:0;height:0;position:absolute}
.toggle-sw span{position:absolute;inset:0;background:var(--border);border-radius:24px;transition:background .2s}
.toggle-sw span::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;
  background:#fff;border-radius:50%;transition:transform .2s}
.toggle-sw input:checked + span{background:var(--accent)}
.toggle-sw input:checked + span::after{transform:translateX(20px)}

/* ===== Изображения: квадратный превью, оригинал в лайтбоксе ===== */
.b-media img {
  width: 180px !important;
  height: 180px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block;
  cursor: pointer;
  margin-bottom: 3px;
}
.b-media video {
  max-width: 230px;
  max-height: 200px;
  border-radius: 12px;
  display: block;
  margin-bottom: 3px;
}
/* ===== Видео-сообщения: квадратный превью с кнопкой play, оригинал в лайтбоксе ===== */
.b-media-video {
  position: relative;
  width: 180px;
  height: 180px;
  margin-bottom: 3px;
}
.b-media-video video.tap-video {
  width: 180px !important;
  height: 180px !important;
  max-width: none;
  max-height: none;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block;
  cursor: pointer;
  margin-bottom: 0;
}
.b-media-video .vid-play-ic {
  position: absolute; top: 0; left: 0; width: 180px; height: 180px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.25); border-radius: 12px;
  font-size: 32px; color: #fff; pointer-events: none;
}
/* видео-лайтбокс — оригинальные пропорции */
.lb-video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.7);
}
/* лайтбокс — оригинальные пропорции */
.lightbox-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.94);
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 16px 24px;
}
.lb-img {
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.7);
}

/* ===== Прозрачный статусбар — контент под ним ===== */
.hdr {
  padding-top: max(12px, env(safe-area-inset-top)) !important;
  min-height: calc(56px + env(safe-area-inset-top)) !important;
}
.frame {
  /* контент начинается от самого верха экрана */
  padding-top: 0;
}
/* нижняя навигация тоже учитывает safe area (на iPhone X+) */
.nav {
  padding-bottom: max(11px, env(safe-area-inset-bottom)) !important;
}

/* ===== In-app heads-up банер ===== */
.fy-hu {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 12px));
  left: 50%;
  transform: translateX(-50%) translateY(calc(-100% - 20px));
  width: calc(100% - 24px);
  max-width: 440px;
  background: var(--panel);
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
  z-index: 9990;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.175,.885,.32,1.2);
  border: 1px solid var(--border);
}
.fy-hu-show {
  transform: translateX(-50%) translateY(0);
}
[data-theme="neon"] .fy-hu {
  box-shadow: 0 0 30px rgba(0,229,255,.3), 0 8px 40px rgba(0,0,0,.5);
}
.fy-hu-body {
  flex: 1;
  min-width: 0;
}
.fy-hu-name {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fy-hu-text {
  font-size: 13.5px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.fy-hu-close {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--dim);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.fy-hu-close:active { background: var(--input); }

/* ===== Кнопки микрофона и видео в composer ===== */
.composer-voice,.composer-video{color:var(--accent);opacity:.85}
.composer-voice:active,.composer-video:active{opacity:1;transform:scale(1.15)}

/* ===== Панель голосовой записи ===== */
.rec-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--header);border-top:1px solid var(--border)}
.rec-cancel-btn{color:var(--dim)}
.rec-waves{display:flex;align-items:center;gap:3px;height:28px;flex:1}
.rec-waves span{display:inline-block;width:4px;background:var(--accent);border-radius:4px;
  animation:wave .8s ease-in-out infinite}
.rec-waves span:nth-child(1){height:8px;animation-delay:0s}
.rec-waves span:nth-child(2){height:18px;animation-delay:.15s}
.rec-waves span:nth-child(3){height:26px;animation-delay:.3s}
.rec-waves span:nth-child(4){height:16px;animation-delay:.45s}
.rec-waves span:nth-child(5){height:10px;animation-delay:.6s}
@keyframes wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.6)}}
.rec-time{font-size:15px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.rec-max{font-size:12px;color:var(--dim)}
.rec-send-btn{background:var(--accent);color:var(--on-accent);border-radius:20px;padding:8px 16px;
  font-size:14px;font-weight:700;white-space:nowrap;box-shadow:var(--glow)}

/* ===== Видеозапись — оверлей ===== */
.vid-rec-overlay{position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.88);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.vid-rec-close{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;
  background:rgba(255,255,255,.15);color:#fff;border-radius:50%;width:40px;height:40px}
.vid-circle-wrap{position:relative;width:260px;height:260px}
.vid-rec-vid{width:100%;height:100%;border-radius:50%;object-fit:cover;transform:scaleX(-1)}
.vid-rec-ring{position:absolute;inset:-6px;pointer-events:none}
.vid-rec-ring svg{width:100%;height:100%}
.vid-rec-timer{font-size:22px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 2px 8px rgba(0,0,0,.5)}
.vid-rec-btns{display:flex;gap:14px}
.vid-rec-start{background:var(--accent);color:var(--on-accent);border-radius:28px;
  padding:14px 32px;font-size:16px;font-weight:800;box-shadow:0 0 24px rgba(59,124,255,.5)}
.vid-rec-stop{background:#ef4444;color:#fff;border-radius:28px;
  padding:14px 32px;font-size:16px;font-weight:800;box-shadow:0 0 24px rgba(239,68,68,.5)}

/* ===== Голосовое сообщение ===== */
.voice-msg{display:flex;align-items:center;gap:10px;padding:4px 2px;min-width:180px;cursor:pointer}
.vm-play{width:38px;height:38px;border-radius:50%;background:var(--accent);
  color:var(--on-accent);font-size:15px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.vm-track{flex:1;height:4px;background:rgba(255,255,255,.25);border-radius:4px;overflow:hidden;min-width:80px}
.b-in .vm-track{background:rgba(0,0,0,.1)}
.vm-prog{height:100%;background:var(--accent);border-radius:4px;transition:width .2s}
.vm-dur{font-size:12px;opacity:.75;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ===== Мини-плеер голосового сообщения (плашка вне открытого чата) ===== */
.voice-mini{
  position: fixed;
  left: 50%;
  bottom: calc(max(76px, calc(env(safe-area-inset-bottom, 0px) + 70px)) + var(--mini-stack-index, 0) * 64px);
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 440px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
  z-index: 9990;
}
[data-theme="neon"] .voice-mini{box-shadow:0 0 30px rgba(0,229,255,.3),0 8px 40px rgba(0,0,0,.5)}
.vmini-play{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--accent);
  color:var(--on-accent);font-size:15px;display:flex;align-items:center;justify-content:center}
.vmini-body{flex:1;min-width:0}
.vmini-title{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.vmini-track{height:4px;background:var(--input);border-radius:4px;overflow:hidden}
.vmini-prog{height:100%;background:var(--accent);border-radius:4px;transition:width .2s}
.vmini-time{flex:0 0 auto;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.vmini-close{flex:0 0 auto;font-size:16px;color:var(--dim);width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.vmini-close:active{background:var(--input)}
.video-mini .vmini-vidwrap{flex:0 0 auto;width:44px;height:44px;border-radius:50%;overflow:hidden;background:#000}
.video-mini .vmini-vid{width:100%;height:100%;object-fit:cover}
.video-mini .vmini-play{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--accent);
  color:var(--on-accent);font-size:14px;display:flex;align-items:center;justify-content:center}

/* ===== Видеокружок ===== */
.vcircle-wrap{margin:2px 0}
.vcircle-wrap.vc-out{display:flex;justify-content:flex-end}
.vcircle{position:relative;width:180px;height:180px;border-radius:50%;overflow:hidden;
  cursor:pointer;flex:0 0 auto;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.vc-vid{width:100%;height:100%;object-fit:cover;border-radius:50%;transform:scaleX(-1)}
.vc-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);font-size:32px;color:#fff;border-radius:50%;transition:opacity .2s}

/* ===== Видеокружок — убрать синий пузырь ===== */
.bubble.bubble-clean {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.bubble.bubble-clean .b-time {
  text-align: right;
  padding: 3px 4px 0;
  color: var(--dim);
  font-size: 10px;
}
/* Тонкая рамка кружка под тему */
.vcircle {
  border: 2.5px solid var(--accent);
}
[data-theme="dark"] .vcircle {
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(59,130,246,.28);
}

/* ===== Редактирование, удаление, статусы, пины, автоудаление ===== */
.optval{font-size:13px;color:var(--dim);flex:0 0 auto}

.sysmsg{align-self:center;background:var(--panel);border:1px solid var(--border);color:var(--dim);
  font-size:12px;padding:5px 12px;border-radius:12px;margin:4px 0;text-align:center;max-width:85%}

.b-pin{position:absolute;top:-8px;right:-6px;width:20px;height:20px;border-radius:50%;
  background:var(--panel);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-size:11px}
.b-edited{opacity:.75;font-style:italic;margin-right:2px}
.b-status{opacity:.85}

.ma-item.ma-danger{color:#ef4444}

.pinbar{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--header);border-bottom:1px solid var(--border)}
.pinbar-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;cursor:pointer;
  border-left:2px solid var(--accent);padding-left:8px}
.pinbar-ic{font-size:17px;color:var(--accent)}
.pinbar-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pinbar-title{font-size:11.5px;font-weight:700;color:var(--accent)}
.pinbar-text{font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.editbar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--input);border-top:1px solid var(--border)}
.editbar-ic{font-size:16px;color:var(--accent)}

/* ===== Ответ на сообщение ===== */
.reply-quote{border-left:3px solid rgba(127,127,127,.55);padding:3px 8px;margin:0 0 4px;
  border-radius:4px;background:rgba(127,127,127,.10);cursor:pointer}
.reply-quote-name{font-size:12px;font-weight:700;line-height:1.3}
.reply-quote-text{font-size:12.5px;line-height:1.3;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.replybar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--input);border-top:1px solid var(--border)}
.replybar-name{font-size:12.5px;font-weight:700;color:var(--accent)}
.replybar-text{font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== Сервисы: сетка приложений ===== */
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px}
.app-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  aspect-ratio:1;border-radius:18px;background:var(--panel);border:1px solid var(--border);
  cursor:pointer;padding:10px}
.app-tile:active{background:var(--input)}
.app-tile-icon{font-size:32px;color:var(--accent);width:56px;height:56px;border-radius:14px;
  background:var(--input);display:flex;align-items:center;justify-content:center}
.app-tile-lbl{font-size:13px;font-weight:600;text-align:center}

/* ===== Сервис "Музыка" ===== */
.music-tabs{padding-top:10px}
.music-list{padding-bottom:6px}
.catalog-searchbar{display:flex;align-items:center;gap:8px}
.catalog-searchbar input{flex:1}
.catalog-searchbar .iconbtn{background:var(--input);border-radius:12px}
.catalog-loadmore{display:flex;justify-content:center;padding:14px;color:var(--dim);font-size:13.5px}
.track-cell .track-ic{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--input);
  display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--dim)}
.track-cell .track-cover{flex:0 0 auto;width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--input)}
.track-cell.playing .track-ic{background:var(--accent);color:var(--on-accent)}
.track-cell.playing .name{color:var(--accent)}
.scroll-top-btn{position:absolute;right:16px;bottom:14px;width:42px;height:42px;border-radius:50%;border:none;
  background:var(--accent);color:var(--on-accent);font-size:18px;box-shadow:0 4px 14px rgba(0,0,0,.25);
  display:none;align-items:center;justify-content:center;z-index:6;transition:bottom .15s}
.scroll-top-btn.show{display:flex}

/* ===== Сервис "Новости проекта" ===== */
.news-cell .track-ic{flex:0 0 auto;width:52px;height:52px;border-radius:12px;background:var(--input);
  display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--dim)}
.news-cell .news-thumb{flex:0 0 auto;width:52px;height:52px;border-radius:12px;object-fit:cover;background:var(--input)}
.news-excerpt{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.news-date{font-size:11.5px;color:var(--dim);margin-top:2px}
.news-article-img{width:100%;display:block;max-height:240px;object-fit:cover}
.news-article-body{padding:16px 18px 28px}
.news-article-body h2{font-size:19px;font-weight:700;margin:6px 0 12px}
.news-text p{font-size:14.5px;line-height:1.55;margin:0 0 12px;color:var(--text)}

.music-player-bar{flex:0 0 auto;background:var(--panel);border-top:1px solid var(--border);padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px}
.mp-row{display:flex;align-items:center;gap:12px}
.mp-info{flex:1;min-width:0}
.mp-title{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-artist{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-vol{flex:0 0 auto;display:flex;align-items:center;gap:6px;width:120px;color:var(--dim)}
.mp-vol .ic{font-size:16px;flex:0 0 auto}
.mp-close{flex:0 0 auto;font-size:18px;color:var(--dim);display:flex;align-items:center;justify-content:center;width:28px;height:28px}
.mp-fav{color:var(--dim)}
.mp-fav.on{color:#ff5a72}
.radio-source-hint{margin:0 14px 10px;padding:8px 12px;border-radius:10px;background:rgba(245,158,11,.12);color:#f59e0b;font-size:12px;line-height:1.4}
/* ===================== РАДИО: десктоп-плеер (крупная панель «сейчас играет») ===================== */
.radio-hero{margin:4px 16px 14px;padding:20px;border-radius:18px;background:var(--panel-2,var(--panel));border:1px solid var(--border);display:flex;align-items:center;gap:18px}
.radio-hero-empty{color:var(--dim)}
.radio-hero-cover{width:88px;height:88px;border-radius:16px;object-fit:cover;flex:0 0 auto}
.radio-hero-ic{width:88px;height:88px;border-radius:16px;background:var(--input);display:flex;align-items:center;justify-content:center;font-size:34px;color:var(--accent);flex:0 0 auto}
.radio-hero-info{flex:1;min-width:0}
.radio-hero-title{font-size:21px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio-hero-sub{font-size:13.5px;color:var(--dim);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio-hero-controls{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.radio-hero-play{width:54px;height:54px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:22px;display:flex;align-items:center;justify-content:center}
.radio-hero-vol{width:130px}
.radio-hero-fav{font-size:20px}
.mp-track{position:relative;height:18px;cursor:pointer}
.mp-track::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:4px;background:var(--input);border-radius:4px}
.mp-prog{position:absolute;left:0;top:50%;transform:translateY(-50%);height:4px;background:var(--accent);border-radius:4px;transition:width .15s}
.mp-times{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;margin-top:-4px}
.mp-controls{display:flex;align-items:center;justify-content:center;gap:18px}
.mp-controls button{display:flex;align-items:center;justify-content:center;color:var(--text);font-size:20px}
.mp-play{width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:20px}
.mp-shuffle,.mp-repeat{font-size:17px;color:var(--dim);position:relative}
.mp-shuffle.on,.mp-repeat.on{color:var(--accent)}
.mp-repeat.one::after{content:"1";position:absolute;top:-2px;right:-7px;font-size:9px;font-weight:700;color:var(--accent)}
/* мобильный полноценный плеер радио: обложка + громкость, без перемотки (прямой эфир) */
.radio-player-full .mp-row{align-items:center}
.radio-pb-cover{width:44px;height:44px;border-radius:11px;object-fit:cover;flex:0 0 auto}
.radio-pb-ic{width:44px;height:44px;border-radius:11px;background:var(--input);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--accent);flex:0 0 auto}
.radio-pb-controls{justify-content:flex-start;gap:14px;margin-top:2px}
.radio-pb-vol{flex:1;width:auto;max-width:none}
.radio-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;margin-right:6px;vertical-align:middle;animation:radioLive 1.6s ease-in-out infinite}
@keyframes radioLive{0%,100%{opacity:1}50%{opacity:.35}}

input[type="range"]{-webkit-appearance:none;appearance:none;flex:1;height:4px;background:var(--input);border-radius:4px;outline:none}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer}
input[type="range"]::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:var(--accent);cursor:pointer}
input[type="range"]::-moz-range-track{height:4px;background:var(--input);border-radius:4px}

.music-mini .vmini-play{font-size:14px}

@keyframes flashHighlight{0%,100%{outline-color:transparent}25%,75%{outline-color:var(--accent)}}
.flash{outline:2px solid transparent;outline-offset:2px;animation:flashHighlight 1.2s ease-in-out}

/* ===== Фото профиля: сетка превью ===== */
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 18px 18px}
.photo-thumb{aspect-ratio:1;border-radius:10px;background-size:cover;background-position:center;background-color:var(--input);cursor:pointer}
.add-photo-btn{display:block;width:100%;text-align:center;background:var(--input);border:1px dashed var(--border);
  border-radius:10px;padding:12px;font-size:14px;font-weight:600;color:var(--accent);cursor:pointer}

/* ===== Альбомы: обложки ===== */
.album-thumb{position:relative;overflow:hidden}
.album-thumb-overlay{position:absolute;left:0;right:0;bottom:0;padding:6px 8px 5px;
  background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff}
.album-thumb-title{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.album-thumb-count{font-size:10.5px;opacity:.8}

/* ===== Просмотрщик фото (Telegram-style) ===== */
.gallery-overlay{position:absolute;inset:0;background:rgba(0,0,0,.94);z-index:55;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 16px}
.gallery-img{max-width:100%;max-height:75%;width:auto;height:auto;object-fit:contain;
  border-radius:10px;box-shadow:0 8px 40px rgba(0,0,0,.7)}
.gallery-track-wrap{position:relative;width:100%;height:75%;overflow:hidden}
.gallery-track{display:flex;width:300%;height:100%;transform:translateX(-33.3333%);
  transition:transform .28s ease;touch-action:pan-y;cursor:grab}
.gallery-track.no-anim{transition:none;cursor:grabbing}
.gallery-slide{width:33.3333%;height:100%;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0 16px}
.gallery-track .gallery-img{max-height:100%}
.gallery-counter{position:absolute;top:16px;left:50%;transform:translateX(-50%);color:#fff;
  font-size:13px;font-weight:600;background:rgba(255,255,255,.15);border-radius:14px;padding:4px 12px}
.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center}
.gallery-prev{left:10px}
.gallery-next{right:10px}
.gallery-actions{position:absolute;bottom:0;left:0;right:0;display:flex;gap:10px;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.6))}
.gallery-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(255,255,255,.14);color:#fff;border-radius:12px;padding:12px;font-size:14px;font-weight:600}
.gallery-action-danger{color:#ff5a72}
.gallery-action-label{flex:1;text-align:center;color:rgba(255,255,255,.6);font-size:13px;padding:12px}

/* ===== Просмотрщик фото: лайки и комментарии ===== */
.gallery-social{position:absolute;right:14px;bottom:110px;
  display:flex;flex-direction:column;gap:22px;align-items:center;z-index:2}
.gallery-social-btn{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;font-size:26px}
.gallery-social-btn.on{color:#ff5a72}
.gallery-social-count{font-size:12px;font-weight:600;color:rgba(255,255,255,.85)}
.gallery-comments{position:absolute;left:0;right:0;bottom:0;max-height:55vh;
  display:flex;flex-direction:column;background:rgba(20,20,26,.97);border-radius:16px 16px 0 0;
  z-index:6;padding-bottom:env(safe-area-inset-bottom)}
.gallery-comments-h{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.gallery-comments-h h3{font-size:15px;color:#fff;margin:0}
.gallery-comments-h .iconbtn{color:#fff}
.gallery-comments-list{flex:1;overflow-y:auto;padding:8px 16px}
.comment-item{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.comment-head{display:flex;align-items:center;gap:8px}
.comment-author{font-size:13px;font-weight:600;color:#fff}
.comment-time{font-size:11px;color:rgba(255,255,255,.45)}
.comment-del{margin-left:auto;color:rgba(255,255,255,.4);font-size:14px}
.comment-text{font-size:14px;color:rgba(255,255,255,.9);margin-top:2px;word-break:break-word}
.comment-empty{padding:20px 0;text-align:center;color:rgba(255,255,255,.45);font-size:13px}

/* ============================ ЛЕНТА (соц-лента) ============================ */
.feed-wrap{padding:0}
.feed-inner{max-width:680px;margin:0 auto;padding:10px 12px 28px}
.feed-tabs{position:sticky;top:0;z-index:2;display:flex;gap:8px;padding:6px 2px 10px;background:var(--bg);margin:0 -2px}
.feed-tabs button{flex:1;padding:9px 6px;border:none;border-radius:11px;background:var(--input);color:var(--dim);font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.feed-tabs button.on{background:var(--accent);color:var(--on-accent)}
.feed-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:var(--dim)}
.feed-empty-ic{font-size:46px;width:46px;height:46px;color:var(--accent);opacity:.7;margin-bottom:10px}
.feed-empty h3{margin:0 0 6px;color:var(--text);font-size:17px}
.feed-empty p{margin:0;font-size:14px;max-width:260px}
.post{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:13px 14px;margin-bottom:12px}
.post-head{display:flex;align-items:center;gap:10px}
.post-who{flex:1;min-width:0}
.post-name{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-meta{font-size:12.5px;color:var(--dim);margin-top:1px}
.post-del{background:none;border:none;color:var(--dim);cursor:pointer;padding:6px;border-radius:8px;display:flex;font-size:17px}
.post-del:hover{color:#e5484d;background:var(--input)}
.post-text{margin:10px 0 0;font-size:15px;line-height:1.45;color:var(--text);word-break:break-word;white-space:pre-wrap}
.post-image{margin-top:11px;border-radius:13px;overflow:hidden;background:var(--input)}
.post-image img{display:block;width:100%;max-height:520px;object-fit:cover;cursor:zoom-in}
.post-actions{display:flex;gap:8px;margin-top:11px}
.post-act{display:inline-flex;align-items:center;gap:6px;background:var(--input);border:none;border-radius:20px;padding:7px 14px;color:var(--dim);font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.post-act .pa-ic{font-size:16px;line-height:1}
.post-act:hover{background:var(--border)}
.post-act.liked{color:#e5484d}
.post-act.liked .pa-ic{color:#e5484d}
/* новый пост */
.np-sheet{max-height:88vh;display:flex;flex-direction:column}
.np-body{padding:6px 16px 4px;flex:1;min-height:0;overflow:auto}
.np-text{width:100%;min-height:120px;resize:none;border:none;background:transparent;color:var(--text);font-size:16px;line-height:1.45;outline:none;font-family:inherit}
.np-preview{position:relative;margin-top:10px;border-radius:12px;overflow:hidden}
.np-preview img{display:block;width:100%;max-height:300px;object-fit:cover}
.np-rm{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:#fff;font-size:15px;cursor:pointer}
.np-foot{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--border)}
.np-attach{display:inline-flex;align-items:center;gap:6px;background:var(--input);border:none;border-radius:11px;padding:10px 14px;color:var(--text);font-size:14px;font-weight:600;cursor:pointer}
.np-attach svg{font-size:18px}
.np-pub{flex:1;margin:0}
/* комментарии */
.cmt-sheet{max-height:82vh;display:flex;flex-direction:column}
.cmt-list{flex:1;min-height:120px;overflow:auto;padding:6px 16px}
.cmt{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid var(--border)}
.cmt:last-child{border-bottom:none}
.cmt-body{flex:1;min-width:0}
.cmt-name{font-size:13.5px;font-weight:600;color:var(--text)}
.cmt-ago{font-size:11.5px;color:var(--dim);font-weight:400;margin-left:5px}
.cmt-text{font-size:14px;color:var(--text);margin-top:2px;word-break:break-word;white-space:pre-wrap}
.cmt-empty{padding:26px 0;text-align:center;color:var(--dim);font-size:14px}
.cmt-input{display:flex;align-items:center;gap:9px;padding:11px 16px;border-top:1px solid var(--border)}
.cmt-input input{flex:1;background:var(--input);border:1px solid var(--border);border-radius:20px;padding:11px 15px;color:var(--text);font-size:15px;outline:none}
.cmt-input input:focus{border-color:var(--accent)}
.cmt-send{width:42px;height:42px;flex:0 0 auto;border:none;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cmt-send svg{font-size:20px}
.gallery-comment-input-row{display:flex;gap:8px;padding:10px 16px;border-top:1px solid rgba(255,255,255,.08)}
.gallery-comment-input{flex:1;background:rgba(255,255,255,.08);border:none;outline:none;border-radius:18px;padding:10px 14px;color:#fff;font-size:14px}
.gallery-comment-send{width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}

/* ===== Истории: лента ===== */
.stories-bar{display:flex;gap:14px;padding:12px 14px;overflow-x:auto;background:var(--header);border-bottom:1px solid var(--border)}
.stories-bar::-webkit-scrollbar{display:none}
.story-item{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto;width:64px;cursor:pointer}
.story-ring{position:relative;width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;box-sizing:border-box;padding:3px}
.story-ring-on{background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:var(--glow)}
.story-ring-seen{background:var(--border)}
.story-ring-off{border:2px dashed var(--border)}
.story-ring .av{box-sizing:border-box;border:2px solid var(--header)}
.story-add-badge{position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;
  font-size:13px;border:2px solid var(--header);box-shadow:var(--glow)}
.story-label{font-size:11px;color:var(--text);max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}

/* ===== Истории: просмотрщик ===== */
.story-overlay{position:absolute;inset:0;background:#000;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center}
.story-overlay::before{content:"";position:absolute;top:0;left:0;right:0;height:90px;
  background:linear-gradient(rgba(0,0,0,.55),transparent);z-index:1;pointer-events:none}
.story-progress-row{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:3}
.story-progress-track{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
.story-progress-fill{height:100%;width:0;background:#fff;border-radius:2px}
.story-fill-full{width:100%}
.story-fill-active{animation:storyfill linear forwards}
@keyframes storyfill{from{width:0}to{width:100%}}
.story-header{position:absolute;top:24px;left:14px;right:14px;display:flex;align-items:center;gap:10px;z-index:3}
.story-header-meta{flex:1;min-width:0}
.story-header-name{color:#fff;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.story-header-time{color:rgba(255,255,255,.7);font-size:12px;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.story-close{color:#fff}
.story-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:auto}
.story-tap-zone{position:absolute;top:0;bottom:0;width:35%;z-index:2}
.story-tap-left{left:0}
.story-tap-right{right:0}
.story-overlay .gallery-actions{z-index:3}
.story-footer{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:10px;z-index:3;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.6))}
.story-viewers-bar{flex:1;display:flex;align-items:center;gap:8px;color:#fff;font-size:14px;font-weight:600;cursor:pointer}
.story-viewers-count{font-size:14px;font-weight:700}
.story-reactions-preview{font-size:16px;margin-left:4px}
.story-react-bar{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-around;gap:8px;z-index:3;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.6))}
.story-react-btn{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  font-size:20px;display:flex;align-items:center;justify-content:center;transition:transform .15s ease,background .15s ease}
.story-react-btn.on{background:var(--accent);box-shadow:var(--glow);transform:scale(1.12)}
.story-viewer-reaction{margin-left:auto;font-size:18px}
.story-viewers-overlay{z-index:70}

/* тап по сообщению — лёгкое выделение пузыря с анимацией (как в Telegram) */
.bubble{transition:transform .18s ease, box-shadow .18s ease}
@keyframes bActivePop{0%{transform:scale(1)}55%{transform:scale(1.06)}100%{transform:scale(1.03)}}
.bubble.b-active{transform:scale(1.03);box-shadow:0 6px 20px rgba(0,0,0,.22);z-index:3;animation:bActivePop .2s ease-out}
/* выделенное сообщение в режиме выбора (зажать) */
.bubble.b-sel{outline:2.5px solid var(--accent,#3b82f6);outline-offset:2px}

/* ===== AI-модели ===== */
.ai-screen{background:var(--bg)}
/* список моделей как список чатов */
.ai-listwrap{flex:1;padding:8px 10px 16px}
.ai-section-h{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);padding:14px 6px 8px}
.ai-list{display:flex;flex-direction:column;gap:8px}
.ai-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 12px;border-radius:15px;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .12s ease,background .12s ease}
.ai-row:active{transform:scale(.985);background:var(--input)}
.ai-av{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:700;box-shadow:var(--glow)}
.ai-av-lg{width:72px;height:72px;border-radius:22px;font-size:32px;margin-bottom:6px}
.ai-row-main{flex:1;min-width:0}
.ai-row-top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.ai-row-name{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-badge{flex:0 0 auto;font-size:10.5px;font-weight:700;color:#10b981;background:rgba(16,185,129,.13);padding:2px 7px;border-radius:7px;letter-spacing:.02em}
.ai-row-desc{font-size:13px;color:var(--dim);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ai-count{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ai-row-chev{flex:0 0 auto;color:var(--dim);font-size:22px;line-height:1}
/* шапка чата с моделью */
.ai-chat-hd{gap:10px}
.ai-chat-hd .ai-av{width:38px;height:38px;border-radius:12px;font-size:17px}
.ai-chat-hd-meta{flex:1;min-width:0}
.ai-chat-hd-name{font-size:15.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.ai-chat-hd-sub{font-size:12px;color:#10b981;font-weight:600}
.ai-msgs{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:10px}
.ai-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--dim);gap:6px;padding:30px}
.ai-empty-ic{font-size:34px;color:var(--accent);opacity:.85;margin-bottom:6px}
.ai-empty h3{margin:0;color:var(--text);font-size:16px}
.ai-empty p{margin:0;font-size:13.5px;max-width:260px}
.ai-msg{display:flex;flex-direction:column;max-width:86%;gap:3px}
.ai-msg.user{align-self:flex-end;align-items:flex-end}
.ai-msg.assistant{align-self:flex-start;align-items:flex-start}
.ai-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim);padding:0 4px}
.ai-copy{background:none;border:none;cursor:pointer;color:var(--dim);padding:2px;display:flex;align-items:center;font-size:13px;line-height:1;border-radius:5px}
.ai-copy:hover{color:var(--text);background:rgba(127,127,127,.12)}
.ai-bubble{padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.ai-msg.user .ai-bubble{background:var(--out);color:var(--out-text);border-radius:16px 16px 4px 16px}
.ai-msg.assistant .ai-bubble{background:var(--in);color:var(--in-text);border:1px solid var(--border);border-radius:16px 16px 16px 4px}
.ai-bubble code{background:rgba(127,127,127,.18);padding:1px 5px;border-radius:5px;font-size:13px;font-family:ui-monospace,Consolas,monospace}
.ai-code{background:rgba(127,127,127,.12);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:6px 0;overflow-x:auto;font-size:12.5px;font-family:ui-monospace,Consolas,monospace;white-space:pre}
.ai-typing{display:flex;align-items:center;gap:4px;padding:13px 14px}
.ai-typing span{width:6px;height:6px;border-radius:50%;background:var(--dim);animation:aiTyping 1.1s infinite ease-in-out}
.ai-typing span:nth-child(2){animation-delay:.15s}
.ai-typing span:nth-child(3){animation-delay:.3s}
@keyframes aiTyping{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.ai-composer textarea{max-height:100px}
.ai-send{font-size:17px}
/* в ИИ-чате кнопка отправки видна всегда (в отличие от чата с юзерами, где она по has-text) */
.composer.ai-composer .ai-send{display:flex}
.ai-attach{flex:0 0 auto;color:var(--dim);font-size:20px;display:flex;align-items:center;justify-content:center}
.ai-attach:disabled{opacity:.4}
/* прикреплённое изображение в пузыре */
.ai-img{display:block;max-width:240px;max-height:240px;width:auto;border-radius:12px;margin-bottom:6px;object-fit:cover}
.ai-msg.user .ai-bubble:has(.ai-img){padding:6px}
/* превью прикреплённой картинки над композером */
.ai-pending{flex:0 0 auto;position:relative;display:inline-flex;margin:0 14px 8px;align-self:flex-start}
.ai-pending img{max-width:96px;max-height:96px;border-radius:12px;object-fit:cover;border:1px solid var(--border)}
.ai-pending-x{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:var(--panel);border:1px solid var(--border);color:var(--text);font-size:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.2)}

/* ===================== ДЕСКТОП-ЛЕЙАУТ (широкий браузер) ===================== */
.desktop{width:100%;height:100%;display:flex;background:var(--bg);position:relative;overflow:hidden}
.desktop>.conn-banner{position:absolute;top:0;left:0;right:0;width:100%;z-index:60}
/* левый нав-сайдбар */
.d-nav{flex:0 0 232px;display:flex;flex-direction:column;padding:16px 14px;background:var(--header);border-right:1px solid var(--border);gap:6px}
.d-logo{display:flex;align-items:center;gap:9px;padding:6px 8px 16px;font-size:20px;font-weight:800;color:var(--accent)}
.d-logo-ic{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-radius:9px;font-size:17px}
.d-navlist{display:flex;flex-direction:column;gap:3px}
.d-navitem{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:12px;color:var(--dim);font-size:14.5px;font-weight:600;text-align:left;transition:.13s}
.d-navitem:hover{background:var(--input);color:var(--text)}
.d-navitem.on{background:var(--chip-on-bg);color:var(--accent)}
.d-navic{display:inline-flex;align-items:center;justify-content:center;font-size:19px;width:22px;flex:0 0 auto}
.d-nav-bottom{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:12px}
.d-newchat{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:14.5px;font-weight:700;box-shadow:var(--glow)}
.d-newchat .d-navic{font-size:18px;width:auto}
.d-tomobile{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px;border-radius:11px;background:var(--input);color:var(--dim);font-size:13px;font-weight:600;transition:.13s}
.d-tomobile:hover{color:var(--accent)}
.d-usercard{display:flex;align-items:center;gap:10px;padding:8px;border-radius:13px;transition:.13s;text-align:left}
.d-usercard:hover{background:var(--input)}
.d-usercard-meta{min-width:0;flex:1}
.d-usercard-name{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-usercard-nick{font-size:12.5px;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* главная область */
.d-main{flex:1;min-width:0;display:flex;height:100%;overflow:hidden}
/* заголовок колонки */
.d-col-hd{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:16px 16px 12px;min-height:60px}
.d-col-hd h2{flex:1;margin:0;font-size:21px;font-weight:800;color:var(--text)}
.d-col-actions{display:flex;align-items:center;gap:4px}
/* колонка списка чатов */
.d-list{flex:0 0 340px;display:flex;flex-direction:column;border-right:1px solid var(--border);min-height:0;background:var(--bg)}
.d-list .list{flex:1;min-height:0}
.d-list .chatsearch{padding-top:0}
/* центральная колонка — открытый чат */
.d-center{flex:1;min-width:0;display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--chat)}
.d-center>.hdr{cursor:default}
.d-center .chatwrap{flex:1;min-height:0}
/* пустое состояние центра */
.d-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--dim);gap:8px;padding:40px}
.d-empty-ic{font-size:46px;color:var(--accent);opacity:.55}
.d-empty-t{font-size:18px;font-weight:700;color:var(--text)}
.d-empty-s{font-size:14px;max-width:280px}
/* правая колонка — профиль */
.d-profile{flex:0 0 320px;border-left:1px solid var(--border);overflow-y:auto;background:var(--header)}
.d-prof{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:22px}
.d-prof-cover{width:100%;height:120px;background:linear-gradient(135deg,var(--accent),var(--accent2));flex:0 0 auto}
.d-prof-avwrap{position:relative;margin-top:-52px}
.d-prof-avwrap .av{border:4px solid var(--header);box-shadow:var(--shadow)}
.d-prof-name{margin-top:12px;font-size:20px;font-weight:800;color:var(--text)}
.d-prof-nick{margin-top:3px;font-size:13.5px;color:var(--accent);font-weight:600}
.d-prof-desc{margin-top:8px;font-size:13.5px;color:var(--dim);padding:0 22px;line-height:1.4}
.d-prof-btn{margin:16px 22px 4px;width:calc(100% - 44px);padding:11px;border-radius:12px;background:var(--chip-on-bg);color:var(--accent);font-size:14px;font-weight:700;transition:.13s}
.d-prof-btn:hover{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.d-prof-sec{align-self:flex-start;padding:18px 22px 8px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.d-priv{width:100%;padding:0 22px;display:flex;flex-direction:column;gap:2px}
.d-priv-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.d-priv-row:last-child{border-bottom:none}
.d-priv-lbl{font-size:13.5px;color:var(--text)}
.d-priv-sel{border:none;background:transparent;color:var(--accent);font-size:13px;font-weight:600;text-align:right;outline:none;cursor:pointer}
/* одиночная колонка (Лента/Сервисы/Профиль) */
.d-col{flex:0 1 720px;width:100%;max-width:720px;margin:0 auto;display:flex;flex-direction:column;height:100%;min-height:0;border-left:1px solid var(--border);border-right:1px solid var(--border)}
.d-col .list,.d-col .feed-wrap{flex:1;min-height:0}
.d-col-feed{flex-basis:640px;max-width:640px}
/* сервис-приложение в десктопе — по центру, ограниченная ширина */
.d-app{flex:1;min-width:0;display:flex;flex-direction:column;width:100%;max-width:1040px;margin:0 auto;height:100%;border-left:1px solid var(--border);border-right:1px solid var(--border)}
.d-app .full{flex:1;min-height:0;height:auto}
/* адаптив десктопа */
@media (max-width:1180px){.d-profile{display:none}}
@media (max-width:920px){
  .d-nav{flex-basis:70px;padding:14px 10px}
  .d-navlbl,.d-logo-tx,.d-tomobile span,.d-usercard-meta{display:none}
  .d-newchat{padding:11px 0}.d-newchat span:not(.d-navic){display:none}
  .d-navitem{justify-content:center;padding:11px 0}
  .d-logo{justify-content:center;padding:6px 0 16px}
  .d-usercard{justify-content:center}
  .d-list{flex-basis:300px}
}
@media (max-width:680px){.d-list{flex-basis:240px}}

/* ===================== ЗВОНКИ (WebRTC overlay) ===================== */
#callOverlay.call-on{position:fixed;inset:0;z-index:99990;display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;background:radial-gradient(circle at 50% 30%,#1b2740,#0a0e16 75%);color:#fff;
  padding:calc(46px + env(safe-area-inset-top)) 20px calc(10px + env(safe-area-inset-bottom));overflow:hidden}
.call-peerbox{margin-top:6vh;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;z-index:2}
.call-av .av{width:110px;height:110px;border-radius:50%;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.call-av.ringing{border-radius:50%;animation:callPulse 1.6s ease-out infinite}
@keyframes callPulse{0%{box-shadow:0 0 0 0 rgba(91,147,255,.55)}70%{box-shadow:0 0 0 26px rgba(91,147,255,0)}100%{box-shadow:0 0 0 0 rgba(91,147,255,0)}}
.call-name{font-size:25px;font-weight:700;letter-spacing:.2px}
.call-sub{font-size:15px;color:rgba(255,255,255,.7)}
.call-row{display:flex;gap:70px;z-index:2;margin-bottom:4vh}
.call-fab{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:27px;color:#fff;box-shadow:0 6px 24px rgba(0,0,0,.4);transition:transform .12s ease}
.call-fab:active{transform:scale(.92)}
.call-answer{background:#21b85a}
.call-decline{background:#ef4444}
.call-incoming .call-decline{animation:none}
/* активный звонок */
.call-remote-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0a0e16;display:none;z-index:1}
.call-remote-vid.on{display:block}
.call-remote-fallback{margin-top:8vh;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;z-index:2}
.call-remote-fallback.hide{display:none}
.call-local-vid{position:absolute;top:calc(20px + env(safe-area-inset-top));right:16px;width:104px;height:150px;
  object-fit:cover;border-radius:14px;border:2px solid rgba(255,255,255,.25);background:#111;z-index:3;box-shadow:0 4px 18px rgba(0,0,0,.45)}
.call-local-vid.mirror{transform:scaleX(-1)}
.call-local-vid.hide{display:none}
.call-topbar{position:absolute;top:calc(18px + env(safe-area-inset-top));left:0;right:0;display:flex;flex-direction:column;
  align-items:center;gap:2px;z-index:3;pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.call-top-name{font-size:17px;font-weight:600}
.call-top-timer{font-size:14px;color:rgba(255,255,255,.85)}
.call-controls{display:flex;align-items:center;gap:7px;z-index:4;background:rgba(10,14,22,.35);backdrop-filter:blur(8px);
  padding:9px 11px;border-radius:40px;margin-bottom:0;margin-top:auto;flex-wrap:wrap;justify-content:center;max-width:96vw}
.call-ctl{width:47px;height:47px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:21px;
  background:rgba(255,255,255,.16);color:#fff;transition:transform .12s ease,background .15s ease}
.call-ctl:active{transform:scale(.92)}
.call-ctl.active{background:#fff;color:#16213c}
.call-controls .call-fab{width:50px;height:50px;font-size:21px}
#cbRemoteAud{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.call-filters{position:absolute;left:0;right:0;bottom:calc(78px + env(safe-area-inset-bottom));z-index:5;
  background:rgba(8,10,16,.82);backdrop-filter:blur(10px);padding:10px 0 12px;border-top:1px solid rgba(255,255,255,.1)}
.call-filters-h{font-size:13px;font-weight:600;color:rgba(255,255,255,.75);padding:0 16px 8px}
.call-filters-row{display:flex;gap:10px;overflow-x:auto;padding:0 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.call-filters-row::-webkit-scrollbar{display:none}
.call-filter{flex:0 0 auto;width:72px;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;opacity:.75}
.call-filter.on{opacity:1}
.call-filter .cf-preview{width:56px;height:56px;border-radius:14px;border:2px solid rgba(255,255,255,.25);
  background:linear-gradient(135deg,#5b93ff,#21b85a 55%,#f59e0b)}
.call-filter.on .cf-preview{border-color:#fff;box-shadow:0 0 0 2px rgba(91,147,255,.55)}
.call-filter .cf-lbl{font-size:11px;font-weight:600;max-width:72px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-filter-badge{position:absolute;bottom:calc(70px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  z-index:4;background:rgba(0,0,0,.45);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;pointer-events:none}
.call-speaker-off #cbSpeaker{opacity:.95}
/* экран ошибки доступа к камере/микрофону */
#callOverlay.call-err{align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#1b2740,#0a0e16 75%)}
.call-errbox{max-width:340px;margin:0 20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:26px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.call-err-ic{width:56px;height:56px;border-radius:50%;background:rgba(245,158,11,.18);color:#f59e0b;font-size:30px;display:flex;align-items:center;justify-content:center}
.call-err-msg{font-size:14.5px;line-height:1.5;color:#fff}
.call-err-btn{margin-top:4px;padding:11px 26px;border-radius:12px;background:var(--accent);color:#fff;font-size:15px;font-weight:700}
/* статус разрешений в настройках */
.opt .optval{margin-left:auto;font-size:13px;color:var(--dim);white-space:nowrap}
.optval.perm-ok{color:#10b981}
.optval.perm-bad{color:#ef4444}
.callperm-actions{padding:2px 18px 6px}
.callperm-actions .linkbtn{margin:0}

/* ===================== ЭМОДЗИ-ПИКЕР ===================== */
.composer-emoji{font-size:20px;flex:0 0 auto}
.composer-emoji.on{opacity:.6}
.emoji-panel{flex:0 0 auto;display:flex;flex-direction:column;background:var(--header);border-top:1px solid var(--border);height:264px}
.emoji-grid{flex:1;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px 8px 4px;align-content:start;overflow-y:auto}
.emoji-cell{font-size:23px;line-height:1;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;transition:background .12s}
.emoji-cell:active,.emoji-cell:hover{background:var(--input)}
.emoji-tabs{flex:0 0 auto;display:flex;gap:2px;padding:4px 8px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--border)}
.emoji-tab{flex:1;font-size:19px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;opacity:.5;transition:.12s}
.emoji-tab.on{opacity:1;background:var(--chip-on-bg)}
/* пикер реакции (в шите) */
.emoji-sheet .emoji-panel{height:300px;border-radius:0 0 16px 16px;border-top:none}
/* оптимистичная отправка: локальное сообщение (🕓) и неотправленное (⚠) */
.bubble.b-pending{opacity:.78}
.bubble.b-failed{box-shadow:0 0 0 1.5px rgba(231,59,78,.55);cursor:pointer}
/* кнопка «↓ Новые сообщения» — когда лента пролистана вверх и пришло новое */
#newMsgChip{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));z-index:6000;display:none;
  background:var(--accent);color:#fff;font-size:13.5px;font-weight:700;padding:9px 18px;border-radius:999px;border:none;cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.35);animation:newmsg-pop .18s ease}
#newMsgChip.on{display:block}
@keyframes newmsg-pop{from{transform:translateX(-50%) translateY(8px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
/* ===================== ОТПРАВКА МЕДИА (телеграм-стиль) ===================== */
.ms-sheet{max-height:86vh;display:flex;flex-direction:column}
.ms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px 16px;overflow-y:auto;min-height:0}
.ms-grid.ms-single{grid-template-columns:1fr;justify-items:center}
.ms-item{position:relative;border-radius:12px;overflow:hidden;background:var(--input);aspect-ratio:1;width:100%}
.ms-grid.ms-single .ms-item{aspect-ratio:auto;max-height:46vh;width:auto;max-width:100%}
.ms-item img,.ms-item video{width:100%;height:100%;object-fit:cover;display:block}
.ms-grid.ms-single .ms-item img,.ms-grid.ms-single .ms-item video{object-fit:contain;max-height:46vh}
.ms-del{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center}
.ms-cropbtn{margin:8px 16px 0;padding:9px;border-radius:10px;background:var(--input);color:var(--text);font-size:13.5px;font-weight:600}
.ms-compress{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 16px 0;font-size:13.5px;color:var(--text);cursor:pointer}
.ms-compress input{width:17px;height:17px;accent-color:var(--accent)}
.ms-compress small{flex-basis:100%;color:var(--dim);font-size:11.5px;padding-left:25px}
.ms-caption{padding:10px 16px 0}
.ms-caption input{width:100%;padding:10px 13px;border-radius:11px;background:var(--input);color:var(--text);border:none;font-size:14px;outline:none}
.ms-actions{display:flex;gap:10px;padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
.ms-cancel{flex:1;padding:11px;border-radius:11px;background:var(--input);color:var(--text);font-size:14.5px;font-weight:600}
.ms-send{flex:2;padding:11px;border-radius:11px;background:var(--accent);color:#fff;font-size:14.5px;font-weight:700}
.ms-send:active{opacity:.85}
/* ===================== СТИКЕРЫ ===================== */
.picker-modes{display:flex;gap:6px;padding:8px 10px 4px;flex:0 0 auto}
.picker-mode{flex:1;padding:7px 0;border-radius:10px;background:var(--input);color:var(--dim);font-size:13px;font-weight:600;transition:.12s}
.picker-mode.on{background:var(--accent);color:#fff}
/* окно стикеров — крупнее (примерно вдвое), чтобы удобнее выбирать */
.emoji-panel-stk{height:min(74vh,540px)}
.stk-pane{flex:1;min-height:0;display:flex;flex-direction:column}
.stk-searchrow{padding:4px 10px;flex:0 0 auto}
.stk-searchrow input{width:100%;padding:9px 12px;border-radius:10px;background:var(--input);color:var(--text);border:none;font-size:14px;outline:none}
.stk-sec{font-size:12px;font-weight:700;color:var(--dim);padding:4px 12px 2px;flex:0 0 auto}
.stk-row{display:flex;gap:4px;overflow-x:auto;padding:2px 10px;flex:0 0 auto;scrollbar-width:none}
.stk-row::-webkit-scrollbar{display:none}
.stk-row .stk-cell{flex:0 0 auto;width:58px;height:58px}
.stk-packs{flex:1;min-height:0;overflow-y:auto;padding:4px 8px 10px;display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
.stk-packs.stk-packs-list{grid-template-columns:1fr}
.stk-pack{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:var(--input);text-align:left;min-width:0;cursor:pointer;position:relative}
.stk-pack:active{opacity:.75}
.stk-pack img{width:42px;height:42px;object-fit:contain;flex:0 0 auto}
.stk-pack-meta{min-width:0;flex:1}
.stk-pack-name{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stk-pack-sub{font-size:11px;color:var(--dim)}
.stk-packhead{display:flex;align-items:center;gap:8px;padding:6px 10px 2px;flex:0 0 auto}
.stk-back{width:32px;height:32px;border-radius:9px;background:var(--input);color:var(--text);font-size:20px;line-height:1;flex:0 0 auto}
.stk-packname{font-weight:700;font-size:14px;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stk-tag{font-size:11px;color:var(--dim);flex:0 0 auto}
.stk-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px 8px 10px;align-content:start}
.stk-cell{position:relative;aspect-ratio:1;border-radius:10px;background:transparent;padding:4px}
.stk-cell:active,.stk-cell:hover{background:var(--input)}
.stk-cell img{width:100%;height:100%;object-fit:contain}
.stk-anim-badge{position:absolute;right:3px;bottom:3px;font-size:8px;background:rgba(0,0,0,.45);color:#fff;border-radius:6px;padding:1px 4px;pointer-events:none}
.stk-hint{grid-column:1/-1;padding:16px;font-size:13px;color:var(--dim);text-align:center}
/* вкладки стикеров: Часто | Мои паки | Поиск + избранные наборы */
.stk-subtabs{display:flex;gap:5px;padding:2px 10px 5px;flex:0 0 auto}
.stk-subtab{flex:1;padding:7px 2px;border-radius:10px;background:var(--input);color:var(--dim);font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:4px;transition:.12s;min-width:0;white-space:nowrap}
.stk-subtab.on{background:var(--accent);color:#fff}
.stk-subtab-ic{display:inline-flex;flex:0 0 auto}.stk-subtab-ic svg{width:14px;height:14px}
.stk-packfav{margin-left:auto;flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--dim)}
.stk-packfav.on{color:#f5b301}
.stk-packfav svg{width:20px;height:20px}
.stk-packfav:active{background:var(--input)}
.stk-pack-remove{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--dim);background:none;border:none}
.stk-pack-remove svg{width:15px;height:15px}
.stk-pack-remove:active{background:color-mix(in srgb,var(--text) 12%,transparent)}
.stk-pack-favmark{flex:0 0 auto;color:#f5b301;display:inline-flex;padding-right:2px}
.stk-pack-favmark svg{width:15px;height:15px}
.stk-fav-empty{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;color:var(--dim);font-size:13.5px}
.stk-fav-empty-ic{color:#f5b301}.stk-fav-empty-ic svg{width:42px;height:42px}
.stk-fav-empty-sub{font-size:12px;opacity:.82;max-width:230px}
/* стикер в сообщении */
.bubble.bubble-sticker{background:none!important;border:none;box-shadow:none;padding:2px 2px 4px}
.sticker-box{width:160px;height:160px;position:relative}
.sticker-box svg{width:100%!important;height:100%!important}
.sticker-img{width:100%;height:100%;object-fit:contain;display:block}
.bubble.bubble-sticker .b-time{background:rgba(0,0,0,.28);color:#fff;border-radius:8px;padding:1px 6px;position:absolute;right:4px;bottom:2px}
/* закреплённый чат */
.chat-pin-ic{display:inline-flex;align-items:center;color:var(--dim);font-size:12px}
.emoji-sheet .emoji-grid{grid-template-columns:repeat(7,1fr)}
.ma-emoji-more{opacity:.7;font-size:15px}

/* ===================== «РАЗБУДИТЬ» (встряска) ===================== */
@keyframes nudge-shake{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-8px,0) rotate(-1deg)}
  20%{transform:translate(7px,0) rotate(1deg)}
  30%{transform:translate(-6px,0) rotate(-1deg)}
  40%{transform:translate(6px,0) rotate(1deg)}
  50%{transform:translate(-5px,0)}
  60%{transform:translate(5px,0)}
  70%{transform:translate(-3px,0)}
  80%{transform:translate(3px,0)}
  90%{transform:translate(-1px,0)}
}
.nudge-shake{animation:nudge-shake .6s ease-in-out}

/* ===================== AWAY-СТАТУС (AIM-style «меня нет») ===================== */
.away-editor{padding:4px 18px 12px}
.away-textarea{width:100%;resize:vertical;min-height:64px;background:var(--input);border:1px solid var(--border);border-radius:12px;padding:11px 14px;font-size:15px;color:var(--text);outline:none;line-height:1.4}
.away-editor-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.away-editor-row .optsel{flex:1 1 auto}
.away-img-preview{position:relative;display:inline-block;margin-top:10px}
.away-img-preview img{max-width:160px;max-height:160px;border-radius:12px;display:block}
.away-img-preview .iconbtn{position:absolute;top:-8px;right:-8px;background:var(--panel);border-radius:50%;box-shadow:var(--shadow);width:26px;height:26px;min-height:26px}
.away-banner{margin:10px 12px 0;padding:10px 14px;background:var(--input);border:1px solid var(--border);border-radius:14px}
.away-banner-head{font-size:13px;font-weight:600;color:var(--dim);margin-bottom:4px}
.away-banner-body{display:flex;align-items:center;gap:10px;color:var(--text)}
.away-banner-img{max-width:64px;max-height:64px;border-radius:10px;flex:0 0 auto}
.away-sm{font-size:13px}
.away-md{font-size:15px}
.away-lg{font-size:19px}
.away-xl{font-size:24px;font-weight:600}

/* ===== Конференции (mesh) ===== */
#confOverlay.conf-on{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;background:#0a0e16;color:#fff;
  padding:calc(8px + env(safe-area-inset-top)) 8px calc(20px + env(safe-area-inset-bottom))}
.conf-topbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:15px;font-weight:600}
.conf-count{font-size:13px;color:rgba(255,255,255,.65);font-weight:500}
.conf-grid{flex:1;min-height:0;display:grid;gap:8px;padding:4px;grid-template-columns:1fr;align-content:center}
.conf-on.grid-2 .conf-grid,.conf-on.grid-3 .conf-grid,.conf-on.grid-4 .conf-grid,.conf-on.grid-5 .conf-grid,.conf-on.grid-6 .conf-grid{grid-template-columns:1fr 1fr}
.conf-tile{position:relative;background:#12161f;border-radius:14px;overflow:hidden;min-height:0;aspect-ratio:3/4}
.conf-on.grid-1 .conf-tile{aspect-ratio:auto}
.conf-vid{width:100%;height:100%;object-fit:cover;background:#12161f}
.conf-vid.hide{visibility:hidden}
#confLocal{transform:scaleX(-1)}
.conf-name{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.5);padding:3px 9px;border-radius:8px;font-size:12.5px;font-weight:600;max-width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conf-connecting{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:rgba(255,255,255,.6)}
#confOverlay .call-controls{align-self:center;margin-top:8px}

/* ===== ДИЗАЙН-ТЕМЫ (8): cyberpunk hell heaven neon-jazz-dark icq win98 warcraft3 sims ===== */
/* ===== Cyberpunk — ForYou Theme ===== */
[data-theme="cyberpunk"]{
  --bg:#0d0208;
  --panel:#120a10;
  --input:#1a0f18;
  --text:#fcee0a;
  --dim:#b8a800;
  --accent:#fcee0a;
  --accent2:#ff2a6d;
  --on-accent:#0d0208;
  --out:#fcee0a;
  --out-text:#0d0208;
  --in:#1a0f18;
  --in-text:#e8e0c0;
  --border:#3a2040;
  --header:#0a0106;
  --shadow:0 0 20px rgba(252,238,10,.15);
  --glow:0 0 12px rgba(252,238,10,.7);
  --chat-img:url('/chat-bg-cyberpunk.png');
  --chip-on-bg:rgba(252,238,10,.12);
  --empty-img:url('/empty-cyberpunk.svg');
  --font:'Orbitron','Courier New',monospace;
}

[data-theme="cyberpunk"] .frame{font-family:var(--font)}
[data-theme="cyberpunk"] .accentbtn,
[data-theme="cyberpunk"] .sendbtn,
[data-theme="cyberpunk"] .empty-cta{
  background:#fcee0a;
  color:#0d0208;
  border:2px solid #fcee0a;
  border-radius:0;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  box-shadow:4px 4px 0 #ff2a6d;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:2px;
}
[data-theme="cyberpunk"] .b-out{
  background:#fcee0a;
  color:#0d0208;
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  font-weight:600;
}
[data-theme="cyberpunk"] .b-in{
  background:#1a0f18;
  color:#e8e0c0;
  border:1px solid #3a2040;
  border-left:3px solid #ff2a6d;
  border-radius:0;
}
[data-theme="cyberpunk"] .nav button.on{color:#fcee0a;text-shadow:0 0 8px #fcee0a}
[data-theme="cyberpunk"] .hdr{border-bottom:2px solid #fcee0a}
[data-theme="cyberpunk"] .composer textarea{
  border-radius:0;
  border:1px solid #3a2040;
  border-bottom:2px solid #fcee0a;
}
[data-theme="cyberpunk"] .sendbtn{
  clip-path:polygon(20% 0,100% 0,100% 80%,80% 100%,0 100%,0 20%);
  border-radius:0;
}
[data-theme="cyberpunk"] .bubble{position:relative}
[data-theme="cyberpunk"] .b-out::after{
  content:"";position:absolute;top:0;right:0;width:4px;height:100%;background:#ff2a6d;
}
[data-theme="cyberpunk"] .unread-badge{
  background:#ff2a6d;color:#fff;
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,4px 100%,0 calc(100% - 4px));
}
[data-theme="cyberpunk"] .logo span{color:#fcee0a;text-shadow:0 0 20px #fcee0a,2px 2px 0 #ff2a6d}

/* Фон чата — сгенерированная картинка */
[data-theme="cyberpunk"] .chatwrap,
[data-theme="cyberpunk"] .chatwrap{
  background-image:url('/chat-bg-cyberpunk.png');
}
[data-theme="cyberpunk"] .tab-contacts{
  background-image:url('/contacts-bg-cyberpunk.png');
}
[data-theme="cyberpunk"] .chatwrap,[data-theme="cyberpunk"] .tab-contacts{background-size:cover;background-position:center;background-repeat:no-repeat}

/* ===== Адская тема — ForYou Theme ===== */
[data-theme="hell"]{
  --bg:#1a0505;
  --panel:#2a0a0a;
  --input:#3a1010;
  --text:#ffe4d0;
  --dim:#c4785a;
  --accent:#ff4500;
  --accent2:#ff6b00;
  --on-accent:#1a0505;
  --out:linear-gradient(180deg,#cc2200,#ff4500);
  --out-text:#fff5e6;
  --in:#2a1010;
  --in-text:#ffd4b8;
  --border:#5a1a0a;
  --header:#1f0808;
  --shadow:0 4px 20px rgba(255,69,0,.35);
  --glow:0 0 20px rgba(255,69,0,.6);
  --chat-img:url('/chat-bg-hell.png');
  --chip-on-bg:rgba(255,69,0,.2);
  --empty-img:url('/empty-hell.svg');
  --font:'Cinzel',Georgia,serif;
}

[data-theme="hell"] .frame{font-family:var(--font)}
[data-theme="hell"] .accentbtn,
[data-theme="hell"] .sendbtn,
[data-theme="hell"] .empty-cta{
  background:linear-gradient(180deg,#ff6b00,#cc2200);
  border:2px solid #ff8c00;
  border-radius:8px;
  box-shadow:0 0 24px rgba(255,69,0,.5),inset 0 1px 0 rgba(255,200,100,.3);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
[data-theme="hell"] .b-out{
  background:linear-gradient(180deg,#cc2200,#8b0000);
  border:1px solid #ff4500;
  box-shadow:0 0 10px rgba(255,69,0,.4);
}
[data-theme="hell"] .b-in{
  background:#2a1010;
  border:1px solid #5a1a0a;
  box-shadow:inset 0 0 15px rgba(255,69,0,.08);
}
[data-theme="hell"] .bubble{border-radius:12px}
[data-theme="hell"] .nav button.on{color:#ff4500;text-shadow:0 0 10px #ff4500}
[data-theme="hell"] .hdr{border-bottom-color:#5a1a0a;box-shadow:0 2px 20px rgba(255,69,0,.15)}
[data-theme="hell"] .composer textarea{
  border-color:#5a1a0a;
  box-shadow:inset 0 0 8px rgba(255,69,0,.1);
}
[data-theme="hell"] .sendbtn{border-radius:50%;animation:hell-pulse 2s ease-in-out infinite}
@keyframes hell-pulse{0%,100%{box-shadow:0 0 16px rgba(255,69,0,.5)}50%{box-shadow:0 0 28px rgba(255,100,0,.8)}}
[data-theme="hell"] .unread-badge{background:#ff4500;box-shadow:0 0 8px #ff4500}
[data-theme="hell"] .react-pill{border-color:#ff4500;background:rgba(255,69,0,.15)}

[data-theme="hell"] .chatwrap,
[data-theme="hell"] .chatwrap{background-image:url('/chat-bg-hell.png')}
[data-theme="hell"] .tab-contacts{background-image:url('/contacts-bg-hell.png')}
[data-theme="hell"] .chatwrap,[data-theme="hell"] .tab-contacts{background-size:cover;background-position:center;background-repeat:no-repeat}

/* ===== Райская тема — ForYou Theme ===== */
[data-theme="heaven"]{
  --bg:#f0f4ff;
  --panel:#ffffff;
  --input:#e8eeff;
  --text:#2c3e6b;
  --dim:#7a8cb8;
  --accent:#d4af37;
  --accent2:#f0d060;
  --on-accent:#ffffff;
  --out:linear-gradient(135deg,#d4af37,#f0d060);
  --out-text:#ffffff;
  --in:#ffffff;
  --in-text:#2c3e6b;
  --border:#d0daf0;
  --header:rgba(255,255,255,.92);
  --shadow:0 4px 24px rgba(212,175,55,.12);
  --glow:0 0 20px rgba(212,175,55,.25);
  --chat-img:url('/chat-bg-heaven.png');
  --chip-on-bg:rgba(212,175,55,.15);
  --empty-img:url('/empty-heaven.svg');
  --font:'Cormorant Garamond',Georgia,serif;
}

[data-theme="heaven"] .frame{font-family:var(--font)}
[data-theme="heaven"] .accentbtn,
[data-theme="heaven"] .sendbtn,
[data-theme="heaven"] .empty-cta{
  background:linear-gradient(135deg,#d4af37,#f0d060);
  border-radius:24px;
  box-shadow:0 4px 20px rgba(212,175,55,.3);
  font-weight:700;
}
[data-theme="heaven"] .b-out{
  background:linear-gradient(135deg,#d4af37,#c9a030);
  border-radius:20px 20px 4px 20px;
  box-shadow:0 2px 12px rgba(212,175,55,.25);
}
[data-theme="heaven"] .b-in{
  background:#ffffff;
  border:1px solid #e0e8f8;
  border-radius:20px 20px 20px 4px;
  box-shadow:0 2px 8px rgba(100,130,200,.08);
}
[data-theme="heaven"] .nav button.on{color:#d4af37}
[data-theme="heaven"] .hdr{
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(212,175,55,.2);
}
[data-theme="heaven"] .composer textarea{
  border-radius:24px;
  border-color:#d0daf0;
  background:rgba(255,255,255,.8);
}
[data-theme="heaven"] .unread-badge{background:linear-gradient(135deg,#d4af37,#f0d060)}

[data-theme="heaven"] .chatwrap,
[data-theme="heaven"] .chatwrap{background-image:url('/chat-bg-heaven.png')}
[data-theme="heaven"] .tab-contacts{background-image:url('/contacts-bg-heaven.png')}
[data-theme="heaven"] .chatwrap,[data-theme="heaven"] .tab-contacts{background-size:cover;background-position:center;background-repeat:no-repeat}

/* ===== Неон Jazz (тёмная) — ForYou Theme ===== */
[data-theme="neon-jazz-dark"]{
  --bg:#0d0a14;
  --panel:#16101f;
  --input:#1e1528;
  --text:#f5e6ff;
  --dim:#9b7eb8;
  --accent:#ff2d95;
  --accent2:#00e5c8;
  --on-accent:#0d0a14;
  --out:linear-gradient(135deg,#ff2d95,#c026d3);
  --out-text:#ffffff;
  --in:#1a1225;
  --in-text:#f0e0ff;
  --border:#2d1f42;
  --header:#120d1a;
  --shadow:0 4px 24px rgba(255,45,149,.15);
  --glow:0 0 16px rgba(255,45,149,.55);
  --chat-img:url('/chat-bg-neon-jazz-dark.png');
  --chip-on-bg:rgba(255,45,149,.18);
  --empty-img:url('/empty-neon-jazz-dark.svg');
  --font:'Josefin Sans',-apple-system,sans-serif;
}

[data-theme="neon-jazz-dark"] .frame{font-family:var(--font)}
[data-theme="neon-jazz-dark"] .accentbtn,
[data-theme="neon-jazz-dark"] .sendbtn,
[data-theme="neon-jazz-dark"] .empty-cta{
  border-radius:4px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  background:linear-gradient(135deg,#ff2d95,#00e5c8);
  box-shadow:0 0 20px rgba(255,45,149,.4),0 0 40px rgba(0,229,200,.2);
}
[data-theme="neon-jazz-dark"] .b-out{
  background:linear-gradient(135deg,#ff2d95,#9b1d6a);
  border:1px solid rgba(255,45,149,.4);
  box-shadow:0 0 12px rgba(255,45,149,.3);
}
[data-theme="neon-jazz-dark"] .b-in{
  border:1px solid rgba(0,229,200,.2);
  box-shadow:inset 0 0 20px rgba(0,229,200,.05);
}
[data-theme="neon-jazz-dark"] .bubble{border-radius:4px 16px 16px 16px}
[data-theme="neon-jazz-dark"] .b-out{border-radius:16px 4px 16px 16px}
[data-theme="neon-jazz-dark"] .nav button.on .ic{
  filter:drop-shadow(0 0 8px #ff2d95);
}
[data-theme="neon-jazz-dark"] .logo span{
  background:linear-gradient(90deg,#ff2d95,#00e5c8);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
[data-theme="neon-jazz-dark"] .composer textarea{border-radius:4px}
[data-theme="neon-jazz-dark"] .sendbtn{border-radius:4px;transform:rotate(-3deg)}
[data-theme="neon-jazz-dark"] .fchip.on{
  background:linear-gradient(135deg,#ff2d95,#00e5c8);
  border-color:transparent;
  color:#0d0a14;
}
[data-theme="neon-jazz-dark"] .hdr::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,#ff2d95,#00e5c8,transparent);
}

[data-theme="neon-jazz-dark"] .chatwrap,
[data-theme="neon-jazz-dark"] .chatwrap{background-image:url('/chat-bg-neon-jazz-dark.png')}
[data-theme="neon-jazz-dark"] .tab-contacts{background-image:url('/contacts-bg-neon-jazz-dark.png')}
[data-theme="neon-jazz-dark"] .chatwrap,[data-theme="neon-jazz-dark"] .tab-contacts{background-size:cover;background-position:center;background-repeat:no-repeat}

/* ===== ICQ — ForYou Theme ===== */
[data-theme="icq"]{
  --bg:#c0c0c0;
  --panel:#dfdfdf;
  --input:#ffffff;
  --text:#000000;
  --dim:#606060;
  --accent:#008000;
  --accent2:#00aa00;
  --on-accent:#ffffff;
  --out:#008000;
  --out-text:#ffffff;
  --in:#ffffff;
  --in-text:#000000;
  --border:#808080;
  --header:#008000;
  --shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #808080;
  --glow:none;
  --chat-img:url('/chat-bg-icq.png');
  --chip-on-bg:rgba(0,128,0,.15);
  --empty-img:url('/empty-icq.svg');
  --font:Tahoma,'MS Sans Serif',sans-serif;
}

[data-theme="icq"] .frame{font-family:var(--font);border:2px solid;border-color:#fff #808080 #808080 #fff}
[data-theme="icq"] .hdr{
  background:linear-gradient(180deg,#008000,#006000);
  color:#fff;
  border-bottom:2px solid #004000;
}
[data-theme="icq"] .hdr h1,.icq .hdr .sub{color:#fff}
[data-theme="icq"] .hdr .sub{color:#c0ffc0}
[data-theme="icq"] .accentbtn,
[data-theme="icq"] .sendbtn,
[data-theme="icq"] .empty-cta{
  background:#dfdfdf;
  color:#000;
  border:2px solid;
  border-color:#fff #808080 #808080 #fff;
  border-radius:0;
  box-shadow:none;
  font-weight:400;
}
[data-theme="icq"] .accentbtn:active,
[data-theme="icq"] .sendbtn:active{
  border-color:#808080 #fff #fff #808080;
}
[data-theme="icq"] .b-out{
  background:#008000;
  color:#fff;
  border-radius:0;
  border:1px solid #004000;
}
[data-theme="icq"] .b-in{
  background:#fff;
  color:#000;
  border:1px solid #808080;
  border-radius:0;
}
[data-theme="icq"] .nav{
  background:#dfdfdf;
  border-top:2px solid #fff;
}
[data-theme="icq"] .nav button.on{color:#008000;font-weight:700}
[data-theme="icq"] .composer{
  background:#dfdfdf;
  border-top:2px solid #808080;
}
[data-theme="icq"] .composer textarea{
  border:2px solid;border-color:#808080 #fff #fff #808080;
  border-radius:0;
  background:#fff;
}
[data-theme="icq"] .sendbtn{
  background:#dfdfdf;
  color:#008000;
  border-radius:0;
  border:2px solid;border-color:#fff #808080 #808080 #fff;
  font-weight:700;
}
[data-theme="icq"] .cell:active{background:#000080;color:#fff}
[data-theme="icq"] .cell:active .preview,.icq .cell:active .time{color:#c0c0c0}
[data-theme="icq"] .unread-badge{
  background:#ff0000;
  color:#fff;
  border-radius:0;
  border:1px solid #800000;
}
[data-theme="icq"] .iconbtn{border:1px solid transparent}
[data-theme="icq"] .iconbtn:active{
  border:1px dotted #000;
  background:transparent;
}

[data-theme="icq"] .chatwrap,
[data-theme="icq"] .chatwrap{background-image:url('/chat-bg-icq.png')}
[data-theme="icq"] .tab-contacts{background-image:url('/contacts-bg-icq.png')}
[data-theme="icq"] .chatwrap,[data-theme="icq"] .tab-contacts{background-size:cover;background-position:center;background-repeat:no-repeat}

/* ===== Windows 98 — ForYou Theme ===== */
[data-theme="win98"]{
  --bg:#008080;
  --panel:#c0c0c0;
  --input:#ffffff;
  --text:#000000;
  --dim:#404040;
  --accent:#000080;
  --accent2:#1084d0;
  --on-accent:#ffffff;
  --out:#000080;
  --out-text:#ffffff;
  --in:#ffffff;
  --in-text:#000000;
  --border:#808080;
  --header:#000080;
  --shadow:inset 1px 1px 0 #dfdfdf,inset -1px -1px 0 #404040;
  --glow:none;
  --chat-img:url('/chat-bg-win98.png');
  --chip-on-bg:rgba(0,0,128,.12);
  --empty-img:url('/empty-win98.svg');
  --font:'MS Sans Serif',Tahoma,sans-serif;
}

[data-theme="win98"] .frame{
  font-family:var(--font);
  border:2px solid;border-color:#dfdfdf #404040 #404040 #dfdfdf;
  background:#c0c0c0;
}
[data-theme="win98"] .hdr{
  background:linear-gradient(90deg,#000080,#1084d0);
  color:#fff;
  border-bottom:none;
  min-height:28px;
  padding:4px 6px;
}
[data-theme="win98"] .hdr h1{font-size:13px;font-weight:700}
[data-theme="win98"] .hdr .sub{font-size:11px;color:#c0c0ff}
[data-theme="win98"] .iconbtn{
  width:16px;height:14px;font-size:10px;
  background:#c0c0c0;color:#000;
  border:1px solid;border-color:#fff #404040 #404040 #fff;
  border-radius:0;
}
[data-theme="win98"] .accentbtn,
[data-theme="win98"] .empty-cta{
  background:#c0c0c0;color:#000;
  border:2px solid;border-color:#fff #404040 #404040 #fff;
  border-radius:0;padding:6px 20px;font-size:12px;font-weight:400;
  box-shadow:none;
}
[data-theme="win98"] .accentbtn:active{border-color:#404040 #fff #fff #404040}
[data-theme="win98"] .b-out{
  background:#000080;color:#fff;
  border:1px solid #000040;border-radius:0;
}
[data-theme="win98"] .b-in{
  background:#fff;color:#000;
  border:1px solid #808080;border-radius:0;
}
[data-theme="win98"] .nav{
  background:#c0c0c0;
  border-top:2px solid;border-color:#fff #404040 #404040 #fff;
  padding:2px;
}
[data-theme="win98"] .nav button{
  font-size:11px;padding:4px 0;
  border:1px solid transparent;
}
[data-theme="win98"] .nav button.on{
  border:1px dotted #000;
  color:#000080;
}
[data-theme="win98"] .composer{
  background:#c0c0c0;
  border-top:2px solid #808080;
  padding:4px;
}
[data-theme="win98"] .composer textarea{
  border:2px solid;border-color:#808080 #fff #fff #808080;
  border-radius:0;font-size:12px;
}
[data-theme="win98"] .sendbtn{
  width:32px;height:28px;
  background:#c0c0c0;color:#000;
  border:2px solid;border-color:#fff #404040 #404040 #fff;
  border-radius:0;font-size:12px;
  box-shadow:none;
}
[data-theme="win98"] .sendbtn:active{border-color:#404040 #fff #fff #404040}
[data-theme="win98"] .cell{padding:4px 8px;font-size:12px}
[data-theme="win98"] .av{width:32px;height:32px;font-size:12px;border:1px solid #808080;border-radius:0}
[data-theme="win98"] .unread-badge{
  background:#ff0000;color:#fff;
  border-radius:0;font-size:10px;
  border:1px solid #800000;
}
[data-theme="win98"] .chatwrap{border:2px inset #808080;margin:4px;background-color:var(--bg);background-image:url('/chat-bg-win98.png');background-size:cover;background-position:center}
[data-theme="win98"] .chatwrap{background-image:url('/chat-bg-win98.png')}
[data-theme="win98"] .tab-contacts{background-image:url('/contacts-bg-win98.png')}
[data-theme="win98"] .scroll.chatwrap{background-image:url('/chat-bg-win98.png');background-size:cover;background-position:center;background-color:var(--bg);margin:2px;border:2px inset #808080}
[data-theme="win98"] .scroll.tab-contacts{background-image:url('/contacts-bg-win98.png');background-size:cover;background-position:center;background-color:var(--bg);margin:2px;border:2px inset #808080}
[data-theme="win98"] .chatwrap,[data-theme="win98"] .tab-contacts{background-size:cover;background-position:center;background-repeat:no-repeat}

/* ===== Warcraft 3 — ForYou Theme ===== */
[data-theme="warcraft3"]{
  --bg:#1a1410;
  --panel:#2a2218;
  --input:#1f1810;
  --text:#e8d5a8;
  --dim:#9a8460;
  --accent:#c9a227;
  --accent2:#e8c040;
  --on-accent:#1a1410;
  --out:linear-gradient(180deg,#8b6914,#c9a227);
  --out-text:#1a1410;
  --in:#2a2218;
  --in-text:#e8d5a8;
  --border:#5a4a30;
  --header:#1f1810;
  --shadow:0 4px 16px rgba(0,0,0,.5);
  --glow:0 0 12px rgba(201,162,39,.4);
  --chat-img:url('/chat-bg-warcraft3.png');
  --chip-on-bg:rgba(201,162,39,.15);
  --empty-img:url('/empty-warcraft3.svg');
  --font:'Cinzel Decorative',Palatino,serif;
}

[data-theme="warcraft3"] .frame{font-family:var(--font)}
[data-theme="warcraft3"] .hdr{
  background:linear-gradient(180deg,#2a2218,#1a1410);
  border-bottom:3px solid #c9a227;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
[data-theme="warcraft3"] .hdr h1{
  color:#e8c040;
  text-shadow:0 2px 4px rgba(0,0,0,.8);
  font-size:16px;
}
[data-theme="warcraft3"] .accentbtn,
[data-theme="warcraft3"] .sendbtn,
[data-theme="warcraft3"] .empty-cta{
  background:linear-gradient(180deg,#c9a227 0%,#8b6914 50%,#6a5010 100%);
  color:#1a1410;
  border:2px solid #e8c040;
  border-radius:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,220,100,.4);
  font-weight:700;
  text-shadow:0 1px 0 rgba(255,220,100,.3);
}
[data-theme="warcraft3"] .accentbtn:active,
[data-theme="warcraft3"] .sendbtn:active{
  background:linear-gradient(180deg,#6a5010,#8b6914);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5);
}
[data-theme="warcraft3"] .b-out{
  background:linear-gradient(180deg,#8b6914,#6a5010);
  color:#ffe8a0;
  border:1px solid #c9a227;
  border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
[data-theme="warcraft3"] .b-in{
  background:#2a2218;
  color:#e8d5a8;
  border:1px solid #5a4a30;
  border-radius:6px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.3);
}
[data-theme="warcraft3"] .nav{
  background:linear-gradient(180deg,#2a2218,#1a1410);
  border-top:2px solid #5a4a30;
}
[data-theme="warcraft3"] .nav button.on{color:#e8c040;text-shadow:0 0 8px rgba(201,162,39,.5)}
[data-theme="warcraft3"] .composer{
  background:#1f1810;
  border-top:2px solid #5a4a30;
}
[data-theme="warcraft3"] .composer textarea{
  background:#1a1410;
  border:1px solid #5a4a30;
  border-radius:4px;
  color:#e8d5a8;
}
[data-theme="warcraft3"] .sendbtn{border-radius:4px}
[data-theme="warcraft3"] .unread-badge{
  background:linear-gradient(180deg,#c9a227,#8b6914);
  color:#1a1410;
  border:1px solid #e8c040;
}
[data-theme="warcraft3"] .bubble{position:relative}
[data-theme="warcraft3"] .b-out::before{
  content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;
  border:1px solid rgba(201,162,39,.3);border-radius:6px;pointer-events:none;
}
[data-theme="warcraft3"] .av{border:2px solid #c9a227;box-shadow:0 0 8px rgba(201,162,39,.3)}

[data-theme="warcraft3"] .chatwrap,
[data-theme="warcraft3"] .chatwrap{background-image:url('/chat-bg-warcraft3.png')}
[data-theme="warcraft3"] .tab-contacts{background-image:url('/contacts-bg-warcraft3.png')}
[data-theme="warcraft3"] .chatwrap,[data-theme="warcraft3"] .tab-contacts{background-size:cover;background-position:center;background-repeat:no-repeat}

/* ===== The Sims — ForYou Theme ===== */
[data-theme="sims"]{
  --bg:#e8f5e9;
  --panel:#ffffff;
  --input:#f1f8e9;
  --text:#2e4a2e;
  --dim:#689f68;
  --accent:#43a047;
  --accent2:#66bb6a;
  --on-accent:#ffffff;
  --out:#43a047;
  --out-text:#ffffff;
  --in:#ffffff;
  --in-text:#2e4a2e;
  --border:#c8e6c9;
  --header:#ffffff;
  --shadow:0 4px 16px rgba(67,160,71,.15);
  --glow:0 0 16px rgba(67,160,71,.3);
  --chat-img:url('/chat-bg-sims.png');
  --chip-on-bg:rgba(67,160,71,.12);
  --empty-img:url('/empty-sims.svg');
  --font:'Nunito','Comic Sans MS',sans-serif;
}

[data-theme="sims"] .frame{font-family:var(--font)}
[data-theme="sims"] .hdr{
  background:#fff;
  border-bottom:3px solid #43a047;
}
[data-theme="sims"] .hdr h1{color:#43a047;font-weight:800}
[data-theme="sims"] .accentbtn,
[data-theme="sims"] .sendbtn,
[data-theme="sims"] .empty-cta{
  background:#43a047;
  color:#fff;
  border-radius:0;
  transform:rotate(0deg);
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  width:56px;height:56px;
  padding:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(67,160,71,.35);
  font-size:18px;
}
[data-theme="sims"] .accentbtn{
  width:auto;height:auto;
  clip-path:none;
  border-radius:24px;
  padding:14px 28px;
  font-size:15px;
}
[data-theme="sims"] .b-out{
  background:#43a047;
  color:#fff;
  border-radius:20px 20px 4px 20px;
  box-shadow:0 2px 8px rgba(67,160,71,.25);
}
[data-theme="sims"] .b-in{
  background:#fff;
  color:#2e4a2e;
  border:2px solid #c8e6c9;
  border-radius:20px 20px 20px 4px;
}
[data-theme="sims"] .nav button.on{color:#43a047}
[data-theme="sims"] .nav .dot{
  width:8px;height:8px;
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  border-radius:0;
  background:#43a047;
}
[data-theme="sims"] .composer textarea{
  border-radius:24px;
  border:2px solid #c8e6c9;
  background:#f1f8e9;
}
[data-theme="sims"] .sendbtn{
  width:44px;height:44px;
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  border-radius:0;
}
[data-theme="sims"] .unread-badge{
  background:#43a047;
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  border-radius:0;
  min-width:24px;
  padding:4px 8px;
}
[data-theme="sims"] .av{
  border:3px solid #66bb6a;
  box-shadow:0 0 0 2px #fff,0 0 12px rgba(67,160,71,.3);
}
[data-theme="sims"] .fchip.on{
  background:#43a047;
  color:#fff;
  border-color:#43a047;
  border-radius:20px;
}
[data-theme="sims"] .chatwrap::after{
  content:"◆";position:absolute;top:12px;right:16px;
  font-size:20px;color:#43a047;opacity:.3;
  animation:sims-plumbob 2s ease-in-out infinite;
}
@keyframes sims-plumbob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(180deg)}}

[data-theme="sims"] .chatwrap,
[data-theme="sims"] .chatwrap{background-image:url('/chat-bg-sims.png')}
[data-theme="sims"] .tab-contacts{background-image:url('/contacts-bg-sims.png')}
[data-theme="sims"] .chatwrap,[data-theme="sims"] .tab-contacts{background-size:cover;background-position:center;background-repeat:no-repeat}

/* ============================ РЕДАКТОР ТЕМ ============================ */
.te-open-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:10px 0 4px;padding:12px;border:1px dashed var(--border);border-radius:12px;background:var(--input);color:var(--text);font-size:14.5px;font-weight:600;cursor:pointer}
.te-open-btn:hover{border-color:var(--accent);color:var(--accent)}
.te-open-ic{font-size:17px}
.te-screen{display:flex;flex-direction:column;height:100%}
.te-body{flex:1;overflow-y:auto;padding:8px 16px 28px}
.te-section{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:18px 0 8px}
.te-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.te-lbl{font-size:14.5px;color:var(--text)}
.te-color{width:46px;height:32px;padding:0;border:1px solid var(--border);border-radius:8px;background:none;cursor:pointer;flex:0 0 auto}
.te-color::-webkit-color-swatch-wrapper{padding:2px}
.te-color::-webkit-color-swatch{border:none;border-radius:6px}
.te-select{padding:8px 10px;border-radius:9px;border:1px solid var(--border);background:var(--input);color:var(--text);font-size:14px}
.te-row input[type="range"]{flex:1;max-width:160px}
.te-wp{padding:12px 0;border-bottom:1px solid var(--border)}
.te-wp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.te-wp-actions{display:flex;gap:14px}
.te-wp-box{width:100%;height:120px;border-radius:12px;overflow:hidden;background:var(--input);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.te-wp-img{width:100%;height:100%;object-fit:cover}
.te-wp-empty{color:var(--dim);font-size:13px}
.te-hint{font-size:12.5px;color:var(--dim);margin-top:16px;line-height:1.5}

/* ===== читаемость текста поверх фоновых картинок тем ===== */
[data-theme="cyberpunk"] .chatwrap,[data-theme="hell"] .chatwrap,[data-theme="neon-jazz-dark"] .chatwrap,[data-theme="warcraft3"] .chatwrap,[data-theme="cyberpunk"] .tab-contacts,[data-theme="hell"] .tab-contacts,[data-theme="neon-jazz-dark"] .tab-contacts,[data-theme="warcraft3"] .tab-contacts{background-color:rgba(0,0,0,.5);background-blend-mode:multiply}
[data-theme="heaven"] .chatwrap,[data-theme="icq"] .chatwrap,[data-theme="win98"] .chatwrap,[data-theme="sims"] .chatwrap,[data-theme="heaven"] .tab-contacts,[data-theme="icq"] .tab-contacts,[data-theme="win98"] .tab-contacts,[data-theme="sims"] .tab-contacts{background-color:rgba(255,255,255,.6);background-blend-mode:lighten}
[data-theme="cyberpunk"] .tab-contacts,[data-theme="hell"] .tab-contacts,[data-theme="heaven"] .tab-contacts,[data-theme="neon-jazz-dark"] .tab-contacts,[data-theme="icq"] .tab-contacts,[data-theme="win98"] .tab-contacts,[data-theme="warcraft3"] .tab-contacts,[data-theme="sims"] .tab-contacts{padding:6px 8px}
[data-theme="cyberpunk"] .tab-contacts .cell,[data-theme="hell"] .tab-contacts .cell,[data-theme="heaven"] .tab-contacts .cell,[data-theme="neon-jazz-dark"] .tab-contacts .cell,[data-theme="icq"] .tab-contacts .cell,[data-theme="win98"] .tab-contacts .cell,[data-theme="warcraft3"] .tab-contacts .cell,[data-theme="sims"] .tab-contacts .cell{margin:5px 6px;border-radius:14px;background:var(--panel);border:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,.18)}
@supports (background:color-mix(in srgb,red,blue)){[data-theme="cyberpunk"] .tab-contacts .cell,[data-theme="hell"] .tab-contacts .cell,[data-theme="heaven"] .tab-contacts .cell,[data-theme="neon-jazz-dark"] .tab-contacts .cell,[data-theme="icq"] .tab-contacts .cell,[data-theme="win98"] .tab-contacts .cell,[data-theme="warcraft3"] .tab-contacts .cell,[data-theme="sims"] .tab-contacts .cell{background:color-mix(in srgb,var(--panel) 86%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}
[data-theme="cyberpunk"] .tab-contacts .cell .name,[data-theme="hell"] .tab-contacts .cell .name,[data-theme="heaven"] .tab-contacts .cell .name,[data-theme="neon-jazz-dark"] .tab-contacts .cell .name,[data-theme="icq"] .tab-contacts .cell .name,[data-theme="win98"] .tab-contacts .cell .name,[data-theme="warcraft3"] .tab-contacts .cell .name,[data-theme="sims"] .tab-contacts .cell .name{font-weight:700}
[data-theme="cyberpunk"] .tab-contacts .cell .preview,[data-theme="hell"] .tab-contacts .cell .preview,[data-theme="heaven"] .tab-contacts .cell .preview,[data-theme="neon-jazz-dark"] .tab-contacts .cell .preview,[data-theme="icq"] .tab-contacts .cell .preview,[data-theme="win98"] .tab-contacts .cell .preview,[data-theme="warcraft3"] .tab-contacts .cell .preview,[data-theme="sims"] .tab-contacts .cell .preview{color:var(--text);opacity:.78}
[data-theme="cyberpunk"] .chatwrap .sys, .chatwrap .date-divider, .chatwrap .day-sep,[data-theme="hell"] .chatwrap .sys, .chatwrap .date-divider, .chatwrap .day-sep,[data-theme="heaven"] .chatwrap .sys, .chatwrap .date-divider, .chatwrap .day-sep,[data-theme="neon-jazz-dark"] .chatwrap .sys, .chatwrap .date-divider, .chatwrap .day-sep,[data-theme="icq"] .chatwrap .sys, .chatwrap .date-divider, .chatwrap .day-sep,[data-theme="win98"] .chatwrap .sys, .chatwrap .date-divider, .chatwrap .day-sep,[data-theme="warcraft3"] .chatwrap .sys, .chatwrap .date-divider, .chatwrap .day-sep,[data-theme="sims"] .chatwrap .sys, .chatwrap .date-divider, .chatwrap .day-sep{background:var(--panel);border-radius:12px;padding:3px 12px;display:inline-block;box-shadow:0 1px 6px rgba(0,0,0,.2)}

/* ===== лёгкая прозрачность пузырей чата — тема просвечивает под диалогами ===== */
[data-theme="cyberpunk"] .chatwrap,[data-theme="hell"] .chatwrap,[data-theme="neon-jazz-dark"] .chatwrap,[data-theme="warcraft3"] .chatwrap{background-color:rgba(0,0,0,.3)}
[data-theme="heaven"] .chatwrap,[data-theme="icq"] .chatwrap,[data-theme="win98"] .chatwrap,[data-theme="sims"] .chatwrap{background-color:rgba(255,255,255,.4)}
@supports (background:color-mix(in srgb,red,blue)){
  [data-theme="cyberpunk"] .b-in,[data-theme="hell"] .b-in,[data-theme="heaven"] .b-in,[data-theme="neon-jazz-dark"] .b-in,[data-theme="icq"] .b-in,[data-theme="win98"] .b-in,[data-theme="warcraft3"] .b-in,[data-theme="sims"] .b-in{background:color-mix(in srgb,var(--in) 86%,transparent)}
  [data-theme="cyberpunk"] .b-out,[data-theme="icq"] .b-out,[data-theme="win98"] .b-out,[data-theme="sims"] .b-out{background:color-mix(in srgb,var(--out) 86%,transparent)}
}
[data-theme="hell"] .b-out{background:linear-gradient(180deg,rgba(204,34,0,.88),rgba(255,69,0,.88))}
[data-theme="heaven"] .b-out{background:linear-gradient(135deg,rgba(212,175,55,.9),rgba(240,208,96,.9))}
[data-theme="neon-jazz-dark"] .b-out{background:linear-gradient(135deg,rgba(255,45,149,.88),rgba(192,38,211,.88))}
[data-theme="warcraft3"] .b-out{background:linear-gradient(180deg,rgba(139,105,20,.9),rgba(201,162,39,.9))}

/* ===== список чатов (Чаты) поверх фона темы — лёгкая прозрачность строк ===== */
[data-theme="cyberpunk"] .tab-chats{background-image:url('/chat-bg-cyberpunk.png')}
[data-theme="hell"] .tab-chats{background-image:url('/chat-bg-hell.png')}
[data-theme="heaven"] .tab-chats{background-image:url('/chat-bg-heaven.png')}
[data-theme="neon-jazz-dark"] .tab-chats{background-image:url('/chat-bg-neon-jazz-dark.png')}
[data-theme="icq"] .tab-chats{background-image:url('/chat-bg-icq.png')}
[data-theme="win98"] .tab-chats{background-image:url('/chat-bg-win98.png')}
[data-theme="warcraft3"] .tab-chats{background-image:url('/chat-bg-warcraft3.png')}
[data-theme="sims"] .tab-chats{background-image:url('/chat-bg-sims.png')}

[data-theme="cyberpunk"] .tab-chats,[data-theme="hell"] .tab-chats,[data-theme="heaven"] .tab-chats,[data-theme="neon-jazz-dark"] .tab-chats,[data-theme="icq"] .tab-chats,[data-theme="win98"] .tab-chats,[data-theme="warcraft3"] .tab-chats,[data-theme="sims"] .tab-chats{background-size:cover;background-position:center;background-repeat:no-repeat;padding:6px 8px}
[data-theme="cyberpunk"] .tab-chats,[data-theme="hell"] .tab-chats,[data-theme="neon-jazz-dark"] .tab-chats,[data-theme="warcraft3"] .tab-chats{background-color:rgba(0,0,0,.34);background-blend-mode:multiply}
[data-theme="heaven"] .tab-chats,[data-theme="icq"] .tab-chats,[data-theme="win98"] .tab-chats,[data-theme="sims"] .tab-chats{background-color:rgba(255,255,255,.42);background-blend-mode:lighten}
[data-theme="cyberpunk"] .tab-chats .cell,[data-theme="hell"] .tab-chats .cell,[data-theme="heaven"] .tab-chats .cell,[data-theme="neon-jazz-dark"] .tab-chats .cell,[data-theme="icq"] .tab-chats .cell,[data-theme="win98"] .tab-chats .cell,[data-theme="warcraft3"] .tab-chats .cell,[data-theme="sims"] .tab-chats .cell{margin:5px 6px;border-radius:14px;background:var(--panel);border:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,.18)}
@supports (background:color-mix(in srgb,red,blue)){[data-theme="cyberpunk"] .tab-chats .cell,[data-theme="hell"] .tab-chats .cell,[data-theme="heaven"] .tab-chats .cell,[data-theme="neon-jazz-dark"] .tab-chats .cell,[data-theme="icq"] .tab-chats .cell,[data-theme="win98"] .tab-chats .cell,[data-theme="warcraft3"] .tab-chats .cell,[data-theme="sims"] .tab-chats .cell{background:color-mix(in srgb,var(--panel) 80%,transparent);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}}
[data-theme="cyberpunk"] .tab-chats .cell .name,[data-theme="hell"] .tab-chats .cell .name,[data-theme="heaven"] .tab-chats .cell .name,[data-theme="neon-jazz-dark"] .tab-chats .cell .name,[data-theme="icq"] .tab-chats .cell .name,[data-theme="win98"] .tab-chats .cell .name,[data-theme="warcraft3"] .tab-chats .cell .name,[data-theme="sims"] .tab-chats .cell .name{font-weight:700}
[data-theme="cyberpunk"] .tab-chats .cell .preview,[data-theme="hell"] .tab-chats .cell .preview,[data-theme="heaven"] .tab-chats .cell .preview,[data-theme="neon-jazz-dark"] .tab-chats .cell .preview,[data-theme="icq"] .tab-chats .cell .preview,[data-theme="win98"] .tab-chats .cell .preview,[data-theme="warcraft3"] .tab-chats .cell .preview,[data-theme="sims"] .tab-chats .cell .preview{color:var(--text);opacity:.72}

/* ============================ СЕРВИС «ТЕМЫ» (галерея + лайки) ============================ */
.opt-tap{cursor:pointer}
.opt-tap:active{background:var(--input)}
.themes-screen{display:flex;flex-direction:column;height:100%}
.themes-body{flex:1;overflow-y:auto;padding:6px 12px 28px}
.themes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:6px 2px}
.theme-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow);display:flex;flex-direction:column}
.theme-card.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.theme-prev{position:relative;padding:10px;min-height:108px;cursor:pointer;display:flex;flex-direction:column;gap:8px}
.theme-prev-top{display:flex;align-items:center;gap:7px;border-bottom:2px solid;padding-bottom:7px}
.theme-prev-dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto}
.theme-prev-ttl{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.theme-prev-msgs{display:flex;flex-direction:column;gap:5px}
.tprev-b{font-size:11px;padding:5px 9px;border-radius:11px;max-width:85%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tprev-in{align-self:flex-start;border-bottom-left-radius:4px}
.tprev-out{align-self:flex-end;border-bottom-right-radius:4px}
.theme-prev-badge{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.5);color:#fff;font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px}
.theme-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-top:1px solid var(--border)}
.theme-like{display:flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;color:var(--dim);font-size:13px;font-weight:600;padding:4px 6px;border-radius:8px}
.theme-like.on{color:#ff5a72}
.theme-like:hover{background:rgba(127,127,127,.12)}
.theme-apply-btn{background:var(--accent);color:var(--on-accent);border:none;border-radius:9px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer}
.theme-card-applied{font-size:12px;color:var(--accent);font-weight:600}

/* редактор тем: поля названия/автора + кнопка сохранения */
.te-field{display:flex;flex-direction:column;gap:5px;padding:8px 0;border-bottom:1px solid var(--border)}
.te-field .te-lbl{font-size:13px;color:var(--dim)}
.te-input{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--input);color:var(--text);font-size:14.5px;width:100%}
.te-save-btn{margin:18px 0 6px;width:100%}
/* карточки пользовательских тем в галерее */
.theme-card-author{font-size:11.5px;color:var(--dim);padding:5px 10px 0;display:flex;align-items:center;gap:6px}
.theme-del{background:none;border:none;color:#ef4444;font-size:11.5px;cursor:pointer;padding:0;text-decoration:underline}

/* iOS Safari криво трактует width="1em" в SVG-АТРИБУТЕ (em там ≠ CSS-em) — скрепка «прикрепить»
   и часть иконок пропадали на айфоне. Переопределяем размер через CSS (em в CSS считается верно). */
.iconbtn svg[width="1em"]{width:1.18em;height:1.18em}
/* шапка чата: кнопки не сжимаются и не наезжают на имя собеседника; имя усекается многоточием */
.hdr-act{flex:0 0 auto}
.hdr [data-act="chatInfo"]{overflow:hidden}
.hdr [data-act="chatInfo"] h1{max-width:100%}

/* ============================ 3D-АВАТАР (онлайн-прогулки) ============================ */
.a3d-modes{display:flex;gap:8px;padding:6px 16px 10px}
.a3d-mode{flex:1;padding:10px;border-radius:11px;border:1px solid var(--border);background:var(--input);color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer}
.a3d-mode.on{border-color:var(--accent);color:var(--accent);background:var(--chip-on-bg)}
.a3d-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:4px 16px 12px}
.a3d-preset{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:12px;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:11px;cursor:pointer}
.a3d-preset.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.a3d-emoji{font-size:30px;line-height:1}
.a3d-warn{margin:0 16px 10px;padding:10px 12px;border-radius:10px;background:rgba(245,158,11,.12);color:#e08600;font-size:12.5px;line-height:1.45}
.a3d-photo{padding:0 16px 14px}
.a3d-photo-box{width:100%;height:150px;border-radius:12px;overflow:hidden;background:var(--input);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.a3d-photo-box img{width:100%;height:100%;object-fit:cover}
.a3d-photo-actions{display:flex;gap:16px;margin-top:8px}

/* сервис «Онлайн-встреча» */
.meet-screen{display:flex;flex-direction:column;height:100%}
.meet-body{flex:1;overflow-y:auto;padding-bottom:24px}
.meet-hero{text-align:center;padding:22px 20px 8px}
.meet-hero-ic{font-size:52px;line-height:1}
.meet-hero h2{margin:10px 0 6px;font-size:19px;color:var(--text)}
.meet-hero p{margin:0 auto;max-width:340px;font-size:13.5px;color:var(--dim);line-height:1.5}
.meet-cta-wrap{padding:18px 16px 8px}
.meet-cta{width:100%;opacity:.6}

/* ============================ ОНЛАЙН-ВСТРЕЧА: 3D-мир ============================ */
#meetWorld{position:fixed;inset:0;z-index:9500;background:#8fc2ee;overflow:hidden;touch-action:none;font-family:-apple-system,'Segoe UI',Roboto,sans-serif}
#meetCanvas{display:block;width:100%;height:100%}
.meet-exit{position:absolute;top:calc(10px + env(safe-area-inset-top));left:12px;z-index:3;background:rgba(0,0,0,.5);color:#fff;border:none;border-radius:20px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer}
.meet-rotate-hint{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;color:#fff;font-size:16px;font-weight:600;background:rgba(0,0,0,.55);padding:14px;display:none;z-index:4}
.meet-chat{position:absolute;left:12px;bottom:calc(14px + env(safe-area-inset-bottom));width:min(54vw,340px);z-index:3;display:flex;flex-direction:column;gap:6px}
.meet-chat-msgs{max-height:30vh;overflow-y:auto;display:flex;flex-direction:column;gap:3px}
.meet-msg{background:rgba(0,0,0,.42);color:#fff;font-size:12.5px;padding:4px 9px;border-radius:10px;align-self:flex-start;max-width:100%;word-break:break-word}
.meet-msg.sys{background:rgba(0,0,0,.3);font-style:italic;opacity:.85}
.meet-msg b{color:#ffd86b}
.meet-chat-row{display:flex;gap:6px}
.meet-chat-row input{flex:1;border:none;border-radius:18px;padding:9px 13px;font-size:14px;background:rgba(255,255,255,.92);color:#111;outline:none}
.meet-chat-row button{border:none;border-radius:50%;width:38px;height:38px;background:#3b7cff;color:#fff;font-size:16px;cursor:pointer;flex:0 0 auto}
.joy{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.35);z-index:3;touch-action:none}
.joy-move{left:18px}
.joy-look{right:18px}
.joy-knob{position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(255,255,255,.55);border:2px solid rgba(255,255,255,.8);pointer-events:none}
@media(min-width:900px){ .joy{opacity:.5} }

/* ============================ ПЕРСОНАЛЬНЫЕ ОБОИ ЧАТА ============================ */
.has-chat-wp{position:relative;overflow:hidden}
.has-chat-wp > *{position:relative;z-index:1}
.has-chat-wp > .chat-wp-layer{position:absolute;inset:-34px;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:0}
.has-chat-wp > .chat-wp-dim{position:absolute;inset:0;background:var(--bg);z-index:0;pointer-events:none}
/* модалка настройки обоев чата */
.cwp-prev{position:relative;width:calc(100% - 36px);height:170px;margin:6px 18px 4px;border-radius:14px;overflow:hidden;background:var(--input);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.cwp-prev-img{position:absolute;inset:-30px;background-size:cover;background-position:center;background-repeat:no-repeat}
.cwp-prev-dim{position:absolute;inset:0;background:var(--bg);pointer-events:none}
.cwp-actions{display:flex;gap:16px;padding:4px 18px 6px}

/* ===== Редактор обрезки фото перед отправкой (как в телеграме) ===== */
.crop-overlay{position:fixed;inset:0;z-index:9600;background:#000;display:flex;flex-direction:column;touch-action:none;-webkit-user-select:none;user-select:none}
.crop-bar{display:flex;align-items:center;justify-content:space-between;padding:max(10px,env(safe-area-inset-top)) 14px 10px;color:#fff;flex:0 0 auto}
.crop-title{font-size:15px;font-weight:600;opacity:.92}
.crop-btn{background:none;border:0;color:#fff;font-size:16px;padding:8px 6px;cursor:pointer}
.crop-btn.crop-done{color:var(--accent,#4ea1ff);font-weight:700}
.crop-stage{position:relative;flex:1 1 auto;overflow:hidden;min-height:0}
.crop-stage #cropImg{position:absolute;display:block;pointer-events:none;-webkit-user-drag:none;user-drag:none}
.crop-frame{position:absolute;box-sizing:border-box;border:1.5px solid rgba(255,255,255,.95);box-shadow:0 0 0 100vmax rgba(0,0,0,.55);cursor:move;touch-action:none}
.crop-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.32) 1px,transparent 1px);background-size:33.33% 33.33%;background-position:0 0}
.crop-h{position:absolute;width:46px;height:46px;touch-action:none;z-index:3}
.crop-h::after{content:"";position:absolute;width:22px;height:22px;border:3px solid #fff;border-radius:3px;box-shadow:0 0 3px rgba(0,0,0,.6)}
.crop-h.nw{left:-3px;top:-3px;cursor:nwse-resize}.crop-h.nw::after{left:3px;top:3px;border-right:0;border-bottom:0}
.crop-h.ne{right:-3px;top:-3px;cursor:nesw-resize}.crop-h.ne::after{right:3px;top:3px;border-left:0;border-bottom:0}
.crop-h.sw{left:-3px;bottom:-3px;cursor:nesw-resize}.crop-h.sw::after{left:3px;bottom:3px;border-right:0;border-top:0}
.crop-h.se{right:-3px;bottom:-3px;cursor:nwse-resize}.crop-h.se::after{right:3px;bottom:3px;border-left:0;border-top:0}
.crop-tools{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px max(14px,env(safe-area-inset-bottom));flex:0 0 auto}
.crop-tool{background:rgba(255,255,255,.12);border:0;color:#fff;font-size:14px;padding:10px 16px;border-radius:22px;cursor:pointer}
.crop-tool.on{background:var(--accent,#4ea1ff);color:#fff}
.crop-tool-accent{background:rgba(78,161,255,.25);border:1px solid rgba(78,161,255,.5)}
.composer-orig{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--dim);white-space:nowrap;cursor:pointer;user-select:none;padding:0}
.composer-orig input{width:15px;height:15px;margin:0;accent-color:var(--accent);flex:0 0 auto}
.composer-orig span{line-height:1.2}
.mediaprev-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mediaprev-label{font-size:13px;color:var(--dim)}
.mpm-meta{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;padding:0 8px;justify-content:center}

/* ===== Скачивание из лайтбокса + множественный выбор фото ===== */
.lb-dl{position:absolute;top:max(12px,env(safe-area-inset-top));right:64px;z-index:5;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff;border:0;border-radius:50%;font-size:20px;cursor:pointer}
.lb-dl svg{width:22px;height:22px}
.mediaprev-multi{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:8px 10px;background:var(--panel);border-top:1px solid var(--border);align-items:center}
.mediaprev-multi .mpm-item{position:relative;flex:0 0 auto;width:72px;height:72px;border-radius:10px;overflow:hidden;background:#0003}
.mediaprev-multi .mpm-item img,.mediaprev-multi .mpm-item video{width:100%;height:100%;object-fit:cover;display:block}
.mpm-vbadge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px;text-shadow:0 1px 4px #000;pointer-events:none}
.mpm-del{position:absolute;top:3px;right:3px;width:20px;height:20px;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:12px;line-height:20px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mpm-count{flex:0 0 auto;font-size:12px;color:var(--dim);padding:0 8px;white-space:nowrap}

/* ============================ PROFESSIONAL UI 2026 ============================ */
:where(button,a,input,textarea,select):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button,.opt,.cell,.iconbtn{transition:background-color .16s ease,color .16s ease,transform .12s ease,border-color .16s ease}
.frame{box-shadow:0 0 0 1px rgba(255,255,255,.04),0 24px 70px rgba(0,0,0,.22)}
.hdr{min-height:62px;padding:11px 16px;background:var(--header);backdrop-filter:blur(18px);box-shadow:none}
.hdr h1{font-size:18px;font-weight:680;letter-spacing:-.25px}
.iconbtn{width:40px;height:40px;border-radius:12px;color:var(--dim)}
.iconbtn:hover{background:var(--input);color:var(--text)}
.accentbtn{min-height:46px;border-radius:12px;font-weight:650;letter-spacing:.01em;box-shadow:0 5px 14px rgba(50,72,88,.16)}
.accentbtn:active,.compact-btn:active,.profile-edit-btn:active{transform:translateY(1px)}
.field label{margin:0 0 7px 1px;font-size:12px;font-weight:650}
.field input,.field textarea{min-height:46px;border-radius:12px;background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.02)}
.auth{max-width:410px;width:100%;margin:auto}
.logo{font-size:32px;font-weight:740;letter-spacing:-1.1px}
.tagline{font-size:14px;margin-bottom:30px}
.cell{padding:12px 16px;gap:13px}
.cell:hover{background:color-mix(in srgb,var(--input) 60%,transparent)}
.cell .name{font-size:15px;font-weight:640}
.cell .preview{font-size:13px;line-height:1.35}
.divider{margin-left:76px;background:color-mix(in srgb,var(--border) 80%,transparent)}
.nav{min-height:66px;background:var(--header);backdrop-filter:blur(18px);padding:4px 4px max(6px,env(safe-area-inset-bottom))}
.nav button{border-radius:12px;padding:7px 0 5px;font-size:10.5px;font-weight:580;gap:2px}
.nav button.on{background:var(--chip-on-bg)}
.nav .dot{display:none}
.chatsearch{padding:10px 14px 8px}
.chatsearch .box,.chatsearch .filtbtn{border-radius:12px;background:var(--input);border-color:transparent}
.chips-row{padding:4px 14px 11px;gap:7px}
.fchip{padding:7px 14px;border-radius:10px;font-size:13px;background:transparent}
.fchip.on{color:var(--accent);border-color:transparent;background:var(--chip-on-bg)}
.bubble{border-radius:15px;padding:9px 12px 7px;box-shadow:0 1px 2px rgba(0,0,0,.08);line-height:1.42}
.b-in{border-bottom-left-radius:5px;border:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
.b-out{border-bottom-right-radius:5px}
.composer{padding:9px 10px max(9px,env(safe-area-inset-bottom));gap:7px;background:var(--header);backdrop-filter:blur(18px)}
.composer textarea{border-radius:14px;padding:12px 14px;background:var(--input);border-color:transparent}
.sendbtn{width:42px;height:42px;border-radius:13px}
.sheet{border-radius:22px 22px 0 0;box-shadow:0 -14px 50px rgba(0,0,0,.16)}
.overlay{background:rgba(12,16,19,.52);backdrop-filter:blur(3px)}
.empty-title{font-size:21px;font-weight:700;letter-spacing:-.3px}
.empty-sub{font-size:14px}
.empty-cta{border-radius:12px;padding:13px 22px;font-size:14px;box-shadow:0 6px 16px rgba(50,72,88,.16)}
[data-theme="dark"] .empty-cta{box-shadow:0 6px 16px rgba(0,0,0,.24)}

/* Desktop shell */
.desktop{background:var(--bg)}
.d-nav{background:var(--panel);border-color:var(--border)}
.d-logo{font-weight:720;letter-spacing:-.5px}
.d-navitem{border-radius:11px;margin:2px 8px}
.d-navitem.on{background:var(--chip-on-bg);color:var(--accent)}
.d-newchat,.d-prof-cover{background:var(--accent);box-shadow:none}
.d-list,.d-center,.d-profile,.d-col-wide,.d-col-feed{background:var(--panel);border-color:var(--border)}
.d-col-hd{background:var(--header);backdrop-filter:blur(18px);border-color:var(--border)}
.d-col-hd h2{font-weight:680;letter-spacing:-.25px}

/* Structured settings */
.settings-page{padding:0 0 calc(28px + env(safe-area-inset-bottom));background:var(--bg)}
.settings-head{padding:18px 14px 4px}
.profcard{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px;background:var(--panel);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow)}
.profile-avatar-wrap{position:relative;display:inline-flex}
.profile-avatar-wrap .online-dot{width:15px;height:15px;right:2px;bottom:2px;border:3px solid var(--panel)}
.profile-summary{min-width:0}
.profname{font-size:19px;font-weight:700;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-handle{margin-top:3px;color:var(--dim);font-size:12.5px}
.profdesc{text-align:left;margin-top:7px;font-size:13px;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.profile-edit-btn,.compact-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 11px;border:1px solid var(--border);border-radius:10px;background:var(--input);font-size:12.5px;font-weight:650;color:var(--text)}
.profile-edit-btn svg{width:15px;height:15px}
.settings-group{margin:20px 14px 0}
.settings-group-title{margin:0 4px 8px;color:var(--dim);font-size:12px;font-weight:680;letter-spacing:.04em;text-transform:uppercase}
.settings-card{overflow:hidden;background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.02)}
.settings-card>.opt,.settings-card>.opt-link{min-height:58px;padding:11px 14px;border-bottom:1px solid var(--border)}
.settings-card>.opt:last-child,.settings-card>.opt-link:last-child{border-bottom:0}
.opt{gap:12px}
.opt:hover{background:color-mix(in srgb,var(--input) 58%,transparent)}
.opt .lbl{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px;font-size:14px}
.opt .lbl b{font-weight:630}
.opt .lbl small,.storage-row small{color:var(--dim);font-size:11.5px;line-height:1.35}
.setting-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--chip-on-bg);color:var(--accent);font-size:17px}
.setting-icon svg{width:18px;height:18px}
.optval{display:flex;align-items:center;gap:4px;color:var(--dim);font-size:12.5px;white-space:nowrap}
.optval svg{width:16px;height:16px}
.optsel{max-width:48%;min-height:34px;border-radius:9px;background:var(--input);border-color:transparent}
.toggle-sw{transform:scale(.92);transform-origin:right center}
.settings-note{display:flex;align-items:flex-start;gap:8px;margin:10px 12px 12px;padding:10px 12px;border-radius:10px;font-size:12px;line-height:1.4}
.settings-note.warning{background:color-mix(in srgb,var(--warning) 12%,transparent);color:var(--warning)}
.settings-note svg{flex:0 0 auto;width:16px}
.away-editor{margin:0 12px 12px;padding:12px;background:var(--input);border-radius:12px}
.away-textarea{border:1px solid var(--border);background:var(--panel)}
.storage-row{padding:14px;border-bottom:1px solid var(--border)}
.storage-row>div{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:14px}
.storage-row small{font-weight:500}
.storage-row input{width:100%;accent-color:var(--accent)}
.opt-link{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.app-version{padding:12px 14px;color:var(--dim);font-size:11.5px;line-height:1.45}
.danger-zone .settings-card{border-color:color-mix(in srgb,var(--danger) 24%,var(--border))}
.opt.danger,.opt.danger .setting-icon{color:var(--danger)}
.opt.danger .setting-icon{background:color-mix(in srgb,var(--danger) 10%,transparent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Themes */
.themes-body{padding:0 14px 24px}
.settings-intro{padding:22px 4px 14px}
.settings-intro h2{margin:0 0 7px;font-size:22px;letter-spacing:-.4px}
.settings-intro p{margin:0;color:var(--dim);font-size:13.5px;line-height:1.5}
.theme-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.theme-choice{display:flex;position:relative;flex-direction:column;align-items:stretch;gap:12px;padding:12px;text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:16px}
.theme-choice.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--chip-on-bg)}
.theme-choice-preview{height:118px;padding:11px;border-radius:11px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.theme-choice-preview.light{background:#f0f2f3}.theme-choice-preview.dark{background:#15181a}
.theme-choice-preview i{display:block;height:19px;border-radius:7px;background:#fff;width:75%;box-shadow:0 1px 2px #0001}
.theme-choice-preview.dark i{background:#252a2e}.theme-choice-preview i:nth-child(2){margin-left:auto;width:58%;background:#607f96}.theme-choice-preview i:nth-child(3){width:46%}
.theme-choice>span:nth-child(2){display:flex;flex-direction:column;gap:3px}
.theme-choice b{font-size:14px;font-weight:650}.theme-choice small{color:var(--dim);font-size:11.5px;line-height:1.35}
.theme-choice-check{position:absolute;top:19px;right:19px;width:23px;height:23px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:12px}

/* Sessions */
.sessions-screen{background:var(--bg)}
.sessions-hdr>div:nth-child(2){flex:1;min-width:0}
.sessions-body{padding:18px 14px calc(28px + env(safe-area-inset-bottom))}
.security-summary{display:flex;gap:12px;padding:15px;border:1px solid color-mix(in srgb,var(--accent) 26%,var(--border));border-radius:15px;background:var(--chip-on-bg)}
.security-summary>span{display:flex;width:34px;height:34px;align-items:center;justify-content:center;flex:0 0 auto;border-radius:10px;background:var(--panel);color:var(--accent)}
.security-summary svg{width:18px}.security-summary b{font-size:13.5px}.security-summary p{margin:4px 0 0;color:var(--dim);font-size:12px;line-height:1.45}
.sessions-section{margin-top:22px}.sessions-section h2{margin:0 3px 9px;font-size:12px;color:var(--dim);font-weight:680;text-transform:uppercase;letter-spacing:.04em}
.sessions-section-head{display:flex;justify-content:space-between;align-items:center}.sessions-section-head>span{color:var(--dim);font-size:12px}
.session-card{display:flex;gap:13px;padding:15px;margin-bottom:10px;background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.02)}
.session-card.current{border-color:color-mix(in srgb,var(--accent) 34%,var(--border))}
.session-device-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 auto;border-radius:12px;background:var(--chip-on-bg);color:var(--accent);font-size:20px}
.session-card-body{flex:1;min-width:0}.session-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.session-card-head b{font-size:14.5px}
.current-badge{display:inline-block;margin-left:7px;padding:3px 6px;border-radius:6px;background:var(--chip-on-bg);color:var(--accent);font-size:9.5px;font-weight:700;text-transform:uppercase}
.session-client{margin-top:3px;color:var(--dim);font-size:12px}
.session-details{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;margin:14px 0 0}.session-details>div:last-child{grid-column:1/-1}
.session-details dt{color:var(--dim);font-size:10.5px}.session-details dd{margin:2px 0 0;font-size:12px}
.session-revoke{padding:5px 0;color:var(--danger);font-size:11.5px;font-weight:650}
.sessions-empty{padding:24px;text-align:center;color:var(--dim);font-size:13px;background:var(--panel);border:1px solid var(--border);border-radius:16px}
.danger-outline-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;margin-top:18px;border:1px solid color-mix(in srgb,var(--danger) 45%,var(--border));border-radius:12px;color:var(--danger);font-weight:650}
.danger-outline-btn svg{width:18px}.sessions-footnote{margin:18px 4px 0;color:var(--dim);font-size:11.5px;line-height:1.5}
.sessions-loading{padding:48px 0;text-align:center;color:var(--dim);font-size:13px}.sessions-loading .spin{margin-bottom:8px}
.frame:has(.sessions-screen),.frame:has(.themes-screen){max-width:760px}

@media(max-width:380px){
  .profcard{grid-template-columns:auto 1fr}.profile-edit-btn{grid-column:1/-1}
  .theme-choice-grid{grid-template-columns:1fr}
  .optsel{max-width:52%;font-size:12px}.setting-icon{width:32px;height:32px}
}
@media(min-width:1000px){
  .settings-page{padding:10px 18px 36px}.settings-head,.settings-group{max-width:820px;margin-left:auto;margin-right:auto}
  .sessions-body{width:100%;max-width:720px;margin:0 auto}
  .theme-choice-grid{max-width:680px}.themes-body{max-width:760px;width:100%;margin:0 auto}
}

/* ---- свёрнутый звонок: плавающее мини-окно справа ---- */
#callOverlay.call-on.call-min{inset:auto;top:calc(64px + env(safe-area-inset-top));right:10px;left:auto;bottom:auto;
  width:auto;padding:0;background:none;display:block;overflow:visible}
.call-mini{position:relative;width:148px;border-radius:16px;overflow:hidden;background:rgba(16,24,38,.94);
  box-shadow:0 8px 28px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.14);cursor:pointer;
  padding:10px;display:flex;flex-direction:column;align-items:center;gap:7px}
.call-mini-vid{width:128px;height:96px;object-fit:cover;border-radius:11px;background:#000}
.call-mini-vid.hide{display:none}
.call-mini-av .av{width:44px;height:44px;border-radius:50%}
.call-mini-meta{text-align:center;color:#fff;min-width:0;max-width:100%}
.call-mini-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-mini-sub{font-size:11px;opacity:.75}
.call-mini-hang{border:none;border-radius:50%;width:34px;height:34px;background:#e73b4e;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;flex:0 0 auto}
.call-minbtn{position:absolute;top:calc(10px + env(safe-area-inset-top));left:12px;z-index:6;border:none;border-radius:50%;
  width:38px;height:38px;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:19px;cursor:pointer;backdrop-filter:blur(6px)}
.call-minbtn:active{background:rgba(255,255,255,.28)}

/* ---- многострочный текст сообщений: сохраняем переносы строк и повторные пробелы ---- */
.b-text{white-space:pre-wrap;overflow-wrap:break-word}

/* ---- поиск внутри чата ---- */
.ics-bar{position:absolute;top:0;left:0;right:0;z-index:30;background:var(--header);border-bottom:1px solid var(--border);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-top))}
.ics-input-wrap{flex:1;display:flex;align-items:center;gap:7px;background:var(--input);border:1px solid var(--border);border-radius:18px;padding:7px 12px;min-width:0}
.ics-input-wrap svg{flex:0 0 auto;opacity:.6;font-size:16px}
.ics-input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:15px;min-width:0}
.ics-clear{background:none;border:none;color:var(--dim);font-size:15px;cursor:pointer;flex:0 0 auto;padding:0 2px}
.ics-count{flex:0 0 auto;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;min-width:14px;text-align:right}
.ics-close{flex:0 0 auto;background:none;border:none;color:var(--accent);font-weight:600;font-size:14px;cursor:pointer;padding:6px 4px}
.ics-results{flex-basis:100%;max-height:52vh;overflow-y:auto;margin-top:2px}
.ics-row{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:none;border:none;border-radius:10px;
  padding:9px 10px;cursor:pointer;color:var(--text)}
.ics-row:active,.ics-row:hover{background:var(--input)}
.ics-who{font-size:12.5px;font-weight:700;color:var(--accent)}
.ics-snip{font-size:13.5px;line-height:1.35;color:var(--text);word-break:break-word}
.ics-snip mark{background:rgba(255,210,0,.4);color:inherit;border-radius:3px;padding:0 1px}
.ics-time{font-size:11px;color:var(--dim)}
.ics-empty{padding:22px 12px;text-align:center;color:var(--dim);font-size:13.5px}

/* ---- бейджи непрочитанных: по типу (фильтры) и общий (нижняя вкладка) ---- */
.nav button .ic{position:relative}
.nav-badge{position:absolute;top:-4px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--accent);color:#fff;font-size:10px;font-weight:800;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--header)}
.fchip{position:relative}
.fchip-badge{display:inline-block;margin-left:6px;min-width:18px;padding:0 5px;height:18px;border-radius:9px;
  background:var(--accent);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center;vertical-align:middle}
.fchip.on .fchip-badge{background:#fff;color:var(--accent)}

/* ---- индикатор «слушает голосовое» на своём сообщении ---- */
.vm-heard{display:inline-block;margin-left:8px;font-size:11px;font-weight:600;color:var(--accent);opacity:.9;animation:vmHeardIn .25s ease}
.vm-heard-done{color:var(--dim);opacity:.7}
@keyframes vmHeardIn{from{opacity:0;transform:translateY(3px)}to{opacity:.9;transform:none}}

/* ---- единые SVG-иконки в интерфейсе (замена эмодзи): выравнивание и размеры ---- */
.sendbtn svg{width:21px;height:21px}
.sendbtn svg[stroke]{stroke-width:2.2}
.composer-emoji svg{width:23px;height:23px}
.opt .ic{display:flex;align-items:center;justify-content:center;color:inherit}
.opt .ic svg{width:22px;height:22px}
.opt.danger .ic{color:var(--danger)}
.ma-ic{display:inline-flex;align-items:center;justify-content:center}
.ma-ic svg{width:18px;height:18px}
.post-act .pa-ic{display:inline-flex;align-items:center;justify-content:center}
.post-act .pa-ic svg{width:19px;height:19px}
.editbar-ic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px}
.editbar-ic svg{width:19px;height:19px}
.vmini-close{display:flex;align-items:center;justify-content:center}
.vmini-close svg{width:16px;height:16px}
.vmini-play svg{width:16px;height:16px;vertical-align:middle}
.fy-hu-close svg{width:16px;height:16px}
.chip-ic{display:inline-flex;vertical-align:-3px;margin-right:4px}
.chip-ic svg{width:15px;height:15px}
.ms-cropbtn-ic,.ms-send-ic{display:inline-flex;vertical-align:-3px}
.ms-cropbtn-ic svg{width:17px;height:17px}
.ms-send-ic svg{width:16px;height:16px}
.kb-dismiss svg{width:18px;height:18px}
/* контейнеры-иконки, ранее сайзившие эмодзи шрифтом — гарантируем корректный SVG */
.setting-icon svg,.ic svg,.ma-ic svg,.pa-ic svg{stroke-width:2}

/* ---- надёжность тача в звонке (Android PWA): видео не должно перехватывать нажатия кнопок ---- */
#callOverlay video,#confOverlay video{pointer-events:none}
.call-controls{pointer-events:auto;position:relative;z-index:6}
.call-ctl,.call-fab,.call-mini-hang,.call-minbtn{pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,255,255,.18);border:none;cursor:pointer}
.call-filters{pointer-events:auto}
.call-local-vid{pointer-events:none}

/* ---- видео-плеер (телеграм-стиль) ---- */
.vplayer-overlay{position:fixed;inset:0;z-index:99000;background:#000;display:flex;flex-direction:column;
  user-select:none;-webkit-user-select:none;touch-action:none}
.vplayer-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}
.vplayer-video{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;background:#000}
.vplayer-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 22px;
  background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);
  opacity:0;transition:opacity .25s ease;pointer-events:none}
.vplayer-spacer{flex:1}
.vplayer-bar{position:absolute;bottom:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:10px;
  padding:20px 14px calc(env(safe-area-inset-bottom,0px) + 14px);
  background:linear-gradient(to top,rgba(0,0,0,.65),transparent);
  opacity:0;transition:opacity .25s ease;pointer-events:none}
.vplayer-overlay.vp-show .vplayer-top,.vplayer-overlay.vp-show .vplayer-bar{opacity:1;pointer-events:auto}
.vplayer-btn{width:40px;height:40px;flex:0 0 auto;border:none;background:none;color:#fff;display:flex;
  align-items:center;justify-content:center;cursor:pointer;border-radius:50%;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent}
.vplayer-btn:active{background:rgba(255,255,255,.16)}
.vplayer-btn svg{width:23px;height:23px}
.vplayer-pp svg{width:24px;height:24px}
.vplayer-time{color:#fff;font-size:12.5px;font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:34px;text-align:center;opacity:.92}
.vplayer-seek{flex:1;height:26px;position:relative;display:flex;align-items:center;cursor:pointer;touch-action:none}
.vplayer-seek::before{content:"";position:absolute;left:0;right:0;height:3px;border-radius:3px;background:rgba(255,255,255,.28)}
.vplayer-buf{position:absolute;left:0;height:3px;border-radius:3px;background:rgba(255,255,255,.4);width:0}
.vplayer-fill{position:absolute;left:0;height:3px;border-radius:3px;background:var(--accent);width:0}
.vplayer-knob{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.5);left:0}
.vplayer-bigplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:72px;height:72px;border-radius:50%;border:none;background:rgba(0,0,0,.42);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(2px)}
.vplayer-bigplay svg{width:34px;height:34px;margin-left:3px}
.vplayer-overlay.vp-playing .vplayer-bigplay{display:none}
.vplayer-spin{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;display:none}
.vplayer-spin.on{display:block}
.vplayer-spin span{display:block;width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.25);
  border-top-color:#fff;animation:vpSpin .8s linear infinite}
@keyframes vpSpin{to{transform:rotate(360deg)}}
/* сообщение об ошибке воспроизведения (напр. неподдерживаемый формат на iPhone) */
.vplayer-err{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:none;
  max-width:min(88%,420px);padding:14px 16px;border-radius:14px;background:rgba(0,0,0,.72);
  color:#fff;font-size:14px;line-height:1.45;text-align:center}
.vplayer-err.on{display:block}