/* ══════════════════════════════════════════
   KIN DESIGN SYSTEM
   ══════════════════════════════════════════ */
:root {
  --bg: #060614;
  --bg2: #0d0d22;
  --surface: #1c1c38;
  --surface2: #22224a;
  --border: rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.11);
  --text: #eeeef8;
  --text2: #9494b8;
  --text3: #5a5a78;
  --accent: #c084fc;
  --accent2: #22d3ee;
  --red: #f87171;
  --amber: #fbbf24;
  --green: #4ade80;
  --nav-bg: rgba(6,6,20,0.92);
  --shim: rgba(255,255,255,0.022);
  --ov-bg: rgba(0,0,0,0.62);
  --r: 18px;
  --nav-h: 100px;
  --canvas-opacity: 0.45;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #f0f0f8; --bg2: #e4e4f0; --surface: #ffffff; --surface2: #f5f5fc;
  --border: rgba(0,0,0,0.07); --border2: rgba(0,0,0,0.12);
  --text: #1a1a2e; --text2: #5a5a7a; --text3: #9494b0;
  --nav-bg: rgba(240,240,248,0.94); --shim: rgba(0,0,0,0.012);
  --ov-bg: rgba(0,0,0,0.42); --canvas-opacity: 0.14; color-scheme: light;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:'Outfit',sans-serif; transition:background .4s,color .3s; }

/* ── CANVAS ── */
#bgCanvas { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:var(--canvas-opacity); transition:opacity .4s; }

/* ══════════════════════════════════════════
   APP SHELL
   Fixed, centred column. All child overlays
   (nav, sheets, chat screen) use the same
   left:0;right:0;margin:0 auto pattern so
   they sit squarely on mobile.
   ══════════════════════════════════════════ */
#app {
  position:fixed; inset:0; z-index:1;
  display:flex; flex-direction:column;
  max-width:430px;
  left:0; right:0; margin:0 auto;
  overflow:hidden;
}

/* ── SCREENS ── */
.screen {
  position:absolute; inset:0; display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transform:translateX(30px);
  transition:opacity .3s ease,transform .34s cubic-bezier(.4,0,.2,1);
  will-change:transform,opacity;
}
.screen.active { opacity:1; pointer-events:all; transform:translateX(0); }
.screen.exit-left { opacity:0; transform:translateX(-30px); pointer-events:none; }

/* ── HEADER ── */
.hdr { padding:calc(env(safe-area-inset-top,20px) + 14px) 22px 0; flex-shrink:0; position:relative; z-index:5; }
.hdr-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.wordmark { font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--text3); font-family:'JetBrains Mono',monospace; }
.hdr-right { display:flex; align-items:center; gap:8px; }
.icon-btn { width:32px; height:32px; border-radius:50%; background:var(--surface); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text2); transition:background .2s,transform .2s; flex-shrink:0; }
.icon-btn:active { transform:scale(.84); }
.page-title { font-size:28px; font-weight:800; letter-spacing:-.5px; line-height:1.15; margin-bottom:6px; }
.page-title span { background:linear-gradient(100deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-row { display:flex; gap:8px; margin-bottom:18px; }
.stat-pill { display:flex; align-items:center; gap:6px; padding:5px 12px; background:var(--surface); border:1px solid var(--border2); border-radius:99px; font-size:11px; font-weight:600; color:var(--text2); transition:background .3s,border-color .3s; }
.stat-dot { width:6px; height:6px; border-radius:50%; animation:sDot 2.8s ease-in-out infinite; }
@keyframes sDot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.5} }

