/* ════════════════════════════════════════════════════════════════════
   chat-widget.css — "Erin", the InteligentCMS floating support assistant
   Self-contained; all icons are inline SVG injected by js/chat-widget.js.

   ── Why she lives in the LEFT gutter ──────────────────────────────────
   Every wizard's action row (.icms-form-actions / .icms-app-step-actions)
   is `justify-content: flex-end` — the Back / Continue → / Generate
   buttons are right-aligned, in-flow, at the bottom of the step. Erin
   used to be fixed bottom-RIGHT, so the moment a trainer scrolled to the
   end of a step she was painted on top of the button they were reaching
   for. Three separate patches existed to work around that (an 88px lift,
   a 110px padding hack on the module wrappers, and a push on the
   WhatsApp float); all of them are gone. Anchoring her bottom-LEFT is
   the structural fix — on desktop the left gutter can never hold a
   button, so there is nothing to collide with and no JS to get wrong.

   Phones are the one exception: below 760px icms-forms.css turns the
   action row into a column of FULL-WIDTH buttons, so left alignment
   protects nothing there. That is what the mobile clearance block at the
   bottom of this file is for — see it for the reasoning.

   ── Palette ──────────────────────────────────────────────────────────
   Local --erin-* custom properties, deliberately NOT page tokens: this
   sheet also loads on Demo.php and the legal pages, which do not share
   one token file, and css/tweaks.css even redefines --gold-500 back to
   the old #fbbf24. Values below are the light-theme ramp from
   css/icms-modern.css, hardcoded so they hold everywhere.

   ── 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 original
   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: #c9962f;         /* light-theme accent — #fbbf24 washes out on white */
  --erin-gold-d: #b07d1f;
  --erin-gold-l: #fbf2e3;
  --erin-ink: #0f172a;
  --erin-ink-2: #1e293b;
  --erin-muted: #64748b;
  --erin-faint: #94a3b8;
  --erin-line: #e2e8f0;
  --erin-line-l: #eef2f7;
  --erin-surface: #f8fafc;
  --erin-live: #16a34a;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Launcher pill ────────────────────────────────────────────────────
   One launcher, two shapes. Default is a compact pill; .erin-min-mode on
   the root (persisted, see getMinimized() in the JS) collapses it to the
   avatar alone, which is also the phone default. */
.erin-launcher {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9200;         /* above #welcomeModal (9000) — see header note */
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: calc(100vw - 40px);
  padding: 5px 8px 5px 5px;
  background: #fff;
  border: 1px solid var(--erin-line);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}
.erin-launcher:hover {
  transform: translateY(-2px);
  border-color: #d7dde6;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.22), 0 3px 8px rgba(15, 23, 42, 0.07);
}
.erin-launcher:focus-within { border-color: var(--erin-gold); }

.erin-launcher-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 2px 0 0;
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
  color: var(--erin-ink);
  cursor: pointer;
}
.erin-launcher-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.erin-launcher-name {
  font-family: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--erin-ink);
  white-space: nowrap;
}
.erin-launcher-status {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--erin-live);
  margin-top: 1px;
  white-space: nowrap;
}
.erin-launcher-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--erin-faint);
  flex: 0 0 auto;
}
.erin-launcher-caret svg { width: 15px; height: 15px; }

/* Avatar slot — gold ring around the illustrated portrait, with the
   presence dot pinned to it so both shapes of the launcher carry it. */
.erin-avatar-sm {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--erin-gold), var(--erin-gold-d));
  padding: 2px;
  overflow: visible;
  transition: width 0.16s ease, height 0.16s ease, flex-basis 0.16s ease;
}
.erin-launcher-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #fff;
}

/* Collapse control — a discreet × on the pill (desktop escape hatch). */
.erin-min {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border: none; border-radius: 6px;
  background: transparent;
  color: var(--erin-faint);
  font-size: 15px; font-weight: 700; 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: var(--erin-line-l); color: var(--erin-ink); }

/* ── Collapsed shape (minimised, and the phone default) ───────────────
   Shared by .erin-min-mode and the ≤600px media query at the bottom, so
   the two states can never drift apart. A 46px circle cannot sit on top
   of a full-width button the way the old 204px card could. */
.erin-root.erin-min-mode .erin-launcher {
  padding: 3px;
  gap: 0;
}
.erin-root.erin-min-mode .erin-launcher-id,
.erin-root.erin-min-mode .erin-launcher-caret,
.erin-root.erin-min-mode .erin-min { display: none; }
.erin-root.erin-min-mode .erin-launcher-btn { padding: 0; }
.erin-root.erin-min-mode .erin-avatar-sm { width: 46px; height: 46px; flex-basis: 46px; }
.erin-root.erin-min-mode .erin-launcher-dot { width: 13px; height: 13px; border-width: 2.5px; }

/* Panel open: the launcher gets out of the way entirely. */
.erin-root.erin-open .erin-launcher { display: none; }

