/* ============================================================
   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;
  /* iPad/iOS Safari fix: a position:fixed element that contains a focusable field
     (the chat input lives inside this pill) gets mispositioned and drifts during
     scroll, parking mid-screen. Promoting the pill to its own GPU layer with an
     identity transform pins it to the viewport. translate3d(0,0,0) has no visual
     effect (no movement) and only applies to THIS fixed element, so positioning is
     unchanged. Mobile was unaffected because its closed launcher hides the input
     (.mb__mid display:none), so no focusable field sat inside the fixed pill. */
  transform: translate3d(0, 0, 0);
  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: translate3d(0, -2px, 0); 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; }
/* inline Markdown the bot may use: bold, italics, and clean on-site text links */
.mb__msg--bot .mb__bubble strong { font-weight: 700; }
.mb__msg--bot .mb__bubble em { font-style: italic; }
.mb__msg--bot .mb__bubble a.mb__inline-link { color: var(--accent-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.mb__msg--bot .mb__bubble a.mb__inline-link:hover { text-decoration: none; }
.mb__msg--bot .mb__bubble a.mb__inline-link:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-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; }
/* font-size 16px: iOS Safari auto-zooms the whole page when a focused input is
   under 16px and never zooms back, which is the "zoom + weird gap" Leonard saw on
   tap. 16px keeps the field readable and stops the zoom. Leonard 2026-06-16. */
.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: 16px; 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; }

/* Smooth open/close (Leonard 2026-06-16): the frosted panels re-blur the page on
   every frame while the pill morphs size, which dropped the frame rate. Drop the
   backdrop-filters for the ~0.5s morph only (a slightly more opaque dock stands in
   so it never looks see-through), then they snap back at rest -- closed pill and
   open panel both keep the frosted glass. */
.mb.is-animating { will-change: width, height; }
.mb.is-animating .mb__conv,
.mb.is-animating .mb__dock { -webkit-backdrop-filter: none; backdrop-filter: none; }
.mb.is-animating .mb__dock { background: rgba(25, 22, 64, 0.82); }

.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 + TDS suggestion cards (live mode) ---------- */
.mb__links { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.mb__link-card { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,0.7); border: 1px solid var(--border-subtle); 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); }
.mb__link-main { display: flex; flex-direction: column; gap: 1px; text-decoration: none; }
.mb__link-main:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: 6px; }
.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); }
.mb__link-tds { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--accent-primary); text-decoration: none; }
.mb__link-tds:hover { text-decoration: underline; }
.mb__link-tds:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: 4px; }
@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; }

  /* Typing state (keyboard open): anchor to the TOP and fill the area above the
     keyboard so the whole chat fits the screen instead of being pushed up and
     left small. JS sets --mb-kb-h to the visualViewport height; we track it with
     no transition so the panel follows the keyboard without lag. The fineprint is
     hidden and the title bar tightened to free up room to type. Leonard 2026-06-16. */
  .mb.is-open.is-kb {
    top: 8px; bottom: auto; left: 12px; right: 12px; width: auto;
    height: var(--mb-kb-h, 90vh); max-height: none;
    transition: none;
  }
  .mb.is-kb .mb__fineprint { display: none; }
  .mb.is-kb .mb__conv-top { padding: 8px 12px; }
}