/* ═══════════════════════════════════════════════════════════════════
   UNCENSORED — Discord-like Dark Theme
   ─────────────────────────────────────────────────────────────────────
   FEATURE MAP — guide for future AI / developer involvement.
   Line numbers are approximate guides for this revision; if they have
   drifted after edits, SEARCH FOR THE QUOTED CLASS NAME — each is unique.

   ≈   44 · THEME VARIABLES (colors, radii, fonts) ...... :root
   ≈   50 · Base styles + scrollbar ..................... ::-webkit-scrollbar
   ≈   65 · Buttons (.btn, .icon-btn) ................... .btn-primary
   ≈   80 · Forms (.form-group, .btn-row, textarea) ..... .form-group
   ≈  100 · AUTH SCREEN (card, tabs, error, remember) ... .auth-card
   ≈  160 · APP LAYOUT (3-column grid) .................. .app
   ≈  170 · SIDEBAR (icon, channel list, user panel) .... .sidebar
   ≈  190 · Channel items (hover, active, delete) ....... .channel-item
   ≈  230 · User panel (bottom of sidebar) .............. .user-panel
   ≈  255 · MAIN: channel header + chat area ............ .channel-header
   ≈  262 · CHAT SCROLLING FIX — min-height: 0 on .sidebar,
   ≈        .main, .chat-area, .members-sidebar. DO NOT
   ≈        remove (see NOTE below) ...................... search "min-height: 0"
   ≈  280 · MESSAGES (bubbles, attachments, actions) .... .message
   ≈  335 · Typing indicator dots ....................... .typing-indicator
   ≈  350 · MESSAGE INPUT + attachment preview .......... .message-input-area
   ≈  380 · Voice overlay (+ speaking ring) ............. .voice-overlay
   ≈  410 · MEMBERS SIDEBAR (items, badges, hide) ....... .members-sidebar
   ≈  440 · MODALS (shared .modal / .modal-overlay) ..... .modal-overlay
   ≈  455 · Settings sections + 2FA/QR styles ........... .settings-section
   ≈  490 · Reg codes / admin channel list .............. .regcodes-list
   ≈  505 · TOASTS ...................................... .toasts
   ≈  520 · Members-sidebar collapse .................... .no-members
   ≈  528 · Drag & drop channel styles .................. .channel-item.dragging
   ≈  535 · PROFILE VISUALS (avatar/banner previews) .... .profile-visuals
   ≈  615 · USER PROFILE MODAL .......................... .profile-modal
   ≈  685 · @MENTION POPUP .............................. .mention-popup
   ≈  735 · IMAGE CROPPER MODAL (zoom, sliders) ......... .crop-modal
   ≈  880 · Voice speaking indicator .................... .voice-user.speaking
   ≈  896 · Member hide/unhide toggle ................... .member-toggle
   ≈  928 · Data disclosure (registration) .............. .data-disclosure
   ≈  977 · Toggle switch (generic, currently unused) ... .toggle-row
   1011 · RESPONSIVE breakpoints (final section) ...... @media

   NOTE: the old ".copy-link" (JXL prompt) styles were removed with the JXL
   feature. WebP conversion is purely client-side and needs no UI styling.

   NOTE: DO NOT remove the "min-height: 0" declarations on .sidebar, .main,
   .chat-area or .members-sidebar. Flex/grid items default to min-height:auto,
   so without them a long message list stretches .main past the 100vh grid
   row, pushes the message input below the fold, and the chat cannot scroll.
   #chat-area (id="chat-area" in index.html) is the chat's scroll container.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg-primary:    #1e1f22;
  --bg-secondary:  #2b2d31;
  --bg-tertiary:   #313338;
  --bg-hover:      #393c41;
  --bg-active:     #404249;
  --bg-input:      #383a40;
  --bg-channel-hi: #3f4147;
  --bg-online:     #23a559;
  --bg-idle:       #f0b232;
  --bg-dnd:        #f23f43;
  --bg-offline:    #80848e;
  --bg-blurple:    #5865f2;
  --bg-blurple-hi: #4752c4;
  --bg-danger:     #da373c;
  --bg-danger-hi:  #a12d2f;
  --bg-green:      #23a559;
  --bg-green-hi:   #1a7a42;
  --text-primary:  #f2f3f5;
  --text-secondary:#b5bac1;
  --text-muted:    #949ba4;
  --text-link:     #00a8fc;
  --text-white:    #ffffff;
  --text-danger:   #f23f43;
  --border:        #3f4147;
  --shadow:        0 8px 16px rgba(0,0,0,.24);
  --radius:        8px;
  --radius-lg:     12px;
  --font:          'Segoe UI', 'gg sans', system-ui, -apple-system, sans-serif;
  --sidebar-w:     240px;
  --members-w:     240px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.4;
}

.hidden { display: none !important; }

/* ─── SCROLLBAR ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1a1b1e; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #111214; }

/* ─── BUTTONS ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border: none; border-radius: var(--radius);
  font-family: var(--font); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background .15s, transform .1s;
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--bg-blurple); color: white; }
.btn-primary:hover { background: var(--bg-blurple-hi); }
.btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); }
.btn-secondary:hover { background: var(--bg-hover); }
.btn-danger { background: var(--bg-danger); color: white; }
.btn-danger:hover { background: var(--bg-danger-hi); }
.btn-full { width: 100%; }
.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 6px; }
.btn-attach {
  background: none; border: none; padding: 8px; cursor: pointer;
  color: var(--text-secondary); transition: color .15s;
}
.btn-attach:hover { color: var(--text-primary); }
.btn-send {
  background: none; border: none; padding: 8px; cursor: pointer;
  color: var(--text-secondary); transition: color .15s;
}
.btn-send:hover { color: var(--text-primary); }

.icon-btn {
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--text-secondary); border-radius: 4px; transition: color .15s, background .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

/* ─── FORMS ─────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-secondary); text-transform: uppercase;
  letter-spacing: .02em; margin-bottom: 6px;
}
.label-hint { text-transform: none; font-weight: 400; font-size: 11px; color: var(--text-muted); }
.form-group input, .form-group select {
  width: 100%; padding: 10px 12px; background: var(--bg-input);
  border: 1px solid transparent; border-radius: var(--radius);
  color: var(--text-primary); font-family: var(--font); font-size: 14px;
  transition: border-color .15s, background .15s;
}
.form-group input:focus, .form-group select:focus {
  outline: none; border-color: var(--bg-blurple); background: #2b2d31;
}
.form-group input::placeholder { color: var(--text-muted); }
.btn-row { display: flex; gap: 8px; margin-top: 12px; }
.btn-row .btn { flex: 1; }

/* ─── AUTH SCREEN ───────────────────────────────────────────────── */
.auth-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #1e1f22 0%, #2b2d31 50%, #1e1f22 100%);
  padding: 20px;
}
.auth-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 100%; max-width: 460px;
  box-shadow: var(--shadow);
  max-height: 90vh;
  overflow-y: auto;
}
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo h1 { font-size: 24px; font-weight: 700; margin-top: 12px; }
.auth-subtitle { color: var(--text-muted); font-size: 13px; margin-top: 4px; }

