/* Team-Flow — Glass / Neon (perf-safe: NO backdrop-filter on main panels)
   Floating cards over cube wallpaper. Classic theme untouched. */

html[data-theme="glass"],
html[data-theme="glass"] body {
  --g-bg: #06070c;
  --g-panel: rgba(12, 14, 24, 0.82);
  --g-panel-soft: rgba(14, 16, 28, 0.78);
  --g-main: rgba(10, 12, 22, 0.72);
  --g-border: rgba(140, 120, 255, 0.35);
  --g-cyan: #2ee6ff;
  --g-purple: #a78bfa;
  --g-radius: 18px;
  --g-radius-sm: 12px;
  --accent: #8b7cff;
  --green: #22c55e;
  background: var(--g-bg) !important;
  color: #eef1ff;
}

/* Single fixed wallpaper — no filter()/blur on body (cheap) */
html[data-theme="glass"] body {
  background-color: var(--g-bg) !important;
  background-image: none !important;
}

html[data-theme="glass"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 7, 12, 0.72) 0%, rgba(6, 7, 12, 0.25) 42%, transparent 70%),
    url("/theme-glass-bg.jpg") right center / cover no-repeat;
  opacity: 1;
}

html[data-theme="glass"] #app,
html[data-theme="glass"] #login,
html[data-theme="glass"] #netBar,
html[data-theme="glass"] #searchModal,
html[data-theme="glass"] #cmdk {
  position: relative;
  z-index: 1;
}

/* Snow stays above wallpaper; glass theme does not force blur under it */
html[data-theme="glass"] #tfSnow,
html[data-theme="glass"] #snowCanvas,
html[data-theme="glass"] canvas#snowCanvas,
html[data-theme="glass"] .tf-garland {
  z-index: 3 !important;
  pointer-events: none !important;
}

/* ===== Floating layout ===== */
html[data-theme="glass"] #app {
  gap: 12px;
  padding: 12px;
  box-sizing: border-box;
  background: transparent !important;
  height: 100%;
  max-height: 100%;
}

html[data-theme="glass"] .servers,
html[data-theme="glass"] .channels,
html[data-theme="glass"] main,
html[data-theme="glass"] .members,
html[data-theme="glass"] #memberPanel {
  background: var(--g-panel) !important;
  /* NO backdrop-filter — that was the lag source */
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius) !important;
  box-shadow:
    0 0 0 1px rgba(46, 230, 255, 0.08),
    0 8px 28px rgba(0, 0, 0, 0.45);
}

html[data-theme="glass"] .channels,
html[data-theme="glass"] main {
  overflow: hidden;
}

html[data-theme="glass"] .servers {
  overflow: visible;
  background: rgba(10, 12, 20, 0.88) !important;
  flex: 0 0 72px;
  width: 72px;
  border-radius: 20px !important;
  border-color: rgba(46, 230, 255, 0.22) !important;
}

html[data-theme="glass"] .channels {
  background: var(--g-panel-soft) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.2),
    0 0 24px rgba(120, 80, 220, 0.18),
    0 8px 28px rgba(0, 0, 0, 0.45);
}

html[data-theme="glass"] main {
  background: var(--g-main) !important;
  margin: 0 !important;
  border-color: rgba(46, 230, 255, 0.18) !important;
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.16),
    0 10px 32px rgba(0, 0, 0, 0.5);
}

html[data-theme="glass"] .members,
html[data-theme="glass"] #memberPanel {
  background: var(--g-panel-soft) !important;
  overflow-x: hidden;
  overflow-y: auto;
  border-color: rgba(167, 139, 250, 0.32) !important;
}

/* Headers — solid translucent, no blur */
html[data-theme="glass"] .server-title,
html[data-theme="glass"] #channelHeader,
html[data-theme="glass"] .members-head {
  background: rgba(8, 10, 18, 0.55) !important;
  border-bottom: 1px solid rgba(167, 139, 250, 0.18) !important;
  box-shadow: none !important;
}

html[data-theme="glass"] .server-title span,
html[data-theme="glass"] #serverTitle,
html[data-theme="glass"] #channelTitle {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: #f4f6ff !important;
  font-weight: 750 !important;
}

