/* =====================================================
   ex-obscuritate.de — Cinny theme override
   Base: dark theme (._15q3ngn1)
   Palette:
     #202020  darkest bg
     #2a2a2a  mid bg
     #2f2f2f  raised bg
     #dd6900  accent (orange)
     #ffcc00  gold (highlights)
     #ffffff  text
   ===================================================== */

/* Override the dark theme colour tokens.
   Loaded after Cinny's CSS so same-specificity rules
   are resolved by source order. */
._15q3ngn1 {
  /* ── Backgrounds ───────────────────────────────── */
  --oq6d070: #202020;   /* darkest surface */
  --oq6d071: #252525;
  --oq6d072: #2a2a2a;
  --oq6d073: #2f2f2f;
  --oq6d075: #252525;   /* sidebar bg */
  --oq6d076: #2a2a2a;
  --oq6d077: #2f2f2f;
  --oq6d078: #383838;
  --oq6d07a: #2a2a2a;   /* card/panel bg */
  --oq6d07b: #2f2f2f;
  --oq6d07c: #383838;
  --oq6d07d: #444444;
  --oq6d07t: #202020;   /* tooltip/overlay bg */
  --oq6d07u: #2a2a2a;
  --oq6d07v: #2f2f2f;
  --oq6d07w: #383838;
  --oq6d07x: #444444;
  --oq6d07l: #383838;
  --oq6d07m: #383838;

  /* ── Text ──────────────────────────────────────── */
  --oq6d074: #ffffff;   /* primary text on dark */
  --oq6d079: #ffffff;
  --oq6d07e: #ffffff;
  --oq6d07p: #ffffff;   /* high-emphasis text */
  --oq6d07q: #eeeeee;
  --oq6d07r: #cccccc;
  --oq6d07s: #aaaaaa;
  --oq6d07y: #ffffff;

  /* ── Primary accent (was purple, now orange) ───── */
  --oq6d07f: #dd6900;   /* primary accent */
  --oq6d07g: #c25d00;   /* hover */
  --oq6d07h: #b85600;
  --oq6d07i: #a84e00;   /* pressed */
  --oq6d07j: #1a0d00;   /* accent bg darkest */
  --oq6d07k: #2a1400;
  --oq6d07n: #4a2500;   /* accent bg lightest */
  --oq6d07o: #ffcc00;   /* accent on dark bg = gold */
}

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

/* Remove border-radius from message bubbles and panels
   to match the no-rounded-corners aesthetic */
[class*="MsgContent"],
[class*="bubble"],
[class*="Bubble"] {
  border-radius: 4px !important;
}

/* Room list sidebar border */
[class*="RoomNavItem"]:hover,
[class*="RoomNavItem"][aria-selected="true"] {
  border-left: 2px solid #dd6900 !important;
  background-color: rgba(221,105,0,0.12) !important;
}

/* Active room highlight */
[class*="RoomNavItem"][aria-selected="true"] {
  background-color: rgba(221,105,0,0.18) !important;
}

/* Message input box */
[class*="RoomInput"],
[class*="Editor"],
[contenteditable="true"] {
  border: 1px solid rgba(255,204,0,0.3) !important;
}

[class*="RoomInput"]:focus-within,
[class*="Editor"]:focus-within {
  border-color: #dd6900 !important;
}

