/* ===== AAA Instant Messenger — AIM homage ===== */

/* The running man runs the other way. .rm is the only hook — never flip .ic or
   .ie-ico, which the file icons and the IE 'e' also use. inline-block because
   transform is a no-op on inline elements. */
.rm{ display:inline-block; transform:scaleX(-1); }

.aim-win{ position:absolute; z-index:500; display:flex; flex-direction:column; background:var(--face); box-shadow:var(--bevel-up); padding:3px; min-width:220px; }
.aim-tbar{ display:flex; align-items:center; gap:6px; padding:3px 3px 3px 7px; cursor:move; color:#fff; background:linear-gradient(90deg,#12308a,#3f74d8); }
.aim-tbar .rm{ font-size:14px; line-height:1; }
.aim-tbar .ttl{ flex:1; font-weight:bold; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aim-tbar.blur{ background:linear-gradient(90deg,#6b6b86,#9aa0bd); }
.aim-ctrls{ display:flex; gap:2px; }
.aim-b{ width:18px; height:15px; display:grid; place-items:center; font-size:10px; font-weight:bold; color:#000; background:var(--face); box-shadow:var(--bevel-up); border:0; cursor:pointer; line-height:1; }
.aim-b:active{ box-shadow:var(--bevel-dn); }

/* sign-on */
.aim-signon{ width:290px; }
.aim-banner{ background:linear-gradient(180deg,#4f84e8,#12308a); color:#fff; text-align:center; padding:14px 10px 12px; }
.aim-banner .rm{ font-size:42px; display:block; line-height:1; }
.aim-banner b{ display:block; margin-top:4px; font-size:15px; letter-spacing:.02em; }
.aim-banner small{ font-size:10px; opacity:.85; }
.aim-form{ padding:15px 16px 16px; }
.aim-form label{ display:block; font-size:11px; font-weight:bold; color:#00006a; margin-bottom:4px; }
.aim-form label .hint{ font-weight:normal; color:#555; }
.aim-form input{ width:100%; font-family:var(--ui); font-size:13px; background:#fff; box-shadow:var(--bevel-dn); border:0; padding:7px 8px; }
.aim-row2{ display:flex; align-items:center; justify-content:space-between; margin-top:13px; }
.aim-signbtn{ font-family:var(--ui); font-weight:bold; font-size:13px; padding:7px 20px; background:#c9e7c9; color:#053d05; box-shadow:var(--bevel-up); border:0; cursor:pointer; }
.aim-signbtn:active{ box-shadow:var(--bevel-dn); }
.aim-links{ text-align:center; font-size:11px; color:#0000c8; }
.aim-err{ margin-top:9px; text-align:center; font-size:11px; font-weight:bold; color:#b00000; }

/* buddy list */
.aim-bl{ width:238px; height:398px; }
.aim-bl-head{ display:flex; align-items:center; gap:8px; padding:8px 9px; background:linear-gradient(180deg,#fff,#dbe4f6); box-shadow:var(--bevel-dn); }
.aim-bl-head .rm{ font-size:26px; }
.aim-bl-head b{ font-size:13px; color:#12308a; }
.aim-bl-head span{ display:block; font-size:10px; color:#2f8a2f; font-weight:bold; }
.aim-bl-list{ flex:1; min-height:0; overflow:auto; background:#fff; box-shadow:var(--bevel-dn); margin:3px 0; padding:3px; }
.aim-grp{ font-size:11px; font-weight:bold; color:#12308a; padding:5px 6px 2px; }
.aim-grp .c{ color:#999; font-weight:normal; }
.aim-bud{ display:flex; align-items:center; gap:7px; padding:3px 6px 3px 16px; cursor:pointer; font-size:12px; }
.aim-bud:hover{ background:#e6eeff; }
.aim-bud .dot{ width:8px; height:8px; border-radius:50%; background:#2ec234; box-shadow:0 0 0 1px #0a0; flex:none; }
.aim-bud.away .dot{ background:#e0a800; box-shadow:0 0 0 1px #a07000; }
.aim-bud.you .nm{ font-style:italic; color:#555; }
.aim-bl-tools{ display:flex; gap:5px; padding:4px 3px 2px; }
.aim-tool{ flex:1; font-size:11px; font-weight:bold; padding:7px 4px; background:var(--face); box-shadow:var(--bevel-up); border:0; cursor:pointer; }
.aim-tool:active{ box-shadow:var(--bevel-dn); }

/* IM / chat window */
.aim-im{ width:362px; height:302px; }
.aim-im.room{ width:452px; height:346px; }
.aim-away{ font-size:11px; color:#7a5000; background:#fff7e0; box-shadow:var(--bevel-dn); margin:3px 3px 0; padding:5px 8px; line-height:1.4; }
.aim-away.on{ color:#0a4d0a; background:#e9f9e9; }
.aim-im-top{ display:flex; flex:1; min-height:0; }
.aim-log{ flex:1; min-height:0; overflow:auto; background:#fff; box-shadow:var(--bevel-dn); margin:3px; padding:6px 8px; font-size:12.5px; line-height:1.5; }
.aim-log .m{ margin:2px 0; word-wrap:break-word; }
.aim-log .who{ font-weight:bold; }
.aim-log .me{ color:#c00; }
.aim-log .them{ color:#0033cc; }
.aim-log .bot{ color:#7a3aef; }
.aim-log .sys{ color:#999; font-style:italic; }
.aim-parts{ width:120px; flex:none; overflow:auto; background:#fff; box-shadow:var(--bevel-dn); margin:3px 3px 3px 0; padding:6px; font-size:11px; }
.aim-parts b{ display:block; color:#12308a; margin-bottom:5px; }
.aim-parts .p{ padding:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aim-input{ display:flex; gap:4px; padding:0 3px 3px; }
.aim-input textarea{ flex:1; height:46px; resize:none; font-family:var(--ui); font-size:12.5px; background:#fff; box-shadow:var(--bevel-dn); border:0; padding:5px 7px; }
.aim-send{ width:66px; font-weight:bold; font-size:12px; background:#c9e7c9; color:#053d05; box-shadow:var(--bevel-up); border:0; cursor:pointer; }
.aim-send:active{ box-shadow:var(--bevel-dn); }

#aimTray{ cursor:pointer; }

/* phones: AIM windows clamp to the screen — no sideways pan, ever */
@media (max-width:640px){
  .aim-im{ width:min(362px, 94vw); }
  .aim-im.room{ width:min(452px, 94vw); height:min(346px, 58vh); }
  .aim-bl{ height:min(398px, 60vh); }
}

/* unread IM — taskbar tab flashes orange (classic AOL) */
.task-btn.flash{ animation:aimflash .66s steps(1) infinite; }
@keyframes aimflash{ 50%{ background:#ff9a2e; color:#000; box-shadow:var(--bevel-dn); } }
#aimTray.flash{ animation:aimflash .66s steps(1) infinite; }

/* ===== Buddy Info =====
   The 1998 answer to "can we have a MySpace profile" — a person's online identity
   lived in their AIM profile five years before MySpace existed. Same layout AIM
   used: a grey stat block up top (screen name, warning level, member since, idle),
   then the free-text profile on white below it. */
.aim-info{ width:308px; }
.aim-info-stats{ background:linear-gradient(180deg,#fff,#dbe4f6); box-shadow:var(--bevel-dn);
  margin:3px; padding:8px 10px; font-size:11px; }
.aim-info-sn{ display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.aim-info-sn .rm{ font-size:22px; line-height:1; }
.aim-info-sn b{ font-size:14px; color:#12308a; }
.aim-info-sn i{ font-style:normal; font-size:10px; font-weight:bold; color:#2f8a2f; }
.aim-info-sn i.away{ color:#a07000; }
.aim-info-grid{ display:grid; grid-template-columns:auto 1fr; gap:2px 10px; color:#333; }
.aim-info-grid b{ color:#00006a; font-weight:bold; white-space:nowrap; }
.aim-info-body{ flex:1; min-height:0; overflow:auto; background:#fff; box-shadow:var(--bevel-dn);
  margin:0 3px 3px; padding:9px 11px; font-size:12.5px; line-height:1.55; }
.aim-info-body .asl{ font-weight:bold; color:#c00; }        /* the only question that mattered */
.aim-info-body .q{ color:#12308a; font-style:italic; }
.aim-info-body ul{ margin:7px 0 0; padding-left:17px; }
.aim-info-body li{ margin:2px 0; }
.aim-info-body hr{ border:0; height:1px; background:var(--silver-lo); box-shadow:0 1px 0 #fff; margin:9px 0; }
.aim-info-body .lab{ font-weight:bold; color:#00006a; }
.aim-info-body a{ color:#0000c8; }
.aim-bud.sel{ background:#000080; color:#fff; }
.aim-bud.sel .nm i{ color:#ffd24a !important; }
@media (max-width:640px){ .aim-info{ width:min(308px,94vw); } }