:root{color-scheme:dark;--bg:#1a1a2e;--bg-elev:#22243a;--bg-sunken:#14152a;--text:#e9eaf2;--muted:#9aa0b5;
--line:#2e3049;--accent:#3b82f6;--accent-2:#8b5cf6;--accent-soft:#223056;--danger:#ff4757;--ok:#2f9e68;
--bubble-in:#22243a;--bubble-out:#3b82f6;--bubble-out-text:#fff;--fs:15px;--r-sm:8px;--r-md:14px;--r-lg:20px;--r-full:999px;
--shadow-1:0 1px 2px rgb(0 0 0/.35),0 8px 24px rgb(0 0 0/.22);--dur:180ms;
--grad:linear-gradient(135deg,var(--accent),var(--accent-2))}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;
-webkit-font-smoothing:antialiased;overscroll-behavior:none}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(60% 45% at 15% 0%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 70%),
radial-gradient(55% 40% at 100% 100%,color-mix(in srgb,var(--accent-2) 13%,transparent),transparent 70%)}
.screen{display:none;position:relative;z-index:1}.screen.active{display:block}
::selection{background:color-mix(in srgb,var(--accent) 45%,transparent)}

/* --- кнопки: без глоу, подсветка только с клавиатуры --- */
.btn{width:100%;padding:13px 16px;font:inherit;font-weight:600;color:#fff;background:var(--accent);
border:0;border-radius:var(--r-md);cursor:pointer;box-shadow:none;filter:none;
transition:background var(--dur),transform var(--dur),opacity var(--dur)}
.btn,.btn:hover,.btn:focus,.btn:active{box-shadow:none;outline:none}
.btn:hover{background:color-mix(in srgb,var(--accent) 86%,#fff)}
.btn:active{transform:scale(.985);background:color-mix(in srgb,var(--accent) 92%,#000)}
.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.secondary:hover{background:var(--bg-sunken)}
.icon-btn,.tab,.list-item,label.icon-btn{-webkit-tap-highlight-color:transparent}
.icon-btn:focus,.tab:focus,.list-item:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}

/* авторизация */
.auth-card{max-width:390px;margin:9vh auto 0;padding:26px 24px 22px;display:flex;flex-direction:column;gap:12px;
background:color-mix(in srgb,var(--bg-elev) 92%,transparent);backdrop-filter:blur(14px);
border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.sub{color:var(--muted);font-size:14px;margin:0 0 6px;line-height:1.45}
.input{width:100%;padding:13px 15px;font:inherit;font-size:max(16px,var(--fs));color:var(--text);
background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--r-md);outline:none;
transition:border-color var(--dur)}
.input:focus{border-color:var(--accent)}
.link{color:var(--accent);cursor:pointer;font-size:14px;text-align:center;padding:4px}
.hint{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin:2px 0 8px}

/* каркас */
.sidebar{display:flex;flex-direction:column;height:100%;overflow:hidden;
background:color-mix(in srgb,var(--bg-elev) 88%,transparent);border-right:1px solid var(--line)}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:14px 16px;
border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg-elev) 82%,transparent);backdrop-filter:blur(12px)}
.sidebar-header h2{margin:0;font-size:19px;font-weight:700;background:var(--grad);
-webkit-background-clip:text;background-clip:text;color:transparent}
.sidebar-header>div{display:flex;gap:2px}
.list,#sidebar-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 8px}
.list-item{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;padding:10px 12px;
margin-bottom:2px;border-radius:var(--r-md);cursor:pointer;contain:content;transition:background var(--dur)}
.list-item:hover{background:var(--bg-sunken)}
.list-item.active{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.list-item-info{min-width:0;display:flex;flex-direction:column;gap:2px}
.name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.time{color:var(--muted);font-size:12px;white-space:nowrap}
.status-line{font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-line.on{color:var(--ok)}.status-line.off{color:var(--muted)}
.avatar{width:48px;height:48px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;
font-weight:600;font-size:16px;color:#fff;background:var(--grad);object-fit:cover;flex-shrink:0;user-select:none;
box-shadow:0 2px 8px rgb(0 0 0/.2)}
.empty-state{padding:32px 18px;text-align:center;color:var(--muted);font-size:14px;line-height:1.5}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;
color:var(--text);background:transparent;border:0;border-radius:var(--r-sm);cursor:pointer;
transition:background var(--dur),color var(--dur)}
.icon-btn:hover{background:var(--bg-sunken);color:var(--accent)}
.icon-btn.danger:hover,.icon-btn[title*="Удал"]:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,transparent)}
.icon-btn svg,i[data-lucide]{width:18px;height:18px}
#bottom-tabs{display:flex;justify-content:space-around;flex-shrink:0;padding:8px 4px;
background:color-mix(in srgb,var(--bg-elev) 88%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.tab{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;padding:9px 4px;cursor:pointer;
font-size:13px;color:var(--muted);border-radius:var(--r-sm);transition:color var(--dur),background var(--dur)}
.tab.active{color:var(--accent);background:var(--accent-soft)}

/* чат */
.main{display:flex;flex-direction:column;height:100%;min-width:0}
.chat-header{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);
background:color-mix(in srgb,var(--bg-elev) 82%,transparent);backdrop-filter:blur(12px)}
#chat-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chat-status{font-size:12px;color:var(--muted)}
.actions{display:flex;align-items:center;gap:2px}
.messages{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px;scroll-behavior:smooth}
.msg,.message{max-width:min(72ch,78%);padding:9px 13px;border-radius:var(--r-md);background:var(--bubble-in);
box-shadow:0 1px 2px rgb(0 0 0/.18);word-break:break-word;margin-bottom:6px}
.msg.out,.message.out,.msg.own,.message.own,.msg-out,.message-out,.out,.own{
background:var(--bubble-out);color:var(--bubble-out-text);margin-left:auto}