.auth-tabs {
  display: flex; border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.auth-tab {
  flex: 1; padding: 10px; background: none; border: none;
  color: var(--text-secondary); font-family: var(--font); font-size: 14px;
  font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.auth-tab.active { color: var(--text-primary); border-bottom-color: var(--bg-blurple); }
.auth-tab:hover { color: var(--text-primary); }

.auth-error {
  background: rgba(218,55,60,.15); border: 1px solid var(--bg-danger);
  color: var(--text-danger); padding: 10px 12px; border-radius: var(--radius);
  font-size: 13px; margin-bottom: 12px;
}

.remember-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--text-secondary);
  margin: 14px 0 16px; cursor: pointer; line-height: 1.4;
}
.remember-row input[type="checkbox"] {
  margin-top: 1px; flex-shrink: 0;
  width: 16px; height: 16px; accent-color: var(--bg-blurple);
  cursor: pointer;
}

/* ─── APP LAYOUT ────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--members-w);
  height: 100vh;
}

/* ─── SIDEBAR ───────────────────────────────────────────────────── */
.sidebar {
  background: var(--bg-secondary);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--bg-primary);
  min-height: 0; /* grid item: let .channels-list scroll instead of pushing .user-panel off-screen */
}
.sidebar-top {
  padding: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.app-icon {
  width: 48px; height: 48px; border-radius: 16px;
  overflow: hidden; cursor: pointer;
  transition: border-radius .2s;
}
.app-icon:hover { border-radius: 12px; }
.sidebar-toggle-indicator {
  position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 32px; background: white; border-radius: 2px;
  opacity: 0; transition: opacity .2s, height .2s;
}
.app-icon { position: relative; }
.app-icon:hover .sidebar-toggle-indicator { opacity: 1; height: 24px; }
.sidebar-divider {
  height: 2px; background: var(--bg-primary); margin: 0 8px; border-radius: 1px;
}
.channels-list { flex: 1; overflow-y: auto; padding: 8px 0; }

/* Flat channel list (no categories) */
.channel-list-empty {
  padding: 16px 12px; font-size: 12px; color: var(--text-muted); text-align: center;
  font-style: italic;
}

/* Channel item */
.channel-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; margin: 1px 8px;
  border-radius: 4px; cursor: pointer;
  color: var(--text-muted); font-size: 14px; font-weight: 500;
  transition: background .1s, color .1s;
  position: relative;
}
.channel-item:hover { background: var(--bg-hover); color: var(--text-secondary); }
.channel-item.active { background: var(--bg-active); color: var(--text-primary); }
.channel-item .ch-icon { font-size: 18px; opacity: .6; flex-shrink: 0; width: 20px; text-align: center; }
.channel-item .ch-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-item .ch-badge {
  background: var(--bg-danger); color: white; font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
.channel-item .ch-voice-users { font-size: 11px; color: var(--text-muted); }
.channel-item .ch-delete {
  display: none; margin-left: 4px; background: none; border: none;
  color: var(--text-muted); cursor: pointer; font-size: 14px;
}
.channel-item:hover .ch-delete { display: block; }
.channel-item .ch-delete:hover { color: var(--text-danger); }

/* User Panel (bottom of sidebar) */
.user-panel {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; background: var(--bg-tertiary);
}
.user-panel-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-blurple); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: white; flex-shrink: 0;
  position: relative;
}
.avatar-letter { text-transform: uppercase; }
.user-panel-info { flex: 1; min-width: 0; }
.user-panel-name { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-panel-status { font-size: 11px; color: var(--text-muted); }
.user-panel-actions { display: flex; gap: 2px; }

/* ─── MAIN AREA ─────────────────────────────────────────────────── */
.main {
  display: flex; flex-direction: column;
  background: var(--bg-primary);
  min-width: 0;
  min-height: 0; /* grid item: must be allowed to shrink to the 100vh row or the chat overflows the page */
}

.channel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; height: 48px;
  border-bottom: 1px solid var(--bg-secondary);
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
  flex-shrink: 0;
}
.channel-title { display: flex; align-items: center; gap: 8px; }
.channel-hash { font-size: 22px; color: var(--text-muted); font-weight: 300; }
.channel-name { font-weight: 600; font-size: 15px; }
.header-actions { display: flex; gap: 4px; }

