/* ═══════════════════════════════════════════════════════════════
   ASAS-AI Plugin — Theme Bridge CSS v2.2.0
   Syncs plugin UI tokens with ASAS-Theme v3 (Beehive palette)
   Blue #5B6DEF · White #FFFFFF · Gray #F5F6FA · Black #1A1D2E
   Fonts: Plus Jakarta Sans (display) · Nunito (body)
   ═══════════════════════════════════════════════════════════════ */

/* Colour tokens are NOT mapped here any more. They used to override the chat's
   own variables with the site theme's palette (blue #5B6DEF, dark text), which
   defeated the user's chosen chat theme. The chat's 12-theme system owns all
   colours inside #asas-app; this file only handles page layout and chrome. */

/* ── Chat page: full viewport, no theme chrome ── */
body.asas-chat-page {
  background: var(--bg, #F5F6FA) !important;
  overflow: hidden !important;
}
body.asas-chat-page #masthead,
body.asas-chat-page #colophon,
body.asas-chat-page .asas-announcement,
body.asas-chat-page header[role="banner"],
body.asas-chat-page footer[role="contentinfo"] {
  display: none !important;
}
body.asas-chat-page #page,
body.asas-chat-page #content,
body.asas-chat-page .site-content,
body.asas-chat-page .entry-content,
body.asas-chat-page main,
body.asas-chat-page article {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* ── Beehive-style usage bar inside chat (syncs with theme's token bar) ── */
body.asas-theme-active .asas-usage-bar-wrap {
  background: #ECEDF5;
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
body.asas-theme-active .asas-usage-bar-fill {
  height: 6px;
  border-radius: 999px;
  background: #5B6DEF;
  transition: width .4s ease;
}
body.asas-theme-active .asas-usage-bar-fill.warn  { background: #F59E0B; }
body.asas-theme-active .asas-usage-bar-fill.danger { background: #EF4444; }

/* ── My Account ASAS Usage tab — Beehive style ── */
body.asas-theme-active .asas-ua-wrap {
  font-family: 'Nunito', system-ui, sans-serif !important;
}
body.asas-theme-active .asas-ua-hero {
  background: linear-gradient(135deg, #1A1D2E, #2D3148) !important;
  border-radius: 16px !important;
}
body.asas-theme-active .asas-ua-hero h2 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  color: #7B8FFF !important;
}
body.asas-theme-active .asas-ua-pill {
  background: #5B6DEF !important;
  color: #fff !important;
}
body.asas-theme-active .asas-ua-card {
  border-radius: 16px !important;
  border-color: #ECEDF5 !important;
  box-shadow: 0 2px 8px rgba(26,29,46,.07) !important;
}
body.asas-theme-active .asas-ua-card h3 {
  color: #5B6DEF !important;
}
body.asas-theme-active .asas-ua-cta {
  background: linear-gradient(135deg, #5B6DEF, #4757E5) !important;
  border-radius: 14px !important;
}
body.asas-theme-active .asas-ua-cta p {
  color: rgba(255,255,255,.85) !important;
}
body.asas-theme-active .asas-ua-cta a {
  background: #fff !important;
  color: #5B6DEF !important;
  border-radius: 999px !important;
}
body.asas-theme-active .asas-ua-table th {
  background: #1A1D2E !important;
  color: #7B8FFF !important;
}
body.asas-theme-active .asas-ua-stat {
  background: #F5F6FA !important;
  border-color: #ECEDF5 !important;
  border-radius: 12px !important;
}
body.asas-theme-active .asas-ua-stat-val {
  color: #1A1D2E !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
body.asas-theme-active .asas-ua-bar { background: #ECEDF5 !important; }
body.asas-theme-active .asas-ua-bar-fill { background: #5B6DEF !important; }

/* ── Gate card (shown to non-subscribers) ── */
body.asas-theme-active .asas-gate {
  background: #FFFFFF;
  border: 1.5px solid #ECEDF5;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(26,29,46,.08);
  padding: 48px 36px;
  text-align: center;
  max-width: 480px;
  margin: 80px auto;
  font-family: 'Nunito', system-ui, sans-serif;
}
body.asas-theme-active .asas-gate h2 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #1A1D2E;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
body.asas-theme-active .asas-gate p {
  color: #5E6180;
  font-size: 14.5px;
  margin: 0 0 28px;
}
body.asas-theme-active .asas-gate a.asas-gate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #5B6DEF;
  color: #fff;
  padding: 13px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all .18s;
  box-shadow: 0 8px 24px rgba(91,109,239,.3);
}
body.asas-theme-active .asas-gate a.asas-gate-btn:hover {
  background: #4757E5;
  transform: translateY(-1px);
}