/* ── SCROLL AREA ── */
.scroll-area { flex:1; overflow-y:auto; overflow-x:hidden; padding:4px 16px calc(var(--nav-h) + 20px); -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.scroll-area::-webkit-scrollbar { display:none; }

/* ══════════════════════════════════════════
   BOTTOM NAV  — left:0;right:0;margin:0 auto
   ══════════════════════════════════════════ */
.bnav {
  position:fixed; bottom:0;
  left:0; right:0; margin:0 auto;
  width:100%; max-width:430px;
  height:var(--nav-h);
  background:var(--nav-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-around;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 4px);
  z-index:50; transition:background .3s,border-color .3s;
}
.nbtn { display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; padding:10px 24px; background:none; border:none; transition:transform .2s cubic-bezier(.34,1.56,.64,1); position:relative; }
.nbtn:active { transform:scale(.82); }
.nbtn-icon { width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; transition:background .2s,box-shadow .2s; color:var(--text3); }
.nbtn.on .nbtn-icon { background:rgba(192,132,252,.13); box-shadow:0 0 18px rgba(192,132,252,.18); color:var(--accent); }
.nbtn-lbl { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text3); font-family:'JetBrains Mono',monospace; transition:color .2s; }
.nbtn.on .nbtn-lbl { color:var(--accent); }
.nbtn-badge { position:absolute; top:5px; right:10px; min-width:18px; height:18px; background:var(--accent); border-radius:99px; font-size:10px; font-weight:800; color:#fff; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); padding:0 4px; transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s; }

/* FAB */
#fab { width:62px; height:62px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; animation:fabPulse 3.5s ease-in-out infinite; transition:transform .25s cubic-bezier(.34,1.56,.64,1); flex-shrink:0; position:relative; z-index:1; }
#fab:active { transform:scale(.84); }
@keyframes fabPulse { 0%,100%{box-shadow:0 0 0 0 rgba(192,132,252,.4),0 4px 20px rgba(192,132,252,.35)} 50%{box-shadow:0 0 0 10px rgba(192,132,252,0),0 4px 28px rgba(192,132,252,.5)} }

/* ══════════════════════════════════════════
   FAB MENU  — same centering approach
   ══════════════════════════════════════════ */
.fmenu-wrap {
  position:fixed; bottom:calc(var(--nav-h) + 16px);
  left:0; right:0; margin:0 auto;
  width:100%; max-width:430px;
  display:flex; justify-content:center; gap:20px;
  z-index:90; opacity:0; pointer-events:none; transition:opacity .18s;
}
.fmenu-wrap.on { opacity:1; pointer-events:all; }
.fopt { display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; }
.fopt-icon { width:66px; height:66px; border-radius:50%; background:var(--surface2); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-size:28px; box-shadow:0 8px 28px rgba(0,0,0,.35); animation:fOptIn .3s cubic-bezier(.34,1.56,.64,1) both; transition:transform .14s,background .3s; }
.fopt:nth-child(1) .fopt-icon { animation-delay:.06s; }
.fopt:nth-child(2) .fopt-icon { animation-delay:.12s; }
.fopt-icon:active { transform:scale(.84); }
@keyframes fOptIn { from{opacity:0;transform:scale(.4) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
.fopt-lbl { font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text3); font-family:'JetBrains Mono',monospace; }

/* ── CONVERSATION CARDS ── */
.conv-card { display:flex; align-items:center; gap:14px; padding:14px 15px; background:var(--surface); border:1px solid var(--border); border-radius:16px; margin-bottom:8px; cursor:pointer; position:relative; overflow:hidden; animation:tIn .36s cubic-bezier(.34,1.56,.64,1) both; transition:transform .15s,box-shadow .2s,background .3s,border-color .3s; }
.conv-card::after { content:''; position:absolute; top:0; left:-100%; width:55%; height:100%; background:linear-gradient(90deg,transparent,var(--shim),transparent); animation:tShim 7s ease-in-out infinite; pointer-events:none; }
@keyframes tShim { 0%{left:-100%;opacity:0} 18%{opacity:1} 48%{left:130%;opacity:0} 100%{left:130%;opacity:0} }
.conv-card:active { transform:scale(.97); }
.conv-card:hover { box-shadow:0 4px 18px rgba(0,0,0,.1); }
.conv-card.closed { opacity:.42; }
.conv-avatar { width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,rgba(192,132,252,.2),rgba(34,211,238,.2)); border:1.5px solid rgba(192,132,252,.28); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; position:relative; }
.conv-online { position:absolute; bottom:1px; right:1px; width:11px; height:11px; border-radius:50%; background:var(--green); border:2px solid var(--surface); }
.conv-info { flex:1; min-width:0; }
.conv-name { font-size:15px; font-weight:700; color:var(--text); margin-bottom:3px; transition:color .3s; }
.conv-preview { font-size:13px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .3s; }
.conv-preview.unread { color:var(--text2); font-weight:600; }
.conv-meta { display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0; }
.conv-time { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text3); letter-spacing:.5px; }
.unread-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:sDot 2s ease-in-out infinite; }
.closed-tag { font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text3); padding:2px 7px; border-radius:99px; border:1px solid var(--border2); }