/* Chat area — the chat's SCROLL CONTAINER (id="chat-area" in index.html).
   min-height: 0 is required: flex items default to min-height:auto, which
   would let a long message list stretch this box past the viewport and push
   the message input off-screen instead of producing a scrollbar. */
.chat-area {
  flex: 1; overflow-y: auto; padding: 16px 0;
  display: flex; flex-direction: column;
  min-height: 0;
}
.channel-welcome { padding: 24px 16px 32px; }
.welcome-icon { margin-bottom: 8px; }
.channel-welcome h2 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.channel-welcome p { color: var(--text-secondary); font-size: 15px; }

/* Messages */
.messages { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; }
.message {
  display: flex; gap: 12px; padding: 6px 0;
  position: relative; border-radius: 4px;
  transition: background .1s;
}
.message:hover { background: var(--bg-tertiary); }
.message-grouped { padding-top: 2px; padding-bottom: 2px; }
.msg-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-blurple); display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: white; font-size: 16px; cursor: pointer;
}
.msg-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.msg-content { flex: 1; min-width: 0; }
.msg-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.msg-username { font-weight: 600; font-size: 14px; cursor: pointer; }
.msg-username:hover { text-decoration: underline; }
.msg-role-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px;
}
.msg-role-badge.admin { background: var(--bg-blurple); color: white; }
.msg-time { font-size: 11px; color: var(--text-muted); }
.msg-text { font-size: 14px; line-height: 1.4; word-wrap: break-word; white-space: pre-wrap; }
.msg-text .edited { font-size: 10px; color: var(--text-muted); margin-left: 4px; }
.msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg-attachment {
  max-width: 320px; border-radius: var(--radius); overflow: hidden;
  background: var(--bg-secondary);
}
.msg-attachment img { max-width: 100%; display: block; }
.msg-attachment video { max-width: 100%; display: block; }
.msg-attachment a {
  display: block; padding: 10px 12px; color: var(--text-link);
  text-decoration: none; font-size: 13px;
}
.msg-attachment a:hover { text-decoration: underline; }