/* Invite — solid emerald pill */
html[data-theme="glass"] .invite-banner {
  background: linear-gradient(180deg, #34d399, #16a34a) !important;
  border: 1px solid rgba(167, 255, 210, 0.4) !important;
  border-radius: 999px !important;
  color: #04140c !important;
  font-weight: 750 !important;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
html[data-theme="glass"] .invite-banner:hover {
  filter: brightness(1.07);
}
html[data-theme="glass"] .invite-banner::before {
  background: rgba(255,255,255,.2) !important;
}

/* Channels */
html[data-theme="glass"] .section {
  color: #8b93b0 !important;
  letter-spacing: 0.06em;
}
html[data-theme="glass"] .ch,
html[data-theme="glass"] .home-link {
  border-radius: 11px !important;
  color: #a8b0c8 !important;
}
html[data-theme="glass"] .ch:hover,
html[data-theme="glass"] .home-link:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #eef1ff !important;
}

/* Active — purple fill + cyan edge (mockup) */
html[data-theme="glass"] .ch.active,
html[data-theme="glass"] .home-link.active {
  background: linear-gradient(90deg, rgba(120, 70, 220, 0.55), rgba(80, 50, 180, 0.35)) !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 1px rgba(46, 230, 255, 0.45),
    0 0 16px rgba(140, 100, 255, 0.35) !important;
}
html[data-theme="glass"] .ch.active .hash {
  color: #d4c8ff !important;
}

/* Server icons */
html[data-theme="glass"] .server-icon.active,
html[data-theme="glass"] .server-icon:hover {
  background: linear-gradient(135deg, #8b7cff, #2ee6ff) !important;
  box-shadow: 0 0 0 2px rgba(46, 230, 255, 0.35), 0 0 14px rgba(120, 100, 255, 0.4) !important;
}
html[data-theme="glass"] .server-icon::before {
  background: var(--g-cyan) !important;
  box-shadow: 0 0 8px rgba(46, 230, 255, 0.7);
}

/* Voice bar — solid glass look, green rim, no blur */
html[data-theme="glass"] #voiceBar {
  background: rgba(8, 22, 24, 0.9) !important;
  border: 1px solid rgba(46, 220, 160, 0.45) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 12px rgba(34, 197, 94, 0.12) !important;
}
html[data-theme="glass"] #voiceBar .vbtn:not(.leave) {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
}
html[data-theme="glass"] #voiceBar #leaveVoiceBtn,
html[data-theme="glass"] #voiceBar .vbtn.leave {
  background: linear-gradient(180deg, #ef4444, #b91c1c) !important;
  border: 1px solid rgba(255, 150, 160, 0.4) !important;
  color: #fff !important;
  border-radius: 12px !important;
}

/* User bar */
html[data-theme="glass"] .user-bar {
  background: rgba(8, 10, 18, 0.85) !important;
  border-top: 1px solid rgba(167, 139, 250, 0.2) !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: none !important;
}

/* Chat */
html[data-theme="glass"] #messages,
html[data-theme="glass"] #friendsView {
  background: transparent !important;
}
html[data-theme="glass"] .msg:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 10px;
}
html[data-theme="glass"] .msg .time {
  color: #8b93b0 !important;
}
html[data-theme="glass"] .mention {
  background: rgba(140, 110, 255, 0.28) !important;
  color: #ddd6ff !important;
  border-radius: 4px;
}

/* Composer capsule */
html[data-theme="glass"] #msgForm,
html[data-theme="glass"] form#msgForm {
  background: rgba(8, 10, 18, 0.88) !important;
  border: 1px solid rgba(167, 139, 250, 0.28) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 1px rgba(46, 230, 255, 0.06) !important;
  margin: 0 16px 18px !important;
  overflow: hidden;
}
html[data-theme="glass"] #msgInput,
html[data-theme="glass"] #msgForm input,
html[data-theme="glass"] #msgForm textarea {
  background: transparent !important;
  border: none !important;
  color: #eef1ff !important;
  box-shadow: none !important;
}
html[data-theme="glass"] #msgForm:focus-within {
  border-color: rgba(46, 230, 255, 0.4) !important;
}

/* Header chips */
html[data-theme="glass"] .header-util-btn,
html[data-theme="glass"] .header-bug-btn,
html[data-theme="glass"] .header-help-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(167, 139, 250, 0.28) !important;
  border-radius: 999px !important;
  color: #c9d0e8 !important;
}
html[data-theme="glass"] .header-util-btn:hover,
html[data-theme="glass"] .header-help-btn:hover {
  background: rgba(140, 110, 255, 0.25) !important;
  color: #fff !important;
}

html[data-theme="glass"] .member:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px;
}
html[data-theme="glass"] .mname {
  color: #e8ecff !important;
}

html[data-theme="glass"] .dm-search {
  background: rgba(8, 10, 18, 0.85) !important;
  border: 1px solid rgba(167, 139, 250, 0.22) !important;
  border-radius: 12px !important;
  color: #eef1ff !important;
}

