/* ════════════════════════════════════════════════════════════════════
   chat-widget.css — "Erin", the InteligentCMS floating support assistant
   Brand: gold #fbbf24, dark #0f172a, font "Plus Jakarta Sans".
   Self-contained; all icons are inline SVG injected by js/chat-widget.js.
   ════════════════════════════════════════════════════════════════════ */

/* ── Stacking context ──────────────────────────────────────────────────
   Erin sits at 9200/9201. This is deliberate and load-bearing:
   #welcomeModal (the guest landing) is `position:fixed; inset:0` with
   `z-index:9000 !important` (css/icms-modern.css). At Erin's previous
   z-index of 1000 the widget still rendered on index.php but was painted
   underneath that full-screen overlay — so logged-out visitors on the
   landing page, the people most likely to have questions, could never see
   her, and the `.erin-anon` "log in to chat" state was unreachable there.
   Reference stack: authModal 5000 · reset modal 6500 · #welcomeModal 9000
   · ERIN 9200/9201 · cookie consent 9500 · PWA install modal 99998.
   ────────────────────────────────────────────────────────────────────── */
.erin-root {
  --erin-gold: #fbbf24;
  --erin-gold-d: #f59e0b;
  --erin-dark: #0f172a;
  --erin-dark-2: #1e293b;
  --erin-muted: #64748b;
  --erin-line: #e2e8f0;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Launcher card (named, with a typing field — clearly visible) ── */
.erin-launcher {
  position: fixed;
  right: 24px;
  bottom: 88px;          /* lifted above page action bars (Back / Continue →) so it never covers buttons */
  z-index: 9200;         /* above #welcomeModal (9000) — see header note */
  width: 204px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.20);
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  cursor: default;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.erin-launcher:hover { transform: translateY(-2px); box-shadow: 0 18px 46px rgba(15, 23, 42, 0.28); }
.erin-launcher-head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.erin-avatar-sm { width: 34px; height: 34px; font-size: 15px; }
.erin-launcher-id { flex: 1 1 auto; min-width: 0; line-height: 1.15; }
.erin-launcher-name { font-weight: 800; font-size: 15px; color: #0f172a; }
.erin-launcher-status { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #64748b; margin-top: 1px; white-space: nowrap; }
.erin-launcher-head > svg { width: 20px; height: 20px; color: #b07d1f; flex: 0 0 auto; }
.erin-launcher-field { display: flex; align-items: center; gap: 8px; }
.erin-launcher-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  color: #0f172a;
  background: #f8fafc;
  outline: none;
  cursor: text;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.erin-launcher-input:focus { border-color: #fbbf24; background: #fff; }
.erin-launcher-send {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #0f172a;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease;
}
.erin-launcher-send:hover { transform: scale(1.06); }
.erin-launcher-send svg { width: 17px; height: 17px; }
.erin-root.erin-open .erin-launcher { display: none; }   /* hide the card while the panel is open */

/* Minimise control on the card (desktop escape hatch — collapses to the bubble) */
.erin-min {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-left: 2px;
  border: none; border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  font-size: 16px; font-weight: 800; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.erin-min:hover { background: #f1f5f9; color: #0f172a; }

/* ── Compact bubble launcher ──
   Mobile default, and the desktop "minimised" state. A 58px circle can't
   sit on top of full-width action buttons the way the old card could. */
.erin-bubble {
  position: fixed;
  right: 24px;
  bottom: 88px;
  z-index: 9200;         /* above #welcomeModal (9000) — see header note */
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--erin-gold), var(--erin-gold-d));
  padding: 2px;                     /* gold ring around the portrait */
  border: none;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.28);
  cursor: pointer;
  display: none;                    /* desktop shows the card by default */
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.erin-bubble img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #fff;
}
.erin-bubble:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 38px rgba(15, 23, 42, 0.34); }
.erin-bubble-dot {
  position: absolute;
  right: 1px; bottom: 1px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #22c55e;
  border: 2.5px solid #fff;
}
/* ── Yield to the cookie bar on phones ──
   The consent card (js/consent.js, z-index 9500) is full-width at the bottom
   of a narrow viewport and would paint straight over Erin's launcher, leaving
   the bubble visible but unclickable. Stand her down until the visitor has
   chosen — it is a one-time, few-second interaction, and the alternative
   (nudging her upward) depends on the card's height, which varies with the
   Manage panel. Desktop is unaffected: there the card is 380px wide on the
   LEFT and never reaches her. */
@media (max-width: 520px) {
	html.icms-consent-open .erin-root { display: none; }
}

/* Minimised (desktop): card → bubble */
.erin-root.erin-min-mode .erin-launcher { display: none; }
.erin-root.erin-min-mode .erin-bubble { display: block; }
/* Panel open: everything collapsed goes away */
.erin-root.erin-open .erin-bubble { display: none !important; }

/* ── Panel ── */
.erin-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9201;         /* one above the launcher — see header note */
  width: 372px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 48px);
  background: #fff;
  border-radius: 20px;
  border: 1px solid #e8edf3;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: erin-pop 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.erin-root.erin-open .erin-panel { display: flex; }
@keyframes erin-pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ── Header ── */
.erin-header {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.erin-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #0f172a;
  font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;   /* clip the portrait to the circle */
}
/* Illustrated portrait fills the round slot; gold gradient stays as load/fallback backdrop. */
.erin-avatar img, .erin-avatar-sm img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.erin-head-text { flex: 1 1 auto; min-width: 0; }
.erin-head-name { font-weight: 800; font-size: 15.5px; line-height: 1.1; }
.erin-head-status { font-size: 12px; color: #cbd5e1; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.erin-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); }
.erin-close {
  background: rgba(255, 255, 255, 0.12);
  border: none; color: #fff;
  width: 30px; height: 30px; border-radius: 8px;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.erin-close:hover { background: rgba(255, 255, 255, 0.24); }

/* ── Message list ── */
.erin-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.erin-msg {
  max-width: 84%;
  padding: 10px 13px;
  font-size: 14px;
  line-height: 1.45;
  border-radius: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.erin-msg.bot { align-self: flex-start; background: #fff; color: #0f172a; border: 1px solid var(--erin-line); border-bottom-left-radius: 4px; }
.erin-msg.user { align-self: flex-end; background: #0f172a; color: #fff; border-bottom-right-radius: 4px; }
.erin-msg a { color: inherit; font-weight: 700; text-decoration: underline; }
.erin-msg.bot a { color: #b45309; }

/* ── Quick-reply chips ── */
.erin-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.erin-chips-label {
  flex: 0 0 100%;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 2px 0 -2px 2px;
}
.erin-chip {
  background: #fff;
  border: 1.5px solid #c7d2e1;
  color: #1e3a5f;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.erin-chip:hover { background: #0f172a; border-color: #0f172a; color: #fbbf24; }
.erin-chip.erin-chip-wa { border-color: #25d366; color: #128c45; }
.erin-chip.erin-chip-wa:hover { background: #25d366; border-color: #25d366; color: #fff; }

/* ── Typing indicator ── */
.erin-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid var(--erin-line); border-radius: 14px; border-bottom-left-radius: 4px; }
.erin-typing span { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: erin-bounce 1.2s infinite ease-in-out; }
.erin-typing span:nth-child(2) { animation-delay: 0.15s; }
.erin-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes erin-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ── Input row ── */
.erin-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--erin-line);
  background: #fff;
}
.erin-input {
  flex: 1 1 auto;
  border: 1.5px solid var(--erin-line);
  border-radius: 999px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  color: #0f172a;
  outline: none;
  transition: border-color 0.15s ease;
}
.erin-input:focus { border-color: #fbbf24; }
.erin-send {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #0f172a;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.erin-send:hover { transform: scale(1.06); }
.erin-send:disabled { opacity: 0.5; cursor: default; transform: none; }
.erin-send svg { width: 18px; height: 18px; }

/* ── Footer hint ── */
.erin-foot { text-align: center; font-size: 10.5px; color: var(--erin-muted); padding: 0 12px 8px; background: #fff; }

/* ── Logged-out (anon): no free-form typing. Hide both text inputs + the foot
   hint and show a short "log in to chat" note instead. Quick-reply chips and the
   WhatsApp/Demo actions still work for everyone. Toggled by js/chat-widget.js. ── */
.erin-anon-note {
  display: none;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--erin-muted);
  padding: 14px 16px;
  border-top: 1px solid var(--erin-line);
  background: #fff;
}
.erin-root.erin-anon .erin-launcher-field,
.erin-root.erin-anon .erin-input-row,
.erin-root.erin-anon .erin-foot { display: none; }
.erin-root.erin-anon .erin-anon-note { display: block; }

/* Stack the existing WhatsApp float (legal pages) above Erin's launcher card
   so they don't overlap. The card tops out around bottom:180px, so 200px clears it. */
.icms-wa-float { bottom: 200px !important; }

/* ── Action-button clearance ──
   Erin's collapsed bubble sits bottom-right on mobile. Give every module's
   main content wrapper enough bottom padding that in-flow action buttons
   (Back / Continue / Generate) can always scroll clear of her. */
@media (max-width: 640px) {
  .icms-app-container,   /* home wizard, exam builder, referral dashboard */
  .notes-wrap {          /* teaching notes */
    padding-bottom: 110px !important;
  }
}

/* ── Mobile: compact bubble + full-width bottom sheet ── */
@media (max-width: 480px) {
  .erin-panel {
    right: 0; left: 0; bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 82vh;
    border-radius: 18px 18px 0 0;
  }
  /* Respect the OS gesture/nav bar inside the sheet */
  .erin-input-row { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .erin-anon-note { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  /* The wide launcher card is replaced by the compact bubble, raised above
     the full-width #ics-credit-badge strip that docks at bottom:0 (~40px tall). */
  .erin-launcher { display: none !important; }
  .erin-bubble {
    display: block;
    right: 16px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  /* WhatsApp float (legal pages) only needs to clear the 58px bubble now */
  .icms-wa-float { bottom: 140px !important; right: 16px !important; }
}