/* ===================== THEME TOKENS ===================== */
:root{
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --radius:14px;
}

body.theme-dark{
  --bg:#0B0F14; --surface:#131A21; --surface-2:#1B242C; --border:#232E38;
  --text:#E8EDF2; --muted:#8A97A3; --accent:#7C6FF0; --accent-text:#ffffff;
  --bubble-out:#245B4F; --bubble-out-text:#EAFBF6; --bubble-in:#1B242C; --bubble-in-text:#E8EDF2;
  --danger:#E5566B; --success:#4FD18B;
}
body.theme-light{
  --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#EDEFF3; --border:#DFE3E8;
  --text:#1B1F24; --muted:#66707A; --accent:#6A5CE0; --accent-text:#ffffff;
  --bubble-out:#DCF3EA; --bubble-out-text:#12352A; --bubble-in:#FFFFFF; --bubble-in-text:#1B1F24;
  --danger:#D6455B; --success:#2E9E63;
}
body.theme-midnight{
  --bg:#0A0714; --surface:#150F26; --surface-2:#1E1636; --border:#2C2148;
  --text:#EDE9F9; --muted:#9A8FC2; --accent:#B388FF; --accent-text:#150F26;
  --bubble-out:#3B2A66; --bubble-out-text:#F1E9FF; --bubble-in:#1E1636; --bubble-in-text:#EDE9F9;
  --danger:#FF6B8B; --success:#68E0B0;
}
body.theme-forest{
  --bg:#0D1512; --surface:#141F1A; --surface-2:#1B2B23; --border:#26382E;
  --text:#E7F0EA; --muted:#8DA396; --accent:#5FBF8E; --accent-text:#0D1512;
  --bubble-out:#2C5240; --bubble-out-text:#E7FBF1; --bubble-in:#1B2B23; --bubble-in-text:#E7F0EA;
  --danger:#E5788A; --success:#7CD9A5;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important;}
.muted{color:var(--muted);}
.small{font-size:.78rem;}
.mono{font-family:var(--font-mono) !important;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input{font-family:inherit; color:inherit;}
img{-webkit-user-drag:none;}

.screen{height:100vh; width:100vw;}

/* ===================== BRAND ===================== */
.brand{display:flex; align-items:center; gap:.6rem; justify-content:center;}
.brand .brand-name{font-family:var(--font-display); font-weight:700; font-size:1.9rem; letter-spacing:-.02em; margin:0;}
.brand-dot{width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); flex-shrink:0;}
.brand-dot.small{width:9px; height:9px;}
.brand-dot.large{width:34px; height:34px; margin:0 auto 1rem;}
.sidebar-title{display:flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:600;}

/* ===================== AUTH ===================== */
#auth-screen, #onboarding-screen{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem; padding:2rem 1rem; overflow-y:auto; background:
  radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 45%),
  radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 40%), var(--bg);}
.auth-card{width:min(420px,92vw); background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:2.2rem; text-align:center;}
.auth-card h2{font-family:var(--font-display); margin-bottom:1.2rem;}
.tagline{color:var(--muted); margin:.6rem 0 1.6rem; font-size:.95rem;}
.auth-fine{color:var(--muted); font-size:.72rem; margin-top:1rem; line-height:1.4;}

.seo-intro{width:min(420px,92vw); color:var(--muted); font-size:.85rem; line-height:1.5; text-align:center;}
.seo-intro h2{font-family:var(--font-display); font-size:1rem; color:var(--text); margin-bottom:.6rem; font-weight:600;}
.seo-intro ul{list-style:none; margin-top:.8rem; display:flex; flex-wrap:wrap; gap:.4rem .6rem; justify-content:center; padding:0;}
.seo-intro li{background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:.3rem .7rem; font-size:.78rem;}
.seo-links{margin-top:1.2rem; display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; justify-content:center;}
.seo-links a{color:var(--accent); font-size:.8rem; font-weight:600; text-decoration:none;}
.seo-links a:hover{text-decoration:underline;}

