/* ===== ASTRA — Discord-style UI ===== */

:root {
  /* Dark theme (default) */
  --bg-darkest: #1a1b1e;
  --bg-dark: #1e1f22;
  --bg-sidebar: #2b2d31;
  --bg-chat: #313338;
  --bg-chat-alt: #383a40;
  --bg-hover: #35373c;
  --bg-active: #404249;
  --bg-modal: #2b2d31;
  --bg-input: #383a40;
  --bg-floating: #111214;

  --accent: #5865f2;
  --accent-hover: #4752c4;
  --accent-light: #7984f5;

  --text-primary: #f2f3f5;
  --text-secondary: #b5bac1;
  --text-muted: #949ba4;
  --text-faint: #80848e;
  --text-link: #00a8fc;

  --green: #23a55a;
  --green-hover: #1c8e4a;
  --red: #f23f43;
  --red-hover: #d63b3e;
  --yellow: #f0b232;
  --orange: #f97316;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;

  --font: 'Satoshi', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-family: 'Satoshi', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size: 15px;
}

/* ===== MULTIPLE THEMES ===== */
[data-theme="amoled"] {
  --bg-darkest: #000000;
  --bg-dark: #0a0a0a;
  --bg-sidebar: #0d0d0d;
  --bg-chat: #000000;
  --bg-chat-alt: #111111;
  --bg-hover: #1a1a1a;
  --bg-active: #222222;
  --bg-modal: #0d0d0d;
  --bg-input: #1a1a1a;
  --bg-floating: #000000;
  --accent: #5865f2;
  --accent-hover: #4752c4;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --text-muted: #707070;
  --text-faint: #505050;
}

[data-theme="midnight"] {
  --bg-darkest: #0a0e27;
  --bg-dark: #0d1129;
  --bg-sidebar: #111638;
  --bg-chat: #161b3d;
  --bg-chat-alt: #1c2150;
  --bg-hover: #1e2455;
  --bg-active: #252b62;
  --bg-modal: #111638;
  --bg-input: #1c2150;
  --bg-floating: #0a0e27;
  --accent: #5b7cfa;
  --accent-hover: #4a6ae0;
  --text-primary: #e8eaf6;
  --text-secondary: #b8bde6;
  --text-muted: #8088c4;
  --text-faint: #5a6098;
}

[data-theme="forest"] {
  --bg-darkest: #0f1a14;
  --bg-dark: #122019;
  --bg-sidebar: #1a2b22;
  --bg-chat: #1e3329;
  --bg-chat-alt: #244033;
  --bg-hover: #2a4738;
  --bg-active: #305543;
  --bg-modal: #1a2b22;
  --bg-input: #244033;
  --bg-floating: #0f1a14;
  --accent: #3ba55c;
  --accent-hover: #2e8a49;
  --text-primary: #e0f0e8;
  --text-secondary: #aacbb5;
  --text-muted: #7a9a88;
  --text-faint: #5a7a68;
}

[data-theme="solarized"] {
  --bg-darkest: #073642;
  --bg-dark: #073642;
  --bg-sidebar: #0d4754;
  --bg-chat: #002b36;
  --bg-chat-alt: #073642;
  --bg-hover: #0e4a58;
  --bg-active: #155867;
  --bg-modal: #0d4754;
  --bg-input: #073642;
  --bg-floating: #002b36;
  --accent: #b58900;
  --accent-hover: #9a7400;
  --text-primary: #fdf6e3;
  --text-secondary: #c9c0a8;
  --text-muted: #8a8265;
  --text-faint: #6a6250;
}

[data-theme="light"] {
  --bg-darkest: #d9dce4;
  --bg-dark: #e3e5e8;
  --bg-sidebar: #f2f3f5;
  --bg-chat: #ffffff;
  --bg-chat-alt: #ebedef;
  --bg-hover: #e0e1e5;
  --bg-active: #d4d7dc;
  --bg-modal: #ffffff;
  --bg-input: #ebedef;
  --bg-floating: #ffffff;

  --text-primary: #060607;
  --text-secondary: #4e5058;
  --text-muted: #6d6f78;
  --text-faint: #949ba4;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100vh;
  overflow: hidden;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size);
  background: var(--bg-chat);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Icon sizing */