/* ── KIN CARDS ── */
.kin-card { display:flex; align-items:center; gap:14px; padding:14px 15px; background:var(--surface); border:1px solid var(--border); border-radius:16px; margin-bottom:8px; cursor:pointer; position:relative; animation:tIn .36s cubic-bezier(.34,1.56,.64,1) both; transition:transform .15s,background .3s,border-color .3s; }
.kin-card:active { transform:scale(.97); }
.kin-avatar { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,rgba(192,132,252,.18),rgba(34,211,238,.18)); border:1.5px solid rgba(192,132,252,.25); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.kin-info { flex:1; min-width:0; }
.kin-name { font-size:15px; font-weight:700; color:var(--text); margin-bottom:2px; }
.kin-handle { font-size:12px; color:var(--text3); font-family:'JetBrains Mono',monospace; }
.kin-actions { display:flex; gap:8px; }
.kin-action-btn { width:36px; height:36px; border-radius:11px; background:var(--bg2); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text2); transition:background .15s,color .15s,transform .15s; }
.kin-action-btn:active { transform:scale(.84); }
.kin-action-btn.msg { background:rgba(192,132,252,.1); color:var(--accent); border-color:rgba(192,132,252,.2); }

/* ══════════════════════════════════════════
   CHAT SCREEN
   Slides in from the right.
   Does NOT use inset:0 — that would fight
   with left:50% and halve the width on mobile.
   ══════════════════════════════════════════ */
#chatScreen {
  position:fixed;
  top:0; bottom:0;
  left:0; right:0; margin:0 auto;
  width:100%; max-width:430px;
  display:flex; flex-direction:column;
  background:var(--bg);
  transform:translateX(100vw);
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  z-index:60;
}
#chatScreen.open { transform:translateX(0); }

.chat-hdr { padding:calc(env(safe-area-inset-top,20px) + 10px) 16px 12px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border); background:var(--bg); flex-shrink:0; z-index:5; }
.chat-back { width:36px; height:36px; border-radius:11px; background:var(--surface); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text2); flex-shrink:0; transition:background .15s,transform .15s; }
.chat-back:active { transform:scale(.84); }
.chat-hdr-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,rgba(192,132,252,.2),rgba(34,211,238,.2)); border:1.5px solid rgba(192,132,252,.28); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.chat-hdr-info { flex:1; min-width:0; }
.chat-hdr-name { font-size:16px; font-weight:700; color:var(--text); }
.chat-hdr-status { font-size:11px; color:var(--text3); font-family:'JetBrains Mono',monospace; letter-spacing:.5px; }
.chat-hdr-actions { display:flex; gap:7px; }
.chat-hdr-btn { width:34px; height:34px; border-radius:10px; background:var(--surface); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text2); transition:background .15s,transform .15s; }
.chat-hdr-btn:active { transform:scale(.84); }
.chat-hdr-btn.close-conv { background:rgba(248,113,113,.08); color:var(--red); border-color:rgba(248,113,113,.2); }

.messages-area { flex:1; overflow-y:auto; overflow-x:hidden; padding:16px 16px 12px; -webkit-overflow-scrolling:touch; scrollbar-width:none; display:flex; flex-direction:column; gap:6px; }
.messages-area::-webkit-scrollbar { display:none; }

.msg-date-div { text-align:center; margin:12px 0 6px; }
.msg-date-div span { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text3); padding:3px 10px; background:var(--surface); border:1px solid var(--border); border-radius:99px; }

