/**
 * @name FentWare Discord
 * @author fentware.cc
 * @description FentWare-style Discord skin: black/white/red, crisp borders, subtle CRT vibe.
 * @version 1.0.0
*/

/* =========================
   FentWare Core Variables
   ========================= */
:root{
  /* Core palette */
  --fw-bg: #070707;
  --fw-panel: #0c0c0c;
  --fw-panel2:#0f0f0f;
  --fw-ink: #eaeaea;
  --fw-muted:#a0a0a0;
  --fw-muted2:#6f6f6f;
  --fw-line:#1f1f1f;
  --fw-line2:#303030;

  /* Accent */
  --fw-accent:#ffffff;     /* keep white by default */
  --fw-red:#ff2a2a;        /* “FentWare red” */
  --fw-ok:#9dff9d;
  --fw-bad:#ff9d9d;

  /* Typography */
  --fw-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Shape */
  --fw-radius: 12px;
  --fw-radius2: 16px;

  /* CRT controls */
  --fw-scanlines: 0.12;    /* 0 = off, 0.12 subtle, 0.2+ strong */
  --fw-noise: 0.06;        /* 0 = off */
  --fw-flicker: 0.0;       /* 0 = off, 0.02 subtle */
}

/* =========================
   Base: fonts + backgrounds
   ========================= */
*{ font-family: var(--fw-font) !important; }
html, body{
  background: var(--fw-bg) !important;
}

/* Discord uses lots of CSS vars. We override the important ones. */
:root{
  --background-primary: var(--fw-bg) !important;
  --background-secondary: var(--fw-panel) !important;
  --background-secondary-alt: var(--fw-panel) !important;
  --background-tertiary: var(--fw-panel2) !important;

  --text-normal: var(--fw-ink) !important;
  --text-muted: var(--fw-muted) !important;
  --interactive-normal: var(--fw-muted) !important;
  --interactive-hover: var(--fw-ink) !important;
  --interactive-active: var(--fw-ink) !important;
  --interactive-muted: var(--fw-muted2) !important;

  --channels-default: var(--fw-muted) !important;
  --channeltextarea-background: #0a0a0a !important;

  --header-primary: var(--fw-ink) !important;
  --header-secondary: var(--fw-muted) !important;

  --scrollbar-auto-track: transparent !important;
  --scrollbar-auto-thumb: #151515 !important;
  --scrollbar-thin-thumb: #151515 !important;


  --mention-background: rgba(255,42,42,.10) !important;
  --mention-foreground: var(--fw-ink) !important;

  --info-warning-foreground: var(--fw-red) !important;
  --status-danger: var(--fw-red) !important;

  --radius-sm: var(--fw-radius) !important;
  --radius-md: var(--fw-radius) !important;
  --radius-lg: var(--fw-radius2) !important;
}

/* Crisp borders everywhere */
[class*="container"], [class*="panels"], [class*="sidebar"], [class*="chat"]{
  border-color: var(--fw-line) !important;
}

/* Main app shell */
#app-mount{
  background: var(--fw-bg) !important;
}

/* =========================
   Subtle CRT Overlay
   ========================= */
#app-mount::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 9999;
  opacity: var(--fw-scanlines);
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 1px,
      rgba(0,0,0,0.00) 2px,
      rgba(0,0,0,0.00) 4px
    );
  mix-blend-mode: overlay;
}

#app-mount::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 10000;
  opacity: 0;                 /* off */
  background: none !important;
}


/* Optional flicker */
@keyframes fw-flicker{
  0%, 100% { opacity: 1; }
  50% { opacity: calc(1 - var(--fw-flicker)); }
}
#app-mount{
  animation: fw-flicker 3.5s infinite linear;
}

/* =========================
   Left sidebar: servers + channels
   ========================= */

/* Server list */
[class*="guilds"]{
  background: var(--fw-bg) !important;
  border-right: 1px solid var(--fw-line) !important;
}
[class*="scroller"]::-webkit-scrollbar-thumb{
  background: #151515 !important;
}

/* Make server icons look “boxed” */
[class*="wrapper"] [class*="svg"]{
  border-radius: 12px !important;
}