/* ── Yield: an action row is under her right now ──────────────────────
   Set by checkYield() in js/chat-widget.js when the launcher's rect
   actually intersects a Back / Continue → / Generate row. Desktop never
   triggers it (she is in the left gutter, the buttons are right-aligned);
   phones do, because the row goes full-width there. Fully transparent AND
   pointer-events:none, so she cannot swallow the tap she is sitting on —
   she comes back the moment the row scrolls out from under her. */
.erin-root.erin-yield .erin-launcher {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}

/* ── Yield to the cookie bar ──────────────────────────────────────────
   #icmsConsentRoot (js/consent.js, z-index 9500) is left:20px bottom:20px
   380px wide — the exact spot Erin now occupies, at EVERY width, not just
   on phones as when she lived on the right. It would paint straight over
   her, leaving the pill visible but unclickable. Stand her down until the
   visitor has chosen: it is a one-time, few-second interaction, and
   nudging her upward instead would depend on the consent card's height,
   which varies with its Manage panel. */
html.icms-consent-open .erin-root { display: none; }

/* ── Panel ── */
.erin-panel {
  position: fixed;
  left: 20px;
  bottom: 20px;
  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: 18px;
  border: 1px solid var(--erin-line);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24), 0 4px 12px rgba(15, 23, 42, 0.08);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: erin-pop 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.erin-root.erin-open .erin-panel { display: flex; }
@keyframes erin-pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ── Header ── */
.erin-header {
  background: linear-gradient(135deg, var(--erin-ink), var(--erin-ink-2));
  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, var(--erin-gold), var(--erin-gold-d));
  color: var(--erin-ink);
  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;
  background: #fff;
}
.erin-head-text { flex: 1 1 auto; min-width: 0; }
.erin-head-name {
  font-family: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 700; font-size: 16px; line-height: 1.1; letter-spacing: -0.01em;
}
.erin-head-status { font-size: 11.5px; color: #cbd5e1; display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.erin-dot { width: 7px; height: 7px; 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: 9px;
  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: var(--erin-surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.erin-msg {
  max-width: 86%;
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.5;
  border-radius: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.erin-msg.bot { align-self: flex-start; background: #fff; color: var(--erin-ink); border: 1px solid var(--erin-line); border-bottom-left-radius: 4px; }
.erin-msg.user { align-self: flex-end; background: var(--erin-ink); color: #fff; border-bottom-right-radius: 4px; }
.erin-msg a { color: inherit; font-weight: 700; text-decoration: underline; }
.erin-msg.bot a { color: var(--erin-gold-d); }

/* ── Quick-reply chips ── */
.erin-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.erin-chips-label {
  flex: 0 0 100%;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--erin-faint);
  margin: 2px 0 -2px 2px;
}
.erin-chip {
  background: #fff;
  border: 1px solid var(--erin-line);
  color: var(--erin-ink);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.erin-chip:hover { background: var(--erin-ink); border-color: var(--erin-ink); color: #fff; }
.erin-chip.erin-chip-wa { border-color: #86e3ab; color: #128c45; background: #f2fdf6; }
.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: var(--erin-faint); 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;
  min-width: 0;
  border: 1px solid var(--erin-line);
  border-radius: 999px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--erin-ink);
  background: var(--erin-surface);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.erin-input:focus { border-color: var(--erin-gold); background: #fff; }
.erin-send {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--erin-gold), var(--erin-gold-d));
  color: #fff;
  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: 17px; height: 17px; }

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

/* ── Logged-out (anon): no free-form typing. Hide the text input + 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-input-row,
.erin-root.erin-anon .erin-foot { display: none; }
.erin-root.erin-anon .erin-anon-note { display: block; }

/* ── Mobile ───────────────────────────────────────────────────────────
   Collapsed avatar by default (same rules as .erin-min-mode) and a
   full-width bottom sheet for the panel. */
@media (max-width: 600px) {
  .erin-launcher {
    left: 16px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    padding: 3px;
    gap: 0;
  }
  .erin-launcher-id,
  .erin-launcher-caret,
  .erin-min { display: none; }
  .erin-launcher-btn { padding: 0; }
  .erin-avatar-sm { width: 46px; height: 46px; flex-basis: 46px; }
  .erin-launcher-dot { width: 13px; height: 13px; border-width: 2.5px; }
}

@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)); }
}

/* ── Mobile action-button clearance ───────────────────────────────────
   The ONLY place Erin can still reach a button. Below 760px
   css/icms-forms.css turns .icms-form-actions into a column-reverse of
   FULL-WIDTH buttons, so they span the collapsed avatar's column too and
   left alignment stops protecting anything. Give every module's content
   wrapper enough bottom padding that the action row can always scroll
   clear of her. These two selectors cover all four workspaces:
   .icms-app-container is used by the home wizard (partials/app.html), the
   exam/tools builder (exam/partials/exam-app.html) and the referral
   dashboard; .notes-wrap by Teaching Notes.

   Sized to the 46px avatar + its 20px offset + breathing room. */
@media (max-width: 760px) {
  .icms-app-container,
  .notes-wrap {
    padding-bottom: 96px !important;
  }
}