.btn-primary{width:100%; padding:.85rem 1rem; border-radius:12px; background:var(--accent); color:var(--accent-text); font-weight:600; font-size:.95rem; transition:opacity .15s;}
.btn-primary:hover{opacity:.88;}
.btn-secondary{width:100%; padding:.8rem 1rem; border-radius:12px; background:var(--surface-2); color:var(--danger); font-weight:600; margin-top:1.4rem;}
.btn-google{display:flex; align-items:center; justify-content:center; gap:.6rem; background:var(--surface-2); color:var(--text); border:1px solid var(--border);}
.link-btn{color:var(--accent); font-weight:600; font-size:.85rem;}

.field-label{display:block; text-align:left; font-size:.75rem; color:var(--muted); margin:1rem 0 .35rem; text-transform:uppercase; letter-spacing:.04em;}
.text-input{width:100%; padding:.7rem .85rem; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-size:.92rem;}
.text-input:focus{outline:none; border-color:var(--accent);}
.select-input{cursor:pointer;}

.avatar-picker{display:flex; flex-direction:column; align-items:center; gap:.6rem; margin-bottom:.5rem;}
.avatar{border-radius:50%; object-fit:cover; background:var(--surface-2); flex-shrink:0;}
.avatar-sm{width:38px; height:38px;}
.avatar-xl{width:88px; height:88px;}
.avatar-edit-btn{color:var(--accent); font-size:.8rem; font-weight:600; cursor:pointer;}

.id-preview{margin:1.2rem 0; padding:.8rem; background:var(--surface-2); border-radius:12px; display:flex; flex-direction:column; gap:.4rem; align-items:center;}
.id-label{font-size:.72rem; color:var(--muted);}
.id-chip{font-family:var(--font-mono); background:var(--bg); border:1px dashed var(--border); padding:.35rem .7rem; border-radius:8px; letter-spacing:.06em; font-size:.9rem;}

/* ===================== APP LAYOUT ===================== */
.app-grid{display:grid; grid-template-columns:340px 1fr; height:100vh;}
.sidebar{background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; height:100vh;}
.sidebar-header{display:flex; align-items:center; gap:.7rem; padding:.9rem 1rem; border-bottom:1px solid var(--border);}
.sidebar-header .sidebar-title{flex:1;}
.header-actions{display:flex; gap:.3rem;}
.icon-btn{width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.05rem; transition:background .12s;}
.icon-btn:hover{background:var(--surface-2);}
.avatar-btn{padding:0; width:38px; height:38px;}
.search-row{padding:.7rem 1rem;}

.chat-list{flex:1; overflow-y:auto;}
.chat-item{display:flex; gap:.7rem; align-items:center; padding:.7rem 1rem; cursor:pointer; border-bottom:1px solid transparent; position:relative;}
.chat-item:hover, .chat-item.active{background:var(--surface-2);}
.chat-item-body{flex:1; min-width:0;}
.chat-item-top{display:flex; justify-content:space-between; gap:.5rem;}
.chat-item-top strong{font-size:.92rem;}
.chat-item-time{font-size:.7rem; color:var(--muted); flex-shrink:0;}
.chat-item-preview{font-size:.8rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px;}
.chat-item-badge{background:var(--accent); color:var(--accent-text); font-size:.68rem; font-weight:700; border-radius:999px; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 5px;}
.empty-list-hint{padding:2rem 1.2rem; color:var(--muted); font-size:.85rem; text-align:center; line-height:1.5;}

.chat-main{position:relative; height:100vh; background:var(--bg);}
.chat-empty-state{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); text-align:center;}
.chat-empty-state h2{font-family:var(--font-display); color:var(--text); margin-bottom:.3rem;}
.chat-active{height:100%; display:flex; flex-direction:column;}
.chat-header{display:flex; align-items:center; gap:.7rem; padding:.7rem 1rem; border-bottom:1px solid var(--border); background:var(--surface);}
.chat-header-info{flex:1; display:flex; flex-direction:column; min-width:0;}
.chat-header-info strong{font-size:.95rem;}
.only-mobile{display:none;}

.messages-container{flex:1; overflow-y:auto; padding:1.2rem 4%; display:flex; flex-direction:column; gap:.35rem;
  background-image:radial-gradient(color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px);
  background-size:22px 22px;}
