/* ==========================================================================
   BMT (British Messaging Thingyimajig) — theme-aol.css
   Purpose: the DEFAULT skin. A genuine late-90s/early-2000s look —
   Windows 98 desktop teal, beveled 3D "outset/inset" chrome (the real
   CSS trick classic OS UIs used, not a flat-design approximation),
   a navy-to-blue AOL-toolbar gradient for title bars and the site
   header, and Tahoma for UI chrome while message/bio content keeps
   the browser's default serif — exactly how OS chrome vs. web content
   fonts differed back then.

   Only visual/skin rules live here. Structure lives in layout.css so
   future themes (theme-pesterchum.css) can restyle freely without
   fighting layout positioning.
   ========================================================================== */

:root {
  /* Desktop */
  --bmt-desktop-teal: #008080;

  /* Beveled chrome (classic Windows "3D Objects" grey family) */
  --bmt-face: #c0c0c0;
  --bmt-face-light: #dcdcdc;
  --bmt-highlight: #ffffff;
  --bmt-shadow: #808080;
  --bmt-dark-shadow: #404040;

  /* AOL toolbar / titlebar blue */
  --bmt-blue-dark: #003399;
  --bmt-blue-mid: #1e5fb3;
  --bmt-blue-light: #3366cc;

  /* Accent */
  --bmt-gold: #ffcc00;

  /* Status */
  --bmt-online-green: #00a933;
  --bmt-offline-grey: #999999;

  /* Chrome font stack — genuine period OS UI font */
  --bmt-ui-font: Tahoma, "MS Sans Serif", Geneva, Verdana, sans-serif;
}

/* --------------------------------------------------------------------
   Desktop backdrop — the single most recognizable "Windows 98" detail.
   Flat, no gradient, no texture: that's how it actually looked.
   -------------------------------------------------------------------- */

body {
  background-color: var(--bmt-desktop-teal);
  color: #000000;
}

/* --------------------------------------------------------------------
   Site header / nav — the AOL toolbar. A navy-to-blue gradient bar
   with the logo on the left and flat nav "buttons" that pop into a
   3D beveled button only on hover/focus, and press inward on click —
   exactly how classic IE/Office toolbar buttons behaved.
   -------------------------------------------------------------------- */

.site-header {
  background: linear-gradient(to bottom, var(--bmt-blue-dark), var(--bmt-blue-light));
  border-bottom: 2px solid var(--bmt-dark-shadow);
}

.site-nav__btn,
.site-nav__signed-in {
  font-family: var(--bmt-ui-font);
  font-size: 12px;
  color: #ffffff;
}

.site-nav__signed-in strong {
  color: var(--bmt-gold);
}

.site-nav__btn {
  padding: 4px 10px;
  border: 2px solid transparent;
  background-color: transparent;
  text-decoration: none;
  cursor: pointer;
}

.site-nav__btn:hover,
.site-nav__btn:focus-visible {
  background-color: var(--bmt-face);
  color: #000000;
  border-style: outset;
  border-color: var(--bmt-face);
}

.site-nav__btn:active {
  border-style: inset;
  border-color: var(--bmt-face);
  background-color: var(--bmt-face-light);
}

.site-nav__btn--logout {
  font-family: var(--bmt-ui-font);
}

/* --------------------------------------------------------------------
   Windows — the classic beveled 3D panel. `border-style: outset` with
   a single border-color is the authentic old-browser trick: the
   browser itself paints the light-top-left / dark-bottom-right shading.
   -------------------------------------------------------------------- */

.window {
  background-color: var(--bmt-face);
  border: 2px outset var(--bmt-face);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

.window__titlebar {
  background: linear-gradient(to right, var(--bmt-blue-dark), var(--bmt-blue-light));
  border-bottom: 1px solid var(--bmt-dark-shadow);
}

.window__title {
  font-family: var(--bmt-ui-font);
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 0.2px;
}

.window__control-btn {
  background-color: var(--bmt-face);
  border: 2px outset var(--bmt-face);
  font-family: var(--bmt-ui-font);
  font-weight: bold;
  font-size: 11px;
  line-height: 1;
  color: #000000;
}

.window__control-btn:active {
  border-style: inset;
}

.window__body {
  background-color: var(--bmt-face);
}

/* --------------------------------------------------------------------
   Buttons — same beveled treatment as window controls. Primary
   buttons get a dotted focus-style ring, same as a Windows dialog's
   default button.
   -------------------------------------------------------------------- */

.btn {
  font-family: var(--bmt-ui-font);
  font-size: 12px;
  padding: 5px 14px;
  background-color: var(--bmt-face);
  border: 2px outset var(--bmt-face);
  color: #000000;
}

.btn:active {
  border-style: inset;
}

.btn--primary {
  outline: 1px dotted var(--bmt-blue-dark);
  outline-offset: -4px;
  font-weight: bold;
}

/* --------------------------------------------------------------------
   Form fields — recessed/"inset" look, like classic OS text fields.
   Labels use the UI chrome font; typed content stays in the
   browser's default serif (untouched here on purpose).
   -------------------------------------------------------------------- */

.signon__field label,
.profile .signon__field label {
  font-family: var(--bmt-ui-font);
  font-size: 12px;
  font-weight: bold;
  display: block;
  margin-bottom: 2px;
}

.signon input[type="text"],
.signon input[type="password"],
.profile input[type="text"],
.profile textarea,
.chat__composer-input {
  background-color: #ffffff;
  border: 2px inset var(--bmt-face);
  padding: 4px 6px;
}

.signon__blurb {
  font-family: var(--bmt-ui-font);
  font-size: 12px;
  margin-bottom: 6px;
}

.signon__hint {
  font-family: var(--bmt-ui-font);
  font-size: 11px;
  color: var(--bmt-dark-shadow);
}

.signon__error {
  font-family: var(--bmt-ui-font);
  font-size: 12px;
  color: #aa0000;
  font-weight: bold;
}

.signon__register-hint {
  font-family: var(--bmt-ui-font);
  font-size: 12px;
  margin-top: 4px;
}

.signon__register-hint a {
  color: var(--bmt-blue-dark);
  text-decoration: underline;
}

/* --------------------------------------------------------------------
   Buddy list
   -------------------------------------------------------------------- */

.buddylist__toolbar {
  font-family: var(--bmt-ui-font);
  font-size: 12px;
  background-color: var(--bmt-face-light);
  border-bottom: 1px solid var(--bmt-shadow);
}

.buddylist__toolbar a {
  color: var(--bmt-blue-dark);
  font-size: 11px;
}

.buddylist__groups {
  background-color: #ffffff;
  border: 2px inset var(--bmt-face);
  margin: 4px;
}

.buddy-group__header {
  font-family: var(--bmt-ui-font);
  font-size: 12px;
  font-weight: bold;
  background-color: var(--bmt-face-light);
  border-bottom: 1px solid #d0d0d0;
}

.buddy-group__header::before {
  content: "▸ ";
  font-size: 10px;
}

.buddy {
  font-family: var(--bmt-ui-font);
  font-size: 12px;
}

.buddy:hover {
  background-color: var(--bmt-blue-dark);
  color: #ffffff;
}

.buddy__status-dot {
  background-color: var(--bmt-offline-grey);
  border: 1px solid var(--bmt-dark-shadow);
}

.buddy-group[data-group="online"] .buddy__status-dot {
  background-color: var(--bmt-online-green);
}

/* --------------------------------------------------------------------
   Chat window
   -------------------------------------------------------------------- */

.chat__log {
  background-color: #ffffff;
  border: 2px inset var(--bmt-face);
  margin: 4px;
}

.chat__message-meta strong {
  font-family: var(--bmt-ui-font);
  font-size: 11px;
  color: var(--bmt-blue-dark);
}

.chat__message-timestamp {
  font-family: var(--bmt-ui-font);
  font-size: 10px;
  color: var(--bmt-shadow);
}

.chat__message--own .chat__message-meta strong {
  color: #aa0000;
}

.chat__typing-indicator {
  font-family: var(--bmt-ui-font);
  font-size: 11px;
  font-style: italic;
  color: var(--bmt-shadow);
}

.chat__composer {
  background-color: var(--bmt-face);
  border-top: 1px solid var(--bmt-shadow);
}

/* --------------------------------------------------------------------
   Profile page
   -------------------------------------------------------------------- */

.profile__icon-option {
  font-size: 20px;
  padding: 4px 8px;
  background-color: var(--bmt-face);
  border: 2px outset var(--bmt-face);
}

.profile__icon-option:active {
  border-style: inset;
}

.profile__icon-option.is-selected {
  border-style: inset;
  background-color: var(--bmt-face-light);
  outline: 1px dotted var(--bmt-blue-dark);
  outline-offset: -4px;
}

/* --------------------------------------------------------------------
   Scrollbars — Chromium/WebKit only, purely additive polish. Firefox
   falls back to its native scrollbar with no ill effect.
   -------------------------------------------------------------------- */

.window__body::-webkit-scrollbar,
.chat__log::-webkit-scrollbar,
.buddylist__groups::-webkit-scrollbar {
  width: 16px;
}

.window__body::-webkit-scrollbar-track,
.chat__log::-webkit-scrollbar-track,
.buddylist__groups::-webkit-scrollbar-track {
  background-color: var(--bmt-face);
}

.window__body::-webkit-scrollbar-thumb,
.chat__log::-webkit-scrollbar-thumb,
.buddylist__groups::-webkit-scrollbar-thumb {
  background-color: var(--bmt-face);
  border: 2px outset var(--bmt-face);
}