/* Modals — still no blur (opaque enough) */
html[data-theme="glass"] .settings-card,
html[data-theme="glass"] .edit-modal,
html[data-theme="glass"] .login-card,
html[data-theme="glass"] .cmdk-card,
html[data-theme="glass"] .search-card {
  background: rgba(16, 18, 30, 0.96) !important;
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="glass"] #login {
  background:
    radial-gradient(700px 400px at 75% 25%, rgba(110, 70, 255, 0.35), transparent 55%),
    linear-gradient(135deg, #06070c, #120e22 55%, #0a1520) !important;
}

html[data-theme="glass"] * {
  scrollbar-color: rgba(130, 140, 190, 0.4) transparent !important;
}
html[data-theme="glass"] *::-webkit-scrollbar-thumb {
  background-color: rgba(130, 140, 190, 0.35) !important;
  border-radius: 8px !important;
}

@media (max-width: 860px) {
  html[data-theme="glass"] #app {
    gap: 0;
    padding: 0;
  }
  html[data-theme="glass"] .servers {
    border-radius: 0 16px 16px 0 !important;
  }
  html[data-theme="glass"] .channels {
    border-radius: 0 16px 16px 0 !important;
  }
  html[data-theme="glass"] .members,
  html[data-theme="glass"] #memberPanel {
    border-radius: 16px 0 0 16px !important;
  }
  html[data-theme="glass"] main {
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: rgba(8, 10, 16, 0.92) !important;
  }
  html[data-theme="glass"] #msgForm {
    border-radius: 16px !important;
    margin: 0 10px calc(12px + env(safe-area-inset-bottom)) !important;
  }
  html[data-theme="glass"] body::before {
    opacity: 0.55;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html[data-theme="glass"] .servers,
  html[data-theme="glass"] .channels,
  html[data-theme="glass"] .members,
  html[data-theme="glass"] #memberPanel,
  html[data-theme="glass"] main,
  html[data-theme="glass"] #voiceBar,
  html[data-theme="glass"] .settings-card,
  html[data-theme="glass"] .user-bar,
  html[data-theme="glass"] #msgForm {
    background: #161824 !important;
  }
  html[data-theme="glass"] body::before {
    opacity: 0.2;
  }
}

/* Self-hosted captcha in Glass theme */
html[data-theme="glass"] #captchaImg {
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(124, 108, 255, 0.08) inset;
}
html[data-theme="glass"] .login-card #captchaReload {
  background: rgba(124, 108, 255, 0.22) !important;
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  color: #eef1ff !important;
}
html[data-theme="glass"] .login-card #captchaReload:hover { background: rgba(124, 108, 255, 0.35) !important; }
html[data-theme="glass"] .captcha-wait {
  background: rgba(124, 108, 255, 0.08);
  border-color: rgba(167, 139, 250, 0.3);
}

/* Voice dock v2 (2026-10-01) — Glass: та же пристыкованная панель, неоновый край */
html[data-theme="glass"] body aside.channels #voiceBar:not(.hidden) {
  background: linear-gradient(180deg, rgba(10, 30, 30, 0.94), rgba(8, 18, 24, 0.94)) !important;
  border: 1px solid rgba(46, 220, 160, 0.42) !important;
  border-bottom: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.4), 0 0 14px rgba(34, 197, 94, 0.10) !important;
}
html[data-theme="glass"] body aside.channels:has(#voiceBar:not(.hidden)) > .user-bar {
  background: rgba(8, 14, 18, 0.9) !important;
  border-top: 1px solid rgba(46, 220, 160, 0.22) !important;
}
html[data-theme="glass"] body aside.channels #voiceBar .vbtn:not(.leave) {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 12px !important;
}
html[data-theme="glass"] body aside.channels #voiceBar .vbtn:not(.leave):hover {
  background: rgba(124, 108, 255, 0.16) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
}
html[data-theme="glass"] body aside.channels #voiceBar .vbtn.on,
html[data-theme="glass"] body aside.channels #voiceBar .vbtn.sharing,
html[data-theme="glass"] body aside.channels #voiceBar #camBtn.sharing {
  background: rgba(34, 197, 94, 0.2) !important;
  border-color: rgba(46, 220, 160, 0.5) !important;
}
html[data-theme="glass"] body aside.channels #voiceBar #leaveVoiceBtn {
  background: linear-gradient(180deg, #ef4444, #b91c1c) !important;
  border: 1px solid rgba(255, 150, 160, 0.4) !important;
  border-radius: 12px !important;
}
html[data-theme="glass"] body aside.channels #voiceBar #pttStatus { background: rgba(167, 139, 250, 0.14); color: #d4ccff !important; }
html[data-theme="glass"] body aside.channels #voiceBar #pttStatus.tx { background: rgba(34, 197, 94, 0.24); color: #a7f3d0 !important; }
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="glass"] body aside.channels #voiceBar:not(.hidden) { background: #10201f !important; }
}