.message-actions {
  position: absolute; top: -14px; right: 16px;
  display: none; gap: 2px; background: var(--bg-tertiary);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.message:hover .message-actions { display: flex; }
.msg-action-btn {
  background: none; border: none; padding: 6px 8px; cursor: pointer;
  color: var(--text-secondary); transition: color .1s;
}
.msg-action-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.msg-action-btn.danger:hover { color: var(--text-danger); }

/* Typing indicator */
.typing-indicator {
  padding: 4px 16px; font-size: 13px; color: var(--text-secondary);
  height: 24px; display: flex; align-items: center; gap: 6px;
}
.typing-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary);
  animation: typingBounce 1.4s infinite both;
}
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}

/* ─── MESSAGE INPUT ─────────────────────────────────────────────── */
.message-input-area { padding: 0 16px 20px; flex-shrink: 0; position: relative; }
.input-wrapper {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg-tertiary); border-radius: var(--radius);
  padding: 2px 4px;
}
.input-wrapper input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text-primary); font-family: var(--font); font-size: 14px;
  padding: 12px 8px;
}
.input-wrapper input::placeholder { color: var(--text-muted); }
.attachment-preview {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.attach-item {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-tertiary); padding: 6px 10px;
  border-radius: var(--radius); font-size: 12px;
}
.attach-item img { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; }
.attach-item .attach-remove {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 16px; line-height: 1;
}
.attach-item .attach-remove:hover { color: var(--text-danger); }

/* Voice overlay */
.voice-overlay {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; background: var(--bg-secondary);
  border-top: 1px solid var(--border);
}
.voice-info { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.voice-indicator {
  width: 8px; height: 8px; border-radius: 50%; background: var(--bg-green);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.voice-users { display: flex; gap: 4px; flex: 1; margin: 0 12px; }
.voice-user {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.voice-user img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ─── MEMBERS SIDEBAR ───────────────────────────────────────────── */
.members-sidebar {
  background: var(--bg-secondary);
  border-left: 1px solid var(--bg-primary);
  display: flex; flex-direction: column;
  transition: width .2s;
  min-height: 0; /* grid item: let .members-list scroll instead of growing past the viewport */
}
.members-sidebar { transition: width .2s, opacity .2s; overflow: hidden; }
.members-sidebar.collapsed { width: 0 !important; opacity: 0; border: none; min-width: 0; }
.members-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px;
}
.members-header h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); }
.members-list { flex: 1; overflow-y: auto; padding: 0 8px; }
.member-group { margin-bottom: 16px; }
.member-group-header {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  color: var(--text-muted); padding: 4px 8px; margin-bottom: 4px;
}
.member-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 4px; cursor: pointer;
  transition: background .1s;
}
.member-item:hover { background: var(--bg-hover); }
.member-avatar {
  width: 32px; height: 32px; border-radius: 50%; position: relative;
  background: var(--bg-blurple); display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: white; font-size: 13px; flex-shrink: 0;
}
.member-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.member-status-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--bg-secondary);
}
.member-status-dot.online { background: var(--bg-online); }
.member-status-dot.idle { background: var(--bg-idle); }
.member-status-dot.dnd { background: var(--bg-dnd); }
.member-status-dot.offline { background: var(--bg-offline); }
.member-info { min-width: 0; }
.member-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-role-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 1px 4px; border-radius: 2px; margin-left: 4px; }
.member-role-badge.admin { background: var(--bg-blurple); color: white; }

/* ─── MODAL ─────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal {
  background: var(--bg-secondary); border-radius: var(--radius-lg);
  width: 90%; max-width: 600px; max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: 0 16px 32px rgba(0,0,0,.4);
  animation: modalIn .2s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: 18px; font-weight: 700; }
.modal-body {
  padding: 20px 24px; overflow-y: auto; flex: 1;
}
.settings-section { margin-bottom: 8px; }
.settings-section h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; color: var(--text-primary); }
.settings-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }
.settings-divider { border: none; height: 1px; background: var(--border); margin: 16px 0; }

/* QR code area */
.qr-area { text-align: center; margin: 16px 0; }
.qr-area img {
  border-radius: var(--radius); margin-bottom: 12px;
  background: white; padding: 8px;
}
.qr-secret-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.qr-secret {
  display: block; background: var(--bg-tertiary); padding: 8px 12px;
  border-radius: var(--radius); font-family: monospace; font-size: 14px;
  word-break: break-all; cursor: pointer; user-select: all;
}