/* Channels panel */
[class*="sidebar"]{
  background: var(--fw-panel) !important;
  border-right: 1px solid var(--fw-line) !important;
}

/* Channel items (hover/selected) */
[class*="containerDefault"] [class*="content"]{
  border-radius: 10px !important;
}
[class*="containerDefault"] [class*="content"]:hover{
  background: #0a0a0a !important;
  outline: 1px solid var(--fw-line2) !important;
}
[class*="modeSelected"] [class*="content"]{
  background: rgba(255,42,42,.10) !important;
  outline: 1px solid rgba(255,42,42,.35) !important;
}

/* =========================
   Chat area
   ========================= */
[class*="chat"]{
  background: var(--fw-bg) !important;
}
[class*="title"]{
  background: var(--fw-panel) !important;
  border-bottom: 1px solid var(--fw-line) !important;
}

/* Message list */
[class*="messagesWrapper"]{
  background: var(--fw-bg) !important;
}

/* Message hover */
[class*="message"]{
  border-radius: 12px !important;
}
[class*="message"]:hover{
  background: #0b0b0b !important;
  outline: 1px solid var(--fw-line) !important;
}

/* Inline code / code blocks */
code, pre{
  background: #0a0a0a !important;
  border: 1px solid var(--fw-line) !important;
  border-radius: 12px !important;
}

/* Mention pill */
[class*="mention"]{
  color: var(--fw-ink) !important;
  background: rgba(255,42,42,.12) !important;
  border: 1px solid rgba(255,42,42,.25) !important;
  border-radius: 999px !important;
}

/* =========================
   Message input
   ========================= */
[class*="channelTextArea"]{
  background: transparent !important;
}
[class*="channelTextArea"] [class*="scrollableContainer"]{
  background: #0a0a0a !important;
  border: 1px solid var(--fw-line) !important;
  border-radius: 14px !important;
}
[class*="channelTextArea"] [class*="scrollableContainer"]:focus-within{
  border-color: rgba(255,42,42,.45) !important;
  box-shadow: 0 0 0 2px rgba(255,42,42,.12) !important;
}

/* =========================
   Member list (right side)
   ========================= */
[class*="membersWrap"]{
  background: var(--fw-panel) !important;
  border-left: 1px solid var(--fw-line) !important;
}
[class*="member"]{
  border-radius: 10px !important;
}
[class*="member"]:hover{
  background: #0a0a0a !important;
  outline: 1px solid var(--fw-line2) !important;
}

/* =========================
   Popouts / Modals
   ========================= */
[class*="layer"] [class*="popover"], 
[class*="menu"], 
[class*="modal"]{
  background: #0a0a0a !important;
  border: 1px solid var(--fw-line2) !important;
  border-radius: var(--fw-radius2) !important;
}

/* Buttons look “flat terminal” */
button, [role="button"]{
  border-radius: 12px !important;
}
button:hover, [role="button"]:hover{
  filter: brightness(1.05);
}

/* Make primary actions red-accented without turning Discord into RGB */
[class*="lookFilled"][class*="colorBrand"]{
  background: rgba(255,42,42,.14) !important;
  border: 1px solid rgba(255,42,42,.35) !important;
  color: var(--fw-ink) !important;
}
[class*="lookFilled"][class*="colorBrand"]:hover{
  background: rgba(255,42,42,.20) !important;
}

/* Links */
a{
  color: var(--fw-accent) !important;
  text-decoration: none !important;
}
a:hover{
  text-decoration: underline !important;
  text-decoration-color: rgba(255,42,42,.55) !important;
}

/* =========================
   OPTIONAL: Turn CRT effects off quickly
   Set these to 0 if you want clean-only
   ========================= */
/*
:root{
  --fw-scanlines: 0;
  --fw-noise: 0;
  --fw-flicker: 0;
}
*/
/* =========================
   FIX: Mentioned message highlight (the huge red bubble)
   ========================= */


/* =========================
   HARD OVERRIDES: kill Discord default gray
   Put at bottom of theme
   ========================= */

/* 1) Force the big global tokens */
/* =========================================================
   FENTWARE PATCH PACK (safe gray removal + more fentifying)
   Put this at the VERY BOTTOM of your theme
   ========================================================= */

