/* ============================================
   AWAREVERSE USER DISPLAY OVERRIDES
   Default uses original Awareverse purple glow
   Applies only when a mode class is active
   ============================================ */

:root {
  --userFontScale: 1;
  --userLineHeight: 1.7;
  --userLetterSpacing: 0px;
}

/* Font controls always apply */
html,
body {
  font-size: calc(16px * var(--userFontScale)) !important;
  line-height: var(--userLineHeight, 1.7) !important;
  letter-spacing: var(--userLetterSpacing, 0px) !important;
}

/* ============================================
   MODE CLASSES
   avDefault is the original site look
   ============================================ */

/* DEFAULT ORIGINAL AWAREVERSE */
html.avDefault {
  --userBgSolid: #0e0a1a;
  --userText: rgba(255, 255, 255, 0.92);
  --userMuted: rgba(255, 255, 255, 0.78);
  --userLink: #c855f6;
  --userAccent: #a56fff;
  --userBorder: rgba(200, 85, 246, 0.22);
  --userSurface: rgba(139, 53, 196, 0.14);
  --userFocus: #c855f6;
}

/* DEFAULT BACKGROUND LAYERING FROM YOUR ORIGINAL STYLE */
html.avDefault,
html.avDefault body {
  background:
    radial-gradient(900px 600px at 10% -10%, #3a2174 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 10%, #6c5ce7 0%, transparent 55%),
    linear-gradient(160deg, #0e0a1a, #171233 50%, #24194c) !important;
  color: var(--userText) !important;
}

/* DEEP PURPLE DARK MODE */
html.deepPurple {
  --userBgSolid: #0f0a1e;
  --userSurface: rgba(139, 92, 246, 0.14);
  --userText: #ede9fe;
  --userMuted: rgba(237, 233, 254, 0.86);
  --userLink: #a78bfa;
  --userAccent: #c4b5fd;
  --userBorder: rgba(139, 92, 246, 0.28);
  --userFocus: #c4b5fd;
}

html.deepPurple,
html.deepPurple body {
  background: var(--userBgSolid) !important;
  color: var(--userText) !important;
}

/* HIGH CONTRAST */
html.highContrast {
  --userBgSolid: #000000;
  --userSurface: #0a0a0a;
  --userText: #ffffff;
  --userMuted: #ffffff;
  --userLink: #ffeb3b;
  --userAccent: #ffeb3b;
  --userBorder: rgba(255, 255, 255, 0.5);
  --userFocus: #ffeb3b;
}

html.highContrast,
html.highContrast body {
  background: var(--userBgSolid) !important;
  color: var(--userText) !important;
}

/* WARM AMBER */
html.warmAmber {
  --userBgSolid: #1a1410;
  --userSurface: rgba(255, 179, 71, 0.12);
  --userText: #ffd699;
  --userMuted: rgba(255, 214, 153, 0.88);
  --userLink: #ffab40;
  --userAccent: #ffc947;
  --userBorder: rgba(255, 179, 71, 0.3);
  --userFocus: #ffab40;
}

html.warmAmber,
html.warmAmber body {
  background: var(--userBgSolid) !important;
  color: var(--userText) !important;
}

html.warmAmber {
  filter: brightness(1.05) contrast(0.95);
}

/* MONOCHROME */
html.monochrome {
  --userBgSolid: #000000;
  --userSurface: #1a1a1a;
  --userText: #e0e0e0;
  --userMuted: #b0b0b0;
  --userLink: #ffffff;
  --userAccent: #ffffff;
  --userBorder: rgba(255, 255, 255, 0.35);
  --userFocus: #ffffff;
}

html.monochrome,
html.monochrome body {
  background: var(--userBgSolid) !important;
  color: var(--userText) !important;
}

/* ============================================
   SHARED THEME RULES
   Applies to any active mode class
   ============================================ */

html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) p,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) li,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) td,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) th,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) label,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) small,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) h1,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) h2,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) h3,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) h4,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) h5,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) h6,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) span,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) div,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) strong,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) em,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) b,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) i,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) button {
  color: var(--userText) !important;
}