/* Buttons */
[class*="btn-primary"],
button[class*="Primary"] {
  background: linear-gradient(135deg, #dd6900, #c25d00) !important;
  border-color: #dd6900 !important;
}

/* Links */
a { color: #ffcc00 !important; }
a:hover { color: #dd6900 !important; }

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: #dd6900 #202020;
}
::-webkit-scrollbar { width: 6px; background: #202020; }
::-webkit-scrollbar-thumb { background: #dd6900; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #ffcc00; }

/* Unread badge */
[class*="Badge"],
[class*="UnreadBadge"] {
  background: #dd6900 !important;
  color: #ffffff !important;
}

/* Mention / highlight badge */
[class*="Mention"] {
  background: #ffcc00 !important;
  color: #202020 !important;
}

/* Tooltip */
[class*="Tooltip"],
[role="tooltip"] {
  background: #2f2f2f !important;
  border: 1px solid rgba(221,105,0,0.4) !important;
  color: #ffffff !important;
}

/* ── Input and card borders → orange ───────────────── */
._15q3ngn1 input,
._15q3ngn1 textarea,
._15q3ngn1 [contenteditable] {
  border: 1px solid #dd6900 !important;
  border-radius: 6px !important;
}

._15q3ngn1 input:focus,
._15q3ngn1 textarea:focus,
._15q3ngn1 [contenteditable]:focus {
  border-color: #ffcc00 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(221,105,0,0.2) !important;
}

/* Login card and all surface cards */
._15q3ngn1 [class*="Card"],
._15q3ngn1 [class*="card"],
._15q3ngn1 [class*="Panel"],
._15q3ngn1 [class*="panel"],
._15q3ngn1 [class*="Modal"],
._15q3ngn1 [class*="modal"],
._15q3ngn1 [class*="Popup"],
._15q3ngn1 [class*="popup"],
._15q3ngn1 [class*="Menu"],
._15q3ngn1 [class*="menu"] {
  border: 1px solid rgba(221,105,0,0.45) !important;
}

/* The main login container specifically */
._15q3ngn1 main > div,
._15q3ngn1 [class*="Login"],
._15q3ngn1 [class*="login"] {
  border: 1px solid rgba(221,105,0,0.5) !important;
}

/* ── Icons → gold ───────────────────────────────────── */
._15q3ngn1 svg {
  color: #ffcc00 !important;
}

/* Navigation icons in sidebar */
._15q3ngn1 nav svg,
._15q3ngn1 [role="navigation"] svg,
._15q3ngn1 aside svg {
  color: #ffcc00 !important;
}

/* Active/selected nav item icon → orange */
._15q3ngn1 [aria-selected="true"] svg,
._15q3ngn1 [aria-current="page"] svg {
  color: #dd6900 !important;
}

/* ── Divider lines → orange tint ───────────────────── */
._15q3ngn1 hr,
._15q3ngn1 [class*="Divider"],
._15q3ngn1 [class*="divider"] {
  border-color: rgba(221,105,0,0.3) !important;
}

/* ── Secondary button (Explore Community Rooms etc) ─ */
._15q3ngn1 button:not([class*="primary"]):not([class*="Primary"]) {
  border: 1px solid rgba(255,204,0,0.4) !important;
  color: #ffcc00 !important;
}

/* ── Panel divider lines → orange ─────────────────── */
._15q3ngn1 {
  /* This token controls the translucent border/divider colour */
}

/* Hard target for any remaining grey hr/borders */
._15q3ngn1 hr {
  border-color: rgba(221,105,0,0.4) !important;
  background-color: rgba(221,105,0,0.4) !important;
}

/* ── Navigation icons → gold ──────────────────────── */
/* Icons use fill:currentColor so we set color on the parent */
._15q3ngn1 nav button,
._15q3ngn1 nav a,
._15q3ngn1 aside button,
._15q3ngn1 aside a,
._15q3ngn1 [role="navigation"] button,
._15q3ngn1 [role="navigation"] a {
  color: #ffcc00 !important;
}

/* Active nav item → orange instead of gold */
._15q3ngn1 nav button[aria-selected="true"],
._15q3ngn1 nav button[data-active="true"],
._15q3ngn1 nav a[aria-current],
._15q3ngn1 aside button[aria-selected="true"] {
  color: #dd6900 !important;
}

/* ── "Create Room" → match "Explore Community Rooms" ─ */
/* Target the first/primary button when it sits above a
   secondary one — makes it outline style like the one below */
._15q3ngn1 button[class*="outlined"],
._15q3ngn1 button[class*="Outlined"],
._15q3ngn1 [class*="NoRoom"] button:first-of-type,
._15q3ngn1 [class*="noRoom"] button:first-of-type,
._15q3ngn1 [class*="empty"] button:first-of-type {
  background: transparent !important;
  border: 1px solid rgba(255,204,0,0.5) !important;
  color: #ffcc00 !important;
}

/* ── Create Room button → outline style ─────────────── */
button.epr39zd {
  background: transparent !important;
  border: 1px solid rgba(255,204,0,0.5) !important;
  color: #ffcc00 !important;
}
button.epr39zd p {
  color: #ffcc00 !important;
}

/* ── SVG icons → gold ────────────────────────────────── */
/* Icons use fill:currentColor so set color on the SVG itself */
svg._19nrl2w0 {
  color: #ffcc00 !important;
}

/* ── Input wrapper → orange border, remove inner ring ─ */
/* The outer wrapper div gets the border */
div._1rrvnjm8 {
  border: 1px solid rgba(221,105,0,0.5) !important;
  border-radius: 6px !important;
}
div._1rrvnjm8:focus-within {
  border-color: #dd6900 !important;
  box-shadow: 0 0 0 2px rgba(221,105,0,0.2) !important;
}

/* The actual input element — remove its own border/ring */
input._1rrvnjmr {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ── Remove browser focus ring on inputs ─────────────── */
._15q3ngn1 input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ── Source Code + Support buttons → grey with border ── */
a.epr39zf {
  background: #2a2a2a !important;
  border: 1px solid rgba(255,204,0,0.5) !important;
  color: #ffcc00 !important;
}
a.epr39zf:hover {
  background: #2f2f2f !important;
  border-color: #dd6900 !important;
  color: #dd6900 !important;
}
a.epr39zf svg {
  color: #ffcc00 !important;
}
a.epr39zf:hover svg {
  color: #dd6900 !important;
}

/* ── Tooltips ────────────────────────────────────────── */
/* Outer wrapper — borderless, transparent */
._6plmi2g {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Inner bubble — single clean border */
._6plmi21 {
  background-color: #2f2f2f !important;
  border: 1px solid rgba(221,105,0,0.5) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* ── Panel separators → orange ───────────────────────── */
._1yan8dd1[role="separator"],
._1yan8dd1 {
  background-color: rgba(221,105,0,0.6) !important;
  min-width: 1px !important;
  min-height: 1px !important;
}

/* ── Vertical panel separators — force visible width ─── */
._1yan8ddc {
  width: 1px !important;
  min-width: 1px !important;
  flex-shrink: 0 !important;
  background-color: rgba(221,105,0,0.6) !important;
}

/* ── Sidebar → content border ────────────────────────── */
._1rwrsxz1 {
  border-right: 1px solid rgba(221,105,0,0.5) !important;
}
._1rwrsxz2 {
  border-right: 1px solid rgba(221,105,0,0.5) !important;
}

/* ── Icon sidebar right border ───────────────────────── */
._1ho1fyw0 {
  border-right: 1px solid rgba(221,105,0,0.5) !important;
}

/* ── Room list right border ──────────────────────────── */
._1xki9of1 {
  border-right: 1px solid rgba(221,105,0,0.5) !important;
}

/* ── Panel header bottom border ─────────────────────── */
.hru6be0 {
  border-bottom: 1px solid rgba(221,105,0,0.5) !important;
}