/* 2FA status */
.twofa-status {
  display: flex; align-items: center; gap: 8px;
  padding: 12px; border-radius: var(--radius);
  margin-bottom: 12px; font-size: 14px;
}
.twofa-status.active { background: rgba(35,165,89,.15); border: 1px solid var(--bg-green); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.status-dot.green { background: var(--bg-green); }

/* Reg codes list */
.regcodes-list { max-height: 200px; overflow-y: auto; margin-bottom: 8px; }
.regcode-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; background: var(--bg-tertiary);
  border-radius: var(--radius); margin-bottom: 4px;
}
.regcode-item code {
  font-family: monospace; font-size: 14px; color: var(--text-primary);
  letter-spacing: 1px;
}

/* Admin channel list */
.admin-channel-list { margin-bottom: 16px; }
.admin-channel-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; background: var(--bg-tertiary);
  border-radius: var(--radius); margin-bottom: 6px;
}
.admin-channel-item .ch-icon { font-size: 16px; opacity: .6; }
.admin-channel-item .ch-name { flex: 1; font-size: 13px; font-weight: 500; }
.channel-create-row { display: flex; gap: 8px; }
.channel-create-row input { flex: 1; }
.channel-create-row select { width: 80px; }

/* ─── TOASTS ────────────────────────────────────────────────────── */
.toasts {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 8px; z-index: 200;
}
.toast {
  padding: 12px 16px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  animation: toastIn .3s ease;
  box-shadow: var(--shadow);
  max-width: 320px;
}
.toast.success { background: var(--bg-green); color: white; }
.toast.error { background: var(--bg-danger); color: white; }
.toast.info { background: var(--bg-blurple); color: white; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── MEMBERS SIDEBAR COLLAPSED ─────────────────────────────────── */
.app.no-members {
  grid-template-columns: var(--sidebar-w) 1fr;
}
.app.no-members .members-sidebar {
  display: none;
}
.members-toggle-float {
  margin-left: 4px;
}

/* ─── DRAG AND DROP CHANNELS ────────────────────────────────────── */
.channel-item.dragging { opacity: .5; border: 2px dashed var(--bg-blurple); }
.channel-item.drag-over { border-top: 2px solid var(--bg-blurple); }
.channel-item[draggable="true"] { cursor: grab; }
.channel-item[draggable="true"]:active { cursor: grabbing; }



/* ─── PROFILE VISUALS (Avatar & Banner) ─────────────────────────── */
.btn-sm { padding: 6px 12px; font-size: 12px; }

.profile-visuals { margin-bottom: 8px; }

.profile-banner-preview {
  width: 100%; height: 120px; border-radius: var(--radius);
  overflow: hidden; background: var(--bg-tertiary);
  position: relative; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.profile-banner-preview:hover { background: var(--bg-hover); }
.profile-banner-preview img {
  width: 100%; height: 100%; object-fit: cover;
}
.banner-placeholder {
  color: var(--text-muted); font-size: 13px; font-weight: 500;
  z-index: 1;
}

.profile-avatar-row {
  display: flex; align-items: flex-end; gap: 12px;
  margin-top: -28px; padding: 0 16px;
  position: relative; z-index: 2;
}

.profile-avatar-preview {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--bg-blurple); display: flex; align-items: center; justify-content: center;
  border: 4px solid var(--bg-secondary); flex-shrink: 0;
  overflow: hidden; position: relative; cursor: pointer;
}
.profile-avatar-preview:hover { border-color: var(--bg-blurple); }
.profile-avatar-preview img {
  width: 100%; height: 100%; object-fit: cover;
}
.profile-avatar-preview .avatar-letter {
  font-size: 28px; font-weight: 700; color: white; text-transform: uppercase;
}

.profile-visual-buttons {
  display: flex; flex-direction: column; gap: 4px; flex: 1; padding-bottom: 4px;
  min-width: 0; overflow: hidden;
}
.profile-visual-cooldown {
  font-size: 11px; color: var(--text-muted);
  min-height: 14px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-visual-cooldown.active {
  color: var(--bg-idle);
}
.profile-visual-reset-row {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}

/* ─── TEXTAREA ──────────────────────────────────────────────────── */
.form-group textarea {
  width: 100%; padding: 10px 12px; background: var(--bg-input);
  border: 1px solid transparent; border-radius: var(--radius);
  color: var(--text-primary); font-family: var(--font); font-size: 14px;
  transition: border-color .15s, background .15s;
  resize: vertical; min-height: 60px;
}
.form-group textarea:focus {
  outline: none; border-color: var(--bg-blurple); background: #2b2d31;
}
.form-group textarea::placeholder { color: var(--text-muted); }

/* ─── USER PROFILE MODAL ────────────────────────────────────────── */
.profile-modal {
  background: var(--bg-secondary); border-radius: var(--radius-lg);
  width: 90%; max-width: 520px;
  box-shadow: 0 16px 32px rgba(0,0,0,.4);
  animation: modalIn .2s ease;
  overflow: hidden;
}
.profile-modal-banner {
  height: 120px; background: var(--bg-tertiary);
  position: relative; overflow: hidden;
}
.profile-modal-banner img {
  width: 100%; height: 100%; object-fit: cover;
}
.profile-modal-body {
  display: flex; align-items: flex-end; gap: 16px;
  padding: 0 20px;
  margin-top: -36px; position: relative; z-index: 1;
}
.profile-modal-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--bg-blurple); display: flex; align-items: center; justify-content: center;
  border: 4px solid var(--bg-secondary); flex-shrink: 0;
  overflow: hidden; position: relative;
}
.profile-modal-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.profile-modal-avatar .avatar-letter {
  font-size: 28px; font-weight: 700; color: white; text-transform: uppercase;
}
.profile-modal-info {
  flex: 1; min-width: 0; padding-bottom: 12px;
}
.pm-displayname {
  font-size: 18px; font-weight: 700; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-username {
  font-size: 13px; color: var(--text-muted); margin-top: 2px;
}
.pm-role-badge {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 1px 6px; border-radius: 3px; background: var(--bg-blurple); color: white;
  margin-top: 4px;
}
.profile-modal .icon-btn {
  padding-bottom: 12px;
  position: absolute; top: 8px; right: 8px; z-index: 5;
  background: var(--bg-secondary); border-radius: 50%;
  width: 32px; height: 32px;
}
.profile-modal-details {
  padding: 16px 20px 20px;
}
.pm-section { margin-bottom: 12px; }
.pm-section:last-child { margin-bottom: 0; }
.pm-section h4 {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 4px; letter-spacing: .04em;
}
.pm-bio {
  font-size: 14px; color: var(--text-secondary); line-height: 1.5;
  word-wrap: break-word; white-space: pre-wrap;
}
.pm-bio.empty { color: var(--text-muted); font-style: italic; }
.pm-joined {
  font-size: 13px; color: var(--text-secondary);
}

/* ─── MENTION AUTOCOMPLETE ───────────────────────────────────────── */
.mention-popup {
  position: absolute; bottom: 100%; left: 0; right: 0;
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 8px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.3);
  z-index: 50; max-height: 260px; overflow-y: auto;
}
.mention-header {
  padding: 8px 12px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  letter-spacing: .04em;
}
.mention-list { padding: 4px 0; }
.mention-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; cursor: pointer;
  transition: background .1s;
}
.mention-item:hover { background: var(--bg-hover); }
.mention-item .mention-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: white; flex-shrink: 0;
  overflow: hidden;
}
.mention-item .mention-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.mention-item .mention-name {
  font-size: 13px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mention-item .mention-username {
  font-size: 11px; color: var(--text-muted);
}
.mention-item .mention-role {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  padding: 1px 4px; border-radius: 2px; margin-left: 4px;
}
.mention-item .mention-role.admin { background: var(--bg-blurple); color: white; }

/* ─── MENTION IN MESSAGE ─────────────────────────────────────────── */
.mention-tag {
  background: rgba(88,101,242,.15); color: var(--bg-blurple);
  padding: 0 3px; border-radius: 3px; font-weight: 500;
  cursor: pointer;
}
.mention-tag:hover { background: rgba(88,101,242,.3); }

/* ─── IMAGE CROPPER MODAL ────────────────────────────────────────── */
.crop-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 300;
}
.crop-modal {
  background: var(--bg-secondary); border-radius: var(--radius-lg);
  width: 92%; max-width: 760px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  animation: modalIn .2s ease;
  display: flex; flex-direction: column;
}
.crop-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.crop-modal-header h3 { font-size: 16px; font-weight: 600; }
.crop-modal-body {
  padding: 20px; display: flex; flex-direction: column; align-items: center;
  gap: 16px;
}
.crop-canvas-wrapper {
  position: relative; display: inline-block;
  line-height: 0;
}
.crop-canvas-wrapper canvas {
  border-radius: var(--radius); max-width: 100%;
  cursor: grab; display: block;
  background: #000;
}
.crop-canvas-wrapper canvas.dragging {
  cursor: grabbing;
}
.crop-canvas-wrapper.round canvas {
  border-radius: 50%;
}
.crop-zoom-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  width: 100%; max-width: 560px;
  background: var(--bg-tertiary);
  padding: 10px 14px;
  border-radius: var(--radius);
}
.crop-zoom-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-secondary);
}
.crop-zoom-btn {
  width: 32px; height: 32px; padding: 0;
  background: var(--bg-hover); border-radius: 6px;
}
.crop-zoom-btn:hover { background: var(--bg-active); }
.crop-zoom-value {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  min-width: 52px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.crop-slider {
  flex: 1; min-width: 120px; max-width: 320px; accent-color: var(--bg-blurple);
  height: 6px; border-radius: 3px;
  -webkit-appearance: none; appearance: none;
  background: var(--bg-input);
  outline: none;
}
.crop-actions {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.attach-crop {
  background: none; border: none; color: var(--text-secondary);
  cursor: pointer; padding: 2px; border-radius: 4px; display: inline-flex;
  transition: color .15s, background .15s;
}
.attach-crop:hover { color: var(--bg-blurple); background: var(--bg-hover); }
.crop-slider {
  width: 100%; accent-color: var(--bg-blurple);
  height: 6px; border-radius: 3px;
  -webkit-appearance: none; appearance: none;
  background: var(--bg-tertiary);
  outline: none;
}
.crop-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-blurple); cursor: pointer;
  border: 2px solid white;
}
.crop-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-blurple); cursor: pointer;
  border: 2px solid white;
}
.crop-hint {
  font-size: 12px; color: var(--text-muted); text-align: center;
}
.crop-footer {
  display: flex; gap: 8px; padding: 0 20px 20px;
}
.crop-footer .btn { flex: 1; }

