/* Campfire — Material 3 (dark) theme. Tonal surfaces, pill buttons, expressive shapes. */
:root{
  --bg:#111417;            /* neutral grey surface, faint blue */
  --panel:#191D20;         /* surface-container-low */
  --panel-2:#20262B;       /* surface-container: hovers, menus, cards */
  --panel-3:#292F35;       /* surface-container-high: active fills */
  --inset:#0C0E10;         /* darkest: inputs, rail */
  --rail:#0C0E10;          /* nav rail */
  --line:#3C434A;          /* outline-variant: hairlines, control borders */
  --text:#E2E2E6;          /* on-surface */
  --muted:#8E9199;         /* on-surface-variant */
  --accent:#AAC7FF;        /* primary: soft blue */
  --on-accent:#0A305F;     /* on-primary */
  --accent-hover:#C2D7FE;
  --accent-active:#DCE2F9;
  --accent-container:#284777;   /* primary-container: tonal fills */
  --on-container:#DCE2F9;       /* on-primary-container */
  --green:#6EE7A0;         /* semantic: online, speaking, live */
  --amber:#F2C14E;         /* semantic: away */
  --red:#FFB4AB;           /* semantic: error/danger/dnd */
  --on-red:#690005;
  --red-hover:#f6c9c4;
  --radius:12px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{letter-spacing:-0.01em}
.hidden{display:none!important}
.muted{color:var(--muted)} .small{font-size:.85rem} .error{color:var(--red);font-size:.9rem}
.spacer{flex:1}
.row{display:flex;gap:.5rem;align-items:center} .row.end{justify-content:flex-end;margin-top:1rem} .row-between{display:flex;justify-content:space-between;align-items:center}
::selection{background:#AAC7FF55}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#3F4945;border-radius:6px;border:2px solid #0000}
::-webkit-scrollbar-track{background:transparent}

#app{height:100dvh}

/* ---------- auth ---------- */
#view-auth{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:var(--bg)}
.auth-card{width:100%;max-width:400px;background:var(--panel);border:0;border-radius:28px;padding:1.75rem;text-align:left}
.auth-card .logo{display:flex;justify-content:flex-start;margin-bottom:.75rem}
.auth-card h1{margin:.25rem 0 .25rem;font-size:1.4rem;font-weight:700}
.auth-card>p{margin:.25rem 0 1rem;font-size:.92rem}
.tabs{display:flex;background:transparent;border:1px solid var(--line);border-radius:999px;padding:3px;margin:0 0 1rem}
.tab{flex:1;border:0;background:transparent;color:var(--muted);padding:.55rem;border-radius:999px;font-size:.92rem;font-weight:600;cursor:pointer}
.tab.active{background:var(--accent-container);color:var(--on-container)}
#form-auth label{display:block;margin:.7rem 0;font-size:.82rem;font-weight:600;color:var(--muted)}
#form-auth input{width:100%;margin-top:.35rem;background:var(--inset);border:1px solid var(--line);color:var(--text);border-radius:var(--radius);padding:.65rem .75rem;font-size:.95rem;outline:none}
#form-auth input:focus{border-color:var(--accent)}
.btn{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:999px;padding:.6rem 1.2rem;font-size:.92rem;font-weight:600;cursor:pointer}
.btn:hover{background:var(--panel-2)}
.btn:active{background:var(--panel-3)}
.btn.primary{background:var(--accent);border-color:transparent;color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-hover)}
.btn.primary:active{background:var(--accent-active)}
.btn.big{width:100%;margin-top:.9rem;padding:.75rem}
.btn.small{padding:.45rem .9rem;font-size:.85rem}
.btn.danger{background:var(--red);border-color:transparent;color:var(--on-red)}
.btn.danger:hover{background:var(--red-hover)}

/* ---------- main layout ---------- */
#view-main{display:flex;height:100dvh;overflow:hidden}
#rail{width:72px;background:var(--rail);display:flex;flex-direction:column;align-items:center;padding:.7rem .4rem;gap:.5rem;flex-shrink:0}
#server-list{display:flex;flex-direction:column;gap:.5rem;width:100%;align-items:center;overflow-y:auto}
.server-btn{width:52px;height:52px;border-radius:18px;border:0;background:var(--panel-2);color:var(--text);font-size:1.15rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden}
.server-btn:hover{background:var(--panel-3)}
.server-btn.active{background:var(--accent);color:var(--on-accent)}
.server-btn.has-icon{background-color:transparent;background-size:cover;background-position:center}
.server-btn.has-icon:hover{background-color:transparent}
.server-btn.has-icon.active{border-radius:12px}
#btn-add-server{width:52px;height:52px;border-radius:16px;border:0;background:var(--accent);color:var(--on-accent);font-size:1.5rem;font-weight:400;cursor:pointer}
#btn-add-server:hover{background:var(--accent-hover)}

#sidebar{width:264px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;flex-shrink:0;z-index:30}
#server-header{padding:.85rem .9rem;border-bottom:1px solid var(--line)}
#server-header strong{font-size:.98rem;font-weight:700;display:block;margin-bottom:.55rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:999px;padding:.35rem .8rem;font-size:.78rem;font-weight:600;cursor:pointer}
.chip:hover{background:var(--panel-2)}
.chan-group-label{font-size:.72rem;letter-spacing:.06em;color:var(--muted);padding:.85rem .9rem .3rem;font-weight:700}
#text-channels,#voice-channels{display:flex;flex-direction:column;gap:1px;padding:0 .5rem}
.chan{display:flex;align-items:center;gap:.45rem;width:100%;text-align:left;border:0;background:transparent;color:var(--muted);border-radius:999px;padding:.45rem .8rem;font-size:.93rem;font-weight:500;cursor:pointer}
.chan:hover{background:var(--panel-2);color:var(--text)}
.chan.active{background:var(--panel-3);color:#fff}
.chan .vicon{display:inline-flex;flex-shrink:0}
.chan .count{margin-left:auto;font-size:.7rem;font-weight:700;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:.05rem .45rem}
.chan .dot{width:8px;height:8px;border-radius:50%;background:var(--green);margin-left:auto;flex-shrink:0}
.mini{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:999px;padding:.3rem .7rem;font-size:.78rem;font-weight:600;cursor:pointer}
.mini:hover{background:var(--panel-2)}
.mini.danger{background:var(--red);border-color:transparent;color:var(--on-red)}
.mini.danger:hover{background:var(--red-hover)}
#me-card{display:flex;align-items:center;gap:.55rem;padding:.65rem .75rem;border-top:1px solid var(--line);background:var(--panel);font-size:.88rem;font-weight:600;cursor:pointer}
.avatar{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex-shrink:0;font-size:.85rem}
#voice-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .7rem;background:var(--inset);border-top:1px solid var(--green);font-size:.85rem;border-radius:16px 16px 0 0}
#voice-status{display:flex;align-items:center;min-width:0}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:.45rem;flex-shrink:0}
#sidebar-scrim{display:none}

#chat{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}
#chat-header{display:flex;align-items:center;gap:.45rem;padding:.65rem .9rem;border-bottom:1px solid var(--line);background:var(--panel)}
#chat-header strong{font-size:.95rem}
#chan-hash{color:var(--muted);font-weight:700} #typing{font-size:.78rem;margin-left:.5rem}
#chan-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}
#chan-topic{color:var(--muted);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:34vw;border-left:1px solid var(--line);padding-left:.6rem;margin-left:.15rem;cursor:pointer}
#chan-topic:hover{color:var(--text)}
.icon-btn{display:none;border:1px solid var(--line);background:transparent;color:var(--text);border-radius:999px;padding:.35rem .6rem;font-size:1rem;cursor:pointer}
.vusers{display:flex;flex-direction:column;gap:1px;padding:1px 0 5px 22px}
.vuser{display:flex;align-items:center;gap:.45rem;border-radius:999px;padding:.28rem .6rem .28rem .3rem;cursor:pointer}
.vuser:hover{background:var(--panel-2)}
.vuser .avatar{width:26px;height:26px;font-size:.65rem;flex-shrink:0}
.vuser.speaking .avatar{outline:2px solid var(--green);outline-offset:1px}
.vuser .vname{font-size:.85rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vuser .vmic{margin-left:auto;color:var(--red);display:inline-flex;flex-shrink:0}
.muted-tag{font-size:.65rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--red);background:#3d2225;border-radius:6px;padding:.15rem .4rem}

#messages{flex:1;overflow-y:auto;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.1rem}
#chat.dropping #messages{outline:2px dashed var(--accent);outline-offset:-10px;background:#aac7ff10;border-radius:18px}
.day{color:var(--muted);font-size:.72rem;font-weight:600;text-align:center;margin:.7rem 0 .4rem}
.msg{display:flex;gap:.65rem;padding:.4rem .5rem;border-radius:16px}
.msg:hover{background:#ffffff08}
.msg .avatar{width:38px;height:38px}
.msg .body{min-width:0;flex:1}
.msg .head{display:flex;gap:.5rem;align-items:center}
.msg .who{font-weight:600;font-size:.92rem}
.msg .when{font-size:.72rem;color:var(--muted)}
.msg .text{overflow-wrap:anywhere;white-space:pre-wrap;font-size:.93rem}
.msg .text a{color:var(--accent)}
.msg.sys{justify-content:center;color:var(--muted);font-size:.85rem}
#composer{display:flex;gap:.5rem;padding:.7rem .9rem;padding-bottom:calc(.7rem + var(--safe-b));border-top:1px solid var(--line);background:var(--panel)}
#in-message{flex:1;background:var(--inset);border:1px solid var(--line);color:var(--text);border-radius:20px;padding:.65rem 1rem;font-size:.93rem;outline:none}
#in-message:focus{border-color:var(--accent)}
#in-message::placeholder{color:#6d6f78}

#members{width:216px;background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;flex-shrink:0;padding-bottom:1rem;order:5}
#member-list{padding:.25rem .45rem}
.member{display:flex;align-items:center;gap:.5rem;padding:.4rem .55rem;margin:1px 0;border-radius:999px;font-size:.88rem;font-weight:500;cursor:pointer}
.member:hover{background:var(--panel-2)}
.member .avatar{width:32px;height:32px;font-size:.75rem}
.member .mnames{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.member .mstatus{font-size:.72rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#status-pop{position:fixed;background:var(--panel-2);border:0;border-radius:12px;min-width:180px;z-index:130;padding:.3rem}
.edit-box textarea{width:100%;min-height:64px;background:var(--inset);border:1px solid var(--accent);color:var(--text);border-radius:12px;padding:.5rem .6rem;font-size:.9rem;outline:none;resize:vertical}
.edit-box .row{margin-top:.35rem}
.msg .text code{background:var(--panel-3);border:0;border-radius:6px;padding:.05rem .35rem;font-size:.85em}
.member.off{opacity:.45}

/* ---------- context menu ---------- */
#ctx-menu{position:fixed;z-index:400;background:var(--panel-2);border:0;border-radius:12px;padding:.3rem;min-width:200px;max-width:270px}
.ctx-item{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;border:0;background:transparent;color:var(--text);border-radius:8px;padding:.5rem .6rem;font-size:.87rem;font-weight:600;cursor:pointer}
.ctx-item:hover{background:var(--panel-3)}
.ctx-item.danger{color:var(--red)}
.ctx-ic{display:inline-flex;flex-shrink:0;width:18px;justify-content:center}
.ctx-sep{height:1px;background:var(--line);margin:.3rem .4rem;opacity:.4}

#modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:160;padding:1rem}
.modal{background:var(--panel-3);border:0;border-radius:28px;padding:1.5rem;width:100%;max-width:400px}
.modal.wide{max-width:560px}
.gif-grid{display:flex;flex-wrap:wrap;gap:6px;overflow-y:auto;max-height:52dvh;min-height:140px;margin-top:.6rem;align-content:flex-start}
.gif-grid .pk-gif{width:calc(33.333% - 5px)}
.gif-grid .pk-gif img{height:110px}
@media (max-width:520px){
  .gif-grid .pk-gif{width:calc(50% - 3px)}
}
.modal h3{margin:.1rem 0 .8rem;font-size:1.05rem}
.modal input,.modal select{width:100%;background:var(--inset);border:1px solid var(--line);color:var(--text);border-radius:var(--radius);padding:.6rem .75rem;font-size:.93rem;margin-top:.35rem;outline:none}
.modal input:focus{border-color:var(--accent)}
.modal label{font-size:.82rem;font-weight:600;color:var(--muted)}
.modal hr{border:0;border-top:1px solid var(--line)}
.codebox{background:var(--inset);border:1px solid var(--line);border-radius:16px;padding:.7rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.2rem;text-align:center;letter-spacing:.12em;margin:.7rem 0;user-select:all}
#toast{position:fixed;left:50%;bottom:calc(1.2rem + var(--safe-b));transform:translateX(-50%);background:#E2E2E6;color:#131313;padding:.6rem 1rem;border-radius:8px;z-index:200;font-size:.85rem;font-weight:600;max-width:90vw}
#toast .btn.small.primary{background:#131313;border-color:transparent;color:#E2E2E6}

/* ---------- attachments, replies, reactions ---------- */
.tool-btn{border:0;background:transparent;color:var(--muted);border-radius:999px;padding:.45rem;cursor:pointer;display:inline-flex;align-items:center}
.tool-btn:hover{background:var(--panel-2);color:var(--text)}
#attach-preview{display:flex;gap:.5rem;flex-wrap:wrap;padding:.55rem .9rem;background:var(--panel)}
.att-chip{display:flex;align-items:center;gap:.45rem;background:var(--panel-3);border:0;border-radius:12px;padding:.3rem .4rem;font-size:.78rem;max-width:220px;min-height:32px}
.att-chip>span{flex:1;min-width:0;line-height:1.35;align-self:center}
.att-chip .mini{align-self:center;flex-shrink:0;line-height:1;padding:.35rem .6rem}
.att-chip img{width:28px;height:28px;object-fit:cover;border-radius:8px}
.att-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mention-pop{position:absolute;left:.9rem;bottom:calc(64px + var(--safe-b));background:var(--panel-2);border:0;border-radius:12px;min-width:220px;max-height:220px;overflow-y:auto;z-index:60}
#chat{position:relative}
.mention-item{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;border:0;background:transparent;color:var(--text);padding:.45rem .6rem;font-size:.88rem;cursor:pointer}
.mention-item:hover,.mention-item.sel{background:var(--panel-3)}
.mention-item .avatar{width:24px;height:24px;font-size:.7rem}
.reply-quote{display:flex;gap:.4rem;align-items:center;font-size:.78rem;color:var(--muted);border-left:2px solid var(--accent);padding-left:.45rem;margin-bottom:.15rem;cursor:pointer;max-width:100%}
.reply-quote:hover{color:var(--text)}
.reply-quote .rq-author{font-weight:700}
.reply-quote .rq-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-atts{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;margin-top:.35rem}
.msg-atts img.att-img{max-width:min(420px,100%);max-height:320px;border-radius:16px;cursor:zoom-in;object-fit:contain;background:#000}
.msg-atts video.att-vid{max-width:min(420px,100%);max-height:320px;border-radius:16px;background:#000}
.msg-atts audio{max-width:100%}
.file-card{display:flex;align-items:center;gap:.6rem;background:var(--panel-2);border:0;border-radius:16px;padding:.6rem .8rem;max-width:320px;text-decoration:none;color:var(--text)}
.file-card .fname{font-size:.85rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-card .fsize{font-size:.72rem;color:var(--muted)}
.reactions{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.3rem}
.reaction{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:999px;padding:.15rem .55rem;font-size:.82rem;cursor:pointer}
.reaction.me{background:var(--accent-container);border-color:transparent;color:var(--on-container)}
.msg-actions{position:absolute;right:.6rem;top:-18px;display:none;gap:2px;background:var(--panel-2);border:0;border-radius:999px;padding:4px 6px;z-index:5}
.msg{position:relative}
.msg:hover .msg-actions{display:flex}
.msg-actions button{border:0;background:transparent;color:var(--text);border-radius:999px;padding:.2rem .35rem;font-size:1rem;line-height:1.2;cursor:pointer;min-width:30px}
.msg-actions button:hover{background:var(--panel-3)}
.thread-link{border:0;background:transparent;color:var(--accent);font-size:.78rem;font-weight:600;cursor:pointer;padding:.15rem 0}
.thread-link:hover{text-decoration:underline}
.edited{font-size:.7rem;color:var(--muted)}
.mention{background:var(--accent-container);color:var(--on-container);border-radius:6px;padding:0 .25rem;font-weight:600}
.mention.me{background:var(--accent);color:var(--on-accent)}
.cemoji{width:1.35em;height:1.35em;vertical-align:-0.25em}
.bigemoji{font-size:2rem;line-height:1.3}
.flash{animation:flash 1.6s}
@keyframes flash{0%,40%{background:#AAC7FF44}100%{background:transparent}}

/* ---------- picker (emoji + GIFs) ---------- */
#picker{position:absolute;left:.9rem;bottom:calc(64px + var(--safe-b));width:min(360px,calc(100vw - 2rem));background:var(--panel-2);border:0;border-radius:16px;z-index:150;display:flex;flex-direction:column;max-height:380px}
#picker.anchored{position:fixed;bottom:auto}
.pk-tabs{display:flex;gap:.25rem;padding:.5rem .5rem 0}
.pk-tab{flex:1;border:0;background:transparent;color:var(--muted);font-weight:700;font-size:.85rem;padding:.5rem;border-radius:999px;cursor:pointer}
.pk-tab.active{background:var(--accent-container);color:var(--on-container)}
#pk-search{margin:.5rem;background:var(--inset);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:.5rem .9rem;font-size:.88rem;outline:none}
#pk-search:focus{border-color:var(--accent)}
.pk-grid{overflow-y:auto;padding:.25rem .5rem .6rem;display:flex;flex-wrap:wrap;gap:2px;align-content:flex-start}
.pk-emoji-btn{border:0;background:transparent;font-size:1.35rem;padding:.3rem;border-radius:8px;cursor:pointer;line-height:1}
.pk-emoji-btn:hover{background:var(--panel-3)}
.pk-custom{width:34px;height:34px;object-fit:contain;padding:2px}
.pk-sec{width:100%;font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--muted);padding:.5rem .25rem .2rem}
.pk-gif{border:0;background:transparent;padding:2px;cursor:pointer;border-radius:12px;width:calc(50% - 3px)}
.pk-gif img{width:100%;height:90px;object-fit:cover;border-radius:12px;display:block}
.pk-gif:hover{outline:2px solid var(--accent)}
.pk-empty{color:var(--muted);font-size:.85rem;padding:1rem;text-align:center;width:100%}
.pk-attr{font-size:.72rem;color:var(--muted);text-align:center;padding:.45rem;border-top:1px solid var(--line)}
.pk-attr a{color:var(--accent);font-weight:700;text-decoration:none}

/* ---------- user card ---------- */
#usercard{position:fixed;z-index:120;width:280px;background:var(--panel-2);border:0;border-radius:16px;overflow:hidden}
.uc-banner{height:80px;background:var(--panel-3);background-size:cover;background-position:center}
.uc-body{padding:0 .9rem .9rem}
.uc-body .avatar.big{width:64px;height:64px;font-size:1.4rem;margin-top:-32px;border:3px solid var(--panel-2)}
.uc-name{font-weight:700;margin-top:.35rem}
.uc-sub{font-size:.8rem;color:var(--muted)}
.uc-status{display:flex;align-items:center;gap:.4rem;font-size:.82rem;margin-top:.45rem}
.uc-statustext{font-size:.85rem;margin-top:.3rem;background:var(--panel-3);border:0;border-radius:12px;padding:.4rem .55rem;overflow-wrap:anywhere}
.uc-since{font-size:.75rem;color:var(--muted);margin-top:.5rem}
.uc-actions{display:flex;gap:.4rem;margin-top:.6rem}
.avatar.big{width:56px;height:56px;font-size:1.3rem}
.avatar img,.avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.avatar{overflow:hidden}
.status-dot{width:10px;height:10px;border-radius:50%;background:#4f545c;flex-shrink:0}
.status-dot.online{background:var(--green)}
.status-dot.away{background:var(--amber)}
.status-dot.dnd{background:var(--red)}
.status-dot.offline{background:#4f545c}

/* ---------- lightbox ---------- */
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem;cursor:zoom-out}
#lightbox img{max-width:100%;max-height:100%;border-radius:16px}

/* ---------- settings ---------- */
#settings-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}
.settings{background:var(--panel-2);border:0;border-radius:28px;width:100%;max-width:760px;max-height:88dvh;display:flex;flex-direction:row;overflow:hidden}
@media (max-width:820px){
  .settings{max-width:600px}
}
.set-tabs{display:flex;flex-direction:column;gap:.25rem;align-items:stretch;padding:.8rem .6rem;min-width:140px}
.set-tab{text-align:left}
.set-tab{border:0;background:transparent;color:var(--muted);font-weight:600;font-size:.88rem;padding:.55rem .9rem;border-radius:999px;cursor:pointer}
.set-tab.active{background:var(--accent-container);color:var(--on-container)}
.set-body{flex:1;min-width:0;overflow-y:auto;padding:1.1rem 1.2rem}
@media (max-width:520px){
  .settings{flex-direction:column}
  .set-tabs{flex-direction:row;align-items:center;min-width:0}
}
.set-pane label{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin:.65rem 0}
.set-pane input,.set-pane select{width:100%;margin-top:.3rem;background:var(--inset);border:1px solid var(--line);color:var(--text);border-radius:var(--radius);padding:.6rem .7rem;font-size:.92rem;outline:none}
.set-pane input:focus,.set-pane select:focus{border-color:var(--accent)}
.set-pane input:disabled{opacity:.55}
.set-banner{height:90px;border-radius:16px;background:var(--panel-3);background-size:cover;background-position:center}
.pf-sec-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:1rem 0 .55rem}
.pf-sec-label:first-child{margin-top:.1rem}
.pfp-row{display:flex;gap:.9rem;align-items:flex-start}
#set-avatar-prev{width:72px;height:72px;font-size:1.7rem;flex-shrink:0}
.avatar.clickable,.set-banner.clickable{cursor:pointer}
.pfp-btns{flex:1;min-width:0}
.hist-row{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.55rem}
.hist-row:empty{display:none}
.hist-dot{position:relative;width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background-size:cover;background-position:center;cursor:pointer;padding:0;background-color:var(--panel-3)}
.hist-dot:hover{border-color:var(--accent)}
.hist-dot.wide{width:74px;border-radius:10px}
.hist-x{position:absolute;top:-8px;right:-8px;width:19px;height:19px;border-radius:50%;background:var(--panel-3);color:var(--text);border:1px solid var(--line);font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.hist-x:hover{background:var(--red);border-color:var(--red);color:#fff}
.set-row{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-top:1px solid var(--line);font-size:.9rem}
.set-row .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-emoji-img{width:26px;height:26px;object-fit:contain}
.danger-zone{margin-top:1rem;border:1px solid var(--red);border-radius:16px;padding:.8rem}
.danger-zone h4{margin:.1rem 0 .5rem;color:var(--red)}

/* ---------- thread panel ---------- */
#thread-panel{width:320px;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;flex-shrink:0;order:4;position:relative}
#thread-resizer{position:absolute;left:-5px;top:0;bottom:0;width:10px;cursor:ew-resize;touch-action:none;z-index:6;border-radius:6px}
#thread-resizer:hover{background:#aac7ff2e}
body.thread-resizing,body.thread-resizing *{user-select:none!important;cursor:ew-resize!important}
#thread-panel header{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border-bottom:1px solid var(--line)}
#thread-root{padding:.6rem .8rem;border-bottom:1px solid var(--line)}
#thread-replies{flex:1;overflow-y:auto;padding:.4rem .4rem}
#thread-composer{display:flex;gap:.45rem;padding:.65rem;border-top:1px solid var(--line)}
#in-thread{flex:1;background:var(--inset);border:1px solid var(--line);color:var(--text);border-radius:20px;padding:.6rem .9rem;font-size:.9rem;outline:none}
#in-thread:focus{border-color:var(--accent)}
@media (max-width: 1100px){
  #thread-panel{position:fixed;top:0;bottom:0;right:0;z-index:40;box-shadow:none;border-left:1px solid var(--line)}
}

/* ---------- composer GIF button ---------- */
.gif-btn{font-weight:800;font-size:.7rem;letter-spacing:.04em;border:1px solid var(--line);border-radius:999px;padding:.32rem .5rem;color:var(--text);background:transparent;cursor:pointer}
.gif-btn:hover{background:var(--panel-2)}
/* ---------- rail settings + server folders ---------- */
.rail-gear{color:var(--muted);padding:.55rem;border-radius:999px;margin-bottom:.2rem}
.rail-gear:hover{background:var(--panel-2);color:var(--text)}
.folder-children{display:flex;flex-direction:column;gap:5px;align-items:center;padding:3px 0 2px}
.folder-btn.open{outline:2px solid #ffffff55;outline-offset:1px}
#drop-marker{position:fixed;height:3px;background:var(--accent);border-radius:2px;z-index:300;pointer-events:none;display:none}
.drop-combine{outline:2px solid var(--accent)!important;outline-offset:1px}
#folder-menu{position:fixed;z-index:300;background:var(--panel-2);border:0;border-radius:12px;padding:.35rem;min-width:190px}
#folder-menu button.fm-item{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--text);border-radius:8px;padding:.45rem .6rem;font-size:.86rem;font-weight:600;cursor:pointer}
#folder-menu button.fm-item:hover{background:var(--panel-3)}
#folder-menu button.fm-item.danger{color:var(--red)}
#folder-menu .swatches{display:flex;gap:.35rem;padding:.45rem .6rem}
#folder-menu .sw{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent}
#folder-menu .sw.sel{border-color:#fff}
/* ---------- home (friends + DMs) ---------- */
#server-ui{display:contents}
.home-head{padding:.85rem .9rem;border-bottom:1px solid var(--line)}
.home-head strong{font-size:.98rem}
.pad-x{padding:0 .7rem}
#in-friend{flex:1;min-width:0;background:var(--inset);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:.45rem .7rem;font-size:.85rem;outline:none}
#in-friend:focus{border-color:var(--accent)}
#friend-reqs:empty,#friend-list:empty,#dm-list:empty,#group-list:empty,#blocked-list:empty{display:none}
.ftabs{display:flex;gap:.25rem;padding:.2rem 0 .35rem}
.ftab{flex:0 0 auto;border:0;background:transparent;color:var(--muted);border-radius:999px;padding:.5rem 1.1rem;font-size:.85rem;font-weight:700;cursor:pointer;white-space:nowrap}
.ftab:hover{background:var(--panel-2);color:var(--text)}
.ftab.active{background:var(--panel-3);color:var(--text)}
.ftab #req-count{color:var(--accent)}
#friends-page{flex:1;overflow-y:auto;min-height:0;padding:1rem 1.2rem 2rem;display:flex;flex-direction:column}
.fp-title{font-size:1.15rem;font-weight:800;margin:.1rem 0 .5rem}
#friends-page .chan-group-label{padding:.85rem 0 .3rem}
#friends-page .dmrow{background:var(--panel);border-radius:14px;padding:.55rem .8rem;margin-top:.35rem}
#friends-page .dmrow:hover{background:var(--panel-2)}
#friends-page .dmrow.active{background:var(--panel-3)}
.dmrow{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;border:0;background:transparent;color:var(--text);border-radius:12px;padding:.4rem .55rem;cursor:pointer}
.dmrow:hover{background:var(--panel-2)}
.dmrow.active{background:var(--panel-3)}
.dmrow .avatar{width:32px;height:32px;font-size:.75rem;flex-shrink:0}
.dmrow .dmmain{flex:1;min-width:0;line-height:1.3}
.dmrow .dmname{font-size:.88rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmrow .dmlast{font-size:.74rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmrow .mini{flex-shrink:0}
.home-btn svg{display:block}
.home-btn.active{background:var(--accent)}
body.view-home:not(.dm-open) #members{display:none!important}
body.view-home:not(.dm-open) #btn-members{display:none!important}
.gpick{display:flex!important;gap:.5rem;align-items:center;padding:.3rem 0}
/* ---------- mobile native app ---------- */
body{touch-action:manipulation}
.members-btn{display:none}
#voice-fab{display:none}
@media (max-width: 900px){
  #members{display:flex;position:fixed;top:0;bottom:0;right:0;width:min(300px,84vw);z-index:45;transform:translateX(105%);transition:transform .22s;border-left:1px solid var(--line)}
  body.members-open #members{transform:none}
  .members-btn{display:inline-flex;align-items:center}
}
@media (max-width: 700px){
  #sidebar{width:min(320px,86vw)}
  #chan-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #typing{display:none}
  #in-message,#in-thread{font-size:16px}
  #composer .btn{padding:.7rem 1.1rem;min-height:44px}
  #composer .tool-btn,#composer .gif-btn{min-height:44px;min-width:44px;justify-content:center}
  #picker{left:0;right:0;bottom:0;width:auto;max-height:62dvh;border-radius:20px 20px 0 0}
  #mention-pop{left:.5rem;right:.5rem}
  #thread-panel{width:min(360px,100vw)!important}
  #thread-resizer{display:none}
  #usercard{width:min(300px,calc(100vw - 16px))}
  #settings-backdrop{padding:0}
  .settings{max-width:none;max-height:none;height:100dvh;border-radius:0}
  .modal{max-width:calc(100vw - 2rem)}
  #voice-fab{display:flex;align-items:center;gap:.5rem;margin:.5rem .6rem 0;padding:.55rem .7rem;background:var(--panel-2);border:1px solid var(--line);border-radius:999px;font-size:.85rem}
  #voice-fab.hidden{display:none}
  #voice-fab .mini{padding:.45rem .8rem}
  .msg.show-actions .msg-actions{display:flex}
  .msg .text{font-size:.95rem}
}
/* ---------- mobile (drawer rules) ---------- */
@media (max-width: 700px){
  #sidebar{position:fixed;top:0;bottom:0;left:0;transform:translateX(-105%);transition:transform .2s}
  body.nav-open #sidebar{transform:none}
  #sidebar-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:20;opacity:0;pointer-events:none;transition:opacity .2s}
  body.nav-open #sidebar-scrim{opacity:1;pointer-events:auto}
  .icon-btn{display:inline-block}
  #rail{width:60px}
}