/* ============================================
   AOL HOME SCREEN STYLES
   ============================================ */

/* AOL Toolbar */
.aol-toolbar {
  background: #e8e0d0;
  border-bottom: 2px solid #808080;
  flex-shrink: 0;
}

.aol-toolbar-row1 {
  display: flex;
  align-items: center;
  padding: 3px 4px;
  gap: 6px;
  border-bottom: 1px solid #aaa;
}

.aol-logo-area {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* AOL Logo Text */
.aol-logo-text {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  font-family: Arial Black, Arial, sans-serif;
}

.aol-logo-text.big {
  font-size: 52px;
  display: block;
  text-align: center;
}

.aol-a  { color: #003399; }
.aol-m  { color: #0055cc; }
.aol-u  { color: #cc0000; }
.aol-r  { color: #cc3300; }
.aol-i  { color: #003399; }
.aol-k  { color: #cc0000; }
.aol-a2 { color: #0055cc; }
.aol-online { color: #cc0000; font-size: 14px; font-weight: bold; margin-left: 2px; vertical-align: bottom; }
.aol-online-big { color: #cc0000; font-size: 28px; font-weight: bold; margin-top: -8px; text-align: center; }

.aol-running-man img {
  height: 30px;
  image-rendering: pixelated;
}

/* Nav Buttons */
.aol-nav-buttons {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

.aol-navbtn {
  font-family: 'MS Sans Serif', Arial, sans-serif;
  font-size: 11px;
  background: linear-gradient(to bottom, #f5f5f5, #d8d8d8);
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 2px 7px;
  cursor: pointer;
  white-space: nowrap;
  height: 22px;
}
.aol-navbtn:hover { background: linear-gradient(to bottom, #e8e8ff, #c8c8e8); }
.aol-navbtn:active { border-color: #808080 #ffffff #ffffff #808080; }

/* Keyword Bar */
.aol-toolbar-row2 {
  display: flex;
  align-items: center;
  padding: 3px 6px;
  gap: 4px;
}

.aol-keyword-label {
  font-size: 11px;
  font-weight: bold;
  color: #000080;
}

.aol-keyword-input {
  flex: 1;
  height: 20px;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  background: white;
  padding: 0 4px;
}

.aol-go-btn {
  font-family: 'MS Sans Serif', Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  background: linear-gradient(to bottom, #f5f5f5, #d8d8d8);
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 1px 10px;
  cursor: pointer;
  height: 22px;
  color: #000080;
}
.aol-go-btn:hover { background: #c0c0ff; }

/* ============================================
   AOL CONTENT AREA
   ============================================ */

.aol-content {
  flex: 1;
  background: white;
  overflow-y: auto;
  overflow-x: hidden;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  margin: 2px;
}

/* Welcome Banner */
.aol-welcome-banner {
  background: linear-gradient(135deg, #000080 0%, #0033cc 40%, #cc0000 100%);
  padding: 6px 8px;
  border-bottom: 3px solid #ffcc00;
}

.banner-left {
  width: 200px;
}

.welcome-text { color: white; }
.welcome-top { font-size: 11px; color: #aad4ff; }
.welcome-brand {
  font-size: 26px;
  font-weight: 900;
  font-family: Arial Black, sans-serif;
  color: white;
  line-height: 1;
  text-shadow: 2px 2px 0 #000040;
}
.welcome-brand span { color: #ffcc00; }
.welcome-tagline {
  font-size: 10px;
  color: #ffcc00;
  font-style: italic;
  margin-top: 2px;
}

.banner-center { text-align: center; width: 120px; }

.spinning-globe {
  font-size: 40px;
  animation: spin 4s linear infinite;
  display: inline-block;
}
@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

.you-got-mail {
  color: #ffcc00;
  font-size: 13px;
  font-weight: bold;
  margin-top: 4px;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50% { opacity: 0; }
}

.banner-right { text-align: right; }
.member-label { font-size: 10px; color: #aad4ff; }
.member-name { color: white; font-weight: bold; font-size: 13px; }
.time-online { color: #ffcc00; font-weight: bold; font-size: 13px; font-family: 'Courier New', monospace; }

.sign-off-btn {
  margin-top: 4px;
  background: #cc0000;
  color: white;
  border: 2px solid;
  border-color: #ff8888 #880000 #880000 #ff8888;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  cursor: pointer;
}

/* Channels Bar */
.aol-channels-bar {
  background: #000080;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  border-bottom: 2px solid #ffcc00;
}

.channels-label {
  color: #ffcc00;
  font-size: 10px;
  font-weight: bold;
  margin-right: 4px;
}

.channel-btn {
  font-family: 'MS Sans Serif', Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 2px 6px;
  cursor: pointer;
  white-space: nowrap;
}
.channel-btn:hover, .channel-btn.active {
  border-color: #ffcc00;
  color: #ffcc00;
}

/* Main Layout */
.aol-main-table {
  width: 100%;
  padding: 4px;
  background: #f0f0f0;
}

.aol-col-left { width: 170px; }
.aol-col-center { width: auto; }
.aol-col-right { width: 175px; }

/* Boxes */
.aol-box {
  background: white;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
}

.aol-box-header {
  color: white;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 6px;
  letter-spacing: 0.5px;
}

.aol-box-content {
  padding: 5px;
  font-size: 11px;
}

.news-item {
  padding: 2px 0;
  border-bottom: 1px dotted #ddd;
  line-height: 1.3;
}

.aol-link {
  color: #0000cc;
  text-decoration: none;
  font-size: 11px;
}
.aol-link:hover { text-decoration: underline; color: #cc0000; }

/* Stock widget */
.stock-item {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  border-bottom: 1px dotted #eee;
}
.stock-up { color: #006600; font-weight: bold; }
.stock-down { color: #cc0000; font-weight: bold; }

/* Featured Box */
.aol-featured-box {
  background: white;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  margin-bottom: 4px;
}

.featured-header {
  background: linear-gradient(to right, #000080, #0055cc);
  color: white;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 8px;
  text-align: center;
}

.featured-new {
  background: #cc0000;
  color: white;
  font-size: 9px;
  padding: 1px 4px;
  margin-right: 6px;
  font-weight: bold;
  border-radius: 1px;
}

.feature-item {
  text-align: center;
  padding: 4px;
  border: 1px solid #e0e0e0;
  background: #f8f8ff;
  height: 100%;
}

.feature-img {
  font-size: 28px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.feature-title {
  font-size: 11px;
  font-weight: bold;
  color: #000080;
  margin-bottom: 3px;
}

.feature-desc {
  font-size: 10px;
  color: #333;
  line-height: 1.3;
  margin-bottom: 5px;
}

.feature-btn {
  background: linear-gradient(to bottom, #ffcc00, #ff9900);
  border: 2px solid;
  border-color: #ffff88 #996600 #996600 #ffff88;
  color: #000033;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 8px;
  cursor: pointer;
  font-family: 'MS Sans Serif', Arial, sans-serif;
}
.feature-btn:hover { background: linear-gradient(to bottom, #ffdd44, #ffaa00); }
.feature-btn:active { border-color: #996600 #ffff88 #ffff88 #996600; }

/* Marquee */
.aol-marquee-wrap {
  background: #000080;
  padding: 2px 0;
  border-top: 1px solid #0033cc;
  border-bottom: 1px solid #0033cc;
}
.aol-marquee {
  color: #ffcc00;
  font-size: 12px;
  font-weight: bold;
}

/* AIM Buddy List */
.aol-im-teaser {
  margin-top: 4px;
  background: white;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
}

.im-header {
  background: linear-gradient(to right, #cc3300, #ff6600);
  color: white;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 6px;
}

.im-body {
  padding: 4px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.im-buddy-list {
  flex: 1;
  font-size: 11px;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  border: 1px inset #808080;
  background: white;
  padding: 2px;
  max-height: 95px;
  overflow: auto;
}

.buddy-group {
  font-weight: bold;
  color: #000080;
  font-size: 10px;
  padding: 1px 0;
  cursor: pointer;
}

.buddy {
  font-size: 11px;
  padding: 1px 4px;
  cursor: pointer;
}
.buddy.online { color: #006600; }
.buddy.offline { color: #888; }
.buddy:hover { background: #000080; color: white; }

.aim-send-btn {
  background: linear-gradient(to bottom, #f5f5f5, #d8d8d8);
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  flex-shrink: 0;
}

/* Search */
.aol-search-input {
  width: 100%;
  margin-bottom: 4px;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  padding: 2px 4px;
  font-size: 11px;
  height: 20px;
}
.aol-search-btn {
  width: 100%;
  background: linear-gradient(to bottom, #4488ff, #0033cc);
  color: white;
  border: 2px solid;
  border-color: #88aaff #001166 #001166 #88aaff;
  font-size: 11px;
  font-weight: bold;
  padding: 3px;
  cursor: pointer;
  font-family: 'MS Sans Serif', Arial, sans-serif;
}

/* Chat rooms */
.chatroom-item {
  padding: 2px 4px;
  font-size: 11px;
  cursor: pointer;
  border-bottom: 1px dotted #ddd;
}
.chatroom-item:hover { background: #000080; color: white; }
.room-count { color: #666; font-size: 10px; }

/* Ad banner */
.aol-ad-banner {
  background: white;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
}
.ad-content {
  background: linear-gradient(135deg, #fff8e0, #ffeeaa);
  border: 2px solid #ffcc00;
  padding: 8px;
  text-align: center;
}
.ad-btn {
  background: #cc0000;
  color: white;
  border: 2px solid;
  border-color: #ff4444 #880000 #880000 #ff4444;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 10px;
  margin-top: 4px;
  cursor: pointer;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  animation: adpulse 1.5s ease-in-out infinite;
}
@keyframes adpulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* AOL Status Bar */
.aol-statusbar {
  height: 22px;
  background: #c0c0c0;
  border-top: 2px solid #808080;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  flex-shrink: 0;
}

.aol-status-right {
  color: #000080;
  font-weight: bold;
}

/* Startup logo */
.aol-logo-text.big .aol-a  { color: #66aaff; }
.aol-logo-text.big .aol-m  { color: #88ccff; }
.aol-logo-text.big .aol-u  { color: #ff6666; }
.aol-logo-text.big .aol-r  { color: #ff8844; }
.aol-logo-text.big .aol-i  { color: #66aaff; }
.aol-logo-text.big .aol-k  { color: #ff6666; }
.aol-logo-text.big .aol-a2 { color: #88ccff; }