/* 0) IMPORTANT: do NOT use red as Discord's global brand token.
      It spills into random UI and makes gray look worse. */
:root{
  --brand-experiment: var(--fw-accent) !important;      /* keep brand neutral (white) */
  --brand-experiment-560: var(--fw-accent) !important;
}

/* 1) Modern Discord surface tokens (these catch a lot of the "mystery gray") */
:root{
  --bg-base-primary: var(--fw-bg) !important;
  --bg-base-secondary: var(--fw-panel) !important;
  --bg-base-tertiary: var(--fw-panel2) !important;

  --bg-surface-overlay: #0a0a0a !important;  /* popouts/overlays */
  --bg-surface-raised:  #0a0a0a !important;  /* raised cards */
  --background-floating: #0a0a0a !important;

  --modal-background: #0a0a0a !important;
  --modal-footer-background: #090909 !important;

  --deprecated-card-bg: #0a0a0a !important;
  --deprecated-store-bg: var(--fw-bg) !important;
}

/* 2) Keep contrast: assign SURFACES intentionally */
#app-mount [class*="chatContent"],
#app-mount [class*="messagesWrapper"],
#app-mount [class*="chat"]{
  background: var(--fw-bg) !important;
}

#app-mount [class*="sidebar"],
#app-mount [class*="membersWrap"],
#app-mount [class*="privateChannels"],
#app-mount [class*="sidebarRegion"]{
  background: var(--fw-panel) !important;
}

#app-mount [class*="title"],
#app-mount [class*="container"][class*="themed"],
#app-mount [class*="header"],
#app-mount [class*="toolbar"]{
  background: var(--fw-panel2) !important;
  border-bottom: 1px solid var(--fw-line) !important;
}

/* 3) Popouts / menus / pickers (common gray offenders) */
#app-mount [class*="popout"],
#app-mount [class*="menu"],
#app-mount [class*="contextMenu"],
#app-mount [class*="emojiPicker"],
#app-mount [class*="autocomplete"],
#app-mount [class*="drawer"],
#app-mount [role="menu"],
#app-mount [role="dialog"]{
  background: #0a0a0a !important;
  border: 1px solid var(--fw-line2) !important;
  border-radius: var(--fw-radius2) !important;
}

/* 4) Settings page + cards (Discord loves gray blocks here) */
#app-mount [class*="standardSidebarView"]{
  background: var(--fw-bg) !important;
}
#app-mount [class*="contentRegion"]{
  background: var(--fw-bg) !important;
}
#app-mount [class*="contentRegionScroller"]{
  background: var(--fw-bg) !important;
}

#app-mount [class*="card"],
#app-mount [class*="accountProfileCard"],
#app-mount [class*="backgroundAccent"],
#app-mount [class*="notice"],
#app-mount [class*="settingCard"],
#app-mount [class*="container"][class*="card"]{
  background: #0b0b0b !important;
  border: 1px solid var(--fw-line) !important;
  border-radius: var(--fw-radius2) !important;
}

/* 5) Inputs everywhere (search bars, forms, etc.) */
#app-mount input,
#app-mount textarea,
#app-mount [contenteditable="true"]{
  background: #0a0a0a !important;
  color: var(--fw-ink) !important;
  border: 1px solid var(--fw-line) !important;
  border-radius: 12px !important;
}
#app-mount input:focus,
#app-mount textarea:focus,
#app-mount [contenteditable="true"]:focus{
  border-color: rgba(255,42,42,.45) !important;
  box-shadow: 0 0 0 2px rgba(255,42,42,.12) !important;
}

/* 6) Mentions: keep them fent, but not gigantic */
#app-mount [class*="mentioned"]{
  background: rgba(255,42,42,.06) !important;
  border-radius: 12px !important;
}
#app-mount [class*="mentioned"]::before{
  background: rgba(255,42,42,.45) !important;
  width: 2px !important;
  border-radius: 2px !important;
}

/* 7) Tiny fent touches (optional, safe) */
#app-mount ::selection{
  background: rgba(255,42,42,.25) !important;
  color: var(--fw-ink) !important;
}