/* ===========================================================================
   Elena's Colon Care — Mascot Assistant    Phase: Chatbox Visual Polish (V2)
   ===========================================================================
   Loaded ONLY when theme config `assistant.enabled` is boolean true.
   VISUAL ONLY: matching, safety, answers, voice, live data and the
   publication gate are untouched — nothing here can reach them.

   Inherited colour rules, not re-litigated:
     · --coral is an APPROVED BRAND SURFACE; text/icons on it are --ink.
     · hover LIGHTENS (--coral-hover); darkening the surface was rejected.
     · --mint-200 is borders only, never text.
   All tokens come from css/theme.css.

   ⚠ This file has a SIZE BUDGET: shell + knowledge must stay under 25 KB
   gzipped (asserted by run-tests.mjs). Prose here is charged to every
   visitor who opens the chat — keep the warnings, not the essay.
   =========================================================================== */

.eca {
  position: fixed;
  right: clamp(12px, 3vw, 24px);
  bottom: clamp(12px, 3vw, 24px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .7rem;
  font-family: var(--font-body);
  /* Never wider than the viewport minus a gutter at either side. */
  max-width: calc(100vw - 24px);
}

/* LAUNCHER — a circular mascot disc with the label beside it as a cue bubble.
   Markup unchanged (<button><img><span>): the span is still the button's
   accessible name, just painted as a bubble. `row-reverse` moves it to the
   LEFT visually without touching DOM order, so the name is unaffected. */
.eca-launcher {
  position: relative;
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: .5rem;
  min-height: 56px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  cursor: pointer;
}
.eca-launcher__img {
  width: 56px;
  height: 56px;
  padding: 4px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--mint-50);
  object-fit: contain;
  flex: 0 0 auto;
  box-shadow: var(--shadow);
  transition: transform .18s ease, background-color .18s ease;
}
.eca-launcher:hover .eca-launcher__img {
  background: var(--mint-100);
  transform: translateY(-2px);
}
.eca-launcher:active .eca-launcher__img { transform: translateY(1px); }

/* Cue bubble: cream pill with a tail pointing at the disc. */
.eca-launcher__label {
  position: relative;
  padding: .45rem .8rem;
  border: 1px solid var(--line-mint);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink);
  font: 700 .86rem/1.2 var(--font-body);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.eca-launcher__label::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -5px;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  transform: rotate(45deg);
  background: var(--card);
  border-right: 1px solid var(--line-mint);
  border-top: 1px solid var(--line-mint);
}

/* Unread dot. Absolutely positioned so it is NOT a flex item and cannot
   shift the disc or the bubble. */
.eca-launcher::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--coral-ring);
}

/* Open: cue and dot would only crowd the panel; the disc stays. */
.eca.is-open .eca-launcher__label,
.eca.is-open .eca-launcher::after { display: none; }
.eca.is-open .eca-launcher__img { width: 48px; height: 48px; }

/* ---------------------------------------------------------------- panel -- */
.eca-panel {
  width: min(384px, calc(100vw - 24px));
  max-height: min(78vh, 620px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line-mint);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* 🔴 THE PANEL MUST ACTUALLY DISAPPEAR WHEN IT IS HIDDEN.
   js closes with `panel.hidden = true`, which works only via the UA's
   `[hidden]{display:none}` — and ANY author rule beats a UA rule. The
   `display:flex` above is one, so for two phases the attribute was set, focus
   returned, and the panel kept painting at 380x508: the visitor could not
   close the chat at all.
   `!important` is deliberate. "Hidden means not painted" is an invariant:
   without it any more-specific rule (`.eca.is-open .eca-panel{display:flex}`
   would do) silently re-springs the defect — and no test asserting the
   ATTRIBUTE can see it. Written for any hidden descendant, not just the
   panel; this phase relies on that for the empty subtitle.
   ⚠ TESTING: assert the element stops being PAINTED (isHidden(), or computed
   display + client rect). `el.hidden` proves nothing — it was always right. */
.eca [hidden],
.eca-panel[hidden] { display: none !important; }

/* ----------------------------------------------------------------- head -- */
.eca-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .55rem;
  padding: .7rem .75rem .7rem .8rem;
  /* Mint washing into cream, per the reference. Existing tokens. */
  background: linear-gradient(135deg, var(--mint-50) 0%, var(--mint-wash) 58%, var(--card) 100%);
  border-bottom: 1px solid var(--line-mint);
}
.eca-mascot {
  width: 48px;
  height: 48px;
  padding: 3px;
  border-radius: 50%;
  background: var(--white);
  object-fit: contain;
  flex: 0 0 auto;
  box-shadow: var(--shadow-sm);
}

