/* ═══════════════════════════════════════════════════ RESET ═══════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{font-family:'Inter',sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,textarea{font-family:inherit}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* ═══════════════════════════════════════════════════ THEMES ══════ */
[data-theme="dark"]{
  --bg:#0f1117;--bg-2:#161b26;--bg-3:#1c2333;--bg-hover:#1f2535;
  --border:#2a3146;--border-2:#3a4460;
  --text:#e2e8f0;--text-2:#8b93a8;--text-3:#5a6480;
  --accent:#6366f1;--accent-2:#7d8aff;--accent-bg:rgba(99,102,241,0.12);
  --my-msg:#4f46e5;--badge-bg:rgba(99,102,241,0.15);
  --admin-bg:linear-gradient(135deg,#fbbf24,#f59e0b);--admin-txt:#0f1117;
  --shadow:0 4px 24px rgba(0,0,0,0.5);
  --broadcast-bg:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(129,140,248,0.04));
  --broadcast-border:rgba(99,102,241,0.35);
}
[data-theme="light"]{
  --bg:#f1f5f9;--bg-2:#ffffff;--bg-3:#f8fafc;--bg-hover:#e8eef6;
  --border:#e2e8f0;--border-2:#cbd5e1;
  --text:#1e293b;--text-2:#64748b;--text-3:#94a3b8;
  --accent:#4f46e5;--accent-2:#7d8aff;--accent-bg:rgba(79,70,229,0.08);
  --my-msg:#4f46e5;--badge-bg:rgba(79,70,229,0.1);
  --admin-bg:linear-gradient(135deg,#fbbf24,#f59e0b);--admin-txt:#1e293b;
  --shadow:0 4px 24px rgba(0,0,0,0.12);
  --broadcast-bg:linear-gradient(135deg,rgba(79,70,229,0.06),rgba(99,102,241,0.03));
  --broadcast-border:rgba(79,70,229,0.3);
}

/* ═══════════════════════════════════════════════════ LOGIN ═══════ */
.login-screen{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg);z-index:200;padding:16px;
}
.login-bg-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:40px 40px;opacity:0.35;pointer-events:none;
}
.login-card{
  position:relative;width:100%;max-width:400px;padding:32px;
  background:var(--bg-2);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);animation:slideUp .35s cubic-bezier(.22,1,.36,1);
  max-height:calc(100vh - 32px);overflow-y:auto;
}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes msgSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes msgSlideRight{from{opacity:0;transform:translateX(18px) translateY(4px) scale(0.97)}to{opacity:1;transform:translateX(0) translateY(0) scale(1)}}
@keyframes msgSlideLeft{from{opacity:0;transform:translateX(-18px) translateY(4px) scale(0.97)}to{opacity:1;transform:translateX(0) translateY(0) scale(1)}}

.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.brand-icon{width:48px;height:48px;flex-shrink:0}
.brand-name{font-size:1.5rem;font-weight:700;color:var(--text);letter-spacing:-0.02em}
.brand-sub{font-size:0.75rem;color:var(--text-3);font-family:'JetBrains Mono',monospace;margin-top:1px}
.login-divider{height:1px;background:var(--border);margin-bottom:24px}
.login-field{margin-bottom:18px}
.field-label{display:block;font-size:0.7rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-2);margin-bottom:8px}
.field-input{
  width:100%;padding:10px 14px;
  background:var(--bg-3);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-size:0.9rem;outline:none;transition:border-color .2s,box-shadow .2s;
}
.field-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.field-hint{font-size:0.7rem;color:var(--text-3);margin-top:5px;font-family:'JetBrains Mono',monospace}
.field-hint.error{color:#ef4444}
.theme-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.theme-opt{
  display:flex;align-items:center;gap:7px;padding:8px 10px;
  background:var(--bg-3);border:1px solid var(--border);border-radius:7px;
  color:var(--text-2);font-size:0.75rem;font-weight:500;transition:all .15s;
}
.theme-opt:hover{border-color:var(--border-2);color:var(--text)}
.theme-opt.active{border-color:var(--accent);color:var(--text);background:var(--accent-bg)}
.theme-swatch{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.login-btn{
  width:100%;padding:12px 16px;border-radius:10px;margin-top:4px;
  background:var(--accent);color:#fff;font-size:0.9rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .18s;box-shadow:0 4px 16px rgba(99,102,241,0.35);
}
.login-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.login-btn:active{transform:translateY(0)}
.login-footer{text-align:center;font-size:0.68rem;color:var(--text-3);margin-top:16px;font-family:'JetBrains Mono',monospace}

/* ═══════════════════════════════════════════════════ APP SHELL ═══ */
.app{display:flex;width:100%;height:100%;background:var(--bg);position:relative;overflow:hidden}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar{
  width:260px;flex-shrink:0;background:var(--bg-2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;
  transition:transform .25s cubic-bezier(.22,1,.36,1);z-index:100;
}
.sb-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.sb-logo{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text);font-size:0.9rem}
.sb-close{color:var(--text-3);padding:5px;border-radius:6px;transition:all .15s;display:none}
.sb-close:hover{color:var(--text);background:var(--bg-hover)}

/* Live clock in sidebar */
.sb-clock{
  padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0;
  background:var(--bg-3);
}
.sb-clock-time{
  font-size:1.1rem;font-weight:700;color:var(--text);font-family:'JetBrains Mono',monospace;
  letter-spacing:0.04em;line-height:1.2;
}
.sb-clock-date{font-size:0.65rem;color:var(--text-3);font-family:'JetBrains Mono',monospace;margin-top:2px}

.sb-section{padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.sb-section-title{
  display:flex;align-items:center;gap:6px;
  font-size:0.65rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:8px;
}
.online-badge{
  background:var(--accent-bg);color:var(--accent-2);
  padding:1px 7px;border-radius:20px;font-size:0.65rem;font-weight:700;border:1px solid var(--border);
}
.pulse-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;animation:pulseDot 2s ease infinite;flex-shrink:0}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:0.4}}

