/* ============================================================
   MightyBot launcher + chat panel
   ============================================================
   One element: a navy pill (shield + chat bubble + "Ask MightyBot") pinned bottom-right.
   On open it unfolds UPWARD into the panel and the label becomes the input bar; the dock
   stays pinned so the launcher never jumps. The brand red/blue glow (ported from the
   .feat-card--cta "Browse the full catalog" card) is static at rest and FLIPS on hover.
   Tokens only; the two status-dot greens/ambers and the bright glow blue are the one-off
   literals the design system already uses for those accents.
   ------------------------------------------------------------ */

.mb {
  position: fixed;
  right: 20px;
  bottom: 16px;                 /* same bottom row as the cookie banner */
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 55;                  /* below the cookie banner (z 60): cookies stay on top */
  width: 212px;
  height: 60px;
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: transparent;          /* transparent so the panel's backdrop-filter blurs the PAGE (real frosted glass), not a flat navy */
  border: 1px solid rgba(255, 255, 255, 0.08);   /* same hairline edge as the .site-header glass; traces the whole pill / panel */
  box-shadow: 0 14px 34px -10px rgba(25, 22, 64, 0.6), 0 3px 10px -3px rgba(25, 22, 64, 0.5);
  cursor: pointer;
  transition: width .5s var(--ease-spring), height .5s var(--ease-spring),
              border-radius .5s var(--ease-spring), box-shadow .25s var(--ease-out),
              transform .2s var(--ease-spring);
}
.mb.is-open { width: 372px; height: 500px; border-radius: 20px; cursor: default; }