.icon-16 { width: 16px; height: 16px; }
.icon-18 { width: 18px; height: 18px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
.icon-28 { width: 28px; height: 28px; }
svg { display: block; }

/* ===== AUTH SCREEN ===== */
#auth-screen {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #5865f2 0%, #4752c4 50%, #3c45a8 100%);
}

.auth-box {
  background: var(--bg-dark);
  padding: 32px;
  border-radius: var(--radius-lg);
  width: 440px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}

.auth-logo-mark {
  color: var(--accent-light);
}

.logo-text {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}

.subtitle {
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
  margin-bottom: 24px;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-darkest);
  padding: 4px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.auth-tab {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  font-family: var(--font);
  transition: all 0.15s ease;
}

.auth-tab.active {
  background: var(--accent);
  color: #fff;
}

.auth-tab:not(.active):hover {
  color: var(--text-secondary);
}

form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

input, textarea, select {
  padding: 10px 12px;
  background: var(--bg-darkest);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 15px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.15s ease;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
}

input::placeholder, textarea::placeholder {
  color: var(--text-faint);
}

.btn-primary {
  padding: 12px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.15s ease;
}

.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  padding: 10px 16px;
  background: #4e5058;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.15s ease;
}

.btn-secondary:hover { background: #6d6f78; }

.btn-ghost {
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: var(--font);
}

.btn-ghost:hover { color: var(--text-primary); }

.btn-danger {
  padding: 10px 16px;
  background: var(--red);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
}

.btn-danger:hover { background: var(--red-hover); }

.error-text {
  color: var(--red);
  font-size: 13px;
  min-height: 18px;
}

/* ===== APP LAYOUT ===== */
#app {
  display: flex;
  height: 100vh;
}

/* ===== SERVER RAIL ===== */
.server-rail {
  width: 72px;
  background: var(--bg-dark);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.server-rail::-webkit-scrollbar { display: none; }

.server-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-chat);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-primary);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.server-icon:hover {
  border-radius: var(--radius-xl);
  background: var(--accent);
  color: #fff;
}

.server-icon.active {
  border-radius: var(--radius-xl);
  background: var(--accent);
  color: #fff;
}

.server-icon.home {
  background: var(--accent);
  color: #fff;
}

.server-icon.home:hover {
  background: var(--green);
}

.server-icon.home.active {
  background: var(--green);
}

/* Active indicator pill */
.server-icon.active::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 40px;
  background: #fff;
  border-radius: 0 4px 4px 0;
}

.server-icon:hover::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: #fff;
  border-radius: 0 4px 4px 0;
}

.server-icon.add-server {
  background: var(--bg-chat);
  color: var(--green);
}

.server-icon.add-server:hover {
  background: var(--green);
  color: #fff;
}

.rail-separator {
  width: 32px;
  height: 2px;
  background: var(--bg-active);
  border-radius: 1px;
  flex-shrink: 0;
}

.community-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* ===== SIDEBAR ===== */
.sidebar {
  width: 240px;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sidebar-header {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  box-shadow: 0 1px 0 rgba(4,4,5,0.2);
  flex-shrink: 0;
  cursor: pointer;
}

.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.sidebar-content::-webkit-scrollbar { width: 8px; }
.sidebar-content::-webkit-scrollbar-thumb { background: var(--bg-active); border-radius: 4px; }
.sidebar-content::-webkit-scrollbar-track { background: transparent; }

.sidebar-section {
  display: flex;
  align-items: center;
  padding: 0 8px 6px;
  margin-top: 8px;
}

.sidebar-section:first-child { margin-top: 0; }

.section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  flex: 1;
}

.section-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.section-toggle:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.item-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.list-item {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.1s ease;
  position: relative;
}

.list-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.list-item.active {
  background: var(--bg-active);
  color: #fff;
}

.list-item .list-item-icon {
  flex-shrink: 0;
  color: var(--text-muted);
}

.list-item.active .list-item-icon {
  color: var(--text-primary);
}

.list-item .list-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* ===== USER PANEL ===== */
.user-panel {
  height: 52px;
  background: #232428;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
  flex-shrink: 0;
}

[data-theme="light"] .user-panel {
  background: #eaeaea;
}

.user-panel-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  cursor: pointer;
  padding: 4px 4px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
  min-width: 0;
}

.user-panel-info:hover {
  background: var(--bg-hover);
}