.msg-row{display:flex; max-width:68%;}
.msg-row.out{align-self:flex-end; justify-content:flex-end;}
.msg-row.in{align-self:flex-start;}
.msg-row.system{align-self:center; max-width:90%;}
.bubble{padding:.55rem .75rem; border-radius:14px; font-size:.9rem; line-height:1.4; position:relative;}
.msg-row.out .bubble{background:var(--bubble-out); color:var(--bubble-out-text); border-bottom-right-radius:4px;}
.msg-row.in .bubble{background:var(--bubble-in); color:var(--bubble-in-text); border-bottom-left-radius:4px;}
.msg-row.system .bubble{background:transparent; color:var(--muted); font-size:.75rem; text-align:center;}
.bubble-sender{font-size:.72rem; font-weight:700; color:var(--accent); margin-bottom:2px; display:block;}
.bubble img.msg-image{max-width:260px; border-radius:10px; display:block; margin-top:2px; cursor:pointer;}
.bubble audio{margin-top:2px; width:220px; height:34px;}
.bubble-meta{display:flex; gap:5px; align-items:center; justify-content:flex-end; margin-top:3px; font-size:.66rem; opacity:.75;}
.bubble-disappear{opacity:.7;}

/* ---- typing indicator ---- */
#chat-header-sub.typing-active{color:var(--accent); font-style:italic;}

/* ---- read receipt ticks ---- */
.msg-ticks{margin-left:4px; font-size:.72rem; letter-spacing:-2px; opacity:.65;}
.msg-ticks.seen{color:#53BDEB; opacity:1;}

/* ---- message actions: reply / react / forward / delete ---- */
.bubble-wrap{position:relative; display:flex; align-items:flex-end; gap:.3rem; max-width:100%;}
.msg-row.out .bubble-wrap{flex-direction:row-reverse;}
.msg-actions{display:flex; gap:1px; opacity:0; transition:opacity .12s; flex-shrink:0;}
.msg-row:hover .msg-actions{opacity:1;}
.msg-action-btn{width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.78rem; color:var(--muted);}
.msg-action-btn:hover{background:var(--surface-2); color:var(--text);}

.reply-quote{border-left:3px solid var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); padding:.3rem .5rem; border-radius:6px; margin-bottom:4px; cursor:pointer;}
.reply-quote-sender{font-weight:700; color:var(--accent); display:block; font-size:.72rem;}
.reply-quote-text{color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:220px; font-size:.78rem;}

.forwarded-tag{font-size:.7rem; color:var(--muted); font-style:italic; margin-bottom:2px;}

.msg-deleted{font-style:italic; color:var(--muted); font-size:.85rem;}

.reactions-row{display:flex; gap:4px; flex-wrap:wrap; margin-top:4px;}
.reaction-chip{background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:1px 7px; font-size:.72rem; display:inline-flex; align-items:center; gap:3px; cursor:pointer;}
.reaction-chip.mine{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 15%, transparent);}

.emoji-picker{position:absolute; bottom:100%; margin-bottom:6px; left:0; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:.4rem; display:flex; gap:4px; box-shadow:0 6px 20px rgba(0,0,0,.3); z-index:10;}
.msg-row.out .emoji-picker{left:auto; right:0;}
.emoji-picker button{font-size:1.15rem; padding:.2rem .3rem; border-radius:8px;}
.emoji-picker button:hover{background:var(--surface-2);}

.reply-preview-bar{display:flex; align-items:center; gap:.6rem; padding:.5rem 1rem; background:var(--surface-2); border-top:1px solid var(--border);}
.reply-preview-body{flex:1; border-left:3px solid var(--accent); padding-left:.5rem; min-width:0;}
.reply-preview-body #reply-preview-text{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.forward-chat-item{display:flex; align-items:center; gap:.6rem; padding:.6rem; border-radius:10px; cursor:pointer;}
.forward-chat-item:hover{background:var(--surface-2);}

.recording-bar{display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem; background:var(--surface-2); border-top:1px solid var(--border);}
.rec-dot{width:9px; height:9px; border-radius:50%; background:var(--danger); animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}

.composer{display:flex; align-items:center; gap:.4rem; padding:.7rem 1rem; border-top:1px solid var(--border); background:var(--surface);}
.composer-input{flex:1; border-radius:22px; padding:.65rem 1rem;}
.send-btn{background:var(--accent); color:var(--accent-text); border-radius:50%;}

