/* Pup Call 2.0 on top of base.css (the mockup look). */
[hidden]{display:none !important}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--green-soft)}
.app{grid-template-columns:72px 264px minmax(0,1fr) 260px}
.app.no-right{grid-template-columns:72px 264px minmax(0,1fr) 0}
.app.no-right .right{display:none}
.side-scroll{padding:8px 8px 8px 16px}
.main{position:relative}

/* ---------- avatars (real images, initials fallback) ---------- */
.av{background:#121912; overflow:visible}
.av > img,.av-fallback{width:100%; height:100%; border-radius:50%; object-fit:cover; display:grid; place-items:center; font-weight:700; font-size:.42em; letter-spacing:.3px}
.av{font-size:34px} .av.lg{font-size:40px}
.av.sm{font-size:24px} .av.xs{width:18px;height:18px;font-size:18px}
.av.xl{width:80px;height:80px;font-size:80px}
.av.bot > img{box-shadow:0 0 10px var(--green-glow)}
.av .dot{z-index:1}
.rail-av{width:48px;height:48px;font-size:48px}
.rail-dm{background:none}
.den-ic img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.den-ic.has-icon{overflow:hidden}
.rail-item .rail-pill.unread{height:8px}
.rail-item.unavailable{opacity:.35}

/* ---------- sidebar ---------- */
.side-search input{color:var(--text)}
.dm-row.unread .dm-name{color:var(--bright); font-weight:700}
.nav-item .dm-unread{margin-left:auto}
.vu{position:relative}
.vu .vu-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vu-flags{margin-left:auto;font-size:11px;display:flex;gap:3px;align-items:center}
.vu.speaking .av{box-shadow:0 0 0 2px var(--green)}
.vu.listening:not(.speaking) .av{box-shadow:0 0 0 2px var(--ring-listen,#ffd23f)}
.live-pill{background:var(--red);color:#fff;font-size:9px;font-weight:800;border-radius:3px;padding:0 4px}
.chan.voice.joined{color:var(--bright)}
.vp-status.warn{color:var(--amber);text-shadow:none}
.vp-sub{cursor:pointer}
.vp-sub:hover{color:var(--text)}
.vp-err{font-size:12px;color:var(--amber);margin-top:4px}
.vp-btn.on{background:var(--green-soft);color:#03140a}
.ub-ic.off{color:var(--red)}
.conn-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;background:var(--amber);animation:pulse 1s infinite}
.userbar > span[data-act]{cursor:pointer}

/* ---------- topbar ---------- */
.topbar{padding:0 8px 0 16px}
.topbar-in{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.mob-menu{display:none;cursor:pointer;font-size:20px;color:var(--muted);margin-right:6px}
.t-dot.online{background:var(--green-soft)} .t-dot.idle{background:var(--amber)} .t-dot.dnd{background:var(--red)} .t-dot.offline{background:#4a554a}
.f-tabs{display:flex;gap:6px;margin-left:16px}
.f-tab{padding:3px 10px;border-radius:6px;cursor:pointer;color:var(--muted);font-weight:600;font-size:14px;display:flex;align-items:center;gap:6px}
.f-tab:hover{background:var(--hover);color:var(--text)}
.f-tab.on{background:var(--active);color:var(--bright)}
.f-tab.add{background:var(--green-soft);color:#03140a} .f-tab.add.on{background:transparent;color:var(--green)}

/* ---------- messages ---------- */
.chat{padding:0 0 8px}
.chat-start{padding:28px 18px 8px}
.chat-start h2{color:var(--bright);font-size:26px;margin:8px 0 2px}
.chat-start p{color:var(--muted)}
.cs-ico{width:68px;height:68px;border-radius:50%;background:var(--bg-raised);display:grid;place-items:center;font-size:36px;color:var(--muted)}
.msg .av.lg{width:40px;height:40px;font-size:40px;cursor:pointer}
.msg.pending .m-text{color:var(--faint)}
.msg.failed .m-text{color:var(--red)}
.msg.editing{background:var(--hover)}
.msg.flash{animation:flash 1.2s}
@keyframes flash{0%,40%{background:rgba(59,255,112,.12)}}
.m-fail{font-size:12px;color:var(--red);cursor:pointer;text-decoration:underline;margin-top:2px}
.m-text a{word-break:break-all}
.m-text code{background:#060906;border:1px solid var(--border);border-radius:4px;padding:0 4px;font-size:.88em;font-family:ui-monospace,Menlo,Consolas,monospace}
.m-text pre{background:#060906;border:1px solid var(--border);border-radius:6px;padding:8px 10px;margin:4px 0;overflow-x:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;white-space:pre-wrap}
.m-text.jumbo{font-size:44px;line-height:1.15}
.m-text .mention.me{background:rgba(240,178,50,.18);color:var(--amber)}
.edited{font-size:11px;color:var(--faint)}
.edit-box{width:100%;background:var(--bg-input);border:1px solid var(--green-soft);border-radius:8px;padding:8px 10px;resize:none;outline:none}
.edit-hint{font-size:11.5px;color:var(--faint);margin-top:2px}
.reply-ctx .rc-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60ch}
.new-line{display:flex;align-items:center;gap:8px;margin:8px 16px;color:var(--red);font-size:11px;font-weight:800;letter-spacing:.4px}
.new-line::before{content:"";flex:1;height:1px;background:var(--red)}
.load-more{text-align:center;color:var(--faint);font-size:12px;padding:14px}
.m-tools{top:-16px}
.attachments{display:flex;flex-direction:column;gap:6px;margin-top:4px;align-items:flex-start}
.att-img img{max-width:min(420px,100%);max-height:320px;border-radius:8px;display:block;cursor:zoom-in}
.att-video{max-width:min(480px,100%);max-height:320px;border-radius:8px;background:#000}
.att-file{display:inline-flex;gap:10px;align-items:center;background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;padding:10px 14px;text-decoration:none;color:var(--text)}
.att-file span{color:var(--faint);font-size:12px}
.att-file.pending{opacity:.6}
.att-audio{background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;padding:8px 12px;display:flex;flex-direction:column;gap:6px;width:min(420px,100%)}
.att-audio-name{font-size:13px;display:flex;gap:8px;align-items:center}
.att-audio-name span{color:var(--faint);font-size:12px}
.att-audio-name a{margin-left:auto;text-decoration:none;color:var(--text)}
.att-audio audio{width:100%;height:36px}
.empty{color:var(--faint);text-align:center;padding:60px 20px}

/* ---------- composer ---------- */
.composer-wrap{position:relative;flex:none;margin:0 16px 20px}
.composer{margin:0;align-items:flex-end;padding:0 14px}
.c-plus{margin:11px 0;flex:none}
.c-input{flex:1;background:transparent;border:none;outline:none;color:var(--text);padding:12px 0;resize:none;max-height:240px;line-height:1.4}
.c-input::placeholder{color:var(--faint)}
.reply-bar,.files-bar{background:var(--bg-raised);border-radius:10px 10px 0 0;padding:7px 14px;font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.reply-bar + .composer,.files-bar + .composer{border-radius:0 0 10px 10px}
.rb-x{margin-left:auto;cursor:pointer}
.file-chip{background:var(--bg-input);border-radius:6px;padding:4px 8px;display:flex;gap:6px;align-items:center}
.file-chip span{color:var(--faint);font-size:11.5px}
.file-chip b{cursor:pointer;color:var(--muted)}
.mention-pop{position:absolute;bottom:100%;left:0;right:0;background:#070a07;border:1px solid var(--border);border-radius:10px;padding:6px;margin-bottom:6px;box-shadow:0 -6px 20px rgba(0,0,0,.5);z-index:5}
.mp-row{display:flex;gap:10px;align-items:center;padding:5px 8px;border-radius:6px;cursor:pointer}
.mp-row span{color:var(--faint);font-size:12.5px}
.mp-row.on,.mp-row:hover{background:var(--active)}
.typing{min-height:22px;padding:0 18px 2px;margin-top:-2px}
.drop-zone{position:fixed;inset:0;background:rgba(4,10,5,.82);z-index:80;display:grid;place-items:center}
.drop-zone div{border:3px dashed var(--green);border-radius:20px;padding:60px 90px;font-size:24px;font-weight:700;color:var(--green);pointer-events:none}

/* ---------- friends ---------- */
.friends-page{flex:1;overflow-y:auto;min-height:0}
.friends-list{padding:16px 24px}
.f-label{font-size:11.5px;font-weight:700;letter-spacing:.4px;color:var(--faint);text-transform:uppercase;padding:10px 4px 8px}
.friend{display:flex;align-items:center;gap:12px;padding:10px;border-top:1px solid var(--border);cursor:pointer;border-radius:8px}
.friend:hover{background:var(--hover)}
.f-col{min-width:0}
.f-user{color:var(--faint);font-size:12.5px;font-weight:400;margin-left:4px;display:none}
.friend:hover .f-user{display:inline}
.f-acts{margin-left:auto;display:flex;gap:8px}
.f-act{width:36px;height:36px;border-radius:50%;background:var(--bg-raised);display:grid;place-items:center;font-size:15px}
.f-act:hover{background:var(--active)}
.f-act.ok:hover{color:var(--green)} .f-act.no:hover{color:var(--red)}
.add-friend{padding:24px 30px;max-width:680px}
.add-friend h2{color:var(--bright);font-size:17px}
.add-friend p{color:var(--muted);font-size:14px;margin:4px 0 12px}
.af-row{display:flex;gap:10px;background:#060906;border:1px solid var(--border);border-radius:10px;padding:8px}
.af-row input{flex:1;background:transparent;border:none;outline:none;padding:6px 8px}
.af-msg{margin-top:8px;font-size:13.5px}
.af-msg.ok{color:var(--green)} .af-msg.err{color:var(--red)}
.code{font-family:ui-monospace,monospace;color:var(--green);font-size:16px;letter-spacing:1px;user-select:all}

/* ---------- voice lobby + call stage ---------- */
.voice-lobby{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;text-align:center;color:var(--muted)}
.vl-ico{font-size:52px}
.voice-lobby h2{color:var(--bright)}
.vl-faces{display:flex;gap:8px;margin:8px 0}
.vl-faces .av{width:48px;height:48px;font-size:48px}
.stage{padding:16px 16px 96px;background:#050705;gap:12px}
.tiles{flex:1;display:grid;gap:10px;align-content:center;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));min-height:0}
.tiles.n1{grid-template-columns:minmax(0,900px);justify-content:center}
.tiles.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.spotlight{flex:1;min-height:0;display:flex}
.spotlight .tile{flex:1;aspect-ratio:auto}
.filmstrip{flex:none;display:flex;gap:10px;justify-content:center;overflow-x:auto}
.filmstrip .tile{width:200px;flex:none}
.tile{position:relative;aspect-ratio:16/9;border-radius:12px;background:var(--bg-raised);border:1px solid var(--border);display:grid;place-items:center;overflow:hidden;cursor:pointer;transition:box-shadow .1s}
.tile video{width:100%;height:100%;object-fit:cover;background:#000}
.tile.screen video{object-fit:contain}
.tile.speaking{box-shadow:0 0 0 3px var(--green),0 0 22px var(--green-glow)}
/* lounge AI listening (hearing someone / working out a reply): yellow; green speaking wins */
.tile.listening:not(.speaking){box-shadow:0 0 0 3px var(--ring-listen,#ffd23f),0 0 22px rgba(255,210,63,.35)}
.tile-av{width:84px;height:84px;font-size:84px}
.filmstrip .tile-av{width:52px;height:52px;font-size:52px}
.cb-btn.off{background:rgba(242,63,67,.18);color:var(--red)}

/* ---------- right column / profile ---------- */
.mem .av{width:32px;height:32px;font-size:32px}
.mem-col{min-width:0}
.mem .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-avatar-wrap .av{width:84px;height:84px;font-size:84px;border:6px solid var(--bg-side);box-sizing:content-box}
.p-avatar-wrap .av .dot{width:18px;height:18px;border-width:4px}
.p-status{font-size:13px;margin-top:6px;color:var(--faint)}
.p-status.online{color:var(--green-soft)} .p-status.idle{color:var(--amber)} .p-status.dnd{color:var(--red)}
.p-btn{padding:8px 14px}
.p-btn.danger{background:var(--red);color:#fff}
.p-btn:disabled{opacity:.6;cursor:default}
.danger-text{color:var(--red) !important}

/* ---------- popout, menus, modals, toasts ---------- */
.popout{position:fixed;z-index:60;width:300px;background:var(--bg-side);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.popout .p-banner{height:70px}
.popout .p-avatar-wrap{margin-top:-44px}
.menu{position:fixed;z-index:95;background:#070a07;border:1px solid var(--border);border-radius:8px;padding:6px;min-width:190px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.menu .mi{padding:7px 10px;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13.5px}
.menu .mi:hover{background:var(--green-soft);color:#03140a}
.menu .mi.danger{color:var(--red)} .menu .mi.danger:hover{background:var(--red);color:#fff}
.menu hr{border:none;border-top:1px solid var(--border);margin:4px 2px}
.menu .sw{width:10px;height:10px;border-radius:50%}
.mi-vol{padding:6px 10px;font-size:13px;display:flex;flex-direction:column;gap:4px}
.mi-vol input{accent-color:var(--green-soft)}
.modal-wrap{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:90;display:grid;place-items:center;padding:20px}
.modal{width:min(460px,100%);background:var(--bg-side);border:1px solid var(--border);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:12px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal.wide{width:min(560px,100%)}
.modal h2{color:var(--bright);font-size:20px}
.modal p{color:var(--muted);font-size:14px}
.modal label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.modal label.chk{flex-direction:row;align-items:center;text-transform:none;font-weight:500;font-size:14px;letter-spacing:0}
.modal input:not([type=checkbox]):not([type=radio]):not([type=file]),.modal select{background:#060906;border:1px solid var(--border);border-radius:8px;padding:9px 11px;outline:none;font-size:15px;color:var(--text);text-transform:none;font-weight:400;letter-spacing:0}
.modal input:focus,.modal select:focus{border-color:var(--green-soft)}
.m-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:6px;align-items:center}
.m-err{color:var(--red);font-size:13px;min-height:1em}
.m-or{text-align:center;color:var(--faint);font-size:12px}
.m-type{display:flex;gap:10px}
.m-type label{flex:1;flex-direction:row;align-items:center;gap:8px;background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;padding:10px;font-size:14px;text-transform:none;color:var(--text);cursor:pointer}
.m-icon-row{display:flex;align-items:center;gap:16px}
.m-icon{width:72px;height:72px;border-radius:20px;background:var(--bg-raised);display:grid;place-items:center;font-weight:800;font-size:22px;overflow:hidden}
.m-icon img{width:100%;height:100%;object-fit:cover}
.m-icon-row label.p-btn{text-transform:none;color:var(--text);flex-direction:row;font-size:13px;cursor:pointer}
.set-sect{font-size:11.5px;font-weight:800;color:var(--green);letter-spacing:.5px;text-transform:uppercase;margin-top:6px;border-bottom:1px solid var(--border);padding-bottom:4px}
.set-foot{font-size:12px;color:var(--faint);text-align:center}
.inv-row{display:flex;gap:8px}
.inv-row input{flex:1}
.inv-card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.inv-card img{width:72px;height:72px;border-radius:20px;object-fit:cover}
.inv-ico{font-size:52px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#0f2416;border:1px solid var(--green-soft);color:var(--bright);padding:10px 18px;border-radius:10px;z-index:100;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.5);transition:opacity .3s}
.toast.err{background:#2a0d0e;border-color:var(--red)}
.toast.out{opacity:0}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:95;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:zoom-out}
.lightbox img{max-width:94vw;max-height:86vh;border-radius:6px}
.lb-open{color:var(--muted);font-size:13px}

/* ---------- auth + boot ---------- */
.auth{position:fixed;inset:0;z-index:99;display:grid;place-items:center;padding:20px;
  background:radial-gradient(ellipse at 30% 20%,#0f2a17 0%,#050705 55%) , #050705}
.auth-card{width:min(400px,100%);background:rgba(11,15,11,.92);border:1px solid #1d4a2a;border-radius:16px;padding:30px 28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 0 60px rgba(59,255,112,.08),0 20px 60px rgba(0,0,0,.6)}
.auth-logo{font-size:44px;text-align:center;filter:drop-shadow(0 0 16px var(--green-glow))}
.auth-card h1{text-align:center;color:var(--bright);font-size:24px}
.auth-sub{text-align:center;color:var(--muted);font-size:13.5px;margin-top:-8px}
.auth-card label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.auth-card input{background:#060906;border:1px solid var(--border);border-radius:8px;padding:11px 12px;outline:none;font-size:15px;text-transform:none;font-weight:400;letter-spacing:0;color:var(--text)}
.auth-card input:focus{border-color:var(--green-soft)}
.auth-err{color:var(--red);font-size:13px;min-height:1em;text-align:center}
.auth-btn{background:var(--green-soft);color:#03140a;border:none;border-radius:8px;padding:12px;font-weight:800;font-size:15px;cursor:pointer}
.auth-btn:hover{filter:brightness(1.1)} .auth-btn:disabled{opacity:.6}
.auth-alt{text-align:center;font-size:13.5px;color:var(--muted)}
.boot{position:fixed;inset:0;background:#040504;display:grid;place-content:center;gap:14px;text-align:center;z-index:98;color:var(--muted)}
.boot-logo{font-size:56px;filter:drop-shadow(0 0 18px var(--green-glow));animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.5}}
#auth:not([hidden]) ~ #boot{display:none}

/* ---------- small screens ---------- */
@media (max-width:1100px){ .app,.app.no-right{grid-template-columns:72px 240px minmax(0,1fr) 0} .right{display:none} }
/* ---------- phone layout (the Pup Call app on Android/iPhone) ----------
   Two screens, like Discord mobile: NAV (den rail + channels/DMs, full width) and CHAT (full width).
   Tapping a chat slides it in; the ‹ back button, a right swipe or Android's back returns to nav. */
@media (max-width:760px){
  html,body{height:100dvh}
  .app,.app.no-right{grid-template-columns:72px minmax(0,1fr);height:100dvh;width:100vw;position:relative;overflow:hidden}
  .rail{grid-column:1;padding-top:calc(12px + env(safe-area-inset-top))}
  .side{grid-column:2;padding-top:env(safe-area-inset-top)}
  .main{position:absolute;inset:0;z-index:30;transform:translateX(0);transition:transform .22s cubic-bezier(.2,.8,.2,1);background:var(--bg-main);
    padding-top:env(safe-area-inset-top)}
  .app.nav-open .main{transform:translateX(100%)}
  .app.dragging .main{transition:none}
  .right{display:block !important;position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);z-index:35;transform:translateX(100%);transition:transform .2s;
    box-shadow:-20px 0 40px rgba(0,0,0,.5);padding-top:env(safe-area-inset-top)}
  .app.sheet-open .right{transform:none}
  .mob-menu{display:block;font-size:26px;line-height:1;padding:4px 6px 4px 0}
  .userbar{padding-bottom:env(safe-area-inset-bottom);height:auto;min-height:56px}
  .composer-wrap{margin:0 8px calc(8px + env(safe-area-inset-bottom))}
  .c-input{font-size:16px}            /* <16px makes iOS zoom the page on focus */
  .f-tabs{margin-left:6px;overflow-x:auto;scrollbar-width:none}
  .topbar{padding:0 8px}
  .t-topic{display:none}
  .stage{padding:10px 10px calc(96px + env(safe-area-inset-bottom))}
  .tiles,.tiles.n2{grid-template-columns:1fr;align-content:start;overflow-y:auto}
  .callbar{bottom:calc(16px + env(safe-area-inset-bottom));gap:6px;padding:6px 10px}
  .cb-btn{width:44px;height:44px}
  .friends-list{padding:10px 12px}
  .msg{padding-right:10px}
  .attach-card,.att-img img{max-width:100%}
  .popout{left:8px !important;right:8px;width:auto}
  .modal-wrap{align-items:end;padding:0}
  .modal{border-radius:16px 16px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom));max-height:88vh}
  .ring-card{width:calc(100vw - 32px)}
  .chan,.dm-row,.nav-item{padding-top:9px;padding-bottom:9px}   /* finger-sized */
}
.t-btn{width:auto;min-width:34px;padding:0 6px;white-space:nowrap}

/* ---------- cheap wins ---------- */
/* phone-shaped presence dot when someone is only on mobile */
.dot.mobile{border-radius:3px;width:10px;height:14px;right:-1px;bottom:-3px;border-width:2px}
.dot.mobile::after{content:"";position:absolute;left:50%;bottom:1px;width:3px;height:1px;margin-left:-1.5px;background:rgba(0,0,0,.55);border-radius:1px}
.p-dev{color:var(--faint)}
/* spoilers + quotes */
.spoiler{background:#2b332b;color:transparent;border-radius:4px;padding:0 3px;cursor:pointer;transition:background .15s}
.spoiler:hover{background:#344034}
.spoiler.shown{background:rgba(255,255,255,.08);color:inherit;cursor:text}
.spoiler a,.spoiler .mention{visibility:hidden}
.spoiler.shown a,.spoiler.shown .mention{visibility:visible}
.bq{display:block;border-left:4px solid #3a4a3a;padding:0 0 0 10px;margin:2px 0;color:var(--muted)}
/* polls */
.poll{margin-top:6px;width:min(440px,100%);background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.poll-q{font-weight:700;color:var(--bright);font-size:15.5px}
.poll-sub{font-size:12px;color:var(--faint)}
.poll-opt{position:relative;display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;cursor:pointer;overflow:hidden;background:#0a0e0a}
.poll-opt:hover{border-color:var(--faint)}
.poll-opt.mine{border-color:var(--green-soft)}
.po-bar{position:absolute;left:0;top:0;bottom:0;background:rgba(59,255,112,.09);transition:width .25s;z-index:0}
.poll-opt.lead .po-bar{background:rgba(59,255,112,.17)}
.po-check{position:relative;width:18px;height:18px;border-radius:50%;border:2px solid var(--faint);display:grid;place-items:center;font-size:11px;font-weight:800;color:#03140a;flex:none}
.poll-opt.mine .po-check{background:var(--green-soft);border-color:var(--green-soft)}
.po-text{position:relative;flex:1}
.po-n{position:relative;font-size:12px;color:var(--muted)}
.poll-opts{display:flex;flex-direction:column;gap:8px}
/* custom status */
.status-picks{display:flex;flex-wrap:wrap;gap:6px}
.sp-chip{background:var(--bg-raised);border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:13px;cursor:pointer}
.sp-chip:hover{border-color:var(--green-soft)}
/* direct vs relayed call */
.vp-route{margin-left:auto;font-size:11.5px;font-weight:700;border-radius:999px;padding:1px 8px}
.vp-route.direct{color:var(--green);background:rgba(59,255,112,.1)}
.vp-route.relay{color:var(--amber);background:rgba(240,178,50,.1)}
/* settings + promise + welcome */
.set-sect.danger{color:var(--red);border-color:rgba(242,63,67,.3)}
.set-row{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--muted)}
.set-row .p-btn{flex:none}
.promise{font-size:12.5px;color:var(--muted);text-align:center;border-top:1px solid var(--border);padding-top:10px}
.promise b{color:var(--green)}
.welcome{text-align:center;display:flex;flex-direction:column;gap:10px}
.w-logo{font-size:48px;filter:drop-shadow(0 0 16px var(--green-glow))}
.w-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left;margin:6px 0}
.w-grid div{background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--muted)}
.w-grid b{display:block;color:var(--bright);margin-bottom:3px;font-size:14px}
@media (max-width:560px){.w-grid{grid-template-columns:1fr}}
/* touch screens: no sticky hover toolbar; long-press opens the message menu (with reactions) */
@media (hover:none){ .msg:hover .m-tools,.msg.force-hover .m-tools{display:none} .msg:hover{background:none} }
.mi-reacts{display:flex;gap:2px;padding:2px 2px 6px;border-bottom:1px solid var(--border);margin-bottom:4px}
.mi-reacts span{flex:1;text-align:center;font-size:20px;padding:4px 0;border-radius:6px;cursor:pointer}
.mi-reacts span:hover{background:var(--active)}

/* ---------- DM calls ---------- */
.ring{position:fixed;inset:0;z-index:96;background:rgba(2,6,3,.82);display:grid;place-items:center;backdrop-filter:blur(4px)}
.ring-card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px 40px;background:var(--bg-side);border:1px solid #1d4a2a;border-radius:20px;box-shadow:0 0 60px rgba(59,255,112,.12)}
.ring-card h2{color:var(--bright);font-size:24px;margin-top:8px}
.ring-card p{color:var(--muted)}
.ring-av{position:relative}
.ring-face{width:110px;height:110px;font-size:110px}
.ring-av::before,.ring-av::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--green);animation:ringpulse 1.6s infinite;opacity:0}
.ring-av::after{animation-delay:.8s}
@keyframes ringpulse{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.35);opacity:0}}
.ring-btns{display:flex;gap:18px;margin-top:18px}
.ring-btn{width:62px;height:62px;border-radius:50%;border:none;font-size:24px;cursor:pointer;display:grid;place-items:center}
.ring-btn.yes{background:var(--green-soft);color:#03140a}
.ring-btn.no{background:var(--red);color:#fff}
.ring-btn:hover{filter:brightness(1.12)}
.tile.ringing{border-style:dashed;border-color:#2a5c38}
.tile.ringing .av{animation:pulse 1.4s infinite}
.ring-again{flex:none;text-align:center;color:var(--muted);font-size:13px;display:flex;gap:10px;justify-content:center;align-items:center}
.call-banner{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:10px 16px;background:#0f2416;border-bottom:1px solid #1d4a2a}
.call-banner span{flex:1}
.call-row{display:flex;align-items:center;gap:10px;margin:10px 16px;padding:8px 12px;border-radius:8px;background:var(--bg-raised);color:var(--muted);font-size:14px}
.call-row b{color:var(--text)}
.call-row .cr-ico{font-size:18px}
.call-row.missed .cr-ico{filter:hue-rotate(-90deg)}
.call-row .m-time{margin-left:auto}
.call-row .p-btn{padding:4px 12px}
.in-call{color:var(--green)}
.ub-ic.bell{animation:pulse 2s infinite}

/* ---------- batch 2: emoji picker, search, pins, mute, block, nudge, PTT ---------- */
.c-emoji{flex:none;font-size:21px;margin:9px 0;cursor:pointer;filter:grayscale(.6);transition:filter .1s,transform .1s}
.c-emoji:hover{filter:none;transform:scale(1.12)}
.emoji-pop{position:fixed;z-index:62;height:370px;background:#070a07;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden}
.ep-search{margin:10px;background:#0d130d;border:1px solid var(--border);border-radius:8px;padding:8px 10px;outline:none}
.ep-search:focus{border-color:var(--green-soft)}
.ep-tabs{display:flex;gap:2px;padding:0 8px 6px;border-bottom:1px solid var(--border)}
.ep-tab{flex:1;text-align:center;padding:4px 0;border-radius:6px;cursor:pointer;font-size:17px;filter:grayscale(1);opacity:.6}
.ep-tab.on,.ep-tab:hover{filter:none;opacity:1;background:var(--active)}
.ep-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));padding:6px;align-content:start}
.ep-e{font-size:24px;text-align:center;padding:4px 0;border-radius:6px;cursor:pointer}
.ep-e:hover{background:var(--active)}
.panel-head{display:flex;align-items:center;padding:14px 14px 8px;color:var(--bright)}
.panel-x{margin-left:auto;cursor:pointer;color:var(--muted);padding:2px 6px}
.sr-form{display:flex;gap:6px;padding:0 12px 10px}
.sr-form input{flex:1;min-width:0;background:#060906;border:1px solid var(--border);border-radius:8px;padding:8px 10px;outline:none}
.sr-form input:focus{border-color:var(--green-soft)}
.sr-form select{background:#060906;border:1px solid var(--border);border-radius:8px;padding:0 6px;color:var(--text)}
.sr-list{overflow-y:auto;padding:0 8px 16px}
.sr-count{font-size:12px;color:var(--faint);padding:0 6px 6px}
.sr-item{background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:6px;cursor:pointer}
.sr-item:hover{border-color:var(--green-soft)}
.sr-meta{display:flex;align-items:center;gap:6px;font-size:12.5px;margin-bottom:3px}
.sr-meta span{color:var(--faint)}
.sr-text{font-size:13.5px;color:var(--text);overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.sr-text mark{background:rgba(240,178,50,.3);color:var(--bright);border-radius:2px}
.right{display:flex;flex-direction:column}
.pin-tag{font-size:11px;margin-left:4px}
.chan.muted,.dm-row.muted{opacity:.55}
.mute-ic{margin-left:auto;font-size:11px;opacity:.7}
.blocked-row{margin:4px 16px 4px 70px;font-size:12.5px;color:var(--faint);cursor:pointer}
.blocked-row:hover{color:var(--muted)}
.app.nudged{animation:nudge .6s}
@keyframes nudge{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(5px)}30%,50%,70%{transform:translateX(-9px)}40%,60%{transform:translateX(9px)}}
.ptt-key{display:inline-block;margin-left:6px;padding:3px 10px;border:1px solid var(--border);border-radius:6px;background:#060906;color:var(--green);font-family:ui-monospace,monospace;text-transform:none;cursor:pointer}
.ptt-key.listening{border-color:var(--amber);color:var(--amber)}
.modal label small{text-transform:none;font-weight:400;color:var(--faint);letter-spacing:0}
.cb-btn.ptt{width:64px;border-radius:999px}
.cb-btn.ptt.on{background:var(--green);color:#03140a;box-shadow:0 0 18px var(--green-glow)}
@media (max-width:760px){ .emoji-pop{left:8px !important;right:8px;width:auto !important;top:auto !important;bottom:calc(70px + env(safe-area-inset-bottom))} .blocked-row{margin-left:16px} }
.pin-tag.cont{float:right;margin:2px 4px 0 0}
/* link previews */
.embeds{display:flex;flex-direction:column;gap:6px;margin-top:4px;align-items:flex-start}
.embed{max-width:min(440px,100%);background:var(--bg-raised);border:1px solid var(--border);border-left:4px solid var(--green-soft);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.em-site{font-size:12px;color:var(--faint)}
.em-title{color:var(--green);font-weight:700;text-decoration:none}
.em-title:hover{text-decoration:underline}
.em-desc{font-size:13.5px;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.em-suno{width:min(440px,100%)}
.em-suno-frame{width:100%;height:190px;border:0;border-radius:8px;background:#111}
.em-img img{max-width:100%;max-height:260px;border-radius:6px;margin-top:4px;display:block}
/* group DMs */
.av.grp{background:none;position:relative}
.grp-face{position:absolute;width:66%;height:66%;border-radius:50%;overflow:hidden;border:2px solid var(--bg-side);display:block}
.grp-face img,.grp-face .av-fallback{width:100%;height:100%;object-fit:cover;font-size:.3em}
.grp-face.f0{left:0;top:0} .grp-face.f1{right:0;bottom:0}
.av.grp:has(.f0:only-child) .f0{width:100%;height:100%}
.mem-x{margin-left:auto;color:var(--faint);cursor:pointer;padding:2px 6px;border-radius:4px}
.mem-x:hover{color:var(--red);background:var(--hover)}
.grp-btns{display:flex;flex-direction:column;gap:6px;padding:14px}
.fp-search{background:#060906;border:1px solid var(--border);border-radius:8px;padding:9px 11px;outline:none}
.fp-list{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.modal label.fp-row{flex-direction:row;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;text-transform:none;font-weight:500;font-size:14px;color:var(--text);cursor:pointer;letter-spacing:0}
.fp-row:hover{background:var(--hover)}
.fp-row small{color:var(--faint);margin-left:auto}
.fp-count{font-size:13px;color:var(--green)}

/* channel drag-to-reorder + bans list */
.chan.drop-above { box-shadow: inset 0 2px 0 var(--green); }
.chan.drop-below { box-shadow: inset 0 -2px 0 var(--green); }
.chan[draggable] { cursor: grab; }
.ban-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.ban-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.03); }
.ban-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ban-col small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 👑 admin panel */
.modal.admin { width: min(820px, 100%); }
.adm-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.adm-stats b { color: var(--green); font-size: 15px; }
.adm-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.adm-tabs button { background: var(--bg-input); color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px; cursor: pointer; font: inherit; }
.adm-tabs button.on { color: var(--bright); border-color: var(--green); }
.adm-search { width: 100%; margin-bottom: 8px; }
.adm-list, .adm-codes { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.adm-codes { margin-top: 10px; }
.adm-row, .adm-code { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.03); }
.adm-col { flex: 1; min-width: 0; }
.adm-col small { color: var(--muted); }
.adm-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-on { color: var(--green); }
.adm-tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--active); color: var(--green); margin-left: 4px; }
.adm-code code { font-size: 15px; letter-spacing: 1px; color: var(--bright); }
.adm-code small { flex: 1; color: var(--muted); }
.adm-row .p-btn, .adm-code .p-btn { flex: 0 0 auto; width: auto; padding: 5px 12px; }
.mention.everyone { background: rgba(255, 196, 0, .16); color: #ffd35a; }
.mp-all { display: grid; place-items: center; font-size: 14px; background: var(--active); }
.p-bio { white-space: pre-wrap; word-break: break-word; }
.banner-row { flex-direction: row !important; align-items: center; gap: 10px; }
.banner-row input[type=color] { width: 42px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
/* den emoji */
.cemoji { width: 1.375em; height: 1.375em; object-fit: contain; vertical-align: -0.3em; }
.m-text.jumbo .cemoji { width: 48px; height: 48px; }
.react .cemoji { width: 18px; height: 18px; vertical-align: -4px; }
.ep-e .cemoji { width: 28px; height: 28px; vertical-align: middle; }
.ep-tab.den img, .ep-tab.den .cemoji { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.emo-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 170px; overflow-y: auto; }
.emo-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; border-radius: 8px; background: rgba(255,255,255,.03); }
.emo-item .cemoji { width: 24px; height: 24px; }
.emo-item small { color: var(--muted); }
.emo-item button { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 12px; }
.emo-item button:hover { color: var(--red, #ff5a5a); }
.emo-add { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.emo-add input { flex: 1; }
/* soundboard */
.sb-head { padding: 10px 12px 6px; font-weight: 600; color: var(--bright); }
.sb-head small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.sb-body { max-height: 270px; overflow-y: auto; padding: 0 10px 10px; }
.sb-den { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin: 8px 2px 6px; }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.sb-btn { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 6px; cursor: pointer; font: inherit; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform .1s, border-color .1s; }
.sb-btn:hover { border-color: var(--green); }
.sb-btn.sent { transform: scale(.94); border-color: var(--green); }
.sb-emo { margin-right: 4px; }
.snd-emo { flex: 0 0 56px !important; text-align: center; }
[data-speak-row], .tile { position: relative; }
.sb-burst { position: absolute; right: 8px; top: 0; font-size: 22px; pointer-events: none; animation: sbBurst 1.6s ease-out forwards; z-index: 5; }
@keyframes sbBurst { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 15% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-28px) scale(1); } }
.emoji-pop.sb-pop { height: auto; max-height: 340px; }
/* channel categories */
.side-label.cat { cursor: pointer; user-select: none; }
.side-label.cat .cat-chev { display: inline-block; margin-right: 4px; transition: transform .15s; font-size: 10px; }
.side-label.cat.shut .cat-chev { transform: rotate(-90deg); }
.side-label.cat:hover { color: var(--text); }
.drop-into { background: var(--active); box-shadow: inset 0 0 0 1px var(--green); border-radius: 6px; }
.side-label.drop-above { box-shadow: inset 0 2px 0 var(--green); }
.side-label.drop-below { box-shadow: inset 0 -2px 0 var(--green); }
.rb-ping { margin-left: auto; margin-right: 10px; font-weight: 700; font-size: 12px; cursor: pointer; color: var(--faint); user-select: none; }
.rb-ping.on { color: var(--green); }
.rb-ping + .rb-x { margin-left: 0; }
/* two-step login */
.mfa-qr { background: #fff; width: 200px; height: 200px; padding: 8px; border-radius: 10px; margin: 6px auto 10px; }
.mfa-qr svg { width: 100%; height: 100%; display: block; }
.mfa-secret { text-align: center; font-size: 13px; color: var(--muted); }
.mfa-secret code { color: var(--bright); letter-spacing: 1px; user-select: all; }
.mfa-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 8px 0; }
.mfa-codes code { background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 8px; text-align: center; font-size: 15px; letter-spacing: 1px; color: var(--bright); user-select: all; }
/* den roles */
.mention.role { background: color-mix(in srgb, var(--rc) 18%, transparent); color: var(--rc); }
.mention.role.me { background: color-mix(in srgb, var(--rc) 32%, transparent); }
.p-roles { display: flex; flex-wrap: wrap; gap: 4px; }
.role-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--bg-input); border: 1px solid var(--border); }
.role-chip i, .role-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.role-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.role-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,.03); font-size: 13px; }
.role-row b { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-row small { color: var(--muted); flex: 1; }
.role-row .chk { font-size: 12px; color: var(--muted); flex-direction: row !important; gap: 4px; }
.role-row button { background: none; border: none; color: var(--faint); cursor: pointer; }
.role-row button:hover { color: var(--red, #ff5a5a); }
.role-row input[type=color], .role-color { width: 28px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 5px; background: none; cursor: pointer; flex: 0 0 auto !important; }
.mi-head { padding: 6px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }

/* AI Lounge stage */
.lounge{flex:none;height:132px;border-bottom:1px solid #00000066;background:#1b1422;overflow:hidden;line-height:0}
.lounge[hidden]{display:none}
.lounge-cv{display:block;width:100%;height:132px}
@media (max-height:520px){.lounge{display:none!important}}

/* talking call avatars (cartoon on the call tile, mouth follows the voice) + their picker in Settings */
.tile-cartoon{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.tile-cartoon img{height:94%;max-width:100%;object-fit:contain;object-position:bottom;user-select:none;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.toon-head{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.toon-head small{text-transform:none;font-weight:400;color:var(--faint);letter-spacing:0}
.toon-pick{flex:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;max-height:244px;overflow-y:auto;padding:2px}
.modal label.toon-opt{position:relative;flex-direction:column;align-items:center;gap:3px;padding:6px 4px 5px;border:2px solid var(--border);border-radius:10px;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:600;font-size:12px;color:var(--text);background:var(--bg-raised);transition:border-color .12s,transform .12s}
.modal label.toon-opt:hover{transform:translateY(-2px) rotate(-1deg)}
.modal label.toon-opt:has(input:checked){border-color:var(--green);box-shadow:0 0 0 2px var(--green-glow)}
.toon-opt input{position:absolute;opacity:0;pointer-events:none}
.toon-face{width:66px;height:66px;display:grid;place-items:center}
.toon-face img{width:66px;height:66px;object-fit:contain}
.toon-face .av{width:56px;height:56px;font-size:56px}
.toon-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* bot permissions panel (den settings → Bots, den menu → 🤖 Bots) */
.bot-list { display: flex; flex-direction: column; gap: 8px; }
.bot-card { padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 6px; }
.bot-head { display: flex; align-items: center; gap: 8px; }
.bot-head small { color: var(--muted); flex: 1; }
.bot-head .p-btn { padding: 3px 10px; font-size: 12px; }
.bot-perms { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.modal .bot-perms label.chk { font-size: 13px; gap: 5px; }
.bot-perms label.chk.dim { opacity: .55; }
.bot-sub { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; width: 100%; }
.bot-log summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.bot-log > div { font-size: 12px; padding: 2px 0; color: var(--text, inherit); }
.bot-log > div small { color: var(--faint); }
.bot-log > div.bad i { color: var(--red); font-style: normal; }