/* MANI — the widget's clothes.
   ═══════════════════════════════════════════════════════════════════════════
   Its own file because the widget drops onto pages that already have their
   own stylesheets, and everything here is namespaced .mani- so it cannot
   reach into theirs. It reads the page's own theme variables where they
   exist and falls back to the brand values where they do not, so it looks
   native on a page it has never been on before.
   ═══════════════════════════════════════════════════════════════════════════ */

#mani-root{
  --m-card:var(--card, #fff);
  --m-sunk:var(--surface, #f3f6f4);
  --m-ink:var(--ink, #0d1f16);
  --m-mute:var(--ink-soft, #5d7a6c);
  --m-line:var(--line, #dde7e1);
  --m-brand:var(--brand-bright, #18C979);
  --m-deep:#085C3A;
  --m-stop:#C2361E;
  position:fixed; right:18px; bottom:18px; z-index:9000;
  font:15px/1.55 Manrope, ui-sans-serif, system-ui, -apple-system, sans-serif;
}
/* THE FALLBACKS WERE A LIGHT SET ONLY, and that was the whole bug.
   Measured on the live page, 5 Nov 2026.  Every token above prefers the
   page's own variable and falls back to a brand value.  This page defines
   five of the six and flips all five for dark — but it has no --card at
   all, so --m-card held the hardcoded #fff while --m-ink correctly became
   #f2fbf6.  Near-white text on a white card: contrast 1.06, and the answer
   bubble came out at 1.00, which is the same colour twice.
   A page is not obliged to define every name we happen to read, so one
   missing variable must never be able to mix a dark ink into a light card.
   The fallbacks are restated here for dark.  Each one still prefers the
   page's own value — only the default behind it changes, and light is not
   touched at all.
   --m-card reaches for --raised before giving up, because a card is a
   surface lifted above the sunk one and that is the name this project
   already uses for it (why-turned-down, partner.css and the v2 pages all
   carry --raised).  Every hex here is one this project already ships; a
   chat widget is not the place to introduce a colour.
   It is one variable, but it is the background of the panel, the launcher
   button, every answer bubble, the chips, the composer and the typing
   dots — which is why the whole widget went unreadable rather than one
   line of it. */
[data-theme="dark"] #mani-root{
  --m-card:var(--card, var(--raised, #0e2318));
  --m-sunk:var(--surface, #0b1d14);
  --m-ink:var(--ink, #f2fbf6);
  --m-mute:var(--ink-soft, #8fae9e);
  --m-line:var(--line, #1b3a2a);
  --m-stop:#F0776B;
}

.mani-badge{
  width:30px; height:30px; border-radius:9px; flex:none;
  background:var(--m-brand); color:#04180e;
  display:grid; place-items:center; font:700 14px/1 Poppins, Manrope, sans-serif;
}

/* ── the button ─────────────────────────────────────────────────────── */
.mani-open{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:9px 16px 9px 9px; border-radius:999px;
  border:1px solid var(--m-line); background:var(--m-card); color:var(--m-ink);
  font:700 14px/1 inherit;
  box-shadow:0 6px 22px -8px rgba(0,0,0,.4);
  transition:transform .16s ease, box-shadow .16s ease;
}
.mani-open:hover{ transform:translateY(-1px); box-shadow:0 12px 30px -10px rgba(0,0,0,.5); }
.mani-open:focus-visible{ outline:2px solid var(--m-brand); outline-offset:3px; }
#mani-root.mani-on .mani-open{ display:none; }
@media (max-width:420px){ .mani-open-t{ display:none; } .mani-open{ padding:9px; } }

/* ── the panel ──────────────────────────────────────────────────────── */
.mani-panel{
  width:min(390px, calc(100vw - 32px));
  height:min(560px, calc(100vh - 110px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--m-card); border:1px solid var(--m-line); border-radius:18px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
  animation:mani-in .22s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes mani-in{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .mani-panel{ animation:none; } .mani-open{ transition:none; } }

.mani-bar{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:linear-gradient(100deg, var(--m-deep), #0b7a4c); color:#fff;
}
[data-theme="dark"] .mani-bar{ background:linear-gradient(100deg,#0b2b1d,#10402a); }
/* Named, not "every span in the bar". The first version did select every
   span, which caught the badge sitting beside this one and stretched it to
   160px — a later rule in the same file quietly beating .mani-badge's own
   flex:0 0 auto. A selector broad enough to catch a sibling eventually will. */
.mani-who{ flex:1; min-width:0; }
.mani-bar b{ display:block; font:600 15px/1.2 Poppins, Manrope, sans-serif; }
.mani-bar small{ display:block; font-size:11px; opacity:.85; }
.mani-x{
  background:none; border:0; color:#fff; font-size:22px; line-height:1;
  cursor:pointer; opacity:.8; padding:2px 4px;
}
.mani-x:hover{ opacity:1; }

.mani-log{
  flex:1; overflow-y:auto; padding:15px 14px;
  display:flex; flex-direction:column; gap:10px;
  background:var(--m-sunk);
}
.mani-msg{
  max-width:88%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.55;
  animation:mani-rise .3s cubic-bezier(.2,.8,.3,1) both; overflow-wrap:anywhere;
}
@keyframes mani-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .mani-msg{ animation:none; } }
.mani-them{
  background:var(--m-card); border:1px solid var(--m-line);
  border-bottom-left-radius:4px; align-self:flex-start; color:var(--m-ink);
}
.mani-me{
  background:var(--m-deep); color:#fff; border-bottom-right-radius:4px;
  align-self:flex-end; font-weight:600;
}
[data-theme="dark"] .mani-me{ background:var(--m-brand); color:#04180e; }
/* A refusal looks different on purpose: it is not a failed answer, it is
   the assistant holding a line, and it should read that way. */
.mani-guard{ border-left:3px solid var(--m-stop); }
.mani-soft{ color:var(--m-mute); font-size:13.5px; }
.mani-src{
  display:block; margin-top:8px; font-size:11.5px; color:var(--m-mute);
  border-top:1px solid var(--m-line); padding-top:7px;
}

.mani-wait{
  align-self:flex-start; display:flex; align-items:center; gap:5px;
  padding:11px 13px; border-radius:14px; border-bottom-left-radius:4px;
  background:var(--m-card); border:1px solid var(--m-line); max-width:88%;
}
.mani-wait i{
  width:6px; height:6px; border-radius:50%; background:var(--m-mute); display:block;
  animation:mani-blink 1.25s infinite;
}
.mani-wait i:nth-child(2){ animation-delay:.18s; }
.mani-wait i:nth-child(3){ animation-delay:.36s; }
.mani-wait span{ font-size:11.5px; color:var(--m-mute); margin-left:5px; }
@keyframes mani-blink{
  0%,60%,100%{ opacity:.25; transform:translateY(0); }
  30%{ opacity:1; transform:translateY(-3px); }
}
@media (prefers-reduced-motion:reduce){ .mani-wait i{ animation:none; opacity:.5; } }

.mani-chips{ display:flex; gap:6px; flex-wrap:wrap; padding:10px 14px 0; background:var(--m-card); }
.mani-chip{
  font:600 12px/1 inherit; padding:8px 11px; border-radius:999px; cursor:pointer;
  border:1px solid var(--m-line); background:var(--m-card); color:var(--m-ink);
}
.mani-chip:hover{ border-color:var(--m-brand); }

.mani-ask{ display:flex; gap:8px; padding:11px 12px; background:var(--m-card);
  border-top:1px solid var(--m-line); }
.mani-ask input{
  flex:1; min-width:0; padding:11px 12px; border-radius:11px;
  border:1px solid var(--m-line); background:var(--m-sunk); color:var(--m-ink);
  font:inherit; font-size:14px;
}
/* Left unstyled this is Chrome's own #757575, which is tuned for a white
   field: 3.8 against the dark input, under AA. It is the one line in this
   widget a contrast sweep cannot see, because a placeholder is not a text
   node — it was found by asking for it by name. Firefox dims placeholders
   by default, hence the opacity. */
.mani-ask input::placeholder{ color:var(--m-mute); opacity:1; }
.mani-ask input:focus{ outline:2px solid var(--m-brand); outline-offset:-1px; }
.mani-ask button{
  border:0; background:var(--m-brand); color:#04180e; border-radius:11px;
  padding:0 16px; font:700 14px/1 inherit; cursor:pointer;
}