/**
 * @name Serpensortia
 * @author Sithego
 * @version 0.1
 * @description Self-contained BetterDiscord theme generated by Sithego
 */

:root {
    --sithego-bg: #080c08;
    --sithego-surface: #131d13;
    --sithego-surface-alt: #424a42;
    --sithego-text: #c0c0c0;
    --sithego-muted: #424a42;
    --sithego-border: #0b110b;
    --sithego-accent: #1c7a44;
    --sithego-warn: #dc143c;

    --sithego-shell-bg: transparent;
    --sithego-panel-bg: rgba(19, 29, 19, 0.16);
    --sithego-panel-bg-strong: rgba(66, 74, 66, 0.22);
    --sithego-guilds-bg: rgba(8, 12, 8, 0.10);
    --sithego-hover: rgba(66, 74, 66, 0.24);
    --sithego-selected: rgba(28, 122, 68, 0.18);
    --sithego-selected-strong: rgba(28, 122, 68, 0.28);
    --sithego-border-alpha: rgba(11, 17, 11, 0.30);
    --sithego-input-bg: rgba(66, 74, 66, 0.20);
    --sithego-danger-bg: rgba(220, 20, 60, 0.20);
    --sithego-unread-bar: rgba(192, 192, 192, 0.92);
    --sithego-mention-badge: rgba(220, 20, 60, 0.92);
    --sithego-mention-bg: rgba(28, 122, 68, 0.18);

    --sithego-radius-sm: 4px;
    --sithego-radius: 8px;
    --sithego-radius-lg: 16px;

    --background-primary: transparent;
    --background-secondary: transparent;
    --background-secondary-alt: transparent;
    --background-tertiary: transparent;
    --background-floating: var(--sithego-panel-bg);
    --background-base-lowest: transparent;
    --background-base-low: transparent;
    --background-base-lower: transparent;
    --background-base-high: transparent;
    --background-base-higher: transparent;
    --background-modifier-hover: var(--sithego-hover);
    --background-modifier-active: var(--sithego-selected);
    --background-modifier-selected: var(--sithego-selected-strong);
    --background-modifier-accent: var(--sithego-hover);

    --text-normal: var(--sithego-text);
    --text-muted: var(--sithego-muted);
    --text-link: var(--sithego-accent);
    --header-primary: var(--sithego-text);
    --header-secondary: var(--sithego-muted);
    --interactive-normal: var(--sithego-text);
    --interactive-hover: var(--sithego-accent);
    --interactive-active: var(--sithego-text);
    --interactive-muted: var(--sithego-muted);

    --channels-default: var(--sithego-muted);
    --channeltextarea-background: var(--sithego-input-bg);
    --scrollbar-thin-thumb: var(--sithego-border-alpha);
    --scrollbar-thin-track: transparent;

    --button-filled-brand-background: var(--sithego-selected-strong);
    --button-filled-brand-background-hover: rgba(28, 122, 68, 0.36);
    --button-filled-brand-background-active: rgba(28, 122, 68, 0.42);

    --status-danger: var(--sithego-warn);
    --info-danger-foreground: var(--sithego-warn);
    --border-subtle: var(--sithego-border-alpha);
    --border-normal: var(--sithego-border-alpha);
}

/* fully transparent app shell */
html,
body,
#app-mount,
[class*="app_"],
[class*="bg_"],
[class*="layer_"],
[class*="layers_"],
[class*="base_"],
[class*="container_"],
[class*="content_"],
[class*="chat_"],
[class*="sidebar_"],
[class*="membersWrap_"],
[class*="members_"],
[class*="panels_"],
[class*="standardSidebarView_"],
[class*="contentRegion_"],
[class*="sidebarRegion_"],
[class*="peopleColumn_"],
[class*="nowPlayingColumn_"],
[class*="applicationStore_"],
[class*="pageWrapper_"],
main,
section {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--sithego-text) !important;
}