html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) a {
  color: var(--userLink) !important;
}

html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) .card,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) .panel,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) .info-box,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) .highlight-box,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) .warning-box,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) .story-card,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) .full-story,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) .story-filters,
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) .stories-header {
  background: var(--userSurface) !important;
  color: var(--userText) !important;
  border-color: var(--userBorder) !important;
}

html.avDefault .card,
html.avDefault .panel {
  box-shadow: 0 2px 18px rgba(200, 85, 246, 0.14);
}

html.deepPurple .card,
html.deepPurple .panel {
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.18);
}

html.highContrast .card,
html.highContrast .panel {
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
}

html.highContrast a {
  font-weight: 700 !important;
  text-decoration: underline !important;
}

html.warmAmber .card,
html.warmAmber .panel {
  box-shadow: 0 2px 12px rgba(255, 179, 71, 0.18);
}

html.monochrome header,
html.monochrome main,
html.monochrome footer,
html.monochrome nav,
html.monochrome section,
html.monochrome article,
html.monochrome .container,
html.monochrome .card,
html.monochrome .panel {
  filter: grayscale(100%);
}

html.monochrome a {
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* Inputs for dark style modes */
html:is(.avDefault, .deepPurple, .monochrome) input,
html:is(.avDefault, .deepPurple, .monochrome) select,
html:is(.avDefault, .deepPurple, .monochrome) textarea {
  background: rgba(30, 20, 50, 0.92) !important;
  color: var(--userText) !important;
  border-color: var(--userBorder) !important;
}

html:is(.avDefault, .deepPurple, .monochrome) input::placeholder,
html:is(.avDefault, .deepPurple, .monochrome) textarea::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Inputs for light warm amber */
html.warmAmber input,
html.warmAmber select,
html.warmAmber textarea {
  background: rgba(35, 25, 15, 0.92) !important;
  color: var(--userText) !important;
  border-color: var(--userBorder) !important;
}

/* Focus */
html:is(.avDefault, .deepPurple, .highContrast, .warmAmber, .monochrome) :focus-visible {
  outline: 3px solid var(--userFocus);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(200, 85, 246, 0.18);
}

/* Reduce motion */
html.reduceMotion * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Sprite visibility in monochrome */
html.monochrome #av-sprite {
  position: fixed !important;
  z-index: 2147483647 !important;
  filter: none !important;
}

html.monochrome #av-sprite-toggle {
  background: #ffffff !important;
  color: #000000 !important;
  border: 4px solid #000000 !important;
  box-shadow: 0 0 0 2px #ffffff, 0 6px 20px rgba(0, 0, 0, 0.7) !important;
  filter: none !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
}

html.monochrome .av-sprite-icon-fallback {
  color: #000000 !important;
  filter: none !important;
}

html.monochrome #av-sprite-chat {
  background: #000000 !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.2) !important;
  filter: none !important;
  z-index: 2147483647 !important;
}

html.monochrome .av-sprite-header {
  background: #000000 !important;
  border-bottom: 2px solid #888888 !important;
  color: #ffffff !important;
}

html.monochrome .av-sprite-header-btn {
  background: #333333 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

html.monochrome .av-sprite-title {
  color: #ffffff !important;
}

html.monochrome .av-sprite-message {
  background: #2a2a2a !important;
  color: #ffffff !important;
  border: 1px solid #888888 !important;
}

html.monochrome .av-sprite-options-panel {
  background: #0a0a0a !important;
  border: 2px solid #888888 !important;
}

html.monochrome .av-sprite-input-container input {
  background: #2a2a2a !important;
  color: #ffffff !important;
  border: 2px solid #888888 !important;
}

html.monochrome .av-sprite-input-container button {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}