/* Magicomeal Lead Bot — front-end widget
 *
 * Built against Brand Guidelines Vol. 01 (Working Draft v1.0):
 *   Five colours, no invented hues. Surfaces are tints of Executive Charcoal,
 *   never new colours.
 *   Buttons and inputs: radius 2px. Chips: pill. Nothing else is rounded.
 *   No gradients. No drop shadows. No backdrop blur. Elevation is implied by
 *   surface tone and hairlines.
 *   Green earns its place: primary CTA fill, live status, section rule,
 *   chip hover. Never decoration, never inside running copy.
 *   Type: Playfair Display for the name, Montserrat for everything operational.
 *
 * Single-theme by intent. Soft White is the brand canvas at 70 percent, and the
 * widget sits on a light marketing site, so every colour is painted explicitly
 * rather than inherited from the host.
 *
 * Scoped under #magi-root so no theme rule leaks in or out.
 */

#magi-root{
  /* Five brand colours */
  --mm-green:#4EB952;
  --mm-green-deep:#1E5D2B;
  --mm-charcoal:#111827;
  --mm-white:#F8FAF8;
  --mm-steel:#5B6470;

  /* Surfaces: tints of charcoal on the Soft White canvas, not new hues */
  --mm-recess:rgba(17,24,39,.045);
  --mm-hair:rgba(17,24,39,.14);
  --mm-hair-soft:rgba(17,24,39,.08);
  --mm-hair-invert:rgba(248,250,248,.16);

  --r-btn:2px;
  --r-chip:999px;

  position:fixed;
  right:24px;
  bottom:24px;
  z-index:2147483000;
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
  color:var(--mm-charcoal);
  -webkit-font-smoothing:antialiased;
}
#magi-root *,#magi-root *::before,#magi-root *::after{box-sizing:border-box}
#magi-root button{font-family:inherit;cursor:pointer;border:0;margin:0;text-transform:none;box-shadow:none;letter-spacing:normal}
#magi-root input{font-family:inherit;margin:0;box-shadow:none;min-height:0}
#magi-root p{margin:0}
#magi-root a{text-decoration:none}

/* ---------- launcher ---------- */
#magi-root .magi-launch{
  display:flex;align-items:center;gap:10px;
  background:var(--mm-green);color:var(--mm-white);
  padding:13px 20px;
  border-radius:var(--r-btn);
  font-size:14.5px;font-weight:600;letter-spacing:.005em;
  transition:background .14s ease;
  max-width:min(78vw,320px);
}
#magi-root .magi-launch:hover{background:var(--mm-green-deep)}
#magi-root .magi-launch svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#magi-root .magi-launch span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#magi-root.magi-open .magi-launch{display:none}

/* ---------- panel ---------- */
#magi-root .magi-panel{
  display:none;
  width:min(92vw,384px);
  height:min(76vh,596px);
  background:var(--mm-white);
  border:1px solid var(--mm-hair);
  border-radius:var(--r-btn);
  overflow:hidden;
  flex-direction:column;
}
#magi-root.magi-open .magi-panel{display:flex}

#magi-root .magi-head{
  display:flex;align-items:center;gap:12px;
  padding:15px 14px 15px 16px;
  background:var(--mm-charcoal);color:var(--mm-white);flex:none;
}
#magi-root .magi-logo{
  width:38px;height:38px;border-radius:50%;flex:none;display:block;
}
#magi-root .magi-idblock{min-width:0}
#magi-root .magi-name{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-weight:600;font-size:19px;line-height:1.1;letter-spacing:-.01em;
}
#magi-root .magi-sub{
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(248,250,248,.62);margin-top:4px;display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#magi-root .magi-dot{width:5px;height:5px;border-radius:50%;background:var(--mm-green);display:inline-block;flex:none}
#magi-root .magi-x{
  margin-left:auto;background:transparent;color:var(--mm-white);opacity:.62;
  width:30px;height:30px;border-radius:var(--r-btn);flex:none;
  display:flex;align-items:center;justify-content:center;
}
#magi-root .magi-x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
#magi-root .magi-x:hover{opacity:1;background:rgba(248,250,248,.12)}