/* Fixed aspect ratio indicator */
.crop-aspect-badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--bg-blurple); color: white;
  font-size: 10px; font-weight: 700; padding: 2px 6px;
  border-radius: 3px; z-index: 2;
}

/* ─── VOICE: speaking indicator ──────────────────────────────── */
.voice-user { position: relative; transition: box-shadow .15s, transform .15s; }
.voice-user.speaking {
  box-shadow: 0 0 0 2px #23a559;
  transform: scale(1.05);
}
.voice-user.speaking::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid #23a559;
  opacity: .55; animation: voicePulse 1.2s ease-out infinite;
}
@keyframes voicePulse {
  0%   { transform: scale(.9); opacity: .7; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ─── MEMBERS: hide / show toggle ────────────────────────────── */
.member-toggle {
  margin-left: 6px; flex: 0 0 auto;
  opacity: 0; transition: opacity .15s;
  width: 28px; height: 28px; padding: 0;
}
.member-item:hover .member-toggle, .member-item:focus-within .member-toggle { opacity: 1; }
.member-item .hidden-tag {
  display: inline-block; margin-left: 6px; padding: 0 5px;
  background: var(--bg-hover); color: var(--text-muted);
  border-radius: 3px; font-size: 10px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase;
}
.member-item .self-tag {
  display: inline-block; margin-left: 6px; padding: 0 5px;
  background: rgba(88,101,242,.2); color: var(--bg-blurple);
  border-radius: 3px; font-size: 10px; font-weight: 600;
}
.member-item.member-hidden {
  opacity: .5;
}
.member-item.member-hidden .member-avatar {
  filter: grayscale(.6);
}
.member-group-header.hidden-count {
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 8px; margin-top: 8px;
}

/* ─── DATA DISCLOSURE (registration) ────────────────────────── */
.data-disclosure {
  margin-top: 16px; padding: 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.data-disclosure h3 {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-secondary);
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.data-disclosure h3 svg { flex-shrink: 0; }
.data-disclosure .dd-badge {
  display: inline-block; font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px;
  margin-left: 4px; vertical-align: middle;
  text-transform: uppercase;
}
.data-disclosure .dd-badge.now {
  background: rgba(35,165,89,.2); color: var(--bg-green);
  border: 1px solid rgba(35,165,89,.3);
}
.data-disclosure .dd-badge.future {
  background: rgba(240,178,50,.15); color: var(--bg-idle);
  border: 1px solid rgba(240,178,50,.25);
}
.data-disclosure ul {
  list-style: none; padding: 0; margin: 0 0 10px 0;
}
.data-disclosure ul li {
  font-size: 12px; color: var(--text-secondary);
  padding: 3px 0; line-height: 1.4;
  display: flex; align-items: flex-start; gap: 6px;
}
.data-disclosure ul li::before {
  content: '•'; color: var(--text-muted); flex-shrink: 0; margin-top: 1px;
}
.data-disclosure .dd-guarantee {
  font-size: 11px; color: var(--text-muted);
  line-height: 1.5; padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ─── TOGGLE SWITCH ─────────────────────────────────────────────── */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px; background: var(--bg-tertiary);
  border-radius: var(--radius); gap: 16px;
}
.toggle-info { flex: 1; }
.toggle-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.toggle-hint { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.toggle {
  position: relative; width: 44px; height: 24px; flex-shrink: 0;
  cursor: pointer; display: inline-block;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute; inset: 0; background: var(--bg-input);
  border-radius: 12px; transition: background .2s;
}
.toggle-slider::before {
  content: ''; position: absolute; width: 18px; height: 18px;
  border-radius: 50%; background: white; top: 3px; left: 3px;
  transition: transform .2s;
}
.toggle input:checked + .toggle-slider { background: var(--bg-blurple); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ─── AUDIO ATTACHMENT ─────────────────────────────────────────── */
.msg-attachment.audio-att {
  min-width: 260px; max-width: 340px;
}
.msg-attachment audio {
  width: 100%; display: block; border-radius: var(--radius);
}

/* Clickable image in chat */
.clickable-img {
  cursor: zoom-in;
  transition: opacity .15s;
}
.msg-attachment.img-att:hover .clickable-img {
  opacity: .92;
}

/* ─── IMAGE LIGHTBOX ───────────────────────────────────────────── */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 1000; /* above modals (100/300) & toasts (200) */
  background: rgba(0, 0, 0, .92);
  display: flex; align-items: center; justify-content: center;
  animation: lightboxFadeIn .18s ease;
}
@keyframes lightboxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lightbox-container {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  max-width: 94vw; max-height: 94vh;
}
/* Stage = the scrollable viewport for the image. margin:auto centering on
   the child keeps small images centred AND lets large/zoomed images be
   scrolled to every edge (avoids the classic flex-centering clip). */
.lightbox-stage {
  max-width: 90vw; max-height: 72vh;
  overflow: auto;
  display: flex;
  border-radius: var(--radius);
}
.lightbox-img {
  margin: auto;
  display: block;
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
}
.lightbox-error {
  padding: 48px 32px; color: var(--text-muted); font-size: 14px;
  text-align: center;
}
.lightbox-zoom-row {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-secondary);
  padding: 6px 12px; border-radius: var(--radius);
}
.lightbox-zoom-btn {
  width: 30px; height: 30px; padding: 0;
  font-size: 16px; font-weight: 700;
}
.lightbox-zoom-value {
  font-size: 12px; color: var(--text-secondary);
  min-width: 46px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.lightbox-footer {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-secondary);
  padding: 8px 16px; border-radius: var(--radius);
}
.lightbox-name {
  font-size: 13px; color: var(--text-secondary);
  max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lightbox-close {
  position: absolute; top: 20px; right: 24px;
  width: 40px; height: 40px; padding: 0;
  background: rgba(255,255,255,.1); border: none; border-radius: 50%;
  color: white; font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  z-index: 1;
}
.lightbox-close:hover {
  background: rgba(255,255,255,.22);
}

/* ─── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .app { grid-template-columns: var(--sidebar-w) 1fr; }
  .members-sidebar { display: none; }
}
@media (max-width: 640px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: 280px; z-index: 50;
    transform: translateX(-100%);
    transition: transform .2s;
  }
  .sidebar.open { transform: translateX(0); }
}