/* ═══════════════════════════════════════════════════════════
   LUNURA — Windows 7 Aero theme
   Loaded last: overrides the dark "Nexus" skin with a light
   Aero Glass look (frosted panels, glossy blue chrome, Segoe UI).
═══════════════════════════════════════════════════════════ */

/* ── 1. CORE PALETTE (overrides every [data-theme] variant) ── */
:root, [data-theme] {
  --bg-primary:       #eef4fb !important;
  --bg-secondary:     #dde9f8 !important;
  --bg-tertiary:      #cfe1f6 !important;
  --bg-accent:        #b8d3f0 !important;
  --bg-floating:      #f8fbff !important;
  --bg-overlay:       rgba(20,40,70,.45) !important;
  --bg-hover:         rgba(61,148,246,.14) !important;
  --bg-active:        rgba(61,148,246,.22) !important;
  --bg-selected:      linear-gradient(180deg, #e3f0fe, #bfdcfa) !important;
  --bg-message-hover: rgba(61,148,246,.06) !important;

  --text-normal:   #1c2b3a !important;
  --text-muted:    #5b7290 !important;
  --text-link:     #0050c8 !important;
  --text-positive: #1b8a3c !important;
  --text-warning:  #b8790a !important;
  --text-danger:   #c8281e !important;
  --text-header:   #0b2d52 !important;

  --brand:          #3d94f6 !important;
  --brand-hover:    #2c7fe0 !important;
  --brand-active:   #1c5bb8 !important;
  --brand-gradient: linear-gradient(180deg, #d7ecfe 0%, #8ec1f4 8%, #4f96ee 50%, #3d84e6 51%, #6ba6ec 90%, #a2cbf5 100%) !important;
  --gradient-brand: var(--brand-gradient) !important;

  --green:  #3daa4c !important;
  --red:    #d8392c !important;
  --yellow: #d99a1e !important;
  --blurple:#3d94f6 !important;

  --status-online:  #3daa4c !important;
  --status-idle:    #d99a1e !important;
  --status-dnd:     #d8392c !important;
  --status-offline: #97a7b8 !important;

  --scrollbar:       #dfeaf7 !important;
  --scrollbar-thumb: #a9c7ea !important;

  --radius-xs: 2px !important;
  --radius-sm: 3px !important;
  --radius-md: 5px !important;
  --radius-lg: 7px !important;
  --radius-xl: 9px !important;

  --shadow-low:     0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(20,50,90,.18) !important;
  --shadow-md:      0 4px 14px rgba(15,40,80,.22) !important;
  --shadow-high:    0 10px 30px rgba(15,40,80,.30) !important;
  --shadow-overlay: 0 18px 50px rgba(10,30,60,.40) !important;

  --input-bg:           #ffffff !important;
  --input-border:       #8fb4dd !important;
  --input-border-focus: #3d94f6 !important;
  --input-placeholder:  #8397ab !important;

  --mention-bg:       rgba(61,148,246,.16) !important;
  --mention-color:    #14549e !important;
  --mention-hover-bg: rgba(61,148,246,.26) !important;
  --code-bg:          rgba(20,60,110,.08) !important;
  --code-color:       #1c2b3a !important;
  --reaction-bg:      rgba(61,148,246,.10) !important;
  --reaction-hover:   rgba(61,148,246,.18) !important;
  --ctx-sep:          rgba(20,60,110,.12) !important;
  --brand-light:      rgba(61,148,246,.14) !important;

  --msg-hover-bg:       rgba(61,148,246,.06) !important;
  --msg-actions-bg:     #ffffff !important;
  --msg-actions-border: #b8d3f0 !important;
  --msg-reply-line:     #a9c7ea !important;

  --glass-bg:     rgba(255,255,255,.38) !important;
  --glass-border: rgba(255,255,255,.55) !important;
  --glass-blur:   blur(14px) !important;

  --gradient-success: linear-gradient(180deg, #cdeed6, #3daa4c) !important;
  --gradient-danger:  linear-gradient(180deg, #f6cfc9, #c8281e) !important;
  --gradient-warning: linear-gradient(180deg, #f7e2b8, #d99a1e) !important;
  --gradient-primary: var(--brand-gradient) !important;
  --gradient-dark:    linear-gradient(180deg, #7fa6cc, #345f8f) !important;
}

/* ── 2. TYPE + DESKTOP BACKDROP ── */
html, body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.20), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(140,200,255,.25), transparent 55%),
    linear-gradient(160deg, #0b3d78 0%, #145a9e 28%, #2f86d6 55%, #6fb3ec 78%, #bfe0fb 100%) !important;
}
.auth-card h1, .modal-title, .cw-title, .friends-header-title,
.settings-content h2, .pp-name { font-family: 'Segoe UI', Tahoma, sans-serif !important; }

/* Classic Win7 16px scrollbar */
::-webkit-scrollbar { width: 16px !important; height: 16px !important; }
::-webkit-scrollbar-track { background: #e4edf8 !important; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d3e4f7, #a9c7ea 45%, #8fb4dd 46%, #b9d4f0) !important;
  border: 1px solid #8fb4dd !important;
  border-radius: 2px !important;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #e3f0fe, #bfdcfa 45%, #9ec4ec 46%, #cfe4fa) !important; }

/* ── 3. FLOATING AERO WINDOW (desktop app-shell) ── */
@media (min-width: 901px) {
  #app.hidden ~ * {} /* no-op guard */
  #app:not(.hidden) {
    width: min(1700px, calc(100vw - 44px)) !important;
    height: calc(100vh - 44px) !important;
    margin: 22px auto !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.55) inset,
      0 0 0 1px rgba(15,55,100,.35),
      0 30px 70px rgba(5,20,45,.55) !important;
  }
  body:has(#app:not(.hidden)) { align-items: center; justify-content: center; display: flex; overflow: auto; }
}

/* ── 4. TITLEBAR / WINDOW CHROME ── */
.win7-titlebar {
  height: 40px; flex-shrink: 0;
  display: flex; align-items: center;
  padding: 0 6px 0 12px; gap: 8px;
  position: relative;
  background: linear-gradient(180deg, #dcedfd 0%, #a9cdf5 4%, #7fb4ef 7%, #bfdaf6 9%, #a3cbf3 16%, #7fb0ef 50%, #6ba6ec 51%, #a2cbf5 88%, #dcecfc 100%);
  border-bottom: 1px solid #4a80c4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.win7-titlebar-icon {
  width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #fff, #bcdcfb 60%, #8fc0f4);
  border: 1px solid rgba(20,70,130,.4);
  color: #14549e; font-weight: 900; font-size: 13px;
  box-shadow: 0 1px 1px rgba(255,255,255,.8) inset;
}
.win7-titlebar-text {
  color: #0a2e57; font-weight: 700; font-size: 13px;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win7-controls { display: flex; align-items: center; gap: 3px; margin-left: auto; flex-shrink: 0; }
.win7-btn {
  width: 27px; height: 22px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #fbfdff 0%, #d7e8fa 45%, #b3d1f3 46%, #cfe2f8 100%);
  border: 1px solid #6f9fce;
  color: #1c3b5c;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
  transition: background .1s, box-shadow .1s;
  cursor: pointer;
}
.win7-btn svg { pointer-events: none; }
.win7-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #eaf4ff 45%, #cfe4fb 46%, #e6f1fc 100%);
  box-shadow: 0 0 5px rgba(80,160,240,.7), 0 1px 0 rgba(255,255,255,.8) inset;
}
.win7-btn:active { background: linear-gradient(180deg, #a9cdf5, #d7e8fa); box-shadow: inset 0 1px 3px rgba(20,60,110,.4); }
.win7-btn.win7-close {
  background: linear-gradient(180deg, #fbdcd7 0%, #ef8b7c 45%, #e2523c 46%, #f2a091 100%);
  border-color: #b5362a; color: #4a0d06;
}
.win7-btn.win7-close:hover {
  background: linear-gradient(180deg, #ffe6e2 0%, #f5a495 45%, #ec6a52 46%, #f6b6a8 100%);
  box-shadow: 0 0 6px rgba(230,70,40,.8), 0 1px 0 rgba(255,255,255,.8) inset;
}
.win7-btn.win7-close:active { background: linear-gradient(180deg, #d9503a, #f2a091); }

/* Reuse titlebar chrome for the SPA top-nav */
.top-nav {
  background: linear-gradient(180deg, #dcedfd 0%, #a9cdf5 4%, #7fb4ef 7%, #bfdaf6 9%, #a3cbf3 16%, #7fb0ef 50%, #6ba6ec 51%, #a2cbf5 88%, #dcecfc 100%) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #4a80c4 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.brand-text { color: #0a2e57 !important; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.brand-mark {
  background: linear-gradient(180deg, #fff, #bcdcfb 60%, #8fc0f4) !important;
  border: 1px solid rgba(20,70,130,.4);
  color: #14549e !important;
  box-shadow: 0 1px 1px rgba(255,255,255,.8) inset !important;
}
.tn-tab { color: #14395e !important; }
.tn-tab:hover { background: rgba(255,255,255,.35) !important; color: #0a2e57 !important; }
.tn-tab.active { background: rgba(255,255,255,.55) !important; color: #0a2e57 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.tn-icon-btn { color: #14395e !important; }
.tn-icon-btn:hover { background: rgba(255,255,255,.35) !important; color: #0a2e57 !important; }
.topnav-search { background: rgba(255,255,255,.55) !important; border-color: rgba(255,255,255,.7) !important; }
.user-pill { background: rgba(255,255,255,.4) !important; border-color: rgba(255,255,255,.6) !important; }
.user-pill:hover { background: rgba(255,255,255,.6) !important; }
.user-pill .user-name { color: #0a2e57 !important; }

/* ── 5. GLASS PANELS ── */
.side-panel, .member-list, .server-rail {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.user-area { background: rgba(255,255,255,.35) !important; border-top: 1px solid rgba(255,255,255,.6) !important; }
.panel-header { border-bottom-color: rgba(20,70,130,.12) !important; }
.top-bar { border-bottom-color: rgba(20,70,130,.12) !important; }

.modal, .ctx-menu, .emoji-picker, .profile-popout, .servers-dropdown, .server-dropdown, .msg-actions {
  background: #f8fbff !important;
  border: 1px solid #a9c7ea !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 14px 40px rgba(10,30,60,.35) !important;
}
.settings-page, .settings-sidebar { background: #eef4fb !important; }
.settings-sidebar { border-right: 1px solid #b8d3f0 !important; }

/* ── 6. GLOSSY BUTTONS ── */
.btn, .auth-btn, .btn-primary, .fnav-btn.green, .add-friend-form button,
.pp-btn.primary, .vc-ctrl-btn.leave-btn {
  background: var(--brand-gradient) !important;
  color: #fff !important;
  border: 1px solid #2c6fc2 !important;
  text-shadow: 0 -1px 0 rgba(0,30,70,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset !important;
}
.btn:hover, .auth-btn:hover, .btn-primary:hover { filter: brightness(1.06); }
.btn:active, .auth-btn:active, .btn-primary:active { filter: brightness(.94); box-shadow: inset 0 1px 4px rgba(10,40,80,.4) !important; }
.btn-ghost { color: var(--text-normal) !important; }
.btn-danger { background: linear-gradient(180deg, #f7d6d1, #e2664f 46%, #f0a596) !important; border: 1px solid #b5362a !important; color: #4a0d06 !important; }
.btn-green { background: linear-gradient(180deg, #d8f3dd, #3daa4c 46%, #8ed99c) !important; border: 1px solid #1f7a30 !important; color: #0c3814 !important; }

.rail-item { background: rgba(255,255,255,.45) !important; color: var(--text-normal) !important; }
.rail-item:hover, .rail-item.active { background: var(--brand-gradient) !important; color: #fff !important; }
.rail-item.dm-btn { color: #1f7a30 !important; }
.rail-item.dm-btn:hover, .rail-item.dm-btn.active { background: linear-gradient(180deg, #d8f3dd, #3daa4c) !important; color: #fff !important; }
.rail-item.add-btn { color: #1f7a30 !important; }
.rail-item.add-btn:hover { background: linear-gradient(180deg, #d8f3dd, #3daa4c) !important; color: #fff !important; }

.ch-item.active, .dm-item.active, .friends-tab.active, .fnav-btn.active,
.settings-nav-item.active, .ctx-item:hover, .e-btn:hover, .friend-row:hover {
  background: var(--bg-selected) !important;
  box-shadow: inset 0 0 0 1px #8fb4dd;
}
.ctx-item:hover { color: #0a2e57 !important; }

/* Sunken inputs (Win7 bevel) */
.settings-input, .modal-input, .modal-select, .modal-textarea, .settings-select,
.settings-textarea, .friends-search-input, .form-group input, .msg-edit-input,
.add-friend-form input, .msg-input, .topnav-search input {
  background: #ffffff !important;
  box-shadow: inset 0 1px 3px rgba(20,60,110,.22) !important;
  border-color: #8fb4dd !important;
}
.settings-input:focus, .modal-input:focus, .form-group input:focus {
  border-color: #3d94f6 !important;
  box-shadow: inset 0 1px 3px rgba(20,60,110,.22), 0 0 0 2px rgba(61,148,246,.25) !important;
}

.toggle-switch.on { background: linear-gradient(180deg, #cdeed6, #3daa4c) !important; }
.settings-slider { background: linear-gradient(to right, #3d94f6 var(--val,50%), #b8d3f0 var(--val,50%)) !important; }

/* ── 7. AUTH PAGE → AERO DIALOG ── */
.auth-bg { background: transparent !important; }
.auth-blob { display: none !important; }
.auth-container { max-width: 420px !important; padding: 0 !important; }
.auth-card {
  background: #f8fbff !important;
  border: none !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: none !important;
  padding: 28px 34px 30px !important;
}
.win7-window {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset, 0 0 0 1px rgba(15,55,100,.35), 0 28px 65px rgba(5,20,45,.55);
}
.auth-logo-icon {
  background: linear-gradient(180deg, #fff, #bcdcfb 60%, #8fc0f4) !important;
  border: 1px solid rgba(20,70,130,.4);
  color: #14549e !important;
  box-shadow: 0 1px 1px rgba(255,255,255,.8) inset !important;
}
.auth-logo-text { color: #0a2e57 !important; }
.auth-card h1 { color: #0a2e57 !important; }
.auth-card .subtitle { color: var(--text-muted) !important; }
.legal-back { color: #0050c8 !important; }

/* Legal pages (privacy/terms) use light-on-dark hardcoded colors — flip to Aero light */
.legal-section h2 { color: #0a2e57 !important; }
.legal-section h3 { color: #14395e !important; }
.legal-section p, .legal-section li { color: #1c2b3a !important; }
.legal-updated { color: var(--text-muted) !important; }