.user-meta {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-status {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.online { background: var(--green); }

.user-panel-actions {
  display: flex;
  gap: 2px;
}

.panel-icon-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.panel-icon-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* ===== AVATARS ===== */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--accent);
}

.avatar-32 { width: 32px; height: 32px; }
.avatar-40 { width: 40px; height: 40px; }
.avatar-64 { width: 64px; height: 64px; }
.avatar-80 { width: 80px; height: 80px; }
.avatar-96 { width: 96px; height: 96px; }

/* ===== MAIN CHAT ===== */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-chat);
  min-width: 0;
}

.chat-header {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 0 rgba(4,4,5,0.2);
  flex-shrink: 0;
}

.chat-header-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-prefix-icon {
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

.chat-header-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-icon-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.header-icon-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.header-divider {
  width: 1px;
  height: 24px;
  background: var(--bg-active);
  margin: 0 4px;
}

/* ===== MESSAGES ===== */
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0 0;
  display: flex;
  flex-direction: column;
}

.messages::-webkit-scrollbar { width: 8px; }
.messages::-webkit-scrollbar-thumb { background: var(--bg-active); border-radius: 4px; }
.messages::-webkit-scrollbar-track { background: transparent; }
.messages::-webkit-scrollbar-thumb:hover { background: #1e1f22; }

.message-group {
  display: flex;
  gap: 16px;
  padding: 2px 16px;
  margin-top: 17px;
  position: relative;
  transition: background 0.1s ease;
}

.message-group:first-child {
  margin-top: 0;
}

.message-group:hover {
  background: rgba(0,0,0,0.04);
}

[data-theme="light"] .message-group:hover {
  background: rgba(0,0,0,0.03);
}

.message-group .avatar {
  width: 40px;
  height: 40px;
  margin-top: 2px;
}

.message-group-content {
  flex: 1;
  min-width: 0;
}

.message-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 1px;
}

.message-author {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 15px;
}

.message-time {
  font-size: 12px;
  color: var(--text-muted);
}

.message-line {
  font-size: var(--font-size);
  line-height: 1.375;
  padding: 1px 0;
  position: relative;
  color: var(--text-secondary);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.message-line:hover .msg-actions {
  opacity: 1;
}

.message-text {
  color: var(--text-secondary);
}

[data-theme="light"] .message-text {
  color: var(--text-secondary);
}

.message-media {
  max-width: 400px;
  max-height: 300px;
  border-radius: var(--radius-md);
  margin-top: 4px;
  display: block;
  cursor: pointer;
}

.message-media.video {
  max-width: 480px;
  max-height: 320px;
}

.msg-actions {
  position: absolute;
  right: 0;
  top: -12px;
  background: var(--bg-dark);
  border: 1px solid var(--bg-active);
  border-radius: var(--radius-md);
  padding: 2px;
  display: flex;
  gap: 1px;
  opacity: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: opacity 0.1s ease;
  z-index: 10;
}

.msg-actions button {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease;
}

.msg-actions button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ===== INPUT AREA ===== */
.input-area {
  padding: 0 16px 24px;
  flex-shrink: 0;
}

.input-wrapper {
  background: var(--bg-input);
  border-radius: var(--radius-md);
  padding: 4px 4px 4px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
}

.upload-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.upload-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.input-wrapper input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 15px;
  padding: 10px 0;
  outline: none;
  font-family: var(--font);
}

.input-wrapper input::placeholder {
  color: var(--text-muted);
}

