/**
 * @name Retro98 Discord Theme
 * @description A retro Windows 98–inspired Discord theme leveraging 98.css. 
 *              Uses vintage colors, “MS Sans Serif” fonts, and classic button and border styles.
 * @author YourName
 * @version 1.0.0
 * @invite YOUR_INVITE_CODE
 * @website https://your.website.example/
 */

/* Import 98.css for base retro styling */
@import url('https://unpkg.com/98.css');

/* -----------------------------------------------------------------------------
   Global Variables & Base Styles
   -----------------------------------------------------------------------------
   These variables set our retro palette, fonts, and spacings.
----------------------------------------------------------------------------- */
:root {
  /* Fonts & Basic Spacing */
  --font: "MS Sans Serif", sans-serif;
  letter-spacing: normal;
  font-weight: 400;
  --label-font-weight: 500;
  --corner-text: 'Retro98';
  --pad: 16px;
  --txt-pad: 10px;
  --panel-roundness: 0px;

  /* Background Colors */
  --bg-0: #c0c0c0;    /* Main background: classic Windows 98 gray */
  --bg-1: #d4d0c8;    /* Inner window background: typical window interior */
  --bg-2: #e0ffff;    /* Accent background: light cyan for content panels */
  --bg-3: #d3d3d3;    /* Alternative light gray for sidebars & scrollables */

  /* State Modifiers */
  --hover: rgba(0, 0, 0, 0.1);
  --active: rgba(0, 0, 0, 0.2);
  --selected: var(--active);

  /* Text Colors */
  --txt-dark: #000000;    /* For dark text on colored backgrounds */
  --txt-link: #0000EE;    /* Classic blue for links */
  --txt-0: #ffffff;       /* White */
  --txt-1: #000000;       /* Main text: black for high contrast */
  --txt-2: #333333;       /* Secondary text */
  --txt-3: #666666;       /* Muted text */

  /* Accent Colors */
  --acc-0: #000080; /* Navy blue as main accent */
  --acc-1: #0000A0; /* Slightly brighter blue for hover */
  --acc-2: #000060; /* Darker blue for active state */

  /* Borders */
  --border-width: 2px;
  --border-color: var(--bg-3);
  --border-hover-color: var(--acc-1);
  --border-transition: 0.2s ease;

  /* Status Dot Colors (optional overrides) */
  --online-dot: #00A000;
  --dnd-dot: #FF0000;
  --idle-dot: #FFA500;
  --streaming-dot: #800080;

  /* Mentions & Replies */
  --mention-txt: var(--acc-0);
  --mention-bg: rgba(0, 0, 128, 0.1);
  --mention-overlay: rgba(0, 0, 128, 0.1);
  --mention-hover-overlay: rgba(0, 0, 128, 0.05);
  --reply-overlay: var(--active);
  --reply-hover-overlay: var(--hover);
}

/* Apply our retro font and dark text to every element */
html, body, * {
  font-family: var(--font) !important;
  color: var(--txt-1) !important;
  background: var(--bg-0) !important;
}

/* -----------------------------------------------------------------------------
   App & Layout Containers
----------------------------------------------------------------------------- */

/* Main Discord container */
#app-mount,
.appMount__51fd7,
.app__160d8 {
  background-color: var(--bg-0) !important;
}

/* -----------------------------------------------------------------------------
   Panels & Content Areas
----------------------------------------------------------------------------- */

/* General content panels (chat windows, channel views, etc.) */
[class*="content"] {
  background-color: var(--bg-2) !important;
  border: var(--border-width) outset #fff !important;
  box-shadow: 2px 2px 0 #000 !important;
  padding: var(--txt-pad) !important;
  margin: var(--pad) !important;
}

/* Sidebars (server list, channels, member list, etc.) */
[class*="sidebar"] {
  background-color: var(--bg-1) !important;
  border: var(--border-width) inset #fff !important;
  padding: var(--pad) !important;
  margin: var(--pad) !important;
}

/* Headers / Title Bars (top navigation, channel headers, etc.) */
[class*="header"],
[class*="titlebar"],
[class*="topbar"] {
  background-color: var(--bg-2) !important;
  border-bottom: var(--border-width) outset #fff !important;
  padding: calc(var(--pad) / 2) 10px !important;
  margin-bottom: var(--pad) !important;
}

/* Footers */
[class*="footer"] {
  background-color: var(--bg-1) !important;
  border-top: var(--border-width) outset #fff !important;
  padding: calc(var(--pad) / 2) !important;
  margin-top: var(--pad) !important;
}

/* -----------------------------------------------------------------------------
   Scrollable Regions & Scrollbars
----------------------------------------------------------------------------- */

/* General scrollable areas (e.g. message lists, channel lists) */
[class*="scroller"] {
  background-color: var(--bg-1) !important;
  border: 1px solid #fff !important;
  padding: 5px !important;
}

/* Custom scrollbar styling for WebKit browsers */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: var(--bg-2);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-1);
  border: 2px solid #fff;
}

/* -----------------------------------------------------------------------------
   Buttons & Interactive Elements
----------------------------------------------------------------------------- */

/* Retro-styled buttons and button-like elements */
button, [class*="button"] {
  font-family: var(--font) !important;
  background: linear-gradient(to bottom, #f0ffff, var(--bg-1)) !important;
  border: var(--border-width) outset #fff !important;
  box-shadow: 1px 1px 0 #000 !important;
  padding: 4px 8px !important;
  margin: 2px !important;
  cursor: pointer;
  color: var(--txt-1) !important;
  transition: border var(--border-transition);
}

button:hover, [class*="button"]:hover {
  border: var(--border-width) inset #fff !important;
  box-shadow: none !important;
}

/* -----------------------------------------------------------------------------
   Modals, Windows & Dialogs
----------------------------------------------------------------------------- */

/* Floating modals and windows */
[class*="modal"],
[class*="window"] {
  background-color: var(--bg-2) !important;
  border: var(--border-width) solid #fff !important;
  box-shadow: 2px 2px 0 #000 !important;
  padding: var(--pad) !important;
  margin: var(--pad) auto !important;
}

/* -----------------------------------------------------------------------------
   Form Elements & Inputs
----------------------------------------------------------------------------- */

/* Text inputs, textareas, and select elements */
input, textarea, select {
  font-family: var(--font) !important;
  background-color: #fff !important;
  border: var(--border-width) inset #fff !important;
  padding: 4px !important;
  margin: 2px !important;
  color: var(--txt-1) !important;
}

/* -----------------------------------------------------------------------------
   Chat & Message Styling
----------------------------------------------------------------------------- */

/* Individual chat messages / message bubbles */
[class*="message"] {
  background-color: var(--bg-2) !important;
  border: var(--border-width) outset #fff !important;
  box-shadow: 1px 1px 0 #000 !important;
  padding: 6px !important;
  margin: 4px !important;
}

/* -----------------------------------------------------------------------------
   Avatars & Icons
----------------------------------------------------------------------------- */

/* Avatar images and icons */
img.avatar, [class*="avatar"] img {
  border: var(--border-width) solid #fff !important;
  box-shadow: 1px 1px 0 #000 !important;
}

/* -----------------------------------------------------------------------------
   Tabs, Menus & Tooltips
----------------------------------------------------------------------------- */

/* Tabbed elements (e.g. channel tabs, settings tabs) */
[class*="tab"] {
  background-color: var(--bg-1) !important;
  border: var(--border-width) outset #fff !important;
  padding: 4px 8px !important;
  margin: 2px !important;
}

/* Dropdown menus and select lists */
[class*="dropdown"],
[class*="select"] {
  background-color: var(--bg-2) !important;
  border: var(--border-width) inset #fff !important;
  padding: 4px !important;
}

/* Tooltips */
[class*="tooltip"] {
  background-color: var(--bg-2) !important;
  border: var(--border-width) solid #fff !important;
  box-shadow: 1px 1px 0 #000 !important;
  padding: 4px !important;
}

/* -----------------------------------------------------------------------------
   Additional UI Overrides
----------------------------------------------------------------------------- */

/* Channels, Conversations, etc. */
[class*="channel"],
[class*="conversation"] {
  background-color: var(--bg-2) !important;
  border: var(--border-width) outset #fff !important;
  padding: var(--pad) !important;
  margin: var(--pad) !important;
}

/* Expanded dropdowns */
[class*="dropdown"],
[class*="select"] {
  background-color: var(--bg-2) !important;
  border: var(--border-width) inset #fff !important;
  padding: 4px !important;
}

/* Force retro look on every element */
* {
  font-family: var(--font) !important;
  color: var(--txt-1) !important;
}

/* -----------------------------------------------------------------------------
   End Retro98 Discord Theme
----------------------------------------------------------------------------- */