/* ============================================================
   Telegram Clone v2 — Full-Stack Edition
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}

/* ── Design Tokens — Dark ───────────────────────────────────── */
:root{
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --bg-app:#17212B;
  --bg-sidebar:#0E1621;
  --bg-panel:#17212B;
  --bg-chat:#0E1621;
  --bg-bubble-out:#2B5278;
  --bg-bubble-in:#182533;
  --bg-input:#242F3D;
  --bg-hover:rgba(255,255,255,0.05);
  --bg-active:rgba(42,171,238,0.15);
  --bg-card:#1E2C3A;
  --text-primary:#FFFFFF;
  --text-secondary:#708499;
  --text-muted:#4B6375;
  --accent:#2AABEE;
  --accent-dark:#1A9BE0;
  --accent-glow:rgba(42,171,238,0.3);
  --border:rgba(255,255,255,0.06);
  --shadow-sm:0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.5);
  --online:#4CAF50;
  --danger:#F44336;
  --r-sm:6px;--r-md:12px;--r-lg:20px;--r-xl:28px;
  --t:.2s ease;
}

/* ── Light Theme ──────────────────────────────────────────── */
body.light{
  --bg-app:#EFEFF0;--bg-sidebar:#FFFFFF;--bg-panel:#FFFFFF;
  --bg-chat:#DAE2E9;--bg-bubble-out:#EFFDDE;--bg-bubble-in:#FFFFFF;
  --bg-input:#F0F0F0;--bg-hover:rgba(0,0,0,0.04);
  --bg-active:rgba(42,171,238,0.12);--bg-card:#FFFFFF;
  --text-primary:#000;--text-secondary:#8B8B8B;--text-muted:#AAA;
  --border:rgba(0,0,0,0.08);
  --shadow-sm:0 2px 8px rgba(0,0,0,0.1);
  --shadow-md:0 8px 32px rgba(0,0,0,0.15);
}

/* ── Base ─────────────────────────────────────────────────── */
body{font-family:var(--font);font-size:14px;color:var(--text-primary);
  background:var(--bg-app);-webkit-font-smoothing:antialiased}
button{cursor:pointer;border:none;background:none;color:inherit;font-family:inherit}
input,textarea{font-family:inherit;color:inherit;outline:none;border:none;background:none}
a{color:var(--accent);text-decoration:none}
.hidden{display:none!important}

/* Scrollbar */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px}
body.light ::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15)}

/* ══════════════════════════════════════════════════════════
   AUTH SCREEN
══════════════════════════════════════════════════════════ */
#auth-screen{
  position:fixed;inset:0;display:flex;align-items:center;
  justify-content:center;z-index:1000;overflow:hidden}