/* --- ПОЛЕ ВВОДА: убрана полоса прокрутки у textarea --- */
#composer,.composer{display:flex;align-items:flex-end;gap:8px;
padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);
background:color-mix(in srgb,var(--bg-elev) 85%,transparent);backdrop-filter:blur(12px);overflow:visible}
#composer>*,.composer>*{margin:0!important;flex:0 0 auto}
#composer textarea,#composer textarea.input{flex:1 1 auto;width:auto;min-height:46px;max-height:140px;
padding:12px 16px;line-height:22px;font-family:inherit;font-size:max(16px,var(--fs));color:var(--text);
background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--r-lg);resize:none;outline:none;
overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;
transition:border-color var(--dur)}
#composer textarea::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}
#composer textarea:focus{border-color:var(--accent)}
#composer .icon-btn,#composer label.icon-btn{align-self:flex-end;width:46px;height:46px;border-radius:50%;
background:var(--bg-sunken)}
#composer .btn,#composer #btn-send-text{align-self:flex-end;width:46px!important;height:46px!important;
min-width:46px;padding:0!important;border-radius:50%!important;display:inline-flex;align-items:center;justify-content:center}
#composer .btn svg{width:20px!important;height:20px!important;margin:0}
#composer .btn.mode-mic{background:var(--bg-sunken);color:var(--text)}
#composer .btn.mode-mic:hover{background:var(--accent-soft);color:var(--accent)}
#composer .btn.recording{background:var(--danger);animation:recPulse 1.4s infinite}
@keyframes recPulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--danger) 18%,transparent)}}
.rec-bar{position:fixed;left:0;right:0;bottom:0;z-index:65;display:none;align-items:center;gap:12px;
padding:14px 18px calc(14px + env(safe-area-inset-bottom));background:var(--bg-elev);border-top:1px solid var(--line)}
.rec-bar.show{display:flex}
.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:recPulse 1.2s infinite}
.rec-time{font-variant-numeric:tabular-nums;font-weight:600}
.rec-hint{margin-left:auto;color:var(--muted);font-size:12px}

/* звонок */
.call-overlay{position:fixed;inset:0;z-index:80;display:none;background:#0a0b10}
.call-overlay.show{display:grid;grid-template-rows:1fr auto}
.call-stage{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.call-stage video{width:100%;height:100%;object-fit:cover;background:#000}
.call-self{position:absolute;right:14px;top:14px;width:26%;max-width:180px;aspect-ratio:3/4;
border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-1);border:1px solid var(--line)}
.call-topbar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;
padding:calc(10px + env(safe-area-inset-top)) 14px 26px;color:#fff;
background:linear-gradient(180deg,rgb(0 0 0/.6),transparent)}
.call-name{font-weight:600}.call-timer{font-variant-numeric:tabular-nums;opacity:.85;font-size:13px}
.call-actions{display:flex;align-items:center;justify-content:center;gap:14px;
padding:18px 14px calc(22px + env(safe-area-inset-bottom));background:#0a0b10}
.call-btn{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;display:inline-flex;
align-items:center;justify-content:center;background:rgb(255 255 255/.14);color:#fff;transition:transform var(--dur),background var(--dur)}
.call-btn:hover{transform:scale(1.06);background:rgb(255 255 255/.22)}
.call-btn.end{background:var(--danger)}
.call-btn svg{width:22px;height:22px}

@media (max-width:768px){
#composer{padding-left:8px;padding-right:8px}
#composer textarea{min-height:44px;padding:11px 14px}
#composer .btn,#composer .icon-btn{width:44px!important;height:44px!important}
.call-self{width:34%}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto}}