.input-emoji-btns {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.input-icon-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.input-icon-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.send-btn {
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.send-btn:hover { background: var(--accent-hover); }

/* ===== MODALS ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn 0.15s ease;
}

.modal-overlay.show {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-card {
  background: var(--bg-modal);
  border-radius: var(--radius-md);
  width: 440px;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.modal-body {
  padding: 0 20px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.modal-footer {
  padding: 16px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrap input {
  width: 100%;
  padding-left: 36px;
}

.search-input-wrap .search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-results {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-item {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.1s ease;
}

.search-item:hover {
  background: var(--bg-hover);
}

.search-item .search-item-name {
  font-weight: 600;
  color: var(--text-primary);
}

.search-item .search-item-username {
  color: var(--text-muted);
  font-size: 13px;
}

.selected-members {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}

.member-tag {
  background: var(--accent);
  color: #fff;
  padding: 4px 8px 4px 10px;
  border-radius: 20px;
  font-size: 13px;
  display: flex;
  gap: 6px;
  align-items: center;
}

.member-tag .remove-member {
  cursor: pointer;
  display: flex;
  align-items: center;
  opacity: 0.7;
}

.member-tag .remove-member:hover {
  opacity: 1;
}

/* ===== SETTINGS PAGE ===== */
.settings-page {
  position: fixed;
  inset: 0;
  background: var(--bg-darkest);
  display: none;
  z-index: 200;
  animation: fadeIn 0.15s ease;
}

.settings-page.show {
  display: flex;
}

.settings-sidebar {
  width: 218px;
  background: var(--bg-dark);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.settings-sidebar-header {
  height: 48px;
  padding: 0 12px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 1px 0 rgba(4,4,5,0.2);
  flex-shrink: 0;
}

.settings-close-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.settings-close-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.settings-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-nav-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-nav-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 0 8px 4px;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.1s ease;
}

.settings-nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.settings-nav-item.active {
  background: var(--accent);
  color: #fff;
}

.settings-nav-item.danger {
  color: var(--red);
}

.settings-nav-item.danger:hover {
  background: var(--red);
  color: #fff;
}

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 48px 40px 120px;
  max-width: 740px;
}

.settings-content::-webkit-scrollbar { width: 8px; }
.settings-content::-webkit-scrollbar-thumb { background: var(--bg-active); border-radius: 4px; }

.settings-tab {
  display: none;
}

.settings-tab.active {
  display: block;
}

.settings-h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.settings-section {
  margin-bottom: 20px;
}

.settings-section h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.settings-input, .settings-textarea, .settings-select {
  width: 100%;
  max-width: 400px;
  background: var(--bg-dark);
  border: 1px solid var(--bg-active);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text-primary);
  font-size: 15px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.15s ease;
}

.settings-input:focus, .settings-textarea:focus, .settings-select:focus {
  border-color: var(--accent);
}

.settings-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Account card */
.account-card {
  background: var(--bg-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 20px;
}

.account-banner {
  height: 100px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
}

.account-body {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 0 16px 16px;
  margin-top: -40px;
  position: relative;
  z-index: 1;
}

.account-body .avatar-80 {
  border: 6px solid var(--bg-dark);
}

.account-info {
  flex: 1;
  padding-bottom: 12px;
  padding-top: 48px;
}

.account-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.account-username {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.3;
}

.account-email {
  font-size: 13px;
  color: var(--text-faint);
  margin-top: 4px;
  line-height: 1.3;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--bg-active);
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.info-value {
  font-size: 14px;
  color: var(--text-muted);
}

/* Avatar upload */
.avatar-upload-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar-upload-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-upload-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
}

/* Toggle switch */
.toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bg-active);
}

.toggle-row:last-child {
  border-bottom: none;
}

.toggle-info {
  flex: 1;
}

.toggle-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.toggle-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--bg-active);
  border-radius: 24px;
  transition: 0.2s;
}

.slider::before {
  position: absolute;
  content: '';
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}

.switch input:checked + .slider {
  background: var(--green);
}

.switch input:checked + .slider::before {
  transform: translateX(20px);
}

/* Theme options */
.theme-options {
  display: flex;
  gap: 12px;
}

.theme-option {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  transition: border-color 0.15s ease;
  overflow: visible;
}

.theme-option.active {
  border-color: var(--accent);
}

.theme-preview {
  width: 120px;
  height: 80px;
  border-radius: var(--radius-sm);
}

.dark-preview {
  background: linear-gradient(135deg, #1e1f22 0%, #313338 100%);
}

.light-preview {
  background: linear-gradient(135deg, #f2f3f5 0%, #ffffff 100%);
}

.theme-option span {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  padding: 2px 0;
}

/* Radio rows */
.radio-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--bg-active);
}

.radio-row:last-child {
  border-bottom: none;
}

.radio-row input[type="radio"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--text-muted);
  border-radius: 50%;
  background: transparent;
  position: relative;
  flex-shrink: 0;
}

.radio-row input[type="radio"]:checked {
  border-color: var(--accent);
  background: transparent;
}

.radio-row input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
}

.radio-info {
  flex: 1;
}