/* Profile section — no device rows for non-admins */
.sb-profile-section{padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.profile-card{background:var(--bg-3);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.profile-card-header{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
}
.profile-big-av{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.9rem;font-weight:700;color:#fff;flex-shrink:0;
}
.profile-username{font-size:0.82rem;font-weight:600;color:var(--text);text-transform:capitalize}
.profile-role{font-size:0.62rem;color:var(--text-3);font-family:'JetBrains Mono',monospace;margin-top:1px}
/* device rows — shown inside profile card for admin only */
.profile-rows{padding:6px 0}
.profile-row{display:flex;align-items:flex-start;gap:8px;padding:3px 12px}
.profile-row-icon{width:13px;height:13px;flex-shrink:0;color:var(--text-3);margin-top:2px}
.profile-row-label{font-size:0.6rem;color:var(--text-3);font-family:'JetBrains Mono',monospace}
.profile-row-value{font-size:0.67rem;color:var(--text-2);word-break:break-all;line-height:1.4}
.profile-divider{height:1px;background:var(--border);margin:3px 12px}

/* Online list */
.online-list{display:flex;flex-direction:column;gap:2px}
.online-user{
  display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:7px;
  color:var(--text-2);font-size:0.78rem;transition:background .12s;
}
.online-user:hover{background:var(--bg-hover);color:var(--text)}
.online-av{
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.55rem;font-weight:700;flex-shrink:0;
}
.online-me-tag{font-size:0.6rem;font-family:'JetBrains Mono',monospace;background:var(--accent-bg);color:var(--accent-2);padding:1px 5px;border-radius:4px;margin-left:auto}
.online-admin-tag{font-size:0.6rem;font-family:'JetBrains Mono',monospace;background:rgba(251,191,36,0.15);color:#fbbf24;padding:1px 5px;border-radius:4px;margin-left:auto}

/* Admin user cards in sidebar */
.online-user-card{border-radius:8px;border:1px solid var(--border);background:var(--bg-3);margin-bottom:4px;overflow:hidden}
.online-user-card-header{display:flex;align-items:center;gap:7px;padding:6px 8px;cursor:pointer;user-select:none}
.online-user-card-header:hover{background:var(--bg-hover)}
.ouc-name{flex:1;font-size:0.76rem;font-weight:600;color:var(--text);text-transform:capitalize;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ouc-toggle{color:var(--text-3);flex-shrink:0;transition:transform .2s}
.online-user-card.expanded .ouc-toggle{transform:rotate(180deg)}
.ouc-actions{display:flex;gap:3px;flex-shrink:0}
.ouc-kick{padding:2px 6px;border-radius:4px;font-size:0.6rem;font-weight:600;background:rgba(239,68,68,0.1);color:#ef4444;border:1px solid rgba(239,68,68,0.25);transition:all .15s}
.ouc-kick:hover{background:rgba(239,68,68,0.22)}
.ouc-ban{padding:2px 6px;border-radius:4px;font-size:0.6rem;font-weight:600;background:rgba(249,115,22,0.1);color:#f97316;border:1px solid rgba(249,115,22,0.25);transition:all .15s}
.ouc-ban:hover{background:rgba(249,115,22,0.22)}
.ouc-device-panel{display:none;border-top:1px solid var(--border);padding:4px 0}
.online-user-card.expanded .ouc-device-panel{display:block}
.ouc-device-panel .profile-row{padding:2px 10px}
.ouc-device-panel .profile-row-label{font-size:0.57rem}
.ouc-device-panel .profile-row-value{font-size:0.63rem}
.ouc-device-panel .profile-divider{margin:2px 10px}
.ouc-ua{font-size:0.57rem;color:var(--text-3);font-family:'JetBrains Mono',monospace;padding:4px 10px 5px;border-top:1px solid var(--border);word-break:break-all;line-height:1.4}

/* Theme grid */
.sb-theme-grid{display:flex;gap:6px;flex-wrap:wrap}
.sb-theme{width:26px;height:26px;border-radius:6px;border:2px solid transparent;transition:all .15s;cursor:pointer}
.sb-theme:hover{transform:scale(1.1)}
.sb-theme.active{border-color:var(--text);box-shadow:0 0 0 2px var(--accent-bg)}

.sb-spacer{flex:1;min-height:8px}
.sb-footer{padding:12px 14px;border-top:1px solid var(--border);flex-shrink:0}
.sb-leave-btn{
  display:flex;align-items:center;gap:6px;width:100%;padding:8px 12px;border-radius:8px;
  color:var(--text-2);font-size:0.78rem;font-weight:500;
  border:1px solid var(--border);background:var(--bg-3);transition:all .15s;
}
.sb-leave-btn:hover{color:#ef4444;border-color:rgba(239,68,68,0.3);background:rgba(239,68,68,0.05)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:99;backdrop-filter:blur(2px)}

/* ── Chat main ────────────────────────────────────────────────────── */
.chat-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}

/* ── Topbar ──────────────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;height:52px;flex-shrink:0;
  background:var(--bg-2);border-bottom:1px solid var(--border);gap:8px;
}
.topbar-l{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.topbar-menu-btn{
  color:var(--text-3);padding:7px;border-radius:8px;transition:all .15s;display:none;flex-shrink:0;
}
.topbar-menu-btn:hover{color:var(--text);background:var(--bg-hover)}
.topbar-avatar{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.72rem;font-weight:700;color:#fff;flex-shrink:0;background:var(--accent);
}
.topbar-info{min-width:0}
.topbar-name{font-size:0.82rem;font-weight:600;color:var(--text);text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-status{display:flex;align-items:center;gap:4px;margin-top:1px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--text-3);transition:background .3s;flex-shrink:0}
.status-dot.on{background:#22c55e}
#statusTxt{font-size:0.65rem;color:var(--text-3);font-family:'JetBrains Mono',monospace}
.topbar-r{display:flex;align-items:center;gap:5px;flex-shrink:0}
.room-pill{
  display:flex;align-items:center;gap:4px;
  font-size:0.65rem;font-family:'JetBrains Mono',monospace;
  color:var(--text-3);background:var(--bg-3);
  border:1px solid var(--border);padding:3px 8px;border-radius:20px;white-space:nowrap;
}
/* Network speed pill in topbar */

.admin-panel-btn{
  display:flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:6px;
  background:var(--admin-bg);color:var(--admin-txt);
  font-size:0.7rem;font-weight:700;letter-spacing:0.03em;
  transition:filter .15s;white-space:nowrap;flex-shrink:0;
}
.admin-panel-btn:hover{filter:brightness(1.1)}

/* ── Select mode buttons ──────────────────────────────────────────── */
.topbar-select-btn{
  display:flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:6px;
  background:var(--bg-3);color:var(--text-2);
  border:1px solid var(--border);
  font-size:0.7rem;font-weight:600;letter-spacing:0.03em;
  transition:all .15s;white-space:nowrap;flex-shrink:0;cursor:pointer;
}
.topbar-select-btn:hover{color:var(--text);border-color:var(--border-2)}
.topbar-select-btn.active{
  background:var(--accent-bg);color:var(--accent);border-color:var(--accent);
}

.topbar-delete-sel-btn{
  display:flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:6px;
  background:rgba(239,68,68,0.12);color:#ef4444;
  border:1px solid rgba(239,68,68,0.3);
  font-size:0.7rem;font-weight:600;
  transition:all .15s;white-space:nowrap;flex-shrink:0;cursor:pointer;
  animation:fadeIn .18s ease;
}
.topbar-delete-sel-btn:hover{background:rgba(239,68,68,0.22);border-color:rgba(239,68,68,0.5)}

/* ── Select mode: message rows become selectable ──────────────────── */
#messagesInner.select-mode .msg-row{cursor:pointer;user-select:none}
#messagesInner.select-mode .msg-row.actions-open .bubble-toolbar{display:none !important}
body.is-admin #messagesInner.select-mode .msg-row.actions-open .bubble-toolbar{display:flex !important}
#messagesInner.select-mode .msg-row .bubble-dot-btn{pointer-events:none !important;opacity:0 !important}
#messagesInner.select-mode .msg-row:hover .bubble{
  outline:2px solid var(--accent);outline-offset:2px;
  transition:outline .1s;
}
/* Deleted messages can't be selected — no pointer cursor, no hover outline */
#messagesInner.select-mode .msg-row:has(.bubble.deleted){cursor:default}
#messagesInner.select-mode .msg-row:hover .bubble.deleted{outline:none}

/* Selected state */
.msg-row.msg-selected .bubble{
  outline:2px solid var(--accent) !important;
  outline-offset:3px;
}
.msg-row.msg-selected{
  position:relative;
}
/* Checkmark badge — injected as a sibling inside bubble-row via JS,
   falls back to ::after on the bubble for alignment */
.msg-row.msg-selected .bubble::after{
  content:"✓";
  position:absolute;
  width:22px;height:22px;
  background:var(--accent);
  color:#fff;
  border-radius:50%;
  font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  line-height:22px;text-align:center;
  pointer-events:none;
  animation:popIn .15s cubic-bezier(.22,1,.36,1);
  z-index:20;
  border:2px solid var(--bg);
}
/* Mine (right-aligned bubble): badge at top-right corner of bubble */
.msg-row.mine.msg-selected .bubble::after{
  top:-8px; right:-8px; bottom:auto; left:auto;
}
/* Theirs / admin (left-aligned bubble): badge at top-left corner of bubble */
.msg-row.theirs.msg-selected .bubble::after,
.msg-row.admin-highlighted.msg-selected .bubble::after{
  top:-8px; left:-8px; bottom:auto; right:auto;
}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}

/* Delete modal button styles */
.del-modal-btn{
  padding:8px 15px;border-radius:8px;font-size:0.8rem;font-weight:600;
  cursor:pointer;border:none;transition:filter .15s;white-space:nowrap;
}
.del-modal-btn.cancel{background:var(--bg-3);border:1px solid var(--border);color:var(--text-2)}
.del-modal-btn.cancel:hover{color:var(--text)}
.del-modal-btn.local{background:var(--bg-3);border:1px solid var(--border);color:var(--text-2)}
.del-modal-btn.local:hover{background:var(--bg-hover);color:var(--text)}
.del-modal-btn.danger{background:#ef4444;color:#fff}
.del-modal-btn.danger:hover{filter:brightness(1.1)}

/* ── Messages area ────────────────────────────────────────────────── */
.messages{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--bg);padding:12px 14px 0}
.messages-inner{display:flex;flex-direction:column;gap:2px;min-height:100%;justify-content:flex-end}

.welcome-card{
  align-self:center;max-width:340px;width:100%;text-align:center;padding:28px 24px;
  background:var(--bg-2);border:1px solid var(--border);border-radius:14px;margin:auto;animation:fadeIn .5s ease;
}
.welcome-icon{display:flex;justify-content:center;margin-bottom:12px}
.welcome-title{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:6px}
.welcome-desc{font-size:0.78rem;color:var(--text-2);line-height:1.6}

.join-notice{display:flex;justify-content:center;padding:3px 0}
.join-notice-inner{
  background:var(--bg-3);border:1px solid var(--border);
  padding:2px 12px;border-radius:20px;
  font-size:0.67rem;font-family:'JetBrains Mono',monospace;color:var(--text-3);
  animation:fadeIn .3s ease;
}
.join-name{color:var(--accent-2);font-weight:600}

/* ══════════════════════════ BROADCAST CARD ══════════════════════════ */
.broadcast-card{
  align-self:center;width:min(480px,100%);
  background:var(--broadcast-bg);
  border:1px solid var(--broadcast-border);
  border-radius:12px;overflow:hidden;margin:6px 0;
  animation:msgSlide .3s cubic-bezier(.22,1,.36,1);
}
.broadcast-card-header{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;
  border-bottom:1px solid var(--broadcast-border);
  background:rgba(99,102,241,0.06);
}
[data-theme="light"] .broadcast-card-header{background:rgba(79,70,229,0.05)}
.broadcast-card-icon{
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;flex-shrink:0;
}
.broadcast-card-title{
  font-size:0.7rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--accent-2);flex:1;
}
.broadcast-card-time{font-size:0.62rem;color:var(--text-3);font-family:'JetBrains Mono',monospace}
.broadcast-card-body{padding:12px 14px}
.broadcast-card-msg{font-size:0.875rem;color:var(--text);line-height:1.6}
.broadcast-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 14px 8px;border-top:1px solid var(--broadcast-border);
}
.broadcast-card-reply{
  display:flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:6px;font-size:0.72rem;font-weight:500;
  color:var(--accent-2);background:var(--accent-bg);
  border:1px solid var(--border);transition:all .15s;
}
.broadcast-card-reply:hover{border-color:var(--accent);background:rgba(99,102,241,0.18)}
.broadcast-card-from{font-size:0.62rem;color:var(--text-3);font-family:'JetBrains Mono',monospace}

/* ── Message rows ─────────────────────────────────────────────────── */
.msg-row{display:flex;flex-direction:column;position:relative}
.msg-row.mine  {align-self:flex-end; align-items:flex-end; max-width:72%}
.msg-row.theirs{align-self:flex-start;align-items:flex-start;max-width:72%}
.msg-row.admin-highlighted{max-width:80%;align-self:flex-start;align-items:flex-start}

.msg-row.admin-highlighted .bubble{
  background:linear-gradient(135deg,rgba(251,191,36,0.12),rgba(245,158,11,0.07)) !important;
  border:1px solid rgba(251,191,36,0.3) !important;
}
.admin-name-label{color:#fbbf24 !important}

.msg-sender-name{
  font-size:0.68rem;font-weight:600;color:var(--text-2);
  margin-bottom:3px;padding:0 4px;
  font-family:'JetBrains Mono',monospace;text-transform:capitalize;
}

/* bubble-row: position:relative so actions float */
.bubble-row{display:flex;align-items:flex-end;gap:6px;position:relative;cursor:default}
.msg-row.mine            .bubble-row{flex-direction:row-reverse}
.msg-row.theirs          .bubble-row{flex-direction:row}
.msg-row.admin-highlighted .bubble-row{flex-direction:row}
/* Timestamp placement: other users' messages show time on the RIGHT
   of the bubble; my messages show time on the LEFT of the bubble */
.msg-row.mine .bubble-time-outer{order:2}
.msg-row.mine .bubble{order:1}
.msg-row.theirs .bubble-time-outer,
.msg-row.admin-highlighted .bubble-time-outer{order:2}
.msg-row.theirs .bubble,
.msg-row.admin-highlighted .bubble{order:1}
.msg-av{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.6rem;font-weight:700;color:#fff;flex-shrink:0;margin-bottom:2px;
}
.msg-row.mine .msg-av{display:none}

.bubble{
  padding:9px 13px;border-radius:14px;
  font-size:0.875rem;line-height:1.55;word-break:break-word;
  position:relative;transition:filter .15s;user-select:text;
  min-width:0;max-width:100%;box-sizing:border-box;
  overflow:visible;
}
.msg-row.mine   .bubble{background:var(--my-msg);color:#fff;border-radius:18px;padding-bottom:9px;padding-right:34px}
.msg-row.theirs .bubble{background:var(--bg-3);color:var(--text);border:1px solid var(--border);border-radius:18px;padding-bottom:9px;padding-left:34px}
.msg-row.admin-highlighted .bubble{color:var(--text) !important}

/* ── Consecutive-message grouping ──────────────────────────────────
   Mine messages right-align (their right edges line up), so the
   touching corners flattened are on the right. Theirs/admin messages
   left-align, so the touching corners flattened are on the left. */
.msg-row.mine.grp-top    .bubble{border-radius:18px 18px 6px 18px}
.msg-row.mine.grp-mid    .bubble{border-radius:18px 6px 6px 18px}
.msg-row.mine.grp-bottom .bubble{border-radius:18px 6px 18px 18px}

.msg-row.theirs.grp-top    .bubble{border-radius:18px 18px 18px 6px}
.msg-row.theirs.grp-mid    .bubble{border-radius:6px 18px 18px 6px}
.msg-row.theirs.grp-bottom .bubble{border-radius:6px 18px 18px 18px}
[data-theme="dark"] .bubble.admin-bubble{color:#fef9ec !important}
.admin-badge-inline{
  display:flex;align-items:center;justify-content:center;gap:4px;
  width:max-content;margin:0 0 4px 0;
  font-size:0.58rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  background:rgba(251,191,36,0.18);padding:2px 7px;border-radius:20px;
  color:#f59e0b;
}
.bubble.emoji-big{background:transparent !important;border:none !important;font-size:2rem;padding:4px 6px}
.bubble.deleted{opacity:0.55;font-style:italic;display:flex;align-items:center;gap:6px;font-size:0.78rem;cursor:default;padding-left:13px !important;padding-right:13px !important;padding-bottom:9px !important}

/* ── Bubble dot trigger — sits inside the bubble, in the corner ───── */
.bubble-dot-btn {
  position: absolute;
  bottom: 6px;
  padding: 0;
  width: 20px;
  height: 20px;
  background: rgba(0,0,0,0.12);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  color: rgba(255,255,255,0.85);
  opacity: 0.75;
  transition: opacity .15s, color .15s, background .15s;
  user-select: none;
  z-index: 2;
}
/* Other users' messages: dot sits in the bottom-LEFT corner of the bubble */
.msg-row.theirs .bubble-dot-btn,
.msg-row.admin-highlighted .bubble-dot-btn {
  left: 6px;
  background: rgba(0,0,0,0.06);
  color: var(--text-2);
}
/* My messages: dot sits in the bottom-RIGHT corner of the bubble */
.msg-row.mine .bubble-dot-btn {
  right: 6px;
}
.bubble-dot-btn:hover,
.msg-row.actions-open .bubble-dot-btn {
  opacity: 1;
  background: rgba(0,0,0,0.22);
}
[data-theme="light"] .msg-row.theirs .bubble-dot-btn,
[data-theme="light"] .msg-row.admin-highlighted .bubble-dot-btn {
  background: rgba(0,0,0,0.05);
}
[data-theme="light"] .msg-row.theirs .bubble-dot-btn:hover,
[data-theme="light"] .msg-row.admin-highlighted .bubble-dot-btn:hover {
  background: rgba(0,0,0,0.1);
}

/* ── Flag count badge on sender name ──────────────────────────────── */
.flag-count-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #f97316;
  background: rgba(249,115,22,0.12);
  border: 1px solid rgba(249,115,22,0.3);
  border-radius: 20px;
  padding: 1px 5px;
  vertical-align: middle;
  line-height: 1.4;
}

/* ── Flag button — red when already flagged by me ─────────────────── */
.bact.flag.flagged-by-me {
  color: #ef4444 !important;
  border-color: rgba(239,68,68,0.4) !important;
  background: rgba(239,68,68,0.08) !important;
}
/* ── Context menu (WhatsApp-style popup) ────────────────────────── */
.bubble-toolbar{
  display:none;
  flex-direction:column;
  position:fixed;
  z-index:500;
  min-width:220px;
  max-width:260px;
  background:#1c1f26;
  border:none;
  border-radius:14px;
  box-shadow:0 16px 48px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.3);
  overflow:hidden;
  padding:4px 0;
  animation:ctxReveal .15s cubic-bezier(.22,1,.36,1);
}
[data-theme="light"] .bubble-toolbar{
  background:#ffffff;
  box-shadow:0 8px 32px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.1);
}
.msg-row.actions-open .bubble-toolbar{display:flex}
@keyframes ctxReveal{from{opacity:0;transform:scale(0.94) translateY(-6px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* Each item in the context menu */
.bact{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;
  background:transparent;border:none;border-radius:0;box-shadow:none;
  color:#e8eaf0;font-size:0.825rem;font-weight:400;
  white-space:nowrap;cursor:pointer;
  transition:background .1s;
  width:100%;text-align:left;
  letter-spacing:0.005em;
}
[data-theme="light"] .bact{color:#111827}
.bact+.bact{border-top:none}
.bact:hover{background:rgba(255,255,255,0.06)}
[data-theme="light"] .bact:hover{background:rgba(0,0,0,0.05)}

/* First item in menu gets accent highlight (like WhatsApp Reply) */
.bact:first-child{
  color:#4ade80;
}
.bact:first-child .bact-icon{
  color:#4ade80;
  opacity:1;
}
.bact:first-child:hover{background:rgba(74,222,128,0.08)}
[data-theme="light"] .bact:first-child{color:#16a34a}
[data-theme="light"] .bact:first-child:hover{background:rgba(22,163,74,0.08)}

.bact.del{color:#f87171}
.bact.del:hover{background:rgba(239,68,68,0.1);color:#f87171}
.bact.flag{color:#fb923c}
.bact.flag:hover{background:rgba(249,115,22,0.08);color:#fb923c}
.bact.kick{color:#f87171}
.bact.kick:hover{background:rgba(239,68,68,0.08);color:#f87171}
.bact.pinned{color:#a78bfa}
.bact.pinned .bact-icon{color:#a78bfa;opacity:1}
.bact.hidden-msg{color:#c084fc}
.bact.hidden-msg .bact-icon{color:#c084fc;opacity:1}

/* icon — slightly larger for WhatsApp feel */
.bact-icon{width:17px;height:17px;flex-shrink:0;opacity:0.7;color:inherit}
.bact.del .bact-icon,.bact.kick .bact-icon,.bact.flag .bact-icon{opacity:1}

/* Separator */
.bact-sep{height:1px;background:rgba(255,255,255,0.07);margin:3px 0;pointer-events:none}
[data-theme="light"] .bact-sep{background:rgba(0,0,0,0.08)}

/* No toolbar/dot on deleted messages — except for admin */
.msg-row:has(.bubble.deleted) .bubble-dot-btn  { display: none !important; }
.msg-row:has(.bubble.deleted) .bubble-toolbar  { display: none !important; }
body.is-admin .msg-row:has(.bubble.deleted) .bubble-dot-btn { display: flex !important; }
/* Restore dot button pointer events for admin on hidden bubbles */
/* Restore dot button pointer events for admin on hidden bubbles — handled by body.is-admin rule above */

/* Copy toast */
.copy-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  z-index: 999;
  animation: copyToastAnim .2s ease;
  pointer-events: none;
}
@keyframes copyToastAnim { from{opacity:0;transform:translateX(-50%) translateY(6px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }




/* ── Show more / less ───────────────────────────────────────────── */
.msg-truncated{ overflow:hidden }
.show-more-btn{
  display:inline-block;margin-top:5px;
  font-size:0.72rem;font-weight:600;
  color:var(--accent-2);cursor:pointer;
  background:none;border:none;padding:0;
  transition:opacity .15s;
}
.show-more-btn:hover{opacity:0.75}

/* Time stamp OUTSIDE the bubble — sits in front of the message:
   for "theirs" it appears before the bubble (left side, after avatar),
   for "mine" it appears before the bubble too (on the left, since the
   row is reversed the bubble flows right of it) */
.bubble-time-outer {
  flex-shrink: 0;
  align-self: flex-end;
  font-size: 0.6rem;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 9px;
  line-height: 1;
  user-select: none;
  white-space: nowrap;
}

/* Highlight flash on jump-to */
.msg-row.highlighted .bubble{animation:highlightFlash 2.5s ease}
@keyframes highlightFlash{
  0%  {outline:2px solid var(--accent);outline-offset:2px}
  70% {outline:2px solid var(--accent);outline-offset:2px}
  100%{outline:none}
}
.found-link{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.found-link:hover{text-decoration:none}
.found-mention{color:var(--accent-2);font-weight:600}

/* Reply quote */
.reply-quote{
  padding:8px 12px;margin-bottom:7px;border-radius:16px;border-left:4px solid;
  background:rgba(0,0,0,0.15);font-size:0.85rem;cursor:pointer;transition:opacity .15s;
  max-width:100%;min-width:0;overflow:hidden;box-sizing:border-box;
}
[data-theme="light"] .reply-quote{background:rgba(0,0,0,0.06)}
.reply-quote:hover{opacity:0.85}
.reply-q-user{font-weight:700;margin-bottom:1px;font-size:0.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-q-msg{opacity:0.75;white-space:wrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%}

/* Typing */
.typing-status{display:flex;align-items:center;gap:7px;padding:4px 16px;min-height:24px;flex-shrink:0}
.typing-status.idle .typing-dots{display:none}
.typing-dots{display:flex;gap:3px;align-items:center}
.typing-dots span{width:4px;height:4px;border-radius:50%;background:var(--accent);animation:typeDot 1.2s ease infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typeDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}
#typingText{font-size:0.68rem;color:var(--text-3);font-family:'JetBrains Mono',monospace}

/* Reply bar */
.reply-bar{padding:7px 12px;background:var(--bg-2);border-top:1px solid var(--border);flex-shrink:0;animation:slideUp .2s ease}
.reply-bar-content{
  display:flex;align-items:center;gap:8px;padding:6px 10px 6px 12px;
  background:var(--bg-3);border-radius:8px;border-left:3px solid var(--accent);
}
.reply-bar-user{font-size:0.68rem;font-weight:600;color:var(--accent-2);margin-bottom:1px;text-transform:capitalize}
.reply-bar-msg{font-size:0.73rem;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.reply-bar-close{color:var(--text-3);padding:4px;border-radius:5px;flex-shrink:0;transition:all .15s;margin-left:auto}
.reply-bar-close:hover{color:var(--text);background:var(--bg-hover)}

/* Input */
.input-bar{padding:9px 12px 12px;background:var(--bg-2);border-top:1px solid var(--border);flex-shrink:0}
.input-wrap{
  display:flex;align-items:flex-end;gap:8px;
  background:var(--bg-3);border:1px solid var(--border);
  border-radius:12px;padding:8px 8px 8px 13px;
  transition:border-color .18s,box-shadow .18s;
}
.input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.input-box{
  flex:1;min-height:20px;max-height:100px;overflow-y:auto;outline:none;
  color:var(--text);font-size:0.875rem;line-height:1.5;word-break:break-word;
}
.input-box:empty::before{content:attr(data-placeholder);color:var(--text-3);pointer-events:none}
.send-btn{
  width:34px;height:34px;border-radius:8px;flex-shrink:0;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:all .18s;
}
.send-btn:hover{filter:brightness(1.1);transform:scale(1.04)}
.send-btn:active{transform:scale(.97)}

/* ═══════════════════════════════════════════════════ MODALS ══════ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:300;backdrop-filter:blur(3px)}
.admin-modal,.broadcast-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(96vw,480px);max-height:85vh;
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:14px;box-shadow:var(--shadow);z-index:400;
  display:flex;flex-direction:column;overflow:hidden;
}
.admin-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.admin-modal-title{font-size:0.9rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.modal-close-btn{color:var(--text-3);padding:5px;border-radius:6px;transition:all .15s}
.modal-close-btn:hover{color:var(--text);background:var(--bg-hover)}
.admin-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 16px;flex-shrink:0}
.admin-tab{
  padding:9px 12px;font-size:0.77rem;font-weight:500;color:var(--text-2);
  border-bottom:2px solid transparent;transition:all .15s;margin-bottom:-1px;
}
.admin-tab:hover{color:var(--text)}
.admin-tab.active{color:var(--accent-2);border-bottom-color:var(--accent)}
.admin-tab-panel{flex:1;overflow-y:auto;padding:10px 12px}
.admin-user-row{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:8px;border:1px solid var(--border);background:var(--bg-3);margin-bottom:5px;
}
.admin-user-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:700;color:#fff;flex-shrink:0}
.admin-user-info{flex:1;min-width:0}
.admin-user-name{font-size:0.82rem;font-weight:600;color:var(--text);text-transform:capitalize}
.admin-user-meta{font-size:0.65rem;color:var(--text-3);font-family:'JetBrains Mono',monospace;margin-top:1px}
.admin-user-actions{display:flex;gap:5px;flex-shrink:0}
.admin-kick-btn{padding:4px 9px;border-radius:5px;font-size:0.7rem;font-weight:600;background:rgba(239,68,68,0.1);color:#ef4444;border:1px solid rgba(239,68,68,0.25);transition:all .15s}
.admin-kick-btn:hover{background:rgba(239,68,68,0.2)}
.admin-ban-btn{padding:4px 9px;border-radius:5px;font-size:0.7rem;font-weight:600;background:rgba(249,115,22,0.1);color:#f97316;border:1px solid rgba(249,115,22,0.25);transition:all .15s}
.admin-ban-btn:hover{background:rgba(249,115,22,0.2)}
.admin-setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.admin-setting-row:last-child{border-bottom:none}
.admin-setting-label{font-size:0.82rem;font-weight:500;color:var(--text)}
.admin-setting-hint{font-size:0.67rem;color:var(--text-3);margin-top:2px}
.admin-setting-value{font-size:0.75rem;font-family:'JetBrains Mono',monospace;color:var(--accent-2);white-space:nowrap}
.admin-btn{
  padding:6px 13px;border-radius:6px;font-size:0.74rem;font-weight:600;
  background:var(--accent-bg);border:1px solid var(--border-2);color:var(--accent-2);
  transition:all .15s;display:flex;align-items:center;gap:5px;white-space:nowrap;
}
.admin-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.admin-danger-btn{padding:6px 13px;border-radius:6px;font-size:0.74rem;font-weight:600;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);color:#ef4444;transition:all .15s;white-space:nowrap}
.admin-danger-btn:hover{background:rgba(239,68,68,0.2)}
.blocked-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg-3);margin-bottom:5px}
.blocked-name{flex:1;font-size:0.82rem;font-weight:500;color:var(--text-2);text-transform:capitalize}
.blocked-reason{font-size:0.65rem;color:var(--text-3);font-family:'JetBrains Mono',monospace}
.unblock-btn{padding:3px 8px;border-radius:5px;font-size:0.68rem;font-weight:600;background:rgba(34,197,94,0.1);color:#22c55e;border:1px solid rgba(34,197,94,0.25);transition:all .15s;white-space:nowrap}
.unblock-btn:hover{background:rgba(34,197,94,0.2)}
.empty-state{text-align:center;padding:24px;color:var(--text-3);font-size:0.78rem}
.broadcast-modal{max-height:280px}
.broadcast-textarea{
  flex:1;resize:none;outline:none;background:var(--bg-3);
  border:none;border-bottom:1px solid var(--border);
  color:var(--text);font-size:0.875rem;padding:14px 16px;line-height:1.5;
}
.broadcast-textarea::placeholder{color:var(--text-3)}
.flag-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(90vw,340px);background:var(--bg-2);border:1px solid var(--border);
  border-radius:14px;padding:22px;z-index:400;box-shadow:var(--shadow);animation:slideUp .25s ease;
}
.flag-modal-title{font-size:0.95rem;font-weight:700;color:var(--text);margin-bottom:8px}
.flag-modal-desc{font-size:0.82rem;color:var(--text-2);line-height:1.6;margin-bottom:16px}
.flag-modal-btns{display:flex;gap:8px;justify-content:flex-end}
.flag-cancel-btn{padding:7px 14px;border-radius:7px;font-size:0.8rem;font-weight:600;background:var(--bg-3);border:1px solid var(--border);color:var(--text-2);transition:all .15s;cursor:pointer}
.flag-cancel-btn:hover{color:var(--text)}
.flag-confirm-btn{padding:7px 14px;border-radius:7px;font-size:0.8rem;font-weight:600;background:#ef4444;color:#fff;border:none;cursor:pointer;transition:filter .15s}
.flag-confirm-btn:hover{filter:brightness(1.1)}

/* ═══════════════════════════════════════════════ MISC ════════════ */
::selection{background:var(--accent-bg);color:var(--text)}
.fade-in{animation:fadeIn .3s ease}
.msg-anim{animation:msgSlide .25s cubic-bezier(.22,1,.36,1)}
.msg-row.mine.msg-anim   { animation:msgSlideRight .3s cubic-bezier(.22,1,.36,1) }
.msg-row.theirs.msg-anim,
.msg-row.admin-highlighted.msg-anim { animation:msgSlideLeft .3s cubic-bezier(.22,1,.36,1) }


/* ─── Page footer ─────────────────────────────────────────────────── */
.page-footer{
  padding:10px 14px;border-top:1px solid var(--border);flex-shrink:0;
  display:flex;flex-direction:column;gap:4px;
}
.footer-name{font-size:0.72rem;font-weight:600;color:var(--text-2)}
.footer-links{display:flex;gap:8px;flex-wrap:wrap}
.footer-link{
  display:inline-flex;align-items:center;gap:4px;
  font-size:0.65rem;color:var(--text-3);font-family:'JetBrains Mono',monospace;
  padding:2px 7px;border-radius:20px;border:1px solid var(--border);
  transition:all .15s;
}
.footer-link:hover{color:var(--accent-2);border-color:var(--border-2);background:var(--accent-bg)}
/* ═══════════════════════════════════════ RESPONSIVE — PHONES ════ */
@media(max-width:700px){
  /* Sidebar becomes drawer */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;
    transform:translateX(-100%);z-index:101;
    width:min(290px,88vw) !important;
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.visible{display:block}
  .sb-close{display:flex}
  .topbar-menu-btn{display:flex !important}

  /* Bubbles take more width */
  .msg-row.mine,.msg-row.theirs,.msg-row.admin-highlighted{max-width:90% !important}

  /* Topbar compact */
  .room-pill span:not(svg){display:none}
  .net-pill .net-label{display:none}
  .topbar{padding:0 8px;height:48px}

  /* Broadcast card full width */
  .broadcast-card{width:100%}



  /* Input */
  .input-bar{padding:8px 10px 10px}
  .messages{padding:10px 10px 0}

  /* Admin modal */
  .admin-modal{width:96vw}

  /* Wide+centered layout: don't hide sidebar (irrelevant, it's a drawer anyway) */
  [data-layout="wide"]     .sidebar,
  [data-layout="centered"] .sidebar{width:0 !important}
  [data-layout="split"]    .app{flex-direction:row}
  [data-layout="split"]    .sidebar{border-left:none;border-right:1px solid var(--border)}
}

@media(max-width:380px){
  .login-card{padding:20px 14px}
  .brand-name{font-size:1.2rem}
  .bubble{font-size:0.82rem;padding:7px 10px}
  .topbar-name{max-width:90px}
}

/* Force sidebar always visible on desktop */
@media(min-width:701px){
  .sidebar{transform:none !important}
}

/* ── Pinned message banner ──────────────────────────────────────── */
.pinned-banner{
  display:flex;align-items:center;gap:8px;
  padding:6px 14px;
  background:var(--accent-bg);border-bottom:1px solid var(--border);
  flex-shrink:0;cursor:pointer;transition:background .15s;
}
.pinned-banner:hover{background:rgba(99,102,241,0.18)}
.pinned-banner-icon{color:var(--accent-2);flex-shrink:0}
.pinned-banner-label{font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--accent-2)}
.pinned-banner-count{
  font-size:0.6rem;font-family:'JetBrains Mono',monospace;
  background:var(--accent);color:#fff;
  padding:1px 6px;border-radius:10px;flex-shrink:0;font-weight:700;
}
.pinned-banner-text{font-size:0.75rem;color:var(--text-2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pinned-banner-close{color:var(--text-3);padding:2px;border-radius:4px;transition:all .15s;margin-left:auto}
.pinned-banner-close:hover{color:var(--text);background:var(--bg-hover)}
/* Pinned indicator on the bubble — sits inside the top edge */
.msg-row.pinned-msg .bubble::before{
  content:"📌";
  position:absolute;top:4px;
  font-size:10px;
  line-height:1;
  pointer-events:none;
  z-index:3;
}
.msg-row.mine.pinned-msg .bubble::before{left:6px}
.msg-row.theirs.pinned-msg .bubble::before,.msg-row.admin-highlighted.pinned-msg .bubble::before{right:6px}
/* Extra top padding so the pin emoji doesn't overlap the first line of text */
.msg-row.pinned-msg .bubble{padding-top:20px !important}
/* Admin bubbles already have the badge inside - pin icon sits above it */
.msg-row.pinned-msg .bubble .admin-badge-inline{margin-top:4px}

/* ── Hidden/blurred messages ─────────────────────────────────────── */
.bubble.hidden-blur{
  filter:blur(6px);
  user-select:none;
  cursor:default;
  transition:filter .2s;
}
/* Admin sees through blur and retains full interaction */
body.is-admin .bubble.hidden-blur{
  filter:none;
  opacity:0.7;
  outline:2px dashed #a855f7;
  outline-offset:2px;
  cursor:default;
  pointer-events:auto;
  user-select:text;
}
.hidden-msg-label{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:0.65rem;color:var(--text-3);pointer-events:none;
  font-family:'JetBrains Mono',monospace;white-space:nowrap;
}

/* ── Message info modal ──────────────────────────────────────────── */
.msg-info-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(92vw,320px);
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:14px;padding:20px;z-index:500;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
  animation:slideUp .22s cubic-bezier(.22,1,.36,1);
}
.msg-info-title{
  font-size:0.82rem;font-weight:700;color:var(--text);
  margin-bottom:14px;display:flex;align-items:center;gap:6px;
}
.msg-info-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:6px 0;border-bottom:1px solid var(--border);
}
.msg-info-row:last-of-type{border-bottom:none}
.msg-info-label{font-size:0.65rem;color:var(--text-3);font-family:'JetBrains Mono',monospace;min-width:60px;flex-shrink:0;margin-top:1px}
.msg-info-value{font-size:0.78rem;color:var(--text-2);word-break:break-word}
.msg-info-close{
  width:100%;margin-top:14px;padding:8px;border-radius:8px;
  background:var(--bg-3);border:1px solid var(--border);
  color:var(--text-2);font-size:0.8rem;font-weight:600;
  transition:all .15s;cursor:pointer;
}
.msg-info-close:hover{color:var(--text);background:var(--bg-hover)}