#magi-root .magi-log{
  flex:1 1 auto;overflow-y:auto;padding:18px 16px;
  display:flex;flex-direction:column;gap:11px;
  background:var(--mm-white);
  -webkit-overflow-scrolling:touch;
}
#magi-root .magi-msg{
  max-width:87%;padding:11px 14px;border-radius:var(--r-btn);
  font-size:14.5px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word;
}
#magi-root .magi-msg.bot{
  background:var(--mm-recess);color:var(--mm-charcoal);
  align-self:flex-start;font-weight:400;
  border-left:2px solid var(--mm-hair-soft);
}
#magi-root .magi-msg.user{
  background:var(--mm-charcoal);color:var(--mm-white);
  align-self:flex-end;font-weight:500;
}
#magi-root .magi-type{
  align-self:flex-start;display:flex;gap:5px;padding:14px;
  background:var(--mm-recess);border-radius:var(--r-btn);
  border-left:2px solid var(--mm-hair-soft);
}
#magi-root .magi-type i{width:5px;height:5px;border-radius:50%;background:var(--mm-steel);display:block;animation:magibob 1.1s infinite}
#magi-root .magi-type i:nth-child(2){animation-delay:.15s}
#magi-root .magi-type i:nth-child(3){animation-delay:.3s}
@keyframes magibob{0%,60%,100%{opacity:.3}30%{opacity:.95}}

/* footer, with the 56 x 2px brand rule sitting on the hairline */
#magi-root .magi-foot{
  flex:none;border-top:1px solid var(--mm-hair-soft);
  padding:16px 16px 16px;background:var(--mm-white);position:relative;
}
#magi-root .magi-foot::before{
  content:"";position:absolute;top:-2px;left:16px;
  width:56px;height:2px;background:var(--mm-green);
}

#magi-root .magi-chips{display:flex;flex-wrap:wrap;gap:8px}
#magi-root .magi-chip{
  font-size:13px;font-weight:500;padding:8px 15px;border-radius:var(--r-chip);
  border:1px solid var(--mm-hair);background:transparent;color:var(--mm-charcoal);
  transition:border-color .14s ease,color .14s ease;
}
#magi-root .magi-chip:hover{border-color:var(--mm-green);color:var(--mm-green-deep)}
#magi-root .magi-chip.ghost{color:var(--mm-steel);font-weight:400}
#magi-root .magi-chip.ghost:hover{color:var(--mm-charcoal);border-color:var(--mm-steel)}

#magi-root .magi-entry{display:flex;gap:8px}
#magi-root .magi-chips + .magi-entry{margin-top:10px}
#magi-root .magi-entry input[type=text]{
  flex:1 1 auto;min-width:0;width:100%;
  font-size:14.5px;font-weight:400;padding:11px 13px;
  border-radius:var(--r-btn);
  border:1px solid var(--mm-hair);background:#FFFFFF;color:var(--mm-charcoal);
}
#magi-root .magi-entry input[type=text]::placeholder{color:var(--mm-steel);opacity:1}
#magi-root .magi-entry input[type=text]:focus{outline:none;border-color:var(--mm-green)}
#magi-root .magi-entry button{
  flex:none;font-weight:600;font-size:13.5px;padding:11px 18px;
  border-radius:var(--r-btn);background:var(--mm-green);color:var(--mm-white);
  transition:background .14s ease;
}
#magi-root .magi-entry button:hover{background:var(--mm-green-deep)}

#magi-root .magi-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}

#magi-root .magi-note{
  font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mm-steel);margin-top:14px;text-align:center;
}
#magi-root .magi-note a{color:var(--mm-steel);border-bottom:1px solid var(--mm-hair);padding-bottom:1px}
#magi-root .magi-note a:hover{color:var(--mm-charcoal);border-bottom-color:var(--mm-steel)}

/* primary and secondary actions, per the component library */
#magi-root a.magi-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--mm-green);color:var(--mm-white);
  font-size:13.5px;font-weight:600;padding:10px 16px;border-radius:var(--r-btn);
  transition:background .14s ease;
}
#magi-root a.magi-primary:hover{background:var(--mm-green-deep)}
#magi-root a.magi-secondary{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--mm-charcoal);
  border:1px solid var(--mm-hair);
  font-size:13.5px;font-weight:600;padding:10px 16px;border-radius:var(--r-btn);
  transition:border-color .14s ease;
}
#magi-root a.magi-secondary:hover{border-color:var(--mm-charcoal)}
#magi-root a.magi-primary svg,#magi-root a.magi-secondary svg{
  width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;
}

#magi-root :focus-visible{outline:2px solid var(--mm-green);outline-offset:2px}

@media (max-width:520px){
  #magi-root{right:14px;bottom:14px;left:14px}
  #magi-root .magi-launch{margin-left:auto}
  #magi-root .magi-panel{width:100%;height:min(84vh,600px)}
}
@media (prefers-reduced-motion:reduce){
  #magi-root *{animation:none!important;transition:none!important}
}