/* ---------- red/blue glow: static at rest, flips 180deg on hover, fades away on open ---------- */
.mb__glows { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  transition: transform .7s var(--ease-spring), opacity .55s var(--ease-out); }
.mb__glow { position: absolute; width: 150px; height: 150px; border-radius: 50%; filter: blur(26px); opacity: .9; bottom: -80px; transition: opacity .4s var(--ease-out); }
.mb__glow--red  { right: -34px; background: radial-gradient(circle, color-mix(in oklab, var(--color-brand-red) 92%, transparent) 0%, color-mix(in oklab, var(--color-brand-red) 52%, transparent) 45%, transparent 70%); }
.mb__glow--blue { left: -34px;  background: radial-gradient(circle, color-mix(in oklab, #3a55d8 94%, transparent) 0%, color-mix(in oklab, var(--color-brand-blue) 58%, transparent) 45%, transparent 70%); }
.mb:not(.is-open):hover { transform: translateY(-2px); box-shadow: 0 20px 46px -10px rgba(25,22,64,.66), 0 4px 12px -3px rgba(25,22,64,.55); }
.mb:not(.is-open):hover .mb__glows { transform: rotate(180deg); }     /* flip the colours around */
.mb:not(.is-open):hover .mb__glow { opacity: 1; }
.mb.is-open .mb__glows { opacity: 0; transition: opacity 1.1s var(--ease-out); }   /* slow fade away */
@media (prefers-reduced-motion: reduce) {
  .mb { transition: opacity 1ms linear; }
  .mb__glows { transition: opacity .2s linear; }
  .mb:not(.is-open):hover .mb__glows { transform: none; }
}

/* ---------- conversation (frosted glass, revealed on open) ---------- */
.mb__conv {
  flex: 1 1 auto; min-height: 0; position: relative; z-index: 2;
  display: flex; flex-direction: column; opacity: 0;
  border-radius: 20px 20px 0 0;   /* round own top so the glass does not leave square navy corners */
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);   /* frosted glass: blurred page reads through, but white-leaning for contrast and readability */
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  transition: opacity .3s var(--ease-out);
}
/* graceful fallback where backdrop-filter is unsupported: lean opaque so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mb__conv { background: rgba(248, 249, 252, 0.96); }
}
.mb.is-open .mb__conv { opacity: 1; transition-delay: .16s; }
.mb__conv-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(25,22,64,0.10); }
.mb__conv-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text-primary); }
.mb__x { border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); display: inline-flex; }
.mb__x svg { width: 17px; height: 17px; }
.mb__x:hover { color: var(--text-primary); background: rgba(25,22,64,0.06); }
.mb__x:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.mb__msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.mb__msg { max-width: 88%; display: flex; flex-direction: column; gap: 6px; }
.mb__msg--user { align-self: flex-end; }
.mb__msg--bot  { align-self: flex-start; }
.mb__bubble { font-family: var(--font-body); font-size: 13px; line-height: 1.55; padding: 9px 12px; border-radius: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.mb__msg--bot .mb__bubble  { background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.8); color: var(--color-brand-blue-deep); border-bottom-left-radius: 3px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mb__msg--user .mb__bubble { background: var(--accent-primary); color: #fff; border-bottom-right-radius: 3px; }
.mb__fineprint { flex: 0 0 auto; margin: 0; padding: 8px 14px 10px; font-family: var(--font-body); font-size: 11px; line-height: 1.45; color: var(--text-secondary); border-top: 1px solid rgba(25,22,64,0.07); }
.mb__fineprint-link { color: var(--text-secondary); text-decoration: underline; }
.mb__fineprint-link:hover { color: var(--accent-primary); }

/* ---------- dock: pinned at the bottom, becomes the input bar on open ---------- */
/* SAME glass as the floating .site-header (base.css): navy at 0.52 + blur(16px) saturate(160%).
   It rounds its OWN corners because backdrop-filter ignores the ancestor's border-radius
   (else the pill would show square corners through the blur). The red/blue glow paints on
   top of this glass, so the page reads through, exactly like the top menu bar. */
.mb__dock { flex: 0 0 60px; position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 0 18px 0 9px; overflow: hidden; border-radius: 32px; background: rgba(25, 22, 64, 0.52); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.mb.is-open .mb__dock { border-radius: 0 0 20px 20px; }   /* square top (flush under the panel), rounded bottom to match the open panel */
/* graceful fallback where backdrop-filter is unsupported: solid navy so the icon + label stay readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mb__dock { background: var(--color-brand-blue-deep); }
}
.mb__icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; border-radius: 50%; transition: background-color .2s var(--ease-out); }
.mb.is-open .mb__icon:hover { background: rgba(255,255,255,0.14); }
.mb__icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mb__shield { width: 42px; height: 42px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.mb__status { position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--color-brand-blue-deep); }
.mb__status--green { background: #16c172; box-shadow: 0 0 0 2px rgba(22,193,114,0.25); }   /* available */
.mb__status--amber { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,0.25); }    /* fix in progress */
.mb__status--red   { background: var(--color-brand-red); box-shadow: 0 0 0 2px rgba(208,38,41,0.28); } /* not available */
.mb__mid { position: relative; z-index: 1; flex: 1 1 auto; height: 42px; display: flex; align-items: center; }
.mb__label { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.85); white-space: nowrap; letter-spacing: -0.01em; text-shadow: 0 1px 4px rgba(10,8,40,0.5); transition: opacity .25s var(--ease-out); }
.mb__form { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out); }
.mb.is-open .mb__label { opacity: 0; }
.mb.is-open .mb__form { opacity: 1; pointer-events: auto; transition-delay: .18s; }
.mb__field { flex: 1 1 auto; height: 38px; border: 1px solid rgba(255,255,255,0.24); background: rgba(255,255,255,0.12); border-radius: var(--radius-md); color: #fff; font-family: var(--font-body); font-size: 13px; padding: 0 12px; outline: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mb__field::placeholder { color: rgba(255,255,255,0.62); }
.mb__field:focus { border-color: rgba(255,255,255,0.5); }
.mb__send { width: 38px; height: 38px; flex: 0 0 auto; border: 0; border-radius: var(--radius-md); background: var(--accent-primary); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mb__send svg { width: 17px; height: 17px; }
.mb__send:hover { background: var(--color-brand-blue-mid); }
.mb__send:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.mb .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- typing indicator (live mode) ---------- */
.mb__typing { display: inline-flex; gap: 4px; padding: 11px 12px; background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.7); border-radius: 11px; border-bottom-left-radius: 3px; }
.mb__typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--neutral-400); animation: mbBounce 1.2s var(--ease-out) infinite; }
.mb__typing span:nth-child(2) { animation-delay: .15s; }
.mb__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes mbBounce { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---------- product suggestion link cards (live mode) ---------- */
.mb__links { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.mb__link-card { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,0.7); border: 1px solid var(--border-subtle); text-decoration: none; transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) var(--ease-out); }
.mb__link-card:hover { border-color: var(--accent-primary); transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(25,22,64,0.4); text-decoration: none; }
.mb__link-title { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--color-brand-blue-deep); }
.mb__link-sub { font-family: var(--font-body); font-size: 11px; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .mb__typing span { animation: none; opacity: .6; } .mb__link-card:hover { transform: none; } }

/* ---------- tablet ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
  .mb.is-open { width: 384px; height: 520px; }
}

/* ---------- mobile: launcher is just the circle; open covers a portion ---------- */
@media (max-width: 600px) {
  .mb { width: 60px; height: 60px; border-radius: 50%; right: 16px; }
  .mb__dock { padding: 0; justify-content: center; border-radius: 50%; }   /* glass clips to the circle */
  .mb__mid { display: none; }
  .mb.is-open { width: calc(100vw - 24px); height: 68vh; max-height: 500px; border-radius: 18px; right: 12px; }
  .mb.is-open .mb__conv { border-radius: 18px 18px 0 0; }
  .mb.is-open .mb__dock { padding: 0 14px 0 9px; justify-content: flex-start; border-radius: 0 0 18px 18px; }
  .mb.is-open .mb__mid { display: flex; }
}