:root{
  /* app — dark purple theme */
  --bg:#0d0d0f;--surface:#18181f;--surface2:#22222c;--ink:#f0f0f5;
  --muted:#6b6b80;--accent:#7c3aed;--accent2:#a78bfa;--line:#2a2a35;
  --radius:14px;
  --safe-top:env(safe-area-inset-top,0px);--safe-bot:env(safe-area-inset-bottom,0px);
  /* chat — premium dark graphite + indigo */
  --ch-bg:#09090b;
  --ch-head:#121214;--ch-input:#121214;--ch-line:#27272a;
  --ch-ink:#e9edef;--ch-muted:#8696a0;
  --ch-me:#4f46e5;--ch-me2:#6366f1;--ch-me-ink:#fff;
  --ch-them:rgba(39,39,42,.65);--ch-them2:#323238;--ch-them-ink:#f3f4f6;
  --ch-sent-bg:rgba(31,41,55,.72);
  --ch-indigo:#4f46e5;
  --ch-snap-yellow:#FFFC00;
  --ch-wa-green:#00a884;--ch-wa-green2:#25d366;
  --ch-tail-me:4px;--ch-tail-them:4px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html{font-size:100%}
html,body{height:100%;overflow-x:hidden}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);
  padding-top:var(--safe-top);padding-bottom:var(--safe-bot);
  overscroll-behavior-y:none;-webkit-font-smoothing:antialiased}
.wrap{max-width:680px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}

/* ── header ── */
header{padding:18px 18px 10px;display:flex;align-items:center;gap:12px}
.logo{width:36px;height:36px;border-radius:10px;background:var(--accent);
  display:grid;place-items:center;font-size:18px;flex:0 0 auto;
  cursor:default;user-select:none;box-shadow:0 4px 14px #7c3aed44}
.brand{flex:1}
.brand h1{font-size:20px;font-weight:700;letter-spacing:-.3px;color:var(--ink);
  user-select:none;cursor:default}
.brand small{font-size:11px;color:var(--muted);letter-spacing:.2px}
.refresh-btn{background:none;border:none;color:var(--muted);font-size:18px;
  padding:6px;cursor:pointer;border-radius:8px;transition:color .2s}
.refresh-btn:active{color:var(--accent2)}
.refresh-btn.spinning{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── search ── */
.search{margin:4px 18px 16px;position:relative}
.search input{width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:11px 14px 11px 38px;font-size:15px;
  color:var(--ink);outline:none}
.search input::placeholder{color:var(--muted)}
.search input:focus{border-color:#7c3aed66}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--muted)}

/* ── category tabs ── */
.tabs{display:flex;gap:8px;padding:0 18px 14px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;padding:7px 16px;border-radius:20px;font-size:13px;
  font-weight:600;cursor:pointer;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);white-space:nowrap;transition:all .15s}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ── update banner ── */
.banner{margin:0 18px 14px;background:linear-gradient(135deg,#1e1030,#2a1a4a);
  border:1px solid #7c3aed44;border-radius:12px;padding:12px 14px;
  display:flex;align-items:center;gap:10px;display:none}
.banner.show{display:flex}
.banner span{flex:1;font-size:13px;color:var(--accent2)}

/* ── prompt cards ── */
.list{padding:0 18px 100px;display:flex;flex-direction:column;gap:10px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;cursor:pointer;transition:border-color .15s,transform .1s;position:relative}
.card:active{transform:scale(.99)}
.card:hover{border-color:#7c3aed55}
.card-icon{font-size:22px;margin-bottom:8px}
.card h3{font-size:16px;font-weight:650;margin-bottom:4px;color:var(--ink)}
.card p{font-size:13px;color:var(--muted);line-height:1.4}
.card-badge{position:absolute;top:12px;right:12px;background:#7c3aed22;
  color:var(--accent2);font-size:10px;font-weight:700;padding:3px 8px;
  border-radius:20px;letter-spacing:.3px}
.new-badge{background:#065f4622;color:#34d399}

/* ── prompt detail ── */
#detail{display:none;position:fixed;inset:0;background:var(--bg);z-index:40;
  flex-direction:column;padding-top:var(--safe-top);overflow-y:auto}
#detail.show{display:flex}
.dhead{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line);position:sticky;top:0;
  background:var(--bg);z-index:2}
.dhead h2{flex:1;font-size:18px;font-weight:700}
.dbk{background:none;border:none;color:var(--accent2);font-size:22px;
  cursor:pointer;padding:4px 8px}
.dbody{padding:20px 18px 40px}
.dlabel{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.ddesc{font-size:15px;color:var(--muted);margin-bottom:20px;line-height:1.5}
.prompt-box{background:var(--surface2);border:1px solid var(--line);border-radius:12px;
  padding:16px;font-size:14px;line-height:1.7;color:var(--ink);
  white-space:pre-wrap;word-break:break-word;font-family:inherit}
.copy-btn{margin-top:14px;width:100%;background:var(--accent);color:#fff;border:none;
  border-radius:12px;padding:14px;font-size:16px;font-weight:600;cursor:pointer;
  transition:opacity .15s}
.copy-btn:active{opacity:.8}
.copy-btn.copied{background:#065f46}

/* ── chat ── */
#chat{display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;
  background:var(--ch-bg);z-index:200;flex-direction:column;
  padding-top:var(--safe-top);overflow:hidden;
  -webkit-overflow-scrolling:touch;
  --ch-fs-msg:1rem;
  --ch-fs-caption:0.875rem;
  --ch-fs-meta:0.75rem;
  --ch-lh-msg:1.8;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Nastaliq Urdu",Helvetica,Arial,sans-serif}
#chat::before{content:'';position:absolute;top:0;bottom:0;left:50%;
  width:100%;max-width:680px;z-index:0;pointer-events:none;
  -webkit-backface-visibility:hidden;
  transform:translateX(-50%) translateZ(0);
  background-color:var(--ch-bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 15%,rgba(79,70,229,.08),transparent 55%),
    radial-gradient(ellipse 60% 40% at 85% 80%,rgba(255,252,0,.03),transparent 50%),
    repeating-radial-gradient(circle,rgba(255,255,255,.015) 0 1px,transparent 1px 22px)}
#chat.show{display:flex}
#chat .msgs{position:relative;z-index:1}
#chat .chead,#chat .select-bar,#chat .chat-search{position:relative;z-index:25}
#chat .status-bar{position:relative;z-index:20}
#chat .cinput,#chat .typing-indicator,#chat .emoji-bar,#chat .reply-preview,#chat .edit-preview{position:relative;z-index:15}
body.chat-open{overflow:hidden;position:fixed;width:100%;height:100%}
body.chat-open .wrap,
body.chat-open #detail{display:none!important}
.chead,.msgs,.cinput{width:100%;max-width:680px;margin-left:auto;margin-right:auto}
.chead{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--ch-line);background:var(--ch-head);flex-shrink:0;
  position:relative;isolation:isolate}
.chead .ttl{font-weight:650;flex:1;color:var(--ch-ink)}

/* ── multi-select delete ── */
.select-bar{display:none;align-items:center;gap:8px;padding:10px 14px;
  border-bottom:1px solid var(--ch-line);background:var(--ch-head);flex-shrink:0;
  max-width:680px;width:100%;margin:0 auto}
#chat.select-mode .select-bar{display:flex}
#chat.select-mode .chead .ttl,
#chat.select-mode .chead #chatSearchBtn,
#chat.select-mode .chead #chatMenuBtn{display:none}
#chat.select-mode .cinput,
#chat.select-mode .emoji-bar,
#chat.select-mode .typing-indicator{display:none!important}
#chat.select-mode .msgs{padding-left:12px;padding-right:12px}
#chat.select-mode .msg-row.them{opacity:.72;pointer-events:none}
#chat.select-mode .msg-menu-btn,
#chat.select-mode .msg-react-btn{display:none!important}
.select-count{flex:1;font-size:14px;font-weight:600;color:var(--ch-ink)}
.select-all-btn{background:none;border:1px solid #8696a0;border-radius:8px;
  color:var(--ch-me);font-size:12px;font-weight:600;padding:6px 10px;cursor:pointer}
.select-all-btn:active{background:#ffffff0d}
.select-del-btn{font-size:20px;color:#fca5a5;padding:8px 12px;border-radius:8px;
  background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.35)}
.select-del-btn:disabled{opacity:.35;background:transparent;border-color:transparent}
#chat.select-mode .msg-row.me[data-id]:not(.is-deleted-row){
  flex-direction:row;align-items:center;justify-content:flex-end;gap:10px;width:100%}
#chat.select-mode .msg-row.me[data-id]:not(.is-deleted-row) .msg-body{max-width:calc(100% - 36px)}
.msg-select-check{display:none}
#chat.select-mode .msg-row.me[data-id]:not(.is-deleted-row) > .msg-select-check{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:26px;height:26px;border-radius:50%;border:2px solid #aebac1;
  background:#2a3942;color:transparent;font-size:15px;font-weight:800;line-height:1;
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
  order:-1;margin-right:auto;align-self:center;pointer-events:none}
#chat.select-mode .msg-row.me[data-id]:not(.is-deleted-row).selected > .msg-select-check{
  background:var(--ch-me);border-color:var(--ch-me);color:#fff;
  box-shadow:0 0 0 3px rgba(0,149,255,.35)}
#chat.select-mode .msg-row.me[data-id]:not(.is-deleted-row).selected .bub{
  box-shadow:0 0 0 2px var(--ch-me),0 1px 3px rgba(0,0,0,.35)}
#chat.select-mode .msg-row.me[data-id]:not(.is-deleted-row){cursor:pointer}
.ibtn{background:none;border:none;color:var(--ch-ink);font-size:20px;
  padding:6px;cursor:pointer;border-radius:8px}