.msg-row { display:flex; animation:msgIn .28s cubic-bezier(.34,1.56,.64,1) both; }
.msg-row.me { justify-content:flex-end; }
.msg-row.them { justify-content:flex-start; }
@keyframes msgIn { from{opacity:0;transform:translateY(8px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }

.bubble { max-width:72%; padding:11px 15px; border-radius:18px; position:relative; word-break:break-word; line-height:1.5; font-size:15px; }
.msg-row.me .bubble { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border-bottom-right-radius:5px; }
.msg-row.them .bubble { background:var(--surface); border:1px solid var(--border2); color:var(--text); border-bottom-left-radius:5px; }
.bubble-time { display:block; font-size:10px; margin-top:4px; font-family:'JetBrains Mono',monospace; letter-spacing:.5px; opacity:.6; }
.msg-row.me .bubble-time { text-align:right; }

.conv-closed-banner { margin:16px 0; display:flex; flex-direction:column; align-items:center; gap:8px; animation:fadeUp .4s ease both; }
.closed-banner-pill { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text3); padding:5px 14px; background:var(--surface); border:1px solid var(--border2); border-radius:99px; }
.reopen-btn { font-size:12px; font-weight:700; color:var(--accent); background:rgba(192,132,252,.1); border:1px solid rgba(192,132,252,.2); border-radius:99px; padding:5px 14px; cursor:pointer; font-family:'Outfit',sans-serif; transition:background .15s,transform .15s; }
.reopen-btn:active { transform:scale(.94); }

.chat-input-bar { padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 14px); border-top:1px solid var(--border); background:var(--bg); flex-shrink:0; display:flex; align-items:flex-end; gap:10px; }
.chat-input-wrap { flex:1; background:var(--surface); border:1.5px solid var(--border2); border-radius:22px; padding:10px 16px; display:flex; align-items:center; transition:border-color .2s,box-shadow .2s; }
.chat-input-wrap:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(192,132,252,.12); }
#msgInput { flex:1; background:none; border:none; outline:none; color:var(--text); font-family:'Outfit',sans-serif; font-size:15px; font-weight:500; resize:none; max-height:120px; line-height:1.5; color-scheme:inherit; }
#msgInput::placeholder { color:var(--text3); }
.send-btn { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:transform .15s,opacity .15s; opacity:.5; }
.send-btn.ready { opacity:1; }
.send-btn:active { transform:scale(.84); }

/* ══════════════════════════════════════════
   SHEETS  — left:0;right:0;margin:0 auto
   ══════════════════════════════════════════ */
.bsheet {
  position:fixed; bottom:0;
  left:0; right:0; margin:0 auto;
  width:100%; max-width:430px;
  transform:translateY(100%);
  background:var(--surface); border-radius:28px 28px 0 0; border-top:1px solid var(--border2);
  padding:0 22px calc(env(safe-area-inset-bottom,0px) + 36px);
  z-index:200; transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .3s;
  max-height:88dvh; overflow-y:auto;
}
.bsheet.open { transform:translateY(0); }
.bs-hdl { width:36px; height:4px; border-radius:2px; background:var(--border2); margin:14px auto 22px; }
.bs-title { font-size:22px; font-weight:800; letter-spacing:-.3px; color:var(--text); margin-bottom:22px; }
.fg { margin-bottom:16px; }
.fl { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text3); font-family:'JetBrains Mono',monospace; display:block; margin-bottom:8px; }
.fl-hint { font-weight:400; letter-spacing:0; text-transform:none; font-family:'Outfit',sans-serif; font-size:10px; color:var(--text3); }
.fi { width:100%; background:var(--bg2); border:1px solid var(--border2); border-radius:13px; padding:13px 15px; color:var(--text); font-family:'Outfit',sans-serif; font-size:15px; font-weight:500; outline:none; -webkit-appearance:none; color-scheme:inherit; transition:border-color .2s,box-shadow .2s,background .3s; }
.fi:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(192,132,252,.14); }
.sbtn { width:100%; padding:16px; border-radius:14px; border:none; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; font-family:'Outfit',sans-serif; font-size:15px; font-weight:700; cursor:pointer; margin-top:18px; box-shadow:0 4px 20px rgba(192,132,252,.28); transition:transform .14s; letter-spacing:.3px; }
.sbtn:active { transform:scale(.97); }

.emj-row { display:flex; gap:7px; flex-wrap:wrap; }
.ej { width:42px; height:42px; border-radius:12px; border:1.5px solid var(--border); background:var(--bg2); display:flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer; transition:transform .14s,border-color .14s,background .3s; }
.ej.sel { border-color:var(--accent); transform:scale(1.1); background:rgba(192,132,252,.08); }