/* guild bar */
[class*="guilds_"] {
    background: var(--sithego-guilds-bg) !important;
    border-right: 1px solid var(--sithego-border-alpha) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* keep guild/server icon containers crisp */
[data-list-item-id^="guildsnav_"],
[data-list-item-id^="guildsnav_"] *,
[class*="guilds_"] [class*="listItem_"],
[class*="guilds_"] [class*="blobContainer_"],
[class*="guilds_"] [class*="wrapper_"],
[class*="guilds_"] svg,
[class*="guilds_"] img,
[class*="guilds_"] foreignObject {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

/* glass panels */
[class*="sidebar_"] nav,
[class*="chatContent_"],
[class*="members_"],
[class*="panels_"],
[class*="container_"][class*="themed_"],
[class*="header_"],
[class*="title_"],
[class*="searchBar_"],
[class*="menu_"],
[class*="root_"],
[class*="modal_"],
[class*="autocomplete_"],
[class*="messagesPopoutWrap_"],
[class*="contentWrapper_"],
[class*="drawerSizingWrapper_"],
[class*="focusLock_"],
[class*="card_"],
[class*="bar_"],
[class*="footer_"],
form {
    background: var(--sithego-panel-bg) !important;
    border: 1px solid var(--sithego-border-alpha) !important;
    border-radius: var(--sithego-radius) !important;
    color: var(--sithego-text) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* inputs */
input,
textarea,
[class*="input_"],
[class*="channelTextArea_"],
[class*="editor_"] {
    background: var(--sithego-input-bg) !important;
    color: var(--sithego-text) !important;
    border: 1px solid var(--sithego-border-alpha) !important;
    border-radius: var(--sithego-radius-sm) !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* buttons */
button,
[class*="button_"],
[role="button"],
[class*="item_"],
[class*="tabBarItem_"] {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--sithego-radius-sm) !important;
    box-shadow: none !important;
}

button:hover,
[class*="button_"]:hover,
[role="button"]:hover,
[class*="item_"]:hover,
[class*="interactive_"]:hover,
[class*="clickable_"]:hover {
    background: var(--sithego-hover) !important;
    color: var(--sithego-accent) !important;
    border-color: var(--sithego-border-alpha) !important;
}

[class*="selected_"],
[class*="modeSelected_"],
[class*="item_"][aria-selected="true"],
[class*="clickable_"][class*="selected_"],
[aria-checked="true"] {
    background: var(--sithego-selected) !important;
    color: var(--sithego-text) !important;
    border-color: rgba(28, 122, 68, 0.45) !important;
}

/* regular text */
[class*="markup_"],
[class*="messageContent_"],
[class*="topic_"],
[class*="title_"],
[class*="defaultColor"],
[class*="text-md"],
[class*="text-sm"],
[class*="text-xs"] {
    color: var(--sithego-text) !important;
}

/* muted secondary text */
[class*="subtext_"],
[class*="description_"],
[class*="hint_"],
[class*="membersGroup_"],
[class*="channelName_"],
[class*="subtitle_"] {
    color: var(--sithego-muted) !important;
}

a,
[class*="anchor_"] {
    color: var(--sithego-accent) !important;
}

/* generic icons */
[class*="icon_"] {
    color: var(--sithego-muted) !important;
}

button:hover [class*="icon_"],
[class*="button_"]:hover [class*="icon_"],
[class*="item_"]:hover [class*="icon_"],
[class*="selected_"] [class*="icon_"] {
    color: var(--sithego-accent) !important;
}

/* keep guild icons visible */
[class*="guilds_"] svg,
[data-list-item-id^="guildsnav_"] svg,
[class*="blobContainer_"] svg,
[class*="listItem_"] svg {
    color: inherit !important;
    fill: currentColor !important;
}

/* keep guild list scrollable */
[class*="guilds_"] [class*="scroller_"] {
    overflow-y: auto !important;
    overflow-x: visible !important;
}

/* let native guild indicator render outside bounds */
[class*="guilds_"] [class*="listItem_"],
[class*="guilds_"] [class*="blobContainer_"],
[class*="guilds_"] [class*="wrapper_"],
[class*="guilds_"] [class*="overlay_"],
[data-list-item-id^="guildsnav_"],
[data-list-item-id^="guildsnav_"] > div {
    overflow: visible !important;
}

/* position guild items so the native indicator can anchor correctly */
[class*="listItem_"],
[class*="blobContainer_"] {
    position: relative !important;
}

/* native guild unread/selected indicator wrapper */
[class*="guilds_"] [class*="overlay_"],
[class*="guilds_"] [class*="wrapper_"][aria-hidden="true"] {
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 40 !important;
}

/* native indicator element */
[class*="guilds_"] [class*="overlay_"] [class*="item_"],
[class*="guilds_"] [class*="wrapper_"][aria-hidden="true"] [class*="item_"] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: var(--sithego-accent) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

/* preserve the small unread pill */
[class*="guilds_"] [class*="overlay_"] [class*="item_"][style*="height: 8px"],
[class*="guilds_"] [class*="wrapper_"][aria-hidden="true"] [class*="item_"][style*="height: 8px"] {
    width: 10px !important;
    height: 10px !important;
    min-height: 10px !important;
}

/* preserve the larger active/unread variant */
[class*="guilds_"] [class*="overlay_"] [class*="item_"][style*="height: 40px"],
[class*="guilds_"] [class*="overlay_"] [class*="item_"][style*="height: 32px"],
[class*="guilds_"] [class*="overlay_"] [class*="item_"][style*="height: 24px"],
[class*="guilds_"] [class*="wrapper_"][aria-hidden="true"] [class*="item_"][style*="height: 40px"],
[class*="guilds_"] [class*="wrapper_"][aria-hidden="true"] [class*="item_"][style*="height: 32px"],
[class*="guilds_"] [class*="wrapper_"][aria-hidden="true"] [class*="item_"][style*="height: 24px"] {
    width: 4px !important;
    height: 20px !important;
    min-height: 20px !important;
}

/* don't let selected guild styling hide the native rail */
[class*="guilds_"] [aria-selected="true"] {
    box-shadow: inset 0 0 0 1px rgba(28, 122, 68, 0.35) !important;
}

/* keep guild badges visible */
[class*="guilds_"] [class*="numberBadge_"],
[class*="guilds_"] [class*="iconBadge_"],
[class*="guilds_"] [class*="lowerBadge_"],
[class*="guilds_"] [class*="upperBadge_"] {
    background: var(--sithego-accent) !important;
    color: #080c08 !important;
    border: 1px solid rgba(220, 20, 60, 0.45) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

/* CHANNEL INDICATORS */
[class*="modeUnreadImportant_"],
[class*="modeUnread_"],
[class*="channel_"][class*="unread_"] {
    position: relative !important;
}

[class*="modeUnreadImportant_"] [class*="name_"],
[class*="modeUnread_"] [class*="name_"],
[class*="channel_"][class*="unread_"] [class*="name_"] {
    color: var(--sithego-accent) !important;
    font-weight: 600 !important;
}

[class*="modeUnreadImportant_"]::before,
[class*="modeUnread_"]::before,
[class*="channel_"][class*="unread_"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 999px;
    background: var(--sithego-accent) !important;
    opacity: 1 !important;
}

[class*="unread_"][class*="wrapper_"],
[class*="wrapper_"][aria-label] [class*="unread_"],
[class*="content_"] [class*="unread_"] {
    background: var(--sithego-accent) !important;
    color: var(--sithego-accent) !important;
    opacity: 1 !important;
    border-radius: 999px !important;
}

/* channel mention badges */
[class*="children_"] > [class*="numberBadge_"],
[class*="link_"] [class*="numberBadge_"],
[class*="containerDefault_"] [class*="numberBadge_"] {
    background: var(--sithego-accent) !important;
    color: #080c08 !important;
    border: 1px solid rgba(220, 20, 60, 0.45) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

/* mention-highlighted channels */
[class*="modeUnreadImportant_"][class*="mentions_"],
[class*="modeSelected_"][class*="mentions_"] {
    background: rgba(220, 20, 60, 0.10) !important;
    border-radius: var(--sithego-radius-sm) !important;
}

/* mention badges */
[class*="numberBadge_"],
[class*="iconBadge_"],
[class*="mentionsBadge_"],
[class*="badge_"] {
    border-radius: 999px !important;
}

[class*="numberBadge_"]:not([style*="background-color: rgb(36, 128, 70)"]),
[class*="mentionsBadge_"],
[class*="stack_"] > [class*="badge_"] {
    background: var(--sithego-mention-badge) !important;
    color: #080c08 !important;
    border: 1px solid rgba(220, 20, 60, 0.45) !important;
    box-shadow: none !important;
}

/* mentioned messages */
[class*="mentioned_"] {
    background: var(--sithego-mention-bg) !important;
    border-left: 2px solid var(--sithego-accent) !important;
}

[class*="mentioned_"]::before {
    background: var(--sithego-accent) !important;
}

/* unread / jump bars */
[class*="newMessagesBar_"],
[class*="jumpToPresentBar_"] {
    background: var(--sithego-selected-strong) !important;
    color: var(--sithego-text) !important;
    border: 1px solid rgba(28, 122, 68, 0.40) !important;
    border-radius: var(--sithego-radius-sm) !important;
}
/* keep channel scroller unread bars readable */
[class*="unreadTop_"],
[class*="unreadBottom_"] {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    display: none !important;
}

/* style only the actual unread bar */
[class*="unreadTop_"] > [class*="unreadBar_"],
[class*="unreadBottom_"] > [class*="unreadBar_"],
[class*="unreadTop_"] > [class*="bar_"][class*="unread_"],
[class*="unreadBottom_"] > [class*="bar_"][class*="unread_"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 12px) !important;
    min-width: 0 !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 6px !important;
    padding: 0 8px !important;
    background: var(--sithego-selected) !important;
    color: var(--sithego-text) !important;
    border: 1px solid rgba(28, 122, 68, 0.35) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* unread bar containers should stay invisible */
[class*="unreadTop_"],
[class*="unreadBottom_"] {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

/* style only the actual unread bar */
[class*="unreadTop_"] > [class*="unreadBar_"],
[class*="unreadBottom_"] > [class*="unreadBar_"],
[class*="unreadTop_"] > [class*="bar_"][class*="unread_"],
[class*="unreadBottom_"] > [class*="bar_"][class*="unread_"] {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    inset: auto !important;
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    min-width: 0 !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 6px !important;
    padding: 0 8px !important;
    background: var(--sithego-selected) !important;
    color: var(--sithego-text) !important;
    border: 1px solid rgba(28, 122, 68, 0.35) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* keep the unread bar text centered inside the pill */
[class*="unreadTop_"] > [class*="unreadBar_"] [class*="text_"],
[class*="unreadBottom_"] > [class*="unreadBar_"] [class*="text_"],
[class*="unreadTop_"] > [class*="bar_"][class*="unread_"] [class*="text_"],
[class*="unreadBottom_"] > [class*="bar_"][class*="unread_"] [class*="text_"] {
    display: inline !important;
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    color: var(--sithego-text) !important;
    white-space: nowrap !important;
    transform: none !important;
    translate: none !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* neutralize pseudo elements that can offset label placement */
[class*="unreadTop_"] > [class*="unreadBar_"]::before,
[class*="unreadBottom_"] > [class*="unreadBar_"]::before,
[class*="unreadTop_"] > [class*="unreadBar_"]::after,
[class*="unreadBottom_"] > [class*="unreadBar_"]::after,
[class*="unreadTop_"] > [class*="bar_"][class*="unread_"]::before,
[class*="unreadBottom_"] > [class*="bar_"][class*="unread_"]::before,
[class*="unreadTop_"] > [class*="bar_"][class*="unread_"]::after,
[class*="unreadBottom_"] > [class*="bar_"][class*="unread_"]::after {
    transform: none !important;
}

/* don't turn structural unread wrappers into pills */
[class*="wrapper_"][aria-label] [class*="unread_"]:not([class*="unreadBar_"]):not([class*="unreadTop_"]):not([class*="unreadBottom_"]):not([class*="bar_"]),
[class*="content_"] [class*="unread_"]:not([class*="unreadBar_"]):not([class*="unreadTop_"]):not([class*="unreadBottom_"]):not([class*="bar_"]) {
    background: var(--sithego-accent) !important;
    color: var(--sithego-accent) !important;
    opacity: 1 !important;
    border-radius: 999px !important;
}

/* don't turn structural unread wrappers into green pills */
[class*="wrapper_"][aria-label] [class*="unread_"]:not([class*="unreadBar_"]):not([class*="unreadTop_"]):not([class*="unreadBottom_"]):not([class*="bar_"]),
[class*="content_"] [class*="unread_"]:not([class*="unreadBar_"]):not([class*="unreadTop_"]):not([class*="unreadBottom_"]):not([class*="bar_"]) {
    background: var(--sithego-accent) !important;
    color: var(--sithego-accent) !important;
    opacity: 1 !important;
    border-radius: 999px !important;
}
/* mention pills */
[class*="mention"] {
    background: var(--sithego-mention-bg) !important;
    color: var(--sithego-accent) !important;
    border: 1px solid rgba(220, 20, 60, 0.35) !important;
}

/* separators */
[class*="divider_"],
hr {
    border-color: var(--sithego-border-alpha) !important;
}

/* danger */
[class*="error_"],
[class*="danger_"],
[class*="colorDanger"] {
    color: var(--sithego-warn) !important;
}

[class*="lookFilled_"][class*="colorBrand_"] {
    background: var(--button-filled-brand-background) !important;
    color: var(--sithego-text) !important;
    border-color: rgba(28, 122, 68, 0.45) !important;
}

[class*="lookFilled_"][class*="colorRed_"] {
    background: var(--sithego-danger-bg) !important;
    color: var(--sithego-text) !important;
    border-color: rgba(220, 20, 60, 0.45) !important;
}

/* attached autocomplete / emote popup */
[class*="autocompleteAttached_"],
[class*="autocompleteAttached_"] [class*="container_"],
[class*="autocompleteAttached_"] [class*="content_"],
[class*="autocompleteAttached_"] [class*="scroller_"],
[class*="autocompleteAttached_"] [class*="header_"] {
    background: var(--sithego-surface) !important;
    border-color: var(--sithego-border-alpha) !important;
    color: var(--sithego-text) !important;
}

[class*="clickable_"][role="option"] > [class*="base_"]:hover,
[class*="clickable_"][role="option"][aria-selected="true"] > [class*="base_"] {
    background: var(--sithego-accent) !important;
}

/* scrollbars */
::-webkit-scrollbar-thumb {
    background: var(--sithego-border-alpha) !important;
    border-radius: var(--sithego-radius-sm) !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

body {
    --custom-guild-sidebar-width: 500px !important;
    --user-area-width: 450px !important;
    --custom-member-list-width: 550px !important;
}

[class*="topBar_"] {
    position: fixed !important;
    top: -600px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1000 !important;
    width: 800px !important;

    color: var(--sithego-accent) !important;

    padding: 12px 16px !important;
    background: var(--sithego-bg) !important;
    border: 1px solid var(--sithego-border-alpha) !important;
    border-radius: var(--sithego-radius) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}