.ibtn:active{background:#ffffff11}
.msgs{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 14px 6px;
  display:flex;flex-direction:column;gap:2px;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  min-height:0;scroll-padding-bottom:12px;
  touch-action:pan-y;
  background:transparent}
.msg-row{display:flex;flex-direction:column;align-items:flex-start;
  margin-bottom:2px;position:relative;
  transition:transform 0.15s ease;will-change:transform}
.msg-row.me{align-items:flex-end}
.msg-row.them{align-items:flex-start}
.msg-row,
.msg-body,
.bub,
.reply-quote-box,
.sender-name{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-action:pan-y;
}
@keyframes msgFadeIn{
  from{opacity:0;transform:translateY(6px) scale(0.88)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes msgFadeInMe{
  from{opacity:0;transform:translateX(6px) scale(0.88)}
  to{opacity:1;transform:translateX(0) scale(1)}
}
.msg-row--new{animation:msgFadeIn .28s cubic-bezier(0.34,1.4,0.64,1) forwards}
.msg-row.me.msg-row--new{animation:msgFadeInMe .28s cubic-bezier(0.34,1.4,0.64,1) forwards}
.sender-name{font-size:12px;font-weight:500;color:#a5b4fc;
  margin-bottom:2px;padding:0 6px;letter-spacing:.1px}
.cinput{display:flex;align-items:center;gap:10px;padding:12px;
  border-top:1px solid var(--ch-line);background:var(--ch-input);flex-shrink:0;
  padding-bottom:max(12px,env(safe-area-inset-bottom,0px));position:relative}
.cinput-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.cinput textarea{flex:1;resize:none;border:1px solid rgba(255,255,255,.08);border-radius:24px;
  padding:10px 16px;font-size:1rem;min-height:42px;max-height:120px;overflow-y:auto;outline:none;
  font-family:inherit;background:rgba(39,39,42,.55);color:var(--ch-ink);line-height:var(--ch-lh-msg);
  unicode-bidi:plaintext;text-align:start;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.cinput textarea::placeholder{color:#8696a0}
.cinput textarea:focus{box-shadow:0 0 0 1px rgba(79,70,229,.4);border-color:rgba(79,70,229,.35)}
.send{background:linear-gradient(145deg,#6366f1,#4f46e5);color:#fff;border:none;border-radius:50%;
  width:44px;height:44px;font-size:20px;cursor:pointer;flex:0 0 auto;
  font-weight:700;transition:transform .1s,box-shadow .15s,background .15s;
  box-shadow:0 0 0 3px rgba(79,70,229,.25),0 4px 14px rgba(79,70,229,.35)}
.send:active{transform:scale(.92)}
.send[data-mode="mic"]{background:linear-gradient(145deg,#6366f1,#4f46e5);color:#fff;
  box-shadow:0 0 0 3px rgba(79,70,229,.25),0 4px 14px rgba(79,70,229,.35)}
.send[data-mode="mic"]:active{box-shadow:0 0 0 3px rgba(79,70,229,.4)}
.send.recording{background:#e53935;color:#fff;
  box-shadow:0 0 0 3px rgba(229,57,53,.35);
  animation:voiceMicPulse 1s ease-in-out infinite}
.menu{position:absolute;top:calc(100% + 4px);right:8px;background:#1e1e28;
  border:1px solid var(--ch-line);border-radius:12px;
  box-shadow:0 10px 30px #0008;display:none;overflow:hidden;z-index:50;min-width:200px;
  max-height:min(70vh,420px);overflow-y:auto}
.menu.show{display:block}
.menu button{display:block;width:100%;text-align:left;background:none;border:none;
  padding:13px 18px;font-size:14px;cursor:pointer;white-space:nowrap;color:var(--ch-ink)}
.menu button:active{background:#ffffff0a}
.menu .danger{color:#f87171}

/* ── admin panel ── */
#admin{display:none;position:fixed;inset:0;background:var(--bg);z-index:70;
  flex-direction:column;padding-top:var(--safe-top)}
#admin.show{display:flex}
.ahead{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line);background:var(--surface)}
.ahead h2{margin:0;font-size:18px;flex:1;color:var(--ink)}
.admin-body{padding:20px;display:flex;flex-direction:column;gap:12px;
  max-width:500px;width:100%;margin:0 auto}
.acard{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px}
.acard h4{font-size:15px;font-weight:650;margin-bottom:4px;color:var(--ink)}
.acard p{font-size:13px;color:var(--muted);margin-bottom:12px;line-height:1.5}
.acard button{border:none;border-radius:10px;padding:10px 18px;
  font-size:14px;cursor:pointer;font-weight:600}
.abadge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;
  border-radius:20px;margin-bottom:10px;letter-spacing:.4px}
.abadge-purple{background:#7c3aed22;color:var(--accent2)}
.abadge-red{background:#7f1d1d22;color:#f87171}
.abadge-orange{background:#78350f22;color:#fbbf24}
.btn-accent{background:var(--accent);color:#fff}
.btn-danger{background:#7f1d1d;color:#fca5a5}
.btn-warn{background:#78350f;color:#fcd34d}

/* ── input overlay ── */
.ov{display:none;position:fixed;inset:0;background:#0009;z-index:200;
  align-items:center;justify-content:center;padding:24px}
.ov.show{display:flex}
.ovcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:22px;width:100%;max-width:320px;box-shadow:0 20px 60px #0006}
.ovcard h3{font-size:17px;margin-bottom:16px;color:var(--ink)}
.ov-bio{margin-bottom:12px}
.ov-bio-btn{width:100%;border:1px solid #7c3aed66;border-radius:10px;padding:11px 12px;
  background:#7c3aed1c;color:var(--accent2);font-size:14px;font-weight:700;cursor:pointer}
.ov-bio-btn:active{opacity:.85}
.ov-bio p{margin-top:8px;font-size:12px;line-height:1.35;color:var(--muted)}
.ovcard input{width:100%;background:var(--surface2);border:1px solid var(--line);
  border-radius:10px;padding:12px;font-size:16px;outline:none;
  color:var(--ink);margin-bottom:10px}
.ovcard input:focus{border-color:var(--accent)}
.ovcard .row{display:flex;gap:8px;margin-top:4px}
.ovcard button{flex:1;border:none;border-radius:10px;padding:11px;
  font-size:15px;cursor:pointer;font-weight:600}
.ovcard .ok{background:var(--accent);color:#fff}
.ovcard .cancel{background:var(--surface2);color:var(--muted)}

/* ── emoji picker ── */
.emoji-toggle{font-size:20px;padding:0;flex:0 0 auto;background:none;border:none;color:rgba(233,237,239,.85);
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;-webkit-tap-highlight-color:transparent}
.emoji-bar{display:none;background:var(--ch-input);border-top:1px solid var(--ch-line);
  padding:8px 10px;max-width:680px;width:100%;margin:0 auto;color-scheme:dark;
  max-height:220px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.emoji-bar.show{display:block}
.emoji-grid{display:flex;flex-wrap:wrap;gap:2px;background:var(--ch-input)}
.emoji-grid button{background:transparent;border:none;font-size:24px;padding:6px 7px;
  cursor:pointer;border-radius:8px;line-height:1;transition:background .1s;
  color-scheme:dark;-webkit-tap-highlight-color:transparent}
.emoji-grid button:active,.emoji-grid button:hover{background:#ffffff18}

/* ── overlay choice buttons ── */
.ov-choices{display:none;flex-direction:column;gap:8px;margin-bottom:12px}
.ov-choice{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface2);color:var(--ink);font-size:15px;font-weight:600;cursor:pointer;text-align:left}
.ov-choice.active{border-color:var(--accent);color:var(--accent2)}

/* ── toast ── */
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-weight:600;
  padding:10px 18px;border-radius:10px;font-size:13px;max-width:88%;
  text-align:center;z-index:99;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:.97}

/* ── presence / status ── */
.status-bar{text-align:center;padding:6px 10px;font-size:12px;font-weight:500;
  color:var(--ch-muted);border-bottom:1px solid var(--ch-line);background:var(--ch-head);
  letter-spacing:.01em;transition:color .2s,background .2s}
.status-bar.online{color:#6ec8ff;background:rgba(0,149,255,.12)}
.status-bar.both-online{color:#9dd8ff;font-weight:600}
.status-bar.away{color:#fbbf24}
.status-bar.offline{color:var(--ch-muted)}

/* ── typing indicator ── */
.typing-indicator{display:flex;align-items:center;gap:6px;flex-shrink:0;
  max-height:0;opacity:0;overflow:hidden;
  padding:0 16px;transform:translateY(6px);
  font-size:var(--ch-fs-meta);color:var(--ch-muted);
  max-width:680px;width:100%;margin:0 auto;
  transition:max-height .22s ease,opacity .18s ease,transform .22s ease,padding .22s ease}
.typing-indicator.show{max-height:52px;opacity:1;transform:translateY(0);
  padding:12px 16px 10px;overflow:visible}
.typing-dots{display:flex;gap:4px;align-items:center;height:14px;padding:2px 0}
.typing-dots span{width:7px;height:7px;border-radius:50%;
  background:var(--ch-indigo,#4f46e5);
  box-shadow:0 0 6px rgba(79,70,229,.45);
  animation:typingBounce 1.2s ease-in-out infinite;
  will-change:transform,opacity}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typingBounce{
  0%,60%,100%{transform:translateY(0);opacity:.45}
  30%{transform:translateY(-6px);opacity:1}
}
/* Keep a soft opacity pulse even when system reduce-motion is on (tiny indicator) */
@media (prefers-reduced-motion:reduce){
  .typing-indicator{transition:none;transform:none}
  .typing-dots span{animation:typingPulse 1.2s ease-in-out infinite;transform:none}
}
@keyframes typingPulse{
  0%,100%{opacity:.35}
  50%{opacity:1}
}
@media (hover:none) and (pointer:coarse){
  #chat::before{background-image:
    radial-gradient(ellipse 80% 50% at 15% 20%,rgba(0,149,255,.10),transparent 55%),
    radial-gradient(ellipse 60% 40% at 85% 75%,rgba(255,252,0,.06),transparent 50%),
    repeating-radial-gradient(circle,rgba(255,255,255,.03) 0 1px,transparent 1px 24px)}
}

/* ── stay unlocked active ── */
#mStayUnlocked.active{color:var(--ch-me)}

/* ── swipe to reply / message grouping ── */
.msg-row.swiping{transition:none}
.msg-row.group-start{margin-top:10px}
.msg-row.group-end{margin-bottom:8px}
.msg-body{display:flex;align-items:center;gap:3px;max-width:78%;min-width:0;box-sizing:border-box}
.msg-row.me .msg-body{align-self:flex-end}
.msg-row.them .msg-body{align-self:flex-start}
.msg-react-btn{
  display:none;align-items:center;justify-content:center;flex-shrink:0;
  width:32px;height:32px;padding:0;margin:0;
  background:transparent;border:none;outline:none;box-shadow:none;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  color:rgba(255,255,255,.45);opacity:1;
  transition:opacity .15s,color .15s,transform .12s;
  pointer-events:auto;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;position:relative;z-index:5}
@media (hover:hover) and (pointer:fine){
  .msg-react-btn{display:flex}
  .msg-row:hover .msg-react-btn,
  .msg-row.react-open .msg-react-btn{opacity:1}
  .msg-react-btn:hover{color:rgba(255,255,255,.85);transform:scale(1.08)}
}
@media (hover:none),(pointer:coarse){
  .msg-react-btn{display:flex;opacity:.7}
  .msg-row.menu-open .msg-react-btn,.msg-row.react-open .msg-react-btn{opacity:1}
}
.reply-arrow{position:absolute;left:-32px;top:50%;transform:translateY(-50%);
  font-size:18px;opacity:0;transition:opacity 0.15s;pointer-events:none}
.msg-row.me .reply-arrow{left:auto;right:-32px}
.msg-row.swipe-ready .reply-arrow{opacity:1}

/* ── polished bubbles ── */
.bub-shell{position:relative;flex:0 1 auto;max-width:100%;min-width:0}
.bub{
  position:relative;width:fit-content;max-width:100%;padding:12px 16px;
  border-radius:18px;box-sizing:border-box;
  font-size:var(--ch-fs-msg);line-height:var(--ch-lh-msg);font-weight:500;
  word-wrap:break-word;white-space:normal;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
  -webkit-user-select:none;user-select:none;
}
.bub-inner{display:flex;flex-direction:column;align-items:flex-end;min-width:0}
.bub-inner::after{display:none}
.bub-inner--inline-meta{display:flow-root;align-items:unset;min-width:0}
.bub-inner--inline-meta .msg-text{display:block;width:fit-content;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.bub-inner--inline-meta .msg-meta-spacer{
  display:inline-block!important;width:0;height:15px;float:right}
.bub-inner--inline-meta .msg-meta{
  float:right;clear:right;height:15px;margin-left:6px;min-width:52px;
  display:inline-flex;align-items:center;justify-content:flex-end}
.bub-inner .tick-read-time{clear:both;max-width:100%;box-sizing:border-box}
.bub:has(.bub-inner){display:flow-root}
.msg-text{display:block;width:fit-content;max-width:100%;text-align:start;white-space:pre-wrap;
  overflow-wrap:anywhere;word-break:break-word;unicode-bidi:plaintext}
.msg-meta{
  display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
  float:none;position:static;margin:0;
  white-space:nowrap}
.bub-shell .msg-menu-btn{
  position:absolute;top:2px;right:2px;z-index:6;
  display:none;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;margin:0;
  background:transparent;border:none;outline:none;box-shadow:none;
  appearance:none;-webkit-appearance:none;
  color:rgba(255,255,255,.55);cursor:pointer;
  opacity:0;transition:opacity .15s,color .15s;
  pointer-events:auto;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation}
.them .msg-menu-btn{color:rgba(255,255,255,.45)}
@media (hover:hover) and (pointer:fine){
  .msg-menu-btn{display:flex}
  .msg-row:hover .msg-menu-btn,
  .msg-row.menu-open .msg-menu-btn{opacity:1}
  .msg-row:hover .bub,
  .msg-row.menu-open .bub{padding-right:26px}
  .msg-menu-btn:hover{color:rgba(255,255,255,.95)}
  .them .msg-menu-btn:hover{color:rgba(255,255,255,.9)}
}
@media (hover:none),(pointer:coarse){
  .msg-menu-btn{display:none!important}
}
.msg-menu-btn svg{display:block;pointer-events:none;width:12px;height:12px}
.bub .edited-tag{font-size:10px;opacity:.65;margin-right:2px;font-style:normal;text-transform:lowercase}
.bub.is-deleted{background:#232328!important;border:1px dashed rgba(255,255,255,.12)!important;
  border-radius:18px;box-shadow:none!important}
.me .bub.is-deleted{background:rgba(31,41,55,.55)!important;
  border:1px dashed rgba(79,70,229,.25)!important;box-shadow:none!important}
.bub .deleted-text{color:rgba(255,255,255,.55);font-style:italic;font-size:var(--ch-fs-caption);opacity:1}
.bub .ts{font-size:var(--ch-fs-meta);line-height:1.25;opacity:.7;margin-top:0;display:inline;
  letter-spacing:0;color:rgba(255,255,255,.7);white-space:nowrap}
.bub.is-deleted .ts{opacity:.55;display:block;margin-top:4px}
.bub.is-deleted .msg-image-wrap,
.bub.is-deleted .msg-voice-wrap{display:none!important}
.bub.is-deleted .msg-image,
.bub.is-deleted .msg-image-caption{display:none!important}
.me .bub{
  background:var(--ch-sent-bg);
  color:var(--ch-me-ink);
  border:1px solid rgba(79,70,229,.28);
  border-radius:18px 18px var(--ch-tail-me) 18px;
  box-shadow:0 4px 16px rgba(79,70,229,.18),0 2px 4px rgba(0,0,0,.25);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.me .bub .ts{opacity:.75;color:rgba(255,255,255,.75)}
.me .bub.has-image .ts,
.me .bub.has-voice .ts{display:block;text-align:right;margin-top:4px}
.me .bub.has-image .ticks,
.me .bub.has-voice .ticks{display:inline}
.me .bub.has-voice{background:var(--ch-sent-bg);border:1px solid rgba(79,70,229,.28);
  box-shadow:0 4px 16px rgba(79,70,229,.18),0 2px 4px rgba(0,0,0,.25)}
.them .bub{
  background:var(--ch-them);
  color:var(--ch-them-ink);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px 18px 18px var(--ch-tail-them);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.them .bub .ts{color:rgba(233,237,239,.55)}
.them .bub.has-voice{background:var(--ch-them);border:1px solid rgba(255,255,255,.08)}
.bub:not(:has(.bub-inner)) .ts{display:block;margin-top:4px}
/* grouped bubbles — soften connected edges; keep sharp tail on group-end */
.msg-row.me.group-mid .bub,
.msg-row.me.group-end .bub{border-top-right-radius:8px}
.msg-row.me.group-start .bub,
.msg-row.me.group-mid .bub{border-bottom-right-radius:10px}
.msg-row.me.group-end .bub{border-bottom-right-radius:var(--ch-tail-me)}
.msg-row.them.group-mid .bub,
.msg-row.them.group-end .bub{border-top-left-radius:8px}
.msg-row.them.group-start .bub,
.msg-row.them.group-mid .bub{border-bottom-left-radius:10px}
.msg-row.them.group-end .bub{border-bottom-left-radius:var(--ch-tail-them)}

/* ── date separator ── */
.date-sep{text-align:center;margin:14px 0 6px;
  font-size:11px;color:var(--ch-muted);letter-spacing:.4px;
  display:flex;align-items:center;gap:8px}
.date-sep::before,.date-sep::after{content:'';flex:1;
  height:1px;background:var(--ch-line)}

/* ── read receipts ── */
.ticks{font-size:11px;margin-left:4px;display:inline;letter-spacing:-1px;font-weight:600;
  vertical-align:baseline;line-height:1}
.me .tick-sent{color:rgba(233,237,239,.65)}
.me .tick-delivered{color:rgba(233,237,239,.75)}
.me .tick-read{color:var(--ch-indigo)}
.me .bub .bub-inner > .tick-read-time,
.me .bub > .tick-read-time{font-size:10px;color:var(--ch-indigo);font-weight:600;
  display:block;text-align:right;margin-top:2px;opacity:1;line-height:13px;width:100%;
  text-shadow:none}
.them .tick-sent,.them .tick-delivered,.them .tick-read{display:none}

/* ── reply preview ── */
.reply-preview{display:block;max-height:0;opacity:0;overflow:hidden;
  padding:0 12px;margin:0 8px 0;transform:translateY(4px);
  background:rgba(79,70,229,.12);border-left:3px solid var(--ch-indigo);
  border-radius:4px;font-size:12px;color:var(--ch-muted);
  max-width:680px;width:calc(100% - 16px);align-self:center;cursor:pointer;position:relative;
  transition:max-height .22s ease,opacity .18s ease,transform .22s ease,padding .22s ease,margin .22s ease}
.reply-preview.show{max-height:72px;opacity:1;transform:translateY(0);
  padding:8px 12px;margin:0 8px 4px}
.reply-preview .rp-cancel{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--ch-muted);font-size:16px;cursor:pointer}

/* ── edit preview (WhatsApp-style inline edit) ── */
.edit-preview{display:block;max-height:0;opacity:0;overflow:hidden;
  padding:0 36px 0 12px;margin:0 8px 0;transform:translateY(4px);
  background:rgba(79,70,229,.14);border-left:3px solid var(--ch-indigo);
  border-radius:4px;max-width:680px;width:calc(100% - 16px);align-self:center;position:relative;
  transition:max-height .22s ease,opacity .18s ease,transform .22s ease,padding .22s ease,margin .22s ease}
.edit-preview.show{max-height:72px;opacity:1;transform:translateY(0);
  padding:8px 36px 8px 12px;margin:0 8px 4px}
.edit-preview-label{font-size:12px;font-weight:600;color:var(--ch-indigo)}
.edit-preview .rp-cancel{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--ch-muted);font-size:16px;cursor:pointer}

/* ── scroll to latest ── */
.scroll-down-btn{
  display:flex;position:fixed;z-index:210;
  right:max(14px, calc(50% - 340px + 14px));
  bottom:calc(72px + env(safe-area-inset-bottom, 0px));
  width:44px;height:44px;border-radius:50%;
  background:#27272a;border:1px solid #3f3f46;color:#e9edef;
  box-shadow:0 2px 10px rgba(0,0,0,.45);font-size:22px;line-height:1;
  cursor:pointer;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:scale(.85);
  transition:opacity .2s ease,transform .2s ease,visibility .2s,background .15s;
  -webkit-tap-highlight-color:transparent}
.scroll-down-btn.show{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}
.scroll-down-btn:active{transform:scale(.92);background:#344854}
@media (prefers-reduced-motion:reduce){
  .msg-row--new,.msg-row.me.msg-row--new{animation:none}
  .scroll-down-btn{transition:none}
  .reply-preview,.edit-preview{transition:none;transform:none}
  .send.recording{animation:none}
}

/* ── reply quote inside bubble (WhatsApp style) ── */
.reply-quote-box{
  background:rgba(0,0,0,0.2);
  border-left:3px solid rgba(255,255,255,0.5);
  border-radius:6px;
  padding:6px 10px;
  margin-bottom:6px;
  max-width:100%;
  cursor:pointer;
}
.me .reply-quote-box{
  border-left-color:rgba(255,255,255,0.6);
  background:rgba(0,0,0,0.25);
}
.them .reply-quote-box{
  border-left-color:var(--ch-indigo);
  background:rgba(79,70,229,.1);
}
.reply-quote-box .rq-sender{
  font-size:11px;font-weight:700;
  color:#6ec8ff;
  margin-bottom:2px;display:block;
}
.reply-quote-box .rq-text{
  font-size:var(--ch-fs-meta);
  color:rgba(255,255,255,0.6);
  white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:block;
  max-width:220px;
  text-align:start;unicode-bidi:plaintext;
}
.msg-row.reply-jump-target .bub{
  box-shadow:0 0 0 2px rgba(110,200,255,.45), 0 0 18px rgba(110,200,255,.28);
  transition:box-shadow .2s ease;
}

/* ── reactions on bubbles ── */
.reactions{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px;padding-left:4px}
.rxn{background:#ffffff15;border:none;border-radius:12px;padding:2px 7px;
  font-size:14px;cursor:pointer;color:#fff}
.rxn:active{background:#ffffff30}
.msg-row.me .reactions{align-self:flex-end;padding-right:4px;padding-left:0}

/* ── WhatsApp-style message actions (inside #chat) ── */
.msg-actions-ui{display:none;position:fixed;inset:0;z-index:500;pointer-events:none}
.msg-actions-ui.open{display:block;pointer-events:auto}
.msg-actions-ui .msg-actions-backdrop{
  position:absolute;inset:0;z-index:0;display:none;
  background:rgba(0,0,0,.45)}
.msg-actions-ui.open .msg-actions-backdrop.show{display:block}
body.msg-select-mode .msg-actions-ui{display:none!important}
.msg-row.msg-focus{position:relative;z-index:2}
.react-bar{
  display:none;position:fixed;z-index:502;align-items:center;gap:1px;
  background:#233138;border:1px solid #3a4a52;border-radius:999px;
  padding:5px 7px;box-shadow:0 6px 24px rgba(0,0,0,.5);
  animation:reactPop .15s ease}
.react-bar.show{display:flex}
@keyframes reactPop{
  from{opacity:0;transform:scale(.85) translateY(6px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.react-bar-emoji{
  background:none;border:none;font-size:24px;line-height:1;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s,background .12s;padding:0;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.react-bar-emoji:hover{transform:scale(1.18);background:rgba(255,255,255,.08)}
.react-bar-more{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(255,255,255,.22);background:transparent;
  color:rgba(255,255,255,.65);font-size:22px;line-height:1;
  cursor:pointer;margin-left:2px;display:flex;align-items:center;justify-content:center;
  transition:background .12s}
.react-bar-more:hover{background:rgba(255,255,255,.08)}

/* ── context menu ── */
.ctx-menu{display:none;position:fixed;background:#2a2a34;border:1px solid #3a3a48;
  border-radius:10px;box-shadow:0 8px 28px #000a;z-index:503;overflow:hidden;min-width:200px;
  padding:6px 0;pointer-events:auto;touch-action:manipulation}
.ctx-menu.show{display:block}
.ctx-item{display:flex;align-items:center;gap:16px;padding:13px 20px;font-size:14.5px;
  cursor:pointer;color:#e8e8ec;white-space:nowrap;
  -webkit-user-select:none;user-select:none;touch-action:manipulation}
.ctx-icon{width:22px;text-align:center;font-size:16px;flex-shrink:0;opacity:.9}
.ctx-item:hover{background:#ffffff0d}
.ctx-item:active{background:#ffffff11}
.ctx-item.danger{color:#f87171}
@media (hover:none),(pointer:coarse){
  .ctx-menu{min-width:240px;border-radius:14px}
  .ctx-item{padding:15px 22px;font-size:15px}
  .react-bar-emoji{width:46px;height:46px;font-size:26px}
  .react-bar-more{width:42px;height:42px}
}

/* ── chat search ── */
.chat-search{display:none;padding:8px 12px;background:var(--ch-head);
  border-bottom:1px solid var(--ch-line)}
.chat-search.show{display:flex;gap:8px;align-items:center}
.chat-search input{flex:1;background:#1e1e28;border:1px solid #333;border-radius:10px;
  padding:8px 12px;font-size:14px;color:#fff;outline:none}
.chat-search button{background:none;border:none;color:var(--ch-muted);font-size:18px;cursor:pointer}

/* ── disappearing timer ── */
.expires{font-size:9px;color:#f87171;margin-left:4px}

/* ── install & notification banners ── */
.setup-card{margin:0 18px 14px;border-radius:14px;padding:14px 16px;
  display:none;align-items:center;gap:12px}
.setup-card.show{display:flex}
.setup-card .sc-icon{font-size:28px;flex:0 0 auto}
.setup-card .sc-text{flex:1}
.setup-card .sc-text b{display:block;font-size:14px;font-weight:650;margin-bottom:2px}
.setup-card .sc-text span{font-size:12px;color:var(--muted)}
.setup-card .sc-btn{flex:0 0 auto;border:none;border-radius:10px;
  padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.setup-card .sc-x{background:none;border:none;color:var(--muted);
  font-size:18px;cursor:pointer;padding:4px;flex:0 0 auto}
#installCard{background:linear-gradient(135deg,#1a1030,#2a1a4a);
  border:1px solid #7c3aed55}
#installCard .sc-btn{background:var(--accent);color:#fff}
#notifCard{background:linear-gradient(135deg,#0d2010,#1a3020);
  border:1px solid #34d39955}
#notifCard .sc-btn{background:#059669;color:#fff}

/* ── empty state ── */
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty div{font-size:40px;margin-bottom:12px}
.empty p{font-size:15px}

/* ── chat images ── */
.attach-toggle{font-size:18px;padding:0;flex:0 0 auto;background:none;border:none;
  color:rgba(233,237,239,.85);cursor:pointer;line-height:1;
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;-webkit-tap-highlight-color:transparent}
.attach-toggle:active,.emoji-toggle:active{transform:scale(.92);opacity:.85}
.bub .msg-image-wrap{position:relative;display:inline-block;line-height:0;margin:2px 0 4px;
  max-width:min(72vw,280px);border-radius:10px;overflow:hidden}
.msg-image{display:block;max-width:100%;width:100%;height:auto;border-radius:10px;
  cursor:pointer;background:#111}
.msg-image-wrap.uploading .msg-image,
.msg-image-wrap.downloading .msg-image{opacity:.72}
.msg-media-overlay{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;background:rgba(0,0,0,.42);
  pointer-events:none;z-index:1}
.msg-image-wrap.is-ready .msg-media-overlay{display:none}
.msg-media-spin{width:30px;height:30px;border:3px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:mediaSpin .75s linear infinite}
.msg-media-label{font-size:12px;color:#fff;font-weight:600;letter-spacing:.02em;
  text-shadow:0 1px 4px rgba(0,0,0,.55)}
.msg-image-wrap.failed .msg-media-overlay{background:rgba(60,10,10,.55);pointer-events:auto;cursor:pointer}
.msg-image-wrap.failed{cursor:pointer}
.msg-image.loading{min-height:120px;background:linear-gradient(110deg,#1a2630 8%,#253440 18%,#1a2630 33%);
  background-size:200% 100%;animation:imgShimmer 1.2s linear infinite}
.msg-image.failed{min-height:80px;opacity:.5}
.msg-image-caption{margin-top:6px;font-size:var(--ch-fs-caption);line-height:var(--ch-lh-msg);white-space:pre-wrap;
  text-align:start;unicode-bidi:plaintext;overflow-wrap:break-word;word-break:normal}
@keyframes imgShimmer{to{background-position-x:-200%}}
@keyframes mediaSpin{to{transform:rotate(360deg)}}

/* ── voice notes ── */
.send[data-mode="mic"]{display:flex;align-items:center;justify-content:center}
.send[data-mode="mic"] svg{display:block}
.voice-record-cancel{
  display:none;flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  border:none;background:#e53935;color:#fff;font-size:24px;line-height:1;
  cursor:pointer;align-items:center;justify-content:center;padding:0;
  box-shadow:0 2px 10px rgba(229,57,53,.35);
  animation:cancelSnapIn .22s cubic-bezier(0.34,1.4,0.64,1);
  -webkit-tap-highlight-color:transparent}
.voice-record-cancel.show{display:flex}
.voice-record-cancel:active{transform:scale(.92);background:#c62828}
@media (prefers-reduced-motion:reduce){
  .voice-record-cancel{animation:none}
}
@keyframes cancelSnapIn{
  from{opacity:0;transform:scale(0.7)}
  to{opacity:1;transform:scale(1)}
}
@keyframes voiceMicPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(229,57,53,.35)}
  50%{box-shadow:0 0 0 6px rgba(229,57,53,.2)}
}
.voice-record-hud{display:none;position:absolute;left:0;right:0;bottom:100%;margin-bottom:6px;
  background:#16181f;border:1px solid #2a2d36;border-radius:16px;padding:14px 16px;
  align-items:center;gap:12px;z-index:90;box-shadow:0 8px 24px #0006}
.voice-record-hud.show{display:flex}
.voice-record-pulse{width:12px;height:12px;border-radius:50%;background:#e53935;flex:0 0 auto;
  animation:voicePulse 1s ease-in-out infinite}
.voice-record-timer{flex:1;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;color:#e9edef}
.voice-record-hint{display:none}
.chat.voice-recording .cinput{opacity:.92}
.bub.has-voice{padding:8px 10px 6px;min-width:200px}
.msg-voice-wrap{position:relative;display:flex;align-items:center;gap:10px;min-width:180px;padding:2px 0}
.msg-voice-wrap.uploading,.msg-voice-wrap.downloading{opacity:.85}
.msg-voice-wrap.is-ready .msg-media-overlay{display:none}
.msg-voice-wrap.failed .msg-media-overlay{background:rgba(60,10,10,.55);pointer-events:auto;cursor:pointer}
.voice-play-btn{width:36px;height:36px;border-radius:50%;border:none;background:var(--ch-me);color:#fff;
  font-size:14px;line-height:1;cursor:pointer;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;padding:0}
.voice-play-btn:active{transform:scale(.92)}
.msg-voice-wrap.playing .voice-play-btn{background:#0070cc}
.voice-track{flex:1;height:4px;background:#2a2d36;border-radius:4px;overflow:hidden;min-width:60px}
.voice-progress{height:100%;width:0;background:var(--ch-snap-yellow);border-radius:4px;transition:width .1s linear}
.voice-dur{font-size:12px;color:#8696a0;font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:32px;
  text-align:right}
@keyframes voicePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}

.img-lightbox{position:fixed;inset:0;background:#000000ee;display:none;align-items:center;
  justify-content:center;z-index:9999;padding:16px}
.img-lightbox.show{display:flex}
.img-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.img-lightbox-close{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;
  background:#ffffff22;border:none;color:#fff;font-size:28px;width:44px;height:44px;
  border-radius:50%;cursor:pointer}
.admin-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:12px}
.admin-media-thumb{position:relative;border:none;padding:0;border-radius:10px;overflow:hidden;
  background:#111;aspect-ratio:1;cursor:pointer}
.admin-media-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.admin-media-meta{position:absolute;left:0;right:0;bottom:0;font-size:9px;padding:3px 4px;
  background:#0009;color:#ddd}
.admin-media-hint{font-size:12px;color:#888;margin-top:8px}