/* ===================== MODALS ===================== */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:50;}
.modal{width:min(440px,92vw); max-height:85vh; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:1.4rem;}
.modal-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem;}
.modal-header h3{font-family:var(--font-display);}
.modal-tabs{display:flex; gap:.4rem; margin:.6rem 0 1rem; background:var(--surface-2); padding:4px; border-radius:10px;}
.tab-btn{flex:1; padding:.5rem; border-radius:8px; font-size:.83rem; font-weight:600; color:var(--muted);}
.tab-btn.active{background:var(--surface); color:var(--text);}
.tab-panel.hidden{display:none;}
.find-result{margin-top:.9rem;}
.walllove-section{margin-top:.4rem;}
.walllove-status{margin:-.3rem 0 .8rem; line-height:1.4;}
.walllove-upload-row{display:flex; align-items:center; gap:.8rem; padding:.6rem 0;}
.walllove-preview{width:52px; height:52px; border-radius:12px; object-fit:cover; flex-shrink:0; background:var(--surface-2);}
.walllove-upload-actions{display:flex; flex-direction:column; align-items:flex-start; gap:.35rem;}
.walllove-upload-btn{display:inline-block; padding:.55rem .9rem; border-radius:10px; background:var(--accent); color:var(--accent-text); font-weight:600; font-size:.82rem; cursor:pointer;}
.link-btn.small{font-size:.75rem; font-weight:600;}
#install-app-btn{display:block; margin:.9rem auto 0;}
#ios-install-hint{margin-top:.6rem;}
.found-user-card{display:flex; align-items:center; gap:.7rem; padding:.7rem; background:var(--surface-2); border-radius:12px;}
.found-user-card .avatar{width:44px; height:44px;}
.found-user-info{flex:1;}

.setting-row{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--border);}
.setting-row:last-of-type{border-bottom:none;}
.theme-swatches{display:flex; gap:.5rem;}
.swatch{width:30px; height:30px; border-radius:50%; border:2px solid var(--border);}
.swatch-dark{background:linear-gradient(135deg,#0B0F14,#7C6FF0);}
.swatch-light{background:linear-gradient(135deg,#F4F5F7,#6A5CE0);}
.swatch-midnight{background:linear-gradient(135deg,#0A0714,#B388FF);}
.swatch-forest{background:linear-gradient(135deg,#0D1512,#5FBF8E);}
.swatch.selected{border-color:var(--accent);}

.switch{position:relative; width:42px; height:24px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}
.slider{position:absolute; inset:0; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; transition:.15s; cursor:pointer;}
.slider::before{content:""; position:absolute; width:18px; height:18px; left:2px; top:2px; background:var(--muted); border-radius:50%; transition:.15s;}
.switch input:checked + .slider{background:var(--accent);}
.switch input:checked + .slider::before{transform:translateX(18px); background:var(--accent-text);}

.member-chip{display:flex; align-items:center; gap:.5rem; padding:.5rem 0;}

/* ===================== CALL OVERLAY ===================== */
.call-overlay{position:fixed; inset:0; background:rgba(5,7,10,.92); display:flex; align-items:center; justify-content:center; z-index:100;}
.call-card{text-align:center; color:#fff; width:min(420px,90vw); position:relative;}
.call-card h3{font-family:var(--font-display); margin-top:.8rem;}
.call-actions{display:flex; justify-content:center; gap:1rem; margin-top:2rem;}
.call-btn{width:54px; height:54px; border-radius:50%; background:#2A2F38; font-size:1.3rem;}
.call-btn.end{background:var(--danger);}
.call-btn.accept{background:var(--success);}
.remote-video{width:100%; border-radius:16px; margin-top:1rem; background:#000;}
.local-video{position:absolute; width:110px; bottom:8rem; right:0; border-radius:10px; background:#000;}

.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--surface-2); border:1px solid var(--border); padding:.6rem 1.1rem; border-radius:10px; font-size:.85rem; z-index:200;}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 820px){
  .app-grid{grid-template-columns:1fr;}
  .sidebar{position:absolute; inset:0; z-index:5;}
  .sidebar.hidden-mobile{display:none;}
  .chat-main{position:absolute; inset:0;}
  .only-mobile{display:flex;}
}