/* === VOIDCHAT v9 вЂ" VoidChat === */

/* === CSS VARIABLES (VoidChat dark theme) === */
:root {
  --bg-primary: #313338;
  --bg-secondary: #2b2d31;
  --bg-secondary-alt: #1e1f22;
  --bg-tertiary: #111214;
  --bg-floating: #111214;
  --bg-mod-hover: rgba(79,84,92,0.16);
  --bg-mod-active: rgba(79,84,92,0.24);
  --bg-mod-selected: rgba(79,84,92,0.32);
  --text-normal: #dbdee1;
  --text-muted: #949ba4;
  --text-link: #00a8fc;
  --header-primary: #f2f3f5;
  --header-secondary: #b5bac1;
  --brand-500: #5865f2;
  --brand-560: #4752c4;
  --green-360: #23a559;
  --red-400: #f23f43;
  --yellow-300: #f0b232;
  --channel-icon: #80848e;
  --interactive-normal: #b5bac1;
  --interactive-hover: #dbdee1;
  --interactive-active: #fff;
  --scrollbar-thin-thumb: #1a1b1e;
  --scrollbar-thin-track: #2b2d31;
  --input-background: #383a40;
  --background-accent: #5865f2;
}

/* Mobile shell v1: one navigation layer for browser and Android WebView. */
.mobile-shell, .mobile-games-player { display: none; }
body.vrv-mobile-client { --mobile-shell-nav: calc(66px + env(safe-area-inset-bottom)); }
body.vrv-mobile-client #app {
  display: block !important;
  width: 100%; height: 100dvh; min-width: 0; min-height: 0;
  overflow: hidden; background: #090908;
}
body.vrv-mobile-client #app > .server-list,
body.vrv-mobile-client #app > .home-view,
body.vrv-mobile-client #app > .channel-sidebar,
body.vrv-mobile-client #app > .members-sidebar,
body.vrv-mobile-client .legacy-mobile-view,
body.vrv-mobile-client #gaming-workspace { display: none !important; }
body.vrv-mobile-client #app:not(.mobile-content-open) > .chat-area { display: none !important; }
body.vrv-mobile-client .mobile-shell {
  position: fixed; inset: 0 0 var(--mobile-shell-nav);
  z-index: 410; display: flex; flex-direction: column;
  min-width: 0; min-height: 0; overflow: hidden;
  padding-top: env(safe-area-inset-top);
  color: var(--text-normal);
  background: radial-gradient(circle at 90% 0, rgba(214,166,64,.14), transparent 35%), linear-gradient(180deg,#11100d,#080808 72%);
}
body.vrv-mobile-client .mobile-shell-header {
  min-height: 64px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 13px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(10,10,9,.9);
}
.mobile-shell-brand { min-width: 0; display: flex; align-items: center; gap: 9px; }
.mobile-shell-brand > span { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; border-radius: 12px; color: #171108; background: linear-gradient(135deg,#f0ca6b,#a97321); font-size: 20px; }
.mobile-shell-brand strong, .mobile-shell-brand small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-shell-brand strong { color: #fff4d8; font-size: 15px; }
.mobile-shell-brand small { margin-top: 2px; color: var(--text-muted); font-size: 10px; }
.mobile-mode-switch { display: flex; gap: 5px; padding: 4px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(255,255,255,.035); }
.mobile-mode-switch button { width: 40px; height: 36px; border: 0; border-radius: 9px; color: var(--text-muted); background: transparent; font-size: 18px; cursor: pointer; }
.mobile-mode-switch button.active { color: #171108; background: linear-gradient(135deg,#f0ca6b,#c28b31); box-shadow: 0 5px 14px rgba(214,166,64,.18); }
body.vrv-mobile-client .mobile-messenger-view,
body.vrv-mobile-client .mobile-game-view {
  position: static !important; inset: auto !important; z-index: auto !important;
  display: none !important; flex: 1 1 auto; min-width: 0; min-height: 0;
  width: 100%; overflow-y: auto; padding: 16px 14px 28px;
  background: transparent !important;
}
body.vrv-mobile-client .mobile-messenger-view.open { display: flex !important; flex-direction: column; }
body.vrv-mobile-client .mobile-game-view.open { display: block !important; }
.mobile-game-content { min-height: 100%; }
.mobile-shell-page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.mobile-shell-page-head h1 { margin: 4px 0 0; color: #fff; font-size: 27px; line-height: 1.08; }
.mobile-shell-eyebrow { color: #d6a640; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
body.vrv-mobile-client .mobile-messenger-search { margin: 0 0 12px; flex: 0 0 auto; }
body.vrv-mobile-client .mobile-messenger-content { overflow: visible; flex: 0 0 auto; padding-bottom: 12px; }
.mobile-game-hero { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid rgba(214,166,64,.26); border-radius: 16px; background: linear-gradient(135deg,rgba(111,74,24,.28),rgba(28,25,20,.75)); }
.mobile-game-hero > span { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(214,166,64,.16); font-size: 25px; }
.mobile-game-hero strong, .mobile-game-hero small { display: block; }
.mobile-game-hero strong { color: #fff4d8; font-size: 15px; }
.mobile-game-hero small { margin-top: 4px; color: var(--text-muted); font-size: 11px; line-height: 1.4; }
.mobile-shell-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 11px 0 17px; }
.mobile-shell-actions button, .mobile-shell-primary, .mobile-shell-secondary { min-height: 46px; border-radius: 12px; padding: 9px 11px; font: inherit; font-weight: 800; cursor: pointer; }
.mobile-shell-actions button, .mobile-shell-secondary { border: 1px solid rgba(214,166,64,.26); color: #fff4d8; background: rgba(111,74,24,.16); }
.mobile-shell-primary { width: 100%; margin-top: 12px; border: 0; color: #171108; background: linear-gradient(135deg,#efc768,#bd8228); }
.mobile-shell-secondary { width: 100%; margin-top: 9px; }
.mobile-shell-section { margin: 18px 0; }
.mobile-shell-section h2 { margin: 0 0 8px; color: var(--text-muted); font-size: 11px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.mobile-shell-list { display: grid; gap: 7px; }
.mobile-shell-row { width: 100%; min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; color: var(--text-normal); background: rgba(23,22,19,.82); text-align: left; cursor: pointer; }
.mobile-shell-row.active { border-color: rgba(214,166,64,.62); background: rgba(111,74,24,.23); }
.mobile-shell-row > span:nth-child(2) { min-width: 0; flex: 1; }
.mobile-shell-row strong, .mobile-shell-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-shell-row strong { color: var(--header-primary); font-size: 14px; }
.mobile-shell-row small { margin-top: 4px; color: var(--text-muted); font-size: 11px; }
.mobile-shell-row > b { color: #d6a640; font-size: 20px; font-weight: 500; }
.mobile-server-icon, .mobile-shell-row-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 12px; background: #354fc0; color: #fff; font-weight: 800; font-size: 18px; }
.mobile-room-voice .mobile-shell-row-icon { background: #237d55; }
.mobile-room-video .mobile-shell-row-icon { background: #7b3fa2; }
.mobile-shell-empty { margin: 12px 0; padding: 23px 15px; border: 1px dashed rgba(255,255,255,.14); border-radius: 14px; color: var(--text-muted); text-align: center; font-size: 13px; line-height: 1.5; }
.mobile-shell-description { margin: -4px 0 14px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.mobile-novaland-card { width: 100%; min-height: 78px; display: grid; grid-template-columns: 53px minmax(0,1fr) auto; align-items: center; gap: 10px; margin-top: 14px; padding: 11px; border: 1px solid rgba(54,229,212,.42); border-radius: 16px; color: #fff; background: linear-gradient(135deg,rgba(14,51,65,.96),rgba(44,21,58,.92)); text-align: left; cursor: pointer; }
.mobile-novaland-card > span:first-child { width: 53px; height: 53px; display: grid; place-items: center; border-radius: 13px; background: radial-gradient(circle,#3ee4d4,#15213c 68%); font-size: 26px; }
.mobile-novaland-card strong, .mobile-novaland-card small { display: block; }
.mobile-novaland-card strong { letter-spacing: .07em; }
.mobile-novaland-card small { margin-top: 4px; color: #aeb9c9; font-size: 11px; line-height: 1.35; }
.mobile-novaland-card > b { color: #54e4d4; font-size: 11px; white-space: nowrap; }
.mobile-novaland-card.large { min-height: 96px; }
.mobile-active-server, .mobile-profile-card { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid rgba(214,166,64,.24); border-radius: 15px; background: rgba(111,74,24,.14); }
.mobile-active-server > span:nth-child(2), .mobile-profile-card > span:nth-child(2) { min-width: 0; flex: 1; }
.mobile-active-server strong, .mobile-active-server small, .mobile-profile-card strong, .mobile-profile-card small { display: block; }
.mobile-active-server strong, .mobile-profile-card strong { color: #fff4d8; }
.mobile-active-server small, .mobile-profile-card small { margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.mobile-active-server button { border: 0; border-radius: 9px; padding: 8px 9px; color: #fff4d8; background: rgba(214,166,64,.16); font-weight: 700; }
.mobile-active-voice { margin: 0 0 15px; padding: 12px; border: 1px solid rgba(35,165,89,.46); border-radius: 15px; background: rgba(25,91,57,.23); }
.mobile-active-voice > div { display: flex; align-items: center; gap: 9px; }
.mobile-active-voice > div + div { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 10px; }
.mobile-active-voice strong, .mobile-active-voice small { display: block; }
.mobile-active-voice small { margin-top: 2px; color: #86caa5; font-size: 11px; }
.mobile-active-voice button { min-height: 40px; border: 0; border-radius: 10px; padding: 8px 10px; color: #fff; background: rgba(35,165,89,.5); font: inherit; font-weight: 700; }
.mobile-active-voice button[data-action="leave"] { background: rgba(218,55,60,.65); }
.mobile-profile-avatar { width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; border-radius: 17px; color: #fff; font-size: 22px; font-weight: 800; }
body.vrv-mobile-client .mobile-bottom-nav {
  display: grid !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 420;
  height: var(--mobile-shell-nav); grid-template-columns: repeat(4,1fr); gap: 3px;
  padding: 5px 7px env(safe-area-inset-bottom); border-top: 1px solid rgba(255,255,255,.09); background: rgba(10,10,9,.98);
}
body.vrv-mobile-client .mobile-bottom-nav button { min-width: 0; min-height: 52px; border: 0; border-radius: 10px; color: var(--text-muted); background: transparent; font: inherit; }
body.vrv-mobile-client .mobile-bottom-nav button span, body.vrv-mobile-client .mobile-bottom-nav button small { display: block; }
body.vrv-mobile-client .mobile-bottom-nav button span { font-size: 19px; }
body.vrv-mobile-client .mobile-bottom-nav button small { margin-top: 2px; font-size: 9px; }
body.vrv-mobile-client .mobile-bottom-nav button.active { color: #171108; background: linear-gradient(135deg,#efc768,#bd8228); }
body.vrv-mobile-client #app.mobile-content-open > .mobile-shell,
body.vrv-mobile-client #app.mobile-content-open > .mobile-bottom-nav { display: none !important; }
body.vrv-mobile-client #app.mobile-content-open > .chat-area {
  display: flex !important; position: fixed; inset: 0; z-index: 430;
  width: 100%; height: 100dvh; min-width: 0; min-height: 0; margin: 0;
  padding-top: env(safe-area-inset-top); background: var(--bg-primary);
}
body.vrv-mobile-client #app.mobile-content-open .chat-header { min-height: 54px; height: 54px; padding: 0 8px; }
body.vrv-mobile-client #app.mobile-content-open .mobile-menu-btn { display: grid !important; place-items: center; width: 38px; height: 38px; font-size: 0; }
body.vrv-mobile-client #app.mobile-content-open .mobile-menu-btn::before { content: '←'; font-size: 22px; }
body.vrv-mobile-client #app.mobile-content-open .app-mode-switch-header,
body.vrv-mobile-client #app.mobile-content-open .header-icons,
body.vrv-mobile-client #app.mobile-content-open .games-strip { display: none !important; }
body.vrv-mobile-client #app.mobile-content-open .chat-area .messages { padding-bottom: 8px; }
body.vrv-mobile-client .mobile-games-player {
  position: fixed; inset: 0; z-index: 900; display: none; flex-direction: column; min-width: 0; min-height: 0;
  padding-top: env(safe-area-inset-top); background: #080b18;
}
body.vrv-mobile-client #app.mobile-games-open > .mobile-games-player { display: flex !important; }
body.vrv-mobile-client .mobile-games-player[hidden] { display: none !important; }
.mobile-games-player header { min-height: 52px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 7px 10px; border-bottom: 1px solid rgba(143,167,255,.18); color: #d5dcf4; background: #0b0f20; }
.mobile-games-player header button { min-height: 38px; border: 1px solid rgba(103,245,226,.3); border-radius: 9px; padding: 7px 10px; color: #67f5e2; background: rgba(103,245,226,.06); font: inherit; font-weight: 700; }
.mobile-games-player header strong { text-align: center; letter-spacing: .08em; }
.mobile-games-player header span { color: #7c86a7; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.mobile-games-player iframe { width: 100%; min-width: 0; min-height: 0; flex: 1 1 auto; border: 0; background: #080b18; }

@media (orientation: landscape) and (max-width: 1000px) and (max-height: 520px) {
  body.vrv-mobile-client .mobile-games-player { padding-top: 0; }
  body.vrv-mobile-client .mobile-games-player header {
    position: absolute; z-index: 905; top: max(5px, env(safe-area-inset-top)); left: max(6px, env(safe-area-inset-left));
    display: block; min-height: 0; padding: 0; border: 0; background: transparent; pointer-events: none;
  }
  body.vrv-mobile-client .mobile-games-player header button {
    width: 36px; height: 36px; min-height: 0; overflow: hidden; padding: 0; border-radius: 50%;
    color: transparent; background: rgba(7,11,28,.78); font-size: 0; pointer-events: auto;
  }
  body.vrv-mobile-client .mobile-games-player header button::before { content: '←'; color: #67f5e2; font-size: 18px; }
  body.vrv-mobile-client .mobile-games-player header strong,
  body.vrv-mobile-client .mobile-games-player header span { display: none; }
  body.vrv-mobile-client .mobile-games-player iframe { height: 100dvh; flex-basis: 100%; }
}
body.vrv-mobile-client .mode-picker { z-index: 1500; align-items: flex-end; padding: 12px; }
body.vrv-mobile-client .mode-picker-card { max-height: calc(100dvh - 24px); overflow-y: auto; padding: 23px 16px max(23px,env(safe-area-inset-bottom)); border-radius: 21px; }

@media (max-width: 380px) {
  .mobile-shell-actions { grid-template-columns: 1fr; }
  .mobile-shell-page-head h1 { font-size: 24px; }
  .mobile-novaland-card { grid-template-columns: 47px minmax(0,1fr); }
  .mobile-novaland-card > b { grid-column: 2; }
}

/* Telegram-like desktop conversations and forwarding */
.group-category { display:flex; align-items:center; gap:5px; }
.group-category .sidebar-add-btn { margin-left:auto; width:22px; height:22px; border:0; border-radius:6px; color:var(--text-muted); background:transparent; cursor:pointer; font-size:18px; line-height:18px; }
.group-category .sidebar-add-btn:hover { color:var(--header-primary); background:var(--bg-mod-hover); }
.group-item .hash { color:var(--brand-360, #e8b75b); }
.group-empty-hint { padding:5px 16px 9px; font-size:11px; opacity:.68; }
.msg-forwarded { display:flex; gap:8px; margin:3px 0 8px; padding:6px 9px; border-left:3px solid var(--brand-500, #e8b75b); background:rgba(232,183,91,.08); border-radius:0 7px 7px 0; color:var(--text-muted); font-size:12px; }
.msg-forwarded strong { color:var(--brand-360, #e8b75b); font-size:11px; }
.msg-forwarded-icon { font-size:17px; color:var(--brand-360, #e8b75b); }
.forward-dialog { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(5,7,12,.72); backdrop-filter:blur(5px); }
.forward-dialog-panel { width:min(520px, 100%); max-height:min(650px, 90vh); overflow:auto; padding:18px; border:1px solid var(--vrv-border, rgba(255,255,255,.12)); border-radius:16px; background:var(--background-secondary, #17191e); box-shadow:0 18px 70px rgba(0,0,0,.5); }
.forward-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--header-primary); font-size:18px; }
.forward-close { width:30px; height:30px; border:0; border-radius:8px; background:transparent; color:var(--text-muted); font-size:22px; cursor:pointer; }
.forward-close:hover { background:var(--bg-mod-hover); color:var(--header-primary); }
.forward-preview { margin:14px 0; padding:10px 12px; border-left:3px solid var(--brand-500, #e8b75b); border-radius:0 8px 8px 0; background:rgba(255,255,255,.04); color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.forward-targets { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.forward-target { display:flex; align-items:center; gap:9px; min-width:0; padding:10px 12px; border:1px solid var(--vrv-border, rgba(255,255,255,.1)); border-radius:10px; background:rgba(255,255,255,.03); color:var(--header-primary); cursor:pointer; text-align:left; }
.forward-target:hover { border-color:var(--brand-500, #e8b75b); background:rgba(232,183,91,.1); }
.forward-target-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--brand-500, #e8b75b); color:#111; flex:0 0 auto; }
.forward-target span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.forward-empty { grid-column:1 / -1; padding:16px; color:var(--text-muted); text-align:center; }
.attachment-preview-item video { width:100%; height:100%; max-height:90px; object-fit:cover; border-radius:6px; }
@media (max-width:600px) { .forward-targets { grid-template-columns:1fr; } }

/* === RESET & BASE === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: var(--bg-primary); color: var(--text-normal);
  min-height: 100vh; min-height: 100dvh;
  overflow-x: hidden; overflow-y: auto;
  font-size: 16px; line-height: 1.375rem;
  -webkit-font-smoothing: antialiased;
}

/* ZernoAI brand watermark: visible on login and inside the application without
   competing with controls, messages, or voice-room panels. */
.brand-watermark {
  position: fixed;
  z-index: 50;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at center, rgba(7, 9, 16, 0.12) 0%, rgba(7, 9, 16, 0.72) 78%),
    url('brand-watermark.png?v=1');
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(78vw, 94vh) auto;
  opacity: 0.13;
  filter: brightness(0.9) saturate(0.84) contrast(1.04);
  mix-blend-mode: screen;
}

/* The game has its own visual language; keep the chat brand mark out of the arena. */
body[data-vrv-mode="game"] .brand-watermark { display: none; }

#login-screen, #register-screen, #app {
  position: relative;
  z-index: 1;
}
::selection { background: rgba(88,101,242,0.4); color: #fff; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thin-thumb); border-radius: 4px; }
::-webkit-scrollbar-corner { background: transparent; }

/* === LOGIN / REGISTRATION SCREEN === */
#login-screen, #register-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100dvh;
  height: auto;
  overflow-y: auto;
  padding: clamp(24px, 6vh, 64px) 16px max(24px, env(safe-area-inset-bottom));
  background: linear-gradient(135deg, #0d0d12 0%, #1a1030 40%, #0d0d12 100%);
  position: relative;
}
#login-screen::before, #register-screen::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(88,101,242,0.08), transparent 60%);
  z-index: 0;
}
#login-screen > .login-box, #register-screen > .login-box {
  position: relative; z-index: 1;
  margin: auto;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  background: rgba(15,15,25,0.75) !important;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 40px rgba(88,101,242,0.1);
}
#login-screen .login-logo, #register-screen .login-logo {
  box-shadow: 0 0 20px rgba(88,101,242,0.4);
}
.login-box {
  background: var(--bg-primary); border-radius: 4px; padding: 32px;
  width: 480px; max-width: 95vw; text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.login-logo { font-size: 56px; margin-bottom: 8px; line-height: 1; display: inline-block; width: 80px; height: 80px; background: var(--brand-500); border-radius: 50%; text-align: center; line-height: 80px; }
.login-box h1 { font-size: 24px; color: var(--header-primary); font-weight: 600; margin-bottom: 4px; }
.login-subtitle { color: var(--text-muted); font-size: 16px; margin-bottom: 20px; line-height: 1.25; }
.login-field { text-align: left; margin-bottom: 16px; }
.login-field label {
  display: block; font-size: 12px; font-weight: 700; color: var(--header-secondary);
  text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.02em;
}
.login-field input[type="text"], .login-field input[type="password"], .login-field input[type="email"] {
  width: 100%; background: var(--bg-tertiary); border: none; border-radius: 3px;
  padding: 10px 12px; font-size: 16px; color: var(--text-normal); outline: none;
  height: 40px; transition: box-shadow 0.15s;
}
.login-field input:focus { box-shadow: 0 0 0 2px var(--brand-500); }
.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 16px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.login-remember input { width: 16px; height: 16px; accent-color: var(--brand-500); }
.color-picker-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.registration-mode-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 18px; }
.registration-mode-option { min-height:64px; padding:9px 7px; border:1px solid rgba(201,162,77,.28); border-radius:10px; background:rgba(255,255,255,.035); color:var(--text-muted); cursor:pointer; font:600 12px/1.25 inherit; transition:.18s ease; }
.registration-mode-option small { color:inherit; font-size:10px; font-weight:400; }
.registration-mode-option:hover, .registration-mode-option.active { border-color:#c9a24d; background:rgba(201,162,77,.16); color:#f6e8c4; box-shadow:0 0 0 1px rgba(201,162,77,.12), 0 8px 20px rgba(0,0,0,.18); }
.registration-mode-option:focus-visible { outline:2px solid #c9a24d; outline-offset:2px; }
.color-opt {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 3px solid transparent; transition: all 0.15s;
}
.color-opt:hover { transform: scale(1.2); }
.color-opt.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--brand-500); transform: scale(1.1); }
#login-btn, .login-btn-wide {
  width: 100%; background: var(--brand-500); border: none; color: #fff; padding: 12px;
  border-radius: 3px; font-size: 16px; font-weight: 500; cursor: pointer;
  transition: background 0.17s; line-height: 1.375;
}
#login-btn:hover, .login-btn-wide:hover { background: var(--brand-560); }
.login-btn-wide:disabled { opacity: 0.5; cursor: not-allowed; }
.login-error { color: var(--red-400); font-size: 14px; margin-top: 8px; min-height: 18px; }
.login-success { color: var(--green-360); font-size: 14px; font-weight: 600; margin-top: 8px; padding: 8px; background: rgba(35,165,89,0.1); border-radius: 3px; }
.login-btn-secondary {
  width: 100%; background: transparent; border: none; color: var(--brand-500);
  padding: 10px; font-size: 14px; cursor: pointer; margin-top: 4px;
  transition: color 0.15s; text-decoration: underline;
}
.login-btn-secondary:hover { color: var(--brand-560); }

/* === CUSTOM DIALOGS === */
.dialog-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
}
.dialog-box {
  background: var(--bg-primary); border-radius: 4px; padding: 16px;
  min-width: 340px; max-width: 440px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.dialog-title { font-size: 16px; font-weight: 600; color: var(--header-primary); margin-bottom: 12px; }
.dialog-input {
  width: 100%; background: var(--bg-tertiary); border: none; border-radius: 3px;
  padding: 10px 12px; font-size: 16px; color: var(--text-normal); outline: none;
  margin-bottom: 16px; height: 40px;
}
.dialog-input:focus { box-shadow: 0 0 0 2px var(--brand-500); }
.dialog-buttons { display: flex; gap: 8px; justify-content: flex-end; }
.dialog-btn {
  padding: 8px 20px; border-radius: 3px; border: none; font-size: 14px;
  font-weight: 500; cursor: pointer; transition: background 0.17s; min-width: 60px;
  height: 38px;
}
.dialog-cancel { background: transparent; color: var(--text-muted); }
.dialog-cancel:hover { color: var(--text-normal); text-decoration: underline; }
.dialog-ok { background: var(--brand-500); color: #fff; }
.dialog-ok:hover { background: var(--brand-560); }

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

/* === PERSONAL HOME === */
.home-view {
  flex: 1; min-width: 0; overflow-y: auto; display: none;
  flex-direction: column; align-items: center; padding: 8vh 7vw 48px;
  background: radial-gradient(circle at 50% 0%, rgba(88,101,242,.18), transparent 42%), var(--bg-primary);
}
#app.home-mode .home-view { display: flex; }
#app.home-mode .channel-sidebar,
#app.home-mode .chat-area,
#app.home-mode .members-sidebar { display: none !important; }
.home-hero { width: min(860px, 100%); display: flex; align-items: center; gap: 22px; margin-bottom: 34px; }
.home-brand-mark { width: 70px; height: 70px; flex: 0 0 70px; border-radius: 22px; display: grid; place-items: center; font-size: 34px; background: linear-gradient(135deg, #5865f2, #7b68ee); box-shadow: 0 12px 32px rgba(88,101,242,.28); }
.home-eyebrow { color: #aeb7ff; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.home-hero h1 { margin: 5px 0 8px; color: var(--header-primary); font-size: clamp(30px, 4vw, 44px); }
.home-hero p { margin: 0; max-width: 650px; color: var(--text-muted); font-size: 16px; line-height: 1.55; }
.home-actions { width: min(860px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-action-card { min-height: 150px; padding: 22px; border: 1px solid var(--background-modifier-accent, rgba(255,255,255,.08)); border-radius: 14px; color: var(--text-normal); background: rgba(32,34,37,.78); text-align: left; display: flex; flex-direction: column; gap: 18px; cursor: pointer; transition: transform .16s, border-color .16s, background .16s; }
.home-action-card:hover { transform: translateY(-3px); border-color: rgba(88,101,242,.8); background: rgba(42,45,54,.96); }
.home-action-icon { font-size: 28px; }
.home-action-card strong, .home-action-card small { display: block; }
.home-action-card strong { color: var(--header-primary); font-size: 15px; margin-bottom: 7px; }
.home-action-card small { color: var(--text-muted); font-size: 13px; line-height: 1.4; }
.home-communities { width: min(860px, 100%); margin-top: 34px; }
.home-section-title { color: var(--header-primary); font-weight: 700; font-size: 17px; margin-bottom: 12px; }
.home-servers { display: flex; flex-wrap: wrap; gap: 10px; }
.home-server-card { display: flex; align-items: center; gap: 10px; min-width: 220px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(32,34,37,.65); color: var(--text-normal); cursor: pointer; text-align: left; }
.home-server-card:hover { background: var(--bg-mod-hover); border-color: rgba(88,101,242,.7); }
.home-server-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--brand-500); font-size: 18px; }
.home-server-name { font-weight: 600; }
.home-empty { color: var(--text-muted); padding: 17px 0; }
.home-note { width: min(860px, 100%); margin-top: 28px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.home-friends-summary { width: min(860px, 100%); margin-top: 26px; padding: 16px 18px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(32,34,37,.55); color: var(--text-muted); }
.home-friends-summary strong { color: var(--header-primary); }
.home-friends-summary button { margin-left: auto; border: 0; border-radius: 7px; padding: 8px 13px; background: var(--brand-500); color: #fff; cursor: pointer; font-weight: 600; }
.home-friends-summary button:hover { background: var(--brand-560); }
.home-mode-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.home-mode-switch button {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  padding: 8px 12px;
  color: var(--text-muted);
  background: rgba(20,22,28,.62);
  cursor: pointer;
  transition: border-color .16s, background .16s, color .16s, transform .16s;
}
.home-mode-switch button:hover { transform: translateY(-1px); border-color: rgba(88,101,242,.8); color: var(--header-primary); }
.home-mode-switch button.active {
  border-color: color-mix(in srgb, var(--brand-500) 70%, #fff 10%);
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 75%, transparent), rgba(38,42,58,.9));
  box-shadow: 0 8px 20px rgba(88,101,242,.18), inset 0 1px rgba(255,255,255,.12);
}
.home-mode-current { color: var(--text-muted); font-size: 12px; margin-left: 4px; }
.home-mode-current strong { color: var(--header-primary); }

/* Always-visible mode control. The selected state uses separate contrast
   colors so the royal/gold theme never turns into gold text on a gold button. */
.app-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--header-secondary) 24%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-tertiary) 88%, #000 12%);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 5px 16px rgba(0,0,0,.18);
}
.app-mode-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 31px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--interactive-normal);
  background: transparent;
  cursor: pointer;
  font: 700 12px/1.1 inherit;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.app-mode-switch button:hover { color: var(--header-primary); background: rgba(255,255,255,.08); transform: translateY(-1px); }
.app-mode-switch button.active[data-vrv-mode="messages"] {
  color: #fff;
  background: #2f4eb6;
  border-color: #7590ff;
  box-shadow: 0 4px 12px rgba(47,78,182,.35), inset 0 1px rgba(255,255,255,.18);
}
.app-mode-switch button.active[data-vrv-mode="game"] {
  color: #fff8e8;
  background: #49351d;
  border-color: #e5bd65;
  box-shadow: 0 4px 12px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.16);
}
.app-mode-switch-header { flex: 0 0 auto; margin-left: auto; }
.app-mode-switch-mobile-home { width: 100%; margin: 0 0 18px; }
.app-mode-switch-mobile-home button { flex: 1 1 0; }

.messages-mode-panel {
  width: min(860px, 100%);
  margin-top: 24px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--brand-500) 24%, rgba(255,255,255,.08));
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(32,34,37,.88), rgba(25,27,34,.7));
  box-shadow: 0 16px 34px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.045);
}
.messages-mode-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.messages-mode-panel-head .home-section-title { display: block; margin-bottom: 4px; }
.messages-mode-panel-head small { display: block; color: var(--text-muted); font-size: 12px; }
.messages-mode-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.messages-mode-secondary { border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 8px 12px; color: var(--text-normal); background: rgba(20,22,28,.72); cursor: pointer; font-weight: 600; white-space: nowrap; }
.messages-mode-secondary:hover { border-color: color-mix(in srgb, var(--brand-500) 65%, #fff 8%); color: var(--header-primary); background: rgba(88,101,242,.14); }
.messages-mode-add { border: 0; border-radius: 8px; padding: 8px 12px; color: #fff; background: var(--brand-500); cursor: pointer; font-weight: 600; white-space: nowrap; }
.messages-mode-add:hover { background: var(--brand-560); }
.messages-mode-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.messages-mode-column { min-width: 0; padding: 12px; border: 1px solid rgba(255,255,255,.065); border-radius: 12px; background: rgba(15,16,20,.34); }
.messages-mode-column h3 { margin: 0 0 9px; color: var(--header-primary); font-size: 13px; text-transform: uppercase; letter-spacing: .07em; }
.messages-mode-contact { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px; margin: 5px 0; border: 1px solid transparent; border-radius: 10px; color: var(--text-normal); background: transparent; text-align: left; cursor: pointer; }
.messages-mode-contact:hover { border-color: color-mix(in srgb, var(--brand-500) 42%, transparent); background: rgba(88,101,242,.12); }
.messages-mode-avatar { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; }
.messages-mode-avatar.group { background: linear-gradient(135deg, #5865f2, #9b59b6); }
.messages-mode-contact-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.messages-mode-contact-copy strong { color: var(--header-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-mode-contact-copy small { color: var(--text-muted); font-size: 12px; }
.messages-mode-contact-action { margin-left: auto; color: var(--text-muted); font-size: 18px; }
.messages-mode-call-action { margin-left: 8px; padding: 3px 5px; border-radius: 6px; color: var(--green-360); cursor: pointer; font-size: 16px; }
.messages-mode-call-action:hover { background: rgba(35,165,89,.16); color: #fff; }
.messages-mode-video-action { color: #e8b75b; }
.messages-mode-video-action:hover { background: rgba(232,183,91,.16); color: #fff; }
.member-video-call-btn { color: #e8b75b; }
.messages-mode-empty { padding: 10px 2px; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
body[data-vrv-mode="messages"] .home-communities,
body[data-vrv-mode="messages"] .home-note,
body[data-vrv-mode="messages"] .home-actions,
body[data-vrv-mode="messages"] .home-friends-summary { display: none; }
body[data-vrv-mode="messages"] .home-hero { width: min(720px, 100%); margin-bottom: 12px; }
body[data-vrv-mode="messages"] .home-brand-mark,
body[data-vrv-mode="messages"] .home-eyebrow,
body[data-vrv-mode="messages"] .home-hero h1,
body[data-vrv-mode="messages"] .home-hero p,
body[data-vrv-mode="messages"] .home-mode-current { display: none; }
body[data-vrv-mode="messages"] .home-hero > div { width: 100%; }
body[data-vrv-mode="messages"] .home-mode-switch { justify-content: flex-end; margin-top: 0; }
/* Contacts are a messenger-only surface. Keep this as a visual safety net
   for cached state or a delayed mode-switch render. */
body[data-vrv-mode="game"] #messages-mode-panel { display: none !important; }
.games-module-panel {
  width: min(1180px, 100%);
  height: min(780px, calc(100vh - 170px));
  min-height: 520px;
  margin: 16px auto 0;
  overflow: hidden;
  border: 1px solid rgba(229,189,101,.28);
  border-radius: 16px;
  background: #080b18;
  box-shadow: 0 20px 46px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.05);
}
.games-module-panel iframe { display: block; width: 100%; height: 100%; min-height: 520px; border: 0; background: #080b18; }
.games-module-panel[hidden] { display: none !important; }
body[data-vrv-mode="game"] .games-module-panel { display: block; }
body[data-vrv-mode="game"] .home-view { align-items: stretch; padding: 20px 24px; }
body[data-vrv-mode="game"] .home-hero { width: min(1180px, 100%); margin: 0 auto 14px; }
body[data-vrv-mode="game"] .home-actions,
body[data-vrv-mode="game"] .home-communities,
body[data-vrv-mode="game"] .home-note,
body[data-vrv-mode="game"] .home-friends-summary { display: none; }
.messages-mode-clean { width: min(720px, 100%); margin-top: 0; }
.messages-clean-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.messages-clean-head h2 { margin: 0; color: var(--header-primary); font-size: 24px; }
.messages-clean-head p { margin: 5px 0 0; color: var(--text-muted); font-size: 13px; }
.messages-phonebook-btn { flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--brand-500) 55%, transparent); border-radius: 9px; padding: 10px 13px; color: #fff; background: var(--brand-500); cursor: pointer; font-weight: 700; }
.messages-phonebook-btn:hover { background: var(--brand-560); }
.messages-phonebook-btn:disabled { opacity: .7; cursor: progress; }
.messages-contact-search { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: var(--text-muted); background: rgba(15,16,20,.54); }
.messages-contact-search:focus-within { border-color: color-mix(in srgb, var(--brand-500) 70%, transparent); box-shadow: 0 0 0 3px rgba(88,101,242,.12); }
.messages-contact-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--header-primary); background: transparent; font: inherit; }
.messages-phone-contacts { display: flex; flex-direction: column; gap: 6px; }
.messages-phone-contact { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(20,22,28,.58); }
.messages-phone-contact:hover { border-color: color-mix(in srgb, var(--brand-500) 46%, transparent); background: rgba(88,101,242,.1); }
.messages-phone-status { opacity: .9; }
.native-contact-open { border: 0; border-radius: 7px; padding: 7px 9px; color: #fff; background: var(--green-360); cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap; }
.native-contact-open:hover { filter: brightness(1.08); }
@media (max-width: 600px) {
  .messages-mode-panel-head { flex-direction: column; }
  .messages-mode-add { width: 100%; }
  .messages-mode-actions { width: 100%; }
  .messages-mode-secondary { flex: 1 1 100%; }
  .messages-mode-columns { grid-template-columns: 1fr; }
  .messages-clean-head { align-items: stretch; flex-direction: column; }
  .messages-phonebook-btn { width: 100%; }
  body[data-vrv-mode="game"] .home-view { padding: 16px 12px 24px; }
  .games-module-panel { height: calc(100dvh - 190px); min-height: 460px; margin-top: 10px; }
  .games-module-panel iframe { min-height: 460px; }

  /* The game is an in-app WebView surface on Android. Do not leave the
     desktop server rail or chat navigation above the playable arena. */
  body[data-vrv-mode="game"] .server-list { display: none !important; }
  body[data-vrv-mode="game"] .mobile-bottom-nav { display: none !important; }
  body[data-vrv-mode="game"] .home-view {
    position: fixed;
    inset: 0;
    display: flex !important;
    min-width: 0;
    min-height: 0;
    padding: max(6px, env(safe-area-inset-top)) 0 0;
    overflow: hidden;
    background: #080b18;
    z-index: 330;
  }
  body[data-vrv-mode="game"] .home-hero {
    flex: 0 0 38px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 9px 5px;
    gap: 0;
    align-items: center;
  }
  body[data-vrv-mode="game"] .home-brand-mark,
  body[data-vrv-mode="game"] .home-eyebrow,
  body[data-vrv-mode="game"] .home-hero h1,
  body[data-vrv-mode="game"] .home-hero p,
  body[data-vrv-mode="game"] .home-mode-current { display: none; }
  body[data-vrv-mode="game"] .home-hero > div { width: 100%; }
  body[data-vrv-mode="game"] .home-mode-switch { justify-content: flex-end; margin: 0; }
  body[data-vrv-mode="game"] .home-mode-switch button { min-height: 32px; padding: 5px 9px; font-size: 11px; }
  body[data-vrv-mode="game"] .games-module-panel {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body[data-vrv-mode="game"] .games-module-panel iframe { height: 100%; min-height: 0; }
}
.invite-overlay { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.72); }
.invite-card { width: min(460px, 100%); padding: 28px; border-radius: 16px; background: var(--bg-secondary); box-shadow: 0 18px 60px rgba(0,0,0,.45); color: var(--text-normal); }
.invite-card-icon { font-size: 30px; margin-bottom: 8px; }
.invite-card h2 { margin: 0 0 10px; color: var(--header-primary); }
.invite-card p { margin: 0 0 20px; color: var(--text-muted); line-height: 1.5; font-size: 14px; }
.invite-code-row { display: flex; gap: 8px; }
.invite-code-row input { min-width: 0; flex: 1; padding: 11px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: var(--bg-tertiary); color: var(--header-primary); font: 700 18px/1 monospace; letter-spacing: .16em; text-align: center; }
.invite-code-row button, .invite-close-btn { border: 0; border-radius: 7px; padding: 10px 14px; background: var(--brand-500); color: #fff; cursor: pointer; font-weight: 600; white-space: nowrap; }
.invite-code-row button:hover, .invite-close-btn:hover { background: var(--brand-560); }
.invite-close-btn { width: 100%; margin-top: 16px; background: var(--bg-tertiary); }
.invite-close-btn:hover { background: var(--bg-mod-hover); }
.native-contacts-card { max-height: min(760px, calc(100dvh - 40px)); overflow: hidden; display: flex; flex-direction: column; }
.native-contacts-list { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; margin: 0 -6px; padding: 4px 6px; }
.native-contact-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; background: rgba(20,22,28,.58); }
.native-contact-row:hover { background: rgba(88,101,242,.14); }
.native-contact-avatar { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #5865f2, #9b59b6); color: #fff; font-weight: 700; }
.native-contact-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.native-contact-copy strong { color: var(--header-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.native-contact-copy small { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.native-contact-invite { border: 0; border-radius: 7px; padding: 7px 9px; color: #fff; background: var(--brand-500); cursor: pointer; font-size: 12px; font-weight: 600; }
.native-contact-invite:hover { background: var(--brand-560); }
.native-contact-match { width: 100%; margin: 0 0 12px; border: 1px solid color-mix(in srgb, var(--brand-500) 55%, transparent); border-radius: 9px; padding: 10px 12px; color: #fff; background: linear-gradient(135deg, var(--brand-500), color-mix(in srgb, var(--brand-500) 65%, #111 35%)); cursor: pointer; font-weight: 700; }
.native-contact-match:hover { filter: brightness(1.08); }
.native-contact-match:disabled { opacity: .7; cursor: progress; }
.native-contact-matches { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.native-contact-matches h3 { margin: 0 0 8px; color: var(--header-primary); font-size: 13px; }
.native-contact-empty { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.4; }
.invite-link-row { display: flex; gap: 8px; margin-bottom: 9px; }
.invite-link-row input { min-width: 0; flex: 1; padding: 11px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: var(--bg-tertiary); color: var(--header-primary); font-size: 12px; }
.invite-link-row button { border: 0; border-radius: 7px; padding: 10px 14px; background: var(--brand-500); color: #fff; cursor: pointer; font-weight: 600; white-space: nowrap; }
.invite-link-row button:hover { background: var(--brand-560); }
.invite-download-link { display: block; margin-top: 14px; color: var(--interactive-link); font-size: 13px; text-decoration: none; }
.invite-download-link:hover { text-decoration: underline; }
.invite-landing { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(88,101,242,.45); background: rgba(88,101,242,.14); color: var(--text-normal); text-align: left; font-size: 13px; line-height: 1.4; }
.invite-landing strong { display: block; color: var(--header-primary); margin-bottom: 3px; }
.invite-landing small { display: block; color: var(--text-muted); }
.invite-landing .invite-landing-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.invite-landing a, .invite-landing button { border: 0; border-radius: 6px; padding: 7px 10px; background: var(--brand-500); color: #fff; cursor: pointer; font-size: 12px; text-decoration: none; }
.invite-landing a.secondary { background: var(--bg-tertiary); color: var(--text-normal); }
.platform-download-list { display: grid; gap: 8px; margin-top: 18px; }
.desktop-download-card { display: flex; align-items: center; gap: 9px; margin-top: 0; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(32,34,37,.42); text-align: left; }
.desktop-download-icon { font-size: 20px; }
.desktop-download-copy { min-width: 0; flex: 1; }
.desktop-download-copy strong, .desktop-download-copy small { display: block; }
.desktop-download-copy strong { color: var(--header-primary); font-size: 12px; }
.desktop-download-copy small { margin-top: 2px; color: var(--text-muted); font-size: 10px; line-height: 1.3; }
.desktop-download-btn { flex-shrink: 0; padding: 7px 9px; border-radius: 6px; background: var(--brand-500); color: #fff; font-size: 11px; text-decoration: none; }
.desktop-download-btn:hover { background: var(--brand-560); }
.invite-download-links { display: grid; gap: 4px; }
.server-invite-btn { margin-left: auto; padding: 5px 9px; border: 0; border-radius: 5px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px; }
.server-invite-btn:hover { background: var(--bg-mod-hover); color: var(--interactive-hover); }
.friend-pending-badge { position: absolute; right: -4px; top: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center; background: var(--red-400); color: #fff; font-size: 10px; font-weight: 700; }
@media (max-width: 760px) {
  .home-view { padding: 48px 20px 32px; }
  .home-hero { align-items: flex-start; }
  .home-actions { grid-template-columns: 1fr; }
  .home-action-card { min-height: auto; flex-direction: row; align-items: flex-start; }
  .home-friends-summary { align-items: flex-start; flex-wrap: wrap; }
  .home-friends-summary button { margin-left: 0; width: 100%; }
}

/* === SERVER LIST SIDEBAR (72px вЂ" ) === */
.server-list {
  width: 72px; min-width: 72px; background: var(--bg-tertiary);
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0; gap: 8px; overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.server-list::-webkit-scrollbar { display: none; }

.server-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--bg-primary); color: var(--text-normal); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  transition: border-radius 0.15s ease, background 0.15s ease;
}
/* pill indicator вЂ" left side of server */
.server-icon::before {
  content: ''; position: absolute; left: -16px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 0; background: #fff;
  border-radius: 0 4px 4px 0;
  transition: height 0.2s cubic-bezier(0.2, 0, 0, 1);
}
.server-icon:hover { border-radius: 16px; background: var(--brand-500); }
.server-icon:hover::before { height: 20px; }
.server-icon.active { border-radius: 16px; background: var(--brand-500); }
.server-icon.active::before { height: 40px; }
.server-icon.add-server { background: var(--bg-primary); color: var(--green-360); font-size: 24px; }
.server-icon.add-server:hover { background: var(--green-360); color: #fff; }
.server-icon.join-server { background: var(--bg-primary); color: var(--green-360); font-size: 16px; }
.server-icon.join-server:hover { background: var(--green-360); color: #fff; }
.server-icon.friends-btn { background: var(--bg-primary); color: var(--interactive-normal); font-size: 18px; }
.server-icon.friends-btn:hover { background: var(--brand-500); color: #fff; }
.server-icon.friends-btn.active { background: var(--brand-500); color: #fff; }

/* Server list separator */
.server-separator {
  width: 32px; height: 2px; background: #35373c;
  border-radius: 1px;
}

/* === CHANNEL SIDEBAR (240px вЂ" ) === */
.channel-sidebar {
  width: 240px; min-width: 240px; background: var(--bg-secondary);
  display: flex; flex-direction: column;
}
.server-header {
  height: 48px; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(0,0,0,0.24); /* shadow-like */
  box-shadow: 0 1px 0 rgba(0,0,0,0.24);
  font-weight: 600; font-size: 15px; color: var(--header-primary);
  cursor: pointer; transition: background 0.1s;
  flex-shrink: 0;
}
.server-header:hover { background: rgba(79,84,92,0.16); }

/* Server channel header (in channel list) */
.server-channel-header {
  padding: 12px 16px; font-size: 15px; font-weight: 600;
  color: var(--header-primary);
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid rgba(0,0,0,0.24);
  box-shadow: 0 1px 0 rgba(0,0,0,0.24);
  cursor: pointer; transition: background 0.1s;
}
.server-channel-header:hover { background: rgba(79,84,92,0.16); }
.server-channel-icon { font-size: 18px; }
.server-settings-gear {
  margin-left: auto; cursor: pointer; opacity: 0.5; font-size: 14px;
  transition: opacity 0.15s;
}
.server-settings-gear:hover { opacity: 1; }

.channel-list { flex: 1; overflow-y: auto; padding: 0 0 8px; }

.channel-category {
  padding: 16px 16px 4px; font-size: 12px; font-weight: 700;
  color: var(--channel-icon); text-transform: uppercase;
  letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 4px; cursor: pointer;
  transition: color 0.1s;
}
.channel-category:hover { color: var(--interactive-hover); }

.channel-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; margin: 1px 8px;
  border-radius: 4px; cursor: pointer;
  color: var(--channel-icon); font-size: 15px; font-weight: 500;
  transition: background 0.1s, color 0.1s;
  position: relative;
}
.channel-item:hover { background: var(--bg-mod-hover); color: var(--interactive-hover); }
.channel-item.active { background: var(--bg-mod-selected); color: var(--interactive-active); }
.channel-item .hash { font-size: 20px; opacity: 0.4; font-weight: 600; width: 20px; text-align: center; flex-shrink: 0; }
.channel-item.active .hash { opacity: 0.7; }

/* Channel has new messages indicator */
.channel-item.has-new { color: var(--interactive-active); }
.channel-item.has-new::before {
  content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 8px; background: #fff; border-radius: 0 4px 4px 0;
}

/* Voice channels */
.voice-channel-item { cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.voice-channel-item.voice-join-pending { color: var(--interactive-active); background: rgba(214,166,64,.10); }
.voice-channel-item.voice-join-pending::after { content: '…'; margin-left: auto; color: var(--brand-500); font-weight: 800; }
.voice-channel-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-join-btn {
  display: none; margin-left: auto; flex: 0 0 auto; min-height: 30px; padding: 4px 10px;
  border: 1px solid var(--vrv-border, rgba(214,166,64,.55)); border-radius: 8px;
  background: rgba(214,166,64,.16); color: var(--text-normal, #fff); font: inherit;
  font-size: 12px; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.voice-join-btn:active { transform: translateY(1px); background: rgba(214,166,64,.32); }
.voice-channel-item:hover { color: var(--green-360); }
.voice-channel-item.voice-active { background: rgba(35,165,89,0.12); color: var(--green-360); }
.voice-channel-item.voice-active .hash { opacity: 1; }
.voice-user-item {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 8px 3px 40px; font-size: 13px; color: var(--text-muted);
}
.voice-user-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Voice connected bar вЂ"  */
.voice-connected-bar {
  padding: 8px 8px; background: var(--bg-secondary-alt);
  border-top: 1px solid rgba(0,0,0,0.12);
}
.voice-connected-label {
  font-size: 12px; font-weight: 600; color: var(--green-360);
  display: flex; align-items: center; gap: 4px;
}
.voice-connected-label svg { flex-shrink: 0; }
.voice-connected-ping {
  font-size: 11px; color: var(--text-muted); margin-left: auto;
}
.voice-connected-controls {
  display: flex; gap: 4px; margin-top: 6px;
}

/* User panel at bottom of channel sidebar вЂ"  */
.user-panel {
  height: 52px; background: #111214;
  display: flex; align-items: center;
  padding: 0 8px; gap: 0;
  flex-shrink: 0;
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; flex-shrink: 0; color: #fff;
  position: relative;
}
.user-avatar[style*="background-image"] {
  background-size: cover !important; background-position: center !important;
  font-size: 0 !important;
}
.user-info { flex: 1; min-width: 0; }
.user-name { display: block; font-size: 13px; font-weight: 600; color: var(--header-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 18px; }
.user-status { display: block; font-size: 12px; color: var(--text-muted); line-height: 16px; }
.my-ping { font-size: 11px; color: var(--text-muted); display: block; line-height: 14px; }

.icon-btn {
  background: none; border: none; color: var(--interactive-normal); cursor: pointer;
  font-size: 18px; padding: 4px; border-radius: 4px; transition: background 0.1s, color 0.1s;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--bg-mod-hover); color: var(--interactive-hover); }

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

.chat-header {
  height: 48px; padding: 0 16px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.24);
  box-shadow: 0 1px 0 rgba(0,0,0,0.24);
  flex-shrink: 0;
}
.channel-hash { font-size: 24px; color: var(--channel-icon); font-weight: 600; }
#current-channel-name { font-weight: 600; font-size: 15px; color: var(--header-primary); }
.chat-header-divider { width: 1px; height: 24px; background: var(--bg-mod-selected); margin: 0 8px; }
.channel-topic { font-size: 13px; color: var(--text-muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 18px; }
.header-icons { display: flex; gap: 2px; align-items: center; }
.header-icon-btn {
  background: none; border: none; color: var(--interactive-normal); cursor: pointer;
  font-size: 18px; padding: 4px; border-radius: 4px; transition: all 0.17s;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
}
.header-icon-btn:hover { background: var(--bg-mod-hover); color: var(--interactive-hover); }
.header-icon-divider {
  width: 1px; height: 24px; background: var(--bg-mod-selected); margin: 0 4px;
}

.games-strip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 78px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(214,166,64,.18);
  background: linear-gradient(180deg, rgba(35,31,20,.68), rgba(20,20,24,.56));
  box-shadow: inset 0 -1px rgba(255,255,255,.025);
}
.games-strip-heading { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.games-strip-heading > div { display: grid; gap: 2px; }
.games-strip-kicker { color: var(--brand-500); font: 10px/1 'Space Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.games-strip-heading strong { color: var(--header-primary); font-size: 15px; }
.games-strip-heading small { color: var(--text-muted); font-size: 11px; }
.games-strip-list { display: flex; gap: 8px; min-width: 0; overflow-x: auto; }
.game-tile { min-width: 280px; display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border: 1px solid rgba(214,166,64,.26); border-radius: 11px; color: var(--text-normal); background: rgba(16,17,21,.72); text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.game-tile:hover { border-color: var(--brand-500); background: rgba(214,166,64,.12); transform: translateY(-1px); }
.game-tile-cover { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; color: #6df6e4; font-size: 25px; background: linear-gradient(145deg, rgba(16,58,79,.9), rgba(27,19,55,.95)), url('/games/nova-land/assets/sector-omega-bg.png') center/cover; box-shadow: inset 0 0 0 1px rgba(103,245,226,.25), 0 0 18px rgba(103,245,226,.1); }
.game-tile-cover span { text-shadow: 0 0 15px #6df6e4; }
.game-tile-copy { min-width: 0; display: grid; gap: 3px; }
.game-tile-copy strong { color: var(--header-primary); font-size: 13px; letter-spacing: .06em; }
.game-tile-copy small { color: var(--text-muted); font-size: 11px; }
.game-tile-status { margin-left: auto; color: #61d89a; font: 9px/1 'Space Mono', monospace; letter-spacing: .08em; white-space: nowrap; }
.game-tile-arrow { color: var(--brand-500); font-size: 18px; }

/* Online badge */
.online-badge { font-size: 13px; color: var(--text-muted); white-space: nowrap; }

/* === MESSAGES === */
.messages {
  flex: 1; overflow-y: auto; padding: 16px 0 4px;
  display: flex; flex-direction: column;
  scroll-behavior: smooth;
  transition: opacity 0.15s ease;
}
.message {
  display: flex; gap: 16px; padding: 2px 48px 2px 72px;
  position: relative;
  transition: background 0.1s;
}
.message:hover { background: rgba(2,2,2,0.06); }
.message.first-in-group { margin-top: 17px; padding-top: 2px; }

/* Grouped messages (same author within 7min) */
.message.grouped {
  margin-top: 0; padding-top: 0;
}
.message.grouped .grouped-body {
  margin-left: 0;
  padding-left: 56px;
}

.msg-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff;
  position: absolute; left: 16px;
  margin-top: 2px;
}
.msg-avatar[style*="background-image"] {
  background-size: cover !important; background-position: center !important;
  font-size: 0 !important;
}

.msg-body { flex: 1; min-width: 0; }
.msg-header { display: flex; align-items: baseline; gap: 8px; }
.msg-author { font-weight: 600; font-size: 16px; cursor: pointer; line-height: 1.375; }
.msg-author:hover { text-decoration: underline; }
.msg-time { font-size: 12px; color: var(--text-muted); font-weight: 400; line-height: 1.375; }
.msg-text { font-size: 16px; line-height: 1.375; margin-top: 1px; word-wrap: break-word; color: var(--text-normal); }
.msg-text code { background: var(--bg-secondary); padding: 2px 4px; border-radius: 3px; font-family: 'Consolas', monospace; font-size: 14px; }

/* System message */
.message.system { padding-left: 16px; }
.message.system .msg-text { color: var(--text-muted); font-size: 14px; font-style: normal; }

/* Date separator */
.date-separator { display: flex; align-items: center; padding: 2px 16px; margin: 8px 0; }
.date-separator::before, .date-separator::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.04); }
.date-separator span { padding: 0 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); line-height: 1.25; }

/* Welcome message вЂ"  */
.welcome { padding: 16px 16px 8px; margin: 0; }
.welcome h2 { font-size: 28px; font-weight: 700; color: var(--header-primary); margin-bottom: 8px; line-height: 1.2; }
.welcome p { color: var(--text-muted); font-size: 14px; line-height: 1.25; }
.welcome-icon {
  width: 68px; height: 68px; border-radius: 50%; background: var(--bg-secondary-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; margin-bottom: 8px;
}

/* === MESSAGE INPUT () === */
.message-input-area {
  padding: 0 16px 24px; display: flex; align-items: center;
  position: relative;
}
#message-input {
  flex: 1; background: var(--input-background); border: none; border-radius: 8px;
  padding: 11px 48px 11px 48px; font-size: 16px; color: var(--text-normal); outline: none;
  font-family: inherit; line-height: 1.375; width: 100%;
}
#message-input::placeholder { color: #6d6f78; }
#message-input:focus { background: var(--input-background); outline: none; }
.message-input-area .icon-btn { position: absolute; z-index: 2; }
.input-attach-btn { left: 24px; }
.input-emoji-btn { right: 56px; }
.input-send-btn { right: 20px; }

/* + button */
.input-attach-btn {
  font-size: 20px !important; font-weight: 400 !important;
  color: var(--server-header, #b5bac1) !important;
}
.input-attach-btn:hover { color: var(--interactive-hover) !important; }
.input-emoji-btn { font-size: 18px !important; }

/* Send button */
.input-send-btn {
  font-size: 18px !important;
  color: var(--text-muted, #80848e) !important;
  transition: all 0.15s ease;
}
.input-send-btn.active {
  color: var(--brand-experiment, #5865F2) !important;
}
.input-send-btn:hover {
  color: var(--interactive-hover, #fff) !important;
  transform: scale(1.1);
}

/* Attachment preview вЂ"  */
.attachment-preview {
  display: none; padding: 8px 0 4px; gap: 8px; flex-wrap: wrap;
}
.attachment-preview-item {
  position: relative; width: 80px; height: 80px; border-radius: 8px; overflow: hidden;
  background: var(--bg-secondary);
}
.attachment-preview-item img {
  width: 100%; height: 100%; object-fit: cover;
}
.attach-file-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 28px; }
.attach-file-name { display: none; }
.attach-remove-btn {
  position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,0.6); color: #fff;
  border: none; width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.attach-remove-btn:hover { background: var(--red-400); }

/* === VOICE PANEL === */
.voice-panel {
  display: none; flex-direction: column;
  background: var(--bg-secondary-alt); border-top: 1px solid rgba(0,0,0,0.24);
  padding: 8px; flex-shrink: 0;
}
.voice-panel-header {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; font-size: 13px; font-weight: 600; color: var(--header-primary);
}
.voice-icon { font-size: 14px; }
.voice-panel-users { padding: 4px 0; max-height: 120px; overflow-y: auto; }
.voice-panel-user {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; font-size: 13px; border-radius: 4px;
}
.voice-panel-user.speaking { background: rgba(35,165,89,0.08); }
.voice-avatar-sm {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.speaking-ring {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green-360);
  animation: pulse-ring 1s ease infinite;
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(35,165,89,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(35,165,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(35,165,89,0); }
}
.voice-panel-controls {
  display: flex; gap: 8px; padding-top: 6px; justify-content: center;
}
/*  round voice buttons */
.voice-discord-btn {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--bg-secondary); color: var(--interactive-normal); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; font-size: 16px;
}
.voice-discord-btn:hover { background: var(--bg-mod-hover); color: var(--interactive-hover); }
.voice-discord-btn.muted { background: var(--red-400); color: #fff; }
.voice-discord-btn.muted:hover { background: #c03537; }
.voice-discord-btn.deafened { background: var(--red-400); color: #fff; }
.voice-discord-btn.deafened:hover { background: #c03537; }
.voice-discord-btn.vd-leave { background: transparent; color: var(--interactive-normal); }
.voice-discord-btn.vd-leave:hover { background: var(--red-400); color: #fff; }
.voice-discord-btn.streaming-active { background: var(--brand-500); color: #fff; animation: pulse-stream 2s infinite; }
@keyframes pulse-stream { 0%, 100% { box-shadow: 0 0 0 0 rgba(88,101,242,0.4); } 50% { box-shadow: 0 0 0 4px rgba(88,101,242,0); } }

/* Legacy voice-btn kept for call bar */
.voice-btn {
  flex: 1; background: var(--bg-secondary); border: 1px solid var(--bg-mod-selected); color: var(--text-normal);
  padding: 6px 4px; border-radius: 3px; font-size: 11px; cursor: pointer;
  transition: all 0.1s; white-space: nowrap;
}
.voice-btn:hover { background: var(--bg-mod-hover); }
.voice-btn.muted { background: var(--red-400); border-color: var(--red-400); color: #fff; }

/* Stream badge in voice panel */
.stream-badge {
  font-size: 9px; font-weight: 700; color: #fff; background: var(--red-400);
  padding: 1px 4px; border-radius: 3px; margin-left: auto; white-space: nowrap;
  animation: pulse-live 2s infinite;
}
@keyframes pulse-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* Voice settings */
.voice-setting { padding: 4px 8px; }
.voice-setting label { font-size: 10px; color: var(--text-muted); display: block; margin-bottom: 3px; }
.setting-slider { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: var(--bg-mod-selected); border-radius: 2px; outline: none; }
.setting-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-500); cursor: pointer; }

/* Peer volume */
.peer-volume { width: 60px; height: 3px; -webkit-appearance: none; appearance: none; background: var(--bg-mod-selected); border-radius: 2px; outline: none; margin-left: auto; }
.peer-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: var(--green-360); cursor: pointer; }

/* === RADIO PANEL === */
.radio-panel {
  display: none; flex-direction: column; gap: 6px;
  background: var(--bg-tertiary); border-radius: 4px; padding: 8px; margin: 4px 0;
}
.radio-info { display: flex; align-items: center; gap: 6px; }
.radio-info span { flex: 1; font-size: 12px; font-weight: 600; color: var(--green-360); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-btn {
  background: var(--bg-secondary); border: 1px solid var(--bg-mod-selected); color: var(--text-normal);
  width: 28px; height: 28px; border-radius: 3px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  transition: background 0.1s;
}
.radio-btn:hover { background: var(--bg-mod-hover); }
.radio-controls { display: flex; align-items: center; gap: 6px; }
.radio-volume {
  flex: 1; height: 4px; -webkit-appearance: none; appearance: none;
  background: var(--bg-mod-selected); border-radius: 2px; outline: none;
}
.radio-volume::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px;
  border-radius: 50%; background: var(--green-360); cursor: pointer;
}

/* === STREAM VIEWER === */
.stream-viewer {
  display: none; flex-direction: column; background: #000;
  border-radius: 4px; margin: 8px 16px; overflow: hidden;
  position: relative; max-height: 400px;
}
.stream-viewer:fullscreen { max-height: none; border-radius: 0; margin: 0; width: 100vw; height: 100vh; background: #000; }
.stream-viewer:fullscreen video { max-height: none; width: 100%; height: 100%; }
.stream-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px;
  background: rgba(0,0,0,0.6); position: absolute; top: 0; right: 0; z-index: 2;
}
.stream-viewer:fullscreen .stream-toolbar { opacity: 0; transition: opacity 0.2s; }
.stream-viewer:fullscreen:hover .stream-toolbar { opacity: 1; }
.stream-fullscreen-btn, .stream-close-btn {
  background: rgba(255,255,255,0.1); border: none; color: #fff;
  width: 28px; height: 28px; border-radius: 3px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.stream-fullscreen-btn:hover, .stream-close-btn:hover { background: rgba(255,255,255,0.25); }
.stream-viewer video { width: 100%; max-height: 380px; object-fit: contain; background: #000; }
.stream-label {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,0.7); color: #fff;
  padding: 4px 10px; border-radius: 3px; font-size: 12px; font-weight: 600;
}

/* Device select */
.device-select {
  width: 100%; background: var(--bg-tertiary); border: none; border-radius: 3px;
  padding: 6px 8px; font-size: 12px; color: var(--text-normal); outline: none; cursor: pointer;
}
.device-select:focus { box-shadow: 0 0 0 2px var(--brand-500); }

/* Mic level */
.mic-level-bar { width: 100%; height: 6px; background: var(--bg-mod-selected); border-radius: 3px; overflow: hidden; }
.mic-level-fill { height: 100%; width: 0%; background: var(--green-360); border-radius: 3px; transition: width 0.05s; }
.voice-status { font-size: 10px; color: var(--text-muted); padding: 2px 0; }

/* === MEMBERS SIDEBAR (240px вЂ" ) === */
.members-sidebar {
  width: 240px; min-width: 240px; background: var(--bg-secondary);
  padding: 0; overflow-y: auto; display: block;
  flex-shrink: 0; border-left: 1px solid rgba(0,0,0,0.12);
}
.members-sidebar h3 {
  font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase;
  padding: 16px 8px 4px; letter-spacing: 0.02em;
}
.member-item {
  display: flex; align-items: center; gap: 12px; padding: 4px 8px;
  border-radius: 4px; cursor: pointer; transition: background 0.1s;
  margin: 0 0 1px;
}
.member-item:hover { background: var(--bg-mod-hover); }
.member-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: #fff; position: relative;
}
.member-avatar[style*="background-image"] {
  background-size: cover !important; background-position: center !important;
  font-size: 0 !important;
}
.member-avatar .status-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 3px solid var(--bg-secondary);
}
.status-online { background: var(--green-360); }
.status-idle { background: var(--yellow-300); position: relative; overflow: hidden; }
.status-idle::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 50%; height: 50%; background: var(--bg-secondary); border-radius: 0 0 0 100%;
}
.status-dnd { background: var(--red-400); }
.status-dnd::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 2px; background: #fff; border-radius: 1px;
}
.status-offline { background: #80848e; }
.member-name { font-size: 14px; font-weight: 500; line-height: 1.25; }
.member-role { font-size: 12px; color: var(--text-muted); }
.member-call-btn {
  margin-left: auto; background: none; border: none; color: var(--text-muted);
  font-size: 14px; cursor: pointer; padding: 2px 4px; border-radius: 4px;
  transition: all 0.1s; opacity: 0;
}
.member-item:hover .member-call-btn { opacity: 1; }
.member-call-btn:hover { color: var(--green-360); background: rgba(35,165,89,0.1); }

/* Role header in members */
.role-header {
  padding: 16px 8px 4px; font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; display: flex; align-items: center; gap: 4px;
}
.role-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Role badge */
.role-badge {
  display: inline-block; padding: 1px 6px; border: 1px solid; border-radius: 3px;
  font-size: 11px; font-weight: 600; margin: 2px;
}

/* Ping badge */
.ping-badge { font-size: 10px; color: var(--text-muted); background: var(--bg-tertiary); padding: 1px 4px; border-radius: 3px; margin-right: 4px; }
.ping-num { font-size: 10px; color: var(--text-muted); margin-right: 4px; }
.sig-indicator { font-size: 11px; margin-right: 2px; }
.speaking-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green-360);
  animation: pulse-ring 1s ease infinite; margin-right: 4px; vertical-align: middle;
}
/* Speaking indicator — green ring on avatar */
.member-avatar.speaking-active {
  box-shadow: 0 0 0 2px var(--green-360), 0 0 8px rgba(35,165,89,0.5);
  animation: speaking-pulse 1.2s ease infinite;
}
@keyframes speaking-pulse {
  0%,100% { box-shadow: 0 0 0 2px var(--green-360), 0 0 4px rgba(35,165,89,0.3); }
  50% { box-shadow: 0 0 0 3px var(--green-360), 0 0 12px rgba(35,165,89,0.6); }
}
.member-item.member-speaking { background: rgba(35,165,89,0.06); }
/* Voice avatar speaking */
.voice-avatar-sm { transition: box-shadow 0.2s; }
.voice-panel-user.speaking .voice-avatar-sm { box-shadow: 0 0 0 2px var(--green-360), 0 0 12px rgba(35,165,89,0.6); animation: avatar-bounce 0.8s ease infinite; }
@keyframes avatar-bounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
/* Equalizer bars */
.eq-bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.eq-bars span { width: 3px; background: var(--green-360); border-radius: 1px; animation: eq-bar 0.6s ease infinite; }
.eq-bars span:nth-child(1){animation-delay:0s;height:60%} .eq-bars span:nth-child(2){animation-delay:0.15s;height:100%} .eq-bars span:nth-child(3){animation-delay:0.3s;height:70%}
@keyframes eq-bar { 0%,100%{transform:scaleY(0.4)} 50%{transform:scaleY(1)} }
/* Drag & Drop */
.voice-channel-item[draggable="true"]:hover,.member-item[draggable="true"]:hover{cursor:grab}
.member-item.dragging{opacity:0.5}
/* Voice pins */
.voice-pin-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;margin-left:auto;padding:2px 6px;border-radius:3px}
.voice-pin-btn:hover{background:var(--bg-mod-hover);color:var(--text-normal)}
.voice-pins-container{display:flex;flex-direction:column;gap:4px;padding:8px;background:var(--bg-tertiary);border-radius:4px;margin-bottom:4px}
.voice-pins-panel{max-height:100px;overflow-y:auto}
.voice-pin-item{font-size:12px;color:var(--text-normal);padding:3px 6px;background:var(--bg-secondary);border-radius:3px;border-left:3px solid var(--accent);margin-bottom:2px;word-break:break-word}
.voice-pin-input-row{display:flex;gap:4px}
.voice-pin-input-row input{flex:1;background:var(--bg-secondary);border:1px solid var(--bg-mod-selected);color:var(--text-normal);padding:4px 8px;border-radius:3px;font-size:12px}
.voice-pin-input-row button{background:var(--accent);color:#fff;border:none;border-radius:3px;cursor:pointer;padding:0 8px;font-size:16px}

.dm-unread {
  background: var(--red-400); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 8px; padding: 0 5px; margin-left: auto; min-width: 16px;
  text-align: center; line-height: 16px;
}

/* === MODALS === */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center; z-index: 200;
}
.modal {
  background: var(--bg-primary); border-radius: 4px; padding: 16px; min-width: 400px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.modal h2 { margin-bottom: 12px; font-size: 20px; color: var(--header-primary); text-align: center; }
.modal label {
  display: block; font-size: 12px; font-weight: 700; color: var(--header-secondary);
  text-transform: uppercase; margin: 12px 0 6px;
}
.modal input[type="text"] {
  width: 100%; background: var(--bg-tertiary); border: none; border-radius: 3px;
  padding: 10px 12px; font-size: 16px; color: var(--text-normal); outline: none;
}
.modal input[type="text"]:focus { box-shadow: 0 0 0 2px var(--brand-500); }
.modal input[type="color"] { width: 60px; height: 40px; border: none; border-radius: 3px; cursor: pointer; }
.modal-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.btn-cancel { background: none; border: none; color: var(--text-muted); padding: 8px 16px; border-radius: 3px; cursor: pointer; font-size: 14px; }
.btn-cancel:hover { color: var(--text-normal); text-decoration: underline; }
.btn-primary { background: var(--brand-500); border: none; color: #fff; padding: 8px 24px; border-radius: 3px; cursor: pointer; font-size: 14px; font-weight: 500; }
.btn-primary:hover { background: var(--brand-560); }

/* === EMOJI PICKER (448Г-444 style) === */
.emoji-picker {
  position: fixed; bottom: 80px; right: 300px;
  background: var(--bg-secondary); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 150;
  width: 448px; height: 444px; display: none; flex-direction: column;
  overflow: hidden;
}
.emoji-picker.open { display: flex; }
.emoji-search {
  padding: 12px 12px 8px;
}
.emoji-search input {
  width: 100%; background: var(--bg-tertiary); border: none; border-radius: 3px;
  padding: 8px 10px; font-size: 14px; color: var(--text-normal); outline: none;
  height: 36px;
}
.emoji-search input::placeholder { color: #6d6f78; }
.emoji-search input:focus { box-shadow: 0 0 0 2px var(--brand-500); }
.emoji-categories {
  display: flex; border-bottom: 1px solid rgba(0,0,0,0.24);
  padding: 4px 8px; gap: 2px;
}
.emoji-cat-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 20px; padding: 6px; border-radius: 4px; transition: background 0.1s;
  display: flex; align-items: center; justify-content: center;
}
.emoji-cat-btn:hover { background: var(--bg-mod-hover); color: var(--interactive-hover); }
.emoji-cat-btn.active { background: var(--bg-mod-selected); color: var(--interactive-active); }
.emoji-grid-container { flex: 1; overflow-y: auto; padding: 6px 8px; }
.emoji-cat-label {
  font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase;
  padding: 6px 4px 4px; letter-spacing: 0.02em;
}
.emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
}
.emoji-grid span {
  font-size: 22px; cursor: pointer; text-align: center; padding: 4px;
  border-radius: 4px; transition: background 0.1s; line-height: 1;
}
.emoji-grid span:hover { background: var(--bg-mod-hover); transform: scale(1.15); }

/* === SETTINGS PANEL (fullscreen) === */
.settings-overlay {
  position: fixed; inset: 0; background: var(--bg-primary);
  z-index: 500; display: none;
}
.settings-overlay.open { display: flex; }
.settings-panel {
  display: flex; width: 100%; height: 100%;
}
.settings-sidebar {
  width: 218px; min-width: 218px; background: var(--bg-secondary);
  display: flex; flex-direction: column;
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.12);
}
.settings-user-card {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 16px 20px 20px;
}
.settings-user-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
}
.settings-user-avatar[style*="background-image"] {
  background-size: cover !important; background-position: center !important;
  font-size: 0 !important;
}
.settings-user-info { flex: 1; min-width: 0; }
.settings-user-name { font-size: 14px; font-weight: 600; color: var(--header-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-user-status { font-size: 12px; color: var(--text-muted); }
.settings-separator { height: 1px; background: rgba(0,0,0,0.12); margin: 0 8px; }
.settings-nav { overflow-y: auto; padding: 8px 8px; }
.settings-nav-item {
  padding: 6px 10px; color: var(--interactive-normal); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background 0.08s; border-radius: 4px;
  margin-bottom: 2px; line-height: 20px;
}
.settings-nav-item:hover { background: var(--bg-mod-hover); color: var(--interactive-hover); }
.settings-nav-item.active { background: var(--bg-mod-selected); color: var(--interactive-active); }
.nav-item-danger { color: var(--red-400) !important; }
.nav-item-danger:hover { background: rgba(237,66,69,0.08) !important; }
.settings-close-area {
  padding: 12px; border-top: 1px solid rgba(0,0,0,0.12); margin-top: auto;
}
.settings-close-btn {
  width: 100%; padding: 8px; background: var(--bg-mod-hover); border: none;
  color: var(--interactive-normal); cursor: pointer; font-size: 14px;
  border-radius: 3px; font-weight: 500;
  transition: background 0.15s;
}
.settings-close-btn:hover { background: var(--bg-mod-active); color: var(--interactive-hover); }

/* Settings content area вЂ"  with close button at top-right */
.settings-content {
  flex: 1; overflow-y: auto; padding: 40px 40px 80px;
  max-width: 760px; position: relative;
}
.settings-mode-card {
  margin: 0 0 22px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--brand-500) 28%, rgba(255,255,255,.08));
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(35,31,20,.72), rgba(20,20,24,.8));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.16);
}
.settings-mode-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.settings-mode-card-head strong { color: var(--header-primary); font-size: 15px; }
.settings-mode-card-head small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.settings-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.settings-mode-option { min-height: 44px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: var(--text-muted); background: rgba(0,0,0,.16); font: 700 13px/1.1 inherit; cursor: pointer; transition: .16s ease; }
.settings-mode-option:hover { color: var(--header-primary); border-color: var(--brand-500); background: rgba(214,166,64,.1); }
.settings-mode-option.active[data-vrv-mode="messages"] { color: #fff; border-color: #7590ff; background: #2f4eb6; box-shadow: 0 4px 12px rgba(47,78,182,.3), inset 0 1px rgba(255,255,255,.16); }
.settings-mode-option.active[data-vrv-mode="game"] { color: #fff8e8; border-color: #e5bd65; background: #49351d; box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.14); }

/* Settings close X button ( вЂ" top right of content area) */
.settings-esc-btn {
  position: fixed; top: 60px; right: 40px; z-index: 501;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-mod-hover); border: 2px solid var(--bg-mod-selected);
  color: var(--interactive-normal); font-size: 18px; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.settings-overlay.open .settings-esc-btn { display: flex; }
.settings-esc-btn:hover { background: var(--bg-mod-active); color: var(--interactive-hover); border-color: var(--interactive-hover); }

.settings-content h2 {
  font-size: 20px; font-weight: 600; color: var(--header-primary); margin-bottom: 20px;
}
.settings-section-title {
  font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 16px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.settings-section-title:first-of-type { padding-top: 0; border-top: none; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.settings-row:last-child { border-bottom: none; }
.settings-label { font-size: 14px; color: var(--text-normal); font-weight: 500; line-height: 1.25; }
.settings-sublabel { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.25; }
.settings-input {
  background: var(--bg-tertiary); border: none; border-radius: 3px;
  padding: 10px 12px; font-size: 16px; color: var(--text-normal); outline: none; width: 220px;
  height: 40px;
}
.settings-input:focus { box-shadow: 0 0 0 2px var(--brand-500); }

/*  toggle */
.settings-toggle {
  position: relative; width: 44px; height: 24px; background: #72767d;
  border-radius: 12px; cursor: pointer; transition: background 0.25s ease;
  flex-shrink: 0; border: none;
}
.settings-toggle.on { background: var(--green-360); }
.settings-toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; background: #fff; border-radius: 50%;
  transition: transform 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.settings-toggle.on::after { transform: translateX(20px); }
.settings-toggle:hover { opacity: 0.9; }

.settings-slider {
  width: 200px; height: 4px; -webkit-appearance: none; appearance: none;
  background: var(--bg-mod-selected); border-radius: 2px; outline: none;
}
.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: var(--brand-500); cursor: pointer;
}
.settings-btn {
  padding: 8px 16px; border-radius: 3px; border: none;
  font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.17s;
  height: 36px;
}
.settings-btn-primary { background: var(--brand-500); color: #fff; }
.settings-btn-primary:hover { background: var(--brand-560); }
.settings-btn-danger { background: var(--red-400); color: #fff; }
.settings-btn-danger:hover { background: #c03537; }
.settings-value { font-size: 13px; color: var(--text-muted); min-width: 60px; text-align: right; }
.settings-row input[type="range"].settings-slider { flex: 1; max-width: 200px; margin-left: 12px; }
.settings-select {
  background: var(--bg-tertiary); border: none; border-radius: 3px;
  padding: 8px 10px; font-size: 14px; color: var(--text-normal); outline: none; cursor: pointer;
  height: 40px;
}

/* Account card вЂ"  with banner */
.settings-account-card {
  display: flex; flex-direction: column; background: var(--bg-secondary); border-radius: 8px; overflow: hidden; margin: 16px 0;
}
.settings-acct-banner {
  height: 120px; background: linear-gradient(135deg, var(--brand-500), #eb459e);
  position: relative;
}
.settings-acct-avatar-row {
  display: flex; align-items: flex-end; gap: 16px; padding: 0 16px 16px;
  margin-top: -40px; position: relative; z-index: 1;
}
.settings-acct-avatar {
  width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700; color: #fff; overflow: hidden;
  border: 6px solid var(--bg-secondary);
}
.settings-acct-avatar[style*="background-image"] {
  background-size: cover !important; background-position: center !important;
  font-size: 0 !important;
}
.settings-acct-info { flex: 1; padding-bottom: 6px; }
.settings-acct-name { font-size: 20px; font-weight: 600; color: var(--header-primary); }
.settings-acct-role { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.settings-acct-email { font-size: 13px; color: var(--text-muted); }
.settings-acct-actions { padding: 12px 16px; border-top: 1px solid rgba(0,0,0,0.12); display: flex; gap: 8px; }

/* PTT keybind */
.ptt-keybind-box {
  background: var(--bg-secondary); border: 1px solid var(--bg-mod-selected); border-radius: 3px;
  padding: 8px 14px; cursor: pointer; color: var(--text-normal); font-size: 14px;
  transition: all 0.1s; min-width: 80px; text-align: center;
}
.ptt-keybind-box:hover { border-color: var(--brand-500); }
.ptt-keybind-box.listening {
  border-color: var(--green-360); color: var(--green-360);
  animation: pulse-ptt 1s ease infinite;
}
@keyframes pulse-ptt {
  0%,100% { box-shadow: 0 0 0 0 rgba(35,165,89,0.3); }
  50% { box-shadow: 0 0 0 4px rgba(35,165,89,0); }
}
.voice-mode-select {
  background: var(--bg-tertiary); border: none; border-radius: 3px;
  padding: 8px 12px; font-size: 14px; color: var(--text-normal); outline: none; cursor: pointer;
  min-width: 200px; height: 40px;
}

/* === ADMIN PANEL === */
.admin-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center; z-index: 300;
}
.admin-panel {
  background: var(--bg-secondary); border-radius: 4px; padding: 16px;
  width: min(760px, calc(100vw - 28px)); max-height: 88vh; overflow-y: auto;
  box-shadow: 0 16px 64px rgba(0,0,0,0.5);
}
.admin-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.12); padding-bottom: 16px;
}
.admin-header h2 { font-size: 20px; color: var(--header-primary); }
.admin-subtitle { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; }
.admin-close {
  background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer;
  width: 32px; height: 32px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.admin-close:hover { background: var(--bg-mod-hover); color: var(--interactive-hover); }
.admin-toolbar { display: flex; gap: 8px; margin-bottom: 16px; }
.admin-btn {
  background: var(--bg-primary); border: 1px solid var(--bg-mod-selected); color: var(--text-normal);
  padding: 6px 12px; border-radius: 3px; font-size: 12px; cursor: pointer; transition: all 0.1s;
}
.admin-btn:hover { background: var(--bg-mod-hover); }
.admin-btn-primary { background: var(--brand-500); border-color: var(--brand-500); color: #fff; font-weight: 700; }
.admin-btn-primary:hover { background: var(--brand-600, #a67f32); border-color: var(--brand-600, #a67f32); }
.admin-entry-btn { gap: 6px; padding-left: 10px; padding-right: 10px; }
.admin-entry-btn span { font-size: 11px; font-weight: 700; }
.admin-kicker { color: var(--brand-500); font-size: 10px; letter-spacing: .16em; font-weight: 800; }
.admin-loading { color: var(--text-muted); padding: 18px 0; }
.admin-btn.ban-btn:hover { background: var(--red-400); border-color: var(--red-400); color: #fff; }
.admin-user-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px; border-bottom: 1px solid rgba(0,0,0,0.12); gap: 8px; flex-wrap: wrap;
}
.admin-user-info { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.admin-role { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.admin-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.admin-self { color: var(--text-muted); font-size: 12px; }

.admin-section { border-top: 1px solid rgba(0,0,0,0.12); padding: 12px 0; margin-top: 12px; }
.admin-section h3 { font-size: 12px; font-weight: 700; color: var(--header-secondary); margin-bottom: 8px; text-transform: uppercase; }
.admin-hint { color: var(--text-muted); font-size: 12px; line-height: 1.4; margin: 0 0 10px; }
.admin-sms-card {
  margin: 0 0 14px; padding: 18px; border: 1px solid var(--brand-500); border-radius: 12px;
  background: linear-gradient(135deg, rgba(201,162,77,.12), rgba(0,0,0,.08));
}
.admin-sms-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-sms-card-header h2 { margin: 4px 0 0; font-size: 22px; color: var(--header-primary); }
.admin-sms-lead { margin: 12px 0 16px; color: var(--text-muted); line-height: 1.5; font-size: 13px; }
.admin-sms-status-pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 7px 10px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.admin-sms-status-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.admin-sms-status-pill.ok { color: var(--green-360); background: rgba(35,165,89,.12); }
.admin-sms-status-pill.warn { color: var(--yellow-300); background: rgba(240,178,50,.12); }
.admin-sms-status-pill.error { color: var(--red-400); background: rgba(237,66,69,.12); }
.admin-sms-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.admin-sms-method { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--bg-mod-selected); border-radius: 9px; cursor: pointer; background: var(--bg-secondary); transition: border-color .15s, background .15s; }
.admin-sms-method:hover, .admin-sms-method.selected { border-color: var(--brand-500); background: rgba(201,162,77,.09); }
.admin-sms-method input { margin-top: 3px; accent-color: var(--brand-500); }
.admin-sms-method-icon { font-size: 22px; line-height: 1; }
.admin-sms-method strong, .admin-sms-method small { display: block; }
.admin-sms-method strong { color: var(--text-normal); font-size: 13px; }
.admin-sms-method small { color: var(--text-muted); font-size: 11px; line-height: 1.35; margin-top: 4px; }
.admin-sms-setup { margin-top: 14px; }
.admin-sms-setup.hidden { display: none; }
.admin-sms-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.admin-sms-steps > div { display: flex; align-items: flex-start; gap: 8px; color: var(--text-muted); font-size: 11px; line-height: 1.35; }
.admin-sms-steps b { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--brand-500); }
.admin-sms-meta { margin: 12px 0; color: var(--text-muted); font-size: 11px; }
.admin-sms-actions, .admin-sms-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-sms-url-label { display: grid; gap: 6px; color: var(--text-muted); font-size: 12px; }
.admin-sms-url-label input { min-height: 38px; padding: 8px 10px; border: 1px solid var(--bg-mod-selected); border-radius: 6px; background: var(--bg-primary); color: var(--text-normal); }
.admin-sms-footer { justify-content: space-between; border-top: 1px solid rgba(0,0,0,.14); margin-top: 16px; padding-top: 12px; color: var(--text-muted); font-size: 12px; }
.admin-sms-footer strong { color: var(--text-normal); }
.sms-pair-overlay { position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.75); }
.sms-pair-card { width: min(520px, 100%); padding: 24px; border: 1px solid var(--brand-500); border-radius: 16px; background: var(--bg-secondary); color: var(--text-normal); box-shadow: 0 18px 60px rgba(0,0,0,.55); }
.sms-pair-card h2 { margin: 5px 0 10px; }
.sms-pair-card p { color: var(--text-muted); line-height: 1.5; font-size: 13px; }
.sms-pair-code { margin: 18px 0; padding: 18px 8px; border-radius: 10px; background: rgba(201,162,77,.12); color: var(--brand-500); font-size: 36px; font-weight: 800; letter-spacing: 7px; text-align: center; }
.sms-pair-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.admin-sms-grid { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(240px, 1.2fr); gap: 10px; margin-bottom: 10px; }
.admin-sms-grid label { display: grid; gap: 5px; color: var(--text-muted); font-size: 11px; }
.admin-sms-grid select, .admin-sms-grid input { min-height: 34px; padding: 7px 9px; border: 1px solid var(--background-modifier-accent); border-radius: 4px; background: var(--background-secondary); color: var(--text-normal); }
.admin-sms-status { color: var(--text-muted); font-size: 12px; margin: 6px 0 10px; }
@media (max-width: 600px) {
  .admin-sms-grid { grid-template-columns: 1fr; }
  .admin-sms-methods, .admin-sms-steps { grid-template-columns: 1fr; }
  .admin-sms-card-header { display: block; }
  .admin-sms-status-pill { margin-top: 10px; }
  .admin-entry-btn span { display: none; }
}
.admin-role-legend { padding: 8px 0; display: flex; flex-wrap: wrap; gap: 4px; }
.admin-role-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,0.12); }
.admin-role-row .role-perms { flex: 1; font-size: 11px; color: var(--text-muted); }
.admin-role-select {
  background: var(--bg-tertiary); border: none; color: var(--text-normal);
  padding: 3px 8px; border-radius: 3px; font-size: 12px; cursor: pointer;
}
.admin-move-select {
  background: var(--bg-tertiary); border: none; color: var(--text-normal);
  padding: 3px 8px; border-radius: 3px; font-size: 11px; cursor: pointer;
}
.admin-owner { color: var(--yellow-300); font-size: 11px; font-weight: 600; }
.admin-channel-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,0.12);
}

/* === DIRECT VOICE CALL UI === */
.call-bar {
  display: none; align-items: center; gap: 12px;
  padding: 8px 16px; background: var(--bg-secondary-alt);
  border-bottom: 2px solid var(--green-360); flex-shrink: 0;
}
.call-bar.active { display: flex; }
.call-bar-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.call-bar-mode { width: 24px; text-align: center; font-size: 16px; }
.call-bar-name { font-size: 14px; font-weight: 600; color: var(--green-360); }
.call-bar-timer { font-size: 13px; color: var(--text-muted); }
.call-bar-status { font-size: 12px; color: var(--text-muted); }
.call-bar-controls { display: flex; gap: 6px; }
.call-btn {
  background: var(--bg-secondary); border: 1px solid var(--bg-mod-selected); color: var(--text-normal);
  padding: 6px 12px; border-radius: 3px; font-size: 12px; cursor: pointer;
  transition: all 0.1s;
}
.call-btn:hover { background: var(--bg-mod-hover); }
.call-btn.muted { background: var(--red-400); border-color: var(--red-400); color: #fff; }
.call-btn-hangup { background: var(--red-400); border-color: var(--red-400); color: #fff; }
.call-btn-hangup:hover { background: #c03537; }

/* Direct one-to-one video call. The same call bar controls audio/video;
   this stage only appears for the video variant. */
.direct-video-call {
  display: none; flex-direction: column; gap: 10px; padding: 12px 16px;
  background: linear-gradient(145deg, rgba(15, 17, 22, .98), rgba(35, 31, 24, .94));
  border-bottom: 1px solid rgba(232, 183, 91, .28); flex-shrink: 0;
}
.direct-video-call-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--header-primary); }
.direct-video-call-header strong { display: block; font-size: 14px; }
.direct-video-call-header span { display: block; margin-top: 2px; color: var(--text-muted); font-size: 12px; }
.direct-video-call-header > span { margin: 0; color: #e8c47e; white-space: nowrap; }
.direct-video-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 28%); gap: 10px; min-height: 230px; max-height: 390px; }
.direct-video-tile { position: relative; min-height: 180px; overflow: hidden; border: 1px solid rgba(232, 183, 91, .25); border-radius: 14px; background: #08090c; box-shadow: 0 12px 26px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.07); }
.direct-video-tile video { width: 100%; height: 100%; min-height: 180px; display: block; object-fit: cover; background: radial-gradient(circle, #25262b, #08090c); }
.direct-video-local video { transform: scaleX(-1); }
.direct-video-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; color: #fff; font-size: 12px; background: linear-gradient(transparent, rgba(0,0,0,.86)); }
.dm-call-actions { display: flex; align-items: center; gap: 5px; margin-left: 8px; }
.dm-call-btn { width: 30px; height: 30px; border: 1px solid rgba(232,183,91,.28); border-radius: 8px; background: rgba(232,183,91,.08); color: #e8c47e; cursor: pointer; }
.dm-call-btn:hover { background: rgba(232,183,91,.2); border-color: rgba(232,183,91,.7); }
.dm-call-btn-video { color: #ffd68a; }

/* Incoming call */
.incoming-call-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  z-index: 600; display: none; align-items: center; justify-content: center;
}
.incoming-call-overlay.open { display: flex; }
.incoming-call-box {
  background: var(--bg-secondary); border-radius: 4px; padding: 24px;
  text-align: center; min-width: 340px;
  box-shadow: 0 16px 64px rgba(0,0,0,0.6);
  animation: call-ring 1.5s ease infinite;
}
@keyframes call-ring {
  0%, 100% { box-shadow: 0 16px 64px rgba(0,0,0,0.6), 0 0 0 0 rgba(35,165,89,0.4); }
  50% { box-shadow: 0 16px 64px rgba(0,0,0,0.6), 0 0 0 12px rgba(35,165,89,0); }
}
.incoming-call-avatar {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; color: #fff;
}
.incoming-call-title { font-size: 18px; font-weight: 600; color: var(--header-primary); margin-bottom: 4px; }
.incoming-call-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.incoming-call-buttons { display: flex; gap: 16px; justify-content: center; }
.incoming-call-accept {
  width: 56px; height: 56px; border-radius: 50%; background: var(--green-360);
  border: none; color: #fff; font-size: 24px; cursor: pointer;
  transition: all 0.15s;
}
.incoming-call-accept:hover { transform: scale(1.1); background: #2ecc71; }
.incoming-call-decline {
  width: 56px; height: 56px; border-radius: 50%; background: var(--red-400);
  border: none; color: #fff; font-size: 24px; cursor: pointer;
  transition: all 0.15s;
}
.incoming-call-decline:hover { transform: scale(1.1); background: #c03537; }

/* === FRIENDS PANEL === */
.friends-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  z-index: 400; display: none;
}
.friends-overlay.open { display: flex; }
.friends-panel {
  display: flex; width: 100%; height: 100%; background: var(--bg-primary);
}
.friends-sidebar {
  width: 240px; min-width: 240px; background: var(--bg-secondary);
  display: flex; flex-direction: column;
}
.friends-sidebar-header {
  padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--header-primary);
  border-bottom: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 1px 0 rgba(0,0,0,0.12);
}
.friends-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.friends-add-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; color: var(--green-360); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background 0.1s;
}
.friends-add-btn:hover { background: rgba(35,165,89,0.08); }
.friends-category {
  padding: 12px 16px 4px; font-size: 12px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em;
}
.friends-close-area { padding: 12px 16px; border-top: 1px solid rgba(0,0,0,0.12); }
.friends-close-btn {
  width: 100%; padding: 8px; background: transparent; border: none;
  color: var(--text-muted); border-radius: 3px; cursor: pointer; font-size: 13px;
  transition: all 0.1s;
}
.friends-close-btn:hover { color: var(--interactive-hover); }

.friends-content { flex: 1; overflow-y: auto; padding: 24px; }
.friends-content h2 { font-size: 20px; font-weight: 600; color: var(--header-primary); margin-bottom: 16px; }
.friend-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  border-radius: 4px; transition: background 0.1s; cursor: pointer;
}
.friend-item:hover { background: var(--bg-mod-hover); }
.friend-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; position: relative;
}
.friend-status-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--bg-primary);
}
.friend-name { font-size: 14px; font-weight: 500; flex: 1; }
.friend-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.1s; }
.friend-item:hover .friend-actions { opacity: 1; }
.friend-action-btn {
  background: none; border: none; color: var(--text-muted); font-size: 16px;
  cursor: pointer; padding: 4px 6px; border-radius: 4px; transition: all 0.1s;
}
.friend-action-btn:hover { background: var(--bg-mod-hover); color: var(--interactive-hover); }
.friend-action-btn.danger:hover { color: var(--red-400); }
.friend-request-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  border-radius: 4px; transition: background 0.1s;
}
.friend-request-item:hover { background: var(--bg-mod-hover); }
.friend-request-actions { display: flex; gap: 6px; margin-left: auto; }
.friend-request-btn {
  padding: 4px 12px; border-radius: 3px; border: none;
  font-size: 12px; font-weight: 500; cursor: pointer; transition: background 0.1s;
}
.friend-request-accept { background: var(--green-360); color: #fff; }
.friend-request-accept:hover { background: #2ecc71; }
.friend-request-reject { background: transparent; color: var(--text-muted); }
.friend-request-reject:hover { background: var(--red-400); color: #fff; }
.add-friend-form { display: flex; gap: 8px; margin-bottom: 24px; }
.add-friend-input {
  flex: 1; background: var(--bg-tertiary); border: none; border-radius: 3px;
  padding: 10px 14px; font-size: 14px; color: var(--text-normal); outline: none;
}
.add-friend-input:focus { box-shadow: 0 0 0 2px var(--brand-500); }
.add-friend-btn {
  background: var(--brand-500); border: none; color: #fff; padding: 10px 20px;
  border-radius: 3px; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background 0.17s;
}
.add-friend-btn:hover { background: var(--brand-560); }

/* === v8: MESSAGE ACTIONS (hover toolbar) === */
.msg-actions {
  position: absolute; top: -16px; right: 16px;
  display: none; background: var(--bg-secondary); border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3); overflow: hidden; z-index: 10;
}
.message:hover .msg-actions { display: flex; }
.msg-action-btn {
  background: none; border: none; color: #b5bac1; padding: 6px 8px;
  cursor: pointer; font-size: 16px; transition: all 0.1s; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.msg-action-btn:hover { background: #35373c; color: #fff; }

/* === v8: REPLY QUOTE === */
.reply-quote, .msg-reply {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-muted); margin-bottom: 2px; padding: 2px 0 2px 8px;
  cursor: pointer; border-left: 3px solid; border-radius: 2px;
}
.reply-quote:hover, .msg-reply:hover { color: var(--text-normal); background: rgba(2,2,2,0.04); }
.reply-quote-author, .msg-reply-author { font-weight: 600; font-size: 13px; }
.reply-quote-text, .msg-reply-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 400px; font-size: 13px; }
.msg-reply .msg-avatar {
  width: 16px; height: 16px; min-width: 16px; min-height: 16px;
  font-size: 8px; position: static; margin: 0;
  border-radius: 50%; flex-shrink: 0;
}
.reply-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px 4px;
  background: transparent; font-size: 13px; color: var(--text-muted);
}
.reply-bar-content { flex: 1; display: flex; gap: 8px; align-items: center; }
.reply-bar-author { font-weight: 600; }
.reply-bar-cancel {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 16px; padding: 2px 4px; border-radius: 4px;
}
.reply-bar-cancel:hover { background: var(--bg-mod-hover); color: var(--interactive-hover); }

/* === v8: REACTIONS === */
.msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaction-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(88,101,242,0.08); border: 1px solid transparent; border-radius: 6px;
  padding: 2px 6px; font-size: 14px; cursor: pointer;
  transition: all 0.1s; min-width: 36px;
}
.reaction-chip:hover { background: rgba(88,101,242,0.16); border-color: rgba(88,101,242,0.3); }
.reaction-chip.mine { background: rgba(88,101,242,0.16); border-color: rgba(88,101,242,0.4); }
.reaction-count { font-size: 12px; color: var(--text-normal); font-weight: 500; }

/* === v8: TYPING INDICATOR === */
.typing-indicator {
  padding: 0 16px 4px; font-size: 12px; color: var(--text-muted);
  min-height: 24px; display: none; align-items: center; gap: 4px;
}
.typing-indicator.visible { display: flex; }
.typing-text { font-weight: 500; }
.typing-dots { display: inline-flex; gap: 2px; }
.typing-dots span {
  width: 4px; height: 4px; background: var(--text-muted); border-radius: 50%;
  animation: typingBounce 1.4s infinite;
}
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

/* === v8: MESSAGE EDIT === */
.msg-edited { font-size: 10px; color: var(--text-muted); margin-left: 4px; font-weight: 400; }
.msg-edit-input {
  background: var(--input-background); border: none; border-radius: 4px;
  padding: 4px 8px; font-size: 16px; color: var(--text-normal);
  width: 100%; outline: none; font-family: inherit;
}

/* === v8: PIN === */
.msg-pin-indicator { font-size: 10px; color: var(--text-muted); margin-left: 4px; display: none; }
.pinned-panel {
  position: fixed; top: 48px; right: 0; width: 420px; bottom: 0;
  background: var(--bg-secondary); border-left: 1px solid rgba(0,0,0,0.12); z-index: 30;
  display: flex; flex-direction: column;
  box-shadow: -2px 0 8px rgba(0,0,0,0.2);
}
.pinned-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid rgba(0,0,0,0.12);
  font-weight: 600; color: var(--header-primary);
}
.pinned-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; }
.pinned-close:hover { color: var(--interactive-hover); }
.pinned-message { padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.pinned-author { font-weight: 600; font-size: 14px; color: var(--header-primary); margin-right: 8px; }
.pinned-time { font-size: 11px; color: var(--text-muted); }
.pinned-text { font-size: 14px; margin-top: 4px; color: var(--text-normal); }
.pinned-empty { padding: 40px 16px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* === v8: SEARCH === */
.search-panel {
  position: fixed; top: 48px; right: 0; width: 420px; bottom: 0;
  background: var(--bg-secondary); border-left: 1px solid rgba(0,0,0,0.12); z-index: 30;
  display: flex; flex-direction: column;
  box-shadow: -2px 0 8px rgba(0,0,0,0.2);
}
.search-header { padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.12); }
.search-header input {
  width: 100%; background: var(--bg-tertiary); border: none; border-radius: 3px;
  padding: 8px 12px; font-size: 14px; color: var(--text-normal); outline: none;
}
.search-close-btn {
  background: none; border: none; color: var(--interactive-normal); cursor: pointer;
  font-size: 20px; width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 6px;
}
.search-close-btn:hover { background: var(--bg-mod-hover); color: var(--interactive-hover); }
.search-header input:focus { box-shadow: 0 0 0 2px var(--brand-500); }
.search-results { flex: 1; overflow-y: auto; padding: 8px 0; }
.search-result-item {
  padding: 8px 16px; cursor: pointer; transition: background 0.1s;
}
.search-result-item:hover { background: var(--bg-mod-hover); }
.search-author { font-weight: 600; font-size: 13px; color: var(--header-primary); margin-right: 8px; }
.search-time { font-size: 11px; color: var(--text-muted); }
.search-text { font-size: 13px; color: var(--text-normal); margin-top: 2px; }
.search-text mark { background: rgba(88,101,242,0.4); color: #fff; border-radius: 2px; padding: 0 2px; }
.search-empty { padding: 40px 16px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* === v8: THREAD PANEL === */
.thread-panel {
  position: fixed; top: 48px; right: 0; width: 420px; bottom: 0;
  background: var(--bg-secondary); border-left: 1px solid rgba(0,0,0,0.12); z-index: 30;
  display: flex; flex-direction: column;
  box-shadow: -2px 0 8px rgba(0,0,0,0.2);
}
.thread-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.12);
  font-weight: 600; color: var(--header-primary);
}
.thread-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; }
.thread-close:hover { color: var(--interactive-hover); }
.thread-parent {
  padding: 10px 16px; background: var(--bg-tertiary); font-size: 13px; color: var(--text-muted);
  border-bottom: 1px solid rgba(0,0,0,0.12);
}
.thread-messages { flex: 1; overflow-y: auto; padding: 8px 0; }
.thread-msg { padding: 6px 16px; font-size: 14px; line-height: 1.375; }
.thread-msg-author { font-weight: 600; margin-right: 6px; }
.thread-msg-time { font-size: 11px; color: var(--text-muted); margin-left: 6px; }
.thread-input-area {
  display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(0,0,0,0.12);
}
.thread-input-area input {
  flex: 1; background: var(--input-background); border: none; border-radius: 8px;
  padding: 8px 12px; font-size: 14px; color: var(--text-normal); outline: none;
}
.thread-input-area input:focus { box-shadow: 0 0 0 2px var(--brand-500); }
.thread-input-area button {
  background: var(--brand-500); border: none; color: #fff; padding: 8px 14px;
  border-radius: 3px; font-weight: 500; cursor: pointer;
}
.thread-input-area button:hover { background: var(--brand-560); }
.thread-indicator { margin-top: 4px; font-size: 12px; }
.thread-link { color: var(--brand-500); cursor: pointer; font-weight: 500; }
.thread-link:hover { text-decoration: underline; }

/* === v8: FILE UPLOAD / DRAG-DROP === */
.drop-zone-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(88,101,242,0.08); border: 2px dashed var(--brand-500);
  z-index: 50; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 600; color: var(--brand-500); pointer-events: none;
  border-radius: 8px;
}
.file-preview-bar {
  display: flex; gap: 8px; padding: 8px 16px; background: var(--bg-secondary);
  flex-wrap: wrap; align-items: center;
}
.file-preview-item {
  display: flex; align-items: center; gap: 6px; background: var(--bg-tertiary);
  padding: 6px 10px; border-radius: 4px; font-size: 13px; max-width: 200px;
}
.file-preview-thumb { width: 40px; height: 40px; border-radius: 3px; object-fit: cover; }
.file-preview-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-normal); }
.file-preview-size { color: var(--text-muted); font-size: 11px; }
.file-preview-remove {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 14px; padding: 2px; border-radius: 3px;
}
.file-preview-remove:hover { color: var(--red-400); }

/* Message attachments */
.msg-attachment, .msg-attachments { margin-top: 8px; max-width: 400px; }
.msg-attachment img, .attachment-image img {
  max-width: 100%; max-height: 300px; border-radius: 8px; cursor: pointer;
  transition: transform 0.2s;
}
.msg-attachment img:hover, .attachment-image img:hover { transform: scale(1.02); }
.msg-attachment video, .attachment-video video {
  max-width: 100%; max-height: 300px; border-radius: 8px;
}
.msg-attachment audio, .attachment-audio audio {
  width: 100%; max-width: 400px; height: 36px; border-radius: 3px;
}
.msg-attachment-file, .attachment-file {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--bg-secondary); border-radius: 8px; cursor: pointer;
  transition: background 0.1s;
}
.msg-attachment-file:hover, .attachment-file:hover { background: var(--bg-mod-hover); }
.msg-attachment-icon { font-size: 28px; }
.msg-attachment-info, .attachment-file a { flex: 1; font-size: 14px; color: var(--brand-500); font-weight: 500; text-decoration: none; }
.msg-attachment-fname { font-size: 14px; color: var(--brand-500); font-weight: 500; }
.msg-attachment-fsize { font-size: 12px; color: var(--text-muted); }

/* === v9.5: ANIMATIONS === */

/* Login screen animation */
.login-box {
  animation: loginFadeIn 0.3s ease-out;
}
@keyframes loginFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Message appear animation */
.message {
  animation: messageAppear 0.15s ease-out;
}
@keyframes messageAppear {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Settings panel slide from right */
.settings-overlay.open {
  animation: settingsSlideIn 0.25s ease-out;
}
@keyframes settingsSlideIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Emoji picker pop animation */
.emoji-picker.open {
  animation: emojiPopIn 0.15s ease-out;
}
@keyframes emojiPopIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Reaction add bounce */
.reaction-chip {
  animation: reactionBounce 0.2s ease;
}
@keyframes reactionBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.reaction-chip:hover {
  transform: scale(1.05);
}

/* Button micro-interactions */
.icon-btn:active, .header-icon-btn:active, .voice-discord-btn:active {
  transform: translateY(0) !important;
}
.icon-btn:hover, .header-icon-btn:hover {
  transform: translateY(-1px);
}

/* Tooltip animation for server icons */
.server-icon .srv-tooltip {
  position: absolute; left: 68px; top: 50%; transform: translateY(-50%);
  background: var(--bg-floating); color: var(--text-normal);
  padding: 8px 12px; border-radius: 4px; font-size: 14px; font-weight: 600;
  white-space: nowrap; pointer-events: none; z-index: 1000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  opacity: 0; transition: opacity 0.1s ease 0.3s, transform 0.1s ease 0.3s;
  transform: translateY(-50%) translateX(4px);
}
.server-icon:hover .srv-tooltip {
  opacity: 1; transform: translateY(-50%) translateX(0);
}

/* Voice connection pulse */
.voice-connected-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green-360);
  animation: voicePulse 2s ease infinite;
}
@keyframes voicePulse {
  0% { box-shadow: 0 0 0 0 rgba(35,165,89,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(35,165,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(35,165,89,0); }
}

/* Typing indicator вЂ"  bounce */
.typing-dots span {
  width: 4px; height: 4px; background: var(--text-muted); border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}
@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-6px); opacity: 1; }
}
.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

/* Channel fade on switch */
.chat-area.switching .messages {
  opacity: 1;
}

/* Context menu */
.context-menu {
  position: fixed; background: var(--bg-floating); border-radius: 4px;
  padding: 6px 8px; z-index: 9000; min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  animation: contextFadeIn 0.1s ease;
}
@keyframes contextFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.context-menu-item {
  padding: 6px 10px; border-radius: 3px; font-size: 14px; font-weight: 500;
  color: var(--interactive-normal); cursor: pointer;
  transition: background 0.08s, color 0.08s; display: flex; align-items: center; gap: 8px;
}
.context-menu-item:hover { background: var(--brand-500); color: #fff; }
.context-menu-item.danger { color: var(--red-400); }
.context-menu-item.danger:hover { background: var(--red-400); color: #fff; }
.context-menu-separator { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 0; }

/* User profile popup */
.user-profile-popup {
  position: fixed; width: 300px; background: #232428; border-radius: 8px;
  z-index: 8000; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  animation: profilePopIn 0.15s ease-out;
}
@keyframes profilePopIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.user-profile-banner { height: 60px; }
.user-profile-avatar-wrap { margin-top: -30px; padding: 0 12px; }
.user-profile-avatar {
  width: 64px; height: 64px; border-radius: 50%; border: 4px solid #232428;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; color: #fff; overflow: hidden;
  position: relative;
}
.user-profile-avatar[style*="background-image"] {
  background-size: cover !important; background-position: center !important;
  font-size: 0 !important;
}
.user-profile-body { padding: 8px 12px 12px; }
.user-profile-name { font-size: 18px; font-weight: 600; color: var(--header-primary); }
.user-profile-status-text { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.user-profile-roles { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.user-profile-actions { display: flex; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
.user-profile-btn {
  flex: 1; padding: 6px; border-radius: 3px; border: none; font-size: 12px;
  font-weight: 500; cursor: pointer; text-align: center; transition: background 0.15s;
}
.user-profile-btn-msg { background: var(--brand-500); color: #fff; }
.user-profile-btn-msg:hover { background: var(--brand-560); }
.user-profile-btn-call { background: var(--green-360); color: #fff; }
.user-profile-btn-call:hover { background: #2ecc71; }

/* Slash command popup */
.slash-commands-popup {
  position: fixed; bottom: 80px; left: 256px; width: 400px;
  background: var(--bg-floating); border-radius: 4px; padding: 4px;
  z-index: 150; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  animation: slashPopIn 0.1s ease;
}
@keyframes slashPopIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.slash-cmd-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 3px; cursor: pointer; transition: background 0.08s;
}
.slash-cmd-item:hover, .slash-cmd-item.selected { background: var(--bg-mod-hover); }
.slash-cmd-name { font-size: 14px; font-weight: 600; color: var(--text-normal); }
.slash-cmd-desc { font-size: 12px; color: var(--text-muted); }

/* Voice connected bar вЂ"  */
.voice-connected-bar {
  padding: 8px; background: var(--bg-secondary-alt);
  border-top: 1px solid rgba(0,0,0,0.12);
  display: flex; align-items: center; gap: 8px;
}
.voice-connected-label {
  font-size: 12px; font-weight: 600; color: var(--green-360);
  display: flex; align-items: center; gap: 4px; flex: 1;
}
.voice-connected-ping {
  font-size: 11px; color: var(--text-muted); text-align: right;
}
.voice-connected-controls {
  display: flex; gap: 4px;
}

/* Unread bar on channels */
.channel-item.unread {
  color: var(--interactive-active) !important;
}
.channel-item.unread::before {
  content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 40%; background: #fff; border-radius: 0 4px 4px 0;
}

/* Notification badge on server icon */
.server-badge {
  position: absolute; bottom: -2px; right: -2px;
  background: var(--red-400); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 8px; min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-tertiary);
}
.server-badge.ping {
  width: 8px; height: 8px; min-width: 8px; border-radius: 50%;
  bottom: 0; right: 0;
}

/* Quote block in messages */
.msg-text blockquote, .msg-text .quote-block {
  border-left: 4px solid var(--bg-mod-selected); padding: 4px 8px;
  margin: 4px 0; color: var(--text-muted); background: rgba(0,0,0,0.1);
  border-radius: 0 4px 4px 0;
}

/* AFK badge & idle status */.afk-badge { font-size: 9px; background: var(--bg-mod-selected); color: var(--text-muted); padding: 1px 4px; border-radius: 3px; margin-left: 4px; vertical-align: middle; font-weight: 600; letter-spacing: 0.5px; }
.status-idle { background: #f0b232 !important; }

/* Stickers */
.msg-sticker img { max-width: 160px; max-height: 160px; border-radius: 8px; display: block; margin: 4px 0; }
.sticker-picker-popup { position: absolute; bottom: 70px; left: 16px; right: 16px; max-height: 320px; overflow-y: auto; background: var(--bg-floating); border: 1px solid var(--bg-mod-selected); border-radius: 8px; z-index: 100; box-shadow: 0 8px 16px rgba(0,0,0,0.4); }
.sticker-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--bg-mod-selected); overflow-x: auto; }
.sticker-tab { background: var(--bg-tertiary); color: var(--text-muted); border: none; padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.sticker-tab.active { background: var(--accent); color: #fff; }
.sticker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px; }
.sticker-item { width: 100%; height: 80px; object-fit: cover; border-radius: 4px; cursor: pointer; transition: transform 0.15s; background: var(--bg-tertiary); }
.sticker-item:hover { transform: scale(1.08); }

/* Game status */
.member-game { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 4px; }

/* Input sticker button */
.input-sticker-btn { background: transparent; border: none; color: var(--interactive-normal); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.input-sticker-btn:hover { background: var(--bg-mod-hover); color: var(--interactive-hover); }

/* Mention highlights (@everyone, @here, @user) */
.mention { background: rgba(88,101,242,0.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; cursor: pointer; }
.mention-everyone { background: rgba(240,178,17,0.15); color: #f0b511; font-weight: 700; }
.mention-here { background: rgba(87,242,135,0.15); color: #57f287; font-weight: 700; }
.mention-me { background: rgba(88,101,242,0.4); color: #fff; border-left: 2px solid var(--accent); animation: mentionFlash 0.5s ease; }
@keyframes mentionFlash { 0%{background:rgba(88,101,242,0.7)} 100%{background:rgba(88,101,242,0.4)} }

/* Pre/code block in messages */
.msg-text pre {
  background: var(--bg-secondary); border-radius: 4px; padding: 8px 12px;
  overflow-x: auto; margin: 4px 0; border: 1px solid rgba(0,0,0,0.12);
}
.msg-text pre code {
  background: none; padding: 0; font-size: 14px;
}

/* Auto-link */
.msg-text a {
  color: var(--text-link); text-decoration: none;
}
.msg-text a:hover {
  text-decoration: underline;
}

/* === RESPONSIVE === */
/* === MOBILE OPTIMIZATIONS === */
@media (max-width: 900px) {
  .members-sidebar { display: none !important; }
  .channel-sidebar { width: 200px; min-width: 200px; }
}
@media (max-width: 600px) {
  /* Server list — horizontal strip on top */
  .server-list {
    width: 100vw !important;
    min-width: 0 !important;
    height: 48px;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 300;
    border-bottom: 1px solid var(--bg-modifier-accent);
  }
  .server-icon {
    width: 36px; height: 36px; font-size: 14px;
    margin: 6px 4px;
    flex-shrink: 0;
  }
  /* Channel sidebar — slide-out drawer */
  .channel-sidebar {
    display: none;
    position: fixed;
    top: 48px; left: 0; bottom: 0;
    z-index: 250;
    width: 85vw; max-width: 300px;
    box-shadow: 4px 0 16px rgba(0,0,0,.4);
    background: var(--bg-secondary);
    overflow: hidden;
  }
  .channel-sidebar.mobile-open { display: flex !important; }
  /* Channel list — SCROLLABLE */
  .channel-list {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 20px;
  }
  .server-header { height: 44px; padding: 0 12px; font-size: 14px; flex-shrink: 0; }
  /* Chat area full width */
  .chat-area {
    width: 100%;
    margin-top: 48px;
    height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* Messages — SCROLLABLE */
  .messages {
    flex: 1;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .message { padding-left: 56px; padding-right: 12px; padding-top: 4px; padding-bottom: 2px; }
  .msg-avatar { left: 8px; width: 32px; height: 32px; font-size: 13px; }
  .message-input-area { padding: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); flex-shrink: 0; }
  #message-input { font-size: 16px !important; }
  .modal-box { width: 95vw !important; max-width: 95vw !important; max-height: 90vh !important; overflow-y: auto; }
  .settings-overlay .settings-sidebar { width: 80px; min-width: 80px; }
  .context-menu, .user-context-menu, .channel-context-menu {
    min-width: 180px;
    font-size: 15px;
  }
  .channel-category { font-size: 13px; padding: 12px 8px 4px; }
  .channel-item { padding: 10px 8px; font-size: 15px; }
  .msg-author { font-size: 14px; }
  .msg-text { font-size: 15px; line-height: 1.4; }
  .server-channel-header { font-size: 14px; padding: 10px 8px; }
  .voice-panel { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-height: 50vh; overflow-y: auto; z-index: 350; }
  .login-box, .register-box {
    width: 95vw !important;
    max-width: 400px;
    padding: 16px;
  }
  /* Safe area for notches */
  .chat-header { padding-top: max(8px, env(safe-area-inset-top)); margin-top: 48px; flex-shrink: 0; }
  /* Larger touch targets */
  .msg-action-btn { width: 32px; height: 32px; }
  .uctx-item, .chctx-item, .context-menu-item { padding: 12px 12px; }
  /* Mobile hamburger */
  .mobile-menu-btn { display: flex !important; }
  /* Voice panel touch-friendly */
  .voice-discord-btn { width: 40px; height: 40px; }
  /* Mobile PTT button */
  .mobile-ptt-btn {
    display: flex !important;
    position: fixed;
    bottom: calc(72px + env(safe-area-inset-bottom)); right: 14px;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 0;
    background: var(--brand-500, #5865F2);
    color: #fff;
    font-size: 18px;
    align-items: center;
    justify-content: center;
    z-index: 300;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    cursor: pointer;
  }
  .mobile-ptt-btn.muted { background: var(--red-400); }
  .mobile-ptt-btn:active, .mobile-ptt-btn.ptt-active {
    background: #43B581;
    transform: scale(1.1);
  }
  /* Mobile overlay backdrop */
  .mobile-backdrop {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.5);
    z-index: 200;
  }
  /* Mobile back button */
  .mobile-back-btn {
    display: flex !important;
  }
  /* Settings full screen on mobile */
  .settings-overlay .settings-content {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
  }
  /* Friends overlay full screen */
  .friends-overlay .friends-content {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
  }
  /* Voice panel scroll on mobile */
  .voice-panel-users { max-height: 80px; }
  /* Hide header icons that are less important */
  .header-icons .header-icon-btn:nth-child(n+3) { display: none; }
  /* Members sidebar hidden */
  .members-sidebar { display: none !important; }
}

/* Mobile menu button */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 20px;
  background: none; border: none;
  flex-shrink: 0;
}

/* Mobile PTT button (hidden by default) */
.mobile-ptt-btn {
  display: none;
}

/* Never show the obsolete floating microphone on phones. */
#mobile-ptt-btn { display: none !important; }

/* Mobile back button (hidden by default) */
.mobile-back-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 22px;
  background: none; border: none;
  flex-shrink: 0;
}

/* Mobile backdrop (hidden by default) */
.mobile-backdrop {
  display: none;
}

.mobile-bottom-nav, .mobile-home-view, .mobile-messenger-view {
  display: none;
}

/* Tablet adjustments */
@media (min-width: 601px) and (max-width: 900px) {
  .channel-sidebar { width: 180px; min-width: 180px; }
  .message { padding-left: 52px; }
  .msg-avatar { width: 36px; height: 36px; }
}

/* Touch-friendly */
@media (hover: none) {
  .msg-actions { opacity: 1 !important; }
  .channel-item:hover { background: transparent; }
  .channel-item:active { background: var(--bg-modifier-hover); }
  .uctx-item:hover, .chctx-item:hover { background: var(--bg-modifier-hover); }
  .uctx-item:active, .chctx-item:active { background: var(--bg-modifier-selected); }
}

/* === VRV CHAT MOBILE PASS ===
   A phone gets a real single-column layout: the server bar stays at the top,
   the channel list opens as a drawer, and voice controls stay inside that
   drawer instead of covering the message composer. */
@media (max-width: 600px) {
  :root { --mobile-topbar: calc(52px + env(safe-area-inset-top)); }
  body[data-vrv-mode="messages"] { --mobile-topbar: env(safe-area-inset-top); }
  body[data-vrv-mode="messages"] .server-list { display: none !important; }
  body[data-vrv-mode="messages"] .channel-sidebar { display: none !important; }
  body[data-vrv-mode="messages"] .chat-area { margin-top: 0; height: 100dvh; }

  html, body { width: 100%; min-width: 0; height: 100%; height: 100dvh; }
  body { overflow: hidden; overscroll-behavior: none; }

  #login-screen, #register-screen {
    min-height: 100dvh;
    height: auto;
    align-items: flex-start;
    overflow-y: auto;
    padding: max(18px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom));
  }
  #login-screen > .login-box, #register-screen > .login-box {
    width: 100%;
    max-width: 430px;
    max-height: none;
    margin: 0 auto;
    padding: 24px 18px 20px;
    border-radius: 14px;
  }
  .login-logo { width: 64px; height: 64px; line-height: 64px; font-size: 44px; }
  .login-box h1 { font-size: 21px; line-height: 1.2; }
  .login-subtitle { font-size: 14px; margin-bottom: 18px; }
  .login-field { margin-bottom: 14px; }
  .login-field input[type="text"],
  .login-field input[type="password"],
  .login-field input[type="email"] { height: 44px; }
  #login-btn, .login-btn-wide { min-height: 46px; }
  .color-opt { width: 30px; height: 30px; }

  #app { width: 100%; height: 100dvh; min-height: 0; }
  .server-list {
    top: 0;
    height: var(--mobile-topbar);
    padding: env(safe-area-inset-top) 8px 0;
    align-items: center;
    gap: 4px;
    background: rgba(17,18,20,.98);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .server-icon {
    width: 38px; height: 38px; margin: 3px 2px;
    border-radius: 12px;
    font-size: 16px;
  }
  .server-icon.active { border-radius: 12px; }
  .server-separator { width: 1px; height: 26px; margin: 0 4px; }

  .chat-area {
    width: 100%;
    height: calc(100dvh - var(--mobile-topbar));
    min-height: 0;
    margin-top: var(--mobile-topbar);
  }
  .chat-header {
    height: 50px;
    min-height: 50px;
    margin-top: 0;
    padding: 0 8px;
    gap: 5px;
  }
  .mobile-menu-btn { width: 36px; height: 36px; display: flex !important; }
  .channel-hash { font-size: 21px; }
  #current-channel-name { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-header-divider, .channel-topic { display: none; }
  .app-mode-switch-header { margin-left: 4px; }
  .app-mode-switch-header button { width: 31px; min-width: 31px; padding: 5px; }
  .app-mode-switch-header button span:last-child { display: none; }
  .app-mode-switch-header + .header-icons { margin-left: 0; }
  .header-icons { margin-left: auto; }
  .header-icon-btn { width: 36px; height: 36px; }
  .online-badge { display: none; }
  .games-strip { display: block; min-height: 0; padding: 8px 10px; }
  .games-strip-heading { justify-content: space-between; gap: 8px; min-width: 0; margin-bottom: 7px; }
  .games-strip-heading small { max-width: 56%; text-align: right; }
  .games-strip-list { margin: 0 -2px; }
  .game-tile { min-width: min(276px, 88vw); }

  .channel-sidebar {
    top: var(--mobile-topbar);
    bottom: 0;
    width: min(78vw, 320px);
    max-width: none;
    height: calc(100dvh - var(--mobile-topbar));
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Keep the drawer from swallowing the whole phone screen. Tapping the
     remaining area closes it through the backdrop created by app.js. */
  .mobile-backdrop {
    display: block;
    position: fixed;
    inset: var(--mobile-topbar) 0 0;
    background: rgba(0, 0, 0, .46);
    z-index: 240;
  }
  .server-header { height: 50px; min-height: 50px; padding: 0 14px; }
  .channel-list { min-height: 0; }
  .channel-item, .voice-channel-item { min-height: 44px; padding: 10px 12px; }
  .channel-category { padding: 14px 12px 5px; }

  /* Keep voice controls usable without covering the chat composer. */
  .voice-panel {
    position: static;
    width: auto;
    max-height: 44%;
    overflow-y: auto;
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
  }
  .voice-panel-users { max-height: 96px; }
  .voice-setting { padding-left: 12px; padding-right: 12px; }
  .voice-panel-controls { padding: 8px 10px; gap: 6px; }
  .voice-discord-btn { width: 40px; height: 40px; font-size: 15px; }
  .device-select { min-height: 38px; max-width: 100%; }

  .messages { min-height: 0; padding-top: 10px; }
  .message { gap: 10px; padding: 4px 10px 4px 52px; }
  .message.first-in-group { margin-top: 12px; }
  .message.grouped .grouped-body { padding-left: 42px; }
  .msg-avatar { left: 8px; width: 34px; height: 34px; }
  .msg-author { font-size: 14px; }
  .msg-time { font-size: 11px; }
  .msg-text { font-size: 15px; line-height: 1.42; }
  .welcome { padding: 14px 12px 8px; }
  .welcome h2 { font-size: 22px; }
  .message-input-area {
    min-height: 58px;
    padding: 7px 8px max(7px, env(safe-area-inset-bottom));
  }
  #message-input { min-height: 44px; padding-left: 42px; padding-right: 84px; }
  .input-attach-btn { left: 14px; }
  .input-emoji-btn { right: 50px; }
  .input-send-btn { right: 12px; }

  .modal-box, .dialog-box, .invite-card { width: calc(100vw - 24px) !important; max-width: none !important; }
  .invite-card { padding: 22px 18px; }
  .invite-link-row, .invite-code-row { flex-wrap: wrap; }
  .invite-link-row input, .invite-code-row input { flex-basis: 100%; }
  .invite-link-row button, .invite-code-row button { flex: 1; min-height: 42px; }

  .settings-overlay, .friends-overlay { padding: 0; }
  .settings-sidebar, .friends-sidebar { width: 100%; min-width: 0; max-height: 42%; }
  .settings-panel, .friends-panel { flex-direction: column; height: 100dvh; }
  .settings-user-card { padding: 14px 16px; }
  .settings-nav { display: flex; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 8px 12px; flex-shrink: 0; }
  .settings-nav-group-title { display: none; }
  .settings-nav-item { flex: 0 0 auto; min-height: 40px; padding: 10px 12px; margin: 0; white-space: nowrap; }
  .settings-sidebar > .settings-nav:last-of-type { display: none; }
  .settings-close-area, .friends-close-area { padding: 8px 12px; }
  .settings-content, .friends-content { width: 100%; max-width: none; min-height: 0; padding: 22px 16px max(32px, env(safe-area-inset-bottom)); }
  .settings-content h2, .friends-content h2 { font-size: 19px; }
  .settings-esc-btn { top: max(8px, env(safe-area-inset-top)); right: 10px; }
  .settings-mobile-back { top: max(8px, env(safe-area-inset-top)) !important; right: 10px !important; }
  .friends-sidebar-header { padding: 14px 16px; }
  .friends-nav { max-height: 180px; }

  .incoming-call-box { width: calc(100vw - 32px); max-width: 380px; }
  .user-profile-popup { width: calc(100vw - 24px); max-width: 360px; }
  .context-menu, .user-context-menu, .channel-context-menu { max-width: calc(100vw - 24px); }

  /* Search is a full-width mobile sheet. The input and close button must
     share one flex row, otherwise the 100%-wide input pushes the X off-screen. */
  .search-panel {
    top: var(--mobile-topbar);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    border-left: 0;
    z-index: 380;
  }
  .search-header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
  .search-header input { min-width: 0; flex: 1; width: auto; min-height: 42px; font-size: 16px; }
  .search-close-btn { min-width: 42px; width: 42px; height: 42px; }
  .search-result-item { padding: 12px 14px; }

  /* Telegram-like first screen for mobile users. */
  .mobile-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 5px 8px env(safe-area-inset-bottom);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    background: rgba(17,18,20,.98);
    border-top: 1px solid rgba(255,255,255,.08);
    z-index: 360;
  }
  .mobile-bottom-nav button {
    border: 0; border-radius: 9px; background: transparent;
    color: var(--text-muted); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1px;
    min-width: 0; cursor: pointer; font: inherit;
  }
  .mobile-bottom-nav button span { font-size: 20px; line-height: 24px; }
  .mobile-bottom-nav button small { font-size: 10px; line-height: 14px; white-space: nowrap; }
  .mobile-bottom-nav button.active { color: #fff; background: rgba(88,101,242,.22); }
  .mobile-bottom-nav button:active { background: rgba(88,101,242,.32); }

  .mobile-home-view {
    position: fixed; inset: var(--mobile-topbar) 0 calc(64px + env(safe-area-inset-bottom));
    display: none; overflow-y: auto; padding: 22px 16px 28px;
    background: radial-gradient(circle at 50% 0%, rgba(88,101,242,.2), transparent 45%), var(--bg-primary);
    z-index: 340;
  }
  .mobile-home-view.open { display: block; }
  .mobile-home-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
  .mobile-home-brand { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(135deg,#5865f2,#7b68ee); font-size: 25px; box-shadow: 0 8px 20px rgba(88,101,242,.25); }
  .mobile-home-heading strong, .mobile-home-heading span { display: block; }
  .mobile-home-heading strong { color: var(--header-primary); font-size: 19px; }
  .mobile-home-heading span { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
  .mobile-home-section-title { margin-bottom: 9px; color: var(--header-primary); font-weight: 700; font-size: 15px; }
  .mobile-home-servers { display: grid; gap: 8px; }
  .mobile-home-server {
    width: 100%; min-height: 64px; display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
    color: var(--text-normal); background: rgba(32,34,37,.75); text-align: left; cursor: pointer;
  }
  .mobile-home-server.active { border-color: rgba(88,101,242,.8); background: rgba(88,101,242,.14); }
  .mobile-home-server:active { transform: scale(.99); }
  .mobile-home-server-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-500); color: #fff; font-size: 19px; }
  .mobile-home-server > span:nth-child(2) { min-width: 0; flex: 1; }
  .mobile-home-server strong, .mobile-home-server small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-home-server strong { color: var(--header-primary); font-size: 14px; }
  .mobile-home-server small { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
  .mobile-home-server b { color: var(--text-muted); font-size: 24px; font-weight: 400; }
  .mobile-home-empty { padding: 18px 0; color: var(--text-muted); font-size: 13px; }
  .mobile-home-friends { width: 100%; margin-top: 18px; min-height: 44px; border: 0; border-radius: 9px; background: var(--brand-500); color: #fff; font-weight: 600; cursor: pointer; }
  body[data-vrv-mode="messages"] #mobile-home-view { display: none !important; }
  body[data-vrv-mode="game"] .mobile-messenger-view { display: none !important; }

  /* Messenger navigation and screens follow the Telegram pattern: chats,
     contacts, calls and settings. The game mode keeps its own navigation. */
  .mobile-messenger-view {
    position: fixed;
    inset: var(--mobile-topbar) 0 calc(64px + env(safe-area-inset-bottom));
    display: none;
    flex-direction: column;
    overflow: hidden;
    padding: 15px 14px 10px;
    background:
      radial-gradient(circle at 85% 0%, rgba(214,166,64,.12), transparent 34%),
      linear-gradient(180deg, #100e0b 0%, #080807 70%, #030303 100%);
    z-index: 345;
  }
  .mobile-messenger-view.open { display: flex; }
  .mobile-messenger-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
  .mobile-messenger-title-wrap { min-width: 0; }
  .mobile-messenger-title-wrap strong { display: block; color: var(--brand-500); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
  .mobile-messenger-title-wrap h1 { margin: 3px 0 0; color: var(--header-primary); font-size: 28px; line-height: 1.05; }
  .mobile-messenger-header-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
  .mobile-game-mode-btn { min-height: 40px; padding: 0 11px; border: 1px solid rgba(214,166,64,.45); border-radius: 12px; color: #fff4d8; background: linear-gradient(135deg, rgba(214,166,64,.28), rgba(111,74,24,.28)); font: 700 12px/1 inherit; cursor: pointer; white-space: nowrap; }
  .mobile-game-mode-btn:active { transform: scale(.96); background: rgba(214,166,64,.38); }
  .mobile-messenger-add { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--vrv-border-soft, rgba(214,166,64,.3)); border-radius: 14px; color: var(--brand-500); background: rgba(214,166,64,.08); font: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
  .mobile-messenger-add:active { transform: scale(.95); background: rgba(214,166,64,.18); }
  .mobile-messenger-search { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 14px 0 12px; padding: 0 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; color: var(--brand-500); background: rgba(20,18,14,.9); }
  .mobile-messenger-search input { width: 100%; min-width: 0; height: 46px; border: 0; outline: 0; color: var(--header-primary); background: transparent; font: inherit; font-size: 16px; }
  .mobile-messenger-search input::placeholder { color: var(--text-muted); }
  .mobile-messenger-content { min-height: 0; flex: 1; overflow-y: auto; padding: 3px 1px 14px; overscroll-behavior: contain; }
  .mobile-messenger-section { margin: 7px 0 16px; }
  .mobile-messenger-section h2 { margin: 0 0 9px; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .mobile-messenger-list { display: flex; flex-direction: column; gap: 5px; }
  .mobile-messenger-row { width: 100%; min-height: 68px; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border: 1px solid transparent; border-radius: 13px; color: var(--text-normal); background: rgba(22,20,16,.7); text-align: left; cursor: pointer; }
  .mobile-messenger-row:active { border-color: var(--vrv-border-soft, rgba(214,166,64,.3)); background: rgba(214,166,64,.1); transform: scale(.995); }
  .mobile-messenger-avatar { width: 45px; height: 45px; flex: 0 0 45px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #fff; background: linear-gradient(135deg, #5865f2, #7b68ee); font-size: 18px; font-weight: 700; }
  .mobile-messenger-avatar.group { border-radius: 14px; background: linear-gradient(135deg, #a87522, #d6a640); color: #171108; }
  .mobile-messenger-copy { min-width: 0; flex: 1; }
  .mobile-messenger-copy strong, .mobile-messenger-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-messenger-copy strong { color: var(--header-primary); font-size: 16px; }
  .mobile-messenger-copy small { margin-top: 4px; color: var(--text-muted); font-size: 12px; }
  .mobile-messenger-row-trailing { display: flex; align-items: center; gap: 5px; margin-left: auto; color: var(--text-muted); }
  .mobile-messenger-unread { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 10px; color: #171108; background: var(--brand-500); font-size: 11px; font-weight: 800; }
  .mobile-messenger-call { width: 34px; height: 34px; border: 0; border-radius: 10px; color: var(--brand-500); background: rgba(214,166,64,.08); cursor: pointer; font-size: 17px; }
  .mobile-messenger-call:active { background: rgba(214,166,64,.2); }
  .mobile-messenger-primary { width: 100%; min-height: 48px; margin: 2px 0 12px; border: 0; border-radius: 13px; color: #171108; background: linear-gradient(135deg, #e5bf62, #c9932f); font: inherit; font-weight: 800; cursor: pointer; }
  .mobile-messenger-secondary { width: 100%; min-height: 45px; border: 1px solid var(--vrv-border-soft, rgba(214,166,64,.3)); border-radius: 12px; color: var(--header-primary); background: rgba(214,166,64,.08); font: inherit; font-weight: 700; cursor: pointer; }
  .mobile-messenger-empty { padding: 28px 12px; border: 1px dashed rgba(255,255,255,.13); border-radius: 13px; color: var(--text-muted); text-align: center; font-size: 14px; line-height: 1.45; }
  #mobile-overlay-back {
    top: calc(var(--mobile-topbar) + 7px) !important;
    left: auto !important;
    right: 8px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
    z-index: 370 !important;
  }

  /* Pull down from the top of the message list to refresh, like Telegram. */
  .mobile-refresh-indicator {
    position: fixed;
    top: calc(var(--mobile-topbar) + 4px);
    left: 50%;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 5px 11px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(17,18,20,.94);
    color: var(--text-normal);
    font-size: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.3);
    pointer-events: none;
    transform: translate(-50%, -150%);
    transition: transform .16s ease, opacity .16s ease;
    opacity: 0;
  }
  .mobile-refresh-indicator.is-visible { transform: translate(-50%, 0); opacity: 1; }
  .mobile-refresh-icon { display: inline-block; color: var(--brand-500); font-size: 18px; line-height: 1; }
  .mobile-refresh-indicator.is-refreshing .mobile-refresh-icon { animation: mobile-refresh-spin .8s linear infinite; }
  @keyframes mobile-refresh-spin { to { transform: rotate(360deg); } }
}

/* Login and registration must remain usable when the browser height is
   smaller than the form. The application itself keeps its internal layout
   locked, while these entry screens are allowed to scroll independently. */
@media (min-width: 601px) {
  #login-screen, #register-screen {
    align-items: flex-start;
  }
  #login-screen > .login-box, #register-screen > .login-box {
    margin-top: auto;
    margin-bottom: auto;
  }
}

/* Invite actions are secondary controls, but still need a comfortable touch
   target and must wrap instead of pushing content outside a narrow screen. */
.invite-landing .invite-landing-actions a,
.invite-landing .invite-landing-actions button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 600px) {
  .invite-landing .invite-landing-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .invite-landing .invite-landing-actions a,
  .invite-landing .invite-landing-actions button {
    width: 100%;
    min-height: 44px;
  }
}

/* === TOOLTIPS (CSS only, ) === */
[title] { position: relative; }
.tooltip {
  position: absolute; background: var(--bg-floating); color: var(--text-normal);
  padding: 8px 12px; border-radius: 4px; font-size: 14px; font-weight: 500;
  white-space: nowrap; pointer-events: none; z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Message highlight on search click */
.highlight-msg {
  animation: highlightPulse 2s ease;
}
@keyframes highlightPulse {
  0% { background: rgba(88,101,242,0.3); }
  100% { background: transparent; }
}

/* Channel category collapse toggle */
.channel-category .cat-arrow {
  transition: transform 0.15s ease;
  display: inline-block;
}
.channel-category.collapsed .cat-arrow {
  transform: rotate(-90deg);
}
.channel-category.collapsed ~ .channel-item,
.channel-category.collapsed ~ .voice-channel-item,
.channel-category.collapsed ~ .voice-user-item {
  display: none;
}

/* Discord-like drag-over */
.chat-area.drag-over::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(88,101,242,0.08); border: 2px dashed var(--brand-500);
  z-index: 50; pointer-events: none;
  border-radius: 8px;
}

/* Scrollbar auto-hide on hover */
.messages::-webkit-scrollbar-thumb { background: transparent; }
.messages:hover::-webkit-scrollbar-thumb { background: var(--scrollbar-thin-thumb); }
.messages::-webkit-scrollbar-thumb:hover { background: #222; }

/* === DISCORD-ACCURATE CSS POLISH === */

/* === TOGGLE SWITCH (Settings) === */
.toggle-switch { position:relative; width:44px; height:24px; background:#80848e; border-radius:12px; cursor:pointer; transition:background 0.17s; }
.toggle-switch.active { background:#23a559; }
.toggle-switch::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:transform 0.17s; }
.toggle-switch.active::after { transform:translateX(20px); }

/* === CUSTOM SLIDER === */
.custom-slider { -webkit-appearance:none; width:100%; height:4px; background:#4f545c; border-radius:2px; outline:none; }
.custom-slider::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; background:#fff; border-radius:50%; cursor:pointer; }
.custom-slider::-webkit-slider-thumb:hover { transform:scale(1.2); }

/* === CONTEXT MENU === */
#msg-context-menu { position:fixed; background:#111214; border-radius:4px; padding:6px 8px; min-width:180px; z-index:100; box-shadow:0 8px 24px rgba(0,0,0,0.4); }
.ctx-item { padding:6px 10px; color:#b5bac1; font-size:14px; cursor:pointer; border-radius:3px; display:flex; align-items:center; gap:8px; }
.ctx-item:hover { background:#5865f2; color:#fff; }
.ctx-item.danger { color:#f23f43; }
.ctx-item.danger:hover { background:#f23f43; color:#fff; }
.ctx-separator { height:1px; background:#3f4147; margin:4px 0; }

/* === USER PROFILE POPUP === */
.user-profile-popup { position:fixed; width:340px; background:#232428; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.5); z-index:90; overflow:hidden; }
.upp-banner { height:60px; background:linear-gradient(135deg, #5865f2, #eb459e); }
.upp-avatar { width:80px; height:80px; border-radius:50%; border:6px solid #232428; margin:-40px 0 0 16px; position:relative; z-index:1; }
.upp-body { padding:8px 16px 16px; }
.upp-name { font-size:20px; font-weight:700; color:#f2f3f5; }
.upp-status { font-size:13px; color:#949ba4; margin-top:4px; }
.upp-roles { display:flex; gap:4px; margin-top:8px; }
.upp-role { padding:2px 8px; border-radius:4px; font-size:12px; border:1px solid; }
.upp-actions { display:flex; gap:8px; margin-top:12px; }
.upp-btn { padding:8px 16px; border-radius:4px; border:none; font-weight:600; cursor:pointer; font-size:13px; }
.upp-btn-primary { background:#5865f2; color:#fff; }
.upp-btn-secondary { background:transparent; color:#b5bac1; border:1px solid #3f4147; }

/* === SETTINGS PANEL POLISH === */
.settings-card { background:#2b2d31; border-radius:8px; overflow:hidden; margin-bottom:16px; }
.settings-banner { height:100px; background:linear-gradient(135deg, #5865f2, #eb459e); }
.settings-avatar-wrap { margin-top:-40px; padding:0 16px; }
.settings-avatar-lg { width:80px; height:80px; border-radius:50%; border:6px solid #2b2d31; }
.settings-field-group { padding:16px; }
.settings-field { margin-bottom:16px; }
.settings-label { font-size:12px; font-weight:700; text-transform:uppercase; color:#b5bac1; margin-bottom:8px; letter-spacing:0.02em; }
.settings-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.settings-row-label { flex:1; }
.settings-row-title { font-size:15px; color:#dbdee1; }
.settings-row-sub { font-size:13px; color:#949ba4; margin-top:2px; }

/* === SERVER TOOLTIP (CSS-only) === */
.server-item { position:relative; }
.server-tooltip { position:absolute; left:76px; top:50%; transform:translateY(-50%); background:#111214; color:#dbdee1; padding:8px 12px; border-radius:6px; font-size:14px; font-weight:600; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity 0.1s 0.3s; box-shadow:0 4px 12px rgba(0,0,0,0.3); z-index:100; }
.server-tooltip::before { content:''; position:absolute; left:-6px; top:50%; transform:translateY(-50%); border:6px solid transparent; border-right-color:#111214; border-left:0; }
.server-item:hover .server-tooltip { opacity:1; }

/* === GLOBAL SCROLLBAR === */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:transparent; border-radius:4px; }
::-webkit-scrollbar-corner { background:transparent; }
*:hover::-webkit-scrollbar-thumb { background:#1a1b1e; }
::-webkit-scrollbar-thumb:hover { background:#222 !important; }

/* === SELECTION + FOCUS === */
::selection { background:rgba(88,101,242,0.3); }
input:focus, textarea:focus { box-shadow:0 0 0 2px #5865f2; outline:none; }

/* === v11: THEME - MIDNIGHT BLUE === */
body.theme-midnight {
  --bg-primary: #0d1b2a;
  --bg-secondary: #1b2838;
  --bg-secondary-alt: #112240;
  --bg-tertiary: #0a1628;
  --bg-floating: #0a1628;
  --text-normal: #ccd6f6;
  --text-muted: #8892b0;
  --header-primary: #e6f1ff;
  --header-secondary: #a8b2d1;
  --scrollbar-thin-thumb: #0a192f;
  --scrollbar-thin-track: #1b2838;
  --input-background: #172a45;
}

/* === v11: THEME - AMOLED BLACK === */
body.theme-amoled {
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-secondary-alt: #000000;
  --bg-tertiary: #000000;
  --bg-floating: #050505;
  --text-normal: #e0e0e0;
  --text-muted: #888888;
  --header-primary: #f5f5f5;
  --header-secondary: #bbbbbb;
  --scrollbar-thin-thumb: #111;
  --scrollbar-thin-track: #0a0a0a;
  --input-background: #111;
}
body.theme-amoled .user-panel { background: #000; }
body.theme-amoled .server-header { border-color: rgba(255,255,255,0.06); }

/* === v11: THEME - LIGHT === */
body.theme-light {
  --bg-primary: #ffffff;
  --bg-secondary: #f2f3f5;
  --bg-secondary-alt: #ebedef;
  --bg-tertiary: #e3e5e8;
  --bg-floating: #ffffff;
  --bg-mod-hover: rgba(79,84,92,0.08);
  --bg-mod-active: rgba(79,84,92,0.16);
  --bg-mod-selected: rgba(79,84,92,0.12);
  --text-normal: #2e3338;
  --text-muted: #5c6370;
  --text-link: #0068e0;
  --header-primary: #060607;
  --header-secondary: #4f5660;
  --brand-500: #5865f2;
  --green-360: #23a559;
  --red-400: #d83c3e;
  --yellow-300: #f0b232;
  --channel-icon: #6d6f78;
  --interactive-normal: #5c6370;
  --interactive-hover: #2e3338;
  --interactive-active: #060607;
  --scrollbar-thin-thumb: #d4d7dc;
  --scrollbar-thin-track: #e3e5e8;
  --input-background: #ebedef;
}
body.theme-light .user-panel { background: #ebedef; }
body.theme-light .login-box, body.theme-light #login-screen, body.theme-light #register-screen { background: #f2f3f5; }
body.theme-light .login-box h1 { color: #060607; }
body.theme-light .login-field input { background: #e3e5e8; color: #2e3338; }
body.theme-light .color-opt { border-color: #ccc; }
body.theme-light .message:hover { background: rgba(0,0,0,0.04); }
body.theme-light .members-sidebar { border-left-color: #e3e5e8; }

/* === v11: MESSAGE DISPLAY MODES === */
body[data-msg-display="compact"] .message { padding: 1px 48px 1px 72px; }
body[data-msg-display="compact"] .msg-text { font-size: 14px; line-height: 1.25; }
body[data-msg-display="comfortable"] .message { padding: 4px 48px 4px 72px; }
body[data-msg-display="comfortable"] .msg-text { font-size: 17px; line-height: 1.5; }

/* === VRV CHAT THEME SYSTEM ===
   The royal bronze shell is the product default. Other shells are selected
   from Settings -> Appearance and change the whole interface consistently. */
:root {
  --bg-primary: #11100d;
  --bg-secondary: #191711;
  --bg-secondary-alt: #211c13;
  --bg-tertiary: #0a0907;
  --bg-floating: #15120d;
  --bg-mod-hover: rgba(201,162,77,.12);
  --bg-mod-active: rgba(201,162,77,.18);
  --bg-mod-selected: rgba(201,162,77,.24);
  --text-normal: #e9e2d2;
  --text-muted: #a99d86;
  --text-link: #e0b85b;
  --header-primary: #fff8e8;
  --header-secondary: #d0c2a7;
  --brand-500: #c9a24d;
  --brand-560: #a97925;
  --channel-icon: #ad9e83;
  --interactive-normal: #c7b99e;
  --interactive-hover: #f6e9ce;
  --interactive-active: #fff8e8;
  --scrollbar-thin-thumb: #4a3a1d;
  --scrollbar-thin-track: #191711;
  --input-background: #211c13;
  --background-accent: #c9a24d;
  --accent: #c9a24d;
  --theme-glow: rgba(201,162,77,.18);
}

body.theme-royal { --theme-glow: rgba(201,162,77,.18); }
body.theme-sapphire {
  --bg-primary: #071a31; --bg-secondary: #0b2747; --bg-secondary-alt: #10345b;
  --bg-tertiary: #041120; --bg-floating: #081c34;
  --bg-mod-hover: rgba(25,200,255,.12); --bg-mod-active: rgba(25,200,255,.18); --bg-mod-selected: rgba(25,200,255,.24);
  --text-normal: #dceeff; --text-muted: #8caed1; --text-link: #45d8ff;
  --header-primary: #f1fbff; --header-secondary: #b7d7ef; --brand-500: #19c8ff; --brand-560: #087ea8;
  --channel-icon: #72b8d6; --interactive-normal: #a9d2eb; --interactive-hover: #effbff; --interactive-active: #fff;
  --scrollbar-thin-thumb: #0d5279; --scrollbar-thin-track: #0b2747; --input-background: #10345b; --background-accent: #19c8ff; --accent: #19c8ff; --theme-glow: rgba(25,200,255,.18);
}
body.theme-amethyst {
  --bg-primary: #130d25; --bg-secondary: #20143a; --bg-secondary-alt: #2c1a4a;
  --bg-tertiary: #0b0717; --bg-floating: #170d2c;
  --bg-mod-hover: rgba(189,85,255,.13); --bg-mod-active: rgba(189,85,255,.2); --bg-mod-selected: rgba(189,85,255,.28);
  --text-normal: #eee5ff; --text-muted: #b4a2d2; --text-link: #dc9bff;
  --header-primary: #fff7ff; --header-secondary: #d5c4eb; --brand-500: #bd55ff; --brand-560: #7d31b3;
  --channel-icon: #b28bd0; --interactive-normal: #cdb8e7; --interactive-hover: #fff4ff; --interactive-active: #fff;
  --scrollbar-thin-thumb: #60308b; --scrollbar-thin-track: #20143a; --input-background: #2c1a4a; --background-accent: #bd55ff; --accent: #bd55ff; --theme-glow: rgba(189,85,255,.2);
}
body.theme-forest {
  --bg-primary: #081713; --bg-secondary: #102720; --bg-secondary-alt: #17362c;
  --bg-tertiary: #040c09; --bg-floating: #0b1d17;
  --bg-mod-hover: rgba(85,217,155,.12); --bg-mod-active: rgba(85,217,155,.18); --bg-mod-selected: rgba(85,217,155,.25);
  --text-normal: #e1f4e9; --text-muted: #91b5a2; --text-link: #6de4ae;
  --header-primary: #f3fff7; --header-secondary: #bdd9c8; --brand-500: #55d99b; --brand-560: #268f63;
  --channel-icon: #82c6a3; --interactive-normal: #b2d6c0; --interactive-hover: #f0fff6; --interactive-active: #fff;
  --scrollbar-thin-thumb: #246b4c; --scrollbar-thin-track: #102720; --input-background: #17362c; --background-accent: #55d99b; --accent: #55d99b; --theme-glow: rgba(85,217,155,.18);
}
body.theme-ember {
  --bg-primary: #140b0b; --bg-secondary: #211212; --bg-secondary-alt: #321919;
  --bg-tertiary: #090505; --bg-floating: #180909;
  --bg-mod-hover: rgba(255,75,75,.12); --bg-mod-active: rgba(255,75,75,.18); --bg-mod-selected: rgba(255,75,75,.25);
  --text-normal: #f5e3e0; --text-muted: #be9590; --text-link: #ff8585;
  --header-primary: #fff5f3; --header-secondary: #e0bbb5; --brand-500: #ff4b4b; --brand-560: #ba2828;
  --channel-icon: #d28e8a; --interactive-normal: #dbb0aa; --interactive-hover: #fff0ee; --interactive-active: #fff;
  --scrollbar-thin-thumb: #6f2424; --scrollbar-thin-track: #211212; --input-background: #321919; --background-accent: #ff4b4b; --accent: #ff4b4b; --theme-glow: rgba(255,75,75,.18);
}

/* Login and registration use the same product shell as the app. */
#login-screen, #register-screen {
  background: radial-gradient(ellipse at 50% 20%, var(--theme-glow), transparent 54%), linear-gradient(135deg, var(--bg-tertiary), var(--bg-primary) 55%, var(--bg-secondary));
}
#login-screen::before, #register-screen::before { background: radial-gradient(ellipse at 50% 30%, var(--theme-glow), transparent 64%); }
#login-screen > .login-box, #register-screen > .login-box {
  border-color: color-mix(in srgb, var(--brand-500) 28%, transparent);
  box-shadow: 0 16px 55px rgba(0,0,0,.62), 0 0 42px var(--theme-glow);
}
#login-screen .login-logo, #register-screen .login-logo { background: var(--brand-500); box-shadow: 0 0 25px var(--theme-glow); }
#login-btn, .login-btn-wide { background: var(--brand-500); color: var(--bg-tertiary); font-weight: 700; }
#login-btn:hover, .login-btn-wide:hover { background: var(--brand-560); color: #fff; }
.login-field input:focus { box-shadow: 0 0 0 2px var(--brand-500); }
#login-screen a, #register-screen a, #register-screen button[style*="5865F2"] { color: var(--text-link) !important; }

/* A profile color is edited after sign-in, not during authentication. */
#login-screen .login-field:has(.color-picker-row),
#register-screen .login-field:has(#reg-color),
#register-screen .login-field:has(#legacy-reg-colors) { display: none; }

/* Theme cards in Settings -> Appearance. */
.vrv-theme-intro { margin: -4px 0 14px; }
.vrv-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.vrv-theme-card { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: var(--bg-tertiary); color: var(--text-normal); text-align: left; cursor: pointer; transition: border-color .16s, transform .16s, background .16s; }
.vrv-theme-card:hover { transform: translateY(-1px); border-color: var(--brand-500); background: var(--bg-mod-hover); }
.vrv-theme-card.selected { border-color: var(--brand-500); box-shadow: 0 0 0 1px var(--brand-500), 0 8px 24px rgba(0,0,0,.18); }
.vrv-theme-preview { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, var(--theme-preview-a), var(--theme-preview-b)); color: var(--theme-preview-b); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.vrv-theme-preview i { font-style: normal; font-size: 22px; color: var(--theme-preview-b); text-shadow: 0 0 10px var(--theme-preview-b); }
.vrv-theme-preview b { position: absolute; width: 8px; height: 8px; margin: 27px 0 0 27px; border-radius: 50%; background: var(--theme-preview-b); }
.vrv-theme-card-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vrv-theme-card-copy strong { color: var(--header-primary); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrv-theme-card-copy small { color: var(--text-muted); font-size: 11px; line-height: 1.25; }
.vrv-theme-check { display: none; margin-left: auto; color: var(--brand-500); font-weight: 800; }
.vrv-theme-card.selected .vrv-theme-check { display: block; }
@media (max-width: 600px) { .vrv-theme-grid { grid-template-columns: 1fr; } }

/* === v11: XP BAR === */
.xp-bar-container {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.xp-bar-label { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.xp-level-badge { color: var(--yellow-300); font-weight: 600; }
.xp-bar-track {
  flex: 1;
  height: 3px;
  background: var(--bg-mod-selected);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-500), #eb459e);
  border-radius: 2px;
  transition: width 0.5s ease;
  position: relative;
}
.xp-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s infinite;
}

/* === v11: TOAST NOTIFICATIONS === */
.toast-notification {
  background: var(--bg-floating);
  color: var(--text-normal);
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  font-size: 14px;
  font-weight: 500;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
  border-left: 4px solid var(--brand-500);
  max-width: 360px;
  pointer-events: auto;
}
.toast-notification.toast-visible {
  transform: translateY(0);
  opacity: 1;
}
.toast-notification.toast-hiding {
  transform: translateY(20px);
  opacity: 0;
}

/* === v11: LEADERBOARD PANEL === */
.leaderboard-panel {
  position: fixed; top: 48px; right: 0; width: 480px; bottom: 0;
  background: var(--bg-secondary); border-left: 1px solid rgba(0,0,0,0.12); z-index: 30;
  display: flex; flex-direction: column;
  box-shadow: -2px 0 8px rgba(0,0,0,0.2);
  animation: slideInRight 0.25s ease;
}
.leaderboard-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid rgba(0,0,0,0.12);
  font-weight: 600; color: var(--header-primary); font-size: 18px;
}
.leaderboard-header button {
  background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px;
}
.leaderboard-header button:hover { color: var(--interactive-hover); }
.leaderboard-table { flex: 1; overflow-y: auto; padding: 8px 0; }
.leaderboard-row {
  display: grid; grid-template-columns: 50px 1fr 80px 100px;
  align-items: center; padding: 10px 16px;
  transition: background 0.1s;
}
.leaderboard-row:not(.leaderboard-header-row):hover {
  background: var(--bg-mod-hover);
}
.leaderboard-header-row {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; padding: 8px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}
.lb-rank { font-weight: 600; color: var(--text-muted); }
.lb-user { font-weight: 600; }
.lb-level { color: var(--yellow-300); font-weight: 600; font-size: 13px; }
.lb-xp { color: var(--text-muted); font-size: 13px; }

/* === v11: LEVEL BADGE IN MESSAGES === */
.level-badge {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 10px; font-weight: 700;
  color: var(--yellow-300); background: rgba(240,178,50,0.12);
  padding: 0 4px; border-radius: 3px;
  margin-left: 4px; vertical-align: middle;
}

/* === v11: CUSTOM STATUS DISPLAY === */
.custom-status-display {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-custom-status {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* === v11: NEW ANIMATIONS === */
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes bounceIn {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Message slide-in animation */
.message { animation: slideIn 0.2s ease-out; }

/* Reaction bounce animation */
.reaction-chip { animation: bounceIn 0.2s ease; }

/* Button hover scale */
.icon-btn:hover, .header-icon-btn:hover {
  transform: scale(1.05);
  transition: transform 0.15s ease, background 0.1s, color 0.1s;
}

/* Member item hover */
.member-item { transition: background 0.15s ease; }
.member-item:hover { background: var(--bg-mod-hover); }

/* Channel item hover */
.channel-item { transition: background 0.15s ease, color 0.1s; }

/* Smooth panel transitions */
.search-panel, .pinned-panel, .leaderboard-panel {
  transition: transform 0.25s ease;
}

/* === v11: REDUCE MOTION === */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Unread badge on channels */
.channel-unread-badge {
  background: var(--red-400);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0 4px;
}

/* === v12: DISCORD SETTINGS LAYOUT === */
.settings-nav-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 10px 4px;
  margin-top: 4px;
}
.settings-nav-group-title:first-child {
  margin-top: 0;
}
.settings-banner-color-picker {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 0;
}
.settings-banner-color-opt {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 3px solid transparent; transition: all 0.15s;
}
.settings-banner-color-opt:hover { transform: scale(1.15); }
.settings-banner-color-opt.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--brand-500); }
.settings-about-me-textarea {
  width: 100%; min-height: 80px; background: var(--bg-tertiary); border: 1px solid var(--bg-mod-selected);
  border-radius: 4px; padding: 10px 12px; font-size: 14px; color: var(--text-normal);
  font-family: inherit; resize: vertical; outline: none; line-height: 1.4;
}
.settings-about-me-textarea:focus { border-color: var(--brand-500); }
.settings-dev-info {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12px; color: var(--text-muted);
  background: var(--bg-tertiary); padding: 8px 12px;
  border-radius: 4px; margin-top: 4px; line-height: 1.5;
}
.settings-profile-preview {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-secondary); border-radius: 8px; padding: 16px;
  margin-top: 12px;
}

/* === AVATAR FRAMES === */
.avatar-frame {
  overflow: visible;
}
.avatar-frame::before {
  content: '';
  position: absolute;
  top: -3px; left: -3px; right: -3px; bottom: -3px;
  border-radius: 50%;
  pointer-events: none;
}
/* For msg-avatar which is already position:absolute */
.msg-avatar.avatar-frame::before {
  z-index: -1;
}
/* For member-avatar which is position:relative */
.member-avatar.avatar-frame::before {
  z-index: 0;
}
.member-avatar.avatar-frame > * {
  position: relative;
  z-index: 1;
}
.avatar-frame-gold::before {
  border: 3px solid #FFD700;
  box-shadow: 0 0 8px rgba(255,215,0,0.5);
}
.avatar-frame-silver::before {
  border: 3px solid #C0C0C0;
  box-shadow: 0 0 8px rgba(192,192,192,0.4);
}
.avatar-frame-diamond::before {
  border: 3px solid #B9F2FF;
  box-shadow: 0 0 10px rgba(185,242,255,0.6), 0 0 20px rgba(185,242,255,0.3);
}
.avatar-frame-fire::before {
  border: 3px solid transparent;
  background: linear-gradient(135deg,#ff4500,#ff8c00,#ffd700) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  box-shadow: 0 0 12px rgba(255,69,0,0.5);
}
.avatar-frame-crown::before {
  border: 3px solid transparent;
  background: linear-gradient(135deg,#FFD700,#FFA500) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  box-shadow: 0 0 12px rgba(255,215,0,0.6);
}
.avatar-frame-glow::before {
  border: 3px solid rgba(88,101,242,0.6);
  box-shadow: 0 0 12px rgba(88,101,242,0.4), 0 0 24px rgba(88,101,242,0.2);
}
.avatar-frame-neon::before {
  border: 3px solid #0ff;
  box-shadow: 0 0 8px #0ff, 0 0 16px #0ff, 0 0 24px rgba(0,255,255,0.3);
}
.avatar-frame-rainbow::before {
  border: 3px solid transparent;
  background: conic-gradient(#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rainbow-spin 3s linear infinite;
}
@keyframes rainbow-spin {
  to { filter: hue-rotate(360deg); }
}

/* === BOT TYPING INDICATOR === */
.bot-typing-bar {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 16px;
  margin: 0 16px 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.bot-typing-bar.visible { display: flex; }
.bot-typing-bar .bot-typing-label { font-weight: 500; }
.bot-typing-bar .bot-typing-dots { display: inline-flex; gap: 3px; }
.bot-typing-bar .bot-typing-dots span {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text-muted);
  animation: typingBounce 1.4s infinite ease-in-out;
}
.bot-typing-bar .bot-typing-dots span:nth-child(1) { animation-delay: 0s; }
.bot-typing-bar .bot-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.bot-typing-bar .bot-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

/* === MEMBER TYPING DOTS === */
.member-typing-dots {
  display: none;
  gap: 2px;
  margin-top: 2px;
}
.member-typing-dots.visible { display: flex; }
.member-typing-dots span {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--text-muted);
  animation: typingBounce 1.4s infinite ease-in-out;
}
.member-typing-dots span:nth-child(1) { animation-delay: 0s; }
.member-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.member-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

/* === VRV 1.1.3: VISUAL DEPTH, SEPARATION AND CONTRAST === */
:root {
  --vrv-border: color-mix(in srgb, var(--brand-500) 24%, transparent);
  --vrv-border-soft: color-mix(in srgb, var(--text-normal) 10%, transparent);
  --vrv-surface: color-mix(in srgb, var(--bg-secondary) 84%, var(--brand-500) 16%);
  --vrv-surface-raised: color-mix(in srgb, var(--bg-secondary-alt) 86%, var(--brand-500) 14%);
  --vrv-shadow: rgba(0, 0, 0, .34);
  --vrv-glow: color-mix(in srgb, var(--brand-500) 32%, transparent);
}

#app {
  gap: 0;
  background: var(--bg-tertiary);
}

/* Structural columns: each area gets its own surface and edge. */
.server-list {
  padding: 14px 8px;
  gap: 10px;
  border-right: 1px solid var(--vrv-border-soft);
  background: linear-gradient(180deg, var(--bg-tertiary), color-mix(in srgb, var(--bg-tertiary) 82%, var(--brand-500) 18%));
  box-shadow: inset -1px 0 rgba(255,255,255,.035), 10px 0 28px rgba(0,0,0,.16);
}
.server-icon {
  border: 1px solid var(--vrv-border-soft);
  box-shadow: 0 5px 14px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.05);
  transition: transform .18s ease, border-radius .18s ease, background .18s ease, box-shadow .18s ease;
}
.server-icon:hover,
.server-icon.active {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand-500) 72%, white 8%);
  box-shadow: 0 7px 20px var(--vrv-glow), inset 0 1px rgba(255,255,255,.12);
}
.server-separator { background: var(--vrv-border); box-shadow: 0 1px 5px var(--vrv-glow); }

.channel-sidebar {
  background: linear-gradient(180deg, var(--bg-secondary), color-mix(in srgb, var(--bg-secondary) 88%, var(--brand-500) 12%));
  border-right: 1px solid var(--vrv-border);
  box-shadow: 10px 0 32px rgba(0,0,0,.18), inset -1px 0 rgba(255,255,255,.025);
}
.server-header {
  height: 56px;
  min-height: 56px;
  padding: 0 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary-alt) 70%, var(--brand-500) 30%), var(--bg-secondary));
  border-bottom: 1px solid var(--vrv-border);
  box-shadow: 0 5px 18px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.045);
  letter-spacing: .01em;
}
.server-header:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary-alt) 58%, var(--brand-500) 42%), var(--bg-secondary)); }
.server-channel-header { padding: 12px 14px 8px; border-bottom: 1px solid var(--vrv-border-soft); box-shadow: none; }
.channel-list { padding: 4px 8px 10px; }
.channel-category {
  padding: 14px 8px 5px;
  color: var(--header-secondary);
  letter-spacing: .08em;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.channel-item,
.voice-channel-item {
  min-height: 36px;
  margin: 3px 0;
  padding: 7px 10px;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 9px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.channel-item:hover,
.voice-channel-item:hover {
  transform: translateX(1px);
  border-color: var(--vrv-border-soft);
  background: var(--bg-mod-hover);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 4px 12px rgba(0,0,0,.12);
}
.channel-item.active,
.voice-channel-item.voice-active {
  border-color: var(--vrv-border);
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-500) 22%, var(--bg-mod-selected)), var(--bg-mod-selected));
  box-shadow: inset 3px 0 var(--brand-500), inset 0 1px rgba(255,255,255,.06), 0 6px 15px rgba(0,0,0,.18);
}
.channel-item .hash,
.voice-channel-item .hash {
  width: 22px;
  min-width: 22px;
  margin-right: 1px;
  text-align: center;
  flex: 0 0 22px;
}
.channel-item > span:not(.hash),
.voice-channel-item > span:not(.hash) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voice-user-item { border-radius: 7px; margin: 2px 0; }
.voice-user-item:hover { background: var(--bg-mod-hover); }

/* Voice card: a distinct raised surface with separated controls. */
.voice-panel {
  margin: 8px 8px 7px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--vrv-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--vrv-surface-raised), color-mix(in srgb, var(--bg-tertiary) 72%, var(--brand-500) 28%));
  box-shadow: 0 10px 24px var(--vrv-shadow), inset 0 1px rgba(255,255,255,.055), 0 0 18px rgba(0,0,0,.12);
}
.voice-panel-header {
  min-height: 40px;
  padding: 0 11px;
  gap: 7px;
  border-bottom: 1px solid var(--vrv-border-soft);
  background: color-mix(in srgb, var(--brand-500) 9%, transparent);
}
.voice-panel-header #voice-channel-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-pin-btn {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--interactive-normal);
  cursor: pointer;
}
.voice-pin-btn:hover { border-color: var(--vrv-border); background: var(--bg-mod-hover); color: var(--interactive-hover); }
.voice-panel-users { padding: 6px 8px; max-height: 140px; }
.voice-panel-user {
  min-height: 32px;
  padding: 5px 7px;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
}
.voice-panel-user:hover { border-color: var(--vrv-border-soft); background: var(--bg-mod-hover); }
.voice-panel-user.speaking { border-color: color-mix(in srgb, var(--green-360) 42%, transparent); background: color-mix(in srgb, var(--green-360) 10%, transparent); }
.voice-panel-user > span:not(.speaking-ring):not(.stream-badge),
.voice-panel-user .ping-num { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-avatar-sm { flex: 0 0 24px; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.peer-volume { flex: 0 0 54px; min-width: 38px; margin-left: auto; accent-color: var(--brand-500); }
.voice-setting { padding: 9px 11px; border-top: 1px solid var(--vrv-border-soft); }
.voice-setting label { display: block; margin-bottom: 5px; color: var(--header-secondary); font-size: 11px; letter-spacing: .02em; }
.device-select { border: 1px solid var(--vrv-border-soft); border-radius: 8px; background: var(--bg-tertiary); }
.device-select:hover { border-color: var(--vrv-border); }
.voice-panel-controls {
  padding: 10px 11px;
  gap: 7px;
  border-top: 1px solid var(--vrv-border-soft);
  background: color-mix(in srgb, var(--bg-tertiary) 42%, transparent);
}
.voice-discord-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--vrv-border-soft);
  box-shadow: 0 4px 10px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.06);
}
.voice-discord-btn:hover { transform: translateY(-1px); border-color: var(--vrv-border); box-shadow: 0 6px 14px var(--vrv-glow); }
.voice-status { display: block; text-align: center; color: var(--header-secondary); }

/* Bottom profile card: explicit rows prevent name/status/ping collisions. */
.user-panel {
  height: auto;
  min-height: 76px;
  margin: 8px;
  padding: 10px;
  gap: 9px;
  border: 1px solid var(--vrv-border);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--vrv-surface), color-mix(in srgb, var(--bg-tertiary) 72%, var(--brand-500) 28%));
  box-shadow: 0 10px 24px var(--vrv-shadow), inset 0 1px rgba(255,255,255,.055);
}
.user-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 2px solid color-mix(in srgb, var(--brand-500) 62%, white 6%);
  box-shadow: 0 4px 10px rgba(0,0,0,.3), 0 0 0 3px color-mix(in srgb, var(--brand-500) 12%, transparent);
}
.user-info { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: flex-start; gap: 0; overflow: hidden; }
.user-name,
.user-status,
.custom-status-display,
.my-ping { display: block; width: 100%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-name { line-height: 18px; }
.user-status { line-height: 16px; color: var(--green-360); }
.custom-status-display { line-height: 14px; }
.my-ping { line-height: 14px; color: var(--header-secondary); }
.user-actions { display: flex; flex: 0 0 auto; gap: 3px; }
.user-panel > .icon-btn { width: 30px; min-width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 8px; }
.user-panel > .icon-btn:hover { border-color: var(--vrv-border); background: var(--bg-mod-hover); box-shadow: 0 4px 12px var(--vrv-glow); }

/* Chat surface and message hierarchy. */
.chat-area {
  background: radial-gradient(circle at 50% -20%, color-mix(in srgb, var(--brand-500) 13%, transparent), transparent 48%), var(--bg-primary);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.chat-header {
  height: 56px;
  min-height: 56px;
  padding: 0 18px;
  border-bottom: 1px solid var(--vrv-border);
  box-shadow: 0 5px 18px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.035);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 76%, var(--brand-500) 24%), var(--bg-primary));
}
.channel-hash { color: var(--brand-500); text-shadow: 0 0 12px var(--vrv-glow); }
#current-channel-name { letter-spacing: .01em; }
.chat-header-divider, .header-icon-divider { background: var(--vrv-border); }
.header-icons { gap: 4px; }
.header-icon-btn {
  border: 1px solid transparent;
  border-radius: 8px;
}
.header-icon-btn:hover { border-color: var(--vrv-border); box-shadow: 0 4px 12px var(--vrv-glow); }
.online-badge {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--vrv-border-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-tertiary) 70%, var(--brand-500) 30%);
  color: var(--header-secondary);
  font-variant-numeric: tabular-nums;
}
.messages { padding: 20px 0 8px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand-500) 4%, transparent)); }
.message { margin: 2px 12px; padding: 8px 52px 8px 72px; border: 1px solid transparent; border-radius: 10px; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.message:hover { transform: translateX(1px); border-color: var(--vrv-border-soft); background: var(--bg-mod-hover); box-shadow: 0 5px 14px rgba(0,0,0,.12); }
.msg-header { flex-wrap: wrap; row-gap: 2px; }
.msg-author { text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.msg-time { padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--bg-tertiary) 70%, transparent); font-variant-numeric: tabular-nums; }
.msg-text { color: var(--text-normal); }
.welcome { max-width: 820px; padding: 42px 24px 18px; }
.welcome-icon { border: 1px solid var(--vrv-border); box-shadow: 0 8px 22px rgba(0,0,0,.24), 0 0 22px var(--vrv-glow), inset 0 1px rgba(255,255,255,.07); color: var(--brand-500); }
.message-input-area {
  margin: 10px 14px 14px;
  padding: 9px 11px;
  min-height: 52px;
  border: 1px solid var(--vrv-border);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary-alt) 78%, var(--brand-500) 22%), var(--input-background));
  box-shadow: 0 10px 24px var(--vrv-shadow), inset 0 1px rgba(255,255,255,.05);
}
#message-input { border: 1px solid transparent; background: transparent; border-radius: 9px; }
#message-input:focus { border-color: var(--vrv-border); background: color-mix(in srgb, var(--input-background) 78%, var(--brand-500) 22%); }
.message-input-area .icon-btn { border: 1px solid transparent; border-radius: 9px; }
.message-input-area .icon-btn:hover { border-color: var(--vrv-border); background: var(--bg-mod-hover); box-shadow: 0 4px 12px var(--vrv-glow); }
.input-send-btn.active { background: var(--brand-500); color: var(--bg-tertiary) !important; border-color: color-mix(in srgb, var(--brand-500) 70%, white 10%) !important; box-shadow: 0 4px 14px var(--vrv-glow); }

/* Members column and metadata chips. */
.members-sidebar {
  border-left: 1px solid var(--vrv-border);
  background: linear-gradient(180deg, var(--bg-secondary), color-mix(in srgb, var(--bg-secondary) 86%, var(--brand-500) 14%));
  box-shadow: inset 10px 0 28px rgba(0,0,0,.13);
}
.members-sidebar h3, .role-header { padding-left: 14px; padding-right: 14px; letter-spacing: .08em; border-bottom: 1px solid var(--vrv-border-soft); }
.member-item {
  min-height: 48px;
  margin: 3px 8px;
  padding: 7px 9px;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.member-item:hover { transform: translateX(-1px); border-color: var(--vrv-border-soft); background: var(--bg-mod-hover); box-shadow: 0 5px 14px rgba(0,0,0,.13); }
.member-item > div:nth-of-type(2) { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.member-name, .member-custom-status, .member-game { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-name { line-height: 18px; }
.member-avatar { border: 1px solid rgba(255,255,255,.14); box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.member-avatar .status-dot { border-color: var(--bg-secondary); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.status-online { background: var(--green-360); box-shadow: 0 0 8px color-mix(in srgb, var(--green-360) 72%, transparent); }
.ping-badge, .ping-num { display: inline-flex; align-items: center; min-height: 17px; padding: 1px 5px; border: 1px solid var(--vrv-border-soft); border-radius: 999px; background: var(--bg-tertiary); color: var(--header-secondary); font-variant-numeric: tabular-nums; }
.level-badge, .afk-badge, .stream-badge { border: 1px solid color-mix(in srgb, var(--brand-500) 35%, transparent); border-radius: 999px; }

/* Consistent focus ring makes active controls readable in every skin. */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .channel-sidebar { box-shadow: 8px 0 22px rgba(0,0,0,.22); }
  .user-panel { margin: 7px; padding: 9px; }
  .chat-header { padding-left: 12px; padding-right: 12px; }
  .message-input-area { margin: 8px 9px 10px; }
}

@media (max-width: 620px) {
  .message { margin: 2px 5px; padding: 7px 10px 7px 56px; }
  .message-input-area { border-radius: 12px; }
  .voice-panel { margin: 6px; border-radius: 12px; }
  .user-panel { border-radius: 12px; }
}

/* === VRV 1.1.4: REFERENCE LAYOUT / NESTED PANELS === */
@media (min-width: 901px) {
  html, body { background: #08090d; }
  body {
    background:
      radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--brand-500) 12%, transparent), transparent 42%),
      linear-gradient(135deg, #07080b, color-mix(in srgb, var(--bg-tertiary) 82%, var(--brand-500) 18%) 52%, #07080b);
  }
  #app {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    min-height: 0;
    margin: 10px;
    padding: 7px;
    gap: 7px;
    border: 1px solid var(--vrv-border);
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(145deg, color-mix(in srgb, var(--bg-tertiary) 82%, var(--brand-500) 18%), var(--bg-tertiary));
    box-shadow: 0 22px 60px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.06), 0 0 36px color-mix(in srgb, var(--brand-500) 10%, transparent);
  }
  .server-list,
  .channel-sidebar,
  .chat-area,
  .members-sidebar {
    border: 1px solid var(--vrv-border-soft);
    border-radius: 16px;
    overflow: hidden;
  }
  .server-list {
    width: 80px;
    min-width: 80px;
    padding: 12px 9px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-tertiary) 90%, var(--brand-500) 10%), #090a0d);
    border-color: var(--vrv-border);
    box-shadow: inset 0 1px rgba(255,255,255,.04), 6px 0 22px rgba(0,0,0,.2);
  }
  .server-icon { width: 50px; height: 50px; }
  .server-icon::before { left: -10px; }
  .channel-sidebar {
    width: 278px;
    min-width: 278px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 90%, var(--brand-500) 10%), var(--bg-tertiary));
    border-color: var(--vrv-border);
    box-shadow: 8px 0 28px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.04);
  }
  .server-header {
    height: 58px;
    min-height: 58px;
    padding: 0 18px;
    font-size: 16px;
    border-bottom-color: var(--vrv-border);
    box-shadow: 0 8px 22px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.045);
  }
  .server-channel-header { padding: 15px 17px 10px; }
  .channel-list { padding: 7px 10px 12px; }
  .channel-category { padding-left: 10px; padding-right: 10px; }
  .chat-area {
    min-width: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 92%, var(--brand-500) 8%), var(--bg-primary));
    border-color: var(--vrv-border);
    box-shadow: 0 12px 34px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.04);
  }
  .chat-header {
    position: relative;
    height: 58px;
    min-height: 58px;
    padding: 0 20px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary-alt) 80%, var(--brand-500) 20%), var(--bg-primary));
  }
  .chat-header::after {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--vrv-border), transparent);
    pointer-events: none;
  }
  .messages { padding: 22px 4px 10px; }
  .welcome { padding: 38px 24px 20px; }
  .welcome h2 { font-size: 29px; letter-spacing: -.02em; }
  .message { margin-left: 16px; margin-right: 16px; }
  .message-input-area { margin: 10px 16px 16px; }
  .members-sidebar {
    width: 260px;
    min-width: 260px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 90%, var(--brand-500) 10%), var(--bg-tertiary));
    border-color: var(--vrv-border);
    box-shadow: inset 10px 0 30px rgba(0,0,0,.16), -8px 0 24px rgba(0,0,0,.16);
  }
  .members-sidebar h3 { padding: 18px 15px 12px; margin-bottom: 6px; }
  .role-header { padding-top: 14px; }
}

/* Reference-style card hierarchy inside the channel sidebar. */
.channel-sidebar .channel-list {
  background: linear-gradient(180deg, rgba(255,255,255,.015), transparent 24%);
}
.channel-sidebar .channel-item,
.channel-sidebar .voice-channel-item { position: relative; }
.channel-sidebar .channel-item.active::after,
.channel-sidebar .voice-channel-item.voice-active::after {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 7px;
  width: 3px;
  border-radius: 3px;
  background: var(--brand-500);
  box-shadow: 0 0 10px var(--vrv-glow);
}
.channel-sidebar .voice-panel {
  margin: 10px;
  border-radius: 15px;
  border-color: color-mix(in srgb, var(--brand-500) 38%, var(--vrv-border-soft));
  box-shadow: 0 12px 28px rgba(0,0,0,.32), 0 0 22px color-mix(in srgb, var(--brand-500) 10%, transparent), inset 0 1px rgba(255,255,255,.065);
}
.channel-sidebar .user-panel {
  margin: 10px;
  border-radius: 15px;
  border-color: color-mix(in srgb, var(--brand-500) 32%, var(--vrv-border-soft));
  box-shadow: 0 12px 28px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.065);
}
.channel-sidebar .user-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, color-mix(in srgb, var(--brand-500) 9%, transparent), transparent 44%);
}
.channel-sidebar .user-panel { position: relative; }
.channel-sidebar .user-panel > * { position: relative; z-index: 1; }
.channel-sidebar .user-status { color: var(--green-360); font-weight: 600; }

/* The references use a compact two-row profile block: identity above, actions below. */
@media (min-width: 901px) {
  .channel-sidebar .user-panel {
    min-height: 86px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 9px;
    row-gap: 3px;
  }
  .channel-sidebar .user-avatar { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .channel-sidebar .user-info { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .channel-sidebar .user-panel > .icon-btn { grid-column: 3; grid-row: 1; }
  .channel-sidebar .user-panel > .icon-btn:last-child { grid-row: 2; }
}

/* Make common status and latency indicators read as deliberate chips. */
.member-item .status-dot,
.voice-user-dot,
.user-avatar + .user-info .user-status::before { filter: drop-shadow(0 0 4px currentColor); }
.my-ping, .ping-badge, .ping-num { letter-spacing: .01em; }
.role-header { color: var(--header-secondary); }
.role-header::after { content: ''; flex: 1; height: 1px; background: var(--vrv-border-soft); margin-left: 5px; }

@media (max-width: 900px) {
  #app { border-radius: 0; }
}

@media (max-width: 600px) {
  .voice-join-btn { display: inline-flex; align-items: center; justify-content: center; pointer-events: auto; }
  #app { margin: 0; padding: 0; gap: 0; border: 0; box-shadow: none; }
  .server-list, .channel-sidebar, .chat-area, .members-sidebar { border-radius: 0; border-left: 0; border-right: 0; }
  .channel-sidebar .user-panel { margin: 7px; }
  .channel-sidebar .voice-panel { margin: 6px; }
}

/* Voice quick controls stay visible in the profile card, as in the reference UI. */
.voice-quick-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.voice-quick-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--vrv-border-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-tertiary) 72%, var(--brand-500) 28%);
  font-size: 15px;
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 3px 8px rgba(0,0,0,.18);
}
.voice-quick-btn:hover:not(:disabled) {
  border-color: var(--vrv-border);
  background: var(--bg-mod-hover);
  box-shadow: 0 4px 12px var(--vrv-glow);
  transform: translateY(-1px);
}
.voice-quick-btn.is-active {
  background: color-mix(in srgb, var(--red-400) 84%, var(--bg-tertiary));
  border-color: color-mix(in srgb, var(--red-400) 72%, white 5%);
  color: #fff;
  box-shadow: 0 4px 13px color-mix(in srgb, var(--red-400) 30%, transparent);
}
.voice-quick-btn.is-available { border-color: var(--vrv-border); }
.voice-quick-btn:disabled { opacity: .42; cursor: not-allowed; filter: saturate(.55); }
.voice-panel .voice-setting { display: block; visibility: visible; }
.voice-panel #sensitivity-slider {
  display: block;
  width: 100%;
  min-height: 18px;
  margin-top: 3px;
  accent-color: var(--brand-500);
  cursor: pointer;
}
.voice-panel .device-select { display: block; min-height: 32px; }
.voice-panel-attention {
  animation: voicePanelAttention .9s ease;
}
@keyframes voicePanelAttention {
  0%, 100% { box-shadow: 0 12px 28px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.065); }
  45% { box-shadow: 0 12px 28px rgba(0,0,0,.32), 0 0 0 2px var(--brand-500), 0 0 28px var(--vrv-glow), inset 0 1px rgba(255,255,255,.1); }
}

@media (min-width: 901px) {
  .channel-sidebar .voice-quick-actions { grid-column: 2; grid-row: 2; align-self: center; }
  .channel-sidebar .voice-quick-btn { width: 28px; min-width: 28px; height: 28px; font-size: 14px; }
}

.settings-locked {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 4px 10px;
  border-radius: 4px;
}
/* === USER CONTEXT MENU (Discord-style) === */
.user-context-menu {
  position: fixed; z-index: 200;
  background: var(--bg-floating, #111214);
  border-radius: 4px;
  padding: 6px 8px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  color: var(--text-normal);
  font-size: 14px;
  animation: fadeInScale 0.1s ease;
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.uctx-item {
  padding: 6px 10px; border-radius: 3px; cursor: pointer;
  transition: background 0.1s; display: flex; align-items: center; gap: 8px;
}
.uctx-item:hover { background: var(--brand-500); color: #fff; }
.uctx-item.uctx-danger { color: var(--red-400); }
.uctx-item.uctx-danger:hover { background: var(--red-400); color: #fff; }
.uctx-item.uctx-active { font-weight: 600; }
.uctx-separator { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 0; }
.uctx-header { padding: 4px 10px; font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }

/* === CHANNEL CONTEXT MENU (Discord-style right-click) === */
.channel-context-menu {
  position: fixed; z-index: 200;
  background: var(--bg-floating, #111214);
  border-radius: 4px;
  padding: 6px 8px;
  min-width: 200px;
  max-width: 280px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  color: var(--text-normal);
  font-size: 14px;
  animation: fadeInScale 0.1s ease;
}
.chctx-item {
  padding: 6px 10px; border-radius: 3px; cursor: pointer;
  transition: background 0.1s; display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.chctx-item:hover { background: var(--brand-500, #5865F2); color: #fff; }
.chctx-danger { color: var(--red-400, #f04747); }
.chctx-danger:hover { background: var(--red-400, #f04747); color: #fff; }
.chctx-separator { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 0; }
.chctx-header {
  padding: 4px 10px; font-size: 12px; color: var(--text-muted); font-weight: 600;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 260px;
}
.channel-item.muted-channel { opacity: 0.4; }
.channel-item.muted-channel:hover { opacity: 0.7; }

/* === MODAL (edit profile, profile card) === */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); z-index: 150;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.15s ease;
}
.modal-box {
  background: var(--bg-primary); border-radius: 8px; padding: 24px;
  width: 440px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.modal-box h2 { font-size: 20px; color: var(--header-primary); margin-bottom: 16px; }
.profile-card { text-align: center; padding-top: 0; }
.profile-card-banner { height: 80px; border-radius: 8px 8px 0 0; margin: -24px -24px 0; }
.profile-card-avatar-wrap { margin-top: -30px; margin-bottom: 8px; }
.profile-card-avatar-wrap .msg-avatar { position: relative; margin: 0 auto; }
.profile-card-info { display: flex; justify-content: center; gap: 16px; margin-top: 8px; color: var(--text-muted); font-size: 13px; }
.profile-card-status { margin-top: 8px; color: var(--text-muted); font-size: 14px; }

.settings-avatar-frame-preview {
  display: flex;
  justify-content: center;
  padding: 16px;
  margin-top: 8px;
}

/* === MULTI-USER VIDEO ROOMS === */
.video-channel-item { border-left: 2px solid rgba(255, 196, 94, .2); }
.video-channel-item.video-active {
  background: linear-gradient(90deg, rgba(255, 190, 70, .22), rgba(255, 190, 70, .06));
  color: #ffe0a3;
  box-shadow: inset 3px 0 0 #e8b75b;
}
.video-user-item { padding-left: 30px; opacity: .9; }
.video-room-view {
  flex: 1; min-height: 0; flex-direction: column; gap: 14px; padding: 18px;
  background: radial-gradient(circle at 50% 0%, rgba(235, 184, 86, .12), transparent 42%),
    linear-gradient(145deg, rgba(10, 12, 18, .98), rgba(26, 24, 28, .96));
  overflow: auto;
}
.video-room-header {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border: 1px solid rgba(232, 183, 91, .28); border-radius: 14px;
  background: linear-gradient(145deg, rgba(46, 41, 32, .9), rgba(25, 25, 27, .86));
  box-shadow: 0 12px 28px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.06);
}
.video-room-title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.video-room-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(232,183,91,.14); font-size: 20px; }
.video-room-title-wrap strong { display: block; color: var(--header-primary, #fff); font-size: 16px; }
.video-room-title-wrap span:not(.video-room-icon):not(.video-room-count) { display: block; margin-top: 2px; color: var(--text-muted, #a4a7ad); font-size: 12px; }
.video-room-count { margin-left: 8px; color: #e8c47e; font-size: 12px; white-space: nowrap; }
.video-room-actions { display: flex; align-items: center; gap: 7px; }
.video-room-btn { width: 38px; height: 34px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.05); color: #fff; cursor: pointer; transition: .16s ease; }
.video-room-btn:hover { transform: translateY(-1px); border-color: rgba(232,183,91,.7); background: rgba(232,183,91,.15); }
.video-room-btn.is-muted { background: rgba(237,66,69,.2); border-color: rgba(237,66,69,.7); }
.video-room-btn.video-room-leave { background: rgba(237,66,69,.24); border-color: rgba(237,66,69,.58); }
.video-grid { flex: 1; min-height: 280px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-auto-rows: minmax(180px, 1fr); gap: 12px; align-content: center; }
.video-tile { position: relative; min-height: 180px; overflow: hidden; border: 1px solid rgba(232,183,91,.25); border-radius: 16px; background: #08090c; box-shadow: 0 12px 26px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.07); }
.video-tile video { width: 100%; height: 100%; min-height: 180px; display: block; object-fit: cover; background: radial-gradient(circle, #25262b, #08090c); }
.video-tile-local video { transform: scaleX(-1); }
.video-tile-speaking { border-color: #e8b75b; box-shadow: 0 0 0 2px rgba(232,183,91,.25), 0 14px 30px rgba(0,0,0,.35); }
.video-tile-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 8px; padding: 28px 12px 10px; background: linear-gradient(transparent, rgba(0,0,0,.85)); color: #fff; font-size: 13px; }
.video-tile-state { opacity: .9; white-space: nowrap; }
.video-tile-avatar { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 28px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.4); pointer-events: none; }
.video-tile.has-video .video-tile-avatar { display: none; }

/* === SETTINGS 1.2.8: MOBILE ACCOUNT PASS === */
.settings-mobile-toolbar { display: none; }
.settings-page-heading { margin-bottom: 18px; }
.settings-page-heading h2 { margin-bottom: 8px; }
.settings-content-subtitle { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.45; }
.settings-acct-action-secondary {
  background: transparent;
  color: var(--brand-500);
  border: 1px solid color-mix(in srgb, var(--brand-500) 72%, transparent);
}
.settings-acct-action-secondary:hover { background: var(--bg-mod-hover); }
.settings-password-grid { display: grid; gap: 12px; }
.settings-password-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.settings-password-control { position: relative; display: block; min-width: 0; }
.settings-password-control .settings-input { width: 100%; padding-right: 48px; }
.settings-password-toggle {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--text-muted); cursor: pointer; font-size: 18px;
}
.settings-password-toggle:hover { color: var(--brand-500); background: var(--bg-mod-hover); }
.settings-password-title::before { content: '🔒'; margin-right: 8px; filter: grayscale(.2); }
.settings-save-password { margin-top: 16px; min-width: 170px; }
.settings-danger-title { color: var(--red-400); }
.settings-danger-row { align-items: flex-start; }

@media (max-width: 600px) {
  .settings-overlay { overflow: hidden; }
  .settings-panel { position: relative; min-width: 0; }
  .settings-overlay.open .settings-sidebar {
    position: fixed; inset: 0; width: 100vw; max-height: none; height: 100dvh;
    z-index: 505; display: none; background: var(--bg-secondary);
  }
  .settings-overlay.open .settings-panel.settings-nav-open .settings-sidebar { display: flex; }
  .settings-overlay.open .settings-panel.settings-nav-open .settings-content { visibility: hidden; }
  .settings-mobile-toolbar {
    display: flex; align-items: center; gap: 10px; min-height: 42px;
    margin: 0 54px 16px 0;
  }
  .settings-mobile-nav-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px;
    padding: 9px 13px; border: 1px solid var(--vrv-border-soft);
    border-radius: 12px; background: var(--bg-secondary); color: var(--text-normal);
    font: inherit; font-weight: 700; cursor: pointer;
  }
  .settings-mobile-nav-btn:hover { border-color: var(--brand-500); color: var(--brand-500); }
  .settings-mobile-section-name {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-muted); font-size: 13px;
  }
  .settings-content {
    width: 100vw !important; max-width: none !important; height: 100dvh !important;
    overflow-y: auto; box-sizing: border-box;
    padding: max(78px, calc(64px + env(safe-area-inset-top))) 16px max(34px, env(safe-area-inset-bottom));
  }
  .settings-content h2 { font-size: 30px; line-height: 1.12; margin-bottom: 8px; letter-spacing: -.02em; }
  .settings-content-subtitle { max-width: 32em; font-size: 16px; line-height: 1.45; }
  .settings-esc-btn {
    top: max(12px, env(safe-area-inset-top)); right: 14px;
    width: 48px; height: 48px; border-radius: 15px;
    border-color: color-mix(in srgb, var(--brand-500) 55%, transparent);
    color: var(--brand-500); background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
    font-size: 24px;
  }
  /* There is one close control on mobile; the legacy back button used to sit
     at the same coordinates and swallow taps on the real close button. */
  .settings-mobile-back { display: none !important; }
  .settings-account-card {
    margin: 18px 0 28px; border: 1px solid color-mix(in srgb, var(--brand-500) 70%, transparent);
    border-radius: 18px; background: var(--bg-secondary);
    box-shadow: 0 14px 34px rgba(0,0,0,.36), 0 0 20px color-mix(in srgb, var(--brand-500) 10%, transparent);
  }
  .settings-acct-banner { height: 158px; background: linear-gradient(135deg, #d8ab43, #ee775e 52%, #e23d84); }
  .settings-acct-avatar-row { gap: 12px; padding: 0 16px 18px; margin-top: -48px; align-items: flex-end; }
  .settings-acct-avatar { width: 92px; height: 92px; font-size: 34px; border-width: 7px; }
  .settings-acct-info { min-width: 0; padding-bottom: 4px; }
  .settings-acct-name { font-size: 25px; line-height: 1.1; }
  .settings-acct-role, .settings-acct-email { font-size: 14px; line-height: 1.3; }
  .settings-acct-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 16px 16px; }
  .settings-acct-actions .settings-btn { width: 100%; min-width: 0; min-height: 52px; height: auto; padding: 10px 8px; border-radius: 13px; font-size: 14px; white-space: normal; }
  .settings-section-title.settings-password-title { margin-top: 4px; padding-top: 0; border-top: 0; font-size: 15px; letter-spacing: .7px; }
  .settings-password-grid { gap: 16px; }
  .settings-password-field .settings-label { font-size: 13px; }
  .settings-password-control .settings-input { height: 58px; border: 1px solid color-mix(in srgb, var(--text-muted) 45%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--bg-tertiary) 86%, white 14%); font-size: 17px; }
  .settings-password-toggle { width: 42px; height: 42px; right: 7px; font-size: 20px; }
  .settings-save-password { width: 100%; min-height: 56px; height: auto; margin-top: 20px; border-radius: 14px; font-size: 17px; background: linear-gradient(135deg, #e9bd57, #b98226); color: #17120a; }
  .settings-danger-title { margin-top: 30px; }
  .settings-danger-row { flex-wrap: wrap; gap: 12px; }
  .settings-danger-row > div { flex: 1 1 180px; }
  .settings-danger-row .settings-btn { min-height: 44px; }
}

@media (max-width: 380px) {
  .settings-acct-actions { grid-template-columns: 1fr; }
  .settings-content h2 { font-size: 27px; }
}
.video-room-hint { align-self: center; margin: auto; color: var(--text-muted, #a4a7ad); text-align: center; font-size: 14px; }
#app.video-room-active .messages, #app.video-room-active #typing-indicator, #app.video-room-active #reply-bar, #app.video-room-active .message-input-area { display: none !important; }
#app.video-room-active .chat-area { min-width: 0; }
#app.video-room-active .chat-header .channel-hash { color: #e8b75b; }

@media (max-width: 700px) {
  .call-bar { padding: 8px 10px; gap: 7px; }
  .call-bar-controls { flex-wrap: wrap; justify-content: flex-end; }
  .call-btn { padding: 6px 8px; font-size: 11px; }
  .direct-video-call { padding: 10px; }
  .direct-video-stage { grid-template-columns: 1fr; grid-template-rows: minmax(210px, 1fr) 130px; max-height: none; }
  .direct-video-tile, .direct-video-tile video { min-height: 130px; }
  .video-room-view { padding: 10px; gap: 10px; }
  .video-room-header { align-items: flex-start; flex-direction: column; }
  .video-room-actions { width: 100%; justify-content: flex-end; }
  .video-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(210px, 1fr); }
  .video-tile, .video-tile video { min-height: 210px; }
}

/* === MOBILE CONTACTS / PHONEBOOK SCREEN ===
   The existing friends overlay becomes the contacts surface on phones. The
   desktop friends panel and its server actions remain unchanged. */
@media (max-width: 600px) {
  .friends-overlay.mobile-contacts-mode {
    display: flex;
    z-index: 340;
    background: #0b0b0d;
  }
  .friends-overlay.mobile-contacts-mode .friends-panel {
    display: block;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    background: #0b0b0d;
  }
  .friends-overlay.mobile-contacts-mode .friends-sidebar { display: none; }
  .friends-overlay.mobile-contacts-mode .friends-content {
    width: 100%;
    height: 100%;
    max-width: none !important;
    min-height: 0;
    overflow-y: auto;
    padding: max(18px, env(safe-area-inset-top)) 13px calc(94px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 50% -10%, rgba(225,193,109,.08), transparent 35%),
      #0b0b0d;
    color: #f3f0e9;
    overscroll-behavior: contain;
  }
  .mobile-contacts-screen {
    position: relative;
    min-height: 100%;
    color: #f3f0e9;
  }
  .mobile-contacts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    margin-bottom: 14px;
  }
  .mobile-contacts-header h1 {
    color: #f3f0e9;
    font-size: clamp(30px, 8vw, 39px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 700;
  }
  .mobile-contacts-header-actions { display: flex; align-items: center; gap: 3px; }
  .mobile-contact-icon-btn,
  .mobile-contact-back {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    color: #e1b95b;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 28px;
    line-height: 1;
  }
  .mobile-contact-icon-btn:nth-child(2) { font-size: 25px; }
  .mobile-contact-icon-btn:nth-child(3) { font-size: 27px; }
  .mobile-contact-icon-btn:active,
  .mobile-contact-back:active { background: rgba(225,193,109,.13); transform: scale(.96); }
  .mobile-contact-back { margin-right: 0; font-size: 27px; }
  .mobile-contacts-search {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 56px;
    margin-bottom: 18px;
    padding: 0 17px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    background: rgba(25,26,31,.92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 28px rgba(0,0,0,.2);
  }
  .mobile-contacts-search > span { color: #d1a94f; font-size: 25px; line-height: 1; }
  .mobile-contacts-search input {
    width: 100%;
    min-width: 0;
    height: 52px;
    border: 0;
    outline: 0;
    color: #f3f0e9;
    background: transparent;
    font: inherit;
    font-size: 19px;
  }
  .mobile-contacts-search input::placeholder { color: #8f8a82; opacity: 1; }
  .mobile-contacts-permission {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    min-height: 108px;
    margin: 0 0 20px;
    padding: 15px 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(28,29,33,.94), rgba(18,19,22,.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 30px rgba(0,0,0,.22);
  }
  .mobile-contacts-permission-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 2px solid #d1a94f;
    border-radius: 14px;
    color: #e1c16d;
    font-size: 27px;
  }
  .mobile-contacts-permission-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .mobile-contacts-permission-copy strong { color: #f3f0e9; font-size: 17px; line-height: 1.2; }
  .mobile-contacts-permission-copy span { color: #aaa397; font-size: 14px; line-height: 1.28; }
  .mobile-contacts-permission-btn {
    min-width: 106px;
    min-height: 48px;
    padding: 8px 13px;
    border: 0;
    border-radius: 11px;
    color: #19150b;
    background: linear-gradient(135deg, #e8c66d, #cb9c38);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }
  .mobile-contacts-permission-btn:disabled { opacity: .68; cursor: wait; }
  .mobile-contacts-permission.denied .mobile-contacts-permission-icon { border-color: rgba(225,193,109,.55); color: #c9b98d; }
  .mobile-contacts-list-wrap { position: relative; padding-right: 15px; }
  /* Author CSS display rules can override the browser's [hidden] rule on
     contact rows, groups and the alphabet index. Keep search results strict. */
  .mobile-contacts-screen .search-hidden { display: none !important; }
  .mobile-contacts-group { scroll-margin-top: 18px; }
  .mobile-contacts-group h2 {
    margin: 16px 0 4px;
    color: #d1a94f;
    font-size: 26px;
    line-height: 1;
    font-weight: 600;
  }
  .mobile-contact-row {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 76px;
    padding: 10px 2px 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.075);
    cursor: pointer;
    outline: none;
  }
  .mobile-contact-row:focus-visible { border-radius: 12px; box-shadow: 0 0 0 2px rgba(225,193,109,.75); }
  .mobile-contact-row:active { background: rgba(225,193,109,.07); }
  .mobile-contact-avatar {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    overflow: hidden;
    border: 1px solid rgba(225,193,109,.76);
    border-radius: 50%;
    color: #f3f0e9;
    background: radial-gradient(circle at 32% 25%, #66552d, #241f14 70%);
    font-size: 19px;
    font-weight: 600;
  }
  .mobile-contact-avatar.has-image { background-position: center; background-size: cover; }
  .mobile-contact-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
  .mobile-contact-copy strong { overflow: hidden; color: #f3f0e9; font-size: 18px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-contact-copy span { overflow: hidden; color: #aaa397; font-size: 15px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-contact-copy span.online { color: #d1a94f; }
  .mobile-contact-action {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 82px;
    padding: 8px 0 8px 8px;
    border: 0;
    color: #d1a94f;
    background: transparent;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
  }
  .mobile-contact-action.registered { padding-right: 5px; font-size: 29px; line-height: 1; }
  .mobile-contacts-index {
    position: fixed;
    top: 156px;
    right: 4px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    pointer-events: none;
  }
  .mobile-contacts-index button {
    width: 19px;
    min-height: 17px;
    padding: 0;
    border: 0;
    color: #d1a94f;
    background: transparent;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
  }
  .mobile-contacts-index button:active { color: #fff4d0; transform: scale(1.22); }
  .mobile-contacts-empty {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 34px 16px;
    color: #aaa397;
    text-align: center;
    font-size: 15px;
  }
  .mobile-contacts-empty strong { color: #f3f0e9; font-size: 17px; }
  .mobile-contacts-menu {
    position: absolute;
    top: 54px;
    right: 4px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    min-width: 230px;
    overflow: hidden;
    border: 1px solid rgba(225,193,109,.4);
    border-radius: 13px;
    background: #171518;
    box-shadow: 0 16px 34px rgba(0,0,0,.46);
  }
  .mobile-contacts-menu button { min-height: 45px; padding: 0 14px; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); color: #f3f0e9; background: transparent; text-align: left; font: inherit; cursor: pointer; }
  .mobile-contacts-menu button:last-child { border-bottom: 0; }
  .mobile-contacts-menu button:active { background: rgba(225,193,109,.12); }
  .mobile-contacts-fab {
    position: fixed;
    right: 18px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    z-index: 370;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 50%;
    color: #19150b;
    background: linear-gradient(135deg, #efc968, #c89531);
    box-shadow: 0 9px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(255,235,169,.45);
    font-size: 38px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
  }
  .mobile-contacts-fab:active { transform: scale(.94); }
  .mobile-contact-add-screen { max-width: 560px; margin: 0 auto; }
  .mobile-contact-add-screen .mobile-contacts-header { justify-content: flex-start; }
  .mobile-contact-add-screen .mobile-contacts-header h1 { font-size: 30px; }
  .mobile-contact-add-card { margin-top: 18px; padding: 18px; border: 1px solid rgba(225,193,109,.25); border-radius: 18px; background: rgba(25,26,31,.88); }
  .mobile-contact-add-card p { margin-bottom: 16px; color: #aaa397; font-size: 15px; line-height: 1.45; }
  .mobile-contact-add-input { width: 100%; min-height: 52px; margin-bottom: 12px; padding: 0 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; outline: 0; color: #f3f0e9; background: #101114; font: inherit; font-size: 17px; }
  .mobile-contact-add-input:focus { border-color: #d1a94f; box-shadow: 0 0 0 3px rgba(209,169,79,.15); }
  .mobile-contact-add-submit { width: 100%; min-height: 52px; border: 0; border-radius: 12px; color: #19150b; background: linear-gradient(135deg, #e8c66d, #cb9c38); font: inherit; font-weight: 700; cursor: pointer; }
}

@media (max-width: 380px) {
  .mobile-contacts-permission { grid-template-columns: 46px minmax(0, 1fr); gap: 9px; }
  .mobile-contacts-permission-icon { width: 46px; height: 46px; font-size: 22px; }
  .mobile-contacts-permission-btn { grid-column: 2; justify-self: start; min-height: 42px; }
  .mobile-contact-avatar { width: 50px; height: 50px; flex-basis: 50px; }
  .mobile-contact-copy strong { font-size: 16px; }
  .mobile-contact-copy span { font-size: 14px; }
}

/* The verified registration flow keeps username/password/color from step 1.
   Do not show the obsolete duplicate fields that belonged to the old flow. */
#register-screen #reg-step-2 .login-field:has(#legacy-reg-username),
#register-screen #reg-step-2 .login-field:has(#legacy-reg-password),
#register-screen #reg-step-2 .login-field:has(#legacy-reg-colors) { display: none; }

/* === VRV ROYAL 1.0: BLACK / GOLD REFERENCE SHELL ===
   The reference uses a near-black surface, thin warm-gold dividers and
   restrained highlights. Keep this layer scoped to the default royal skin so
   the other selectable skins remain unchanged. */
body.theme-royal {
  --bg-primary: #080807;
  --bg-secondary: #0f0e0b;
  --bg-secondary-alt: #17130d;
  --bg-tertiary: #030303;
  --bg-floating: #11100c;
  --bg-mod-hover: rgba(211, 160, 61, .10);
  --bg-mod-active: rgba(211, 160, 61, .16);
  --bg-mod-selected: rgba(211, 160, 61, .20);
  --text-normal: #eee8da;
  --text-muted: #a79a84;
  --text-link: #e7b951;
  --header-primary: #fff8e7;
  --header-secondary: #c9b995;
  --brand-500: #d6a640;
  --brand-560: #a87522;
  --channel-icon: #cba35c;
  --interactive-normal: #c6b28b;
  --interactive-hover: #fff2c9;
  --interactive-active: #fffaf0;
  --scrollbar-thin-thumb: #62461a;
  --scrollbar-thin-track: #0d0c09;
  --input-background: #15120d;
  --background-accent: #d6a640;
  --accent: #d6a640;
  --theme-glow: rgba(214, 166, 64, .18);
  --vrv-border: rgba(214, 166, 64, .42);
  --vrv-border-soft: rgba(214, 166, 64, .22);
  --vrv-surface: #12100c;
  --vrv-surface-raised: #18140d;
  --vrv-shadow: rgba(0, 0, 0, .58);
  --vrv-glow: rgba(214, 166, 64, .24);
}

body.theme-royal,
body.theme-royal #app {
  background: #030303;
}

body.theme-royal {
  background:
    radial-gradient(circle at 50% -14%, rgba(214, 166, 64, .10), transparent 34%),
    linear-gradient(135deg, #020202 0%, #0b0906 52%, #020202 100%);
}

body.theme-royal .brand-watermark {
  opacity: .20;
  background-size: min(70vw, 84vh) auto;
  filter: sepia(.25) saturate(.7) brightness(.58) contrast(1.18);
  mix-blend-mode: screen;
}

/* The outer shell and the four columns are visibly separated, like the
   reference. The low-opacity inner line gives each surface a bevel without
   turning every panel into a glowing rectangle. */
body.theme-royal #app {
  border-color: rgba(214, 166, 64, .48);
  box-shadow: 0 24px 70px rgba(0,0,0,.78), inset 0 1px rgba(255,248,221,.07), 0 0 36px rgba(214,166,64,.08);
}

body.theme-royal .server-list,
body.theme-royal .channel-sidebar,
body.theme-royal .chat-area,
body.theme-royal .members-sidebar {
  border-color: rgba(214, 166, 64, .34);
  background-color: #070706;
  box-shadow: inset 0 1px rgba(255,248,221,.045), 0 14px 34px rgba(0,0,0,.34);
}

body.theme-royal .server-list {
  background: linear-gradient(180deg, #050504, #0c0905 78%, #050504);
}

body.theme-royal .server-icon {
  border-color: rgba(214,166,64,.20);
  background: rgba(16, 13, 8, .86);
  color: #cdb889;
}

body.theme-royal .server-icon:hover,
body.theme-royal .server-icon.active {
  border-color: #d6a640;
  background: radial-gradient(circle at 50% 25%, rgba(214,166,64,.32), rgba(37,25,8,.84));
  color: #fff4ce;
  box-shadow: 0 0 0 1px rgba(214,166,64,.25), 0 8px 22px rgba(214,166,64,.20), inset 0 1px rgba(255,255,255,.12);
}

body.theme-royal .channel-sidebar {
  background: linear-gradient(180deg, #110e09 0%, #090806 72%, #050504 100%);
  box-shadow: inset -1px 0 rgba(255,255,255,.035), 12px 0 34px rgba(0,0,0,.38);
}

body.theme-royal .server-header,
body.theme-royal .chat-header {
  background: linear-gradient(180deg, rgba(27, 20, 10, .98), rgba(8, 8, 7, .98));
  border-color: rgba(214,166,64,.38);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 9px 24px rgba(0,0,0,.32);
}

body.theme-royal .server-header:hover {
  background: linear-gradient(180deg, rgba(42, 29, 11, .98), rgba(12, 10, 7, .98));
}

body.theme-royal .server-channel-header,
body.theme-royal .channel-category,
body.theme-royal .role-header {
  border-color: rgba(214,166,64,.19);
}

body.theme-royal .channel-category,
body.theme-royal .role-header {
  color: #aa9469;
}

body.theme-royal .channel-item,
body.theme-royal .voice-channel-item {
  color: #c9bda6;
  border-color: transparent;
}

body.theme-royal .channel-item:hover,
body.theme-royal .voice-channel-item:hover {
  color: #fff4d2;
  border-color: rgba(214,166,64,.30);
  background: linear-gradient(90deg, rgba(214,166,64,.13), rgba(214,166,64,.035));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 5px 14px rgba(0,0,0,.28);
}

body.theme-royal .channel-item.active,
body.theme-royal .voice-channel-item.voice-active {
  color: #fff7df;
  border-color: rgba(214,166,64,.78);
  background: linear-gradient(90deg, rgba(214,166,64,.28), rgba(214,166,64,.09));
  box-shadow: inset 3px 0 #e6b74c, inset 0 1px rgba(255,255,255,.11), 0 7px 20px rgba(214,166,64,.12);
}

body.theme-royal .channel-item.active::after,
body.theme-royal .voice-channel-item.voice-active::after {
  background: #f0c768;
  box-shadow: 0 0 10px rgba(240,199,104,.8);
}

body.theme-royal .chat-area {
  position: relative;
  background:
    radial-gradient(ellipse at 54% 42%, rgba(214,166,64,.055), transparent 45%),
    linear-gradient(180deg, #0a0907, #050504 78%, #0a0805);
}

body.theme-royal .chat-area::before {
  content: '';
  position: absolute;
  inset: 58px 0 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 44%, rgba(214,166,64,.06), transparent 46%);
  z-index: 0;
}

body.theme-royal .chat-area > * {
  position: relative;
  z-index: 1;
}

body.theme-royal .chat-header {
  color: #fff5d9;
}

body.theme-royal .channel-hash,
body.theme-royal .welcome-icon {
  color: #e3b450;
  text-shadow: 0 0 14px rgba(227,180,80,.38);
}

body.theme-royal .header-icon-btn,
body.theme-royal .icon-btn,
body.theme-royal .voice-pin-btn {
  color: #cbb789;
}

body.theme-royal .header-icon-btn:hover,
body.theme-royal .icon-btn:hover,
body.theme-royal .voice-pin-btn:hover {
  color: #fff4cf;
  border-color: rgba(214,166,64,.58);
  background: rgba(214,166,64,.13);
  box-shadow: 0 5px 15px rgba(214,166,64,.16);
}

body.theme-royal .online-badge {
  color: #e7d6ad;
  border-color: rgba(214,166,64,.36);
  background: rgba(214,166,64,.08);
}

body.theme-royal .messages {
  background: linear-gradient(180deg, transparent 72%, rgba(214,166,64,.035));
}

body.theme-royal .message:hover {
  border-color: rgba(214,166,64,.22);
  background: rgba(214,166,64,.055);
  box-shadow: 0 6px 18px rgba(0,0,0,.30);
}

body.theme-royal .msg-author {
  color: #fff2c9;
}

body.theme-royal .msg-time,
body.theme-royal .level-badge,
body.theme-royal .afk-badge,
body.theme-royal .stream-badge,
body.theme-royal .ping-badge,
body.theme-royal .ping-num {
  border-color: rgba(214,166,64,.30);
  background: rgba(214,166,64,.08);
  color: #d8c38e;
}

body.theme-royal .message-input-area {
  border-color: rgba(214,166,64,.50);
  background: linear-gradient(180deg, rgba(33,24,10,.96), rgba(12,10,7,.98));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.46), 0 0 20px rgba(214,166,64,.08);
}

body.theme-royal #message-input {
  color: #fff6df;
}

body.theme-royal #message-input::placeholder {
  color: #a89675;
}

body.theme-royal .input-send-btn.active,
body.theme-royal .btn-primary,
body.theme-royal .settings-btn-primary,
body.theme-royal .login-btn-wide,
body.theme-royal #login-btn {
  border-color: #f0c768 !important;
  background: linear-gradient(135deg, #f0c768, #bd8627) !important;
  color: #100c05 !important;
  box-shadow: 0 6px 18px rgba(214,166,64,.24), inset 0 1px rgba(255,255,255,.38);
}

body.theme-royal .input-send-btn.active:hover,
body.theme-royal .btn-primary:hover,
body.theme-royal .settings-btn-primary:hover,
body.theme-royal .login-btn-wide:hover,
body.theme-royal #login-btn:hover {
  background: linear-gradient(135deg, #ffe08b, #d8a23c) !important;
  color: #080604 !important;
}

/* Raised voice card and clear mute/deafen/call states. */
body.theme-royal .voice-panel,
body.theme-royal .user-panel {
  border-color: rgba(214,166,64,.54);
  background: linear-gradient(145deg, #1a140b, #0b0906 74%);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 13px 30px rgba(0,0,0,.55), 0 0 18px rgba(214,166,64,.07);
}

body.theme-royal .voice-panel-header,
body.theme-royal .voice-panel-controls,
body.theme-royal .voice-setting {
  border-color: rgba(214,166,64,.20);
  background: rgba(214,166,64,.055);
}

body.theme-royal .voice-discord-btn,
body.theme-royal .voice-quick-btn {
  border-color: rgba(214,166,64,.34);
  background: rgba(10,8,5,.78);
  color: #e2c78f;
}

body.theme-royal .voice-discord-btn:hover,
body.theme-royal .voice-quick-btn:hover:not(:disabled) {
  border-color: #e2b451;
  background: rgba(214,166,64,.17);
  color: #fff3cb;
}

body.theme-royal .voice-discord-btn.muted,
body.theme-royal .voice-discord-btn.deafened,
body.theme-royal .voice-discord-btn.vd-leave:hover {
  background: #8f2d25;
  border-color: #db6b51;
  color: #fff2ed;
  box-shadow: 0 5px 14px rgba(143,45,37,.28);
}

body.theme-royal .members-sidebar {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #100d08, #070605 74%, #0c0804);
}

body.theme-royal .members-sidebar::after {
  content: '';
  position: absolute;
  right: -12%;
  bottom: -2%;
  width: 120%;
  height: 46%;
  pointer-events: none;
  opacity: .62;
  background:
    radial-gradient(ellipse at 87% 96%, rgba(214,166,64,.30), transparent 52%),
    radial-gradient(circle at 72% 80%, #e8b54b 0 1px, transparent 2px),
    radial-gradient(circle at 82% 65%, #e8b54b 0 1px, transparent 2px),
    radial-gradient(circle at 91% 76%, #f2cf79 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 64% 91%, #ba7d1d 0 1px, transparent 2px),
    radial-gradient(circle at 76% 94%, #e8b54b 0 1px, transparent 2px),
    radial-gradient(circle at 96% 52%, #e8b54b 0 1px, transparent 2px),
    radial-gradient(ellipse at 88% 108%, transparent 0 26%, rgba(214,166,64,.26) 27% 27.5%, transparent 28% 38%, rgba(214,166,64,.18) 39% 39.5%, transparent 40%);
  filter: blur(.15px);
}

body.theme-royal .members-sidebar > * {
  position: relative;
  z-index: 1;
}

body.theme-royal .members-sidebar h3 {
  color: #e7d09d;
  border-color: rgba(214,166,64,.25);
}

body.theme-royal .member-item:hover,
body.theme-royal .voice-panel-user:hover {
  border-color: rgba(214,166,64,.28);
  background: rgba(214,166,64,.08);
}

body.theme-royal .status-online {
  box-shadow: 0 0 0 2px #090806, 0 0 9px rgba(35,165,89,.88);
}

body.theme-royal .app-mode-switch {
  border-color: rgba(214,166,64,.28);
  background: rgba(11,9,6,.84);
}

body.theme-royal .app-mode-switch button {
  color: #ad9d79;
}

body.theme-royal .app-mode-switch button.active[data-vrv-mode="messages"],
body.theme-royal .app-mode-switch button.active[data-vrv-mode="game"] {
  border-color: #d6a640;
  background: linear-gradient(135deg, rgba(214,166,64,.32), rgba(111,69,14,.26));
  color: #fff3cc;
  box-shadow: 0 0 12px rgba(214,166,64,.15), inset 0 1px rgba(255,255,255,.12);
}

body.theme-royal ::selection { background: rgba(214,166,64,.32); color: #fff8e7; }
body.theme-royal input:focus,
body.theme-royal textarea:focus { box-shadow: 0 0 0 2px #d6a640; }
body.theme-royal ::-webkit-scrollbar-thumb { background: rgba(214,166,64,.24); }
body.theme-royal ::-webkit-scrollbar-thumb:hover { background: rgba(240,199,104,.52) !important; }

@media (max-width: 900px) {
  body.theme-royal #app { background: #050504; }
  body.theme-royal .members-sidebar::after { display: none; }
}

@media (max-width: 600px) {
  body.theme-royal .chat-area {
    background: linear-gradient(180deg, #0b0907, #050504 82%, #0a0805);
  }
  body.theme-royal .chat-header,
  body.theme-royal .server-header {
    box-shadow: inset 0 1px rgba(255,255,255,.05), 0 7px 18px rgba(0,0,0,.32);
  }
  body.theme-royal .message-input-area {
    border-radius: 13px;
  }
}

/* Interaction layer contract.
   Keep transient UI above mobile navigation and drawers while preserving
   the existing critical dialogs (voice join, forward and SMS pairing). */
:root {
  --vrv-layer-modal: 700;
  --vrv-layer-profile: 8000;
  --vrv-layer-context: 9000;
}
.modal-overlay { z-index: var(--vrv-layer-modal); }
.user-context-menu,
.channel-context-menu,
#msg-context-menu,
.context-menu { z-index: var(--vrv-layer-context); }
.user-profile-popup { z-index: var(--vrv-layer-profile); }

/* === MODE SELECTOR + DISCORD-LIKE GAMING SPACE === */
.mode-picker {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 0, rgba(214,166,64,.2), rgba(4,5,8,.94) 55%), rgba(4,5,8,.92);
  backdrop-filter: blur(12px);
}
.mode-picker[hidden] { display: none !important; }
.mode-picker-card { width: min(620px, 100%); padding: 34px; border: 1px solid rgba(214,166,64,.3); border-radius: 24px; background: linear-gradient(145deg, rgba(24,22,18,.98), rgba(12,13,18,.98)); box-shadow: 0 28px 90px rgba(0,0,0,.56), inset 0 1px rgba(255,255,255,.08); color: var(--text-normal); }
.mode-picker-mark { width: 60px; height: 60px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 18px; background: linear-gradient(135deg, #f0c769, #9b6920); color: #17120b; font-size: 31px; box-shadow: 0 12px 30px rgba(214,166,64,.25); }
.mode-picker-kicker, .gaming-workspace-kicker, .mobile-game-kicker { color: #d6a640; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mode-picker-card h1 { margin: 6px 0 8px; color: var(--header-primary); font-size: 34px; }
.mode-picker-card > p { margin: 0 0 22px; color: var(--text-muted); line-height: 1.55; }
.mode-picker-options { display: grid; gap: 11px; }
.mode-picker-option { width: 100%; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; color: var(--text-normal); background: rgba(25,26,32,.8); text-align: left; cursor: pointer; transition: transform .16s, border-color .16s, background .16s; }
.mode-picker-option:hover { transform: translateY(-2px); border-color: rgba(214,166,64,.75); background: rgba(48,40,25,.82); }
.mode-picker-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(214,166,64,.16); font-size: 22px; }
.mode-picker-option strong, .mode-picker-option small { display: block; }
.mode-picker-option strong { color: var(--header-primary); font-size: 16px; }
.mode-picker-option small { margin-top: 4px; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.mode-picker-arrow { color: #d6a640; font-size: 27px; }
.gaming-workspace { width: min(1180px, 100%); margin: 0 auto; }
.gaming-workspace[hidden] { display: none !important; }
.gaming-workspace-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.gaming-workspace-header h2 { margin: 5px 0 6px; color: var(--header-primary); font-size: clamp(26px, 3vw, 38px); }
.gaming-workspace-header p { max-width: 700px; margin: 0; color: var(--text-muted); line-height: 1.5; }
.gaming-mode-switch, .gaming-card-actions button, .gaming-room-shortcuts button { border: 1px solid rgba(214,166,64,.38); border-radius: 10px; padding: 10px 13px; color: #fff4d8; background: rgba(111,74,24,.25); cursor: pointer; font-weight: 700; white-space: nowrap; }
.gaming-mode-switch:hover, .gaming-card-actions button:hover, .gaming-room-shortcuts button:hover { border-color: #e5bd65; background: rgba(111,74,24,.45); }
.gaming-workspace-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 14px; }
.gaming-workspace-card { min-width: 0; padding: 18px; border: 1px solid rgba(214,166,64,.2); border-radius: 16px; background: linear-gradient(145deg, rgba(28,27,25,.94), rgba(16,17,23,.88)); box-shadow: 0 16px 34px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.04); }
.gaming-card-heading { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.gaming-card-heading > span { font-size: 22px; }
.gaming-card-heading h3 { margin: 0; color: var(--header-primary); font-size: 16px; }
.gaming-card-heading small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.gaming-community-list { display: grid; gap: 7px; min-height: 58px; }
.gaming-community-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px; border: 1px solid transparent; border-radius: 11px; color: var(--text-normal); background: rgba(8,9,13,.42); text-align: left; cursor: pointer; }
.gaming-community-item:hover, .gaming-community-item.active { border-color: rgba(214,166,64,.48); background: rgba(111,74,24,.2); }
.gaming-community-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: #2f4eb6; color: #fff; font-weight: 800; }
.gaming-community-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gaming-community-copy strong { overflow: hidden; color: var(--header-primary); text-overflow: ellipsis; white-space: nowrap; }
.gaming-community-copy small, .gaming-community-empty { color: var(--text-muted); font-size: 12px; }
.gaming-community-empty { padding: 8px 0; }
.gaming-card-actions, .gaming-room-shortcuts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.gaming-game-card { width: 100%; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px; border: 1px solid rgba(214,166,64,.28); border-radius: 13px; color: var(--text-normal); background: linear-gradient(135deg, rgba(61,45,25,.72), rgba(23,26,44,.82)); text-align: left; cursor: pointer; }
.gaming-game-card:hover { border-color: #e5bd65; transform: translateY(-1px); }
.gaming-game-cover { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle at 50% 45%, #38e7d3, #11233e 62%, #090d1c); color: #fff; font-size: 27px; }
.gaming-game-card strong, .gaming-game-card small { display: block; }
.gaming-game-card strong { color: #fff4d8; letter-spacing: .08em; }
.gaming-game-card small { margin-top: 4px; color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.gaming-game-card b { color: #e5bd65; font-size: 12px; white-space: nowrap; }
.gaming-coming-soon { margin-top: 12px; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.gaming-rooms-card { margin-top: 14px; }
.games-module-panel { position: relative; }
.games-module-back { position: absolute; top: 10px; left: 10px; z-index: 2; border: 1px solid rgba(229,189,101,.45); border-radius: 8px; padding: 7px 10px; color: #fff4d8; background: rgba(8,11,24,.84); cursor: pointer; font-weight: 700; }
.games-module-back:hover { background: rgba(73,53,29,.94); }

/* Mobile gaming workspace */
.mobile-game-view { display: none; }
.mobile-game-view.open { display: block; }
.mobile-game-header, .mobile-game-section { color: var(--text-normal); }
.mobile-game-title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mobile-game-title-wrap > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(214,166,64,.18); font-size: 22px; }
.mobile-game-title-wrap strong, .mobile-game-title-wrap small { display: block; }
.mobile-game-title-wrap strong { color: var(--header-primary); font-size: 18px; }
.mobile-game-title-wrap small { margin-top: 2px; color: var(--text-muted); font-size: 11px; }
.mobile-messenger-mode-btn { width: 42px; height: 42px; border: 1px solid rgba(214,166,64,.4); border-radius: 12px; color: #fff4d8; background: rgba(111,74,24,.28); font-size: 19px; cursor: pointer; }
.mobile-game-section { margin-top: 20px; }
.mobile-game-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mobile-game-section-head h1, .mobile-game-section-head h2 { margin: 4px 0 0; color: var(--header-primary); font-size: 22px; }
.mobile-game-section-head > button { width: 38px; height: 38px; border: 1px solid rgba(214,166,64,.36); border-radius: 10px; color: #fff4d8; background: rgba(111,74,24,.22); font-size: 22px; cursor: pointer; }
.mobile-game-count { color: #d6a640; font-size: 12px; font-weight: 800; }
.mobile-game-description { margin: 7px 0 12px; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.mobile-game-server-list { display: grid; gap: 7px; }
.mobile-game-server, .mobile-game-room-link { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 9px 10px; border: 1px solid rgba(214,166,64,.18); border-radius: 13px; color: var(--text-normal); background: rgba(24,23,20,.78); text-align: left; cursor: pointer; }
.mobile-game-server.active { border-color: rgba(214,166,64,.66); background: rgba(111,74,24,.22); }
.mobile-game-server-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 40px; border-radius: 12px; background: #2f4eb6; color: #fff; font-weight: 800; }
.mobile-game-server-copy, .mobile-game-room-link > span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.mobile-game-server-copy strong, .mobile-game-room-link strong { color: var(--header-primary); font-size: 14px; }
.mobile-game-server-copy small, .mobile-game-room-link small { color: var(--text-muted); font-size: 11px; }
.mobile-game-server b, .mobile-game-room-link b { color: #d6a640; font-size: 23px; font-weight: 400; }
.mobile-game-empty { padding: 12px 0; color: var(--text-muted); font-size: 12px; }
.mobile-game-card { width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 10px; padding: 10px; border: 1px solid rgba(44,228,210,.44); border-radius: 14px; color: var(--text-normal); background: linear-gradient(135deg, rgba(20,48,68,.96), rgba(42,21,57,.9)); text-align: left; cursor: pointer; }
.mobile-game-card-art { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle at 50% 45%, #38e7d3, #11233e 62%, #090d1c); color: #fff; font-size: 26px; }
.mobile-game-card strong, .mobile-game-card small { display: block; }
.mobile-game-card strong { color: #fff; letter-spacing: .07em; }
.mobile-game-card small { margin-top: 4px; color: #aeb9c9; font-size: 11px; }
.mobile-game-card b { color: #53e4d3; font-size: 11px; white-space: nowrap; }
.mobile-game-room-link { margin-top: 8px; min-height: 57px; }
.mobile-game-room-link > span:first-child { font-size: 20px; }

@media (max-width: 600px) {
  .mode-picker { align-items: end; padding: 12px; }
  .mode-picker-card { padding: 24px 16px max(24px, env(safe-area-inset-bottom)); border-radius: 20px 20px 14px 14px; }
  .mode-picker-mark { width: 48px; height: 48px; margin-bottom: 11px; border-radius: 14px; font-size: 24px; }
  .mode-picker-card h1 { font-size: 27px; }
  .mode-picker-card > p { font-size: 13px; margin-bottom: 16px; }
  .mode-picker-option { grid-template-columns: 40px minmax(0, 1fr) 18px; padding: 13px 11px; gap: 9px; }
  .mode-picker-icon { width: 38px; height: 38px; font-size: 19px; }
  .mode-picker-option strong { font-size: 14px; }
  .mode-picker-option small { font-size: 11px; }
  body[data-vrv-mode="game"] .mobile-bottom-nav { display: grid !important; }
  body[data-vrv-mode="game"] #app:not(.games-playing) .home-view { display: none !important; }
  body[data-vrv-mode="game"] #app:not(.games-playing) .mobile-game-view.open { display: block; position: fixed; inset: var(--mobile-topbar) 0 calc(64px + env(safe-area-inset-bottom)); overflow-y: auto; padding: 15px 14px 28px; background: radial-gradient(circle at 90% 0, rgba(214,166,64,.16), transparent 38%), linear-gradient(180deg, #100e0b, #070706 78%); z-index: 345; }
  body[data-vrv-mode="game"] #app:not(.games-playing) .mobile-game-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  body[data-vrv-mode="game"] #app:not(.games-playing) .mobile-game-view.open { display: block; }
  body[data-vrv-mode="game"] #app.games-playing .mobile-game-view { display: none !important; }
  body[data-vrv-mode="game"] #app.games-playing .home-view { display: flex !important; }
  body[data-vrv-mode="game"] #app.games-playing .gaming-workspace { display: none !important; }
  body[data-vrv-mode="game"] #app.games-playing .games-module-panel { display: flex !important; position: fixed; inset: var(--mobile-topbar) 0 0; z-index: 500; width: 100%; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; }
  body[data-vrv-mode="game"] #app.games-playing .games-module-panel iframe { min-height: 0; height: 100%; }
  body[data-vrv-mode="game"] #app.games-playing .games-module-back { top: 8px; left: 8px; }
}

/* Final mobile-shell authority: overrides legacy Android game-layer rules. */
body.vrv-mobile-client[data-vrv-mode] #app:not(.mobile-games-open) .mobile-shell { display: flex !important; }
body.vrv-mobile-client[data-vrv-mode] #app .mobile-game-view { position: static !important; inset: auto !important; z-index: auto !important; display: none !important; padding: 16px 14px 28px !important; background: transparent !important; }
body.vrv-mobile-client[data-vrv-mode] #app .mobile-game-view.open { display: block !important; }
body.vrv-mobile-client[data-vrv-mode] #app.mobile-content-open .mobile-shell,
body.vrv-mobile-client[data-vrv-mode] #app.mobile-content-open .mobile-bottom-nav,
body.vrv-mobile-client[data-vrv-mode] #app.mobile-games-open .mobile-shell,
body.vrv-mobile-client[data-vrv-mode] #app.mobile-games-open .mobile-bottom-nav { display: none !important; }
body.vrv-mobile-client[data-vrv-mode] #app:not(.mobile-content-open):not(.mobile-games-open) > .mobile-bottom-nav { display: grid !important; }
body.vrv-mobile-client[data-vrv-mode] #app:not(.mobile-content-open) > .chat-area { display: none !important; }
body.vrv-mobile-client[data-vrv-mode] #app.mobile-content-open > .chat-area { display: flex !important; }

.login-saved-session { margin: 4px 0 12px; padding: 9px 11px; border: 1px solid rgba(201,162,77,.3); border-radius: 9px; color: #c9b98f; background: rgba(201,162,77,.08); font-size: 12px; line-height: 1.4; }
.mobile-shell-danger { width: 100%; min-height: 46px; margin-top: 10px; border: 1px solid rgba(237,66,69,.52); border-radius: 12px; color: #ffb5b7; background: rgba(137,26,29,.22); font-weight: 800; cursor: pointer; }