/* ============================================
   Lala — Global Styles & Dark Theme
   ============================================ */

/* Theme variables */
:root,
[data-theme="dark"] {
  /* Backgrounds */
  --bg-primary: #0b0b10;
  --bg-secondary: #13131a;
  --bg-sidebar: #111118;
  --bg-hover: #1c1c27;
  --bg-active: #23233a;
  --bg-overlay: rgba(0, 0, 0, 0.7);
  --bg-control: #1a1a26;

  /* Text */
  --text-primary: #e4e4ec;
  --text-secondary: #8b8b9e;
  --text-muted: #55556a;
  --text-accent: #f2879a;

  /* Accent */
  --accent: #e05a6f;
  --accent-hover: #c44d60;
  --accent-glow: rgba(224, 90, 111, 0.35);
  --accent-gradient: linear-gradient(135deg, #e05a6f, #f2879a);

  /* Status */
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  /* Borders */
  --border-color: #1e1e2e;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-round: 50%;

  /* Spacing & Sizes */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  --sidebar-width: 240px;
  --control-bar-height: 64px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px var(--accent-glow);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* Font */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ─────────────────────────────────────────────────────────
     STRUCTURAL VARIABLES — override in themes for zero-cost
     per-component styling. New components using these vars
     are automatically themed correctly.
     ───────────────────────────────────────────────────────── */

  /* Control bar pill (floating container) */
  --cb-pill-bg:       rgba(15, 15, 22, 0.75);
  --cb-pill-border:   rgba(255, 255, 255, 0.07);
  --cb-pill-radius:   48px;
  --cb-pill-backdrop: blur(20px);
  --cb-pill-shadow:   0 8px 32px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.05) inset;

  /* Control bar buttons */
  --cb-btn-radius:          50%;
  --cb-btn-bg:              var(--bg-hover);
  --cb-btn-color:           var(--text-secondary);
  --cb-btn-shadow:          none;
  --cb-btn-bg-hover:        var(--bg-active);
  --cb-btn-hover-transform: scale(1.08);
  --cb-btn-off-bg:          rgba(239, 68, 68, 0.15);
  --cb-btn-off-color:       #ef4444;
  --cb-btn-active-bg:       color-mix(in srgb, var(--accent) 20%, transparent);
  --cb-btn-active-color:    var(--text-accent);
  --cb-btn-active-shadow:   none;
  --cb-btn-leave-bg:        rgba(239, 68, 68, 0.12);
  --cb-btn-leave-color:     #ef4444;

  /* Avatars / circles */
  --avatar-radius: 50%;

  /* Video tile */
  --tile-radius: var(--border-radius-lg);

  /* Overlays (name badge, muted icon, flip btn overlaid on tiles) */
  --overlay-bg:       rgba(0, 0, 0, 0.55);
  --overlay-backdrop: blur(6px);
  --overlay-radius:   6px;

  /* FocusLayout main panel */
  --fl-main-radius: 10px;
  --fl-main-border: none;
  --fl-main-shadow: none;

  /* FocusLayout overlay buttons (back, fullscreen) */
  --fl-btn-bg:       rgba(0, 0, 0, 0.65);
  --fl-btn-backdrop: blur(8px);
  --fl-btn-radius:   6px;
  --fl-btn-border:   none;
  --fl-btn-color:    white;
  --fl-btn-shadow:   none;

  /* FocusLayout label */
  --fl-label-bg:       rgba(0, 0, 0, 0.65);
  --fl-label-backdrop: blur(8px);
  --fl-label-radius:   6px;

  /* FocusLayout strip tiles */
  --fl-strip-tile-radius: 8px;

  /* Chat bubbles */
  --bubble-radius: 8px;

  /* Panel headers (sidebar header, chat panel header) */
  --panel-header-bg:          transparent;
  --panel-header-color:       inherit;
  --panel-header-text-shadow: none;

  /* Settings modal */
  --settings-modal-radius: 8px;
  --settings-modal-border: none;
  --settings-modal-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);

  /* Settings nav items */
  --settings-nav-radius: var(--border-radius);

  /* Close / icon buttons */
  --settings-close-radius: 50%;

  /* Toggle switch */
  --toggle-track-radius: 11px;
  --toggle-thumb-radius: 50%;

  /* Screen share modal */
  --ss-modal-radius: 14px;

  /* Context menu */
  --ctx-menu-radius: var(--border-radius);

  /* Scrollbar */
  --scrollbar-width:        6px;
  --scrollbar-thumb-radius: 3px;
}

