/* ===== Светлая (по умолчанию) ===== */
:root{
  --bg:#f0f4fb;--panel:#ffffff;--input:#eaf0f9;--text:#16213c;--dim:#8995ad;
  --accent:#3b7cff;--accent2:#5b93ff;--on-accent:#ffffff;--out:#3b7cff;--out-text:#ffffff;
  --in:#ffffff;--in-text:#16213c;--border:#e4eaf4;--header:#ffffff;
  --shadow:0 2px 12px rgba(20,40,90,.07);--glow:none;
  --chat:radial-gradient(circle at 50% 0%, #f6f9fe, #eef3fb);
  --chip-on-bg:rgba(59,124,255,.10);
  --empty-img:url('/empty-light.png');
}
/* ===== Тёмная ===== */
[data-theme="dark"]{
  --bg:#0a0e16;--panel:#12161f;--input:#171c27;--text:#eaf0f8;--dim:#7e8aa0;
  --accent:#3b82f6;--accent2:#5b9bff;--on-accent:#ffffff;--out:#2f6fe0;--out-text:#ffffff;
  --in:#171c27;--in-text:#eaf0f8;--border:#1f2735;--header:#0a0e16;
  --shadow:0 2px 14px rgba(0,0,0,.45);--glow:none;
  --chat:linear-gradient(170deg,#0b1019,#080b12);
  --chip-on-bg:rgba(59,130,246,.16);
  --empty-img:url('/empty-dark.png');
}
/* ===== Киберпанк (флагман) ===== */
[data-theme="cyberpunk"]{
  --bg:#0a0612;--panel:#150b26;--input:#1d1133;--text:#f3e9ff;--dim:#a07fc8;
  --accent:#b14bff;--accent2:#22d3ee;--on-accent:#0a0612;--out:linear-gradient(135deg,#b14bff,#22d3ee);
  --out-text:#0a0612;--in:#1a0f2e;--in-text:#f3e9ff;--border:#3a1f5c;--header:#0c0716;
  --shadow:0 0 18px rgba(177,75,255,.22);--glow:0 0 14px rgba(177,75,255,.6);
  --chat:linear-gradient(170deg,#150a26,#0a0612);
  --chip-on-bg:rgba(177,75,255,.20);
  --empty-img:url('/empty-cyber.png');
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:#0b0d12;color:var(--text)}
#app{position:fixed;top:0;left:0;right:0;height:var(--app-h, 100%);display:flex;justify-content:center;background:#0b0d12}
.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{color:var(--accent);cursor:pointer}
.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}
.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}
.cell .preview{font-size:13.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.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{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)}
.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}
.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)}
.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)}}

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

/* Заголовок без жёсткой линии — мягче */
.hdr{border-bottom:1px solid var(--border)}
[data-theme="cyberpunk"] .hdr h1{text-shadow:var(--glow)}

/* Поиск в списке чатов */
.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(--accent);border-color:var(--accent);background:var(--chip-on-bg)}
[data-theme="cyberpunk"] .fchip.on{box-shadow:var(--glow)}

/* ===== Пустые состояния с иллюстрациями ===== */
.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}
[data-theme="cyberpunk"] .empty-title{text-shadow:var(--glow)}
.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)}
[data-theme="cyberpunk"] .empty-cta{background:var(--out);box-shadow:0 0 24px rgba(177,75,255,.5)}

/* Киберпанк: иллюстрация во весь экран (город уже в картинке) */
.empty.cyber{justify-content:flex-end;padding-bottom:54px;
  background-image:var(--empty-img);background-size:cover;background-position:center}
.empty.cyber .empty-illu{display:none}
.empty.cyber .empty-sub{color:#c9b3e8}

/* мелкое пустое состояние (фильтр/поиск ничего не нашёл) */
.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}
.install-btn:active{transform:scale(.98)}
.install-btn svg{color:var(--accent)}
[data-theme="cyberpunk"] .install-btn{box-shadow:var(--glow)}
.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;animation:bounce 1s ease infinite alternate}
@keyframes bounce{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.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:28px}
.update-btn{width:100%;background:#3b7cff;color:#fff;border:none;
  border-radius:14px;padding:16px;font-size:15px;font-weight:800;cursor:pointer;letter-spacing:.3px;
  box-shadow:0 8px 24px rgba(59,124,255,.45);animation:pulse-btn 1.8s ease infinite}
@keyframes pulse-btn{0%,100%{box-shadow:0 8px 24px rgba(59,124,255,.45)}50%{box-shadow:0 8px 36px rgba(59,124,255,.8)}}
.update-btn:active{transform:scale(.97)}

/* ===== Онлайн-точка ===== */
.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)}
[data-theme="cyberpunk"] .online-dot{background:#39ff14;box-shadow:0 0 6px #39ff14}

/* ===== Непрочитанные ===== */
.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}
.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)}

/* ===== Киберпанк — фон в чатах и контактах ===== */
[data-theme="cyberpunk"] .list.scroll {
  background: url('/cyber-bg.png') center center / cover no-repeat;
  position: relative;
}
/* затемняющий оверлей чтобы текст читался */
[data-theme="cyberpunk"] .list.scroll::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 5, 18, 0.72);
  pointer-events: none;
  z-index: 0;
}
[data-theme="cyberpunk"] .list.scroll > * {
  position: relative;
  z-index: 1;
}
/* ячейки чатов/контактов поверх фона — полупрозрачные */
[data-theme="cyberpunk"] .cell {
  background: rgba(21, 10, 28, 0.55);
  backdrop-filter: blur(6px);
}
[data-theme="cyberpunk"] .cell:active {
  background: rgba(177, 75, 255, 0.18);
}
[data-theme="cyberpunk"] .divider {
  background: rgba(177, 75, 255, 0.2);
}
/* пустой экран — фон на весь список */
[data-theme="cyberpunk"] .empty:not(.cyber) {
  background: url('/cyber-bg.png') center center / cover no-repeat;
}
[data-theme="cyberpunk"] .empty:not(.cyber)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 5, 18, 0.7);
  pointer-events: none;
}
[data-theme="cyberpunk"] .empty:not(.cyber) > * {
  position: relative;
  z-index: 1;
}

/* ===== Киберпанк — фон на всём экране (v2) ===== */
[data-theme="cyberpunk"] .frame {
  background-image: url('/cyber-bg.png');
  background-size: cover;
  background-position: center;
}
/* убираем старый фон со списка — теперь он прозрачный */
[data-theme="cyberpunk"] .list.scroll {
  background: transparent;
}
[data-theme="cyberpunk"] .list.scroll::before {
  display: none;
}
/* шапка, навигация — тёмные полупрозрачные */
[data-theme="cyberpunk"] .hdr,
[data-theme="cyberpunk"] .nav {
  background: rgba(10, 5, 18, 0.82) !important;
  backdrop-filter: blur(14px);
}
/* строка поиска и чипы */
[data-theme="cyberpunk"] .chatsearch,
[data-theme="cyberpunk"] .chips-row {
  background: rgba(10, 5, 18, 0.65) !important;
  backdrop-filter: blur(10px);
}
/* ячейки — стеклянные */
[data-theme="cyberpunk"] .cell {
  background: rgba(21, 10, 38, 0.52);
  backdrop-filter: blur(8px);
}
[data-theme="cyberpunk"] .cell:active {
  background: rgba(177, 75, 255, 0.22);
}

/* ===== Киберпанк — фон только в чатах и контактах (v3) ===== */
/* убираем фон с frame */
[data-theme="cyberpunk"] .frame { background-image: none; }

/* фон только на списках чатов и контактов */
[data-theme="cyberpunk"] .list.scroll.tab-chats,
[data-theme="cyberpunk"] .list.scroll.tab-contacts {
  background: url('/cyber-bg.png') center center / cover no-repeat !important;
  position: relative;
}
/* затемнение ~50% */
[data-theme="cyberpunk"] .list.scroll.tab-chats::before,
[data-theme="cyberpunk"] .list.scroll.tab-contacts::before {
  display: block !important;
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 5, 18, 0.50);
  pointer-events: none;
  z-index: 0;
}
[data-theme="cyberpunk"] .list.scroll.tab-chats > *,
[data-theme="cyberpunk"] .list.scroll.tab-contacts > * {
  position: relative;
  z-index: 1;
}

/* ячейки — 50% прозрачнее (было 0.52, теперь 0.26) */
[data-theme="cyberpunk"] .cell {
  background: rgba(21, 10, 38, 0.26) !important;
  backdrop-filter: blur(6px);
}
[data-theme="cyberpunk"] .cell:active {
  background: rgba(177, 75, 255, 0.22) !important;
}

/* профиль — обычный тёмный фон без картинки */
[data-theme="cyberpunk"] .list.scroll:not(.tab-chats):not(.tab-contacts) {
  background: var(--bg) !important;
}
[data-theme="cyberpunk"] .list.scroll:not(.tab-chats):not(.tab-contacts)::before {
  display: none !important;
}

/* ===== Изображения: квадратный превью, оригинал в лайтбоксе ===== */
.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;
}
/* лайтбокс — оригинальные пропорции */
.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="cyberpunk"] .fy-hu {
  box-shadow: 0 0 30px rgba(177,75,255,.4), 0 8px 40px rgba(0,0,0,.5);
  border-color: rgba(177,75,255,.4);
}
[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)}
[data-theme="cyberpunk"] .rec-waves span{background:var(--accent2)}

/* ===== Видеозапись — оверлей ===== */
.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}
.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}

/* ===== Видеокружок ===== */
.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}
[data-theme="cyberpunk"] .vcircle{box-shadow:0 0 20px rgba(177,75,255,.5)}

/* ===== Видеокружок — убрать синий пузырь ===== */
.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);
}
[data-theme="cyberpunk"] .vcircle {
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(177,75,255,.55);
}

/* ===== Редактирование, удаление, статусы, пины, автоудаление ===== */
.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}

@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}