.radio-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.radio-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Slider */
.slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.range-slider {
  flex: 1;
  max-width: 300px;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg-active);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
}

.range-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--accent);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.slider-value {
  font-size: 14px;
  color: var(--text-muted);
  min-width: 48px;
}

/* Device test */
.device-test-area {
  margin-top: 12px;
  min-height: 0;
}

.device-test-area video {
  max-width: 320px;
  border-radius: var(--radius-md);
  margin-top: 8px;
}

.device-test-area .test-mic-bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 40px;
  margin-top: 8px;
}

.device-test-area .test-mic-bars .bar {
  width: 4px;
  background: var(--green);
  border-radius: 2px;
  min-height: 4px;
}

/* ===== CALL UI ===== */
.call-screen {
  position: fixed;
  inset: 0;
  background: #202225;
  display: none;
  z-index: 300;
  align-items: center;
  justify-content: center;
}

.call-voice-avatar-wrap .avatar-96 {
  background: var(--accent);
}

.call-screen.show {
  display: flex;
}

.call-stage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.call-video-area {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#remote-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

#remote-video.active {
  display: block;
}

/* Voice call stage (no video) */
.call-voice-stage {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.call-voice-stage.show {
  display: flex;
}

.call-voice-avatar-wrap {
  position: relative;
}

.call-voice-pulse {
  position: absolute;
  inset: -8px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  animation: pulseRing 2s ease-out infinite;
  opacity: 0;
}

@keyframes pulseRing {
  0% { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.15); opacity: 0; }
}

.call-voice-name {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

#local-video {
  position: absolute;
  bottom: 100px;
  right: 24px;
  width: 200px;
  height: 150px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.15);
  background: #1a1a1a;
  display: none;
  z-index: 5;
}

#local-video.active {
  display: block;
}

/* Call overlay info */
.call-overlay-info {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
}