.auth-bg{position:absolute;inset:0;
  background:linear-gradient(135deg,#0E1621 0%,#17212B 50%,#0E2A3B 100%);
  animation:bgPulse 8s ease-in-out infinite}
@keyframes bgPulse{
  0%,100%{background:linear-gradient(135deg,#0E1621 0%,#17212B 50%,#0E2A3B 100%)}
  50%{background:linear-gradient(135deg,#0E2A3B 0%,#17212B 50%,#0E1621 100%)}}
.auth-bubble{position:absolute;border-radius:50%;filter:blur(80px);
  animation:floatBubble 12s ease-in-out infinite;pointer-events:none}
.auth-bubble.b1{width:500px;height:500px;background:rgba(42,171,238,.12);
  top:-100px;left:-100px;animation-delay:0s}
.auth-bubble.b2{width:400px;height:400px;background:rgba(34,158,217,.08);
  bottom:-80px;right:-80px;animation-delay:4s}
.auth-bubble.b3{width:300px;height:300px;background:rgba(42,171,238,.06);
  top:40%;left:40%;animation-delay:8s}
@keyframes floatBubble{0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-30px) scale(1.05)}}

.auth-card{
  position:relative;z-index:1;
  background:rgba(30,44,58,.9);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:48px 40px 40px;
  width:100%;max-width:420px;box-shadow:var(--shadow-lg);
  animation:cardIn .6s cubic-bezier(.34,1.56,.64,1)}
body.light .auth-card{background:rgba(255,255,255,.95)}
@keyframes cardIn{from{opacity:0;transform:translateY(30px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}}

.auth-logo{display:flex;justify-content:center;margin-bottom:32px}
.auth-logo svg{width:90px;height:90px;
  filter:drop-shadow(0 8px 24px rgba(42,171,238,.4));
  animation:logoFloat 4s ease-in-out infinite}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.auth-step{display:none;animation:stepIn .35s cubic-bezier(.34,1.56,.64,1)}
.auth-step.active{display:block}
@keyframes stepIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.auth-step h2{font-size:22px;font-weight:700;margin-bottom:8px}
.auth-step p{color:var(--text-secondary);font-size:14px;line-height:1.5;margin-bottom:24px}

.phone-input-group{
  display:flex;align-items:center;gap:10px;
  background:var(--bg-input);border:1.5px solid var(--border);
  border-radius:var(--r-md);padding:4px 16px;margin-bottom:20px;
  transition:border-color var(--t)}
.phone-input-group:focus-within{border-color:var(--accent)}
.country-code{font-size:14px;font-weight:500;padding:10px 12px 10px 0;
  border-right:1px solid var(--border);white-space:nowrap}
.phone-input-group input{flex:1;padding:12px 0;font-size:15px}
.phone-input-group input::placeholder{color:var(--text-muted)}

.code-inputs{display:flex;gap:10px;justify-content:center;margin-bottom:24px}
.code-digit{width:52px;height:58px;text-align:center;font-size:22px;font-weight:700;
  background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--r-md);
  color:var(--text-primary);transition:border-color var(--t),background var(--t)}
.code-digit:focus{border-color:var(--accent);background:rgba(42,171,238,.08)}

.name-avatar-row{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.name-avatar-placeholder{width:64px;height:64px;border-radius:50%;background:var(--accent);
  color:#fff;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;transition:transform var(--t);
  box-shadow:0 4px 16px var(--accent-glow)}
.name-avatar-placeholder:hover{transform:scale(1.05)}
.name-inputs{flex:1;display:flex;flex-direction:column;gap:10px}
.name-inputs input{width:100%;padding:12px 16px;background:var(--bg-input);
  border:1.5px solid var(--border);border-radius:var(--r-md);font-size:14px;
  transition:border-color var(--t)}
.name-inputs input:focus{border-color:var(--accent)}

.auth-btn{width:100%;padding:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;font-size:15px;font-weight:600;border-radius:var(--r-md);
  box-shadow:0 4px 16px rgba(42,171,238,.4);letter-spacing:.3px;
  transition:transform var(--t),box-shadow var(--t)}
.auth-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(42,171,238,.5)}
.auth-btn:active{transform:translateY(0)}
.auth-link{display:block;margin-top:14px;color:var(--accent);font-size:13px;
  text-align:center;padding:8px;border-radius:var(--r-sm);transition:background var(--t)}
.auth-link:hover{background:var(--bg-hover)}

/* ══════════════════════════════════════════════════════════
   APP LAYOUT
══════════════════════════════════════════════════════════ */
#app{
  display:grid;grid-template-columns:68px 340px 1fr;
  grid-template-rows:100vh;height:100vh;overflow:hidden;
  animation:appFade .5s ease}
@keyframes appFade{from{opacity:0}to{opacity:1}}

/* ── Nav Sidebar ─────────────────────────────────────────── */
.nav-sidebar{
  grid-column:1;background:var(--bg-sidebar);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;
  padding:12px 0;gap:4px;z-index:10;
  transition:background var(--t)}

.nav-user-avatar{
  width:42px;height:42px;border-radius:50%;background:var(--accent);
  color:#fff;font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;margin-bottom:10px;flex-shrink:0;
  box-shadow:0 2px 8px rgba(42,171,238,.3);
  transition:transform var(--t),box-shadow var(--t)}
.nav-user-avatar:hover{transform:scale(1.08);box-shadow:0 4px 16px rgba(42,171,238,.5)}

.nav-icons{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;width:100%}
.nav-icon{width:44px;height:44px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);
  transition:background var(--t),color var(--t),transform var(--t)}
.nav-icon svg{width:22px;height:22px;fill:currentColor}
.nav-icon:hover{background:var(--bg-hover);color:var(--text-primary);transform:scale(1.05)}
.nav-icon.active{color:var(--accent);background:var(--bg-active)}
.theme-toggle{margin-top:auto;margin-bottom:4px}

/* ── List Panel ──────────────────────────────────────────── */
.list-panel{
  grid-column:2;background:var(--bg-panel);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
  transition:background var(--t)}

.list-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 12px;flex-shrink:0}
.panel-title{font-size:20px;font-weight:700}

.icon-btn{width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);transition:background var(--t),color var(--t)}
.icon-btn svg{width:20px;height:20px;fill:currentColor}
.icon-btn:hover{background:var(--bg-hover);color:var(--text-primary)}

.search-bar{
  display:flex;align-items:center;margin:0 12px 10px;padding:8px 12px;
  background:var(--bg-input);border-radius:50px;gap:8px;flex-shrink:0;
  border:1px solid transparent;transition:border-color var(--t),background var(--t)}
.search-bar:focus-within{border-color:var(--accent)}
.search-icon{width:18px;height:18px;fill:var(--text-muted);flex-shrink:0}
.search-bar input{flex:1;font-size:14px;color:var(--text-primary)}
.search-bar input::placeholder{color:var(--text-muted)}
.search-clear{font-size:12px;color:var(--text-muted);padding:2px 4px;border-radius:50%;
  line-height:1;transition:color var(--t)}
.search-clear:hover{color:var(--text-primary)}

.list-section-label{
  font-size:11px;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.8px;
  padding:10px 16px 4px}

/* Chat items */
.chat-item{
  display:flex;align-items:center;padding:10px 16px;gap:12px;
  cursor:pointer;transition:background var(--t);position:relative}
.chat-item:hover{background:var(--bg-hover)}
.chat-item.active{background:var(--bg-active)}

.item-avatar{
  width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:#fff;flex-shrink:0;position:relative}
.item-avatar.online-ring::after{
  content:'';position:absolute;bottom:2px;right:2px;
  width:12px;height:12px;background:var(--online);
  border-radius:50%;border:2px solid var(--bg-panel)}

.item-content{flex:1;min-width:0}
.item-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.item-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.item-time{font-size:11px;color:var(--text-muted);flex-shrink:0;margin-left:8px}
.item-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}
.item-preview{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.item-badge{
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;
  min-width:20px;height:20px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
  animation:badgePop .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes badgePop{from{transform:scale(0)}to{transform:scale(1)}}
.chat-item.has-unread .item-time{color:var(--accent)}

/* ── Chat Area ───────────────────────────────────────────── */
.chat-area{
  grid-column:3;background:var(--bg-chat);
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  transition:background var(--t)}
.chat-area::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:20px 20px;pointer-events:none}

.chat-empty{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:40px;gap:16px;position:relative;z-index:1}
.chat-empty-icon{animation:emptyFloat 4s ease-in-out infinite}
@keyframes emptyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.chat-empty h2{font-size:20px;font-weight:700}
.chat-empty p{font-size:14px;color:var(--text-secondary);max-width:300px;line-height:1.6}

.chat-active{display:flex;flex-direction:column;height:100%;position:relative;z-index:1}

/* Chat header */
.chat-header{
  display:flex;align-items:center;padding:10px 16px;
  background:var(--bg-panel);border-bottom:1px solid var(--border);
  gap:12px;flex-shrink:0;z-index:5;
  box-shadow:0 1px 4px rgba(0,0,0,.1);transition:background var(--t)}
.back-btn{display:none;width:36px;height:36px;border-radius:50%;
  align-items:center;justify-content:center;color:var(--text-secondary);
  transition:background var(--t)}
.back-btn svg{width:20px;height:20px;fill:currentColor}
.back-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.chat-header-avatar{width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:#fff;flex-shrink:0;cursor:pointer}
.chat-header-info{flex:1;min-width:0}
.chat-header-name{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-header-status{font-size:12px;color:var(--text-secondary);
  display:flex;align-items:center;gap:5px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--online);
  display:inline-block;animation:statusPulse 2s ease-in-out infinite}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.5}}
.chat-header-actions{display:flex;gap:2px}

/* Messages */
.messages-area{
  flex:1;overflow-y:auto;padding:16px 20px;
  display:flex;flex-direction:column;gap:2px;scroll-behavior:smooth}

.date-divider{text-align:center;margin:12px 0}
.date-divider span{
  font-size:12px;color:var(--text-secondary);
  background:rgba(42,171,238,.12);padding:4px 12px;border-radius:12px;display:inline-block}

/* System message */
.sys-msg{text-align:center;margin:6px 0}
.sys-msg span{font-size:12px;color:var(--text-muted);
  background:rgba(255,255,255,.05);padding:4px 12px;border-radius:12px;display:inline-block}
