/* AIM / Windows-98 buddy list aesthetic. Beveled grey chrome, Tahoma type,
   that classic teal desktop. Kept hand-rolled (no 98.css dep). */

:root {
  --face: #c0c0c0;          /* window grey */
  --face-lt: #dfdfdf;
  --hi: #ffffff;            /* bevel highlight */
  --sh: #808080;            /* bevel shadow */
  --sh-dk: #404040;
  --tb1: #0a246a;           /* title bar gradient (XP-ish blue) */
  --tb2: #2f7be8;
  --online: #0a0a0a;
  --link: #0033cc;
}

* { box-sizing: border-box; }

/* `display:flex` on #app/.imwin would otherwise beat the UA [hidden] rule. */
[hidden] { display: none !important; }

/* small inline spinner for loading states */
.spin {
  display: inline-block; width: 11px; height: 11px; vertical-align: -1px;
  border: 2px solid rgba(0,0,0,.18); border-top-color: #5566aa; border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* The teal "desktop" lives ONLY on <html>, anchored to the viewport, so it's a
   single backdrop. (The windows are position:fixed, so <body> would otherwise
   collapse and paint its own mismatched box on top.) */
html {
  min-height: 100%;
  background: #008080;
  background-image:
    radial-gradient(circle at 20% 10%, #0a9c9c 0, transparent 40%),
    radial-gradient(circle at 90% 80%, #006666 0, transparent 45%);
  background-attachment: fixed;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Tahoma, 'MS Sans Serif', Geneva, Verdana, sans-serif;
  font-size: 13px;
  color: #000;
}

/* ---- window chrome ---- */
.window {
  /* floating + draggable, like the IM windows. JS sets px left/top (clearing
     the transform) on first show, so the default below is just the pre-JS
     centered position. */
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 320px;
  max-width: 100%;
  background: var(--face);
  border: 2px solid;
  border-color: var(--hi) var(--sh-dk) var(--sh-dk) var(--hi);
  box-shadow: 1px 1px 0 var(--sh), 4px 4px 14px rgba(0,0,0,.4);
  padding: 2px;
}

.titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, var(--tb1), var(--tb2));
  color: #fff;
  font-weight: bold;
  padding: 3px 4px 3px 6px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
  user-select: none;
  cursor: move;
}
.tb-title { font-size: 12px; }
.tb-btns { display: flex; gap: 2px; }
.tb-btns i {
  width: 16px; height: 14px;
  display: grid; place-items: center;
  background: var(--face);
  border: 1px solid;
  border-color: var(--hi) var(--sh-dk) var(--sh-dk) var(--hi);
  color: #000; font-style: normal; font-size: 9px; line-height: 1;
}
#app-close { cursor: pointer; }
#app-close:active { border-color: var(--sh-dk) var(--hi) var(--hi) var(--sh-dk); }

/* ---- sign-on screen ---- */
.signon { width: 300px; }
.signon-body { padding: 18px 18px 14px; text-align: center; }
.runner-big { width: 64px; margin: 0 auto 4px; }
.runner-big svg { width: 64px; height: 64px; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.25)); }
.signon h1 { margin: 2px 0 6px; font-size: 22px; letter-spacing: .5px; }
.tagline { margin: 0 0 16px; color: #333; font-size: 12px; line-height: 1.4; }

.fld {
  display: block; text-align: left; font-size: 11px; color: #222;
  margin-bottom: 12px; font-weight: bold;
}
.ta-wrap { position: relative; margin-top: 3px; }
input[type=text] {
  width: 100%; padding: 5px 6px; font: inherit; font-weight: normal;
  border: 2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh);
  background: #fff;
}
input:focus { outline: 1px dotted #000; outline-offset: -3px; }

.btn {
  font: inherit; padding: 6px 18px; cursor: pointer;
  background: var(--face);
  border: 2px solid; border-color: var(--hi) var(--sh-dk) var(--sh-dk) var(--hi);
}
.btn:active { border-color: var(--sh-dk) var(--hi) var(--hi) var(--sh-dk); }
.btn:disabled { color: var(--sh); cursor: default; }
.btn.primary { font-weight: bold; min-width: 110px; }
.btn.link {
  border: none; background: none; color: var(--link);
  text-decoration: underline; padding: 6px; display: block; margin: 8px auto 0;
}
.snd-check {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 10px 0 0; font-size: 12px; color: #333; cursor: pointer; user-select: none;
}
.snd-check input { cursor: pointer; margin: 0; }
.status { min-height: 16px; margin: 10px 0 4px; font-size: 11px; color: #a00; }
.fineprint { font-size: 10px; color: #555; line-height: 1.4; margin: 8px 0 0; }

/* ---- buddy list app ---- */
#app {
  display: flex; flex-direction: column;
  width: 300px; height: 460px;
  min-width: 240px; min-height: 220px;
  max-width: 96vw; max-height: 92vh;
  resize: both; overflow: hidden;
}
.menubar {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-bottom: 1px solid var(--sh);
  background: var(--face-lt); flex: none;
}
.menubar .me { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menubar .spacer { flex: 1; }

/* small connection indicator dot (detail lives in the About window) */
.conn-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.35); }
.conn-dot.connecting { background: #f4c430; }
.conn-dot.live { background: #36c24a; }
.conn-dot.down { background: #e44; }

.iconbtn {
  border: 2px solid; border-color: var(--hi) var(--sh-dk) var(--sh-dk) var(--hi);
  background: var(--face); cursor: pointer; font-weight: bold;
  font-size: 12px; line-height: 1; width: 20px; height: 20px; flex: none;
}
.iconbtn:active { border-color: var(--sh-dk) var(--hi) var(--hi) var(--sh-dk); }

/* sound toggle — clearly readable on/off, not a faint icon */
.sound-toggle {
  font: inherit; font-size: 11px; font-weight: bold; cursor: pointer; flex: none;
  padding: 2px 8px; border: 2px solid;
  border-color: var(--hi) var(--sh-dk) var(--sh-dk) var(--hi);
}
.sound-toggle.on { background: #cdebd0; color: #0a5e1a; }
.sound-toggle.off { background: #e9e2c8; color: #8a7a3a; }
.sound-toggle:active { border-color: var(--sh-dk) var(--hi) var(--hi) var(--sh-dk); }

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px; font-size: 11px; color: #333;
  border-bottom: 1px solid var(--sh);
}
.toolbar select { font: inherit; font-size: 11px; }
.clock { font-variant-numeric: tabular-nums; color: #444; }

.note {
  margin: 0; padding: 4px 8px; font-size: 10px;
  background: #fffbe0; color: #7a5c00; border-bottom: 1px solid var(--sh);
}

/* ---- the list ---- */
.list {
  flex: 1 1 auto; min-height: 60px; overflow-y: auto;
  background: #fff;
  border: 2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh);
  margin: 2px;
}
.group-hd {
  background: #ece9d8; font-weight: bold; font-size: 12px;
  padding: 3px 6px; cursor: pointer; user-select: none;
  border-bottom: 1px solid #cfcbb8; position: sticky; top: 0;
}
.group-hd .tw { display: inline-block; width: 12px; color: #555; font-size: 9px; }
.buddies { list-style: none; margin: 0; padding: 2px 0; }

.buddy {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 10px; cursor: pointer;
}
.buddy:hover { background: #d8e6ff; }
.runner { width: 20px; height: 20px; flex: none; }
.buddy.offline .runner .body { stroke: #aaa; }
.buddy.offline .runner .body circle { fill: #aaa; }
.buddy.offline .runner .ink { stroke: #888; }
.buddy.offline .runner .ink circle { fill: #888; }
.buddy.idle .runner { opacity: .7; }

.bd-av {
  width: 22px; height: 22px; border-radius: 3px; object-fit: cover; flex: none;
  border: 1px solid #999;
}
.bd-av.blank {
  display: grid; place-items: center; background: #5566aa; color: #fff;
  font-size: 11px; font-weight: bold;
}
.bd-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.bd-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-sub { font-size: 10px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.buddy.online .bd-name { color: var(--online); font-weight: bold; }
.buddy.idle .bd-name { color: #555; }
.buddy.offline .bd-name { color: #999; }
.buddy.offline .bd-av { filter: grayscale(1); opacity: .6; }
.buddy.idle .bd-av { filter: grayscale(.4); }

.buddy.flash { animation: pop 2.2s ease-out; }
@keyframes pop {
  0% { background: #fff7b0; }
  15% { background: #ffe55a; }
  100% { background: transparent; }
}

/* ---- typeahead dropdown (shared shape with sort-friends) ---- */
.ta-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  margin: 0; padding: 2px; list-style: none; background: #fff;
  border: 2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh);
  max-height: 220px; overflow-y: auto; box-shadow: 2px 2px 6px rgba(0,0,0,.3);
}
.ta-item { display: flex; align-items: center; gap: 7px; padding: 4px 6px; cursor: pointer; }
.ta-item.active, .ta-item:hover { background: #d8e6ff; }
.ta-av { width: 22px; height: 22px; border-radius: 3px; object-fit: cover; flex: none; }
.ta-av.ta-blank { display: grid; place-items: center; background: #5566aa; color: #fff; font-size: 11px; font-weight: bold; }
.ta-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.ta-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-handle { font-size: 10px; color: #777; }

/* ---- IM / chat windows ---- */
.imwin {
  position: fixed;
  width: 300px; height: 340px;
  min-width: 220px; min-height: 200px;
  max-width: 96vw; max-height: 92vh;
  resize: both; overflow: hidden;
  background: var(--face);
  border: 2px solid;
  border-color: var(--hi) var(--sh-dk) var(--sh-dk) var(--hi);
  box-shadow: 2px 2px 0 var(--sh), 5px 5px 18px rgba(0,0,0,.45);
  padding: 2px;
  display: flex;
  flex-direction: column;
}
/* the About window is content-sized, not a resizable scroller */
.imwin.about { height: auto; resize: none; }
.imwin.min { height: auto !important; resize: none; }
.imwin.min .im-sub,
.imwin.min .im-log,
.imwin.min .im-composer { display: none; }

.im-tb { cursor: move; flex: none; }
.im-tb .im-x, .im-tb .im-min { cursor: pointer; }

.im-sub {
  font-size: 11px; color: #333; padding: 3px 6px; flex: none;
  background: var(--face-lt); border-bottom: 1px solid var(--sh);
}
.im-sub a { color: var(--link); }

.im-log {
  flex: 1 1 auto; min-height: 60px; overflow-y: auto;
  background: #fff;
  border: 2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh);
  margin: 2px; padding: 4px 6px; font-size: 12px; line-height: 1.35;
}
.im-loading, .im-sys { color: #999; font-size: 11px; text-align: center; padding: 6px 0; }
.im-sys { color: #b0b0b0; font-style: italic; }
.im-deep {
  position: sticky; top: 0; z-index: 1;
  font-size: 10px; text-align: center; color: #7a5c00;
  background: #fffbe0; border-bottom: 1px solid #e6dca0; padding: 2px 0;
}

.im-line { margin: 0 0 7px; }
.im-name { color: #a01010; font-weight: bold; }   /* AIM "their" colour */
.im-line.mine .im-name { color: #0033cc; }         /* your messages, AIM-blue */
.im-time { color: #999; font-size: 10px; margin-left: 4px; }
.im-body { margin-top: 1px; }
.im-body .verb { color: #444; font-size: 11px; }
.im-body .q {
  display: block; margin: 2px 0 0; padding: 3px 7px; border-left: 3px solid #c8d4ec;
  background: #f4f7fc; color: #111; border-radius: 2px;
  white-space: pre-wrap; word-break: break-word;
}
.im-body a.q-link { text-decoration: none; cursor: pointer; }
.im-body a.q-link:hover { background: #e7eeff; border-left-color: #6f8fd6; }
.im-body .q-who { color: #0033cc; font-weight: bold; }

.im-new .q, .im-new .verb { animation: imflash 1.8s ease-out; }
@keyframes imflash { 0% { background: #fff7b0; } 100% { background: inherit; } }

.im-composer { display: flex; gap: 3px; padding: 3px; flex: none; }
.im-input {
  flex: 1; padding: 4px 6px; font: inherit; font-size: 12px;
  border: 2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh); background: #fff;
}
.im-send { padding: 4px 12px; font-weight: bold; }

@media (max-width: 640px) {
  .imwin { left: 4px !important; right: 4px; width: auto; }
}

/* ---- About / status window ---- */
.about { width: 300px; }
.about-body { padding: 10px 12px 12px; font-size: 12px; line-height: 1.45; color: #222; overflow-y: auto; }
.about-body p { margin: 0 0 10px; }
.about-body .ab-h {
  margin: 12px 0 5px; font-weight: bold; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; color: #555; border-bottom: 1px solid var(--sh); padding-bottom: 2px;
}
.ab-legend { list-style: none; margin: 0 0 8px; padding: 0; }
.ab-legend li { display: flex; align-items: baseline; gap: 7px; margin: 0 0 4px; }
.ab-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; position: relative; top: 1px; border: 1px solid rgba(0,0,0,.35); }
.ab-dot.on { background: #36c24a; }
.ab-dot.idle { background: #f4c430; }
.ab-dot.off { background: #b9b9b9; }
.ab-note { font-size: 11px; color: #555; }
.ab-status {
  background: #fff; border: 2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh);
  padding: 6px 8px; font-size: 11px; line-height: 1.6;
}
.ab-conn { font-weight: bold; }
.ab-conn.connecting { color: #8a6d00; }
.ab-conn.live { color: #0a5e1a; }
.ab-conn.down { color: #a00; }
.ab-dim { color: #999; }
.ab-foot { margin-top: 10px; font-size: 10px; color: #777; }
.ab-foot a { color: var(--link); }

/* ---- footer ---- */
.credit {
  position: fixed; left: 0; right: 0; bottom: 8px;
  margin: 0; font-size: 11px; color: #cdeaea; text-align: center;
}
.credit a { color: #fff; }