:root{
  --bg:#090B12; --bg-2:#10131E; --chat:#121725; --surface:#181E2D;
  --accent:#A78BFA; --accent-2:#8B7CF6; --text:#F4F4F8; --text-2:#9299AC;
  --border:#252B3A; --in:#1B2232; --out:#6551B5; --danger:#F08A8A;
  --radius:12px; --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Fraunces",Georgia,serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.5 var(--font);-webkit-font-smoothing:antialiased}
.auth{min-height:100%;display:grid;place-items:center;padding:24px;padding-bottom:max(24px,env(safe-area-inset-bottom))}
.auth-card{width:100%;max-width:380px;background:var(--bg-2);border:1px solid var(--border);border-radius:16px;padding:32px 28px;display:flex;flex-direction:column}
.logo{font:400 30px/1.1 var(--serif);letter-spacing:.2px;margin:0 0 4px}
.muted{color:var(--text-2);margin:0 0 24px}
label{font-size:13px;color:var(--text-2);margin:14px 0 6px}
input{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:12px 14px;font:inherit;transition:border-color .15s}
input:focus{outline:none;border-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pw{position:relative}.pw input{padding-right:64px}
.ghost{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--text-2);font:inherit;font-size:13px;padding:8px;cursor:pointer;border-radius:8px}
.ghost:hover{color:var(--text)}
.primary{margin-top:22px;background:var(--accent-2);color:#0d0a1f;border:0;border-radius:var(--radius);padding:12px;font:500 15px var(--font);cursor:pointer;transition:background .15s,opacity .15s;width:100%}
.primary:hover{background:var(--accent)}
.primary:disabled{opacity:.6;cursor:progress}
.alert{background:rgba(240,138,138,.08);border:1px solid rgba(240,138,138,.35);color:var(--danger);border-radius:var(--radius);padding:10px 12px;font-size:14px;margin-bottom:4px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- App shell ---------- */
.app{height:100dvh;display:grid;grid-template-columns:300px minmax(0,1fr);background:var(--bg)}
.logo.sm{font-size:22px;margin:0}
.sidebar{background:var(--bg-2);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.side-top{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px}
.convo{display:flex;gap:12px;align-items:center;margin:4px 10px;padding:10px;border-radius:var(--radius);color:inherit;text-decoration:none;transition:background .15s}
.convo:hover{background:rgba(255,255,255,.03)}
.convo.active{background:var(--surface)}
.convo-text{display:flex;flex-direction:column;min-width:0}
.convo-name{font-weight:500}
.convo-sub{font-size:13px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-bottom{margin-top:auto;border-top:1px solid var(--border);padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.conn{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--text-2);flex:none}
.conn[data-state=on] .dot{background:#6FCF97}
.conn[data-state=retry] .dot{background:#E5B567}
.me{display:flex;align-items:center;gap:10px}
.me-name{flex:1;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis}

.avatar{width:42px;height:42px;border-radius:50%;flex:none;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;font:400 18px var(--serif);color:var(--accent);overflow:hidden}
.avatar.sm{width:32px;height:32px;font-size:14px}
.avatar img{width:100%;height:100%;object-fit:cover}
.icon-btn{background:none;border:0;color:var(--text-2);width:38px;height:38px;border-radius:10px;display:grid;place-items:center;cursor:pointer;font-size:24px;line-height:1;transition:background .15s,color .15s}
.icon-btn:hover:not(:disabled){background:var(--surface);color:var(--text)}
.icon-btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- Chat ---------- */
.chat{background:var(--chat);display:flex;flex-direction:column;min-width:0;min-height:0}
.chat-head{display:flex;align-items:center;gap:12px;padding:12px 20px;padding-top:max(12px,env(safe-area-inset-top));border-bottom:1px solid var(--border);background:var(--bg-2)}
.head-text h2{font-size:16px;font-weight:500;margin:0;line-height:1.25}
.status{margin:0;font-size:12.5px;color:var(--text-2);min-height:18px}
.status.online{color:#6FCF97}
.messages{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px;display:flex;flex-direction:column;gap:2px;scroll-behavior:smooth}
.messages:focus{outline:none}
.empty{margin:auto;text-align:center;padding:24px}
.empty .serif{font:400 26px/1.3 var(--serif);margin:0 0 6px}
.empty .muted{margin:0}

.date-sep{align-self:center;margin:18px 0 10px;font-size:12px;color:var(--text-2);background:var(--bg-2);border:1px solid var(--border);padding:3px 12px;border-radius:999px}
.msg{max-width:min(68%,560px);width:fit-content;padding:8px 12px 6px;border-radius:16px;background:var(--in);word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap;position:relative}
.msg.in{align-self:flex-start;border-bottom-left-radius:5px}
.msg.out{align-self:flex-end;background:var(--out);border-bottom-right-radius:5px}
.msg + .msg.in,.msg + .msg.out{margin-top:0}
.msg.in + .msg.out,.msg.out + .msg.in{margin-top:10px}
.msg .meta{display:flex;gap:6px;justify-content:flex-end;font-size:11px;color:rgba(244,244,248,.6);margin-top:2px;user-select:none}
.msg.in .meta{color:var(--text-2)}
.msg.deleted{background:transparent;border:1px dashed var(--border);color:var(--text-2);font-style:italic}
.msg mark{background:rgb(var(--accent-rgb) / .35);color:inherit;border-radius:3px}
.typing{padding:4px 22px 6px;font-size:13px;color:var(--text-2)}

.composer{display:flex;align-items:flex-end;gap:6px;padding:10px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:var(--bg-2);border-top:1px solid var(--border)}
.composer textarea{flex:1;resize:none;max-height:140px;border-radius:20px;padding:10px 16px;line-height:1.4;overflow-y:auto}
.composer textarea:disabled{opacity:.55}
.send{width:40px;height:40px;border-radius:50%;border:0;background:var(--accent-2);color:#0d0a1f;display:grid;place-items:center;cursor:pointer;flex:none;transition:opacity .15s,background .15s}
.send:disabled{opacity:.35;cursor:not-allowed}
.send:hover:not(:disabled){background:var(--accent)}

/* ---------- Dialog / switch ---------- */
.modal{background:var(--bg-2);color:var(--text);border:1px solid var(--border);border-radius:16px;padding:24px;width:min(360px,calc(100vw - 32px))}
.modal::backdrop{background:rgba(5,6,10,.7)}
.modal h3{margin:0 0 14px;font-weight:500}
.switch-row{display:flex;justify-content:space-between;align-items:center;margin:0;font-size:15px;color:var(--text)}
.switch-row input{appearance:none;width:42px;height:24px;border-radius:999px;background:var(--surface);border:1px solid var(--border);position:relative;cursor:pointer;padding:0;transition:background .15s}
.switch-row input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--text-2);transition:transform .15s,background .15s}
.switch-row input:checked{background:var(--out)}
.switch-row input:checked::after{transform:translateX(18px);background:var(--text)}
.small{font-size:13px;margin:14px 0 0}
.modal-actions{display:flex;justify-content:flex-end;margin-top:14px}
.quiet,.danger{font:500 14px var(--font);border-radius:10px;padding:9px 14px;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text)}
.danger{color:var(--danger);width:100%;margin-top:6px;background:transparent}
.modal-logout{border-top:1px solid var(--border);margin-top:16px;padding-top:12px}
.only-mobile{display:none}
.scrim{position:fixed;inset:0;background:rgba(5,6,10,.6);z-index:20}

/* ---------- Phase 3 ---------- */
.chat{position:relative}
.pill{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);background:var(--accent-2);color:#0d0a1f;border:0;border-radius:999px;padding:7px 14px;font:500 13px var(--font);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4);z-index:5}
.older{align-self:center;color:var(--text-2);font-size:12px;padding:6px}
.msg .tick.pending{opacity:.7}
.msg .tick.err{color:var(--danger)}
.msg .copy{position:absolute;top:-10px;right:8px;opacity:0;pointer-events:none}

/* ---------- Phase 4 ---------- */
.tick{letter-spacing:-2px;font-size:11px}
.tick.read{color:var(--accent-soft)}.tick.err{color:var(--danger)}
.msg.in .tick.read{color:var(--accent)}
.msg.media{padding:4px 4px 6px}.msg.media .meta{padding:0 8px}
.photo-btn{display:block;border:0;background:none;padding:0;cursor:zoom-in;border-radius:12px;overflow:hidden;line-height:0}
.photo{display:block;max-width:min(300px,100%);max-height:340px;min-width:140px;min-height:90px;width:auto;height:auto;object-fit:cover;border-radius:12px;background:var(--surface)}
.msg.voice{min-width:240px}
.player{display:flex;align-items:center;gap:10px;padding:4px 8px 0 4px;min-width:0}
.play{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:var(--text);display:grid;place-items:center;cursor:pointer;flex:none}
.play:hover{background:rgba(255,255,255,.22)}
.seek{flex:1;min-width:0;width:auto;padding:0;border:0;background:none;height:20px;accent-color:var(--accent);cursor:pointer}
.ptime{font-size:12px;color:rgba(244,244,248,.7);min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
.msg.in .ptime{color:var(--text-2)}
.rec-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:var(--bg-2);border-top:1px solid var(--border)}
.rec-live{flex:1;display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.rec-preview{flex:1;min-width:0}
.rec-bar[data-state=recording] .rec-preview,.rec-bar[data-state=recording] #rec-send,
.rec-bar[data-state=preview] .rec-live,.rec-bar[data-state=preview] #rec-stop{display:none}
.rec-bar .player{padding:0}.rec-bar .ptime{color:var(--text-2)}
.img-prev{width:100%;max-height:50vh;object-fit:contain;border-radius:10px;background:var(--surface);display:block}
#img-dialog progress{width:100%;margin-top:12px;accent-color:var(--accent)}
#img-dialog .alert{margin:12px 0 0}
.modal-actions.two{gap:8px}.quiet.accent{background:var(--accent-2);color:#0d0a1f;border-color:transparent}
.quiet:disabled{opacity:.5;cursor:not-allowed}
a.quiet{text-decoration:none;display:inline-block}
.viewer{background:rgba(5,6,10,.97);border:0;padding:0;margin:0;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;color:var(--text)}
.viewer[open]{display:grid;place-items:center}
.viewer::backdrop{background:#000}
.viewer img{max-width:100vw;max-height:calc(100dvh - 70px);object-fit:contain}
.viewer-bar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:flex-end;gap:8px;padding:12px;padding-top:max(12px,env(safe-area-inset-top))}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border);padding:10px 16px;border-radius:12px;z-index:60;max-width:90vw;font-size:14px;text-align:center}
@media (prefers-reduced-motion:reduce){.rec-dot{animation:none}}

/* ---------- Phase 5 ---------- */
.head-text{flex:1;min-width:0}
.msg-actions{position:absolute;top:-15px;display:flex;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:2px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:2}
.msg.out .msg-actions{right:8px}.msg.in .msg-actions{left:8px}
.msg:hover .msg-actions,.msg:focus-within .msg-actions,.msg.show-actions .msg-actions{opacity:1;pointer-events:auto}
.msg-actions button{background:none;border:0;color:var(--text-2);font:500 12px var(--font);padding:5px 9px;border-radius:8px;cursor:pointer}
.msg-actions button:hover{background:var(--bg-2);color:var(--text)}
.msg.flash{animation:flash 2.2s ease-out}
@keyframes flash{0%,35%{box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .55)}100%{box-shadow:0 0 0 3px transparent}}
.search{display:flex;gap:8px;padding:8px 14px;background:var(--bg-2);border-bottom:1px solid var(--border)}
.search input{border-radius:999px;padding:9px 16px}
.search-panel{position:absolute;left:0;right:0;top:100%;max-height:min(60dvh,420px);overflow-y:auto;background:var(--bg-2);border-bottom:1px solid var(--border);z-index:8;box-shadow:0 12px 24px rgba(0,0,0,.35)}
.result{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--border);color:var(--text);padding:10px 16px;cursor:pointer;font:inherit}
.result:hover,.result:focus-visible{background:var(--surface)}
.result .who{font-size:12px;color:var(--text-2)}
.result .snippet{overflow-wrap:anywhere}
.search-note{padding:16px;margin:0}
mark{background:rgb(var(--accent-rgb) / .35);color:inherit;border-radius:3px;padding:0 1px}
.settings{max-height:92dvh;overflow-y:auto}
.settings section{border-top:1px solid var(--border);padding:14px 0 4px}
.settings h4{margin:0 0 10px;font:500 13px var(--font);color:var(--text-2)}
.avatar-row{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.inline-form{display:flex;flex-direction:column}
.inline-form label{margin:10px 0 5px}
.inline-form .row{display:flex;gap:8px}
.inline-form .quiet{margin-top:12px;align-self:flex-start}.inline-form .row .quiet{margin-top:0}
.inline-form .alert{margin:10px 0 0}
.quiet.danger-fill{background:var(--danger);border-color:transparent;color:#1a0b0b}
.search-wrap{position:relative;flex:none}

/* ---------- Replies ---------- */
.quote{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;background:rgba(0,0,0,.2);border:0;border-left:3px solid var(--accent);border-radius:8px;padding:5px 9px;margin:0 0 4px;color:inherit;font:inherit;font-size:13px;cursor:pointer}
.msg.media .quote{margin:4px 4px 4px;width:calc(100% - 8px)}
.q-who{font-weight:600;font-size:12px;color:var(--accent)}
.msg.out .q-who{color:var(--accent-soft)}
.q-text{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.msg.out .q-text{color:rgba(244,244,248,.75)}
.reply-bar{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--bg-2);border-top:1px solid var(--border)}
.reply-text{flex:1;min-width:0;display:flex;flex-direction:column;border-left:3px solid var(--accent);padding-left:10px}

/* ---------- Camera ---------- */
.cam[open]{display:flex;align-items:center;justify-content:center;position:fixed;inset:0}
.cam video,.cam img{width:100%;height:100%;max-width:100vw;max-height:100dvh;object-fit:contain;background:#000}
.cam video.mirror{transform:scaleX(-1)}
.cam-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:8px;padding:12px;padding-top:max(12px,env(safe-area-inset-top))}
.cam-bar{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:12px;padding:16px;padding-bottom:max(26px,env(safe-area-inset-bottom))}
.shutter{width:70px;height:70px;border-radius:50%;border:4px solid #fff;background:rgba(255,255,255,.88);box-shadow:inset 0 0 0 3px #000;cursor:pointer}
.shutter:active{transform:scale(.94)}
.cam progress{position:absolute;left:16px;right:16px;bottom:96px;width:calc(100% - 32px);accent-color:var(--accent)}
.cam-error{position:absolute;left:16px;right:16px;bottom:130px;margin:0}
.cam .quiet{background:rgba(24,30,45,.8);backdrop-filter:blur(6px)}
.cam .quiet.accent{background:var(--accent-2)}

/* ---------- Polish ---------- */
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
.logo span{color:var(--accent)}
.logo.sm{font-size:26px;letter-spacing:.3px}
.auth{background:radial-gradient(640px 420px at 50% 0%,rgb(var(--accent-rgb) / .14),transparent 70%),var(--bg)}
.auth-card{box-shadow:0 24px 60px rgba(0,0,0,.45);animation:rise .35s ease-out}
.auth-card .logo{font-size:44px;text-align:center;margin-bottom:6px}
.auth-card .muted{text-align:center}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.messages{background-image:radial-gradient(rgba(255,255,255,.028) 1px,transparent 1px);background-size:22px 22px}
.msg{border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.25);line-height:1.45}
.msg.in{border-bottom-left-radius:6px}
.msg.out{border-bottom-right-radius:6px;box-shadow:0 2px 10px rgb(var(--out-rgb) / .3)}
.msg.deleted{box-shadow:none}
.msg.enter{animation:pop .18s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.avatar{position:relative;overflow:visible}
.avatar img{border-radius:50%}
.avatar.online::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#6FCF97;border:2px solid var(--bg-2)}
.avatar.sm.online::after{width:9px;height:9px}
.convo{border:1px solid transparent}
.convo.active{background:var(--surface);border-color:var(--border)}
.chat-head{box-shadow:0 1px 0 rgba(0,0,0,.2)}
.head-text h2{font-size:16.5px;letter-spacing:.1px}
.composer{gap:8px}
.composer textarea{background:var(--surface);border-radius:22px;padding:11px 18px}
.send{box-shadow:0 4px 14px rgb(var(--accent-rgb) / .35)}
.send:disabled{box-shadow:none}
.pair{display:flex;justify-content:center;margin-bottom:18px}
.pair .avatar{width:58px;height:58px;font-size:24px;border:2px solid var(--chat)}
.pair .avatar+.avatar{margin-left:-14px;color:var(--text)}
.date-sep{letter-spacing:.2px}
@media (prefers-reduced-motion:reduce){.msg.enter,.auth-card{animation:none}}

/* ---------- Themes (pick in Settings; saved on each device) ---------- */
:root,:root[data-theme="violet"],.tile[data-theme="violet"]{--bg:#090B12;--bg-2:#10131E;--chat:#121725;--surface:#181E2D;--accent:#A78BFA;--accent-2:#8B7CF6;--text-2:#9299AC;--border:#252B3A;--in:#1B2232;--out:#6551B5;--out-bg:#6551B5;--accent-rgb:139 124 246;--out-rgb:101 81 181;--accent-soft:#CDBEFF;--wall:radial-gradient(rgba(255,255,255,.028) 1px,transparent 1px) 0 0/22px 22px,#121725}
:root[data-theme="love"],.tile[data-theme="love"]{--bg:#12060B;--bg-2:#1B0A12;--chat:#1E0B14;--surface:#2A1220;--accent:#FF7AA8;--accent-2:#F0507F;--text-2:#C79DB1;--border:#3D1B2D;--in:#2D1422;--out:#C21E56;--out-bg:linear-gradient(135deg,#E8457A,#C21E56);--accent-rgb:240 80 127;--out-rgb:200 30 86;--accent-soft:#FFD0E1;--wall:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='%23FF7AA8' fill-opacity='.085'%3E%3Cpath transform='translate(8 10) rotate(-14 12 12)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3Cpath transform='translate(48 46) scale(.75) rotate(16 12 12)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/g%3E%3C/svg%3E") 0 0/84px 84px,radial-gradient(520px 360px at 85% 0%,rgba(240,80,127,.2),transparent 70%),#1E0B14}
:root[data-theme="sunset"],.tile[data-theme="sunset"]{--bg:#0F0A10;--bg-2:#1A1017;--chat:#1D1118;--surface:#291A22;--accent:#FFA25C;--accent-2:#FF7E4D;--text-2:#C2A5AA;--border:#3C2630;--in:#2B1B22;--out:#C9486A;--out-bg:linear-gradient(135deg,#D9622B,#B8346B);--accent-rgb:255 126 77;--out-rgb:184 52 107;--accent-soft:#FFD9BF;--wall:linear-gradient(170deg,rgba(255,138,76,.16),rgba(224,69,123,.11) 55%,transparent 92%),#1D1118}
:root[data-theme="ocean"],.tile[data-theme="ocean"]{--bg:#06101A;--bg-2:#0B1A29;--chat:#0D1F31;--surface:#142C42;--accent:#5ED3F3;--accent-2:#2FB8E6;--text-2:#8FAAC0;--border:#1E3A55;--in:#143049;--out:#1560A8;--out-bg:linear-gradient(135deg,#1F8FD0,#1560A8);--accent-rgb:47 184 230;--out-rgb:21 96 168;--accent-soft:#BFEBFA;--wall:radial-gradient(520px 320px at 15% 100%,rgba(47,184,230,.17),transparent 70%),radial-gradient(520px 320px at 92% 0%,rgba(31,143,208,.15),transparent 70%),#0D1F31}
:root[data-theme="cotton"],.tile[data-theme="cotton"]{--bg:#0D0A14;--bg-2:#161022;--chat:#1A1330;--surface:#251C40;--accent:#F9A8D4;--accent-2:#C4B5FD;--text-2:#B3A6D0;--border:#37285A;--in:#271D45;--out:#7B63D8;--out-bg:linear-gradient(135deg,#B06AD8,#6C7BE8);--accent-rgb:196 181 253;--out-rgb:130 110 225;--accent-soft:#EADFFF;--wall:linear-gradient(160deg,rgba(249,168,212,.15),rgba(196,181,253,.10) 50%,rgba(125,211,252,.10)),#1A1330}
:root[data-theme="midnight"],.tile[data-theme="midnight"]{--bg:#070B14;--bg-2:#0D1422;--chat:#0F1728;--surface:#152036;--accent:#7DB4FF;--accent-2:#5B9BF5;--text-2:#93A0B8;--border:#1F2B42;--in:#172238;--out:#2B5CC4;--out-bg:#2B5CC4;--accent-rgb:91 155 245;--out-rgb:43 92 196;--accent-soft:#C7DDFF;--wall:radial-gradient(rgba(255,255,255,.028) 1px,transparent 1px) 0 0/22px 22px,#0F1728}
:root[data-theme="emerald"],.tile[data-theme="emerald"]{--bg:#060F0D;--bg-2:#0C1916;--chat:#0E1D19;--surface:#142822;--accent:#5EE0C6;--accent-2:#34C9AB;--text-2:#8CA7A0;--border:#1E3731;--in:#162824;--out:#1D7765;--out-bg:#1D7765;--accent-rgb:52 201 171;--out-rgb:29 119 101;--accent-soft:#B5F2E5;--wall:radial-gradient(rgba(255,255,255,.028) 1px,transparent 1px) 0 0/22px 22px,#0E1D19}
:root[data-theme="amber"],.tile[data-theme="amber"]{--bg:#0E0B08;--bg-2:#171210;--chat:#1B1510;--surface:#241C14;--accent:#F6C777;--accent-2:#EBAE4A;--text-2:#B0A28E;--border:#342A1D;--in:#271E15;--out:#8C5A18;--out-bg:#8C5A18;--accent-rgb:235 174 74;--out-rgb:140 90 24;--accent-soft:#FCE3B0;--wall:radial-gradient(rgba(255,255,255,.028) 1px,transparent 1px) 0 0/22px 22px,#1B1510}

.messages{background:var(--wall)}
.msg.out{background:var(--out-bg)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 8px;padding-bottom:10px}
.tile-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.tile{width:100%;aspect-ratio:3/4;border-radius:14px;border:2px solid rgba(255,255,255,.14);background:var(--wall);padding:6px 0;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;overflow:hidden}
.tile[aria-checked="true"]{border-color:#fff;box-shadow:0 0 0 2px rgb(var(--accent-rgb) / .6)}
.tile .b{display:block;height:13px;border-radius:7px;width:56%;margin:0 7px}
.tile .b.in{background:var(--in)}
.tile .b.out{background:var(--out-bg);margin-left:auto}
.tile-name{font-size:12px;color:var(--text-2);text-align:center;white-space:nowrap}

/* ---------- Reactions ---------- */
.msg.has-react{margin-bottom:15px}
.reactions{position:absolute;bottom:-13px;display:flex;gap:3px;align-items:center;white-space:nowrap;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:999px;padding:1px 7px;font:inherit;font-size:13px;line-height:1.55;cursor:pointer;z-index:1;box-shadow:0 2px 6px rgba(0,0,0,.35);animation:react-pop .18s ease-out}
.msg.out .reactions{right:10px}.msg.in .reactions{left:10px}
@keyframes react-pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.react-picker{position:fixed;z-index:70;display:flex;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:5px 7px;box-shadow:0 10px 28px rgba(0,0,0,.5);animation:react-pop .14s ease-out}
.react-picker button{width:40px;height:40px;border:0;border-radius:50%;background:none;font-size:23px;line-height:1;cursor:pointer;transition:transform .12s;padding:0}
.react-picker button:hover,.react-picker button:focus-visible{transform:scale(1.22)}
.react-picker button.on{background:rgb(var(--accent-rgb) / .28)}
.burst{position:absolute;left:50%;top:50%;font-size:38px;pointer-events:none;z-index:3;animation:burst .8s ease-out forwards}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}30%{opacity:1;transform:translate(-50%,-60%) scale(1.25)}100%{opacity:0;transform:translate(-50%,-120%) scale(1)}}
@media (prefers-reduced-motion:reduce){.reactions,.react-picker,.burst{animation:none}}

/* ---------- Swipe to reply ---------- */
.messages{overflow-x:hidden}
.msg{touch-action:pan-y}
.msg::before{content:"\21A9";position:absolute;left:-36px;top:50%;width:28px;height:28px;margin-top:-14px;display:grid;place-items:center;border-radius:50%;background:var(--surface);color:var(--accent);font-size:16px;line-height:1;opacity:var(--p,0);transform:scale(calc(.5 + var(--p,0) * .5));pointer-events:none}
@media (hover:none){.msg-actions button[data-act="reply"]{display:none}}   /* touch screens reply by swiping */

/* ---------- Stickers ---------- */
.msg.sticker.out,.msg.sticker.in{background:none;box-shadow:none;border:0;padding:2px 4px 4px}
.msg.sticker .meta{color:var(--text-2)}
.sticker-img{display:block;width:140px;height:140px;-webkit-user-drag:none;user-select:none}
.sticker-emoji{display:block;font-size:64px;line-height:1.15}
.input-wrap{position:relative;flex:1;min-width:0;display:flex}
.input-wrap textarea{width:100%;padding-right:44px}
.in-btn{position:absolute;right:6px;bottom:6px;width:32px;height:32px;border-radius:50%;border:0;background:none;color:var(--text-2);display:grid;place-items:center;cursor:pointer;padding:0}
.in-btn:hover,.in-btn[aria-pressed="true"]{color:var(--accent)}
.composer #send{display:none}
.composer.has-text #send{display:grid}
.composer.has-text #mic-btn{display:none}
.sticker-panel{display:flex;flex-direction:column;flex:none;height:min(300px,42dvh);background:var(--bg-2);border-top:1px solid var(--border)}
.sticker-tabs{display:flex;align-items:center;gap:6px;padding:8px 12px 4px}
.sticker-tabs [role="tab"]{background:none;border:0;color:var(--text-2);font:500 14px var(--font);padding:6px 14px;border-radius:999px;cursor:pointer}
.sticker-tabs [role="tab"][aria-selected="true"]{background:var(--surface);color:var(--text)}
#sticker-close{margin-left:auto}
.sticker-grid{flex:1;min-height:0;overflow-y:auto;padding:8px 12px 12px;display:grid;gap:8px;align-content:start}
.sticker-grid[data-kind="kaju"]{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.sticker-grid[data-kind="emoji"]{grid-template-columns:repeat(auto-fill,minmax(46px,1fr))}
.sticker-item,.emoji-item{background:none;border:0;border-radius:12px;cursor:pointer;padding:4px;transition:background .12s,transform .12s}
.sticker-item img{display:block;width:100%;height:auto}
.emoji-item{font-size:28px;line-height:1.3}
.sticker-item:hover,.emoji-item:hover,.sticker-item:focus-visible,.emoji-item:focus-visible{background:var(--surface);transform:scale(1.06)}