/**
  * @name Nox
  * @author Acrilic
  * @version 1.0.2
  * @description A clean, highly customized Nox-dark theme for Discord. Forked and modified from Dark+ by DevEvil.
  * @authorId 468132563714703390
  * @source https://github.com/AKRiLLiCK/nox
  * @credits DevEvil (original author of Dark+)
*/

/* 
  TO USE THE THEME WITH THE DEFAULT MEMBER LIST:
  → Comment out the first @import line below.
  → Then, uncomment the second @import line.
*/
@import url('https://devevil99.github.io/devevil/BetterDiscordAddons/Theme/Dark+/Dark+.theme.css');
/*@import url('https://devevil99.github.io/devevil/BetterDiscordAddons/Theme/Dark%2B/Dark%2B-Default-Member-List.css');*/


:root {
  --darkplus-bg: #121212;
  --darkplus-bg2: #1e1e1e;
  --darkplus-sec: #ffffff;
  --darkplus-links: #ffffff;
  --darkplus-home-icon: url(https://i.imgur.com/RvlNQ7k.png);
  --watermark-filter-invert: 0%;
  --watermark-filter-sepia: 50%;
  --watermark-filter-saturate: 3000%;
  --watermark-filter-hue-rotate: 210deg;
  --watermark-filter-brightness: 70%;
  --watermark-filter-contrast: 200%;

  /* Soft Nox Mentions */
  --background-mentioned: rgba(255, 255, 255, 0.05) !important;
  --background-mentioned-hover: rgba(255, 255, 255, 0.08) !important;
  --mention-background: rgba(255, 255, 255, 0.1) !important;
  --mention-foreground: #cccccc !important;

  /* Channel Mentions - Premium soft violet-blue accent */
  --channel-mention-background: rgba(138, 148, 253, 0.12) !important;
  --channel-mention-background-hover: rgba(138, 148, 253, 0.25) !important;
  --channel-mention-foreground: #8a94fd !important;
  --channel-mention-foreground-hover: #b4baff !important;
}

/* Explicit CSS overrides for mentions to ensure they are soft and readable */
.mention {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #cccccc !important;
  font-weight: 500;
}
.mention:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}
[class*="mentioned"] {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
[class*="mentioned"]::before {
  background-color: #888888 !important; /* A muted gray border instead of bright white/orange */
}

/* Distinct styling for interactive channel mentions to make them stand out as links */
a.mention,
a[class*="mention"] {
  background-color: var(--channel-mention-background) !important;
  color: var(--channel-mention-foreground) !important;
  font-weight: 600;
}
a.mention:hover,
a[class*="mention"]:hover {
  background-color: var(--channel-mention-background-hover) !important;
  color: var(--channel-mention-foreground-hover) !important;
}

/* Make collapsed member list sidebar wider so numbers don't get cut off */
[class*="membersWrap"] {
  width: 85px !important;
  min-width: 85px !important;
}
[class*="membersWrap"] [class*="members"] {
  width: 85px !important;
}
[class*="membersWrap"]:hover {
  width: 240px !important;
  min-width: 240px !important;
}
[class*="membersWrap"]:hover [class*="members"] {
  width: 240px !important;
}

/* Adjust chat content max-width to prevent the member list from overlapping and hiding the slow mode timer */
[class*="chatContent_"] {
  max-width: calc(100% - 85px) !important;
  transition: max-width 0.25s ease;
}

/* Optional: shrink chat when member list is expanded so it doesn't hide anything */
:root:has([class*="membersWrap"]:hover) [class*="chatContent_"] {
  max-width: calc(100% - 240px) !important;
}

/* Hide usernames, subtext, and badges when collapsed, and transition them smoothly */
[class*="membersWrap"] [class*="member"] [class*="username__"],
[class*="membersWrap"] [class*="member"] [class*="name__"],
[class*="membersWrap"] [class*="member"] [class*="activity__"],
[class*="membersWrap"] [class*="member"] [class*="subText__"],
[class*="membersWrap"] [class*="member"] [class*="badges__"],
[class*="membersWrap"] [class*="member"] [class*="botTag__"],
[class*="membersWrap"] [class*="member"] [class*="decorator__"] {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
[class*="membersWrap"]:not(:hover) [class*="member"] [class*="username__"],
[class*="membersWrap"]:not(:hover) [class*="member"] [class*="name__"],
[class*="membersWrap"]:not(:hover) [class*="member"] [class*="activity__"],
[class*="membersWrap"]:not(:hover) [class*="member"] [class*="subText__"],
[class*="membersWrap"]:not(:hover) [class*="member"] [class*="badges__"],
[class*="membersWrap"]:not(:hover) [class*="member"] [class*="botTag__"],
[class*="membersWrap"]:not(:hover) [class*="member"] [class*="decorator__"] {
  opacity: 0 !important;
  transform: translateX(-10px);
  pointer-events: none;
}

/* Make bot/app tags Discord blue when visible */
[class*="botTag__"] {
  background-color: #5865f2 !important;
  color: #ffffff !important;
}

/* Hide the offline group header when collapsed */
[class*="membersWrap"]:not(:hover) [class*="membersGroup__"]:not(:has(~ [class*="membersGroup__"])),
[class*="membersWrap"]:not(:hover) [class*="membersGroup"]:not(:has(~ [class*="membersGroup"])) {
  display: none !important;
}

/* Custom Watermark override to display your own name */
[class*="title_c38106"]:after,
.title_c38106:after {
  content: "NOX BY ACRILIC" !important;
  font-family: "Inter", "Outfit", "Helvetica Neue", sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #8a94fd !important; /* Premium soft violet-blue accent */
  background: none !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 10px !important;
  filter: none !important;
  width: auto !important;
  height: auto !important;
}

/* Nox - Channel Text Color Customization */
/* Scoped to the sidebar channels list for reliability */
[class*="sidebar_"] [class*="wrapper_"] {
  transition: color 0.15s ease;
}

/* Unread channel text & icon: Crisp White */
[class*="sidebar_"] [class*="wrapper_"][class*="modeUnreadImportant_"] [class*="name_"],
[class*="sidebar_"] [class*="wrapper_"][class*="modeUnread_"] [class*="name_"],
[class*="sidebar_"] [class*="wrapper_"][class*="modeUnreadImportant_"] [class*="icon_"],
[class*="sidebar_"] [class*="wrapper_"][class*="modeUnread_"] [class*="icon_"] {
  color: #ffffff !important;
}

/* Selected channel text & icon: Crisp White */
[class*="sidebar_"] [class*="wrapper_"][class*="modeSelected_"] [class*="name_"],
[class*="sidebar_"] [class*="wrapper_"][class*="modeSelected_"] [class*="icon_"] {
  color: #ffffff !important;
}

/* Hovered channel text & icon: Crisp White for interactive feedback */
[class*="sidebar_"] [class*="wrapper_"]:hover [class*="name_"],
[class*="sidebar_"] [class*="wrapper_"]:hover [class*="icon_"] {
  color: #ffffff !important;
}

/* Read/Normal channel text & icon: Premium Muted Gray */
[class*="sidebar_"] [class*="wrapper_"]:not([class*="modeUnreadImportant_"]):not([class*="modeUnread_"]):not([class*="modeSelected_"]):not(:hover) [class*="name_"],
[class*="sidebar_"] [class*="wrapper_"]:not([class*="modeUnreadImportant_"]):not([class*="modeUnread_"]):not([class*="modeSelected_"]):not(:hover) [class*="icon_"] {
  color: #8e9297 !important;
}

/* Muted channel text & icon: Darker Muted Gray */
[class*="sidebar_"] [class*="wrapper_"][class*="modeMuted_"]:not([class*="modeSelected_"]):not(:hover) [class*="name_"],
[class*="sidebar_"] [class*="wrapper_"][class*="modeMuted_"]:not([class*="modeSelected_"]):not(:hover) [class*="icon_"] {
  color: #585f67 !important;
}




/* Muted Microphone and Deafened Headset Icons Bright Red */
/* This overrides the white color variable used by Dark+ and Discord locally for muted elements */
[class^="panels_"] [aria-checked="true"],
[class^="panels_"] [aria-pressed="true"],
[aria-label*="Unmute" i],
[aria-label*="Undeafen" i],
[class^="panels_"] [class*="buttonActive" i],
[class*="colorDanger" i],
[class*="colorRed" i],
*:has(> svg > path[class*="strikethrough" i]),
svg:has(path[class*="strikethrough" i]) {
  --darkplus-sec: #ff0000 !important;
  --white: #ff0000 !important;
  --status-danger: #ff0000 !important;
  --interactive-normal: #ff0000 !important;
  --interactive-active: #ff0000 !important;
}


/* Custom Thinner Scrollbars for Channel List and Chat */
/* Hidden by default, visible on hover */

[class*="sidebar_"] [class*="scroller"]::-webkit-scrollbar,
[class*="chatContent_"] [class*="scroller"]::-webkit-scrollbar {
  width: 4px !important; 
  height: 4px !important;
}

[class*="sidebar_"] [class*="scroller"]::-webkit-scrollbar-track,
[class*="chatContent_"] [class*="scroller"]::-webkit-scrollbar-track {
  background-color: transparent !important;
  border: none !important;
}

[class*="sidebar_"] [class*="scroller"]::-webkit-scrollbar-thumb,
[class*="chatContent_"] [class*="scroller"]::-webkit-scrollbar-thumb {
  background-color: transparent !important;
  border-radius: 10px !important;
  border: none !important;
}

[class*="sidebar_"] [class*="scroller"]:hover::-webkit-scrollbar-thumb,
[class*="chatContent_"] [class*="scroller"]:hover::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

[class*="sidebar_"] [class*="scroller"]::-webkit-scrollbar-thumb:active,
[class*="chatContent_"] [class*="scroller"]::-webkit-scrollbar-thumb:active {
  background-color: rgba(255, 255, 255, 0.25) !important;
}


/* Unified Contour Lines & Borders */
/* Redefines Discord's internal border variables so all contour lines perfectly match */
.theme-dark, .theme-light, :root {
    --border-faint: #1e1e1e !important;
    --border-strong: #1e1e1e !important;
    --border-subtle: #1e1e1e !important;
    --background-modifier-accent: #1e1e1e !important;
    --elevation-low: 0 1px 0 0 #1e1e1e !important;
    --elevation-stroke: 0 0 0 1px #1e1e1e !important;
}

/* Explicitly force structural panel borders to #1e1e1e just in case they are hardcoded */
[class^="sidebar_"],
[class^="chat_"],
[class^="chatContent_"],
[class^="wrapper_"],
[class^="container_"] > [class^="base_"] {
    border-color: #1e1e1e !important;
}

/* Fix Top Title Bar Separator Line Discrepancy (Top-Left) */
/* 1. Nuclear option to destroy all disjointed native top borders on the headers */
#app-mount [class^="chatContent_"] [class*="title_"]::before,
#app-mount [class^="chatContent_"] [class*="title_"]::after,
#app-mount [class*="subtitleContainer_"]::before,
#app-mount [class*="subtitleContainer_"]::after,
#app-mount [class^="sidebar_"] > [class*="header_"]::before,
#app-mount [class^="sidebar_"] > [class*="header_"]::after,
#app-mount [class^="sidebar_"] > header::before,
#app-mount [class^="sidebar_"] > header::after,
#app-mount [class^="sidebar_"] > section[aria-label*="Channel" i]::before,
#app-mount [class^="sidebar_"] > section[aria-label*="Channel" i]::after,
#app-mount [class*="children_"]::before {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Explicitly draw the exact #1e1e1e border on the headers themselves to match native layout */
#app-mount [class^="chatContent_"] [class*="title_"],
#app-mount [class*="subtitleContainer_"],
#app-mount [class^="sidebar_"] > [class*="header_"],
#app-mount [class^="sidebar_"] > header,
#app-mount [class^="sidebar_"] > section[aria-label*="Channel" i] {
    border-top: 1px solid #1e1e1e !important;
    box-shadow: none !important;
}

/* Ensure the layout panels themselves DO NOT draw extra native lines */
#app-mount [class^="chatContent_"],
#app-mount [class^="content_"],
#app-mount [class^="sidebar_"],
#app-mount [class^="chat_"] {
    border-top: none !important;
    box-shadow: none !important;
}