/* Title + subtitle share ONE grid cell, so the header stays a 3-col grid. */
.eca-headline { min-width: 0; }
.eca-title {
  margin: 0;
  font: 700 1.04rem/1.2 var(--font-display);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.eca-subtitle {
  margin: .1rem 0 0;
  font: 600 .76rem/1.3 var(--font-body);
  color: var(--ink-soft);   /* 5.28:1 on --mint-50 — AA at this size and up */
  overflow-wrap: anywhere;
}
.eca-head-actions { display: flex; gap: .15rem; }

/* 44x44 is the accessibility target, and these controls can meet it for free:
   at rest they paint NOTHING but their 18px glyph — the box only becomes
   visible on hover/focus — so growing 36 -> 44 enlarges the hit area without
   changing anything the visitor sees in the resting state. */
.eca-ctl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .25rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font: 700 .78rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.eca-ctl:hover { background: var(--white); color: var(--ink); }
.eca-voice .eca-wave { opacity: .28; }
.eca-voice.is-on { color: var(--ink); }
.eca-voice.is-on .eca-wave { opacity: 1; }

/* ------------------------------------------------------------------ log -- */
.eca-log {
  flex: 1 1 auto;
  min-height: 130px;
  overflow-y: auto;
  padding: .9rem .85rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  /* Soft mint wash, per the reference — separates transcript from chrome. */
  background: linear-gradient(180deg, var(--mint-wash) 0%, var(--cream) 42%);
  overscroll-behavior: contain;
}
.eca-msg { display: flex; }
.eca-msg--user { justify-content: flex-end; }
.eca-bubble {
  margin: 0;
  max-width: 88%;
  padding: .6rem .85rem;
  border-radius: var(--radius);
  font-size: .93rem;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-sm);
}
.eca-msg--bot .eca-bubble {
  background: var(--white);
  border: 1px solid var(--line-mint);
  border-bottom-left-radius: 7px;
}
.eca-msg--user .eca-bubble {
  background: var(--coral-tint);
  border: 1px solid var(--coral-ring);
  border-bottom-right-radius: 7px;
}
.eca-msg.is-safety .eca-bubble {
  background: var(--mint-wash);
  border-color: var(--mint-200);
}
.eca-msg.is-thinking .eca-bubble {
  color: var(--ink-muted);
  font-style: italic;
  box-shadow: none;
}

/* Chips: a 44px TAP TARGET around a 34px PAINTED PILL.
   A chip paints a pill at rest, so a 44px button would grow the pill too and
   make every answer end in a heavy block. Instead the <button> is a
   transparent 44px box and the <span> inside is the 34px pill (built in
   addChips()). Row gap is 0: each button already adds ~5px of transparent
   padding top and bottom, so wrapped rows sit ~10px apart. */
.eca-chips { display: flex; flex-wrap: wrap; gap: 0 .35rem; padding-top: .1rem; }
.eca-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.eca-chip__label {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .3rem .75rem;
  border: 1px solid var(--mint-200);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink-soft);
  font: 600 .82rem/1.3 var(--font-body);
  box-shadow: var(--shadow-sm);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.eca-chip:hover .eca-chip__label {
  background: var(--mint-50);
  border-color: var(--line-mint);
  color: var(--ink);
}
/* Keep the focus ring on the pill the visitor can see, not on the invisible
   44px box around it. */
.eca-chip:focus-visible { outline: none; }
.eca-chip:focus-visible .eca-chip__label {
  outline: 3px solid var(--ink-soft);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- form -- */
.eca-form {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem .7rem;
  border-top: 1px solid var(--line);
  background: var(--card);
}
.eca-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 1px solid var(--line-mint);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font: 400 .95rem/1.4 var(--font-body);
}
.eca-input::placeholder { color: var(--ink-muted); }

/* SEND — a coral disc carrying a paper plane, as the reference draws it.
   🔴 Glyph is --ink, not the reference's white: white on --coral is 2.66:1,
      and the site rule is to darken the FOREGROUND, never the brand surface.
   🔴 The button no longer holds its own name — applyLangStrings() writes
      Send/Enviar to aria-label + title; textContent would delete the <svg>.
   Fixed 44x44 (not min-*) so it stays a circle instead of stretching. */
.eca-send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--coral);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color .18s ease, transform .18s ease;
}
.eca-send:hover { background: var(--coral-hover); }
.eca-send:active { transform: translateY(1px); }
.eca-send svg { display: block; margin-left: -1px; }

.eca-disclaimer {
  margin: 0;
  padding: 0 .85rem .7rem;
  background: var(--card);
  color: var(--ink-muted);
  font-size: .73rem;
  line-height: 1.45;
}

/* Visually hidden live region — announced, never drawn. */
.eca-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- a11y/motion */
.eca :focus-visible,
.eca-launcher:focus-visible {
  outline: 3px solid var(--ink-soft);
  outline-offset: 2px;
}
/* The launcher paints nothing, so its ring would hang in space. Put it on
   the disc the visitor actually sees. */
.eca-launcher:focus-visible { outline: none; }
.eca-launcher:focus-visible .eca-launcher__img {
  outline: 3px solid var(--ink-soft);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .eca-launcher__img,
  .eca-ctl,
  .eca-chip__label,
  .eca-send { transition: none; }
  .eca-launcher:hover .eca-launcher__img,
  .eca-launcher:active .eca-launcher__img,
  .eca-send:active { transform: none; }
}

/* ---------------------------------------------------------------- narrow -- */
@media (max-width: 480px) {
  .eca { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .eca-panel { width: 100%; max-height: 72vh; }
  .eca-launcher { align-self: flex-end; }
  .eca-mascot { width: 44px; height: 44px; }
  .eca-title { font-size: .99rem; }
}

/* Landscape phone: keep the input reachable. The cue bubble goes first —
   decoration, and the disc alone is still a 56px target. */
@media (max-height: 520px) {
  .eca-panel { max-height: 88vh; }
  .eca-log { min-height: 80px; }
  .eca-launcher__label { display: none; }
}