.call-stage-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.call-stage-status {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

.call-timer {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* Call controls */
.call-controls-bar {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
  background: rgba(0,0,0,0.6);
  padding: 8px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

.call-ctrl-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #2f3136;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.call-ctrl-btn:hover {
  background: #3f4147;
}

.call-ctrl-btn.active-off {
  background: var(--red);
  color: #fff;
}

.call-end-btn {
  background: var(--red);
}

.call-end-btn:hover {
  background: var(--red-hover);
}

/* Incoming call card */
.call-incoming-card {
  background: var(--bg-dark);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  width: 360px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.call-incoming-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

.call-incoming-avatar-wrap .avatar-64 {
  border: 3px solid var(--accent);
  background: var(--accent);
}

.call-ring-pulse {
  position: absolute;
  inset: -6px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  animation: pulseRing 1.5s ease-out infinite;
  opacity: 0;
}

.call-incoming-card h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.call-incoming-card p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.call-incoming-actions {
  display: flex;
  gap: 24px;
  justify-content: center;
}

.call-accept-btn, .call-decline-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.15s ease;
}

.call-accept-btn {
  background: var(--green);
}

.call-accept-btn:hover {
  background: var(--green-hover);
  transform: scale(1.05);
}

.call-decline-btn {
  background: var(--red);
}

.call-decline-btn:hover {
  background: var(--red-hover);
  transform: scale(1.05);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: #202225;
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb:hover {
  background: #18191c;
}

/* ===== UTILITY ===== */
.hidden { display: none !important; }

/* Empty state for messages */
.messages-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  gap: 8px;
}

.messages-empty .empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg-chat-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: var(--text-muted);
}

.messages-empty h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.messages-empty p {
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  max-width: 360px;
}

/* Community Search */
.community-search-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.btn-sm {
  padding: 6px 16px;
  font-size: 13px;
  border-radius: 4px;
}

.btn-danger {
  background: var(--red);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.btn-danger:hover { background: var(--red-hover); }

/* ===== THEME PREVIEWS ===== */
.theme-preview {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  border: 2px solid transparent;
  margin-bottom: 4px;
}
.dark-preview { background: #1e1f22; }
.light-preview { background: #f2f3f5; }
.amoled-preview { background: #000000; border: 2px solid #333; }
.midnight-preview { background: #0d1129; }
.forest-preview { background: #1a2b22; }
.solarized-preview { background: #002b36; }

/* ===== CHAR COUNTER ===== */
.char-counter {
  font-size: 11px;
  color: var(--text-faint);
  text-align: right;
  padding: 2px 4px 0;
}
.char-counter.warning { color: var(--yellow); }

/* ===== BIO WORD COUNT ===== */
.word-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 8px;
}
.word-count.over-limit { color: var(--red); }

/* ===== BANNER ===== */
.banner-preview {
  width: 100%;
  height: 120px;
  border-radius: 8px;
  background: var(--accent);
  background-size: cover;
  background-position: center;
  margin-bottom: 8px;
}
.banner-upload-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#settings-account-banner {
  background-size: cover;
  background-position: center;
}

/* ===== FRIENDS VIEW ===== */
#friends-view .list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}
#friends-view .list-item:hover { background: var(--bg-hover); }

.section-toggle-right {
  margin-left: auto !important;
  position: relative;
}

.request-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ===== FRIENDS/SETTINGS LISTS ===== */
.friends-settings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.friend-settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--bg-chat-alt);
  border-radius: 8px;
}

/* ===== DM AVATAR FIX ===== */
.dm-avatar {
  flex-shrink: 0;
  object-fit: cover;
  background: var(--accent);
}

/* ===== STATUS DOTS ===== */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.online { background: var(--green); }
.status-dot.offline { background: var(--text-faint); }
.status-dot.idle { background: var(--yellow); }
.status-dot.dnd { background: var(--red); }

/* ===== PROFILE POPUP ===== */
.profile-popup {
  position: fixed;
  width: 300px;
  background: var(--bg-modal);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 1000;
  overflow: hidden;
  border: 1px solid var(--bg-hover);
}
.popup-banner {
  width: 100%;
  height: 90px;
  background: var(--accent);
  background-size: cover;
  background-position: center;
}
.popup-body {
  padding: 12px 16px 16px;
  position: relative;
}
.popup-avatar {
  margin-top: -32px;
  border: 4px solid var(--bg-modal);
  border-radius: 50%;
}
.popup-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 4px;
}
.popup-username {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.popup-bio {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  padding-top: 8px;
  border-top: 1px solid var(--bg-hover);
  margin-bottom: 12px;
}
.popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.popup-expand {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.4);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-expand:hover { background: rgba(0,0,0,0.6); }

/* ===== FULLSCREEN PROFILE ===== */
.fullscreen-profile {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.85);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fullscreen-profile-card {
  width: 90%;
  max-width: 480px;
  background: var(--bg-modal);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
.fs-profile-banner {
  width: 100%;
  height: 200px;
  background: var(--accent);
  background-size: cover;
  background-position: center;
}
.fs-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.fs-close-btn:hover { background: rgba(0,0,0,0.7); }
.fs-profile-body {
  padding: 0 24px 24px;
  position: relative;
}
.fs-profile-avatar {
  margin-top: -60px;
  border: 6px solid var(--bg-modal);
  border-radius: 50%;
  width: 128px;
  height: 128px;
  object-fit: cover;
}
.fs-profile-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 8px;
}
.fs-profile-username {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.fs-profile-bio-section h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--bg-hover);
}
.fs-profile-bio-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
}
.fs-profile-meta {
  margin-top: 16px;
}

/* ===== TOAST ===== */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: var(--bg-floating);
  color: var(--text-primary);
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  font-size: 14px;
  max-width: 360px;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
  border-left: 4px solid var(--accent);
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-error { border-left-color: var(--red); }
.toast-info { border-left-color: var(--accent); }

/* ===== SETTINGS DESC ===== */
.settings-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
  line-height: 1.4;
}

/* ===== AVATAR SIZES ===== */
.avatar-64 { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.avatar-96 { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.avatar-128 { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; }

/* ===== MESSAGE AVATAR CLICKABLE ===== */
.message-author { cursor: pointer; }
.message-author:hover { text-decoration: underline; }
.message-group .avatar-40 { cursor: pointer; }

/* ===== SETTINGS INPUT OVERRIDE ===== */
.settings-input { margin-bottom: 0; }
.settings-textarea { margin-bottom: 0; resize: vertical; }

/* ===== ENHANCED ROUNDED + ANIMATIONS ===== */
.auth-box, .modal-box, .settings-page, .input-wrapper, .list-item, .server-icon,
.btn-primary, .btn-secondary, .btn-ghost, .settings-input, .settings-textarea,
.avatar, .message, .toast, .plugin-card, .search-result-item {
  border-radius: var(--radius-md) !important;
  transition: all 0.2s ease, transform 0.15s ease;
}

.server-icon { border-radius: 50% !important; }
.server-icon:hover { border-radius: var(--radius-lg) !important; transform: scale(1.05); }
.list-item:hover, .search-result-item:hover { transform: translateX(2px); background: var(--bg-hover); }
.btn-primary:hover, .btn-secondary:hover { transform: translateY(-1px); }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.message { animation: fadeIn 0.2s ease; }
.list-item { animation: slideIn 0.15s ease; }
.toast { animation: fadeIn 0.25s ease; }

/* Input area lower + media preview */
.input-area {
  padding-bottom: 20px !important;
  margin-bottom: 4px;
}
.media-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--bg-sidebar);
  border-top: 1px solid var(--bg-hover);
}
.media-preview-inner { position: relative; display: inline-block; }
.media-preview-remove {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: #fff; border: none; cursor: pointer;
  font-size: 14px; line-height: 1;
}
.media-preview-hint { color: var(--text-muted); font-size: 12px; }

/* Friends tabs */
.friends-tabs {
  display: flex; gap: 4px; padding: 8px 10px; flex-wrap: wrap;
  border-bottom: 1px solid var(--bg-hover);
}
.friends-tab {
  background: transparent; border: none; color: var(--text-muted);
  padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 12px; font-weight: 600; transition: all 0.15s;
}
.friends-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.friends-tab.active { background: var(--accent); color: #fff; }

/* Global search */
.global-search-wrap {
  position: relative; flex: 1; max-width: 320px; margin: 0 12px;
}
.global-search-input {
  width: 100%; background: var(--bg-dark); border: none;
  border-radius: var(--radius-md); padding: 8px 12px 8px 32px;
  color: var(--text-primary); font-size: 13px;
}
.search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.global-search-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
  background: var(--bg-modal); border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4); max-height: 320px; overflow-y: auto;
  margin-top: 4px;
}
.search-section-label {
  padding: 8px 12px 4px; font-size: 11px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase;
}
.search-result-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer; font-size: 13px;
}
.search-result-item:hover { background: var(--bg-hover); }

