/* web/public/app.css */
/* Theme: <html data-theme="light|dark"> is set by the app (Settings → Theme: System/Light/Dark). */
:root{
  --navy:#342E86;--navy-d:#221E5C;--orange:#F7771E;--orange-d:#DD6410;
  --ink:#111B21;--muted:#667781;--line:#E9EDEF;--bg:#EFEAE2;--panel:#FFFFFF;--panel2:#F0F2F5;--hover:#F5F6F6;--active:#F0F2F5;
  --mine:#D9FDD3;--theirs:#FFFFFF;--tick:#2E7BE6;--online:#25A35A;--danger:#D93F3F;--shadow:0 1px .5px rgba(11,20,26,.13);
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:14.5px/1.4 "Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--panel2)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
.hidden{display:none!important}
.ic{display:inline-grid;place-items:center;line-height:0}
.muted{color:var(--muted)} .small{font-size:13px} .pad{padding:16px}
.err{color:var(--danger);min-height:1.2em;margin:8px 0 0}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#323232;color:#fff;padding:11px 18px;border-radius:8px;z-index:200;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.btn{border-radius:24px;padding:10px 22px;font-weight:600}
.btn.primary{background:var(--orange);color:#fff}.btn.primary:hover{background:var(--orange-d)}
.btn:disabled{opacity:.45;cursor:default}
.btn.wide{width:100%;margin-top:14px}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--muted);flex:none}
.icon-btn:hover{background:var(--hover)}
.icon-btn.send{background:var(--orange);color:#fff}.icon-btn.send:hover{background:var(--orange-d)}
.av{border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;flex:none;position:relative}
.av .av-img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.pf-pic{position:relative;border:0;padding:0;background:none;border-radius:50%;cursor:pointer}
.pf-pic .pf-edit{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff;opacity:0;transition:opacity .15s}
.pf-pic:hover .pf-edit,.pf-pic:focus-visible .pf-edit{opacity:1}
.av .on{position:absolute;right:1px;bottom:1px;width:12px;height:12px;border-radius:50%;background:var(--online);border:2px solid var(--panel)}
.av.add{width:40px;height:40px;background:var(--orange);font-size:20px}

/* ---------------- landing / link device ---------------- */
.landing{min-height:100%;display:flex;flex-direction:column;align-items:center;background:linear-gradient(var(--navy) 0 222px,var(--panel2) 222px)}
.landing-top{width:min(1000px,100%);display:flex;align-items:center;gap:12px;padding:28px 24px;color:#fff;font-weight:700;font-size:15px;letter-spacing:.3px}
.landing-top img{width:40px;height:40px}
.link-card{width:min(1000px,calc(100% - 32px));background:var(--panel);border-radius:6px;box-shadow:0 17px 50px rgba(11,20,26,.19);padding:56px 60px;display:flex;gap:48px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.link-steps{flex:1;min-width:280px;max-width:520px}
.link-steps h1{font-size:28px;font-weight:300;margin:0 0 28px}
.link-steps ol{padding-left:22px;margin:0;font-size:17.5px;line-height:2.4;color:var(--ink)}
.link-steps label{display:block;font-weight:600;margin:16px 0 6px}
.link-steps input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);font-size:16px;outline:none}
.link-steps input:focus{border-color:var(--orange)}
.link-alt{display:inline-block;margin-top:34px;color:var(--orange-d);font-weight:600;text-decoration:none}
.link-alt:hover{text-decoration:underline}
.qr{position:relative;width:264px;height:264px;display:grid;place-items:center;flex:none}
.qr-svg svg{width:264px;height:264px;display:block}
.qr-logo{position:absolute;width:56px;height:56px;border-radius:50%;background:#fff;padding:3px;box-shadow:0 0 0 4px #fff}
.qr-wait{color:var(--muted)}
.qr-reload{width:264px;height:264px;border-radius:8px;background:var(--panel2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:40px;color:var(--orange)}
.qr-reload span{font-size:14px;color:var(--ink);font-weight:600}
.landing-foot{color:var(--muted);font-size:13.5px;margin:28px 16px;text-align:center}
.insecure{max-width:520px;margin:15vh auto;padding:24px;text-align:center}

/* ================= app layout: WhatsApp-Web style (rail | chat list | conversation) ================= */
.wa{height:100vh;height:100dvh;display:grid;grid-template-columns:64px minmax(340px,30%) 1fr;grid-template-rows:100%;background:var(--panel);overflow:hidden}
/* the call overlay must never take a grid cell */
#call{position:fixed;z-index:120}
#call:empty{display:none}
.empty{padding:28px 20px;text-align:center;color:var(--muted)}
:root{--rail:#F0F2F5;--chip:#F0F2F5;--chip-on:#FFE6D2;--chip-on-ink:#B8530E;--bubble-in:#FFFFFF;--bubble-out:#D9FDD3;--doodle:#E5DDD5}


/* left icon rail */
.rail{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0;background:var(--rail);border-right:1px solid var(--line)}
.rail-btn{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.rail-btn:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.rail-btn.on{background:color-mix(in srgb,var(--ink) 11%,transparent);color:var(--ink)}
.rail-badge{position:absolute;top:-2px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--orange);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center;border:2px solid var(--rail)}
.rail-grow{flex:1}
.rail-me{border-radius:50%;margin-top:4px}

/* chat list column */
.side{display:flex;flex-direction:column;min-height:0;background:var(--panel);border-right:1px solid var(--line);position:relative}
.side-head{display:flex;align-items:center;gap:6px;height:64px;padding:0 14px 0 20px;flex:none}
.brand{flex:1;margin:0;font-size:22px;font-weight:700;color:var(--navy);letter-spacing:-.3px}
.brand span{color:var(--orange)}
.brand.plain{color:var(--ink)}

.new-chat{width:42px;height:42px;border-radius:12px;background:var(--orange);color:#fff;display:grid;place-items:center;box-shadow:0 2px 6px color-mix(in srgb,var(--orange) 40%,transparent)}
.new-chat:hover{background:var(--orange-d)}
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:44px;background:var(--panel);box-shadow:0 2px 12px rgba(11,20,26,.25);border-radius:12px;padding:8px;z-index:30;min-width:200px}
.menu button{display:block;width:100%;text-align:left;padding:10px 14px;border-radius:8px}
.menu button:hover{background:var(--hover)}
.search{display:flex;align-items:center;gap:10px;margin:2px 14px 8px;padding:0 14px;background:var(--panel2);border-radius:22px;color:var(--muted);height:40px;flex:none}
.search input{flex:1;border:0;background:none;outline:none;padding:0;height:100%}
.search:focus-within{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--orange) 55%,transparent);background:var(--panel)}
.icon-btn.sm{width:28px;height:28px}
.chips{display:flex;gap:8px;padding:2px 14px 10px;flex-wrap:wrap;flex:none}
.chip-f{height:32px;padding:0 13px;border-radius:16px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:14px;display:inline-flex;align-items:center}
.chip-f:hover{background:var(--hover)}
.chip-f.on{background:var(--chip-on);color:var(--chip-on-ink);border-color:transparent;font-weight:600}
.chip-f span{opacity:.85}
.chip-f.add{width:32px;justify-content:center;padding:0}
.nbanner{display:flex;align-items:center;gap:14px;margin:0 12px 6px;padding:14px 12px 14px 16px;border-radius:14px;background:#FFF0E3;color:#3B2A1B;flex:none}
.nbanner .ic{color:var(--orange-d)}
.nbanner div{flex:1;font-size:14px}
.nbanner a{color:var(--orange-d);font-weight:700;text-decoration:none}

.list{flex:1;overflow-y:auto;min-height:0}
.sect{padding:16px 20px 8px;color:var(--orange-d);font-size:14.5px;font-weight:500}
.sect.muted-sect{color:var(--muted)}
.row.pending .row-name{color:var(--muted)}
.invite{border:1px solid var(--orange);color:var(--orange-d);border-radius:16px;padding:5px 14px;font-weight:600;font-size:13px;flex:none}
.invite:hover{background:var(--chip-on)}
.start-card{margin:28px 20px;padding:28px 22px;border:1px dashed var(--line);border-radius:16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.start-card .start-ic{width:56px;height:56px;border-radius:16px;background:var(--chip-on);color:var(--orange-d);display:grid;place-items:center;margin-bottom:6px}
.start-card b{font-size:16px}
.start-card p{margin:0 0 10px;color:var(--muted);font-size:14px;max-width:300px}
.letter{padding:22px 20px 10px;color:var(--orange-d);font-size:15px}
.empty.sm{padding:16px 20px;text-align:left;font-size:14px}
.row{display:flex;align-items:center;gap:14px;width:calc(100% - 16px);margin:0 8px;padding:0 10px;height:72px;text-align:left;border-radius:12px}
.row:hover{background:var(--hover)}
.row.active{background:var(--active)}
.row.static{cursor:default}
.row.static:hover{background:none}
.row-mid{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.row-top{display:flex;align-items:baseline;gap:8px}
.row-name{flex:1;font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-name.missed{color:var(--danger)}
.row-time{font-size:12px;color:var(--muted)}
.row.unread .row-time{color:var(--orange-d);font-weight:600}
.row-sub{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:14px}
.row-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-text.typing{color:var(--online);font-weight:600}
.ic.red{color:var(--danger)}.ic.green{color:var(--online)}
.badge{background:var(--orange);color:#fff;border-radius:12px;min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;font-size:12px;font-weight:700}
.av.action{width:49px;height:49px;background:var(--orange);color:#fff}
.av.big{width:120px;height:120px;background:var(--panel2);color:var(--muted)}
.side-foot{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line);flex:none}
.banner{background:#FFF3C4;color:#54420A;padding:10px 16px;font-size:13.5px;flex:none}
.panel-head{display:flex;align-items:center;gap:16px;height:64px;padding:0 14px;flex:none}
.panel-head b{font-size:18px;font-weight:600}
.pick-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 8px;flex:none}
.pick{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border-radius:16px;padding:4px 6px 4px 12px;font-size:14px}
.pick button{width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--ink) 15%,transparent);display:grid;place-items:center;font-size:13px}
.fab-row{display:flex;justify-content:center;padding:18px;flex:none}
.fab{width:56px;height:56px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;box-shadow:0 4px 12px color-mix(in srgb,var(--orange) 45%,transparent)}
.fab:hover{background:var(--orange-d)}
.group-name{display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 24px}
.group-name input{width:100%;border:0;border-bottom:2px solid var(--orange);background:none;outline:none;padding:10px 2px;font-size:16px}
.check{width:22px;height:22px;border-radius:4px;border:2px solid var(--muted);display:grid;place-items:center;font-size:13px;color:#fff;flex:none}
.check.on{background:var(--orange);border-color:var(--orange)}
.profile{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px 24px 14px}
.pf{width:100%}
.pf label{display:block;color:var(--orange-d);font-size:13.5px;margin:12px 0 4px}
.pf input{width:100%;border:0;border-bottom:1px solid var(--line);background:none;outline:none;padding:8px 2px;font-size:15.5px}
.pf input:focus{border-bottom:2px solid var(--orange)}
.set-row{display:flex;align-items:center;gap:18px;width:100%;text-align:left;padding:16px 24px;border-top:1px solid var(--line)}
.set-row:hover{background:var(--hover)} .set-row.static:hover{background:none}
.set-row .ic{color:var(--muted)}
.set-row > div:not(.seg){display:flex;flex-direction:column}
.set-row small{color:var(--muted)}
.set-row.danger b,.set-row.danger .ic{color:var(--danger)}

/* conversation */
.chat{position:relative;display:flex;min-width:0;min-height:0;background:var(--bg)}
.chat-main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.chat.drop::after{content:"Drag file here";position:absolute;inset:24px;border:2px dashed var(--orange);border-radius:24px;background:color-mix(in srgb,var(--orange) 14%,var(--panel));color:var(--orange-d);display:grid;place-items:center;font-size:26px;z-index:40;pointer-events:none}
.welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--panel2);padding:24px;position:relative}
.welcome img{width:130px;margin-bottom:22px}
.welcome h2{font-weight:300;font-size:32px;margin:0 0 14px}
.welcome p{max-width:480px;color:var(--muted);margin:3px 0;font-size:14px}
.welcome .foot{position:absolute;bottom:34px}
.chat-head{display:flex;align-items:center;gap:4px;height:64px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--line);z-index:2;flex:none}
.chat-head .who{flex:1;display:flex;align-items:center;gap:14px;text-align:left;min-width:0;height:100%}
.chat-head .who-txt{display:flex;flex-direction:column;min-width:0}
.chat-head .who b{font-weight:500;font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head .who small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.chat-head .who small.live{color:var(--online)}
.chat-head .icon-btn{color:var(--ink)}
.back{display:none}
.msgs{flex:1;overflow-y:auto;padding:14px 8% 10px;background-color:var(--doodle);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22280%22%20height%3D%22280%22%20viewBox%3D%220%200%20280%20280%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%220.07%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2018h30a6%206%200%200%201%206%206v14a6%206%200%200%201-6%206H26l-9%207v-7h-3a6%206%200%200%201-6-6V24a6%206%200%200%201%206-6z%22%2F%3E%3Cpath%20d%3D%22M18%2028h22M18%2034h14%22%2F%3E%3Cpath%20transform%3D%22translate(78%2014)%22%20d%3D%22M6%202l6%200%203%208-4%203a20%2020%200%200%200%2010%2010l3-4%208%203v6a3%203%200%200%201-3%203C14%2031%201%2018%201%205a3%203%200%200%201%203-3z%22%2F%3E%3Cg%20transform%3D%22translate(138%2016)%22%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%2234%22%20height%3D%2224%22%20rx%3D%225%22%2F%3E%3Cpath%20d%3D%22M11%207l3-5h8l3%205%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2219%22%20r%3D%227%22%2F%3E%3C%2Fg%3E%3Cpath%20transform%3D%22translate(204%2018)%22%20d%3D%22M16%2030S2%2021%202%2011a7%207%200%200%201%2014-3%207%207%200%200%201%2014%203c0%2010-14%2019-14%2019z%22%2F%3E%3Cpath%20transform%3D%22translate(20%2084)%22%20d%3D%22M16%202l4%209%2010%201-7%207%202%2010-9-5-9%205%202-10-7-7%2010-1z%22%2F%3E%3Cg%20transform%3D%22translate(86%2080)%22%3E%3Cpath%20d%3D%22M10%2026V4l18-3v22%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2226%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2223%22%20r%3D%225%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(146%2082)%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214%22%2F%3E%3Cpath%20d%3D%22M16%208v8l6%204%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(210%2084)%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214%22%2F%3E%3Cpath%20d%3D%22M10%2019c2%203%2010%203%2012%200%22%2F%3E%3Cpath%20d%3D%22M11%2012h.01M21%2012h.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(14%20150)%22%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%2234%22%20height%3D%2224%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M2%206l16%2012%2016-12%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(82%20146)%22%3E%3Crect%20x%3D%222%22%20y%3D%2212%22%20width%3D%2230%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M0%2012h34v-6H0zM17%206v26%22%2F%3E%3Cpath%20d%3D%22M17%206c-4-6-10-4-8%200M17%206c4-6%2010-4%208%200%22%2F%3E%3C%2Fg%3E%3Cpath%20transform%3D%22translate(140%20152)%22%20d%3D%22M10%2026h20a8%208%200%200%200%200-16%2011%2011%200%200%200-21-2A8%208%200%200%200%2010%2026z%22%2F%3E%3Cg%20transform%3D%22translate(208%20146)%22%3E%3Cpath%20d%3D%22M3%2015L18%203l15%2012%22%2F%3E%3Cpath%20d%3D%22M7%2012v19h22V12M15%2031v-9h6v9%22%2F%3E%3C%2Fg%3E%3Cpath%20transform%3D%22translate(18%20214)%22%20d%3D%22M2%2014L32%202%2022%2032l-6-12zM16%2020L32%202%22%2F%3E%3Cg%20transform%3D%22translate(88%20210)%22%3E%3Cpath%20d%3D%22M14%2033S2%2021%202%2013a12%2012%200%200%201%2024%200c0%208-12%2020-12%2020z%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2213%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(148%20212)%22%3E%3Cpath%20d%3D%22M6%2024V14a10%2010%200%200%201%2020%200v10l3%204H3z%22%2F%3E%3Cpath%20d%3D%22M13%2031a3%203%200%200%200%206%200%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(210%20214)%22%3E%3Cpath%20d%3D%22M3%2010h22v12a8%208%200%200%201-8%208H11a8%208%200%200%201-8-8z%22%2F%3E%3Cpath%20d%3D%22M25%2013h3a4%204%200%200%201%200%208h-3%22%2F%3E%3Cpath%20d%3D%22M10%202c-2%203%202%204%200%206M17%202c-2%203%202%204%200%206%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M60%2066l5%205%209-10%22%2F%3E%3Ccircle%20cx%3D%22196%22%20cy%3D%2262%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M128%20132h10M133%20127v10%22%2F%3E%3Cpath%20d%3D%22M58%20196l6-6M64%20196l-6-6%22%2F%3E%3Ccircle%20cx%3D%22252%22%20cy%3D%22196%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}

.e2e-note{max-width:560px;margin:8px auto 14px;background:#FFF5C4;color:#54656F;border-radius:8px;padding:8px 14px;font-size:12.5px;text-align:center;box-shadow:var(--shadow)}

.day{text-align:center;margin:12px 0;position:sticky;top:4px;z-index:1}
.day span,.sys span{display:inline-block;background:var(--panel);padding:5px 12px;border-radius:8px;font-size:12.5px;color:var(--muted);box-shadow:var(--shadow)}
.sys{text-align:center;margin:8px 0}
.m{display:flex;margin:2px 0}
.m.first{margin-top:12px}
.m.mine{justify-content:flex-end}
.b{position:relative;max-width:min(65%,640px);background:var(--bubble-in);border-radius:8px;padding:6px 9px 8px;box-shadow:var(--shadow);overflow-wrap:anywhere}
.m.mine .b{background:var(--bubble-out)}
.m.first:not(.mine) .b{border-top-left-radius:0}
.m.first.mine .b{border-top-right-radius:0}
.m.first:not(.mine) .b::before{content:"";position:absolute;left:-8px;top:0;width:0;height:0;border-right:8px solid var(--bubble-in);border-bottom:10px solid transparent}
.m.first.mine .b::before{content:"";position:absolute;right:-8px;top:0;width:0;height:0;border-left:8px solid var(--bubble-out);border-bottom:10px solid transparent}
.b.flash{animation:fl 1.6s}
@keyframes fl{0%,40%{box-shadow:0 0 0 3px var(--orange)}100%{box-shadow:var(--shadow)}}
.from{font-size:13px;font-weight:600;margin-bottom:2px}
.txt{white-space:pre-wrap;font-size:14.5px;line-height:1.38}
/* reserve room for the time (and ticks) on the last line, like WhatsApp */
.txt::after{content:"";display:inline-block;width:58px;height:1px}
.m.mine .txt::after{width:76px}
.txt a{color:#027EB5;text-decoration:underline}

.meta{position:absolute;right:8px;bottom:4px;display:flex;gap:3px;align-items:center;font-size:11px;color:var(--muted)}
.enc{color:var(--muted);font-style:italic}
.enc::after{content:"";display:inline-block;width:60px}
.m.mine .enc::after{width:78px}
.retry{display:block;color:var(--danger);font-size:12px;margin-top:4px}
.callcard{display:flex;align-items:center;gap:12px;min-width:260px;padding:10px 12px 22px;cursor:default}
.callcard.missed{cursor:pointer}
.callcard .cc-ic{width:40px;height:40px;border-radius:50%;background:var(--panel);display:grid;place-items:center;color:var(--ink);flex:none}
.m.mine .callcard .cc-ic{background:color-mix(in srgb,#fff 70%,transparent)}
.callcard.missed .cc-ic{color:var(--danger)}
.callcard .cc-txt{display:flex;flex-direction:column;padding-right:44px}
.callcard b{font-weight:500;font-size:15px}
.callcard small{color:var(--muted);font-size:13.5px}
.tick.read{color:var(--tick)} .tick.failed{color:var(--danger)}
.photo-wrap{margin:-3px -6px 18px;min-width:200px;min-height:120px;border-radius:6px;overflow:hidden;background:var(--panel2)}
.photo{display:block;max-width:100%;max-height:360px;cursor:zoom-in}
.vid{display:block;max-width:100%;max-height:360px}
/* photo bubbles (WhatsApp): 260px photo in a 3px frame, height 140–340px from its shape, cropped to fill */
.b.photo-b{padding:3px;width:266px;max-width:266px}
.b.photo-b .photo-wrap{position:relative;margin:0;width:260px;min-width:0;min-height:0;border-radius:6px}
.b.photo-b .photo{width:100%;height:100%;max-height:none;object-fit:cover}
.b.photo-b > .from,.b.photo-b > .fwd{padding:2px 6px 0}
.b.photo-b > .quote{margin-bottom:3px}
.b.photo-b .txt{padding:5px 6px 4px}
.b.photo-b .enc{padding:8px}
/* no caption: time and ticks sit on the photo, white over a soft shadow */
.b.photo-b:not(.cap) .photo-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(transparent,rgba(0,0,0,.42));pointer-events:none}
.b.photo-b:not(.cap) .meta{right:10px;bottom:7px;z-index:1;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.b.photo-b:not(.cap) .meta .tick:not(.read){color:#fff}
.b.photo-b .b-menu{top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.3)!important;color:#fff}
/* files, locations, contacts, voice notes: the bubble hugs the card and a caption wraps to its width */
.b.card-b{width:min-content}
/* voice note */
.vn{display:flex;align-items:center;gap:8px;width:270px;padding:2px 0 14px}
.vn-mic{display:grid;flex:none;color:var(--muted)}.vn-mic svg{width:18px;height:18px}
.vn-mic.played{color:#34B7F1}
.vn-play{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--muted);flex:none}
.vn-play:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.vn-mid{flex:1;min-width:0;position:relative}
.vn-wave{display:flex;align-items:center;gap:2px;height:32px;cursor:pointer;touch-action:none;outline-offset:2px}
.vn-wave i{flex:1;min-width:2px;border-radius:2px;background:color-mix(in srgb,var(--muted) 45%,transparent)}
.vn-wave i.on{background:var(--tick)}
.vn-time{position:absolute;left:0;top:34px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.rec-wave{flex:1;display:flex;align-items:center;gap:2px;height:28px;min-width:0}
.rec-wave i{flex:1;max-width:4px;height:8%;border-radius:2px;background:var(--muted)}
.file{display:flex;align-items:center;gap:12px;background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:6px;padding:10px 12px;margin-bottom:18px;text-align:left;width:280px}
.file-ic{width:40px;height:46px;border-radius:4px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.file-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.file-meta b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.file-meta small{color:var(--muted)}
.typing-b{display:flex;gap:4px;padding:12px 14px}
.typing-b i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:bl 1.2s infinite}
.typing-b i:nth-child(2){animation-delay:.2s}.typing-b i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,60%,100%{opacity:.3}30%{opacity:1}}
/* composer */
.composer{position:relative;padding:8px 16px 14px;background:transparent;flex:none}
.pill{display:flex;align-items:flex-end;gap:2px;background:var(--panel);border-radius:26px;padding:4px 6px;box-shadow:0 1px 3px rgba(11,20,26,.12)}
.pill textarea{flex:1;resize:none;border:0;background:none;outline:none;padding:11px 8px;max-height:160px;line-height:1.35;font-size:15px}
.pill .icon-btn{color:var(--muted)}
.pill .icon-btn.send{color:#fff}
.pill.rec{align-items:center;gap:10px;padding:6px 8px}
.rec-dot{width:12px;height:12px;border-radius:50%;background:var(--danger);animation:bl 1s infinite}
.rec-time{font-variant-numeric:tabular-nums;font-weight:600}
.emoji-pop{position:absolute;left:16px;bottom:72px;width:min(380px,calc(100% - 32px));max-height:280px;overflow-y:auto;background:var(--panel);border-radius:16px;box-shadow:0 6px 24px rgba(11,20,26,.25);padding:10px;display:grid;grid-template-columns:repeat(9,1fr);gap:2px;z-index:30}
.emoji-pop button{font-size:24px;height:38px;border-radius:8px}
.emoji-pop button:hover{background:var(--hover)}
/* right drawer */
.drawer{width:min(420px,40%);flex:none;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.drawer header{display:flex;align-items:center;gap:16px;height:64px;padding:0 14px;flex:none;border-bottom:1px solid var(--line)}
.drawer header b{font-size:16px;font-weight:500}
.drawer .search{margin-top:10px}
.info-hero{display:flex;flex-direction:column;align-items:center;padding:28px 20px 18px;border-bottom:8px solid var(--panel2)}
.info-hero h3{margin:16px 0 4px;font-weight:400;font-size:22px}
.info-hero p{margin:0}
.info-actions{display:flex;justify-content:center;gap:12px;padding:14px;border-bottom:8px solid var(--panel2)}
.info-actions button{display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid var(--line);border-radius:12px;padding:10px 18px;color:var(--orange-d);font-size:13px}
.info-actions button:hover{background:var(--hover)}
.info-sect{padding-bottom:6px}
.chip-admin{font-size:11.5px;color:var(--orange-d);background:var(--chip-on);border-radius:5px;padding:2px 7px}
.link-danger{color:var(--danger);font-size:13px;margin-right:8px}
.link-acc{color:var(--orange-d);font-size:13px;margin-right:8px;white-space:nowrap}
.toggle-row{cursor:pointer}.toggle-row input{width:18px;height:18px;flex:none;accent-color:var(--orange)}
.danger-row{display:block;width:100%;text-align:left;padding:16px 24px;color:var(--danger);font-size:15px;border-top:8px solid var(--panel2)}
.row.danger .row-name{color:var(--danger)}
.member-card .info-hero{border-bottom:1px solid var(--line)}.member-card .info-hero p{margin-top:2px}.member-card .chip-admin{margin-top:8px}.member-card .list{overflow-y:auto}
.hit{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;padding:12px 20px;border-bottom:1px solid var(--line)}
.hit:hover{background:var(--hover)}
.hit small{color:var(--muted)}
.hit span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* preview, lightbox, modal */
.preview{position:absolute;inset:0;z-index:30;background:var(--panel2);display:flex;flex-direction:column}
.preview header{display:flex;align-items:center;gap:12px;height:64px;padding:0 14px}
.pv-body{flex:1;display:grid;place-items:center;padding:24px;min-height:0}
.pv-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.pv-file{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted)}
.pv-file b{color:var(--ink)}
.preview footer{display:flex;gap:10px;align-items:center;padding:12px 8%}
.preview footer input{flex:1;border:0;border-radius:22px;padding:12px 16px;background:var(--panel);outline:none}
.scrim{position:fixed;inset:0;background:rgba(11,20,26,.55);z-index:100;display:grid;place-items:center;padding:16px}
.modal{background:var(--panel);border-radius:14px;width:min(460px,100%);max-height:min(680px,92vh);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 17px 50px rgba(0,0,0,.3)}
.modal header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.modal > input{margin:12px 16px 4px;padding:10px 14px;border:0;border-radius:20px;background:var(--panel2);outline:none}
.modal-list{flex:1;overflow-y:auto;min-height:160px}
.modal footer{padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}

/* calls overlay */
.call{position:fixed;inset:0;width:100vw;height:100vh;z-index:120;background:var(--navy-d);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.call-grid{position:absolute;inset:0;display:grid;gap:4px;background:#000}
.call-grid.n2{grid-template-columns:1fr 1fr}.call-grid.n3,.call-grid.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.call-grid video{width:100%;height:100%;object-fit:cover;background:#111}
.call-local{position:absolute;right:20px;top:20px;width:220px;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:2px solid rgba(255,255,255,.25);z-index:2;transform:scaleX(-1);background:#111}
.call-info{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.call.has-video .call-info{position:absolute;top:24px;left:24px;align-items:flex-start}
.call-info b{font-size:26px;font-weight:500}
.call-info small{opacity:.8;font-size:15px}
.call-info .call-fail{color:#FFB4AB;opacity:1;max-width:440px;text-align:center;line-height:1.4;margin-top:8px}
.call-ctrls{position:absolute;bottom:56px;display:flex;gap:22px;z-index:2}
.call-ctrls button{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center}
.call-ctrls button.off{background:#fff;color:var(--navy-d)}
.call-ctrls .end{background:#E0304A}.call-ctrls .ok{background:var(--online)}
.call-e2e{position:absolute;bottom:18px;opacity:.6;font-size:12px;margin:0;z-index:2}
.call-pills{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:3}
.call-rec{margin:0;font-size:12.5px;background:rgba(0,0,0,.45);color:#fff;padding:5px 12px;border-radius:999px;display:flex;align-items:center;gap:7px}
.call-rec svg{width:15px;height:15px}
.call-rec button{margin-left:6px;background:#E0304A;color:#fff;border-radius:999px;padding:2px 10px;font-size:12px}
.call-ctrls button.on{background:var(--online);color:#fff}
.call-ctrls button.recording{background:#E0304A;color:#fff}
.call-rec.rec-on svg{color:#FF4D5E}
.call-screen{position:absolute;inset:0;background:#000}
.call-screen video.shared{width:100%;height:100%;object-fit:contain}
.call-strip{position:absolute;right:20px;bottom:130px;display:flex;flex-direction:column;gap:8px;z-index:2}
.call-strip video{width:180px;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:#111}
.call-local.screen{transform:none;object-fit:contain}

/* small screens: one column at a time */
@media (max-width:900px){
  .wa{grid-template-columns:56px 1fr}
  .chat{display:none}
  .wa.in-chat{grid-template-columns:1fr}
  .wa.in-chat .rail,.wa.in-chat .side{display:none}
  .wa.in-chat .chat{display:flex}
  .back{display:grid}
  .b{max-width:85%}
  .drawer{position:absolute;inset:0;width:100%;z-index:20}
  .link-card{padding:32px 24px}
  .call-local{width:110px}
  .call-strip video{width:110px}
}

/* settings: theme selector */
.set-row .grow{flex:1}
.seg{display:inline-flex;flex-direction:row;border:1px solid var(--line);border-radius:18px;overflow:hidden;flex:none}
.seg button{padding:6px 12px;font-size:13px;color:var(--muted)}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--chip-on);color:var(--chip-on-ink);font-weight:600}
/* stale build warning */
.update-bar{position:fixed;top:0;left:0;right:0;z-index:300;background:var(--navy-d,#1F2C34);color:#fff;text-align:center;padding:7px 12px;font-size:14px}
.update-bar button{margin-left:12px;background:var(--online);color:#fff;border-radius:999px;padding:3px 14px;font-weight:600}
.stale{position:fixed;top:0;left:0;right:0;z-index:300;background:#B3261E;color:#fff;text-align:center;padding:8px 12px;font-weight:600}
/* incoming call popup (WhatsApp-Web style) */
.call-popup{position:fixed;right:24px;bottom:24px;z-index:130;display:flex;align-items:center;gap:14px;background:var(--panel);color:var(--ink);border-radius:16px;padding:14px 16px;box-shadow:0 12px 40px rgba(11,20,26,.35);min-width:340px;animation:pop .25s ease-out}
.call-popup .cp-txt{flex:1;display:flex;flex-direction:column;min-width:0}
.call-popup .cp-txt b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-popup .cp-txt small{color:var(--muted)}
.cp-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff}
.cp-btn.end{background:#E0304A}.cp-btn.ok{background:var(--online)}
/* "Request screen": the same popup, with room for a sentence */
.screen-pop{max-width:420px;z-index:131}
.screen-pop .cp-txt b{white-space:normal;font-size:15px}
@keyframes pop{from{transform:translateY(16px);opacity:0}}

/* attachment menu (WhatsApp style) */
.attach-pop{position:absolute;left:16px;bottom:72px;background:var(--panel);border-radius:16px;box-shadow:0 8px 28px rgba(11,20,26,.26);padding:8px;z-index:30;min-width:230px}
.att-item{display:flex;align-items:center;gap:14px;width:100%;padding:9px 12px;border-radius:10px;font-size:15px;text-align:left}
.att-item:hover{background:var(--hover)}
.att-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.att-ic.doc{background:#7F66FF}.att-ic.media{background:#007BFC}.att-ic.cam{background:#FF2E74}
.att-ic.audio{background:#F7771E}.att-ic.contact{background:#009DE2}.att-ic.loc{background:#1FA855}
/* media viewer */
.lightbox{position:fixed;inset:0;background:#0B141A;z-index:150;display:flex;flex-direction:column;padding:0}
.lb-head{display:flex;align-items:center;gap:8px;height:60px;padding:0 14px;color:#fff;flex:none}
.lb-name{flex:1;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
.lb-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff!important;background:rgba(255,255,255,.1)}
.lb-btn:hover{background:rgba(255,255,255,.2)}
.lb-body{flex:1;display:grid;place-items:center;padding:12px 24px 24px;min-height:0}
.lb-body img,.lb-body video{max-width:100%;max-height:calc(100vh - 96px);object-fit:contain;border-radius:4px}
.vid-wrap{position:relative}
.vid-full{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center}
/* location & contact cards */
.loc-card{display:block;width:280px;max-width:100%;margin:-2px -4px 18px;border-radius:8px;overflow:hidden;text-decoration:none;color:inherit;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.loc-map{height:120px;display:grid;place-items:center;background:
  linear-gradient(90deg,transparent 48%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.55) 52%,transparent 52%),
  linear-gradient(0deg,transparent 46%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.55) 54%,transparent 54%),
  linear-gradient(135deg,#CFE7D3,#E7E2C9 60%,#D3E4F2)}
.loc-pin{width:40px;height:40px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#E5484D;display:grid;place-items:center;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.loc-pin .ic{transform:rotate(45deg)}
.loc-meta{display:flex;flex-direction:column;gap:2px;padding:8px 10px}
.loc-meta small{color:var(--muted)}
.loc-open{color:#027EB5;font-size:13.5px;font-weight:600;margin-top:2px}
.contact-card{width:260px;margin-bottom:18px}
.cc-row{display:flex;align-items:center;gap:12px;padding:4px 2px 10px}
.cc-row > div:not(.av){display:flex;flex-direction:column}
.cc-row small{color:var(--muted)}
.cc-msg{display:block;width:100%;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);padding:9px;color:#027EB5;font-weight:600}
/* camera */
.scrim.cam{background:rgba(0,0,0,.92)}
.cam-box{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(900px,100%)}
.cam-video{width:100%;max-height:75vh;border-radius:12px;background:#000;transform:scaleX(-1)}
.cam-bar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:420px}
.cam-shutter{width:68px;height:68px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.4);background-clip:padding-box}
.modal .pad{padding:14px 16px}

/* message menu, delete, select & forward */
.b .b-menu{position:absolute;top:2px;right:2px;width:26px;height:22px;border-radius:0 8px 0 12px;display:grid;place-items:center;color:var(--muted);opacity:0;background:linear-gradient(to left,var(--bubble-in) 60%,transparent)}
.m.mine .b .b-menu{background:linear-gradient(to left,var(--bubble-out) 60%,transparent)}
.b:hover .b-menu,.b .b-menu:focus{opacity:1}
.m.selecting{cursor:pointer;border-radius:6px;position:relative;padding-left:40px}
.m.selecting:hover,.m.sel{background:color-mix(in srgb,var(--orange) 10%,transparent)}
.m.selecting .b-menu{display:none}
.sel-box{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:4px;border:2px solid var(--muted);display:grid;place-items:center;color:#fff;background:var(--panel)}
.sel-box.on{background:var(--orange);border-color:var(--orange)}
.msg-menu{position:fixed;z-index:160;background:var(--panel);border-radius:12px;box-shadow:0 6px 24px rgba(11,20,26,.26);padding:6px;min-width:180px}
.msg-menu button{display:block;width:100%;text-align:left;padding:9px 14px;border-radius:8px;font-size:14.5px}
.msg-menu button:hover{background:var(--hover)}
.msg-menu button.danger{color:var(--danger)}
.fwd{display:flex;align-items:center;gap:4px;font-size:12.5px;font-style:italic;color:var(--muted);margin-bottom:2px}
.fwd .ic svg{width:14px;height:14px}
.b.deleted .enc{display:flex;align-items:center;gap:4px}
.selbar{display:flex;align-items:center;gap:8px;padding:10px 16px 14px;background:var(--panel);border-top:1px solid var(--line);flex:none}
.selbar b{font-weight:600}
.selbar .icon-btn:disabled{opacity:.35}
.modal.confirm{width:min(380px,100%)}
.modal .q{font-size:16px;font-weight:500}
/* like WhatsApp: centred question, full-width stacked buttons */
.modal.confirm.del .pad{text-align:center;padding:24px 20px 14px}
.modal.confirm.del .q{font-size:20px;font-weight:400}
.del-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:4px 20px 18px}
.del-btn{color:var(--orange-d);font-weight:600;padding:11px 14px;border-radius:22px;border:1px solid var(--line)}
.del-btn:hover{background:var(--hover)}
.del-btn.everyone{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent);border-color:transparent}
.del-btn.everyone:hover{background:color-mix(in srgb,var(--danger) 18%,transparent)}
.del-btn.muted{color:var(--orange-d);border-color:transparent}
.check.round{border-radius:50%;margin:0 4px 0 0}
.fwd-foot{display:flex;align-items:center;gap:12px;justify-content:space-between}
.fwd-picked{flex:1;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fab.sm{width:48px;height:48px}
.fab:disabled{opacity:.45}
/* attachment menu never leaves the screen */
.attach-pop{left:max(8px,env(safe-area-inset-left));max-width:calc(100vw - 24px)}

/* reply: quoted block in a bubble + bar above the message box */
.quote{display:block;width:100%;text-align:left;border-radius:8px;background:rgba(0,0,0,.06);border-left:4px solid var(--qc,var(--orange));padding:5px 10px 6px;margin-bottom:4px;cursor:pointer}
.quote b{display:block;font-size:13px;color:var(--qc,var(--orange));font-weight:700}
.quote span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;color:var(--muted)}
.m.flash .b{animation:fl 1.6s}
.replybar{display:flex;align-items:stretch;margin:0 0 8px;background:var(--panel);border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(11,20,26,.12)}
.replybar .rb-bar{width:4px;background:var(--qc,var(--orange));flex:none}
.replybar .rb-txt{flex:1;min-width:0;padding:8px 12px;display:flex;flex-direction:column}
.replybar .rb-txt b{font-size:13.5px;color:var(--qc,var(--orange))}
.replybar .rb-txt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:14px}
.replybar .icon-btn{align-self:center;margin-right:4px}
/* call connection test */
.diag-row{display:flex;gap:10px;padding:7px 0}
.diag-row .diag-ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:13px;flex:none;margin-top:1px}
.diag-row.ok .diag-ic{background:var(--online)}.diag-row.bad .diag-ic{background:var(--danger)}
.diag-row > div{display:flex;flex-direction:column}
.diag-row small{color:var(--muted);line-height:1.35}
.diag-verdict{font-weight:600;margin:10px 0 0}

/* ================= dark theme ================= */
:root[data-theme="dark"]{
  --ink:#E9EDEF;--muted:#8696A0;--line:#222D34;--bg:#0B141A;--panel:#111B21;--panel2:#202C33;--hover:#202C33;--active:#2A3942;
  --mine:#005C4B;--theirs:#202C33;--tick:#53BDEB;--shadow:none;color-scheme:dark;
}
:root[data-theme="dark"]{--rail:#202C33;--chip:#202C33;--chip-on:#4A2E1A;--chip-on-ink:#FFB27A;--bubble-in:#202C33;--bubble-out:#005C4B;--doodle:#0B141A}
:root[data-theme="dark"] .m.mine .b{color:#E9EDEF}
:root[data-theme="dark"] .m.mine .meta,:root[data-theme="dark"] .m.mine .vn-time,:root[data-theme="dark"] .m.mine .fwd{color:rgba(233,237,239,.65)}
:root[data-theme="dark"] .m.mine .quote{background:rgba(0,0,0,.18)}
:root[data-theme="dark"] .m.mine .quote span{color:rgba(233,237,239,.7)}
:root[data-theme="dark"] .m.mine .vn-wave i{background:rgba(233,237,239,.35)}
:root[data-theme="dark"] .brand{color:#C9C5FF}
:root[data-theme="dark"] .brand.plain{color:var(--ink)}
:root[data-theme="dark"] .nbanner{background:#3A2516;color:#F5E6D8}
:root[data-theme="dark"] .msgs{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22280%22%20height%3D%22280%22%20viewBox%3D%220%200%20280%20280%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.055%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2018h30a6%206%200%200%201%206%206v14a6%206%200%200%201-6%206H26l-9%207v-7h-3a6%206%200%200%201-6-6V24a6%206%200%200%201%206-6z%22%2F%3E%3Cpath%20d%3D%22M18%2028h22M18%2034h14%22%2F%3E%3Cpath%20transform%3D%22translate(78%2014)%22%20d%3D%22M6%202l6%200%203%208-4%203a20%2020%200%200%200%2010%2010l3-4%208%203v6a3%203%200%200%201-3%203C14%2031%201%2018%201%205a3%203%200%200%201%203-3z%22%2F%3E%3Cg%20transform%3D%22translate(138%2016)%22%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%2234%22%20height%3D%2224%22%20rx%3D%225%22%2F%3E%3Cpath%20d%3D%22M11%207l3-5h8l3%205%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2219%22%20r%3D%227%22%2F%3E%3C%2Fg%3E%3Cpath%20transform%3D%22translate(204%2018)%22%20d%3D%22M16%2030S2%2021%202%2011a7%207%200%200%201%2014-3%207%207%200%200%201%2014%203c0%2010-14%2019-14%2019z%22%2F%3E%3Cpath%20transform%3D%22translate(20%2084)%22%20d%3D%22M16%202l4%209%2010%201-7%207%202%2010-9-5-9%205%202-10-7-7%2010-1z%22%2F%3E%3Cg%20transform%3D%22translate(86%2080)%22%3E%3Cpath%20d%3D%22M10%2026V4l18-3v22%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2226%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2223%22%20r%3D%225%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(146%2082)%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214%22%2F%3E%3Cpath%20d%3D%22M16%208v8l6%204%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(210%2084)%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214%22%2F%3E%3Cpath%20d%3D%22M10%2019c2%203%2010%203%2012%200%22%2F%3E%3Cpath%20d%3D%22M11%2012h.01M21%2012h.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(14%20150)%22%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%2234%22%20height%3D%2224%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M2%206l16%2012%2016-12%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(82%20146)%22%3E%3Crect%20x%3D%222%22%20y%3D%2212%22%20width%3D%2230%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M0%2012h34v-6H0zM17%206v26%22%2F%3E%3Cpath%20d%3D%22M17%206c-4-6-10-4-8%200M17%206c4-6%2010-4%208%200%22%2F%3E%3C%2Fg%3E%3Cpath%20transform%3D%22translate(140%20152)%22%20d%3D%22M10%2026h20a8%208%200%200%200%200-16%2011%2011%200%200%200-21-2A8%208%200%200%200%2010%2026z%22%2F%3E%3Cg%20transform%3D%22translate(208%20146)%22%3E%3Cpath%20d%3D%22M3%2015L18%203l15%2012%22%2F%3E%3Cpath%20d%3D%22M7%2012v19h22V12M15%2031v-9h6v9%22%2F%3E%3C%2Fg%3E%3Cpath%20transform%3D%22translate(18%20214)%22%20d%3D%22M2%2014L32%202%2022%2032l-6-12zM16%2020L32%202%22%2F%3E%3Cg%20transform%3D%22translate(88%20210)%22%3E%3Cpath%20d%3D%22M14%2033S2%2021%202%2013a12%2012%200%200%201%2024%200c0%208-12%2020-12%2020z%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2213%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(148%20212)%22%3E%3Cpath%20d%3D%22M6%2024V14a10%2010%200%200%201%2020%200v10l3%204H3z%22%2F%3E%3Cpath%20d%3D%22M13%2031a3%203%200%200%200%206%200%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(210%20214)%22%3E%3Cpath%20d%3D%22M3%2010h22v12a8%208%200%200%201-8%208H11a8%208%200%200%201-8-8z%22%2F%3E%3Cpath%20d%3D%22M25%2013h3a4%204%200%200%201%200%208h-3%22%2F%3E%3Cpath%20d%3D%22M10%202c-2%203%202%204%200%206M17%202c-2%203%202%204%200%206%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M60%2066l5%205%209-10%22%2F%3E%3Ccircle%20cx%3D%22196%22%20cy%3D%2262%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M128%20132h10M133%20127v10%22%2F%3E%3Cpath%20d%3D%22M58%20196l6-6M64%20196l-6-6%22%2F%3E%3Ccircle%20cx%3D%22252%22%20cy%3D%22196%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
:root[data-theme="dark"] .e2e-note{background:#182229;color:#FFD279}
:root[data-theme="dark"] .txt a{color:#53BDEB}

:root[data-theme="dark"] .loc-open,:root[data-theme="dark"] .cc-msg{color:#53BDEB}

:root[data-theme="dark"] .quote{background:rgba(255,255,255,.08)}
/* ---------- chat menu, dialogs, reactions, themes (25 Oct 2026) ---------- */
.chat-menu{min-width:240px}
.chat-menu button{display:flex;align-items:center;gap:14px}
.chat-menu button svg{flex:none;color:var(--muted)}
.chat-menu button.danger svg{color:var(--danger)}
.chat-menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.row-muted{display:inline-flex;color:var(--muted);margin-left:4px}.row-muted svg{width:16px;height:16px}
.badge.muted{background:var(--muted)}
.meta .exp{font-size:11px;margin-right:3px}
.modal.choice{width:min(380px,100%)}
.modal.choice .modal-list{min-height:0;padding:4px 0 8px}
.choice-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:13px 20px;font-size:15px}
.choice-row:hover{background:var(--hover)}
.choice-row .radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--muted);flex:none}
.choice-row.on .radio{border-color:var(--orange);box-shadow:inset 0 0 0 3px var(--panel);background:var(--orange)}
.choice-row .box{width:18px;height:18px;border-radius:4px;border:2px solid var(--muted);flex:none;display:grid;place-items:center;font-size:12px;color:#fff}
.choice-row.on .box{background:var(--orange);border-color:var(--orange)}
.choice-row svg{width:18px;height:18px;color:var(--orange-d)}
.themes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:6px 18px 20px}
.theme-sw{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;padding:4px;border-radius:10px}
.theme-sw .sw{display:block;width:100%;height:54px;border-radius:10px;padding:0;border:2px solid var(--line)}
.theme-sw.on .sw{border-color:var(--orange)}
/* chat backgrounds; also used by the swatches */
.msgs[data-ct="mint"]{background-color:#D3EFDF}.msgs[data-ct="sky"]{background-color:#D4E8F7}.msgs[data-ct="rose"]{background-color:#F6DCE2}
.msgs[data-ct="sand"]{background-color:#F1E6CF}.msgs[data-ct="lavender"]{background-color:#E4DDF4}.msgs[data-ct="slate"]{background-color:#B9C6CE}
:root[data-theme="dark"] .msgs[data-ct="mint"]{background-color:#0F2A22}:root[data-theme="dark"] .msgs[data-ct="sky"]{background-color:#0E2233}
:root[data-theme="dark"] .msgs[data-ct="rose"]{background-color:#2E1820}:root[data-theme="dark"] .msgs[data-ct="sand"]{background-color:#2B2416}
:root[data-theme="dark"] .msgs[data-ct="lavender"]{background-color:#211B33}:root[data-theme="dark"] .msgs[data-ct="slate"]{background-color:#1B252C}
/* reactions */
.m{align-items:center}
.react-btn{opacity:0;flex:none;width:30px;height:30px;margin:0 8px;align-self:center;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:var(--panel);box-shadow:var(--shadow);transition:opacity .12s}
.react-btn svg{width:18px;height:18px}
.m:hover .react-btn,.react-btn:focus-visible{opacity:1}
.m.mine .react-btn{order:-1}
.react-bar{position:fixed;z-index:170;display:flex;align-items:center;gap:4px;background:var(--panel);border-radius:26px;padding:4px 8px;box-shadow:0 2px 10px rgba(11,20,26,.2)}
.react-bar button{width:38px;height:38px;padding:0;border-radius:50%;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .1s}
.react-bar button:hover{transform:scale(1.18);background:var(--hover)}
.react-bar button.on{background:var(--hover)}
.react-bar .more{font-size:24px;font-weight:300;color:var(--ink)}
.react-bar.all{flex-wrap:wrap;width:min(352px,calc(100vw - 16px));max-height:260px;overflow-y:auto;border-radius:16px}
.react-bar.all button{width:40px;height:40px;font-size:22px}
/* reactions: one pill on the bubble's bottom-left corner, like WhatsApp */
.reacts{position:absolute;bottom:-18px;left:10px;z-index:1;display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 8px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(11,20,26,.12);cursor:pointer}
.m.mine .reacts{left:auto;right:10px}
.reacts .re{display:flex;align-items:center;gap:1px;font-size:16px;line-height:1;height:16px}
.reacts .rn{font-size:12px;color:var(--muted)}
.reacts:hover{background:var(--hover)}
.m:has(.reacts){margin-bottom:22px} /* room for the pill on the row, so the 🙂 button stays centred on the bubble */
/* "who reacted" popup, like WhatsApp */
.react-list{width:min(372px,calc(100vw - 16px));min-height:240px;max-height:min(420px,70vh);padding:0;border-radius:14px;display:flex;flex-direction:column;overflow:hidden}
.react-list .rl-head{padding:16px 18px 8px;font-size:14.5px;font-weight:500;color:var(--muted)}
.react-list .rl-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:2px 14px 14px;border-bottom:1px solid var(--line)}
.react-list .rl-tab{display:inline-flex;align-items:center;gap:5px;width:auto;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:16px;font-size:14px;color:var(--muted)}
.react-list .rl-tab:hover{background:var(--hover)}
.react-list .rl-tab.on{border-color:var(--muted);color:var(--ink)}
.react-list .rl-tab .rl-e{font-size:17px;line-height:1}
.react-list .rl-tab.add{width:36px;padding:0;justify-content:center;position:relative;color:var(--ink)}
.react-list .rl-tab.add svg{width:20px;height:20px}
.react-list .rl-tab.add b{position:absolute;top:2px;right:4px;font-size:11px;line-height:1}
.react-list .rl-rows{overflow-y:auto;padding:6px 0}
.react-list .rl-row{display:flex;align-items:center;gap:14px;width:100%;padding:8px 18px;border-radius:0;text-align:left}
.react-list .rl-row:not(.mine){cursor:default}.react-list .rl-row:not(.mine):hover{background:none}
.react-list .rl-name{flex:1;display:flex;flex-direction:column;font-size:15.5px;color:var(--ink)}
.react-list .rl-name small{font-size:12.5px;color:var(--muted)}
.react-list .rl-emoji{font-size:24px;line-height:1}
/* emoji glyphs sit low and to the right in Windows' font: use the colour-emoji fonts, no line-height, nudge up a hair */
.react-bar button,.reacts .re,.react-list .rl-emoji,.react-list .rl-e{font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-variant-emoji:emoji}
.react-bar button>span,.reacts .re>span{display:block;line-height:1;transform:translateY(-1px)}
.react-btn{padding:0}.react-btn svg{display:block}
/* forward picker, like WhatsApp */
.fwd-modal{width:min(480px,100%);max-height:min(760px,92vh)}
.fwd-modal header{justify-content:flex-start;gap:14px;border-bottom:0;padding:14px 16px 6px}
.fwd-modal header b{flex:1;font-size:16px;font-weight:500}
.fwd-search{display:flex;align-items:center;gap:10px;margin:6px 16px 8px;padding:0 14px;height:44px;border:2px solid var(--line);border-radius:22px;color:var(--muted)}
.fwd-search:focus-within{border-color:var(--orange)}
.fwd-search input{flex:1;border:0;outline:none;background:none;font-size:15px;color:var(--ink)}
.fwd-list .sect{padding:14px 26px 8px}
.fwd-row{height:68px;gap:16px}
.fwd-row .check{margin-left:6px}
.fwd-row .row-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.react-btn + .fwd-btn{margin-left:-4px}
.m.mine .fwd-btn{order:-1}
/* settings rows: every icon the same size and column */
.set-row > svg{width:22px;height:22px;flex:none;color:var(--muted)}
.set-row.danger > svg{color:var(--danger)}
/* chat wallpaper picture: replaces the doodle, repeated as a tile; stays still while messages scroll */
.msgs.has-wp{background-position:0 0} /* size and repeat are set per picture: a tile at its real size */
/* calls: a person whose camera is off shows their photo; "Turn on mine" button */
.call-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#1b2a33;color:#fff;font-size:15px;min-height:0}
.call-strip .call-tile{width:180px;aspect-ratio:4/3;border-radius:10px;gap:6px;font-size:12px}
.call-strip .call-tile .av{width:48px!important;height:48px!important}
.call-rec button.go{background:var(--online)}
@media (max-width:700px){.call-strip .call-tile{width:110px}}
/* video in a chat: a still with a round play button and the length, like WhatsApp; click opens the player */
.vid-wrap{cursor:pointer;background:#111}
.vid-wrap video.photo{cursor:pointer;pointer-events:none}
.vid-play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(11,20,26,.55);color:#fff;display:grid;place-items:center;pointer-events:none}
.vid-play svg{display:block}
.vid-wrap:hover .vid-play{background:rgba(11,20,26,.72)}
.vid-len{position:absolute;left:8px;bottom:6px;z-index:1;display:flex;align-items:center;gap:4px;color:#fff;font-size:12px;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.45);pointer-events:none}
.vid-len svg{width:16px;height:16px;fill:#fff;stroke:none}
.b.photo-b.cap .vid-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(transparent,rgba(0,0,0,.42));pointer-events:none}
/* opening a video that's still downloading: the play button turns into a spinner */
.vid-wrap.loading .vid-play svg{display:none}
.vid-wrap.loading .vid-play::after{content:"";width:26px;height:26px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:vidspin .8s linear infinite}
@keyframes vidspin{to{transform:rotate(360deg)}}
.photo-wrap .b-menu{z-index:2}
/* photo/video menu arrow: small and centred; in the white header (next to the name) it is plain, on the picture a dark circle */
.b.photo-b .b-menu svg{width:16px;height:16px;display:block}
.b.photo-b .photo-wrap .b-menu{width:22px;height:22px;top:6px;right:6px}
/* in the white top line (name or "Forwarded") of a photo/video: a flex item at the end of the line, centred on it */
.b.photo-b > .from,.b.photo-b > .fwd{display:flex;align-items:center;gap:6px}
.b.photo-b > .from > .b-menu,.b.photo-b > .fwd > .b-menu{position:static;margin-left:auto;flex:none;width:20px;height:20px;border-radius:50%;background:transparent!important;color:var(--muted)}
.b.photo-b > .from > .b-menu:hover,.b.photo-b > .fwd > .b-menu:hover{background:rgba(0,0,0,.06)!important}
/* no browser padding on the menu button, so the arrow is exactly in the middle of its circle */
.b .b-menu{padding:0}
/* chat list: ⌄ menu arrow, shown while the mouse is over the chat (or its menu is open), like WhatsApp */
.row-menu{display:none;width:20px;height:20px;place-items:center;flex:none;color:var(--muted);border-radius:50%;margin-left:2px;cursor:pointer}
.row-menu svg{width:20px;height:20px;display:block}
.row:hover .row-menu,.row-menu.open{display:grid}
.row-menu:hover{color:var(--ink)}

/* side menus (Mute notifications ▸, Add to list ▸), like WhatsApp */
.chat-menu .has-sub{position:relative;padding-right:30px}
.chat-menu .sub-arrow{position:absolute;right:12px;font-size:10px;color:var(--muted)}
.sub-menu{min-width:150px}
.sub-menu .sub-check{width:22px;display:inline-block;color:var(--online,#25D366);font-weight:700}
/* chat list: Archived row and section, pinned icon, "marked as unread" dot */
.archived-row{height:52px;gap:18px}
.archived-row .archived-ic{width:49px;display:grid;place-items:center;color:var(--online,#1DAA61)}
.archived-row .row-name{flex:1;text-align:left}
.archived-n{color:var(--online,#1DAA61);font-size:12px;font-weight:600}
.archived-head{display:flex;align-items:center;gap:14px;padding:8px 14px}
.archived-note{margin:0 0 6px;padding:0 20px;font-size:13px;color:var(--muted)}
.badge.dot{min-width:12px;width:12px;height:12px;padding:0}
.row-muted svg{width:16px;height:16px}
/* one-to-one chat with someone I blocked */
.composer.blocked .pill,.composer.blocked .replybar{display:none}
.blocked-bar{padding:14px;text-align:center;color:var(--muted);font-size:14px}
.blocked-bar .link{background:none;border:0;color:var(--orange);font-weight:600;cursor:pointer;padding:0}
/* every icon in a menu the same small size, in one column (the bell icon is drawn larger elsewhere) */
.chat-menu button > svg{width:20px;height:20px;flex:none}
.chat-menu .sub-arrow{font-size:12px;color:var(--ink)}

/* pinned messages: a bar under the chat header (WhatsApp) */
.pinbar{flex:none;display:flex;align-items:center;gap:10px;padding:4px 10px 4px 14px;min-height:46px;background:var(--panel);border-bottom:1px solid var(--line);color:var(--muted);z-index:2}
.pinbar.hidden{display:none}
.pinbar > svg{width:18px;height:18px;flex:none}
.pin-marks{display:flex;flex-direction:column;gap:2px;align-self:stretch;justify-content:center}
.pin-marks i{width:3px;flex:1;max-height:12px;border-radius:2px;background:var(--line)}
.pin-marks i.on{background:var(--muted)}
.pin-txt{flex:1;min-width:0;text-align:left;color:var(--ink);font-size:14px;padding:6px 0}
.pin-txt span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinbar .icon-btn svg{width:18px;height:18px}

/* "Request screen" (not a call): the viewer's screen window, and the sharer's "Sharing your screen" bar */
.screen-viewer{position:fixed;inset:0;z-index:140;background:#0B141A;color:#E9EDEF;display:flex;flex-direction:column}
.screen-viewer header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#111B21;flex:none}
.screen-viewer .sv-title{flex:1;min-width:0;display:flex;flex-direction:column}
.screen-viewer .sv-title small{color:#8696A0}
.screen-viewer .icon-btn{color:#E9EDEF}
.screen-viewer .icon-btn:hover{background:rgba(255,255,255,.1)}
.screen-viewer .icon-btn.recording{background:#E0304A;color:#fff}
.screen-viewer .sv-rec{display:flex;align-items:center;gap:4px;font-size:13px;color:#FF4D5E;margin-right:6px}
.screen-viewer .sv-rec svg{width:16px;height:16px}
.screen-viewer .sv-body{flex:1;min-height:0;position:relative;display:grid;place-items:center}
.screen-viewer video{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;background:#000}
.screen-viewer .sv-wait{position:absolute;inset:0;display:grid;place-items:center;color:#8696A0;font-size:15px;pointer-events:none}
.screen-sharer{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:140;display:flex;align-items:center;gap:10px;
  background:#111B21;color:#fff;padding:8px 10px 8px 16px;border-radius:999px;box-shadow:0 8px 28px rgba(11,20,26,.35);font-size:14px}
.screen-sharer > svg{width:18px;height:18px;color:var(--online)}
.screen-sharer .rec-note{display:flex;align-items:center;gap:4px;color:#FF4D5E;font-size:13px}
.screen-sharer .rec-note svg{width:14px;height:14px}
.screen-sharer button{background:#E0304A;color:#fff;border-radius:999px;padding:6px 14px;font-size:13px}

/* embedded chat (opened by another system): no left rail; one chat fills the frame */
.wa.embed{grid-template-columns:minmax(300px,32%) 1fr}
.wa.embed .rail{display:none}
.wa.embed-one{grid-template-columns:1fr}
.wa.embed-one .side{display:none}
.wa.embed-one .chat{display:flex}
.wa.embed-one .chat-head .back{display:none}
.embed-wait{height:100vh;display:grid;place-content:center;gap:6px;text-align:center;color:var(--muted);background:var(--panel);font-size:15px}
.embed-wait b{color:var(--ink);font-size:17px}

:root{--bc-build:"4f4c4275bf"}