/* FurryDen Chat — Cyberpunk theme for Cinny v4 */
/* Targets the obfuscated CSS custom properties from Cinny's compiled stylesheet. */
/* If Cinny is upgraded and class names change, update the selectors below. */

/* ── Force dark canvas on any theme ──────────────────────────────────────── */
body, #root, #appBody {
  background-color: #08080f !important;
}

/* ── Override every Cinny theme class ────────────────────────────────────── */
/* Variable semantics:
   --oq6d070..074  = surface scale + primary text
   --oq6d075..079  = alt surface scale + secondary text
   --oq6d07a..07e  = panel surface scale + tertiary text
   --oq6d07f..07o  = accent colour scale
   --oq6d07p..07y  = inverse text/surface scale
*/

.oq6d071w,
._15q3ngn0,
._15q3ngn1,
._15q3ngn2 {
  /* Surface scale — deep navy */
  --oq6d070: #08080f !important;
  --oq6d071: #0d0d1a !important;
  --oq6d072: #131325 !important;
  --oq6d073: #181835 !important;
  --oq6d074: #e0e8ff !important;   /* primary text */
  --oq6d075: #0d0d1a !important;
  --oq6d076: #131325 !important;
  --oq6d077: #181835 !important;
  --oq6d078: #1e1e45 !important;
  --oq6d079: #e0e8ff !important;   /* secondary text */
  --oq6d07a: #131325 !important;
  --oq6d07b: #181835 !important;
  --oq6d07c: #1e1e45 !important;
  --oq6d07d: #242455 !important;
  --oq6d07e: #e0e8ff !important;   /* tertiary text */

  /* Accent scale — neon cyan */
  --oq6d07f: #00e5ff !important;
  --oq6d07g: #00c9df !important;
  --oq6d07h: #00bdd4 !important;
  --oq6d07i: #00b1c9 !important;
  --oq6d07j: #000820 !important;   /* text on accent */
  --oq6d07k: rgba(0, 229, 255, 0.10) !important;
  --oq6d07l: rgba(0, 229, 255, 0.15) !important;
  --oq6d07m: rgba(0, 229, 255, 0.20) !important;
  --oq6d07n: rgba(0, 229, 255, 0.28) !important;
  --oq6d07o: #a0f8ff !important;   /* accent emphasis */

  /* Inverse/contrast scale */
  --oq6d07p: #ffffff !important;
  --oq6d07q: #e8efff !important;
  --oq6d07r: #d4dcf5 !important;
  --oq6d07s: #c0c8e8 !important;
  --oq6d07t: #08080f !important;   /* inverse surface */
  --oq6d07u: #1e1e45 !important;
  --oq6d07v: #242455 !important;
  --oq6d07w: #2a2a65 !important;
  --oq6d07x: #303075 !important;
  --oq6d07y: #e0e8ff !important;

  /* Shadow/overlay */
  --oq6d071t: rgba(0, 229, 255, 0.25) !important;
  --oq6d071u: rgba(0, 0, 0, 0.85) !important;
  --oq6d071v: rgba(0, 0, 0, 0.70) !important;
}

/* ── Neon glow on interactive elements ───────────────────────────────────── */
a {
  color: #00e5ff;
}
a:hover {
  color: #a0f8ff;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}

/* Mention highlights → magenta */
.oq6d071w [data-highlight],
._15q3ngn0 [data-highlight],
._15q3ngn1 [data-highlight],
._15q3ngn2 [data-highlight] {
  color: #ff00aa !important;
  text-shadow: 0 0 4px rgba(255, 0, 170, 0.5);
}

/* ── Scrollbar styling ────────────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: #00e5ff22 #08080f;
}
*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
*::-webkit-scrollbar-track {
  background: #08080f;
}
*::-webkit-scrollbar-thumb {
  background: #00e5ff33;
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #00e5ff66;
}

/* ── Selection colour ─────────────────────────────────────────────────────── */
::selection {
  background: rgba(0, 229, 255, 0.25);
  color: #e0e8ff;
}

/* ── Login page: lock homeserver field so it can't be typed in ───────────── */
/* Cinny renders the homeserver as a text input on the login screen.
   pointer-events:none prevents any interaction; opacity keeps it readable. */
input[name="homeserver"],
input[placeholder*="homeserver" i],
input[value="chat.furryden.online"] {
  pointer-events: none !important;
  user-select: none !important;
  opacity: 0.7 !important;
  cursor: default !important;
}

/* ── Replace Cinny logo with family crest ────────────────────────────────── */
/* CSS content: on <img> overrides the rendered source in Chromium.          */
/* React cannot overwrite this since it operates below the style layer.      */
img[alt="Cinny Logo"] {
  content: url('/assets/family-crest.png') !important;
  width: 70px !important;
  height: 70px !important;
  object-fit: contain !important;
  background: transparent !important;
}