.search-input {
  width: 100%; background: var(--bg-dark); border: none;
  border-radius: var(--radius-sm); padding: 6px 10px;
  color: var(--text-primary); font-size: 12px;
}

/* Giphy */
.giphy-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  max-height: 360px; overflow-y: auto;
}
.giphy-item {
  width: 100%; height: 100px; object-fit: cover;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: transform 0.15s;
}
.giphy-item:hover { transform: scale(1.05); }

/* Plugins */
.plugin-list { display: flex; flex-direction: column; gap: 10px; }
.plugin-card {
  background: var(--bg-input); padding: 12px 14px;
  border-radius: var(--radius-md);
}
.plugin-card p { margin: 4px 0 8px; color: var(--text-secondary); font-size: 13px; }
.plugin-card small { color: var(--text-muted); }

/* Message report button area */
.message-actions { opacity: 0; transition: opacity 0.15s; }
.message:hover .message-actions { opacity: 1; }

.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: var(--radius-sm); }

/* ===== NEW THEMES ===== */
[data-theme="rose"] {
  --bg-darkest: #1a0f14; --bg-dark: #1f1218; --bg-sidebar: #2a1820;
  --bg-chat: #301c26; --bg-chat-alt: #3a2430; --bg-hover: #3d2633;
  --bg-active: #4a2e3c; --bg-modal: #2a1820; --bg-input: #3a2430;
  --bg-floating: #140a0e; --accent: #f472b6; --accent-hover: #ec4899;
  --text-primary: #fce7f3; --text-secondary: #f9a8d4; --text-muted: #db2777;
  --text-faint: #9d174d;
}
[data-theme="ocean"] {
  --bg-darkest: #0a1628; --bg-dark: #0c1a30; --bg-sidebar: #102040;
  --bg-chat: #122848; --bg-chat-alt: #183058; --bg-hover: #1a3460;
  --bg-active: #204070; --bg-modal: #102040; --bg-input: #183058;
  --bg-floating: #081220; --accent: #38bdf8; --accent-hover: #0ea5e9;
  --text-primary: #e0f2fe; --text-secondary: #7dd3fc; --text-muted: #38bdf8;
  --text-faint: #0284c7;
}
[data-theme="sunset"] {
  --bg-darkest: #1a1008; --bg-dark: #1f140a; --bg-sidebar: #2a1a0e;
  --bg-chat: #302014; --bg-chat-alt: #3a281a; --bg-hover: #403020;
  --bg-active: #4a3828; --bg-modal: #2a1a0e; --bg-input: #3a281a;
  --bg-floating: #140c06; --accent: #f97316; --accent-hover: #ea580c;
  --text-primary: #fff7ed; --text-secondary: #fdba74; --text-muted: #fb923c;
  --text-faint: #c2410c;
}
[data-theme="lavender"] {
  --bg-darkest: #12101a; --bg-dark: #16131f; --bg-sidebar: #1e1a2e;
  --bg-chat: #241f38; --bg-chat-alt: #2c2744; --bg-hover: #322e50;
  --bg-active: #3a365c; --bg-modal: #1e1a2e; --bg-input: #2c2744;
  --bg-floating: #0e0c14; --accent: #a78bfa; --accent-hover: #8b5cf6;
  --text-primary: #f5f3ff; --text-secondary: #c4b5fd; --text-muted: #a78bfa;
  --text-faint: #7c3aed;
}
[data-theme="nord"] {
  --bg-darkest: #1b1f27; --bg-dark: #2e3440; --bg-sidebar: #3b4252;
  --bg-chat: #434c5e; --bg-chat-alt: #4c566a; --bg-hover: #4c566a;
  --bg-active: #5e6a7e; --bg-modal: #3b4252; --bg-input: #434c5e;
  --bg-floating: #161a22; --accent: #88c0d0; --accent-hover: #81a1c1;
  --text-primary: #eceff4; --text-secondary: #d8dee9; --text-muted: #a3b1c2;
  --text-faint: #7b88a1;
}
[data-theme="cyberpunk"] {
  --bg-darkest: #0a0010; --bg-dark: #0f0020; --bg-sidebar: #1a0030;
  --bg-chat: #1f0040; --bg-chat-alt: #2a0050; --bg-hover: #300060;
  --bg-active: #3a0070; --bg-modal: #1a0030; --bg-input: #2a0050;
  --bg-floating: #050008; --accent: #ff00ff; --accent-hover: #d000d0;
  --text-primary: #00ffff; --text-secondary: #ff00aa; --text-muted: #aa00ff;
  --text-faint: #7700bb;
}

