/* ============ Settings ============ */
.set-profile{display:flex;align-items:center;gap:14px;padding:8px 4px 18px}
.set-pm{flex:1}
.set-name{font-weight:700;font-size:18px}
.set-handle{color:var(--gold);font-family:var(--mono);font-size:13px;margin-top:2px}
.tgl{width:46px;height:27px;border-radius:14px;background:var(--panel2);border:1px solid var(--line);position:relative;transition:.15s;flex:none}
.tgl span{position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:var(--faint);transition:.15s}
.tgl.on{background:rgba(245,168,60,.25);border-color:var(--gold)}
.tgl.on span{left:21px;background:var(--gold)}

/* ============ Status ============ */
.status-mine,.status-row{display:flex;align-items:center;gap:13px;padding:12px 4px;cursor:pointer}
.status-mine:active,.status-row:active{background:var(--panel)}
.st-ring{padding:2px;border-radius:50%;border:2px solid var(--line)}
.st-ring.has{border-color:var(--gold);background:linear-gradient(135deg,var(--gold),var(--ember));padding:2px}
.st-ring.has .avatar{border:2px solid var(--bg)}
.st-mid{flex:1;min-width:0}
.st-name{font-weight:650;font-size:15px}
.st-sub{color:var(--muted);font-size:13px;margin-top:1px}
.st-actions{display:flex;gap:9px}
.st-actions .btn{flex:1;padding:11px;font-size:14px}
/* status viewer */
.sv-bars{display:flex;gap:4px;padding:12px 12px 4px}
.sv-bars span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.25)}
.sv-bars span.on{background:#fff}
.sv-head{display:flex;align-items:center;gap:10px;padding:8px 14px;color:#fff}
.sv-name{font-weight:650;font-size:14.5px}
.sv-time{font-size:11.5px;color:rgba(255,255,255,.6)}
.sv-media{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:20px}
.sv-text{font-size:24px;font-weight:600;color:#fff;text-align:center;line-height:1.4;font-family:var(--disp)}
.sv-img{max-width:100%;max-height:74vh;border-radius:10px}
.sv-voice .voice-play{width:auto;padding:12px 20px;border-radius:12px}

/* ============ Groups ============ */
.grp-pick{display:flex;align-items:center;gap:11px;padding:9px 4px;cursor:pointer}
.grp-pick input{width:19px;height:19px;accent-color:var(--gold)}
.grp-pname{flex:1;font-size:14.5px}
.grp-sender{font-size:12px;font-weight:700;color:var(--gold);margin-bottom:2px}
.muted{color:var(--muted)}

/* ============ Contact requests ============ */
.req-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)}
.req-row:last-child{border:none}
.req-mid{flex:1;min-width:0}
.req-name{font-weight:650;font-size:15px}
.req-handle{color:var(--gold);font-family:var(--mono);font-size:12.5px;margin-top:1px}
.req-acts{display:flex;gap:7px}
.tab-badge{position:absolute;top:6px;margin-left:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--ember);color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.tab{position:relative}

/* status viewer footer */
.sv-foot{display:flex;gap:10px;padding:14px;border-top:1px solid rgba(255,255,255,.1)}
.sv-viewers{flex:1;color:#fff;font-size:14px;font-weight:600;text-align:left}
.sv-del{color:var(--ember);font-size:14px;font-weight:600}

/* ============ Light theme (#6) — comprehensive ============ */
:root[data-theme=light]{
  --bg:#F4F5FA; --panel:#FFFFFF; --panel2:#EEF0F7; --line:#DDE1EC;
  --text:#141A2E; --muted:#5A6178; --faint:#9098AE;
  --mine:#D6E4FF; --theirs:#FFFFFF; --gold:#D98A1F; --gold-deep:#B8720F;
}
:root[data-theme=light] body{background:#DCE0EC}
:root[data-theme=light] #phone{background:var(--bg);box-shadow:0 0 60px rgba(0,0,0,.12)}
:root[data-theme=light] .top{background:var(--bg)}
:root[data-theme=light] .tabs{background:var(--panel);border-top-color:var(--line)}
:root[data-theme=light] #chat-top{background:var(--panel);border-bottom-color:var(--line)}
:root[data-theme=light] #msgs{background:
  radial-gradient(circle at 1px 1px, rgba(90,97,120,.08) 1px, transparent 1.6px) 0 0/22px 22px,
  linear-gradient(180deg,#EEF1F8,#F4F5FA)}
:root[data-theme=light] .brow.theirs .bub{background:#FFFFFF;box-shadow:0 1px 2px rgba(20,26,46,.08);color:#141A2E}
:root[data-theme=light] .brow.mine .bub{background:#D6E4FF;color:#141A2E}
:root[data-theme=light] .bub .meta,:root[data-theme=light] .tick{color:#8A91AB}
:root[data-theme=light] .tick.read{color:var(--gold-deep)}
:root[data-theme=light] #composer{background:var(--panel);border-top-color:var(--line)}
:root[data-theme=light] #msg-in{background:#F1F3F9;border-color:var(--line);color:var(--text)}
:root[data-theme=light] #reply-bar{background:#EEF0F7}
:root[data-theme=light] .search{background:#F1F3F9}
:root[data-theme=light] .chat-row:active{background:#F1F3F9}
:root[data-theme=light] .daychip{background:#E4E7F0;color:#5A6178}
:root[data-theme=light] .enc-note{background:rgba(217,138,31,.1);border-color:rgba(217,138,31,.25);color:var(--gold-deep)}
:root[data-theme=light] .sheet{background:var(--panel)}
:root[data-theme=light] .pcard{background:#F7F8FC}
:root[data-theme=light] .prow{border-top-color:var(--line)}
:root[data-theme=light] .menu-it:active{background:#EEF0F7}
:root[data-theme=light] .hero-h1 em,:root[data-theme=light] .myid{color:var(--gold-deep)}
:root[data-theme=light] .avatar{color:#fff}
:root[data-theme=light] .icon-btn:active{background:#EEF0F7}
:root[data-theme=light] #backdrop{background:rgba(20,26,46,.35)}
:root[data-theme=light] textarea,:root[data-theme=light] input{color:var(--text)}
:root[data-theme=light] .tgl{background:#E4E7F0}

/* status compose share + viewer actions */
.st-share-opt{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin-bottom:12px;cursor:pointer}
.st-share-opt input{width:17px;height:17px;accent-color:var(--gold)}
.sv-actions{display:flex;gap:8px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.1)}
.sv-act{flex:1;color:#fff;font-size:14px;font-weight:600;padding:8px;border-radius:10px;background:rgba(255,255,255,.08)}
.sv-act:active{background:rgba(255,255,255,.16)}

/* ============ Message reactions (#2) ============ */
.react-bar{display:flex;justify-content:space-around;padding:8px 6px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.react-emoji{font-size:26px;width:44px;height:44px;border-radius:50%;transition:transform .12s}
.react-emoji:active{transform:scale(1.3);background:var(--panel2)}
/* Reactions float outside the bubble as a tag (WhatsApp/iMessage style) */
.bub-wrap{position:relative;display:inline-flex;flex-direction:column;max-width:78%}
.brow.mine .bub-wrap{align-items:flex-end}
.brow.theirs .bub-wrap{align-items:flex-start}
.msg-reacts{position:absolute;bottom:-13px;display:flex;gap:3px;z-index:3}
.brow.mine .msg-reacts{right:8px}
.brow.theirs .msg-reacts{left:8px}
.msg-reacts span{font-size:14px;background:var(--panel);border:1.5px solid var(--bg);border-radius:14px;padding:2px 7px;line-height:1.1;box-shadow:0 2px 8px rgba(20,26,46,.18);animation:reactPop .32s cubic-bezier(.2,1.3,.4,1) both}
@keyframes reactPop{0%{transform:scale(0) translateY(6px);opacity:0}60%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}
.brow:has(.msg-reacts){margin-bottom:16px}

/* ============ Privacy tab — professional redesign ============ */
.priv-hero{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,rgba(245,168,60,.12),rgba(228,87,63,.08));border:1px solid rgba(245,168,60,.25);border-radius:16px;padding:16px;margin-bottom:22px}
.priv-hero-ic{flex:none;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#F5A83C,#E4573F);display:flex;align-items:center;justify-content:center}
.priv-hero-ic svg{width:24px;height:24px;color:#fff}
.priv-hero-t{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:-.01em;margin-bottom:3px}
.priv-hero-s{color:var(--muted);font-size:13px;line-height:1.45}
.sec-label{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:22px 4px 9px}
.pcard.tight{padding:0;overflow:hidden}
.pill{font-size:12px;font-weight:600;padding:4px 11px;border-radius:20px;white-space:nowrap}
.pill.no{background:rgba(89,201,141,.14);color:#3DA96E}
.pill.rel{background:var(--panel2);color:var(--muted)}
:root[data-theme=light] .pill.no{background:rgba(89,201,141,.16);color:#2E9159}
.mini-select{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:13px;color:var(--text);font-weight:600}
.ph{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:15px 16px 0}
.ph svg{width:19px;height:19px;color:var(--gold);flex:none}
.fp-box{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--muted);background:var(--panel2);border-radius:10px;padding:12px 14px;margin:12px 16px 16px;word-spacing:2px;line-height:1.7}
.row-btn{display:flex;align-items:center;gap:13px;width:100%;padding:14px 16px;background:none;border:none;border-top:1px solid var(--line);text-align:left;cursor:pointer;transition:background .15s}
.row-btn:first-of-type{border-top:1px solid var(--line)}
.row-btn:active{background:var(--panel2)}
.row-ic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--panel2);display:flex;align-items:center;justify-content:center}
.row-ic svg{width:19px;height:19px;color:var(--muted)}
.row-ic.ok{background:rgba(89,201,141,.14)}.row-ic.ok svg{color:#3DA96E}
.row-ic.dz{background:rgba(228,87,63,.12)}.row-ic.dz svg{color:var(--ember)}
.row-tx{flex:1;font-size:15px;font-weight:500;color:var(--text)}
.row-btn.danger .row-tx{color:var(--ember)}
.row-ar{color:var(--faint);font-size:20px;font-weight:400}
.priv-foot{text-align:center;color:var(--faint);font-size:11.5px;line-height:1.7;margin:24px 0 8px}

/* ============ Custom dialogs (replaces browser confirm/alert/prompt) ============ */
.kdialog-backdrop{position:fixed;inset:0;background:rgba(8,11,20,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:28px;z-index:9999;opacity:0;pointer-events:none;transition:opacity .18s}
.kdialog-backdrop.on{opacity:1;pointer-events:auto}
.kdialog{background:var(--panel);border:1px solid var(--line);border-radius:20px;max-width:340px;width:100%;padding:24px 22px 18px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);transform:scale(.94) translateY(8px);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.kdialog-backdrop.on .kdialog{transform:none}
.kd-icon{width:52px;height:52px;border-radius:15px;background:var(--panel2);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:26px}
.kd-icon svg{width:28px;height:28px}
.kd-title{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.01em;text-align:center;margin-bottom:8px;color:var(--text)}
.kd-msg{font-size:14.5px;line-height:1.55;color:var(--muted);text-align:center;margin-bottom:18px}
.kd-input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-size:15px;color:var(--text);margin-bottom:16px;outline:none;box-sizing:border-box}
.kd-input:focus{border-color:var(--gold)}
.kd-actions{display:flex;gap:10px}
.kd-btn{flex:1;padding:13px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;border:none;transition:transform .1s,filter .15s}
.kd-btn:active{transform:scale(.97)}
.kd-btn.primary{background:linear-gradient(135deg,#F5A83C,#E4573F);color:#fff}
.kd-btn.danger{background:var(--ember);color:#fff}
.kd-btn.ghost{background:var(--panel2);color:var(--text);border:1px solid var(--line)}

/* ============ Collapsible section (Privacy dropdown) ============ */
.collapse-hd{display:flex;align-items:center;gap:13px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px 16px;cursor:pointer;text-align:left;transition:background .15s}
.collapse-hd:active{background:var(--panel2)}
.ch-ic{font-size:20px;flex:none}
.ch-tx{flex:1;display:flex;flex-direction:column;gap:2px}
.ch-tx b{font-size:15px;color:var(--text)}
.ch-sub{font-size:12.5px;color:var(--muted)}
.ch-ar{font-size:22px;color:var(--faint);transition:transform .2s}
.collapse-hd.open .ch-ar{transform:rotate(90deg)}
.collapse-bd{max-height:0;overflow:hidden;transition:max-height .28s ease;margin-top:0}
.collapse-bd.open{max-height:400px;margin-top:10px}

/* Chat header presence: green dot when online */
#chat-sub.online #chat-sub-t{color:#3DA96E;font-weight:600}
#chat-sub.online::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#3DA96E;margin-right:5px;vertical-align:middle}
:root[data-theme=dark] #chat-sub.online #chat-sub-t{color:#59C98D}
:root[data-theme=dark] #chat-sub.online::before{background:#59C98D}

/* ============ Premium depth polish (soft shadows, subtle 3D) ============ */
/* Message bubbles: soft lift */
.brow .bub{box-shadow:0 1px 2px rgba(20,26,46,.06),0 1px 3px rgba(20,26,46,.04)}
.brow.mine .bub{box-shadow:0 1px 3px rgba(44,56,102,.14)}
:root[data-theme=light] .brow.theirs .bub{box-shadow:0 1px 2px rgba(20,26,46,.08),0 2px 6px rgba(20,26,46,.05)}
:root[data-theme=light] .brow.mine .bub{box-shadow:0 2px 8px rgba(122,140,220,.22)}

/* Chat rows: subtle hover depth */
.chat-row{transition:transform .12s,box-shadow .15s,background .15s}
.chat-row:active{transform:scale(.995)}

/* Avatars: soft ring + shadow for depth */
.avatar{box-shadow:0 2px 8px rgba(20,26,46,.16),inset 0 1px 0 rgba(255,255,255,.18)}

/* Cards: layered soft shadow */
.pcard,.qr-card,.collapse-hd{box-shadow:0 1px 2px rgba(20,26,46,.04),0 2px 10px rgba(20,26,46,.05)}
:root[data-theme=dark] .pcard,:root[data-theme=dark] .qr-card,:root[data-theme=dark] .collapse-hd{box-shadow:0 2px 12px rgba(0,0,0,.28)}

/* Primary buttons: gradient + lift */
.btn:not(.ghost){box-shadow:0 4px 14px -4px rgba(228,87,63,.45);transition:transform .1s,box-shadow .15s,filter .15s}
.btn:not(.ghost):active{transform:translateY(1px);box-shadow:0 2px 8px -3px rgba(228,87,63,.5)}
.row-btn{transition:transform .1s,background .15s}
.row-btn:active{transform:scale(.99)}

/* Bottom nav: floating with top shadow */
.tabs{box-shadow:0 -2px 16px rgba(20,26,46,.06)}
:root[data-theme=dark] .tabs{box-shadow:0 -2px 16px rgba(0,0,0,.35)}
.tab.on .tab-ic,.tab.on{transition:transform .15s}

/* Composer: subtle raised */
#composer{box-shadow:0 -1px 10px rgba(20,26,46,.05)}
:root[data-theme=dark] #composer{box-shadow:0 -1px 10px rgba(0,0,0,.3)}

/* Send button: circular depth */
#send-btn{box-shadow:0 4px 12px -3px rgba(228,87,63,.5)}
#send-btn:active{transform:scale(.94)}

/* Search bar: inset feel */
.search{box-shadow:inset 0 1px 3px rgba(20,26,46,.05);transition:box-shadow .15s}
.search:focus-within{box-shadow:inset 0 1px 3px rgba(20,26,46,.05),0 0 0 3px rgba(245,168,60,.14)}

/* FAB / floating action feel on QR card */
.qr-wrap{box-shadow:0 4px 20px -6px rgba(20,26,46,.25)}

/* Dialog: deeper lift already set; add subtle inner highlight */
.kdialog{box-shadow:0 30px 70px -20px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06)}

/* Reaction chips: little pop */