/* Kelly Chat — WhatsApp-parity UI. Light + dark. */
:root{--green:#008069;--green-dark:#075e54;--teal:#00a884;--bg:#ffffff;--bg2:#f0f2f5;--panel:#ffffff;--text:#111b21;--muted:#667781;--line:#e9edef;--bubble-in:#ffffff;--bubble-out:#d9fdd3;--wall:#efeae2;--tick:#53bdeb;--danger:#ea0038;--link:#027eb5;--header:#008069;--header-text:#fff;--fab:#00a884;--shadow:0 1px 2px rgba(0,0,0,.18);--sys:#fff5c4;--overlay:rgba(0,0,0,.45)}
@media (prefers-color-scheme:dark){:root{--bg:#111b21;--bg2:#202c33;--panel:#111b21;--text:#e9edef;--muted:#8696a0;--line:#222d34;--bubble-in:#202c33;--bubble-out:#005c4b;--wall:#0b141a;--header:#202c33;--header-text:#e9edef;--sys:#182229;--shadow:0 1px 2px rgba(0,0,0,.5)}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow:hidden}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
a{color:var(--link)}
img{max-width:100%}
.app{position:fixed;top:0;left:0;right:0;display:flex;flex-direction:column;max-width:560px;margin:0 auto;background:var(--bg);height:100vh;height:100dvh;height:var(--vvh,100dvh);overflow:hidden}
@media (min-width:900px){.app{max-width:1400px;flex-direction:row;border-left:1px solid var(--line);border-right:1px solid var(--line)}
#left{width:400px;min-width:340px;display:flex;flex-direction:column;border-right:1px solid var(--line);position:relative;background:var(--bg)}
#right{flex:1;display:flex;flex-direction:column;position:relative;min-width:0;background:var(--bg)}
#right .hdr .ibtn:first-child[data-back]{display:none}
.placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);background:var(--bg2);text-align:center;padding:40px}
.placeholder img{width:96px;border-radius:24px;opacity:.9}.placeholder h2{margin:8px 0 0;color:var(--text);font-weight:500;font-size:28px}
.row.active{background:var(--bg2)}}
.boot{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#0b141a;color:#e9edef}
.boot img{border-radius:20px}.boot-name{font-size:22px;font-weight:600}.boot-sub{color:#8696a0;font-size:13px}
.spinner{width:26px;height:26px;border:3px solid rgba(255,255,255,.2);border-top-color:#00a884;border-radius:50%;animation:spin .9s linear infinite;margin-top:16px}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#1f2c34;color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;z-index:999;box-shadow:0 3px 12px rgba(0,0,0,.35);max-width:90vw}

/* Header */
.hdr{background:var(--header);color:var(--header-text);display:flex;align-items:center;gap:8px;padding:8px 8px 8px 6px;min-height:58px;padding-top:calc(8px + env(safe-area-inset-top));flex-shrink:0}
.hdr .title{flex:1;min-width:0}
.hdr .title h1{font-size:19px;font-weight:600;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .title .sub{font-size:12.5px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:17px;line-height:17px;position:relative}
.hdr .title .sub>span{display:inline-block;white-space:nowrap;will-change:transform}
.hdr .title .sub.in>span{animation:subin .38s cubic-bezier(.2,.7,.2,1) both}
.hdr .title .sub.marquee{text-overflow:clip}
.hdr .title .sub.marquee>span{animation:submarquee var(--dur,9s) ease-in-out .9s infinite}
.hdr .title .sub.in.marquee>span{animation:subin .38s cubic-bezier(.2,.7,.2,1) both,submarquee var(--dur,9s) ease-in-out 1.2s infinite}
@keyframes subin{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes submarquee{0%,12%{transform:translateX(0)}48%,64%{transform:translateX(var(--shift,0px))}92%,100%{transform:translateX(0)}}
.hdr h1.brand{font-size:21px;font-weight:700;letter-spacing:-.2px}
.ibtn{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:inherit;flex-shrink:0}
.ibtn:active{background:rgba(255,255,255,.15)}
.ibtn svg{width:24px;height:24px;fill:currentColor}
.hdr .avatar{width:40px;height:40px}
.tabs{display:flex;background:var(--header);color:var(--header-text);flex-shrink:0}
.tabs button{flex:1;padding:12px 0 10px;font-weight:600;font-size:14px;opacity:.75;border-bottom:3px solid transparent;text-transform:uppercase;letter-spacing:.3px;position:relative}
.tabs button.on{opacity:1;border-bottom-color:#fff}
.tabs.scrollx{overflow-x:auto;scrollbar-width:none}.tabs.scrollx::-webkit-scrollbar{display:none}.tabs.scrollx button{flex:1 0 auto;padding:12px 14px 10px;white-space:nowrap}
.tabs .badge{position:absolute;top:8px;margin-left:6px}

/* Avatars */
.avatar{width:50px;height:50px;border-radius:50%;background:#dfe5e7 center/cover no-repeat;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:20px;position:relative;overflow:hidden}
.avatar.sm{width:36px;height:36px;font-size:15px}.avatar.lg{width:96px;height:96px;font-size:40px}.avatar.xl{width:140px;height:140px;font-size:56px}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar .dot{position:absolute;right:2px;bottom:2px;width:11px;height:11px;border-radius:50%;background:#25d366;border:2px solid var(--bg)}
.ring{padding:2px;border-radius:50%;border:2.5px solid var(--teal)}.ring.seen{border-color:#b7bec3}

/* Lists */
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.row{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 14px;cursor:pointer;position:relative;user-select:none}
.row:active{background:var(--bg2)}
.row .main{flex:1;min-width:0;border-bottom:1px solid var(--line);padding:6px 0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.row:last-child .main{border-bottom:0}
.row .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.row .name{font-size:16.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
/* v104/v111: ladies light green, men blue */
.name.g-f{color:#66bb6a}.name.g-m{color:#1e88e5}.avatar.g-f{box-shadow:0 0 0 2px #66bb6a}.avatar.g-m{box-shadow:0 0 0 2px #1e88e5}
.row .time{font-size:12px;color:var(--muted);flex-shrink:0}
.row .time.unread{color:var(--teal);font-weight:600}
.row .bottom{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;margin-top:2px}
.row .preview{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .icons{display:flex;gap:6px;align-items:center;flex-shrink:0}
.badge{background:var(--teal);color:#fff;font-size:12px;font-weight:600;min-width:20px;height:20px;border-radius:10px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center}
.pin{color:var(--muted);width:16px;height:16px;fill:currentColor}
.verified{width:16px;height:16px;fill:var(--tick);flex-shrink:0}
.tete-row{background:linear-gradient(90deg,rgba(0,168,132,.08),transparent)}
.section{padding:10px 16px 6px;color:var(--teal);font-weight:600;font-size:14px}
.hint{padding:14px 20px;color:var(--muted);font-size:13.5px;text-align:center}
.ticks{width:16px;height:16px;fill:var(--muted);flex-shrink:0}
.ticks.read{fill:var(--tick)}

/* FAB */
.fab{position:absolute;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:16px;background:var(--fab);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:5}
.fab svg{width:26px;height:26px;fill:currentColor}
.fab.mini{width:44px;height:44px;bottom:calc(90px + env(safe-area-inset-bottom));background:var(--bg2);color:var(--text);border-radius:12px}

/* Screens */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);animation:slide .18s ease-out}
@keyframes slide{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}
.view{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}

/* Chat */
.chat-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;background:var(--wall) url(/assets/wallpaper.png) repeat;background-size:400px;padding:8px 8px 4px;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch}
.chat-body .day{align-self:center;background:var(--sys);color:var(--muted);font-size:12.5px;padding:5px 12px;border-radius:8px;margin:8px 0;box-shadow:var(--shadow)}
.sysmsg{align-self:center;background:var(--sys);color:var(--muted);font-size:12.5px;padding:5px 12px;border-radius:8px;margin:4px 0;box-shadow:var(--shadow);text-align:center;max-width:85%}
.msg{display:flex;flex-direction:column;max-width:82%;margin:2px 0;position:relative}
.msg.out{align-self:flex-end;align-items:flex-end}.msg.in{align-self:flex-start}
.msg.first{margin-top:8px}
.bubble{background:var(--bubble-in);border-radius:8px;padding:6px 8px 6px 9px;box-shadow:var(--shadow);position:relative;word-wrap:break-word;overflow-wrap:anywhere;min-width:80px;max-width:100%}
.out .bubble{background:var(--bubble-out)}
.first.in .bubble::before{content:"";position:absolute;top:0;left:-8px;border:8px solid transparent;border-top-color:var(--bubble-in);border-right-color:var(--bubble-in);border-top-left-radius:2px}
.first.out .bubble::before{content:"";position:absolute;top:0;right:-8px;border:8px solid transparent;border-top-color:var(--bubble-out);border-left-color:var(--bubble-out)}
.first.in .bubble{border-top-left-radius:0}.first.out .bubble{border-top-right-radius:0}
.bubble .sender{font-size:12.5px;font-weight:600;color:#e542a3;margin-bottom:2px}
.bubble .txt{white-space:pre-wrap;font-size:14.5px}
.bubble .txt a{word-break:break-all}
.bubble .foot{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:2px;font-size:11px;color:var(--muted);float:right;margin-left:8px;position:relative;top:4px}
.bubble .foot .ticks{width:15px;height:15px}
.bubble .fwd{font-size:12px;color:var(--muted);font-style:italic;display:flex;align-items:center;gap:4px;margin-bottom:2px}
.bubble .quote{border-left:4px solid var(--teal);background:rgba(0,0,0,.06);border-radius:6px;padding:5px 8px;margin-bottom:5px;font-size:13px;color:var(--muted);cursor:pointer}
.bubble .quote b{display:block;color:var(--teal);font-size:12.5px}
.bubble .quote .q{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.bubble img.pic,.bubble video.pic{display:block;border-radius:6px;max-width:min(300px,68vw);max-height:360px;object-fit:cover;cursor:pointer;background:#000}
.bubble .cap{margin-top:4px}
.bubble .doc{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.05);border-radius:8px;padding:10px;min-width:200px;text-decoration:none;color:inherit}
.bubble .doc svg{width:32px;height:32px;fill:var(--muted)}
.bubble .doc .dn{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}.bubble .doc .ds{font-size:12px;color:var(--muted)}
.voice{display:flex;align-items:center;gap:8px;min-width:230px;padding:2px 0}
.voice .play{width:36px;height:36px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.voice .play svg{width:20px;height:20px;fill:#fff}
.voice .bar{flex:1;height:4px;background:rgba(0,0,0,.15);border-radius:2px;position:relative}
.voice .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--teal);border-radius:2px;width:0}
.voice .dur{font-size:11px;color:var(--muted);min-width:34px}
.callmsg{display:flex;align-items:center;gap:10px;padding:4px 2px}
.callmsg svg{width:22px;height:22px;fill:var(--teal)}.callmsg.missed svg{fill:var(--danger)}
.callmsg .ct{font-size:14px}.callmsg .cs{font-size:12px;color:var(--muted)}
.deleted{font-style:italic;color:var(--muted);display:flex;align-items:center;gap:5px}
.reacts{display:flex;gap:2px;margin-top:-6px;z-index:1}
.reacts span{background:var(--bg);border:1px solid var(--line);border-radius:12px;font-size:13px;padding:1px 6px;box-shadow:var(--shadow)}
.msg.selected .bubble{outline:2px solid var(--teal)}
.star-ic{width:12px;height:12px;fill:var(--muted)}

/* Composer */
.composer{display:flex;align-items:flex-end;gap:6px;padding:6px 8px;min-height:56px;position:relative;z-index:3;padding-bottom:calc(6px + env(safe-area-inset-bottom));background:var(--bg2);flex-shrink:0}
.composer .box{flex:1 1 0;min-width:0;display:flex;align-items:flex-end;background:var(--panel);border-radius:24px;padding:4px 6px 4px 8px;min-height:44px;box-shadow:var(--shadow);overflow:hidden}
.composer textarea{flex:1 1 0;min-width:0;width:100%;border:0;outline:0;background:transparent;resize:none;max-height:120px;padding:9px 6px;line-height:1.35;font-size:16px}
.composer .box .ibtn{width:36px;flex-shrink:0}
@media (max-width:360px){.composer .box .ibtn:first-child{display:none}}
.composer .ibtn{color:var(--muted)}
.composer .send{flex-shrink:0;width:46px;height:46px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow)}
.composer .send svg{width:24px;height:24px;fill:#fff}
.composer .send.rec{background:var(--danger);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
.replybar{background:var(--bg2);padding:8px 12px 0;display:flex;align-items:center;gap:8px}
.replybar .quote{flex:1;margin:0}
.recbar{flex:1;display:flex;align-items:center;gap:10px;background:var(--panel);border-radius:24px;padding:10px 14px;box-shadow:var(--shadow)}
.recbar .rdot{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.emoji-panel{background:var(--bg2);height:230px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));padding:6px;gap:2px;flex-shrink:0}
.emoji-panel button{font-size:26px;height:40px;border-radius:6px}
.emoji-panel button:active{background:var(--line)}
.attach-sheet{position:absolute;left:8px;right:8px;bottom:76px;background:var(--panel);border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.3);padding:18px 8px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;z-index:9}
.attach-sheet button{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.attach-sheet .ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.attach-sheet .ic svg{width:26px;height:26px;fill:#fff}
.typing{color:var(--teal)!important}

/* Sheets, menus, modals */
.overlay{position:fixed;inset:0;background:var(--overlay);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.overlay.center{align-items:center}
.sheet{background:var(--panel);width:100%;max-width:560px;border-radius:16px 16px 0 0;padding:10px 0 calc(12px + env(safe-area-inset-bottom));max-height:80vh;overflow-y:auto;animation:up .18s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}
.sheet .mi{display:flex;align-items:center;gap:16px;padding:13px 22px;font-size:15.5px;width:100%;text-align:left}
.sheet .mi:active{background:var(--bg2)}
.sheet .mi svg{width:22px;height:22px;fill:var(--muted)}
.sheet .mi.danger{color:var(--danger)}.sheet .mi.danger svg{fill:var(--danger)}
.modal{background:var(--panel);width:min(92vw,400px);border-radius:14px;padding:20px 22px;animation:up .18s ease-out;max-height:85vh;overflow-y:auto}
.modal h3{margin:0 0 12px;font-size:18px;font-weight:600}
.modal p{color:var(--muted);font-size:14px;margin:0 0 14px}
.modal .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.btn{padding:9px 18px;border-radius:22px;font-weight:600;font-size:14px;color:var(--teal)}
.btn.primary{background:var(--teal);color:#fff}
.btn.danger{color:var(--danger)}
.btn.block{display:block;width:100%;text-align:center;padding:13px}
.btn:disabled{opacity:.5}
.popmenu{position:absolute;top:56px;right:8px;background:var(--panel);border-radius:6px;box-shadow:0 4px 18px rgba(0,0,0,.3);min-width:200px;z-index:60;padding:6px 0;animation:up .12s ease-out}
.popmenu button{display:block;width:100%;text-align:left;padding:12px 20px;font-size:15px;color:var(--text)}
.popmenu button:active{background:var(--bg2)}
.react-bar{display:flex;gap:4px;justify-content:center;padding:6px 10px 10px;background:var(--panel);border-radius:30px;margin:0 auto 6px;width:fit-content}
.react-bar button{font-size:26px;width:42px;height:42px;border-radius:50%}
.react-bar button:active{background:var(--bg2)}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:13px;color:var(--teal);font-weight:600}
.field input,.field textarea,.field select{border:0;border-bottom:2px solid var(--teal);background:transparent;padding:8px 2px;font-size:16px;outline:0;width:100%}
.field textarea{border:1px solid var(--line);border-radius:8px;padding:10px}
.field .help{font-size:12px;color:var(--muted)}
.quick{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;padding:6px 10px 12px;animation:fadein .25s}
.quick input{flex:1;min-width:120px;max-width:200px;border:1px solid var(--teal);border-radius:22px;padding:10px 14px;font-size:16px;background:var(--panel,#fff);color:inherit}
.qbtn{background:var(--teal);color:#fff;border:0;border-radius:22px;padding:11px 18px;font-weight:700;font-size:15px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.qbtn:active{transform:scale(.97)}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--teal);color:var(--teal);border-radius:20px;padding:7px 16px;font-weight:600}
.chip.on{background:var(--teal);color:#fff}
.search{display:flex;align-items:center;gap:8px;background:var(--bg2);border-radius:22px;margin:8px 12px;padding:6px 14px}
.search input{flex:1;border:0;background:transparent;outline:0;font-size:15px;padding:4px 0}
.search svg{width:20px;height:20px;fill:var(--muted)}
.selbar{display:flex;gap:8px;padding:8px 12px;overflow-x:auto;flex-shrink:0}
.selbar .sel{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--muted);width:56px;flex-shrink:0}
.check{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted);display:flex;align-items:center;justify-content:center}
.check.on{background:var(--teal);border-color:var(--teal)}
.check svg{width:14px;height:14px;fill:#fff}

/* Auth */
.auth{flex:1;overflow-y:auto;padding:24px 22px 40px;display:flex;flex-direction:column;background:var(--bg)}
.auth .hero{text-align:center;margin:8px 0 22px}
.auth .hero img{width:110px;height:110px;border-radius:50%;box-shadow:0 6px 24px rgba(0,128,105,.35);border:4px solid var(--teal)}
.auth h2{margin:14px 0 4px;font-size:24px;font-weight:700;color:var(--green)}
.auth .lead{color:var(--muted);font-size:14.5px;margin:0}
.auth .terms{font-size:12px;color:var(--muted);text-align:center;margin-top:14px}
.switch{text-align:center;margin-top:18px;font-size:14px;color:var(--muted)}
.switch button{color:var(--teal);font-weight:600}
.err{color:var(--danger);font-size:13.5px;margin:-8px 0 12px}

/* Banners */
/* landing-page install button (top-right corner) */
.install-corner{position:fixed;top:10px;right:10px;z-index:60;background:var(--teal);color:#fff;border:0;border-radius:22px;padding:9px 14px;font-weight:700;font-size:13.5px;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.install-corner:active{transform:scale(.97)}
#offlineBar{position:fixed;top:0;left:0;right:0;z-index:9000;background:#54432a;color:#fff5c4;font-size:13px;padding:7px 12px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.banner{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff5c4;color:#54432a;font-size:13.5px;flex-shrink:0}
.banner.green{background:#d9fdd3;color:#0b3d2e}
/* v107: admin client info block */
.client-info{margin-top:10px;border-top:1px solid var(--border,#2a3942);max-height:38vh;overflow:auto;font-size:13px}.client-info .ci{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid rgba(128,128,128,.12)}.client-info .k{flex:0 0 38%;color:var(--muted)}.client-info .v{flex:1;word-break:break-word}
.modal{max-height:92vh;overflow:auto}
/* v105: sign-up profile photo */
.photo-row{display:flex;align-items:center;gap:12px}.photo-row .btn{flex:1}.photo-prev{width:56px;height:56px;font-size:24px;background:#dfe5e7}.photo-prev img{width:100%;height:100%;object-fit:cover}
.banner.dark{background:#1f2c34;color:#fff}
.banner .bt{background:var(--green);color:#fff;border-radius:18px;padding:7px 14px;font-weight:600;font-size:13px;white-space:nowrap;text-decoration:none}
.banner .x{margin-left:auto;color:inherit;opacity:.6;font-size:20px;padding:0 4px}
.banner img{width:36px;height:36px;border-radius:9px;flex-shrink:0}

/* Info / profile */
.profile-head{display:flex;flex-direction:column;align-items:center;padding:24px 16px 14px;gap:8px;background:var(--bg)}
.profile-head h2{margin:6px 0 0;font-size:22px;font-weight:600;display:flex;align-items:center;gap:6px}
.profile-head .ph{color:var(--muted);font-size:15px}
.actions3{display:flex;justify-content:center;gap:28px;padding:6px 0 16px}
.actions3 button{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--teal);font-size:12.5px;font-weight:600}
.actions3 button .ic{width:52px;height:52px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center}
.actions3 svg{width:24px;height:24px;fill:var(--teal)}
.card{background:var(--panel);margin:10px 0;padding:4px 0}
.card .li{display:flex;align-items:center;gap:16px;padding:13px 18px;width:100%;text-align:left;font-size:15.5px}
.card .li svg{width:22px;height:22px;fill:var(--muted)}
.card .li .lt{flex:1;min-width:0}.lt small{display:block;color:var(--muted);font-size:13px;white-space:pre-wrap}
.card .li.danger{color:var(--danger)}.card .li.danger svg{fill:var(--danger)}
.sep{height:8px;background:var(--bg2)}
.toggle{width:44px;height:24px;border-radius:12px;background:#b9c1c6;position:relative;flex-shrink:0;transition:.15s}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.15s}
.toggle.on{background:var(--teal)}.toggle.on::after{left:22px}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px}
.media-grid img,.media-grid video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;background:#000}

/* Status */
.status-view{position:fixed;inset:0;background:#000;z-index:80;display:flex;flex-direction:column;color:#fff}
.status-view .prog{display:flex;gap:3px;padding:8px 8px 0;padding-top:calc(8px + env(safe-area-inset-top))}
.status-view .prog i{flex:1;height:3px;background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden;display:block}
.status-view .prog i b{display:block;height:100%;background:#fff;width:0}
.status-view .sh{display:flex;align-items:center;gap:10px;padding:10px 12px}
.status-view .body{flex:1;display:flex;align-items:center;justify-content:center;font-size:26px;text-align:center;padding:30px;font-weight:600;line-height:1.35}
.status-view .body img,.status-view .body video{max-height:100%;max-width:100%;object-fit:contain}
.status-view .cap{padding:14px;text-align:center;background:rgba(0,0,0,.5)}
.status-view .tap{position:absolute;top:80px;bottom:80px;width:50%}
.status-view .tap.l{left:0}.status-view .tap.r{right:0}
.status-compose{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.status-compose textarea{width:100%;height:100%;border:0;background:transparent;color:#fff;font-size:28px;text-align:center;outline:0;resize:none;font-weight:600}

/* Calls overlay */
.callscreen{position:fixed;inset:0;background:#0b141a;color:#fff;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(30px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom))}
.callscreen video.remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.callscreen video.local{position:absolute;top:calc(20px + env(safe-area-inset-top));right:16px;width:100px;height:140px;object-fit:cover;border-radius:10px;background:#222;box-shadow:0 2px 12px rgba(0,0,0,.5);z-index:2}
.callscreen .who{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.callscreen .who h2{margin:8px 0 0;font-size:26px;font-weight:600}
.callscreen .who .st{color:#8696a0;font-size:15px}
.callscreen .ctrls{position:relative;z-index:2;display:flex;gap:22px;align-items:center}
.callscreen .cbtn{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center}
.callscreen .cbtn.on{background:#fff;color:#0b141a}
.callscreen .cbtn.end{background:var(--danger)}.callscreen .cbtn.ans{background:#25d366}
.callscreen .cbtn svg{width:28px;height:28px;fill:currentColor}

/* Media viewer */
.viewer{position:fixed;inset:0;background:#000;z-index:90;display:flex;flex-direction:column}
.viewer .vh{display:flex;align-items:center;gap:8px;padding:8px;color:#fff;padding-top:calc(8px + env(safe-area-inset-top))}
.viewer .vb{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.viewer img,.viewer video{max-width:100%;max-height:100%;object-fit:contain}

/* v114 profile image zoom — tap a profile photo to open it full screen */
.avatar.zoomable{cursor:zoom-in}
.pz{position:fixed;inset:0;background:#000;z-index:92;display:flex;flex-direction:column;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:contain}
.pz-h{display:flex;align-items:center;gap:8px;padding:8px;color:#fff;padding-top:calc(8px + env(safe-area-inset-top))}
.pz-h .pz-name{flex:1;min-width:0;font-size:15.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pz-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.pz-stage img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .16s ease-out;will-change:transform;touch-action:none}
.pz.moving .pz-stage img{transition:none}
.pz-hint{color:#9aa5ab;font-size:12px;text-align:center;padding:6px 10px calc(10px + env(safe-area-inset-bottom))}

/* v115 profile photos are not downloadable by other members — no long-press / drag save on any avatar */
.avatar img,.pz-stage img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}

/* Admin */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:10px 12px}
.stat{background:var(--bg2);border-radius:10px;padding:12px}
.stat b{display:block;font-size:24px}.stat span{font-size:12px;color:var(--muted)}
.table{width:100%;font-size:13px;border-collapse:collapse}
.table td,.table th{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.small{font-size:12px;color:var(--muted)}
.list-empty{padding:40px 24px;text-align:center;color:var(--muted)}
.list-empty img{width:90px;opacity:.7;margin-bottom:10px;border-radius:20px}
.install-card{margin:12px;background:var(--bg2);border-radius:12px;padding:14px;display:flex;gap:12px;align-items:center}
.install-card img{width:48px;height:48px;border-radius:12px}
.install-card .t{flex:1;font-size:14px}.install-card .t b{display:block;font-size:15px}
.install-card .btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.install-card .btns .btn{padding:9px 14px;font-size:14px;text-decoration:none}
.ibtn.dl{color:var(--teal)}
.quick a.btn,.quick .btn{text-decoration:none}
.long-press{user-select:none;-webkit-user-select:none}
.center{text-align:center}
.mt{margin-top:12px}
.link-btn{color:var(--teal);font-weight:600}
.product{cursor:pointer;min-width:200px}.product .pn{font-weight:600;margin-top:6px}.product .pp{color:var(--teal);font-weight:600}
.pcard{background:var(--bg2);border-radius:10px;overflow:hidden;cursor:pointer}.pcard img{width:100%;aspect-ratio:1;object-fit:cover}.pcard .pph{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:40px}.pcard .pn{font-size:13px;font-weight:600;padding:6px 8px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pcard .pp{font-size:12.5px;color:var(--teal);padding:0 8px 8px}
.profile-post{display:flex;gap:12px;min-width:240px;max-width:340px;padding:8px 4px;align-items:flex-start}.profile-post.unavailable{min-width:0;color:var(--muted)}
.profile-post .avatar.lg{width:64px;height:64px;min-width:64px;font-size:20px}.profile-post-main{min-width:0;flex:1}.profile-post-name{font-size:17px;font-weight:700}.profile-post-meta{font-size:13px;color:var(--teal);font-weight:600;margin-top:2px}.profile-post-about{font-size:13px;margin-top:6px;line-height:1.35}.profile-post-private{font-size:11px;color:var(--muted);margin-top:7px}.profile-post-action{width:100%;margin-top:9px;padding:8px 10px}
/* Desktop (WhatsApp Web style) overrides — must stay last */
@media (min-width:900px){.chat-body{padding:12px 6%}.msg{max-width:65%}.composer{padding:8px 4%}.emoji-panel{height:280px}}

/* v85 landing (2026-09-06): compact header so the sign-up form is above the fold in the Facebook browser */
.auth.compact{padding:14px 20px 32px}
.auth .hero.compact{display:flex;align-items:center;gap:12px;text-align:left;margin:0 0 14px}
.auth .hero.compact img{width:58px;height:58px;border-width:3px;box-shadow:0 3px 12px rgba(0,128,105,.3);flex-shrink:0}
.auth .hero.compact h2{margin:0 0 2px;font-size:21px}
.auth .hero.compact .lead{font-size:13px;line-height:1.3}
.auth.compact .field{margin-bottom:12px}
.auth.compact .banner{margin-top:16px;border-radius:12px}
.proof{text-align:center;font-size:13px;color:var(--green);font-weight:600;margin-top:10px}

/* Admin reply controls remain visible above the conversation on every screen size. */
.reply-mode-control{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 14px;background:var(--bg2);color:var(--text);border-bottom:1px solid var(--line);flex-shrink:0}
.reply-mode-heading{font-size:13px;font-weight:600}
.reply-mode-options{display:flex;border:1px solid var(--muted);border-radius:9px;overflow:hidden}
.reply-mode-options button{min-height:40px;min-width:68px;padding:6px 14px;font-weight:600;background:var(--panel);color:var(--text)}
.reply-mode-options button[aria-pressed="true"]{background:var(--green-dark);color:#fff}
.reply-mode-options button:focus-visible{outline:3px solid var(--tick);outline-offset:-3px}
.reply-mode-options button:disabled{opacity:.6;cursor:wait}
.reply-mode-help{flex:1 1 240px;font-size:12px;line-height:1.4;color:var(--muted)}
.reply-mode-badge{display:inline-block;flex-shrink:0;font-size:10px;font-weight:600;line-height:1.5;padding:1px 5px;border-radius:5px;background:var(--bg2);color:var(--muted);vertical-align:middle;margin-left:5px}
.reply-mode-badge.manual{background:#fff0d2;color:#785200}
.reply-mode-badge.ai{background:#d8f3e7;color:#075e54}
.modal .reply-mode-control{margin-top:12px;border-radius:8px}
@media(max-width:380px){.reply-mode-control{padding:8px 10px;gap:5px 10px}.reply-mode-help{flex-basis:100%}.reply-mode-options button{min-width:64px}}