.custom-emj-inp { font-size:20px !important; letter-spacing:3px; }
.custom-emj-inp::placeholder { font-size:13px !important; letter-spacing:0; font-family:'Outfit',sans-serif; }

/* ── OVERLAY ── */
#ov { position:fixed; inset:0; background:var(--ov-bg); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); z-index:80; opacity:0; pointer-events:none; transition:opacity .25s; }
#ov.on { opacity:1; pointer-events:all; }

/* ══════════════════════════════════════════
   CONFIRM MODAL
   ══════════════════════════════════════════ */
.confirm-modal {
  position:fixed; bottom:0;
  left:0; right:0; margin:0 auto;
  width:100%; max-width:430px;
  transform:translateY(100%);
  background:var(--surface); border-radius:28px 28px 0 0; border-top:1px solid var(--border2);
  padding:0 22px calc(env(safe-area-inset-bottom,0px) + 28px);
  z-index:250; transition:transform .38s cubic-bezier(.34,1.56,.64,1);
}
.confirm-modal.open { transform:translateY(0); }
.confirm-title { font-size:20px; font-weight:800; color:var(--text); margin-bottom:8px; }
.confirm-body { font-size:14px; color:var(--text3); line-height:1.6; margin-bottom:24px; }
.confirm-actions { display:flex; gap:10px; }
.btn-ghost { flex:1; padding:14px; border-radius:14px; border:1px solid var(--border2); background:var(--bg2); color:var(--text2); font-family:'Outfit',sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:background .15s,transform .14s; }
.btn-ghost:active { transform:scale(.97); }
.btn-danger { flex:1; padding:14px; border-radius:14px; border:none; background:rgba(248,113,113,.12); color:var(--red); font-family:'Outfit',sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:background .15s,transform .14s; }
.btn-danger:active { transform:scale(.97); }

/* ── ONBOARDING ── */
#onboarding { position:fixed; inset:0; z-index:500; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px 28px; text-align:center; transition:opacity .6s ease; }
#onboarding.hiding { opacity:0; pointer-events:none; }
.ob-logo { width:80px; height:80px; border-radius:22px; background:linear-gradient(135deg,rgba(192,132,252,.15),rgba(34,211,238,.15)); border:1.5px solid rgba(192,132,252,.3); display:flex; align-items:center; justify-content:center; margin:0 auto 28px; animation:obPulse 2.5s ease-in-out infinite; }
@keyframes obPulse { 0%,100%{box-shadow:0 0 0 0 rgba(192,132,252,.25)} 50%{box-shadow:0 0 0 16px rgba(192,132,252,0)} }
.ob-title { font-size:34px; font-weight:900; letter-spacing:-.5px; background:linear-gradient(120deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:10px; }
.ob-tagline { font-size:15px; color:var(--text2); margin-bottom:36px; line-height:1.5; }
.ob-step { width:100%; max-width:340px; animation:fadeUp .5s ease both; }
.ob-step-title { font-size:22px; font-weight:800; margin-bottom:8px; color:var(--text); }
.ob-step-sub { font-size:14px; color:var(--text3); margin-bottom:24px; line-height:1.5; }
.ob-emj-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-bottom:16px; }
.ob-emj { aspect-ratio:1; border-radius:14px; border:1.5px solid var(--border); background:var(--surface); font-size:24px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s,transform .15s,background .15s; }
.ob-emj.sel { border-color:var(--accent); background:rgba(192,132,252,.1); transform:scale(1.08); }