/* --- User Profile / Voice Controls Floating Island Fix --- */
#app-mount [class^="panels_"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

#app-mount [class^="panels_"] > [class^="container_"],
#app-mount section[aria-label="User area"] {
    border: none !important;
    outline: none !important;
    /* Apply the dark drop shadow directly to the inner rounded island */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8) !important;
}

/* Fix GIF / Expression Picker unselected tabs being white */
[class*="picker" i] [role="tab"]:not([aria-selected="true"]),
[class*="picker" i] [class*="navButton" i]:not([class*="navButtonActive" i]):not([aria-selected="true"]) {
    color: #8e9297 !important;
}
[class*="picker" i] [role="tab"]:hover:not([aria-selected="true"]),
[class*="picker" i] [class*="navButton" i]:hover:not([class*="navButtonActive" i]):not([aria-selected="true"]) {
    color: #b9bbbe !important;
}

/* Force Voice Connected speaker icon inside badges to be pure white */
[class*="lowerBadge_" i] svg,
[class*="lowerBadge_" i] svg path,
[class*="iconBadge_" i] svg,
[class*="iconBadge_" i] svg path,
[class*="wrapper_" i] > div[class*="badge_" i] svg,
[class*="wrapper_" i] > div[class*="badge_" i] svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Remove PFP hover effects and shadows */
[class*="avatar_" i][class*="clickable_" i],
.avatar_c19a55.clickable_c19a55 {
    filter: none !important;
}

[class*="avatar_" i]:hover[class*="clickable_" i]:hover,
.avatar_c19a55:hover.clickable_c19a55:hover {
    transform: none !important;
    filter: none !important;
}