/* GamerZone · V3 additions — context menus & extras */

.ctx-menu {
  position: fixed; z-index: 200; min-width: 190px; padding: 6px;
  background: var(--glass-strong); backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid var(--stroke-strong); border-radius: 12px; box-shadow: var(--shadow-soft);
  animation: rise .12s; display: flex; flex-direction: column; gap: 1px;
}
.ctx-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 550; color: var(--text-dim); text-align: left; width: 100%;
}
.ctx-item:hover { background: rgba(124,92,255,.18); color: #fff; }
.ctx-item.danger { color: #ff97a8; }
.ctx-item.danger:hover { background: rgba(255,84,112,.18); color: #ff5470; }
.ctx-ico { width: 20px; display: grid; place-items: center; font-size: 14px; }
.ctx-sep { height: 1px; background: var(--stroke-strong); margin: 5px 8px; }

/* ── SVG icon system ──────────────────────────────────────────────────────── */
svg.ic { display: block; flex: none; }
button svg.ic, label svg.ic, a svg.ic { pointer-events: none; }
.icon-btn { display: inline-grid; place-items: center; }
.rail-svg { display: grid; place-items: center; }
.rail-home .rail-svg, .rail-add .rail-svg, .rail-discover .rail-svg { color: inherit; }
.chev, .cgl-chev { display: inline-grid; place-items: center; }
.chan .hash, .ch-title .hash { display: inline-grid; place-items: center; color: var(--text-faint); width: auto; }
.chan.active .hash { color: var(--text); }
.ch-title .hash { color: var(--text-dim); }
.chan-actions button, .chan-group-label button { display: inline-grid; place-items: center; }
.send-btn { display: inline-grid; place-items: center; }
.attach-btn { display: inline-grid; place-items: center; }
.msg-actions button { display: inline-grid; place-items: center; }
.vc-btn, .vp-btns .icon-btn { display: inline-grid; place-items: center; }
.up-x { display: inline-grid; place-items: center; }
.m-crown { color: #ffd23d; display: inline-grid; place-items: center; margin-left: 5px; }
.vu-ico { display: inline-grid; place-items: center; }
.vt-icons span { display: inline-grid; place-items: center; color: var(--text-dim); }
.vt-icons .vu-ico.live { color: #fff; }
.qs-kind { width: 26px; display: grid; place-items: center; color: var(--text-faint); }
.hh-title svg { color: var(--violet-2); }
.fs-nav-item { display: flex; align-items: center; gap: 10px; }
.fs-nav-item svg { flex: none; opacity: .85; }
.fs-close { display: grid; place-items: center; }
.af-dl { display: inline-grid; place-items: center; }
.brand-logo { display: grid; place-items: center; color: #fff; }
.reply-bar button { display: inline-grid; place-items: center; }

/* File-type tiles (colored glyph on tinted square) */
.file-tile { border-radius: 10px; display: grid; place-items: center; flex: none; }

/* Search input with embedded icon */
.search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap svg { position: absolute; left: 10px; color: var(--text-faint); pointer-events: none; }
.search-wrap .search-input { padding-left: 32px; }

/* Buttons that mix icon + text */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
label.btn { cursor: pointer; }

/* Login language switcher */
.auth-lang { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.auth-lang button {
  background: none; border: none; color: var(--text-faint); font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 3px 6px; border-radius: 6px; transition: color 0.15s, background 0.15s;
}
.auth-lang button:hover { color: var(--text); }
.auth-lang button.active { color: var(--violet-2); background: rgba(124, 92, 255, 0.12); }
.auth-lang-sep { color: var(--text-faint); opacity: 0.5; }

/* ── Brand identity ───────────────────────────────────────────────────────── */
/* Login: the neon mark floats free with a glow (no gradient box behind it). */
.brand-logo {
  background: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  filter: drop-shadow(0 0 18px rgba(124, 92, 255, 0.45));
}
.brand-mark { display: block; }

/* Rail home button: GamerZone logo on the dark app-tile (Discord-style). */
.rail-home {
  background: linear-gradient(135deg, #17142a, #0c0a17) !important;
  border: 1px solid rgba(124, 92, 255, 0.35);
}
.rail-home:hover { border-color: rgba(124, 92, 255, 0.7); box-shadow: 0 0 22px -6px rgba(124, 92, 255, 0.55); }
.rail-home .rail-svg { background: transparent !important; }

/* ── Boot splash ──────────────────────────────────────────────────────────── */
#splash {
  position: fixed; inset: 0; z-index: 500; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  background: var(--bg-0, #07060f);
  transition: opacity 0.4s ease, visibility 0.4s;
}
#splash.done { opacity: 0; visibility: hidden; pointer-events: none; }
#splash svg { animation: splash-pop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1); filter: drop-shadow(0 0 26px rgba(124, 92, 255, 0.5)); }
.splash-name {
  font-family: var(--display, 'Outfit', sans-serif); font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(90deg, #8a5cff, #00b3ff, #ff4ecd);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.splash-bar { width: 150px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.splash-bar span {
  display: block; height: 100%; width: 40%; border-radius: 2px;
  background: linear-gradient(90deg, #8a5cff, #00b3ff);
  animation: splash-slide 1.1s ease-in-out infinite;
}
@keyframes splash-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
@keyframes splash-pop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Micro-interactions — small, springy, everywhere it feels good.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --spring: cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Pressed states: everything clickable squashes a touch. */
.btn:active { transform: translateY(1px) scale(0.98); }
.icon-btn:active, .msg-actions button:active, .chan-actions button:active { transform: scale(0.85); }
.vc-btn:active { transform: scale(0.9) translateY(0); }
.icon-btn, .msg-actions button, .chan-actions button { transition: background 0.15s, color 0.15s, transform 0.15s var(--spring); }

/* Icon-level flourishes. */
.icon-btn svg, .attach-btn svg, .fs-close svg, .up-x svg, .send-btn svg { transition: transform 0.3s var(--spring); }
.userbar .icon-btn:hover svg { transform: rotate(80deg); }          /* gear spins */
.attach-btn:hover svg { transform: rotate(90deg) scale(1.12); }     /* plus twirls */
.composer .c-btns .icon-btn:hover svg { transform: scale(1.18) rotate(10deg); }  /* smile tilts */
.fs-close:hover svg, .up-x:hover svg { transform: rotate(90deg); }  /* close spins */
.rail-discover:hover svg { transform: rotate(45deg); transition: transform 0.35s var(--spring); }
.send-btn:hover svg { transform: translate(2px, -2px); }
.send-btn:active svg { transform: translate(10px, -10px) scale(0.6); opacity: 0; transition: transform 0.22s ease-in, opacity 0.22s; }

/* Rail: tiles lift slightly. */
.rail-item { transition: border-radius 0.2s, transform 0.2s var(--spring), box-shadow 0.2s, background 0.2s; }
.rail-item:hover { transform: translateY(-2px); }
.rail-item:active { transform: translateY(0) scale(0.95); }

/* Sidebar rows nudge. */
.chan, .dm-item, .member, .fs-nav-item { transition: background 0.15s, color 0.15s, transform 0.18s var(--spring); }
.chan:hover, .dm-item:hover { transform: translateX(3px); }
.member:hover { transform: translateX(3px); }
.fs-nav-item:hover { transform: translateX(3px); }
.chan .hash svg { transition: transform 0.2s var(--spring), color 0.2s; }
.chan:hover .hash svg { transform: scale(1.2); color: var(--violet-2); }

/* Message hover actions slide in. */
.msg-actions { transition: opacity 0.16s, transform 0.2s var(--spring); transform: translateY(-4px); }
.msg:hover .msg-actions { transform: translateY(0); }

/* Reactions pop. */
.reaction { transition: background 0.15s, border-color 0.15s, transform 0.16s var(--spring); }
.reaction:hover { transform: scale(1.1); }
.reaction:active { transform: scale(0.88); }

/* Badges pop in. */
.rail-badge, .mention-badge { animation: badge-pop 0.35s var(--spring); }
@keyframes badge-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }

/* Speaking: green pulse ripple on avatars. */
.voice-tile.speaking .avatar, .voice-user.speaking .avatar { animation: speak-pulse 1.5s ease-out infinite; border-radius: 50%; }
@keyframes speak-pulse {
  0%   { box-shadow: 0 0 0 2px var(--online), 0 0 0 2px rgba(61, 220, 132, 0.45); }
  70%  { box-shadow: 0 0 0 2px var(--online), 0 0 0 11px rgba(61, 220, 132, 0); }
  100% { box-shadow: 0 0 0 2px var(--online), 0 0 0 2px rgba(61, 220, 132, 0); }
}

/* Login logo floats gently. */
.brand-logo .brand-mark { animation: float-y 5s ease-in-out infinite; }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Spoiler reveal snaps. */
.spoiler.revealed { animation: spoiler-pop 0.28s var(--spring); }
@keyframes spoiler-pop { 0% { transform: scale(0.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* Emoji picker: emojis grow under the cursor. */
.ep-grid button { transition: transform 0.14s var(--spring), background 0.14s; }
.ep-grid button:hover { transform: scale(1.28); }

/* Home tabs lift. */
.home-tab { transition: background 0.15s, color 0.15s, transform 0.15s var(--spring); }
.home-tab:hover { transform: translateY(-1px); }

/* Voice controls breathe on hover (already lift) + hang-up shakes. */
.vc-btn.hang:hover { animation: ring-shake 0.4s ease-in-out; }
@keyframes ring-shake {
  0%, 100% { transform: rotate(0) translateY(-2px); }
  25% { transform: rotate(-9deg) translateY(-2px); }
  75% { transform: rotate(9deg) translateY(-2px); }
}

/* Toggle checkboxes get a tick-pop. */
.toggle-row input[type=checkbox], .perm-row input, .group-pick-row input { transition: transform 0.15s var(--spring); }
.toggle-row input[type=checkbox]:checked, .perm-row input:checked { transform: scale(1.12); }

/* Respect users who prefer no motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Desktop shell (Electron) — custom frameless titlebar.
   ═══════════════════════════════════════════════════════════════════════════ */
#titlebar {
  position: fixed; top: 0; left: 0; right: 0; height: 34px; z-index: 1000;
  display: flex; align-items: center; gap: 9px; padding-left: 12px;
  background: rgba(9, 7, 18, 0.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stroke);
  -webkit-app-region: drag; user-select: none;
}
.tb-name {
  font-family: var(--display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--text-dim);
}
.tb-btns { margin-left: auto; display: flex; height: 100%; -webkit-app-region: no-drag; }
.tb-btn {
  width: 46px; height: 100%; display: grid; place-items: center;
  color: var(--text-faint); transition: background 0.12s, color 0.12s;
}
.tb-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.tb-btn.tb-close:hover { background: #e81123; color: #fff; }
.tb-btn svg { transition: none; }
.tb-btn:active { transform: none; }

body.desktop { padding-top: 34px; }
body.desktop .app, body.desktop .auth-wrap { height: calc(100vh - 34px); }
body.desktop .fs-overlay, body.desktop .lightbox, body.desktop .overlay, body.desktop .qs-overlay { top: 34px; }
body.desktop #splash { z-index: 900; top: 34px; }

/* ── Rail scroll fix ──────────────────────────────────────────────────────── */
/* Tooltips render in the popover layer (fixed), so nothing inside the rail
   can extend its scrollable area sideways anymore. */
.rail { overflow-x: hidden; }
.rail-item .tip { display: none; } /* legacy in-rail tooltips: dead */
.rail-tip {
  position: fixed; z-index: 260; transform: translateY(-50%) translateX(-6px);
  background: #000; color: #fff; padding: 7px 11px; border-radius: 8px;
  font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.14s, transform 0.14s;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.8);
}
.rail-tip.show { opacity: 1; transform: translateY(-50%) translateX(0); }
.rail-tip::before {
  content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-right-color: #000;
}

/* ── Voice v2: per-user volume, mic meter, screen picker, calls ───────────── */
.vol-pop {
  position: fixed; z-index: 210; width: 260px; padding: 14px;
  background: var(--glass-strong); backdrop-filter: blur(28px);
  border: 1px solid var(--stroke-strong); border-radius: 14px; box-shadow: var(--shadow-soft);
  animation: rise 0.14s;
}
.vol-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14.5px; }
.vol-label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 7px; }
.vol-pct { margin-left: auto; color: var(--violet-2); font-weight: 800; letter-spacing: 0; text-transform: none; font-size: 12.5px; }

.vol-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--violet) 0%, var(--cyan) 100%);
  outline: none; cursor: pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s var(--spring);
}
.vol-slider::-webkit-slider-thumb:hover { transform: scale(1.25); }

.voice-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
@media (max-width: 900px) { .voice-grid-2 { grid-template-columns: 1fr; } }

.mic-meter {
  position: relative; height: 14px; border-radius: 7px; overflow: hidden;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--stroke);
}
.meter-fill {
  height: 100%; width: 0%; border-radius: 7px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transition: width 0.09s linear;
}
.meter-fill.hot { background: linear-gradient(90deg, var(--online), var(--lime, #4effa1)); }
.meter-thresh { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff; opacity: 0.85; }

/* Screen share picker (Electron) */
.ss-modal { width: min(680px, 94vw); }
.ss-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px;
  max-height: 340px; overflow-y: auto; margin-top: 12px; padding: 2px;
}
.ss-item {
  display: flex; flex-direction: column; gap: 7px; padding: 8px; border-radius: 12px;
  border: 2px solid transparent; background: rgba(0, 0, 0, 0.3); text-align: left;
  transition: border-color 0.15s, transform 0.15s var(--spring);
}
.ss-item:hover { border-color: var(--violet); transform: translateY(-2px); }
.ss-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 7px; background: #000; }
.ss-name { font-size: 12.5px; font-weight: 600; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Calls in DMs */
.call-banner {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px; flex: none;
  background: rgba(61, 220, 132, 0.1); border-bottom: 1px solid rgba(61, 220, 132, 0.25);
  color: var(--online); font-size: 13.5px; font-weight: 600;
}
.icon-btn.call-live { color: var(--online); animation: call-pulse 1.6s ease-in-out infinite; }
@keyframes call-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }