/* SHADOWS.LOUNGE — Cyberpunk User Override
 * Loaded LAST in index.html so it overrides built-in themes.
 * Heavy use of !important and high-specificity selectors.
 * Targets: cpv-theme-light/dark body classes (Element-Web v1.12.x)
 *          AND legacy mx_AuthBody / mx_Welcome classes.
 */

/* === Force dark on EVERYTHING (incl cpd theme classes) === */
html, body,
body.cpd-theme-light, body.cpd-theme-dark,
.mx_AppWrapper, #matrixchat,
.mx_Welcome, .mx_Welcome_wrap, .mx_Welcome_content {
  background-color: #050510 !important;
  color: #e6f7ff !important;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace !important;
}

/* === Animated cyberpunk background ONLY on auth pages ===
 * Ken-Burns pan (slow scale + slight translate) + saturation pulse.
 * The bg sits on a fixed pseudo-element so it doesn't scroll with the card.
 */
.mx_AuthPage,
body.mx_AuthPage,
[class*="mx_AuthPage"] {
  position: relative !important;
  background: #050510 !important;
  overflow: hidden !important;
}

.mx_AuthPage::before,
body.mx_AuthPage::before {
  content: "" !important;
  position: fixed !important;
  inset: -10% !important;
  z-index: -1 !important;
  background-image: url("img/cyber-bg.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  /* Pre-render hint: own layer, GPU-accelerated */
  will-change: transform, filter !important;
  animation:
    cyber-bg-pan 28s ease-in-out infinite alternate,
    cyber-bg-pulse 6s ease-in-out infinite;
}

/* === Dark overlay ON TOP of the bg image (sits between bg and card) ===
 * Two radial gradients dim the edges + center to keep the card readable.
 * Subtle scanline gradient layered on top.
 */
.mx_AuthPage::after,
body.mx_AuthPage::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    /* center dim for card readability */
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(5, 5, 16, 0.85), rgba(5, 5, 16, 0.55) 50%, rgba(5, 5, 16, 0.25) 100%),
    /* edge vignette */
    radial-gradient(ellipse at top, rgba(255, 43, 214, 0.06), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(0, 255, 240, 0.05), transparent 60%),
    /* scanline texture */
    repeating-linear-gradient(0deg,
      rgba(0, 255, 240, 0.025) 0px,
      rgba(0, 255, 240, 0.025) 1px,
      transparent 1px,
      transparent 3px) !important;
  animation: cyber-scanline-shift 8s linear infinite;
}

/* Ensure card content sits above the overlay */
.mx_AuthPage .mx_AuthPage_content,
.mx_AuthPage .mx_AuthPage_modal,
.mx_AuthPage .mx_AuthPage_wrap,
.mx_AuthPage .mx_Welcome,
.mx_AuthPage .mx_AuthBody,
.mx_AuthPage [class*="AuthBody"] {
  position: relative !important;
  z-index: 2 !important;
}

@keyframes cyber-bg-pan {
  0%   { transform: scale(1.05) translate(-1.5%, -0.5%); }
  50%  { transform: scale(1.12) translate(1.0%, 0.8%); }
  100% { transform: scale(1.08) translate(0.5%, -1.0%); }
}

@keyframes cyber-bg-pulse {
  0%, 100% { filter: brightness(0.75) saturate(1.15) hue-rotate(0deg); }
  50%      { filter: brightness(0.85) saturate(1.30) hue-rotate(-8deg); }
}

@keyframes cyber-scanline-shift {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 0 0, 0 6px; }
}

/* === Kill ALL background images including Iceland landscape ===
 * (Auth-page bg now comes from our ::before pseudo-element, so anything
 *  from Element-Web's own welcome page must be suppressed.) */
.mx_AuthPage img,
.mx_AuthPage picture,
.mx_AuthPage [class*="bgImage"],
.mx_AuthPage [class*="backgroundImage"],
.mx_AuthPage [class*="BackgroundImage"],
.mx_AuthPage [class*="_pageBackground_"],
.mx_AuthPage [class*="_welcomePage_"] {
  display: none !important;
}

/* === Auth card body: dark glass (mx_AuthBody OR mx_Welcome) === */
.mx_AuthBody, .mx_Welcome, .mx_Welcome_wrap, .mx_Welcome_content {
  background-color: rgba(8, 8, 15, 0.95) !important;
  border: 1px solid rgba(0, 255, 240, 0.4) !important;
  border-radius: 4px !important;
  box-shadow:
    0 0 60px rgba(0, 255, 240, 0.20),
    0 0 120px rgba(255, 43, 214, 0.12),
    inset 0 0 60px rgba(0, 255, 240, 0.03) !important;
  padding: 32px !important;
  color: #e6f7ff !important;
}

/* === Headlines: monospace, glitchy, cyan === */
h1, h2, h3, h4,
.mx_AuthBody h1, .mx_AuthBody h2,
.mx_Login h1, .mx_AuthPage h1,
.mx_Welcome h1, .mx_Welcome h2 {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: #00fff0 !important;
  text-shadow:
    1px 0 0 rgba(255, 43, 214, 0.7),
    -1px 0 0 rgba(0, 255, 240, 0.7),
    0 0 14px rgba(0, 255, 240, 0.6);
}

h1, .mx_AuthBody h1, .mx_AuthPage h1, .mx_Welcome h1 {
  animation: glitch-shift 4s steps(2) infinite;
}

@keyframes glitch-shift {
  0%, 86%, 100% { transform: translate(0, 0); }
  88% { transform: translate(1px, 0); }
  90% { transform: translate(-1px, 1px); }
  92% { transform: translate(1px, -1px); }
  94% { transform: translate(-1px, 0); }
}

/* === Buttons: any kind === */
.mx_AccessibleButton,
button,
[data-testid*="primary"],
[data-testid*="secondary"] {
  font-family: 'JetBrains Mono', monospace !important;
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
  border-radius: 2px !important;
}

/* Primary buttons: magenta cyber gradient */
.mx_AccessibleButton_kind_primary,
button[data-testid*="primary"],
button[class*="primary"] {
  background: linear-gradient(135deg, #ff2bd6 0%, #b026ff 100%) !important;
  background-color: #ff2bd6 !important;
  border: 1px solid #00fff0 !important;
  box-shadow:
    0 0 16px rgba(255, 43, 214, 0.6),
    inset 0 0 8px rgba(0, 255, 240, 0.25) !important;
  color: #050510 !important;
  font-weight: 700 !important;
}

button[class*="primary"]:hover, [data-testid*="primary"]:hover, .mx_AccessibleButton_kind_primary:hover {
  background: linear-gradient(135deg, #ff5be0 0%, #c44dff 100%) !important;
  background-color: #ff5be0 !important;
  box-shadow:
    0 0 24px rgba(255, 43, 214, 0.85),
    inset 0 0 10px rgba(0, 255, 240, 0.4) !important;
}

/* Secondary buttons: cyan outlined */
.mx_AccessibleButton_kind_secondary,
button[class*="secondary"] {
  background-color: transparent !important;
  background: transparent !important;
  border: 1px solid rgba(0, 255, 240, 0.5) !important;
  color: #00fff0 !important;
}

button[class*="secondary"]:hover, .mx_AccessibleButton_kind_secondary:hover {
  border-color: #00fff0 !important;
  background-color: rgba(0, 255, 240, 0.1) !important;
  background: rgba(0, 255, 240, 0.1) !important;
  box-shadow: 0 0 14px rgba(0, 255, 240, 0.5) !important;
}

/* === Input fields === */
input[type="text"], input[type="password"], textarea,
.mx_Field input, [class*="Field"] input, .mx_Login input,
input.mx_FormField_input, .mx_Login_loginForm_input {
  background-color: rgba(10, 10, 20, 0.7) !important;
  background: rgba(10, 10, 20, 0.7) !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 255, 240, 0.5) !important;
  border-radius: 0 !important;
  color: #e6f7ff !important;
  font-family: 'JetBrains Mono', monospace !important;
  caret-color: #ff2bd6 !important;
}

input:focus, textarea:focus, .mx_Field input:focus, [class*="Field"] input:focus {
  border-bottom: 2px solid #ff2bd6 !important;
  box-shadow: 0 2px 18px rgba(255, 43, 214, 0.45) !important;
  outline: none !important;
}

input::placeholder, input::-webkit-input-placeholder {
  color: rgba(122, 138, 163, 0.7) !important;
}

/* === Links === */
a, a:visited,
.mx_AccessibleButton_kind_link, [class*="link"] {
  color: #00fff0 !important;
}

a:hover {
  color: #5effff !important;
  text-shadow: 0 0 8px rgba(0, 255, 240, 0.7);
}

/* === Footer === */
.mx_AuthFooter {
  color: #7a8aa3 !important;
  font-family: 'JetBrains Mono', monospace !important;
}

.mx_AuthFooter a, .mx_AuthFooter a:visited {
  color: #00fff0 !important;
  border-bottom: 1px dotted #00fff0;
  text-decoration: none !important;
}

/* === Spinner === */
.mx_Spinner, [class*="Spinner"] {
  border-color: #00fff0 rgba(0,255,240,0.2) rgba(0,255,240,0.2) rgba(0,255,240,0.2) !important;
}

/* === Logo: filter to cyan === */
.mx_AuthBody_logo img, img[class*="logo"], .mx_Login_logo img,
.mx_Welcome_image {
  filter: hue-rotate(140deg) saturate(2) brightness(1.2) !important;
}

/* === Field labels === */
label, .mx_Field_label, [class*="Field_label"] {
  color: #7a8aa3 !important;
  font-family: 'JetBrains Mono', monospace !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8em !important;
}

/* === Dropdown === */
.mx_AccessibleButton_hasKind_link_tertiary, [class*="dropdown"], [class*="Dropdown"] {
  background-color: rgba(10, 10, 20, 0.9) !important;
  color: #00fff0 !important;
  border: 1px solid rgba(0, 255, 240, 0.3) !important;
}

/* === cpd-light token overrides === */
:root {
  --cpd-color-text-primary: #e6f7ff !important;
  --cpd-color-text-secondary: #7a8aa3 !important;
  --cpd-color-text-action-accent: #00fff0 !important;
  --cpd-color-text-link-external: #00fff0 !important;
  --cpd-color-bg-canvas-default: #050510 !important;
  --cpd-color-bg-canvas-subtle-secondary: #08080f !important;
  --cpd-color-bg-subtle-secondary: #0f0f1f !important;
  --cpd-color-bg-action-primary-rest: #ff2bd6 !important;
  --cpd-color-bg-action-primary-hovered: #ff5be0 !important;
  --cpd-color-bg-action-primary-pressed: #d41ab0 !important;
}

/* === Keep app surface ABOVE the matrix-rain canvas (canvas z-index:0) ===
 * Without this, the fixed full-viewport rain canvas (z-index:0) renders
 * over the logged-in chat UI. Force the app wrapper to sit on top.
 * BUT keep the app background transparent so the rain shows through
 * behind the chat windows.
 */
.mx_AppWrapper,
#matrixchat {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
}

/* === Rain shows behind the chat: make core panels translucent ===
 * So the matrix code rain is visible in the background behind the
 * room list / timeline / right panel, while text stays readable.
 */
.mx_LeftPanel,
.mx_RightPanel,
.mx_RoomView,
.mx_MainSplit,
.mx_RoomList,
.mx_MemberList,
.mx_EventTile {
  background-color: rgba(5, 5, 16, 0.82) !important;
}