/* ── SPLASH ── */
#splash { position:fixed; inset:0; background:var(--bg); z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity .7s ease,transform .7s ease; }
#splash.hiding { opacity:0; transform:scale(1.04); pointer-events:none; }
.splash-ring { width:90px; height:90px; border-radius:26px; background:linear-gradient(135deg,rgba(192,132,252,.15),rgba(34,211,238,.15)); border:1.5px solid rgba(192,132,252,.3); display:flex; align-items:center; justify-content:center; margin-bottom:28px; animation:splashPulse 2s ease-in-out infinite; }
@keyframes splashPulse { 0%,100%{box-shadow:0 0 0 0 rgba(192,132,252,.25)} 50%{box-shadow:0 0 0 18px rgba(192,132,252,0)} }
.splash-wordmark { font-size:36px; font-weight:900; letter-spacing:-.5px; background:linear-gradient(120deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:splashUp .6s .2s ease both; }
.splash-sub { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:var(--text3); margin-top:8px; animation:splashUp .6s .4s ease both; }
.splash-dots { display:flex; gap:6px; margin-top:36px; animation:splashUp .6s .6s ease both; }
.splash-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:dotBounce 1.2s ease-in-out infinite; }
.splash-dot:nth-child(2) { background:var(--accent2); animation-delay:.15s; }
.splash-dot:nth-child(3) { background:#f472b6; animation-delay:.3s; }
@keyframes dotBounce { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-8px);opacity:1} }
@keyframes splashUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ── TOAST ── */
.toast { position:fixed; top:64px; left:50%; transform:translateX(-50%) translateY(-80px); background:var(--surface); border:1px solid var(--border2); border-radius:99px; padding:10px 20px; font-size:13px; font-weight:600; color:var(--text); z-index:700; box-shadow:0 8px 32px rgba(0,0,0,.25); transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s; opacity:0; pointer-events:none; white-space:nowrap; max-width:calc(100vw - 48px); overflow:hidden; text-overflow:ellipsis; }
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* ── EMPTY STATES ── */
.empty { text-align:center; padding:52px 20px; animation:fadeUp .5s ease both; }
.eg { font-size:50px; margin-bottom:14px; display:inline-block; animation:gBob 3.2s ease-in-out infinite; }
@keyframes gBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.eh { font-size:16px; font-weight:700; margin-bottom:6px; color:var(--text); }
.ep { font-size:13px; color:var(--text3); line-height:1.6; }

.slbl { font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--text3); font-family:'JetBrains Mono',monospace; margin:14px 0 10px; }

/* ── SWIPE TO DELETE ── */
.sw-wrap { position:relative; overflow:hidden; border-radius:16px; margin-bottom:8px; animation:tIn .36s cubic-bezier(.34,1.56,.64,1) both; }
.sw-wrap .conv-card,.sw-wrap .kin-card { margin-bottom:0; position:relative; z-index:1; will-change:transform; animation:none; }
.sw-bg { position:absolute; right:0; top:0; bottom:0; width:90px; background:var(--red); display:flex; align-items:center; justify-content:center; border-radius:0 16px 16px 0; z-index:0; visibility:hidden; }
.sw-bg.active { visibility:visible; }
.sw-bg svg { transform:scale(0); transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
.sw-bg.show svg { transform:scale(1); }

/* ── PROFILE / SETTINGS ── */
.profile-card { background:var(--surface); border:1px solid var(--border2); border-radius:20px; padding:22px; text-align:center; margin-bottom:16px; }
.profile-avatar-lg { width:72px; height:72px; border-radius:50%; margin:0 auto 12px; background:linear-gradient(135deg,rgba(192,132,252,.2),rgba(34,211,238,.2)); border:2px solid rgba(192,132,252,.3); display:flex; align-items:center; justify-content:center; font-size:34px; }
.profile-name { font-size:22px; font-weight:800; color:var(--text); margin-bottom:4px; }
.profile-sub { font-size:13px; color:var(--text3); font-family:'JetBrains Mono',monospace; }
.settings-row { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:14px; margin-bottom:8px; cursor:pointer; transition:background .15s,transform .15s; }
.settings-row:active { transform:scale(.98); }
.settings-row-left { display:flex; align-items:center; gap:12px; }
.settings-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.settings-label { font-size:14px; font-weight:600; color:var(--text); }
.toggle-track { width:44px; height:26px; border-radius:99px; background:var(--border2); position:relative; cursor:pointer; transition:background .2s; flex-shrink:0; }
.toggle-track.on { background:var(--accent); }
.toggle-thumb { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .22s cubic-bezier(.34,1.56,.64,1); box-shadow:0 1px 4px rgba(0,0,0,.25); }
.toggle-track.on .toggle-thumb { transform:translateX(18px); }

@keyframes tIn { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }