/* AIM 5.1 in-page 2003 desktop — gray #ECE9D8 chrome, XP-luna blue title bars,
   Tahoma type, running-man. Desktop-first; no framework. */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: Tahoma, "MS Sans Serif", Geneva, sans-serif;
  font-size: 12px;
  overflow: hidden;
  user-select: none;
  color: #000;
}

/* ---- Desktop ---- */
#desktop {
  position: absolute;
  inset: 0 0 30px 0; /* above the 30px taskbar */
  background:
    radial-gradient(120% 90% at 50% 0%, #6ba1d6 0%, #3a6ea5 45%, #245089 100%);
  overflow: hidden;
}

/* ---- Taskbar (XP luna) ---- */
#taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
  display: flex; align-items: center; gap: 4px; padding: 0 4px;
  background: linear-gradient(180deg,#3f8bef 0%,#2a71dd 8%,#2064d6 45%,#1a5ad0 90%,#154ec0 100%);
  border-top: 1px solid #5a9bf0;
  z-index: 100000;
}
#start-btn {
  display: flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 12px 0 8px; border: none; border-radius: 3px;
  background: linear-gradient(180deg,#79c56f 0%,#3f9a35 55%,#2f7d28 100%);
  color: #fff; font-weight: bold; font-style: italic; font-size: 14px;
  cursor: pointer; text-shadow: 1px 1px 1px rgba(0,0,0,.4);
}
.start-label { letter-spacing: .5px; }
#taskbar-items { flex: 1; display: flex; gap: 4px; overflow: hidden; }
.taskbar-item {
  min-width: 120px; max-width: 180px; height: 24px; padding: 0 8px;
  display: flex; align-items: center; gap: 5px;
  background: linear-gradient(180deg,#3f8bef,#2064d6);
  border: 1px solid #5a9bf0; border-radius: 3px; color: #fff;
  font-size: 11px; cursor: pointer; overflow: hidden; white-space: nowrap;
}
.taskbar-item.active { background: linear-gradient(180deg,#1a4fa8,#2064d6); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.taskbar-item .ti-label { overflow: hidden; text-overflow: ellipsis; }
#tray {
  display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 8px;
  background: linear-gradient(180deg,#199ce8,#1478cf);
  border: 1px solid #4aa0e8; border-radius: 3px; color: #fff; font-size: 11px;
}
.runningman {
  display: inline-block; background: #ffd21e; color: #b06a00;
  border-radius: 3px; padding: 0 2px; font-size: 14px; line-height: 1;
}

/* ---- Windows ---- */
.win {
  position: absolute; min-width: 180px;
  background: #ECE9D8; border: 1px solid #0831d9;
  border-radius: 7px 7px 2px 2px;
  box-shadow: 3px 3px 12px rgba(0,0,0,.45);
  display: flex; flex-direction: column;
}
.win.dragging { opacity: .96; }
.win-title {
  height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 7px;
  background: linear-gradient(180deg,#0058e6 0%,#3a93ff 8%,#288eff 40%,#127dff 88%,#0362ee 100%);
  color: #fff; font-weight: bold; cursor: move;
  border-radius: 6px 6px 0 0; text-shadow: 1px 1px 1px rgba(0,0,0,.35);
  white-space: nowrap; overflow: hidden;
}
.win.inactive .win-title {
  background: linear-gradient(180deg,#7ba7e8 0%,#94b8ec 40%,#7ba7e8 100%);
}
.win-title .wt-icon { font-size: 11px; }
.win-title .wt-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.win-btns { display: flex; gap: 2px; }
.win-btn {
  width: 18px; height: 18px; border: 1px solid #fff; border-radius: 3px;
  background: linear-gradient(180deg,#4a9bff,#0a5fe0); color: #fff;
  font-size: 12px; font-weight: bold; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.win-btn.close { background: linear-gradient(180deg,#f79d8e,#e13c22); }
.win-body { flex: 1; padding: 8px; overflow: auto; }

/* ---- Sign-on window ---- */
.signon-body { text-align: center; padding: 14px 18px 18px; }
.signon-logo { font-size: 15px; color: #003399; font-weight: bold; margin-bottom: 2px; }
.signon-sub { color: #666; font-size: 11px; margin-bottom: 12px; }
.field { text-align: left; margin: 8px 0; }
.field label { display: block; font-weight: bold; color: #333; margin-bottom: 2px; }
.field input {
  width: 100%; padding: 4px 5px; font: inherit;
  border: 1px solid #7f9db9; background: #fff; border-radius: 2px;
}
.signon-btn {
  margin-top: 12px; padding: 5px 22px; font: inherit; font-weight: bold;
  border: 1px solid #003c74; border-radius: 3px; cursor: pointer;
  background: linear-gradient(180deg,#fff 0%,#ece9d8 100%);
}
.signon-btn:hover { background: linear-gradient(180deg,#fff,#ffe7a2); }
.signon-error {
  margin-top: 10px; color: #a00000; background: #fff3f3;
  border: 1px solid #d40000; border-radius: 3px; padding: 6px 8px; font-size: 11px;
}
.signon-status { margin-top: 10px; color: #444; font-size: 11px; }

/* ---- Buddy list ---- */
.bl-header {
  background: linear-gradient(180deg,#fdfdfd,#e4e0cf); border-bottom: 1px solid #b8b39a;
  padding: 5px 8px; display: flex; align-items: center; gap: 6px;
}
.bl-me { font-weight: bold; color: #003399; font-size: 13px; }
.bl-status-row { padding: 5px 8px; display: flex; gap: 5px; align-items: center;
  border-bottom: 1px solid #d8d4c0; background: #f4f2e9; }
.bl-status-row select, .bl-status-row input {
  font: inherit; border: 1px solid #7f9db9; border-radius: 2px; padding: 2px 3px;
}
.bl-status-row input { flex: 1; min-width: 0; }
.bl-groups { list-style: none; margin: 0; padding: 0; background: #fff; }
.bl-group > .grp-name {
  font-weight: bold; padding: 3px 6px; cursor: default;
  background: linear-gradient(180deg,#f4f2e9,#e8e4d4); border-bottom: 1px solid #ddd8c4;
}
.bl-group .grp-count { color: #888; font-weight: normal; }
.bl-buddies { list-style: none; margin: 0; padding: 0; }
.buddy { padding: 2px 6px 2px 22px; cursor: pointer; color: #999; }
.buddy:hover { background: #316ac5; color: #fff !important; }
.buddy.online { color: #000; font-weight: bold; }
.buddy.idle { color: #000; opacity: .55; }
.buddy.away { color: #000; font-style: italic; }
.buddy .away-tag { color: #b06a00; font-weight: normal; font-style: normal; font-size: 10px; }
.buddy:hover .away-tag { color: #ffe; }

/* ---- IM window ---- */
.im-win .win-body { padding: 0; display: flex; flex-direction: column; }
.im-convo {
  flex: 1; min-height: 120px; background: #fff; border: 1px solid #b8b39a; margin: 6px;
  padding: 5px; overflow-y: auto; font-size: 12px; line-height: 1.35;
}
.im-line { margin: 1px 0; word-wrap: break-word; }
.im-line .who { font-weight: bold; }
.im-line .ts { color: #999; font-size: 10px; }
.im-line.me .who { color: #d40000; }
.im-line.them .who { color: #0000cc; }
.im-line.system { color: #888; font-style: italic; }
.im-line.undelivered { color: #b00; }
.im-line .undeliv-tag { color: #b00; font-size: 10px; font-style: italic; }
.im-toolbar {
  display: flex; gap: 2px; padding: 2px 6px; align-items: center;
  border-top: 1px solid #d8d4c0;
}
.im-toolbar button {
  width: 22px; height: 20px; border: 1px solid #b8b39a; background: #f4f2e9;
  border-radius: 2px; cursor: pointer; font-size: 12px; padding: 0;
}
.im-toolbar .sep { width: 1px; height: 16px; background: #c8c3ac; margin: 0 3px; }
.im-entry {
  height: 54px; margin: 0 6px 4px; resize: none; font: inherit;
  border: 1px solid #b8b39a; padding: 4px;
}
.im-actions { display: flex; justify-content: flex-end; gap: 4px; padding: 0 6px 8px; }
.im-actions button {
  padding: 3px 14px; font: inherit; border: 1px solid #7f9db9; border-radius: 3px;
  background: linear-gradient(180deg,#fff,#ece9d8); cursor: pointer;
}
.im-actions button.send { font-weight: bold; border-color: #003c74; }
.im-actions button.send:hover { background: linear-gradient(180deg,#fff,#ffe7a2); }
.im-actions button.ghost { color: #666; }
.flash { animation: flash 0.6s ease-in-out 3; }
@keyframes flash { 50% { background: #ffe7a2; } }