.rose-preview { background: linear-gradient(135deg, #1a0f14, #f472b6); }
.ocean-preview { background: linear-gradient(135deg, #0a1628, #38bdf8); }
.sunset-preview { background: linear-gradient(135deg, #1a1008, #f97316); }
.lavender-preview { background: linear-gradient(135deg, #12101a, #a78bfa); }
.nord-preview { background: linear-gradient(135deg, #2e3440, #88c0d0); }
.cyberpunk-preview { background: linear-gradient(135deg, #0a0010, #ff00ff 50%, #00ffff); }

.accent-swatch {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: transform 0.15s, border-color 0.15s;
}
.accent-swatch:hover { transform: scale(1.15); border-color: #fff; }

/* GIF avatars */
.avatar[src$=".gif"], img.avatar { image-rendering: auto; }

/* Pending DM badge */
.pending-dm-badge {
  font-size: 10px; background: var(--yellow); color: #000;
  padding: 2px 6px; border-radius: 8px; margin-left: 6px; font-weight: 700;
}

/* Typing indicator */
.typing-indicator {
  padding: 4px 16px; font-size: 12px; color: var(--text-muted);
  font-style: italic; min-height: 20px;
}

/* Message reactions */
.message-reactions { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.reaction-chip {
  background: var(--bg-hover); border-radius: 12px; padding: 2px 8px;
  font-size: 12px; cursor: pointer; border: 1px solid transparent;
}
.reaction-chip:hover, .reaction-chip.mine { border-color: var(--accent); background: var(--bg-active); }

/* Group call grid + screen share */
.group-call-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  padding: 12px;
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
}
.group-call-tile {
  position: relative;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16/10;
}
.group-call-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.group-call-tile .tile-label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 8px;
}
#screen-btn.active-off {
  background: var(--accent);
  color: #fff;
}