body.light .sys-msg span{background:rgba(0,0,0,.05)}

/* Message bubble */
.message{display:flex;gap:8px;max-width:75%;
  animation:msgIn .25s cubic-bezier(.34,1.56,.64,1)}
@keyframes msgIn{from{opacity:0;transform:translateY(8px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}}
.message.out{align-self:flex-end;flex-direction:row-reverse}
.message.in{align-self:flex-start}

.msg-av{width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#fff;flex-shrink:0;align-self:flex-end}
.msg-av.invisible{visibility:hidden}

.msg-bubble{
  max-width:100%;padding:8px 12px;border-radius:16px;
  position:relative;word-break:break-word;line-height:1.5}
.message.in  .msg-bubble{background:var(--bg-bubble-in);border-bottom-left-radius:4px}
.message.out .msg-bubble{background:var(--bg-bubble-out);border-bottom-right-radius:4px}

.msg-sender{font-size:12px;font-weight:600;margin-bottom:4px}
.msg-text{font-size:14px;white-space:pre-wrap}
.msg-meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:4px}
.msg-time{font-size:11px;color:rgba(255,255,255,.45)}
body.light .msg-time{color:rgba(0,0,0,.35)}
.msg-check{font-size:13px;color:rgba(255,255,255,.45)}
.msg-check.read{color:#4AE}

/* File message */
.file-msg{
  display:flex;align-items:center;gap:12px;padding:6px 4px;
  text-decoration:none;color:inherit;border-radius:8px;
  transition:background var(--t)}
.file-msg:hover{background:rgba(255,255,255,.07)}
.file-icon-box{width:44px;height:44px;border-radius:10px;
  background:rgba(42,171,238,.2);display:flex;align-items:center;
  justify-content:center;font-size:22px;flex-shrink:0}
.file-info{flex:1;min-width:0}
.file-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-size{font-size:11px;color:var(--text-secondary);margin-top:2px}
.file-download-btn{width:32px;height:32px;border-radius:50%;
  background:rgba(42,171,238,.2);display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;transition:background var(--t)}
.file-download-btn:hover{background:rgba(42,171,238,.4)}

/* Image message */
.img-msg{
  max-width:280px;border-radius:10px;cursor:pointer;
  transition:opacity var(--t)}
.img-msg:hover{opacity:.9}

/* Typing indicator */
.typing-ind{align-self:flex-start;display:flex;align-items:center;gap:8px}
.typing-bubble{
  background:var(--bg-bubble-in);border-radius:16px;border-bottom-left-radius:4px;
  padding:12px 16px;display:flex;gap:4px;align-items:center}
.t-dot{width:7px;height:7px;border-radius:50%;background:var(--text-secondary);
  animation:tDot 1.4s ease-in-out infinite}
.t-dot:nth-child(2){animation-delay:.2s}
.t-dot:nth-child(3){animation-delay:.4s}
@keyframes tDot{0%,80%,100%{transform:scale(.8);opacity:.5}40%{transform:scale(1.1);opacity:1}}

/* Input bar */
.input-bar{
  display:flex;align-items:flex-end;padding:10px 16px;gap:8px;
  background:var(--bg-panel);border-top:1px solid var(--border);
  flex-shrink:0;transition:background var(--t)}
.attach-btn{color:var(--text-secondary)}
.attach-btn:hover{color:var(--accent)}

.input-wrapper{
  flex:1;display:flex;align-items:flex-end;
  background:var(--bg-input);border-radius:50px;padding:4px 12px;
  border:1px solid transparent;transition:border-color var(--t),background var(--t);gap:6px}
.input-wrapper:focus-within{border-color:var(--accent)}

.emoji-btn{width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);flex-shrink:0;transition:color var(--t)}
.emoji-btn svg{width:22px;height:22px;fill:currentColor}
.emoji-btn:hover{color:var(--accent)}

#message-input{
  flex:1;resize:none;min-height:34px;max-height:120px;line-height:1.5;
  font-size:14px;padding:6px 0;color:var(--text-primary);scrollbar-width:none}
#message-input::-webkit-scrollbar{display:none}
#message-input::placeholder{color:var(--text-muted)}

.send-btn{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;box-shadow:0 2px 8px rgba(42,171,238,.4);
  transition:transform var(--t),box-shadow var(--t)}