/* ─── Light Theme ─── */
[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-sidebar: #f1f5f9;
  --bg-hover: #e2e8f0;
  --bg-active: #cbd5e1;
  --bg-overlay: rgba(255, 255, 255, 0.7);
  --bg-control: #ffffff;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-accent: #c44d60;

  --color-success: #16a34a;
  --color-danger: #dc2626;
  --color-warning: #d97706;
  --color-info: #2563eb;

  --border-color: #cbd5e1;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  /* --shadow-glow intentionally omitted — light doesn't override --accent-glow,
     so the root formula (0 0 20px var(--accent-glow)) already derives the glow
     from the theme's actual pink accent instead of a stale violet leftover. */
}

/* ─── Amoled Theme ─── */
[data-theme="amoled"] {
  --bg-primary: #000000;
  --bg-secondary: #000000;
  --bg-sidebar: #000000;
  --bg-hover: #111111;
  --bg-active: #222222;
  --bg-control: #000000;
  --border-color: #1a1a1a;
  /* --color-success/danger/warning/info intentionally omitted — identical to
     the root theme's values, so no override is needed here. */
}

/* ─── Discord Theme ─── */
[data-theme="discord"] {
  --bg-primary: #313338;
  --bg-secondary: #2b2d31;
  --bg-sidebar: #1e1f22;
  --bg-hover: #35373c;
  --bg-active: #404249;
  --bg-control: #2b2d31;

  --text-primary: #dbdee1;
  --text-secondary: #b5bac1;
  --text-muted: #80848e;
  --text-accent: #5865f2;

  --accent: #5865f2;
  --accent-hover: #4752c4;
  --accent-glow: rgba(88, 101, 242, 0.3);
  --accent-gradient: linear-gradient(135deg, #5865f2, #7983f5);

  --color-success: #43b581;
  --color-danger: #f04747;
  --color-warning: #faa61a;
  --color-info: #5865f2;

  --border-color: #1e1f22;
}

/* ═══════════════════════════════════════════════════════
   WINDOWS XP THEME — Luna / Classic, circa 2003
   Silver panels, blue title bars, Tahoma, bevel buttons.
   ═══════════════════════════════════════════════════════ */
[data-theme="winxp"] {
  --bg-primary:    #ece9d8;
  --bg-secondary:  #d4d0c8;
  --bg-sidebar:    #d9d5c8;
  --bg-hover:      #c8d4e8;
  --bg-active:     #316ac5;
  --bg-overlay:    rgba(0, 0, 0, 0.5);
  --bg-control:    #ece9d8;

  --text-primary:   #000000;
  --text-secondary: #444444;
  --text-muted:     #808080;
  /* Classic IE/XP hyperlink blue — was #ffffff (white-on-light, invisible via
     the global `a { color: var(--text-accent) }` rule, e.g. the Settings
     "Source code" link). Contexts that need white-on-blue (selected dropdown
     option, active button) use their own hardcoded overrides below, so they
     are unaffected by this change. */
  --text-accent:    #0033cc;

  --accent:          #316ac5;
  --accent-hover:    #1e4d9b;
  --accent-glow:     rgba(49, 106, 197, 0.25);
  --accent-gradient: linear-gradient(180deg, #5b9bd5 0%, #316ac5 50%, #1e4d9b 100%);

  --color-success: #008000;
  --color-danger:  #cc0000;
  --color-warning: #cc6600;
  --color-info:    #316ac5;

  --border-color:      #aca899;
  --border-radius:     3px;
  --border-radius-lg:  4px;
  --border-radius-round: 50%;

  --shadow-sm:   inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #404040;
  --shadow-md:   2px 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:   3px 3px 8px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 0 2px #316ac5;

  --transition-fast:   100ms ease;
  --transition-normal: 180ms ease;

  --font-family: Tahoma, 'Segoe UI', Arial, sans-serif;
  --font-mono:   'Courier New', Courier, monospace;

  /* ─── Structural overrides ─── */

  /* Pill */
  --cb-pill-bg:       #ece9d8;
  --cb-pill-border:   #aca899;
  --cb-pill-radius:   4px;
  --cb-pill-backdrop: none;
  --cb-pill-shadow:   inset -1px -1px #888, inset 1px 1px #fff, 0 2px 6px rgba(0,0,0,0.25);

  /* Buttons */
  --cb-btn-radius:          3px;
  --cb-btn-bg:              linear-gradient(180deg, #f4f0e8 0%, #dedad0 100%);
  --cb-btn-color:           #000000;
  --cb-btn-shadow:          inset 1px 1px 0 #ffffff, inset -1px -1px 0 #888888;
  --cb-btn-bg-hover:        linear-gradient(180deg, #dce8f8 0%, #b8d0f0 100%);
  --cb-btn-hover-transform: none;
  --cb-btn-off-bg:          linear-gradient(180deg, #f8e8e8 0%, #e8c8c8 100%);
  --cb-btn-off-color:       #880000;
  --cb-btn-active-bg:       linear-gradient(180deg, #b0c8f0 0%, #7090d0 100%);
  --cb-btn-active-color:    #ffffff;
  --cb-btn-active-shadow:   inset -1px -1px 0 #6090e0, inset 1px 1px 0 #1040a0;
  --cb-btn-leave-bg:        linear-gradient(180deg, #f8d8d8 0%, #e0a0a0 100%);
  --cb-btn-leave-color:     #880000;

  /* Shapes */
  --avatar-radius:        50%;
  --tile-radius:          2px;
  --overlay-bg:           rgba(0, 0, 0, 0.55);
  --overlay-backdrop:     none;
  --overlay-radius:       4px;
  --fl-main-radius:       2px;
  --fl-main-border:       2px solid #aca899;
  --fl-main-shadow:       inset 1px 1px #fff, inset -1px -1px #808080;
  --fl-btn-bg:            linear-gradient(180deg, #f4f0e8, #dedad0);
  --fl-btn-backdrop:      none;
  --fl-btn-radius:        3px;
  --fl-btn-shadow:        inset 1px 1px 0 #ffffff, inset -1px -1px 0 #888888;
  --fl-btn-color:         #000000;
  --fl-label-bg:          rgba(0, 0, 0, 0.65);
  --fl-label-backdrop:    none;
  --fl-label-radius:      0px;
  --fl-strip-tile-radius: 2px;
  --bubble-radius:        2px;

  /* Panel headers → blue title bar */
  --panel-header-bg:          linear-gradient(180deg, #3a77c8 0%, #2460b0 100%);
  --panel-header-color:       #ffffff;
  --panel-header-text-shadow: 1px 1px rgba(0,0,0,0.4);

  /* Modal + UI chrome */
  --settings-modal-radius: 4px;
  --settings-modal-border: 2px solid #316ac5;
  --settings-modal-shadow: 3px 3px 10px rgba(0,0,0,0.4);
  --settings-nav-radius:   0px;
  --settings-close-radius: 3px;
  --toggle-track-radius:   2px;
  --toggle-thumb-radius:   1px;
  --ss-modal-radius:       4px;
  --ctx-menu-radius:       2px;

  /* Scrollbar */
  --scrollbar-width:        16px;
  --scrollbar-thumb-radius: 0px;
}

/* ── XP body ── */
[data-theme="winxp"] body {
  -webkit-font-smoothing: auto;
  font-size: 12px;
}

/* ── XP cb-btn hover/active state tweaks not expressible as single vars ── */
[data-theme="winxp"] .cb-btn:hover:not(:disabled) {
  box-shadow: inset 1px 1px 0 #98c0f0, inset -1px -1px 0 #2060c0;
}
[data-theme="winxp"] .cb-btn.cb-off {
  box-shadow: inset 1px 1px 0 #ffaaaa, inset -1px -1px 0 #880000;
}
[data-theme="winxp"] .cb-btn.cb-off-soft {
  color: #888;
  opacity: 0.8;
}
[data-theme="winxp"] .cb-btn.cb-leave:hover {
  background: linear-gradient(180deg, #cc0000 0%, #880000 100%);
  color: #ffffff;
  box-shadow: inset 1px 1px 0 #ff8888, inset -1px -1px 0 #660000;
}
[data-theme="winxp"] .cb-divider {
  background: #aca899;
  box-shadow: 1px 0 0 #fff;
}

/* ── Sidebar — XP panel look ── */
[data-theme="winxp"] .channel-sidebar {
  border-right: 1px solid #aca899;
}
[data-theme="winxp"] .channel-item {
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}
[data-theme="winxp"] .channel-item:hover {
  background: #c8d4e8;
}
[data-theme="winxp"] .channel-item.active {
  /* No !important needed: [data-theme] + 2 classes already outranks the
     base .channel-item.active (2 classes) and .channel-item:hover (1 class
     + pseudo), including when both active+hover apply simultaneously. */
  background: #316ac5;
  color: #ffffff;
  border-left: none;
  padding-left: 12px;
  text-shadow: 1px 1px rgba(0,0,0,0.3);
}

/* ── Settings modal ── */
[data-theme="winxp"] .settings-sidebar {
  background: #d9d5c8;
  border-right: 1px solid #aca899;
}
[data-theme="winxp"] .settings-nav-item:hover {
  background: #c8d4e8;
  color: #000;
}
[data-theme="winxp"] .settings-nav-item.active {
  background: #316ac5;
  color: #ffffff;
}
[data-theme="winxp"] .settings-header {
  font-size: 14px;
  font-family: Tahoma, Arial, sans-serif;
}
[data-theme="winxp"] .settings-close-circle {
  background: linear-gradient(180deg, #f4f0e8, #dedad0);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #888;
  color: #000;
}
[data-theme="winxp"] .toggle-slider {
  border: 1px solid #888;
}

/* ── Video tiles ── */
[data-theme="winxp"] .p-tile {
  /* !important kept: .p-tile-clickable:hover sets border-color at higher
     specificity (class+class+pseudo) and would otherwise win on hover. */
  border: 1px solid #aca899 !important;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080;
}
[data-theme="winxp"] .p-tile.speaking {
  /* [data-theme] + 2 classes already outranks base .p-tile.speaking (2
     classes) for outline/box-shadow — no competing higher-specificity rule. */
  outline: 2px solid #316ac5;
  box-shadow: 0 0 8px rgba(49, 106, 197, 0.5);
}

/* ── Focus layout ── */
[data-theme="winxp"] .fl-main-label {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11px;
  font-family: Tahoma, Arial, sans-serif;
}

/* ── Chat panel ── */
[data-theme="winxp"] .cp-panel {
  border-left: 1px solid #aca899;
}
[data-theme="winxp"] .cp-close {
  background: linear-gradient(180deg, #f4f0e8, #dedad0);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #888;
  color: #000;
  width: 22px;
  height: 22px;
}
[data-theme="winxp"] .cp-bubble {
  border: 1px solid #d4d0c8;
  background: #ffffff;
  color: #000000;
}
[data-theme="winxp"] .cp-group-own .cp-bubble {
  background: #e8f0ff;
  border-color: #b0c4e8;
}
[data-theme="winxp"] .cp-input {
  /* border keeps !important: .cp-input:focus (equal specificity, tie broken
     by stylesheet order) sets border-color and could otherwise win on focus.
     background/color have no competing rule, so no !important needed there. */
  border: 2px inset #808080 !important;
  background: #ffffff;
  color: #000000;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 12px;
}
[data-theme="winxp"] .cp-send {
  background: linear-gradient(180deg, #f4f0e8, #dedad0);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #888;
  color: #000;
}

/* ── Context menu ── */
[data-theme="winxp"] .ctx-menu {
  border: 1px solid #aca899;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
  background: #ece9d8;
}
[data-theme="winxp"] .ctx-menu-item:hover {
  background: #316ac5;
  color: #ffffff;
}
[data-theme="winxp"] .ctx-menu-name {
  color: #316ac5;
}

/* ── Inputs ── */
/* No !important needed: [data-theme] + type + 3x :not([attr]) (specificity
   0,4,1 for <input>) / [data-theme] + type (0,1,1 for <textarea>) already
   outrank .input/.cp-input base rules and their :focus states. */
[data-theme="winxp"] input:not([type="range"]):not([type="checkbox"]):not([type="color"]),
[data-theme="winxp"] textarea {
  border: 2px solid #7f9db9;
  background: #ffffff;
  color: #000000;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 12px;
}

/* ── Dropdown (Select) ── */
[data-theme="winxp"] .lala-select-option.selected {
  /* Selected option sits on --bg-active (XP blue #316ac5), so it needs a
     light color regardless of --text-accent (now a dark link blue). */
  color: #ffffff;
}

/* ── Scrollbars ── */
[data-theme="winxp"] ::-webkit-scrollbar {
  background: #d4d0c8;
}
[data-theme="winxp"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f4f0e8, #d4d0c8);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #888;
}
[data-theme="winxp"] ::-webkit-scrollbar-track {
  background: #d4d0c8;
  border: 1px inset #888;
}
[data-theme="winxp"] ::-webkit-scrollbar-button {
  background: linear-gradient(180deg, #f4f0e8, #d4d0c8);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #888;
  display: block;
  height: 16px;
}

/* ─── Reset ─── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-family);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  user-select: none;
}

input, textarea, [contenteditable], .cp-bubble, .cp-system {
  -webkit-user-select: text;
  user-select: text;
}

a {
  color: var(--text-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

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

::-webkit-scrollbar-thumb {
  background: var(--bg-hover);
  border-radius: var(--scrollbar-thumb-radius);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}



/* ─── Form Inputs ─── */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  text-align: left;
}

.input-group label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.input {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-family);
  outline: none;
  transition: border-color var(--transition-fast);
}

.input:focus {
  border-color: var(--accent);
}

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

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: var(--border-radius);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-primary {
  background: var(--accent-gradient);
  color: white;
  width: 100%;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: 6px 12px;
}

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



/* ─── LiveKit Component Overrides ─── */
.lk-room-container {
  height: 100% !important;
  background: transparent !important;
}

.lk-grid-layout {
  gap: 8px !important;
}

.lk-participant-tile {
  border-radius: var(--border-radius-lg) !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  transition: border-color var(--transition-normal) !important;
}

.lk-participant-tile[data-lk-speaking="true"] {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-glow) !important;
}

.lk-focus-layout {
  gap: 8px !important;
}

/* ─── Create Channel Modal ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
  animation: scaleIn 0.2s ease;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* ─── Base range slider ─── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
}


