:root{
  --bg:#0B0F1A; --panel:#121826; --card:#1A2233; --card2:#232E46;
  --ink:#EEF2F8; --muted:#8A94A8; --line:#232C40;
  --purple:#7C5CFF; --pink:#FF5FA2; --blue:#4FC3F7; --green:#3DDC97;
  --danger:#FF5D5D;
  /* акцент интерфейса: по умолчанию фиолетово-розово-голубой; для мужчин — фиолетово-сине-зелёный (body.accent-blue) */
  --accent-grad:linear-gradient(135deg,#7C5CFF 0%,#FF5FA2 60%,#4FC3F7 100%);
  --accent-solid:#FF5FA2;
  --accent-soft:rgba(255,95,162,.16);
  /* стеклянный язык: входящие (in), исходящие (out), навигация (nav) */
  --glass-blur:blur(14px);
  --in-bg:rgba(255,255,255,.11);
  --in-border:rgba(255,255,255,.24);
  --in-shadow:0 0 18px rgba(0,229,255,.12), inset 0 1px 0 rgba(255,255,255,.20);
  --in-ink:#EEF2F8;
  --out-bg:linear-gradient(135deg,rgba(124,92,255,.78) 0%,rgba(255,95,162,.78) 60%,rgba(79,195,247,.78) 100%);
  --out-border:rgba(255,255,255,.22);
  --out-shadow:0 0 16px rgba(255,95,162,.16), inset 0 1px 0 rgba(255,255,255,.26);
  --out-ink:#fff;
  --nav-bg:linear-gradient(135deg,rgba(124,92,255,.78) 0%,rgba(255,95,162,.78) 60%,rgba(79,195,247,.78) 100%);
  --nav-border:rgba(255,255,255,.22);
  --nav-shadow:0 0 16px rgba(255,95,162,.16), inset 0 1px 0 rgba(255,255,255,.26);
  --nav-ink:#fff;
  --grad:linear-gradient(135deg,#7C5CFF 0%,#FF5FA2 60%,#4FC3F7 100%);
  --grad2:linear-gradient(135deg,#FF9A5A 0%,#FF5FA2 100%);
  --grad3:linear-gradient(135deg,#4FC3F7 0%,#7C5CFF 100%);
  --grad4:linear-gradient(135deg,#3DDC97 0%,#4FC3F7 100%);
  --line-soft:rgba(35,44,64,.5);
  --overlay:rgba(0,0,0,.6);
  --shadow-menu:0 10px 30px rgba(0,0,0,.5);
  --shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --call-bg:rgba(5,7,13,.92);
  --shadow:0 24px 70px rgba(0,0,0,.6);
  --authbg:radial-gradient(1200px 600px at 70% -10%,#2A1E4E 0%,#0B0F1A 60%);
}
/* Светлая тема */
/* Accent theme: blue (male) */
body.accent-blue{
  --accent-grad:linear-gradient(135deg,#7C5CFF 0%,#2A6BFF 55%,#3DDC97 100%);
  --accent-solid:#2A6BFF;
  --accent-soft:rgba(42,107,255,.18);
  --in-bg:linear-gradient(135deg,rgba(124,92,255,.78) 0%,rgba(255,95,162,.78) 60%,rgba(79,195,247,.78) 100%);
  --in-border:rgba(255,255,255,.22);
  --in-shadow:0 0 16px rgba(255,95,162,.16), inset 0 1px 0 rgba(255,255,255,.26);
  --in-ink:#fff;
  --out-bg:rgba(26,34,51,.86);
  --out-border:rgba(255,255,255,.16);
  --out-shadow:0 0 18px rgba(0,229,255,.10), inset 0 1px 0 rgba(255,255,255,.10);
  --out-ink:#EEF2F8;
  --nav-bg:rgba(255,255,255,.11);
  --nav-border:rgba(255,255,255,.24);
  --nav-shadow:0 0 18px rgba(0,229,255,.12), inset 0 1px 0 rgba(255,255,255,.20);
  --nav-ink:#EEF2F8;
}
body.light{
  --bg:#FBFBFD; --panel:#FBFBFD; --card:#F2F4F8; --card2:#E9ECF2;
  --ink:#1B2333; --muted:#5F6B7F; --line:#E6E9F0;
  --purple:#6A4DFF; --pink:#FF5FA2; --blue:#2E9BDB; --green:#22B573;
  --danger:#E5484D;
  --line-soft:var(--line);
  --overlay:rgba(28,38,58,.28);
  --shadow-menu:0 10px 30px rgba(30,40,80,.14);
  --shadow-sm:0 2px 8px rgba(30,40,80,.12);
  --call-bg:rgba(251,251,253,.96);
  --shadow:0 18px 50px rgba(30,40,80,.12);
  --authbg:radial-gradient(1200px 600px at 70% -10%,#E6DEFF 0%,#FBFBFD 60%);
  --in-bg:rgba(255,255,255,.80);
  --in-border:rgba(20,30,60,.09);
  --in-shadow:0 4px 14px rgba(30,40,80,.07), inset 0 1px 0 rgba(255,255,255,.95);
  --in-ink:#1B2333;
  --out-bg:linear-gradient(135deg,rgba(124,92,255,.86) 0%,rgba(255,95,162,.86) 60%,rgba(79,195,247,.86) 100%);
  --out-border:rgba(255,255,255,.30);
  --out-shadow:0 6px 18px rgba(255,95,162,.18), inset 0 1px 0 rgba(255,255,255,.35);
  --out-ink:#fff;
  --nav-bg:linear-gradient(135deg,rgba(124,92,255,.86) 0%,rgba(255,95,162,.86) 60%,rgba(79,195,247,.86) 100%);
  --nav-border:rgba(255,255,255,.30);
  --nav-shadow:0 6px 18px rgba(255,95,162,.18), inset 0 1px 0 rgba(255,255,255,.35);
  --nav-ink:#fff;
}
body.light.accent-blue{
  --in-bg:linear-gradient(135deg,rgba(124,92,255,.86) 0%,rgba(255,95,162,.86) 60%,rgba(79,195,247,.86) 100%);
  --in-border:rgba(255,255,255,.30);
  --in-shadow:0 6px 18px rgba(255,95,162,.18), inset 0 1px 0 rgba(255,255,255,.35);
  --in-ink:#fff;
  --out-bg:rgba(15,22,38,.88);
  --out-border:rgba(255,255,255,.18);
  --out-shadow:0 6px 18px rgba(15,22,38,.22), inset 0 1px 0 rgba(255,255,255,.12);
  --out-ink:#EEF2F8;
  --nav-bg:rgba(255,255,255,.80);
  --nav-border:rgba(20,30,60,.09);
  --nav-shadow:0 4px 14px rgba(30,40,80,.07), inset 0 1px 0 rgba(255,255,255,.95);
  --nav-ink:#1B2333;
}
body.light .auth{background:var(--authbg)}
body.light .call-card{color:var(--ink)}
body.light .call-btn{color:var(--ink)}
body.light .call-btn.hangup{color:#fff}

body.light .typebar{background:transparent}
body.light.accent-blue .typebar-field .voice-btn .btn-ico[src$=".svg"]{filter:brightness(0)}
body.light .msg-menu button{color:var(--ink)}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  overflow:hidden;
}
.hidden{display:none !important}
#app{height:100%;display:flex;flex-direction:column}
.screen-full{position:fixed;inset:0;z-index:100}

/* ===== Экран входа ===== */
.auth{display:flex;align-items:center;justify-content:center;background:var(--authbg);padding:20px}
.auth-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:28px 24px;box-shadow:var(--shadow);position:relative}
.auth-logo{width:64px;height:64px;margin:0 auto 12px;border-radius:20px;box-shadow:0 10px 30px rgba(255,95,162,.4)}
.auth h1{text-align:center;font-size:30px;font-weight:800;letter-spacing:.5px}
.auth-sub{text-align:center;color:var(--muted);font-size:13.5px;margin:6px 0 18px}
.auth-tabs{display:flex;background:var(--card);border-radius:12px;padding:4px;margin-bottom:16px}
.auth-tab{flex:1;padding:9px;border:none;background:transparent;color:var(--muted);font-weight:700;font-size:14px;border-radius:9px;cursor:pointer;font-family:inherit}
.auth-tab.active{background:var(--grad);color:#fff}
.field{display:block;margin-bottom:12px}
.field span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:600}
.field-label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:600}
.status-field{width:100%}
.status-input-row{display:flex;align-items:center;gap:8px;position:relative}
.status-input-row input{flex:1}
.status-emoji-btn{width:36px;height:36px;border:none;border-radius:10px;background:var(--card);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.status-emoji-btn:hover{background:var(--card2);color:var(--ink)}
.status-emoji-panel{position:absolute;z-index:320;top:calc(100% + 6px);left:0;right:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-menu);padding:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.status-emoji-panel button{font-size:20px;background:var(--card);border:none;border-radius:8px;padding:6px 2px;cursor:pointer}
.status-emoji-panel button:active{background:var(--card2)}
.field input{
  width:100%;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  color:var(--ink);font-size:15px;font-family:inherit;outline:none;
}
.field input:focus{border-color:var(--purple)}
.btn-primary{
  width:100%;padding:13px;border:none;border-radius:12px;background:var(--grad);color:#fff;
  font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;margin-top:6px;
}
.btn-primary:active{opacity:.85}
.btn-secondary{width:100%;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
.btn-danger{width:100%;padding:11px;border:1px solid rgba(255,93,93,.4);border-radius:12px;background:transparent;color:var(--danger);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
.auth-error{color:var(--danger);font-size:13px;text-align:center;margin-top:10px;min-height:18px}
.auth-hint{text-align:center;color:var(--muted);font-size:11.5px;margin-top:14px}
.auth-step form{position:relative}
.auth-links{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:13.5px}
.auth-links a{color:var(--blue);text-decoration:none;cursor:pointer}
.auth-links a:hover{text-decoration:underline}
/* Подсказка к паролю на экране входа (как в Windows) */
.login-hint{background:var(--card);border-left:3px solid var(--blue);border-radius:8px;padding:8px 10px;font-size:12.5px;color:var(--muted);margin-top:4px}
/* Индикатор сложности пароля */
.pass-hint{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.35}
.pass-hint.pass-warn{color:var(--danger)}
.pass-hint.pass-ok{color:var(--green)}
.hint-toggle-row{padding:6px 0}
.auth-hint a{color:var(--purple);text-decoration:none}
.auth-step{display:block}
.auth-step.hidden{display:none}

/* ===== Главные экраны ===== */
#main-screen{flex:1;display:flex;flex-direction:row;position:relative;height:100vh}
.view{position:relative;display:flex;flex-direction:column;background:var(--bg);height:100%}
.nav-rail{
  width:64px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  background:var(--panel);border-right:1px solid var(--line);padding:10px 0;z-index:2;
}
.rail-top,.rail-bottom{display:flex;flex-direction:column;gap:6px;align-items:center}
.rail-top{gap:10px}
.rail-avatar-btn{
  width:44px;height:44px;border:none;border-radius:50%;overflow:hidden;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--grad);
  color:#fff;position:relative;
}
.rail-avatar-btn:hover{opacity:.9}
.rail-avatar-initials{font-size:15px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.rail-avatar-img{width:100%;height:100%;object-fit:cover;display:none}
.rail-btn{
  width:44px;height:44px;border:none;border-radius:50%;background:transparent;color:var(--muted);
  font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;
}
.rail-btn:hover{background:var(--card)}
.rail-btn.active{background:var(--nav-bg);border:1px solid var(--nav-border);backdrop-filter:var(--glass-blur);color:#fff;box-shadow:var(--nav-shadow)}
/* Иконки rail-кнопок: серые 22px, при активной кнопке — белые */
.rail-btn .rail-ico{width:22px;height:22px;color:#6b7280;pointer-events:none}
.rail-btn.active .rail-ico{color:#fff;filter:brightness(0) invert(1)}
body.light.accent-blue .rail-btn.active .rail-ico{filter:brightness(0)}
.rail-fab{
  position:absolute;bottom:18px;right:18px;width:48px;height:48px;border:none;border-radius:50%;
  background:var(--grad);color:#fff;font-size:24px;cursor:pointer;box-shadow:0 8px 22px rgba(124,92,255,.45);z-index:3;
}
#view-chats{flex:0 0 320px;border-right:1px solid var(--line)}
#view-contacts,#view-calls,#view-profile{flex:0 0 320px;border-right:1px solid var(--line)}
#view-chat{flex:1;min-width:0}
.app-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 8px;background:var(--panel);
}
.header-left{display:flex;align-items:center;gap:10px}
.brand{font-size:20px;font-weight:800}
/* Заголовок строго по центру (не зависит от кнопки «Назад» слева) */
.brand-center{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none}
.app-header{position:relative}
.header-right{display:flex;gap:4px}
.icon-btn{
  background:none;border:none;color:var(--muted);font-size:19px;cursor:pointer;
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:inherit;
}
.icon-btn:active{background:var(--card)}
.avatar{
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;flex-shrink:0;background:var(--grad);
}
.avatar.sm{width:38px;height:38px;font-size:15px}
.avatar.xl{width:88px;height:88px;font-size:34px}
.chats-panel-title{
  padding:6px 16px 4px;font-size:12px;font-weight:800;letter-spacing:1.5px;
  color:var(--muted);text-transform:uppercase;
}
.searchbar{padding:6px 14px 10px;background:var(--panel)}
.searchbar input{
  width:100%;padding:10px 14px;background:var(--card);border:none;border-radius:12px;
  color:var(--ink);font-size:14px;font-family:inherit;outline:none;
}
.searchbar input::placeholder{color:var(--muted)}

.chats-list{flex:1;overflow-y:auto;padding-bottom:8px}
/* Глобально прячем системные скроллбары — вместо них везде кастомные */
.chats-list, .modal-list, .user-card, .profile-wrap, .settings-panel-content, .sticker-panel, .blocked-users-list,
#blocked-users-list, #sessions-list{
  scrollbar-width:none;position:relative;
}
.chats-list::-webkit-scrollbar, .modal-list::-webkit-scrollbar, .user-card::-webkit-scrollbar,
.profile-wrap::-webkit-scrollbar, .settings-panel-content::-webkit-scrollbar, .sticker-panel::-webkit-scrollbar,
#blocked-users-list::-webkit-scrollbar, #sessions-list::-webkit-scrollbar{width:0;height:0;display:none}
/* Кастомный скроллбар для списков (контакты и др.) — в стиле ленты сообщений */
.cs-wrap{flex:1;min-height:0;position:relative;display:flex}
.cs-wrap-auto{flex:0 1 auto}
.cs-wrap > .chats-list{scrollbar-width:none;width:100%}
.cs-wrap > .chats-list::-webkit-scrollbar{width:0;height:0;display:none}
.cs-scrollbar{position:absolute;right:2px;top:0;width:8px;height:100%;pointer-events:auto;z-index:5;display:none;cursor:pointer}
.cs-scrollbar .cs-scrollbar-thumb{position:absolute;right:0;top:0;width:8px;border-radius:4px;background:var(--line);opacity:0;transition:opacity .3s}
.cs-scrollbar.show-cs-scroll .cs-scrollbar-thumb{opacity:1}
.cs-scrollbar.has-cs-scroll{display:block}
.chat-item{
  display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;
  border-bottom:1px solid var(--line-soft);
}
.chat-item:active{background:var(--panel)}
.chat-avatar{width:52px;height:52px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;position:relative}
.chat-avatar .dot{position:absolute;bottom:0;right:0;width:14px;height:14px;border-radius:50%;border:2.5px solid var(--bg)}
.chat-mid{flex:1;min-width:0}
.row1{display:flex;justify-content:space-between;align-items:center}
.chat-name{font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-time{font-size:12px;color:var(--muted)}
.row2{display:flex;justify-content:space-between;align-items:center;margin-top:3px}
.chat-msg{color:var(--muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.chat-msg.typing{color:var(--blue);font-style:italic}
.chat-msg .you{color:var(--blue)}
.chat-unread{background:var(--grad);color:#fff;font-size:11.5px;font-weight:800;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.chat-del{background:transparent;border:none;color:var(--muted);font-size:15px;cursor:pointer;padding:6px;border-radius:6px;flex-shrink:0;opacity:0;transition:opacity .15s ease}
.chat-item:hover .chat-del{opacity:1}
.chat-del:hover{background:var(--panel);color:#e74c3c}
.chat-del:hover .chat-del-ico{color:#e74c3c;filter:brightness(0) saturate(100%) invert(28%) sepia(62%) saturate(4882%) hue-rotate(345deg) brightness(89%) contrast(100%)}
/* Кнопка «⋮» действий с чатом */
.chat-menu-btn{background:transparent;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:6px 8px;border-radius:6px;flex-shrink:0;opacity:0;transition:opacity .15s ease;line-height:1;display:flex;align-items:center;justify-content:center}
.chat-menu-btn .fi{width:18px;height:18px;color:var(--muted)}
.chat-item:hover .chat-menu-btn{opacity:1}
.chat-menu-btn:hover{background:var(--panel);color:var(--ink)}
/* Выпадающее меню действий с чатом */
.chat-menu{
  position:fixed;z-index:400;min-width:210px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-menu);overflow:hidden;padding:6px;
}
.chat-menu-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;background:none;border:none;
  color:var(--ink);font-size:14px;cursor:pointer;text-align:left;font-family:inherit;border-radius:8px;
}
.chat-menu-item:hover{background:var(--card)}
.chat-menu-item.danger{color:#e74c3c}
/* Заголовок секции в списке чатов */
.section-label{padding:12px 16px 6px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
/* Заблокированные чаты в общем списке и пользователи в разделе безопасности */
.blocked-chat-item .chat-name{color:var(--muted);text-decoration:line-through}
.chat-unblock-user-btn{flex-shrink:0;padding:6px 12px;border:none;border-radius:14px;background:var(--card);color:var(--blue);font-size:12px;font-weight:600;cursor:pointer;margin-right:8px}
.chat-unblock-user-btn:hover{background:var(--panel)}
/* ===== Удалённые чаты в списке ===== */
.chat-item-restore{position:relative;background:rgba(255,80,80,.06)}
.chat-item-restore:hover .del-actions{opacity:1;pointer-events:auto}
.del-progress{height:4px;border-radius:2px;background:var(--panel);overflow:hidden;margin-top:6px;display:flex;justify-content:flex-end}
.del-bar{height:100%;background:var(--blue);transition:width 1s linear;width:100%}
.del-actions{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;gap:6px;opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:2}
.del-act{width:34px;height:34px;border-radius:50%;border:none;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--card2);color:var(--ink);box-shadow:var(--shadow-sm)}
.del-act:hover{background:var(--panel)}
.del-ico:hover{color:#e74c3c}
.del-ico-img{width:16px;height:16px;color:inherit;pointer-events:none;display:block}
.del-ico:hover .del-ico-img{color:#e74c3c;filter:brightness(0) saturate(100%) invert(28%) sepia(62%) saturate(4882%) hue-rotate(345deg) brightness(89%) contrast(100%)}
.restore-ico:hover{color:var(--blue)}
@media (hover:none) and (pointer:coarse){
  .del-actions{opacity:1;pointer-events:auto;position:static;transform:none;margin-top:8px}
  .chat-item-restore{flex-wrap:wrap}
}
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:8px;text-align:center;padding:20px}
.empty-state .empty-emoji{font-size:52px}
.empty-state .empty-sub{font-size:13px}
.empty-emoji .empty-svg{width:52px;height:52px;color:var(--muted);display:block}

.tabbar{
  display:flex;justify-content:space-around;align-items:center;padding:8px 10px 14px;
  background:var(--panel);border-top:1px solid var(--line);
}
.tab{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:10.5px;font-weight:600;cursor:pointer;font-family:inherit;padding:8px 12px;border-radius:999px}
.tab span{font-size:19px;line-height:1}
.tab.active{color:var(--nav-ink);background:var(--nav-bg);border:1px solid var(--nav-border);backdrop-filter:var(--glass-blur)}

/* ===== Чат ===== */
.chat-empty{
  position:absolute;inset:0;z-index:1;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--muted);text-align:center;padding:20px;
}
.chat-empty .empty-emoji{font-size:52px}
.chat-empty .empty-sub{font-size:13px}
.chat-loading-hint{
  display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--muted);font-size:13px;min-height:80px;
}
.chat-header{display:flex;align-items:center;gap:8px;padding:9px 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.chat-info-wrap{position:relative}
.chat-info-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:310;min-width:210px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-menu);overflow:hidden;padding:6px;
}
.chat-info-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:none;
  color:var(--ink);font-size:14px;cursor:pointer;text-align:left;font-family:inherit;border-radius:8px;
}
.chat-info-item:hover{background:var(--card)}
.fi{width:18px;height:18px;flex-shrink:0;color:var(--muted);display:inline-block;vertical-align:text-bottom}
.header-ico-svg{width:20px;height:20px;color:var(--muted)}
.chat-state-ico{width:14px;height:14px;color:var(--muted);vertical-align:-2px;margin-left:5px}
.chat-head-mid{flex:1;min-width:0}
.chat-head-name{font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head-status{font-size:12px;color:var(--muted)}
/* Обёртка ленты сообщений: скроллер + полоса снаружи (полоса не скроллится вместе с текстом) */
.msgs-wrap{flex:1;min-height:0;position:relative;display:flex}
.msgs-wrap .messages{flex:1;min-width:0;height:100%}
.messages{flex:1;overflow-y:auto;padding:12px 14px 8px;width:100%;scrollbar-width:none;position:relative}
.messages::-webkit-scrollbar{width:0;height:0;display:none}
.custom-scrollbar{
  position:absolute;right:2px;top:0;width:8px;height:100%;
  pointer-events:auto;z-index:5;cursor:pointer;
}
.custom-scrollbar .custom-scrollbar-thumb{
  position:absolute;right:0;width:8px;border-radius:4px;
  background:var(--line);opacity:0;transition:opacity .3s;
}
.custom-scrollbar.show-scroll .custom-scrollbar-thumb{opacity:1}
.custom-scrollbar:not(.has-scroll) .custom-scrollbar-thumb{display:none}
.messages-inner{display:flex;flex-direction:column;max-width:67%;margin:0 auto;padding:0 4px}
.date-chip{align-self:center;background:var(--card);color:var(--muted);font-size:11.5px;font-weight:600;padding:4px 12px;border-radius:10px;margin:4px 0 12px}
.bubble{
  max-width:78%;padding:8px 12px;border-radius:16px;font-size:14.5px;line-height:1.35;
  margin-bottom:8px;position:relative;word-wrap:break-word;
}
.bubble.in{
  background:var(--in-bg);border:1px solid var(--in-border);backdrop-filter:var(--glass-blur);
  color:var(--in-ink);box-shadow:var(--in-shadow);
  align-self:flex-start;border-bottom-left-radius:6px;
}
.bubble.out{
  background:var(--out-bg);border:1px solid var(--out-border);backdrop-filter:var(--glass-blur);
  color:var(--out-ink);box-shadow:var(--out-shadow);
  align-self:flex-end;border-bottom-right-radius:6px;
}
/* Пока играет голосовое, canvas-перерисовка волны дергает backdrop-filter
   соседних пузырей (стекло пересобирается). Отключаем блюр на время —
   фон остаётся полупрозрачным, но цвет пузырей не меняется. */
.msgs-wrap.voice-playing .bubble{backdrop-filter:none}
.bubble.emoji-big{font-size:40px;padding:6px 10px;line-height:1.2}
.bubble.emoji-big .t{font-size:10.5px;display:block;opacity:.75;text-align:right;margin-top:2px}
/* Разделитель непрочитанных сообщений */
.unread-divider{
  display:flex;align-items:center;gap:10px;color:var(--blue);font-size:11.5px;font-weight:700;
  margin:10px 0;text-transform:uppercase;letter-spacing:.5px;text-align:center;
  overflow:hidden;max-height:40px;opacity:1;transition:opacity .4s ease, max-height .4s ease, margin .4s ease;
}
.unread-divider::before,.unread-divider::after{
  content:"";flex:1;height:1px;background:var(--blue);opacity:.4;
}
.messages:not(.has-unread-boundary) .unread-divider{display:none}
.bubble.deleted{background:transparent;border:1px dashed var(--line);color:var(--muted);font-style:italic}
.bubble.deleted .t{opacity:.6}
.bubble .t{display:block;font-size:10.5px;opacity:.75;text-align:right;margin-top:4px}
/* Галочки статуса доставки/прочтения (только личные чаты, свои сообщения) */
.ticks{display:inline-block;margin-right:4px;color:var(--muted);font-size:10px;letter-spacing:-1px;font-weight:700}
/* Слова-статусы: мелкий шрифт (не больше времени), цветная индикация на градиенте.
   Статус выводится под временем (отдельная строка). */
.msg-status{display:block;text-align:right;margin-bottom:1px}
.ticks.status-word{display:inline-block;letter-spacing:normal;font-size:9.5px;font-weight:600;vertical-align:middle;margin-right:0;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.bubble.out .ticks.status-word{color:#4FC3F7;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.bubble.out .ticks.status-word.sent{color:#FFC107;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.bubble.out .ticks.status-word.done{color:#4FC3F7;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.bubble.out .ticks.status-word.read{color:#3DDC97;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.ticks.read{color:var(--accent-solid)}
.ticks.sent{color:var(--muted)}
.bubble .react{
  position:absolute;bottom:-11px;right:10px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:1px 7px;font-size:12px;cursor:pointer;
}
.bubble .react.big{font-size:15px;padding:3px 8px;bottom:-14px}
.bubble.mine{position:relative}
.bubble .msg-chev{
  position:absolute;top:-6px;right:-4px;width:20px;height:20px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:11px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s;
}
.bubble.mine:hover .msg-chev,.bubble.mine .msg-chev:hover{opacity:1}
.msg-menu{
  position:fixed;z-index:400;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-menu);overflow:hidden;min-width:170px;
}
.msg-menu button{
  display:flex;align-items:center;gap:8px;width:100%;padding:11px 14px;background:none;border:none;
  color:var(--ink);font-size:14px;text-align:left;cursor:pointer;font-family:inherit;
}
/* Иконка корзины в меню сообщения */
.msg-menu-ico{width:16px;height:16px;color:#6b7280;pointer-events:none;flex-shrink:0}
.msg-menu button:hover{background:var(--card)}
/* Инфо-строка статуса в меню сообщения («Прочитано в …» и т.п.) */
.msg-menu-info{padding:8px 14px;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
/* Стек мини-аватарок прочитавших (группы) */
.readers-stack{display:inline-flex;align-items:center;gap:0;margin-top:4px;margin-left:auto;cursor:pointer}
.rd-av{width:14px;height:14px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:7px;font-weight:800;border:1.5px solid var(--panel);margin-left:-4px;flex-shrink:0}
.rd-av:first-child{margin-left:0}
.rd-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.rd-more{font-size:9.5px;color:var(--muted);margin-left:3px;font-weight:700}
/* Поповер «Прочитали» (группы) */
.readers-pop{position:fixed;z-index:460;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-menu);min-width:180px;max-width:260px;padding:6px;max-height:240px;overflow-y:auto}
.readers-pop-title{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;padding:6px 8px 4px;letter-spacing:.4px}
.readers-pop-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;font-size:13px;color:var(--ink)}
.readers-pop-row .rd-time{font-size:11px;color:var(--muted);white-space:nowrap}
/* Спиннер статуса отправки (пока сообщение летит на сервер) */
.ticks-pending{display:inline-block;width:10px;height:10px;margin-right:4px;border:1.5px solid rgba(255,255,255,.5);border-top-color:transparent;border-radius:50%;animation:ticks-spin .8s linear infinite;vertical-align:-1px}
@keyframes ticks-spin{to{transform:rotate(360deg)}}
/* Иконка корзины на кнопке удаления чата в списке */
.chat-del-ico{width:16px;height:16px;color:inherit;pointer-events:none;display:block}
.msg-sticker{align-self:flex-start;font-size:64px;margin-bottom:10px;cursor:pointer}
.msg-sticker.self{align-self:flex-end}
.voice-msg{display:flex;align-items:center;gap:10px;min-width:200px;padding:4px 2px}
.voice-btn{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);border:none;color:inherit;font-size:13px;cursor:pointer}
.voice-wave-wrap{position:relative;flex:1;min-width:120px}
.voice-wave{display:block;width:100%;height:36px}
/* Пунктирная линия непрослушанного голосового (картинка 1) */
.voice-line{
  display:block;width:100%;height:36px;cursor:pointer;
  background-image:radial-gradient(circle at 2px 18px, var(--muted) 1.6px, transparent 1.7px);
  background-size:9px 36px;background-position:0 0;background-repeat:repeat-x;
  opacity:.75;
}
.voice-msg.voice-played .voice-line{display:none}
.voice-msg .voice-wave{display:none}
.voice-msg.voice-played .voice-wave{display:block}
/* Точки «прослушано» (картинка 2): три точки справа от длительности */
.voice-played-dots{display:none;width:22px;height:36px;cursor:default}
.voice-msg.voice-played .voice-played-dots{display:inline-flex;align-items:center;justify-content:space-between}
.voice-played-dots::before,.voice-played-dots::after,.voice-played-dots em{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--accent-solid,#4a9eff)
}
.voice-msg.voice-played .voice-played-dots::before,
.voice-msg.voice-played .voice-played-dots::after{content:''}
.wave{display:flex;align-items:flex-end;gap:2px;height:18px;flex:1}
.wave i{display:block;width:3px;border-radius:2px;background:currentColor}
.photo-msg img{max-width:100%;border-radius:12px;display:block}

.typebar{display:flex;align-items:center;gap:8px;padding:9px 10px 12px;background:transparent}
/* Плашка вместо поля ввода у заблокированного чата */
.blocked-placeholder{
  text-align:center;padding:12px 16px;color:var(--muted);font-size:13px;
  background:transparent;border-top:1px solid var(--line);user-select:none;
}
/* Единая рамка: иконки слева + поле по центру + иконки справа */
.typebar-field{
  flex:1;display:flex;align-items:center;gap:2px;
  background:var(--card);border:1px solid var(--line);border-radius:24px;
  padding:3px 6px;min-width:0;max-width:67%;margin:0 auto;position:relative;
}
.input-wrap{flex:1;display:flex;align-items:center;position:relative;min-width:0}
.input-wrap textarea{
  flex:1;background:transparent;color:var(--ink);
  border:none;font-size:14.5px;font-family:inherit;outline:none;
  padding:6px 6px;min-width:0;resize:none;overflow-y:scroll;scrollbar-width:none;
  line-height:1.35;white-space:pre-wrap;word-wrap:break-word;max-height:120px;
  vertical-align:top;box-sizing:border-box;
}
.input-wrap textarea::placeholder{line-height:1.35;vertical-align:top}
.input-wrap textarea::-webkit-scrollbar{width:0;height:0;display:none}
/* Мини-панель «Редактирование сообщения» над полем ввода */
.edit-mode-bar{
  position:absolute;left:6px;right:6px;top:-26px;
  display:flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:4px 8px;font-size:12px;color:var(--muted);z-index:5;
  box-shadow:var(--shadow-sm);
}
.edit-mode-bar:not(.hidden){display:flex}
.edit-mode-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edit-mode-btn{width:24px;height:24px;border-radius:50%;border:none;background:transparent;color:var(--muted);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.edit-mode-btn:hover{background:var(--card)}
.edit-mode-ico{width:14px;height:14px;color:#6b7280;pointer-events:none}
.input-wrap .input-scrollbar{position:absolute;right:0;top:4px;bottom:4px;width:8px;pointer-events:auto;cursor:pointer}
/* Спектрометр записи голосового: волна на всю ширину строки ввода */
.rec-spectrum{position:absolute;left:44px;top:50%;transform:translateY(-50%);width:calc(100% - 88px);height:36px;pointer-events:none;opacity:0;transition:opacity .15s ease}
.typebar-field.recording .rec-spectrum{opacity:1}
.rec-spectrum.hidden{display:none}
.input-wrap .input-scrollbar-thumb{
  position:absolute;right:0;width:8px;border-radius:4px;background:var(--line);
  opacity:0;transition:opacity .3s;top:0;
}
.input-wrap.show-input-scroll .input-scrollbar-thumb{opacity:1}
.input-wrap:not(.has-input-scroll) .input-scrollbar-thumb{display:none}
.typebar-field .type-btn{
  width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--ink);
  font-size:16px;cursor:pointer;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  position:relative;transition:background .15s;
}
/* Микрофон внутри поля — кружок как у кнопки отправки */
.typebar-field .voice-btn{
  width:34px;height:34px;background:var(--nav-bg);color:var(--nav-ink);
  border:1px solid var(--nav-border);backdrop-filter:var(--glass-blur);
  box-shadow:var(--nav-shadow);
}
.typebar-field .voice-btn .btn-ico{filter:none}
.typebar-field .voice-btn .btn-ico[src$=".svg"]{color:#fff;filter:brightness(0) invert(1)}
.typebar-field .voice-btn.send-mode{background:var(--nav-bg);border:1px solid var(--nav-border);box-shadow:var(--nav-shadow)}
.typebar-field .voice-btn.send-mode .btn-ico{display:none}
.typebar-field .voice-btn.send-mode::after{
  content:"➤";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--nav-ink);
}
/* Круговая подсветка при наведении на любую иконку */
.typebar-field .type-btn::before{
  content:"";position:absolute;inset:1px;border-radius:50%;
  background:var(--purple);opacity:0;transform:scale(.5);transition:opacity .15s,transform .15s;
  pointer-events:none;
}
.typebar-field .type-btn:hover::before{opacity:.18;transform:scale(1)}
.typebar-field .type-btn:active::before{opacity:.28}
.typebar-field .type-btn.rec::before{background:var(--danger);opacity:.35;transform:scale(1);animation:pulse-red 1.2s infinite}
/* Удержание кнопки микрофона: лёгкая пульсация + подсказка */
.typebar-field .voice-btn.holding{animation:hold-pulse 1.2s ease-in-out infinite}
.typebar-field .voice-btn.holding .rec-hint{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--nav-bg);color:var(--ink);font-size:12px;padding:5px 10px;border-radius:10px;
  white-space:nowrap;box-shadow:var(--shadow-sm);border:1px solid var(--line);pointer-events:none;z-index:6;
}
@keyframes hold-pulse{0%,100%{box-shadow:0 0 0 0 rgba(220,60,80,0.35)}50%{box-shadow:0 0 0 6px rgba(220,60,80,0)}}
/* Подсказка "смахните вправо для отмены" — видна при записи */
.voice-cancel-hint{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:5px;color:var(--muted);font-size:11.5px;
  opacity:0;transition:opacity .15s;pointer-events:none;white-space:nowrap;
}
.typebar-field.recording .voice-cancel-hint{opacity:1}
.type-btn .btn-ico{width:28px;height:28px;object-fit:contain;pointer-events:none;position:relative;z-index:1}
/* SVG-иконки: серые (16px) — не наследуют цвет кнопки */
.type-btn .btn-ico[src$=".svg"]{width:16px;height:16px;color:#6b7280}
/* Скрепка, смайл и микрофон — крупнее (22px); камера остаётся маленькой */
.type-btn .btn-ico[src$=".svg"][alt="📎"],
.type-btn .btn-ico[src$=".svg"][alt="😀"],
.type-btn .btn-ico[src$=".svg"][alt="🎤"]{width:22px;height:22px}
/* У кнопки камеры: полностью прозрачный фон (никаких заливок/кружков) */
#btn-round-video{background:transparent !important}
.btn-ico-wide{width:32px !important;height:32px !important}
.btn-ico-cam{width:22px !important;height:22px !important}
/* Иконки в шапке чата (звонок/видео) — серые, 22px, без фона */
.icon-btn .header-ico{width:22px;height:22px;color:#6b7280;pointer-events:none}
.type-send{
  width:38px;height:38px;border-radius:50%;border:none;background:var(--accent-grad);color:#fff;
  font-size:15px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;
}
.type-send.rec{background:var(--danger) !important;animation:pulse-red 1.2s infinite}
@keyframes pulse-red{0%{box-shadow:0 0 0 0 rgba(255,93,93,.5)}50%{box-shadow:0 0 0 8px rgba(255,93,93,0)}100%{box-shadow:0 0 0 0 rgba(255,93,93,0)}}

/* Фото в чате */
.photo-msg img{max-width:100%;border-radius:12px;display:block;max-height:280px;object-fit:cover}
.photo-msg{max-width:100%}

/* Стикер-панель */
.sticker-panel{
  position:absolute;bottom:66px;left:10px;right:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:12px;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;z-index:50;max-height:200px;overflow-y:auto;
}
.sticker-panel button{font-size:30px;background:var(--card);border:none;border-radius:10px;padding:8px 4px;cursor:pointer}
.sticker-panel button:active{background:var(--card2)}

/* ===== Карточка абонента ===== */
.user-card{flex:1;overflow-y:auto;padding-bottom:20px;min-height:0;height:100%}
.cs-wrap > .user-card{flex:1;min-height:0;height:100%}
.user-hero{display:flex;flex-direction:column;align-items:center;padding:26px 14px 16px;background:var(--panel)}
.user-hero .nm{font-size:21px;font-weight:800;margin-top:14px}
.user-hero .st{font-size:13.5px;color:var(--green);margin-top:3px}
.user-hero .st.st-online{color:var(--green)}
.user-hero .st.offline{color:var(--muted)}
.user-hero .ph{font-size:13.5px;color:var(--muted);margin-top:3px}
.user-actions{display:flex;justify-content:center;gap:14px;padding:14px 0 6px}
.cact{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;cursor:pointer}
.cact .ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px}
.cact .lb{font-size:11.5px;color:var(--muted);font-weight:600}
.card-section{margin:16px 14px}
.card-section h3{font-size:12.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
.card-rows{background:var(--card);border-radius:16px;overflow:hidden}
.crow{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--line)}
.crow:last-child{border-bottom:none}
.crow .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.crow .lb{font-size:14.5px}
.crow .vl{margin-left:auto;color:var(--muted);font-size:13.5px}

/* ===== Профиль ===== */
.profile-wrap{flex:1;overflow-y:auto;padding:26px 20px;display:flex;flex-direction:column;align-items:center;min-height:0;height:100%}
.cs-wrap > .profile-wrap{flex:1;min-height:0;height:100%}
.profile-name{font-size:21px;font-weight:800;margin-top:12px}
.profile-avatar-wrap{position:relative}
.avatar-menu-btn{
  position:absolute;right:-6px;bottom:-4px;width:24px;height:24px;border-radius:50%;background:var(--panel);
  border:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:2;
}
.avatar-menu-btn:hover{background:var(--card);color:var(--ink)}
.avatar-menu-ico{width:14px;height:14px;display:block}
.avatar-menu{
  position:fixed;z-index:400;min-width:190px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-menu);overflow:hidden;padding:6px;
}
.avatar-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;background:none;border:none;color:var(--ink);font-size:14px;cursor:pointer;text-align:left;font-family:inherit;border-radius:8px}
.avatar-menu-item:hover{background:var(--card)}
.invite-box{margin-top:14px;width:100%;background:var(--card);border:1px dashed var(--purple);border-radius:14px;padding:16px;text-align:center}
.invite-box .code{font-size:24px;font-weight:800;letter-spacing:4px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Меню разделов в профиле */
.profile-menu{width:100%;margin-top:18px;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:10px}
.profile-menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;background:none;border:none;border-radius:10px;color:var(--ink);font-size:15px;cursor:pointer;text-align:left;font-family:inherit}
.profile-menu-item:hover{background:var(--card)}
.profile-menu-icon{width:20px;height:20px;flex-shrink:0;color:var(--muted);display:block}
/* Панель раздела настроек (оверлей внутри профиля) */
.settings-panel{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:var(--overlay)}
.settings-panel-inner{width:100%;max-width:560px;max-height:85vh;background:var(--panel);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-menu);display:flex;flex-direction:column}
.settings-panel-header{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.settings-panel-title{flex:1;text-align:center;font-size:16px;font-weight:700}
.settings-panel-content{overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.settings-panel-content .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.settings-panel-content .row .label{font-size:14px;color:var(--ink)}
.settings-panel-content p{font-size:13px;color:var(--muted);line-height:1.5}

/* Переключатель экономии трафика */
.toggle-row{display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;user-select:none}
.toggle-row input{display:none}
.toggle-switch{width:44px;height:26px;border-radius:13px;background:var(--card2);position:relative;transition:background .2s;flex-shrink:0}
.toggle-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--ink);transition:transform .2s}
.toggle-row input:checked + .toggle-switch{background:var(--purple)}
.toggle-row input:checked + .toggle-switch::after{transform:translateX(18px);background:#fff}

/* ===== Модалка ===== */
.modal{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal-card{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:20px;max-height:80vh;display:flex;flex-direction:column}
.modal-card > h3{margin-bottom:14px;font-size:18px;flex-shrink:0}
.modal-card .modal-list{overflow-y:auto;flex:1;min-height:0;margin:0 -4px;padding:0 4px}
.cs-wrap > .modal-list{width:100%;margin:0;min-height:0;height:100%;flex:1}
.modal-card .btn-primary{margin-top:12px;flex-shrink:0}
.user-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;cursor:pointer}
.user-row:active{background:var(--card)}
.user-row .nm{font-weight:700;font-size:15px}
.user-row .st{color:var(--muted);font-size:12.5px}

/* ===== Р—РІРѕРЅРѕРє ===== */
.call-modal{background:var(--call-bg)}
.call-card{text-align:center;color:#fff}
.call-card .avatar{margin:0 auto}
#call-title{font-size:22px;font-weight:800;margin-top:16px}
#call-state{color:var(--muted);font-size:14px;margin-top:6px}
.call-actions{display:flex;gap:22px;justify-content:center;margin-top:26px}
.call-btn{width:60px;height:60px;border-radius:50%;border:none;background:var(--card2);color:#fff;font-size:22px;cursor:pointer}
.call-btn.hangup{background:var(--danger)}

/* ===== Toast ===== */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--card2);color:var(--ink);padding:12px 20px;border-radius:14px;font-size:14px;z-index:300;box-shadow:var(--shadow-menu)}

/* ===== Поиск по чату ===== */
.chat-searchbar{border-bottom:1px solid var(--line);background:var(--panel)}

/* ===== Р—РІРѕРЅРєРё ===== */
.call-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.call-item:active{background:var(--panel)}
.call-item .ic{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.call-item .ic.in{background:rgba(61,220,151,.16);color:var(--green)}
.call-item .ic.out{background:rgba(255,93,93,.16);color:var(--danger)}
.call-item .nm{font-weight:700;font-size:15px}
.call-item .sub{color:var(--muted);font-size:12.5px;margin-top:2px}
.call-item .time{margin-left:auto;color:var(--muted);font-size:12px}

/* ===== Контейнер вкладок (мобильная навигация) ===== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  display:none;align-items:stretch;justify-content:space-around;
  background:var(--nav-bg);border-top:1px solid var(--line);
  backdrop-filter:blur(var(--glass-blur));padding-bottom:env(safe-area-inset-bottom);
}
.tab-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:8px 4px 6px;background:transparent;border:none;cursor:pointer;
  color:var(--muted);font-size:10.5px;line-height:1.2;min-width:0;
}
.tab-btn .tab-ico{width:22px;height:22px;color:inherit;pointer-events:none}
.tab-btn .tab-ico-svg{width:20px;height:20px}
.tab-btn.active{color:var(--blue)}
.tab-btn.active .tab-ico{filter:brightness(0) invert(1);color:var(--blue);opacity:.9}

/* ===== Мобильный режим (узкие экраны < 900px) ===== */
@media (max-width:899px){
  #main-screen{flex-direction:column}
  .nav-rail{display:none}
  .view{width:100%;height:100%;flex:1}
  #view-chats,#view-contacts,#view-calls,#view-profile{flex:1;width:100%;padding-bottom:0}
  .profile-wrap{padding-bottom:72px}
  #view-chat{position:absolute;inset:0;z-index:5;padding-bottom:0}
  #chat-back{display:flex}
  .tabbar{display:flex}
  .chat-del{opacity:1}
  .chat-menu-btn{opacity:1}
  /* Ввод и история — во всю доступную ширину экрана */
  .typebar-field{max-width:100%;margin:0}
  .messages-inner{max-width:100%}
  .messages{padding-left:10px;padding-right:10px}
  body:has(#main-screen:not(.hidden)) #view-chat .typebar{padding-left:6px;padding-right:6px}
}
/* На десктопе чат занимает правую часть, список — левую; рельс слева */
@media (min-width:900px){
  #chat-back{display:none}
}

/* Глазок показа/скрытия пароля */
.pass-eye-btn{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:transparent;border:none;cursor:pointer;color:var(--muted);
  padding:4px;display:flex;align-items:center;justify-content:center;opacity:.75;
  transition:opacity .15s;
}
.pass-eye-btn:hover{opacity:1}
.pass-eye-btn.visible{color:var(--blue)}
.auth-card .field input{padding-right:38px}
/* QR-шаг входа: центрированный canvas с белой подложкой */
.auth-card .qr-wrap{display:flex;flex-direction:column;align-items:center;margin-top:4px}
.auth-card #qr-canvas{width:min(230px,70vw);height:auto;border-radius:14px;background:#fff;padding:10px;display:block;box-sizing:border-box}

/* Стрелка назад — встроена в окно ввода, прижата к низу */
.auth-step{display:flex;flex-direction:column;min-height:320px}
.auth-step > form{display:flex;flex-direction:column;flex:1;min-height:0}
.back-arrow-btn{
  margin-top:16px;
  align-self:flex-start;
  line-height:1;
  padding:0 !important;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--card);
  color:var(--muted) !important;
  border:1px solid var(--line);
  z-index:50;
  font-weight:700;
  cursor:pointer;
  flex-shrink:0;
}
.back-arrow-btn:hover{background:var(--card2);color:var(--ink)}
.back-arrow-btn svg{width:22px;height:22px}
/* Кнопка «вниз» в чате — при прокрутке истории назад внизу справа */
.scroll-bottom-btn{
  position:absolute;right:18px;bottom:70px;z-index:60;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);
  color:var(--muted);cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .1s ease,box-shadow .15s ease;
  box-shadow:var(--shadow-sm);
}
.scroll-bottom-btn:hover{background:rgba(255,95,162,.18);border-color:rgba(255,95,162,.5);color:#ff5fa2;box-shadow:0 4px 16px rgba(255,95,162,.35)}
.scroll-bottom-btn:active{transform:scale(.92);background:rgba(255,95,162,.28);color:#ff5fa2;border-color:rgba(255,95,162,.6)}
.scroll-bottom-btn svg{width:22px;height:22px}

/* Сегментированный выбор пола в редакторе профиля */
.pe-seg{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:3px}
.pe-seg-btn{
  flex:1;min-width:0;border:none;background:transparent;color:var(--muted);
  font-family:inherit;font-size:13px;font-weight:600;padding:8px 6px;border-radius:9px;
  cursor:pointer;transition:background .15s ease,color .15s ease,box-shadow .15s ease;white-space:nowrap;
}
.pe-seg-btn:hover{color:var(--ink)}
.pe-seg-btn.active{background:var(--accent-soft);color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-solid) 45%, transparent),inset 0 1px 0 rgba(255,255,255,.14)}

/* Действия над своим сообщением — внутри пузыря */
.msg-actions{display:none}
.bubble.actions-visible .msg-actions{display:flex}
.bubble:hover{z-index:3}
.msg-act{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--panel);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:var(--shadow-sm)}
.msg-act:hover{background:var(--card)}
.msg-act.danger:hover{border-color:rgba(231,76,60,.55)}
.msg-act-ico{width:13px;height:13px;object-fit:contain;pointer-events:none}
body:not(.light) .msg-act-ico{filter:brightness(0) invert(1);opacity:.85}

/* Профиль собеседника */
.up-fullname{font-size:14px;color:var(--muted);margin-top:2px}
.up-avatar{overflow:hidden}
.up-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.up-gallery{display:flex;flex-wrap:wrap;gap:8px}
.up-thumb{width:56px;height:56px;border-radius:50%;padding:0;border:2px solid var(--line);background:var(--card);overflow:hidden;cursor:pointer;flex-shrink:0}
.up-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.up-thumb.active{border-color:var(--accent-solid)}

.edit-mode-pencil{width:14px;height:14px;vertical-align:-2px;margin-right:4px}

/* Профиль собеседника занимает область сообщений */
#view-user{flex:1;min-width:0}

/* Медиа, файлы и ссылки в профиле собеседника */
.up-media{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.up-media-item{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--card)}
.up-media-item img{width:100%;height:100%;object-fit:cover;display:block}
.up-file,.up-link{display:block;padding:8px 10px;border-radius:10px;background:var(--card);color:var(--ink);text-decoration:none;font-size:13px;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-file:hover,.up-link:hover{background:var(--card2)}

/* Крупнее стрелки назад */
#chat-back,#user-back{width:42px;height:42px}
#chat-back svg,#user-back svg{width:26px;height:26px}

/* Узкие и центрированные блоки профиля */
.up-narrow{max-width:320px;margin-left:auto;margin-right:auto;width:100%}
.up-narrow .crow{padding:10px 12px}
.up-narrow .btn-primary{width:100%;padding:11px 18px}

/* Цитата в сообщении-ответе */
.quote{
  display:block;padding:5px 9px;margin-bottom:6px;border-left:3px solid var(--accent-solid);
  border-radius:8px;background:rgba(255,255,255,.08);font-size:12.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.quote b{color:var(--accent-solid);font-weight:700}
body.light .quote{background:rgba(20,30,60,.06)}

/* Плашка самоудаляющегося сообщения */
.self-destruct-label{display:block;font-size:11px;opacity:.8;color:var(--accent-solid);margin:3px 0 2px;font-weight:600}

/* Временная подсветка сообщения при переходе по цитате ответа */
@keyframes msg-flash { 0% { background:rgba(124,92,255,.18); } 100% { background:transparent; } }
.msg-highlight{animation:msg-flash 1.8s ease-out forwards;border-radius:12px}
/* Выбранное сообщение: постоянная подсветка (не затухает), та же что и вспышка цитаты */
.bubble.selected,.msg-sticker.selected{background:rgba(124,92,255,.14);border-radius:14px}

/* Панель пересылки сообщения */
.forward-panel{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.forward-panel-inner{width:100%;max-width:320px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-menu);overflow:hidden;padding:8px;max-height:70vh;overflow-y:auto}
.forward-panel-title{font-size:14px;font-weight:700;color:var(--ink);padding:8px 10px}
.forward-row{display:flex;align-items:center;padding:11px 12px;border-radius:10px;cursor:pointer;color:var(--ink);font-size:14.5px;font-weight:600}
.forward-row:hover{background:var(--card)}
.forward-cancel{margin-top:6px;padding:9px;text-align:center;border-radius:10px;color:var(--muted);cursor:pointer;font-weight:600;font-size:13.5px}
.forward-cancel:hover{background:var(--card)}

/* Вкладки «Медиа / Ссылки / Файлы» в профиле */
.up-tabs{display:flex;gap:6px;margin-bottom:10px}
.up-tab{flex:1;padding:7px 6px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.up-tab:hover{color:var(--ink)}
.up-tab.active{background:var(--accent-soft);color:var(--ink);border-color:transparent}
.up-pane{min-height:60px}
.up-empty{color:var(--muted);font-size:13px;text-align:center;padding:14px 8px}

/* Режим выбора сообщений */
.select-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink)}
.select-bar .btn-primary{width:auto;max-width:none;margin:0;padding:8px 16px;font-size:13px;flex-shrink:0}
.select-bar .icon-btn{margin-left:auto}
.bubble.selected,.msg-sticker.selected{box-shadow:0 0 0 2px var(--accent-solid),0 0 14px var(--accent-soft);border-radius:14px}

/* Панель пересылки: поиск и списки */
.forward-panel{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.forward-panel-inner{width:100%;max-width:340px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-menu);overflow:hidden;padding:8px;max-height:75vh;overflow-y:auto}
.forward-panel-title{font-size:14px;font-weight:700;color:var(--ink);padding:8px 10px}
.forward-search{width:100%;box-sizing:border-box;padding:9px 12px;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:14px;font-family:inherit;margin:4px 0 8px;outline:none}
.forward-list{max-height:220px;overflow-y:auto}
.forward-row{display:flex;align-items:center;padding:11px 12px;border-radius:10px;cursor:pointer;color:var(--ink);font-size:14.5px;font-weight:600}
.forward-row:hover{background:var(--card)}
.forward-other{margin:8px 0 4px;padding:10px 12px;border-radius:10px;background:var(--accent-soft);color:var(--ink);font-weight:700;font-size:13.5px;cursor:pointer;text-align:center}
.forward-other:hover{background:var(--card2)}
.forward-cancel{margin-top:6px;padding:9px;text-align:center;border-radius:10px;color:var(--muted);cursor:pointer;font-weight:600;font-size:13.5px}
.forward-cancel:hover{background:var(--card)}

/* Ряд сообщения: слева колонка кружков, справа пузырь */
.msg-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;position:relative}
.msg-row .bubble{max-width:78%;margin-bottom:0;flex:0 1 auto}
.msg-row.out .bubble{margin-left:auto}
.msg-row .bubble.in,.msg-row .bubble.out{align-self:unset}
.msg-gutter{width:22px;flex-shrink:0;display:flex;justify-content:center;padding-top:8px}
.msg-circle{
  width:18px;height:18px;border-radius:50%;border:2px solid var(--line);
  background:var(--panel);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:background .15s ease,border-color .15s ease,opacity .15s ease;
}
.msg-row:hover .msg-circle,.msg-circle:focus-within,.msg-circle.checked{opacity:1}
.msg-circle.checked{background:var(--accent-solid);border-color:var(--accent-solid)}
.msg-circle.checked::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.bubble.selected{box-shadow:0 0 0 2px var(--accent-solid)}

/* Кнопка «Выбрать» в действиях сообщения */
.msg-act.pick:hover{color:var(--accent-solid);border-color:var(--accent-solid)}

/* Стрелка пересылки уже использует .type-btn; акцентируем при выбраных */
#btn-forward.hidden{display:none}
#btn-forward:not(.hidden){background:var(--accent-soft);border-radius:50%}

/* Панель выбора сообщений в окне ввода */
.forward-select{display:flex;align-items:center;gap:4px;padding:2px 4px;background:var(--accent-soft);border-radius:16px;flex-shrink:0}
.forward-select .forward-count{font-size:13px;font-weight:800;color:var(--ink);min-width:18px;text-align:center}
.forward-select .type-btn{background:transparent}
.forward-select.hidden{display:none}
#btn-delete-sel.hidden,#btn-forward-sel.hidden{display:none}
#btn-delete-sel:not(.hidden),#btn-forward-sel:not(.hidden){background:var(--accent-soft);border-radius:50%}

/* Плашка «Переслано от…» в сообщении */
.fwd-badge{display:flex;align-items:center;gap:7px;padding:5px 9px;margin-bottom:6px;border-radius:8px;background:rgba(255,255,255,.10);max-width:100%}
.fwd-badge-avatar{width:20px;height:20px;border-radius:50%;flex-shrink:0;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:800;overflow:hidden}
.fwd-badge-avatar-empty{background:transparent;border:1.5px dashed var(--muted)}
.fwd-badge-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.fwd-badge-text{font-size:12px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fwd-label{opacity:.65;font-weight:600;margin-right:3px}
body.light .fwd-badge{background:rgba(20,30,60,.06)}