/* ============================================================
   chatWS — prefs.css : user Settings (js/prefs.js body classes)
   + the Settings box itself (system/element/settings.php)
============================================================ */
body.pf-fs-small .messages .message-text { font-size:13px; }
body.pf-fs-large .messages .message-text { font-size:17px; }
body.pf-compact .messages .message { padding-top:3px !important; padding-bottom:3px !important; gap:8px; }
body.pf-compact .messages .message-avatar, body.pf-compact .messages .message-avatar img { width:28px !important; height:28px !important; min-width:28px; }
body.pf-compact .messages .message-meta { margin-bottom:0; }
body.pf-no-ts .messages .message-time { display:none !important; }
body.pf-no-av .messages .message-avatar { display:none !important; }
body.pf-no-rank .messages .message-rank { display:none !important; }
body.pf-no-jl .messages .message--jl,
body.pf-no-jl .messages .message--bot:has(.bot-jl) { display:none !important; }
body.pf-no-modlog .messages .message--modlog,
body.pf-no-modlog .messages .message--bot:has(.bot-act) { display:none !important; }
body.pf-no-typing #typing { display:none !important; }

/* ── Settings box ─────────────────────────────────────────── */
.st-box { color:#e5e5e5; }
.st-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.st-title { font-size:18px; font-weight:800; display:flex; align-items:center; gap:10px; }
.st-title i { color:#d4b26a; }
.st-x { width:36px; height:36px; border:none; border-radius:50%; background:rgba(255,255,255,.06); color:#d4d4d4; cursor:pointer; font-size:16px; }
.st-x:hover { background:rgba(255,255,255,.14); color:#fff; }
.st-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:4px; border-radius:12px; background:rgba(255,255,255,.04); margin-bottom:10px; }
.st-tab { display:flex; align-items:center; justify-content:center; gap:7px; padding:9px 6px; border:none; border-radius:9px; background:transparent; color:#a3a3a3; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }
.st-tab.active { background:#b8964f; color:#fff; }
.st-pane { display:none; }
.st-pane.active { display:block; }
.st-group { display:flex; align-items:center; gap:8px; margin:16px 2px 4px; font-size:11px; font-weight:800; color:#737373; text-transform:uppercase; letter-spacing:.06em; }
.st-group:first-child { margin-top:6px; }
.st-count { padding:1px 7px; border-radius:99px; background:rgba(255,255,255,.08); color:#d4d4d4; letter-spacing:0; }
.st-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 4px; border-bottom:1px solid rgba(255,255,255,.05); cursor:pointer; }
.st-row-btn, div.st-row { cursor:default; }
.st-txt { display:flex; flex-direction:column; min-width:0; }
.st-lbl { font-size:14px; font-weight:600; color:#e5e5e5; }
.st-sub { font-size:12px; color:#737373; margin-top:2px; line-height:1.4; }
.st-select { flex:0 0 auto; max-width:52%; padding:8px 10px; border-radius:9px; border:1px solid rgba(255,255,255,.12); background:#1f1f1f; color:#f5f5f5; font-size:13px; font-family:inherit; }
.st-switch { position:relative; flex:0 0 44px; width:44px; height:24px; }
.st-switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.st-switch span { position:absolute; inset:0; border-radius:99px; background:rgba(255,255,255,.14); transition:background .15s; }
.st-switch span::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .15s; }
.st-switch input:checked + span { background:#b8964f; }
.st-switch input:checked + span::after { transform:translateX(20px); }
.st-switch input:disabled + span { opacity:.4; }
.st-note { font-size:12px; color:#a3a3a3; padding:6px 4px 0; }
.st-note:empty { display:none; }
.st-ignored { display:flex; flex-direction:column; }
.st-ig-row { display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid rgba(255,255,255,.05); }
.st-ig-row img { width:32px; height:32px; border-radius:50%; object-fit:cover; }
.st-ig-row span { flex:1; font-weight:600; font-size:14px; }
.st-empty { font-size:13px; color:#737373; padding:10px 4px; }
/* Sticky footer: solid (was background:inherit = transparent, so the rows scrolled
   visibly underneath Close/Save) and stretched over the box's side/bottom padding. */
.st-foot { position:sticky; bottom:-20px; z-index:2; display:flex; align-items:center; gap:8px; justify-content:flex-end; margin:16px -18px -20px; padding:12px 18px 14px; background:var(--bg-card, #111111); border-top:1px solid rgba(255,255,255,.06); border-radius:0 0 16px 16px; }
.st-msg { flex:1; font-size:13px; color:#a3a3a3; }
.st-msg.ok { color:#4ade80; } .st-msg.err { color:#f87171; }
.st-btn { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 16px; border:none; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; }
.st-btn.sm { min-height:32px; padding:0 12px; font-size:12.5px; }
.st-btn.primary { background:#b8964f; color:#fff; }
.st-btn.primary:hover { background:#957637; }
.st-btn.ghost { background:rgba(255,255,255,.07); color:#d4d4d4; border:1px solid rgba(255,255,255,.12); }
.st-btn:disabled { opacity:.6; }
@media (max-width:480px) { .st-select { max-width:58%; } .st-tab span { font-size:12px; } }