.send-btn svg{width:20px;height:20px;fill:#fff}
.send-btn:hover{transform:scale(1.08);box-shadow:0 4px 16px rgba(42,171,238,.6)}
.send-btn:active{transform:scale(.95)}

/* Upload progress */
.upload-progress{
  position:absolute;bottom:70px;left:16px;right:16px;
  background:var(--bg-card);border-radius:var(--r-md);padding:12px 16px;
  box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:12px;
  border:1px solid var(--border);z-index:10}
.upload-bar{height:4px;background:var(--accent);border-radius:2px;
  transition:width .3s ease;width:0%}
.upload-label{font-size:12px;color:var(--text-secondary);white-space:nowrap}

/* ── Settings Panel ──────────────────────────────────────── */
.settings-panel{
  position:fixed;top:0;left:68px;width:340px;height:100vh;
  background:var(--bg-panel);border-right:1px solid var(--border);
  z-index:50;display:flex;flex-direction:column;overflow-y:auto;
  animation:slidePanel .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow:var(--shadow-md);transition:background var(--t)}
@keyframes slidePanel{from{opacity:0;transform:translateX(-20px)}
  to{opacity:1;transform:translateX(0)}}
.settings-header{display:flex;align-items:center;gap:12px;
  padding:16px;border-bottom:1px solid var(--border);flex-shrink:0}
.settings-header h2{font-size:18px;font-weight:700}
.settings-profile{display:flex;align-items:center;gap:16px;padding:24px 16px 20px}
.settings-avatar{width:70px;height:70px;border-radius:50%;background:var(--accent);
  color:#fff;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px var(--accent-glow);flex-shrink:0}
.settings-name{font-size:18px;font-weight:700;margin-bottom:2px}
.settings-username{font-size:13px;color:var(--accent);margin-bottom:4px}
.settings-bio{font-size:13px;color:var(--text-secondary)}
.settings-sections{padding:0 0 20px}
.settings-section{border-bottom:1px solid var(--border);padding:8px 0;margin-bottom:4px}
.settings-section-title{font-size:12px;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.8px;padding:8px 16px 4px}
.settings-item{display:flex;align-items:center;gap:14px;padding:12px 16px;
  cursor:pointer;transition:background var(--t)}
.settings-item:hover{background:var(--bg-hover)}
.settings-item-icon{font-size:18px;width:28px;text-align:center}
.settings-item-label{font-size:14px;font-weight:500}
.settings-item-value{font-size:13px;color:var(--text-secondary);margin-top:1px}
.toggle-item{justify-content:space-between}
.toggle-switch{width:44px;height:24px;border-radius:12px;background:var(--text-muted);
  position:relative;transition:background .3s ease;flex-shrink:0}
.toggle-switch::after{content:'';position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .3s ease}
.toggle-switch.active{background:var(--accent)}
.toggle-switch.active::after{transform:translateX(20px)}

/* ── Emoji Picker ────────────────────────────────────────── */
.emoji-picker{
  position:fixed;bottom:70px;z-index:100;
  width:340px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;
  animation:emojiIn .2s cubic-bezier(.34,1.56,.64,1)}
@keyframes emojiIn{from{opacity:0;transform:translateY(10px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}}
.emoji-categories{display:flex;border-bottom:1px solid var(--border);background:var(--bg-input)}
.emoji-cat-btn{flex:1;padding:10px 4px;font-size:18px;display:flex;align-items:center;
  justify-content:center;transition:background var(--t);border-bottom:2px solid transparent}
.emoji-cat-btn:hover{background:var(--bg-hover)}
.emoji-cat-btn.active{border-bottom-color:var(--accent)}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;
  padding:10px;max-height:200px;overflow-y:auto}
.emoji-item{font-size:22px;padding:6px;text-align:center;cursor:pointer;
  border-radius:var(--r-sm);transition:background var(--t),transform var(--t);line-height:1}
.emoji-item:hover{background:var(--bg-hover);transform:scale(1.2)}

/* ── Toast ───────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(80px);
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text-primary);padding:10px 20px;border-radius:50px;
  font-size:13px;font-weight:500;box-shadow:var(--shadow-md);
  z-index:9999;transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ── Connection bar ──────────────────────────────────────── */
.conn-bar{
  position:fixed;top:0;left:0;right:0;
  background:#FF9800;color:#fff;text-align:center;
  padding:8px;font-size:13px;font-weight:500;z-index:9999}

/* ══════════════════════════════════════════════════════════
   CALL OVERLAY
══════════════════════════════════════════════════════════ */
.call-overlay{
  position:fixed;inset:0;background:#000;z-index:500;
  display:flex;flex-direction:column}

#remote-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:#000}

/* Audio-only bg */
.call-audio-bg{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0e1621 0%,#1a2a3a 50%,#0e2a3b 100%)}
.call-big-avatar{
  width:130px;height:130px;border-radius:50%;
  font-size:48px;font-weight:700;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px rgba(42,171,238,.3),0 0 40px rgba(42,171,238,.4);
  margin-bottom:24px;animation:avatarPulse 2s ease-in-out infinite}
@keyframes avatarPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(42,171,238,.3),0 0 40px rgba(42,171,238,.4)}
  50%{box-shadow:0 0 0 8px rgba(42,171,238,.2),0 0 60px rgba(42,171,238,.6)}}
.audio-waves{display:flex;gap:5px;align-items:center;height:48px}
.wave{width:5px;border-radius:3px;background:rgba(42,171,238,.8);
  animation:waveAnim 1.2s ease-in-out infinite}
.wave:nth-child(1){animation-delay:0s}
.wave:nth-child(2){animation-delay:.15s}
.wave:nth-child(3){animation-delay:.3s}
.wave:nth-child(4){animation-delay:.45s}
.wave:nth-child(5){animation-delay:.6s}
@keyframes waveAnim{0%,100%{height:8px;opacity:.6}50%{height:40px;opacity:1}}

/* Local PIP */
.local-pip{
  position:absolute;top:16px;right:16px;
  width:160px;height:120px;border-radius:14px;overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.2);
  z-index:501;cursor:pointer;transition:transform var(--t)}
.local-pip:hover{transform:scale(1.03)}
#local-video{width:100%;height:100%;object-fit:cover;background:#111}
.pip-no-video{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#111;color:rgba(255,255,255,.6);font-size:13px}

/* Call top info */
.call-top-info{
  position:absolute;top:20px;left:0;right:190px;
  z-index:502;color:#fff;padding-left:20px}
.call-peer-name{font-size:24px;font-weight:700;
  text-shadow:0 2px 8px rgba(0,0,0,.5)}
.call-status-txt{font-size:14px;color:rgba(255,255,255,.7);margin-top:4px}
.call-timer{font-size:18px;font-weight:600;
  color:rgba(255,255,255,.9);font-variant-numeric:tabular-nums;margin-top:6px}

/* Call controls */
.call-controls{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;align-items:center;justify-content:center;gap:16px;
  padding:28px 20px;
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 100%);
  z-index:502}
.call-ctrl-group{display:flex;gap:16px}
.call-ctrl{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff;
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  transition:background var(--t),transform var(--t);
  width:64px;height:64px}
.call-ctrl svg{width:24px;height:24px;fill:currentColor}
.call-ctrl span{font-size:10px;font-weight:500;white-space:nowrap;
  position:absolute;bottom:-20px}
.call-ctrl:hover{background:rgba(255,255,255,.25);transform:scale(1.08)}
.call-ctrl.ctrl-off{background:rgba(244,67,54,.3)}
.call-ctrl.ctrl-active{background:rgba(42,171,238,.3)}
.end-call-btn{
  width:72px;height:72px;
  background:#F44336!important;
  box-shadow:0 4px 20px rgba(244,67,54,.5)}
.end-call-btn:hover{background:#D32F2F!important;transform:scale(1.1)}

/* ══════════════════════════════════════════════════════════
   INCOMING CALL MODAL
══════════════════════════════════════════════════════════ */
.incoming-overlay{
  position:fixed;inset:0;z-index:490;
  background:rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.incoming-card{
  background:var(--bg-card);border-radius:28px;
  padding:44px 52px;text-align:center;
  box-shadow:var(--shadow-lg);
  animation:slideUp .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes slideUp{from{opacity:0;transform:translateY(30px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}}

.ring-container{width:140px;height:140px;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center}
.ring-outer{
  width:140px;height:140px;border-radius:50%;
  border:2px solid rgba(42,171,238,.3);
  display:flex;align-items:center;justify-content:center;
  animation:ringPulse 1.5s ease-in-out infinite}
@keyframes ringPulse{
  0%,100%{transform:scale(1);border-color:rgba(42,171,238,.3)}
  50%{transform:scale(1.07);border-color:rgba(42,171,238,.7)}}
.ring-inner{
  width:118px;height:118px;border-radius:50%;
  border:2px solid rgba(42,171,238,.5);
  display:flex;align-items:center;justify-content:center;
  animation:ringPulse 1.5s ease-in-out infinite .2s}
.incoming-avatar{
  width:98px;height:98px;border-radius:50%;
  font-size:36px;font-weight:700;color:#fff;
  display:flex;align-items:center;justify-content:center}
.incoming-name{font-size:22px;font-weight:700;color:var(--text-primary);margin-bottom:6px}
.incoming-type{font-size:14px;color:var(--text-secondary);margin-bottom:28px}
.incoming-actions{display:flex;gap:20px;justify-content:center}
.accept-btn,.reject-btn{
  padding:14px 28px;border-radius:50px;font-size:15px;font-weight:600;
  display:flex;align-items:center;gap:8px;transition:transform var(--t),box-shadow var(--t)}
.accept-btn svg,.reject-btn svg{width:18px;height:18px;fill:currentColor}
.accept-btn{background:#4CAF50;color:#fff;box-shadow:0 4px 16px rgba(76,175,80,.4)}
.accept-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(76,175,80,.5)}
.reject-btn{background:#F44336;color:#fff;box-shadow:0 4px 16px rgba(244,67,54,.4)}
.reject-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(244,67,54,.5)}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media(max-width:900px){
  #app{grid-template-columns:60px 1fr}
  .list-panel{grid-column:2}
  .chat-area{
    grid-column:2;position:fixed;inset:0;
    transform:translateX(100%);transition:transform .3s ease;z-index:20}
  .chat-area.open{transform:translateX(0)}
  .back-btn{display:flex!important}
}
@media(max-width:600px){
  #app{grid-template-columns:1fr}
  .nav-sidebar{
    position:fixed;bottom:0;left:0;right:0;top:auto;
    flex-direction:row;height:56px;padding:0 8px;
    border-right:none;border-top:1px solid var(--border);z-index:30;
    justify-content:space-around}
  .nav-user-avatar{margin-bottom:0;width:36px;height:36px;font-size:12px}
  .nav-icons{flex-direction:row;flex:0;gap:0}
  .theme-toggle{margin-top:0;margin-bottom:0}
  .list-panel{grid-column:1;padding-bottom:56px}
  .chat-area{grid-column:1}
  .settings-panel{left:0;width:100%}
  .emoji-picker{left:0;width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;bottom:56px}
  .local-pip{width:100px;height:75px;top:10px;right:10px}
  .call-controls{padding:20px 12px}
  .call-ctrl{width:54px;height:54px;padding:12px}
  .end-call-btn{width:62px;height:62px}
}

/* Smooth theme transitions */
body,.nav-sidebar,.list-panel,.chat-area,.chat-header,.input-bar,
.settings-panel,.chat-item,.msg-bubble,.input-wrapper,.search-bar{
  transition:background-color .3s ease,border-color .3s ease,color .2s ease}


/* ═══════════════════════════════════════════════════════════
   SUPPLEMENTAL STYLES — app.js dynamic classes
   All unique; no duplicates of rules defined above.
═══════════════════════════════════════════════════════════ */

/* ── Message bubbles ──────────────────────────────────────── */
.msg-bubble{
  display:block;max-width:72%;padding:8px 12px;border-radius:16px;
  position:relative;word-break:break-word;line-height:1.5;
  animation:msgSlideIn .22s cubic-bezier(.34,1.56,.64,1);margin:2px 16px}
@keyframes msgSlideIn{
  from{opacity:0;transform:translateY(8px) scale(.96)}
  to{opacity:1;transform:none}}
.msg-bubble.msg-in{
  background:var(--bg-bubble-in);border-bottom-left-radius:4px;
  align-self:flex-start;margin-right:auto}
.msg-bubble.msg-out{
  background:var(--bg-bubble-out);border-bottom-right-radius:4px;
  align-self:flex-end;margin-left:auto}
#messages-area{
  flex:1;overflow-y:auto;padding:12px 0;
  display:flex;flex-direction:column;gap:2px}
.msg-sender{font-size:12px;font-weight:600;margin-bottom:3px}
.msg-text{font-size:14px;white-space:pre-wrap}
.msg-time{font-size:11px;color:rgba(255,255,255,.4);text-align:right;margin-top:3px}
body.light .msg-time{color:rgba(0,0,0,.3)}
.msg-system{
  text-align:center;margin:6px auto;font-size:12px;color:var(--text-muted);
  background:rgba(255,255,255,.05);padding:4px 14px;border-radius:12px;display:table}
body.light .msg-system{background:rgba(0,0,0,.05)}

/* ── File previews ────────────────────────────────────────── */
.msg-image{max-width:260px;max-height:200px;border-radius:10px;display:block;
  cursor:pointer;transition:opacity .2s;object-fit:cover}
.msg-image:hover{opacity:.88}
.msg-video{max-width:280px;border-radius:10px;display:block}
.msg-audio{width:240px}
.msg-file-name{font-size:12px;color:var(--text-secondary);margin-top:4px}
.file-card{
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  background:rgba(42,171,238,.08);border-radius:12px;
  text-decoration:none;color:inherit;border:1px solid rgba(42,171,238,.2);
  transition:background .2s;max-width:260px}
.file-card:hover{background:rgba(42,171,238,.15)}
.file-icon{font-size:28px;flex-shrink:0}
.file-details{flex:1;min-width:0}
.file-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-size{font-size:11px;color:var(--text-secondary);margin-top:2px}
.file-dl-icon{font-size:18px;flex-shrink:0}

/* ── Chat rows ────────────────────────────────────────────── */
.chat-row{
  display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;
  transition:background .15s;position:relative}
.chat-row:hover{background:var(--bg-hover)}
.chat-row.active{background:var(--bg-active)}
.chat-avatar{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:#fff}
.online-dot{position:relative}
.online-dot::after{
  content:'';position:absolute;bottom:2px;right:2px;
  width:10px;height:10px;border-radius:50%;background:var(--online);
  border:2px solid var(--bg-panel)}
.chat-info{flex:1;min-width:0}
.chat-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-sub{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.chat-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.chat-time{font-size:11px;color:var(--text-secondary)}
.unread-badge{
  min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.empty-list{padding:24px 16px;color:var(--text-muted);font-size:13px;text-align:center}

/* ── Typing indicator ─────────────────────────────────────── */
.typing-indicator{
  display:flex;align-items:center;gap:8px;padding:6px 16px;margin-left:2px}
.typing-dots{
  display:flex;gap:4px;align-items:center;
  background:var(--bg-bubble-in);padding:8px 14px;
  border-radius:14px;border-bottom-left-radius:4px}
.typing-dots span{
  width:7px;height:7px;border-radius:50%;background:var(--text-secondary);
  animation:typingDot 1.4s ease-in-out infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typingDot{
  0%,80%,100%{transform:scale(.8);opacity:.5}
  40%{transform:scale(1.1);opacity:1}}
.typing-label{font-size:12px;color:var(--text-secondary)}

/* ── Toast ────────────────────────────────────────────────── */
.toast.visible{transform:translateX(-50%) translateY(0)}

/* ── In-call control states ───────────────────────────────── */
.call-ctrl.active{background:rgba(244,67,54,.45)!important;color:#fff}

/* ── Chat header ──────────────────────────────────────────── */
.chat-header-avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:#fff}
.chat-header-info{flex:1;min-width:0}
.chat-header-name{font-size:15px;font-weight:700}
.chat-header-status{font-size:12px;color:var(--accent);margin-top:1px}
.chat-header-actions{display:flex;gap:4px}

/* ── Upload progress bar ──────────────────────────────────── */
.upload-progress{
  display:flex;align-items:center;gap:12px;
  background:var(--bg-card);border-radius:12px;padding:10px 16px;
  margin:4px 16px;border:1px solid var(--border);flex-shrink:0}
.upload-bar{
  flex:1;height:4px;background:var(--accent);
  border-radius:2px;transition:width .3s ease}
.upload-label{font-size:12px;color:var(--text-secondary);white-space:nowrap;flex-shrink:0}

/* ── Chat empty & active ──────────────────────────────────── */
.chat-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;padding:40px;
  text-align:center;color:var(--text-secondary)}
.chat-empty h2{font-size:20px;font-weight:700;color:var(--text-primary)}
.chat-empty p{font-size:14px;line-height:1.6;max-width:300px}
.chat-active{display:flex;flex-direction:column;flex:1;overflow:hidden}

/* ── List section labels ──────────────────────────────────── */
.list-section-label{
  padding:8px 16px 4px;font-size:11px;font-weight:700;
  color:var(--text-muted);text-transform:uppercase;letter-spacing:.7px}