/* Energy Agent — tab-bar control + left dock rail (2026-07-13 redesign)
   Closed: tab-style control at the LEFT of the top tabbar (in line with Fleet Triage).
   Open: full-height left card; site content shifts right. */

:root{
  --ea-rail: 360px;
  /* Desktop dock is a FLOATING rounded card, not a full-bleed slab: --ea-gap is
     the inset from every viewport edge, --ea-radius its corner rounding. */
  --ea-gap: 14px;
  --ea-radius: 22px;
  /* Air between the floating card’s right edge and the main column (regular EA
     view). Keep tight — re-centering used to leave a wide sky gutter (Ford
     2026-07-21 screenshot). */
  --ea-content-gap: 12px;
  /* Where the main app column starts when EA is open (left inset + rail + gap). */
  --ea-content-inset: calc(var(--ea-gap) + var(--ea-rail) + var(--ea-content-gap));
  /* Legacy name used by overlays / hands-off / older rules — same as content inset
     (no longer “card + left gap + right gap” re-center footprint). */
  --ea-footprint: var(--ea-content-inset);
  /* Shared motion — disabled (Ford 2026-07-22): Energy Agent opens/closes
     instantly; no slide of the rail or main column. */
  --ea-ease: linear;
  --ea-dur: 0s;
  /* Defaults for ops dual-pane geometry (overridden on body.ea-on-ops). Always
     defined so leaving ops can interpolate back instead of snapping from unset. */
  --ea-ops-left: var(--ea-gap);
  --ea-ops-top: var(--ea-gap);
  --ea-ops-content-pad: 0px;
  --ea-ops-wrap-max: min(1680px, calc(100vw - 24px));
  --ea-sky: #38bdf8;
  --ea-sky2: #0ea5e9;
  --ea-sun: #fbbf24;
  --ea-glow: rgba(56,189,248,.45);
}

/* ── Tabbar control (matches sky glass pill bar) ─────────────────────────── */
#tabbar .tab.ea-tab,
.tab.ea-tab{
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  order: -1; /* sit left of Fleet Triage */
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
  text-decoration: none;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  color: var(--muted, #64748b);
  padding: 9px 14px 11px;
  border-radius: 10px 10px 0 0;
  background: transparent;
  position: relative;
  transition: color .15s, background .15s, box-shadow .15s;
  white-space: nowrap;
}
#tabbar .tab.ea-tab::after{ display: none; }
#tabbar .tab.ea-tab:hover{
  color: var(--ink, #0f172a);
  background: rgba(255,255,255,.03);
}
#tabbar .tab.ea-tab .ea-tab-ic{
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  background:
    radial-gradient(circle at 35% 30%, #fff7cc 0%, var(--ea-sun) 32%, transparent 48%),
    radial-gradient(circle at 50% 55%, var(--ea-sky) 0%, var(--ea-sky2) 60%, #0369a1 100%);
  box-shadow: 0 0 0 0 var(--ea-glow);
  display: inline-block;
  position: relative;
}
/* Go Pro / Unlimited — sits on the top-left of the Energy Agent icon */
.ea-pro-badge{
  position: absolute;
  top: -7px;
  left: -6px;
  z-index: 3;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px -2px rgba(15,23,42,.25);
}
#tabbar .tab.ea-tab,
#eaFab{
  position: relative;
  overflow: visible;
}
.ea-pro-badge--go{
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1c1917;
  pointer-events: auto !important;
  cursor: pointer;
  box-shadow: 0 2px 10px -2px rgba(245,158,11,.55);
}
.ea-pro-badge--go:hover{ filter: brightness(1.06); }
.ea-pro-badge--ok{
  background: linear-gradient(135deg, #34d399, #10b981);
  color: #064e3b;
}
#tabbar .tab.ea-tab.listening .ea-tab-ic{ animation: eaPulse 1.6s ease-in-out infinite; }
#tabbar .tab.ea-tab.thinking .ea-tab-ic{ animation: eaPulse 1.1s ease-in-out infinite; filter: saturate(1.2); }
#tabbar .tab.ea-tab.speaking .ea-tab-ic{
  box-shadow: 0 0 0 4px rgba(251,191,36,.22);
}
#tabbar .tab.ea-tab.open,
#tabbar .tab.ea-tab.active{
  color: var(--good, #0ea5e9);
  background: rgba(14,165,233,.1);
}
#tabbar .tab.ea-tab.open .ea-tab-label,
#tabbar .tab.ea-tab.active .ea-tab-label{ font-weight: 720; }

/* Sky theme: match glass pill tabs */
html.sky #tabbar .tab.ea-tab{
  border-radius: var(--sky-r-pill, 999px);
  padding: 10px 14px;
  color: #33415A;
  font-weight: 600;
}
html.sky #tabbar .tab.ea-tab:hover{
  background: rgba(255,255,255,.6) !important;
  color: var(--ink) !important;
}
html.sky #tabbar .tab.ea-tab.open,
html.sky #tabbar .tab.ea-tab.active{
  background: var(--sky-primary, #2196f3) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px -4px rgba(33,150,243,.6);
}
html.sky #tabbar .tab.ea-tab.open .ea-tab-ic,
html.sky #tabbar .tab.ea-tab.active .ea-tab-ic{
  box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}

@keyframes eaPulse{
  0%,100%{ box-shadow: 0 0 0 0 var(--ea-glow); }
  50%{ box-shadow: 0 0 0 8px rgba(56,189,248,.14); }
}

/* Mobile FAB + backdrop are hidden on desktop (shown in ≤720 media below) */
#eaFab{ display: none; }
#eaBackdrop{ display: none; }

/* ── Floating fallback orb (only if tabbar missing) ──────────────────────── */
#eaRoot.ea-floating{
  position: fixed; top: 72px; left: 18px; right: auto; z-index: 99980;
  width: 58px; height: 58px;
}
#eaRoot.ea-floating #eaOrb{
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background:
    radial-gradient(circle at 35% 30%, #fff7cc 0%, var(--ea-sun) 28%, transparent 42%),
    radial-gradient(circle at 50% 55%, var(--ea-sky) 0%, var(--ea-sky2) 55%, #0369a1 100%);
  box-shadow: 0 10px 28px -10px rgba(14,165,233,.65);
  display: block;
}

/* ── Mic gate chip (near tabbar control) ─────────────────────────────────── */
.ea-mic-gate{
  position: fixed; top: 78px; left: 18px; z-index: 99990;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(14,165,233,.35);
  background: linear-gradient(180deg, #fff, #e0f2fe);
  color: #0c4a6e; font: inherit; font-size: 12.5px; font-weight: 740;
  cursor: pointer; box-shadow: 0 10px 28px -12px rgba(14,165,233,.55);
  animation: eaGatePulse 1.8s ease-in-out infinite;
  /* Geometry snaps with the rail; only light hover feedback remains */
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ea-mic-gate[hidden]{ display: none !important; }
.ea-mic-gate:hover{ transform: translateY(-1px); border-color: rgba(14,165,233,.55); }
.ea-mic-gate-ic{ font-size: 14px; line-height: 1; }
@keyframes eaGatePulse{
  0%,100%{ box-shadow: 0 10px 28px -12px rgba(14,165,233,.45), 0 0 0 0 rgba(56,189,248,.25); }
  50%{ box-shadow: 0 12px 32px -10px rgba(14,165,233,.7), 0 0 0 6px rgba(56,189,248,.12); }
}
html:not(.sky) .ea-mic-gate{
  background: linear-gradient(180deg, var(--card,#111827), var(--card2,#0b1220));
  color: var(--ink,#e5e7eb); border-color: rgba(56,189,248,.35);
}
/* When dock is open, park the gate above the rail (positions transition on desktop) */
body.ea-shell-open .ea-mic-gate{ left: calc(var(--ea-gap) + var(--ea-rail) + 16px); top: 16px; }

/* ── Left dock — a FLOATING rounded card (inset from every edge, not a slab) ── */
#eaPanel{
  display: none;
  position: fixed;
  top: var(--ea-gap); left: var(--ea-gap); bottom: var(--ea-gap);
  width: var(--ea-rail);
  max-width: min(var(--ea-rail), calc(100vw - var(--ea-gap) * 2));
  z-index: 99970;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,249,255,.97));
  border: 1px solid rgba(14,165,233,.18);
  border-radius: var(--ea-radius);
  /* All-around elevation so it reads as a floating card, not an edge-anchored rail. */
  box-shadow: 0 24px 60px -22px rgba(14,60,120,.45), 0 6px 18px -10px rgba(14,60,120,.28);
  font-family: inherit;
  color: var(--ink, #0f172a);
  overflow: hidden;          /* clip header/composer to the rounded corners */
}
#eaPanel.open{ display: flex; }
html:not(.sky) #eaPanel{
  background: linear-gradient(180deg, var(--card,#111827), var(--card2,#0b1220));
  border-color: var(--line, rgba(255,255,255,.1));
  color: var(--ink, #e5e7eb);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.6), 0 6px 18px -10px rgba(0,0,0,.4);
}
html.sky #eaPanel{
  background: var(--sky-glass-chrome, linear-gradient(180deg, rgba(255,255,255,.92), rgba(240,249,255,.88)));
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--sky-glass-edge, rgba(14,165,233,.18));
  box-shadow: 0 24px 60px -22px rgba(14,60,120,.4), 0 6px 18px -10px rgba(14,60,120,.24);
}

/* Shift main app chrome right when the dock is open. The shift rides on
   TRANSFORM (GPU-composited), NOT margin-left — animating margin-left reflowed
   the entire dashboard (tabbar + fleet table + cards) every frame, so the site
   stuttered while the panel (transform) glided. The desktop transform lives in
   the ≥961px block below, on the SAME curve/duration/trigger as the panel, so
   the two move as one. Here we keep only the non-animated guards. */
/* ONLY the app shell wrap (body > .wrap). Resources injects a nested
   #rsHost > .wrap from resources.html — the old descendant selector
   double-applied transform/max-width and shoved the briefing off-center
   whenever Energy Agent was open (Ford 2026-07-17). */
body.ea-shell-open > .wrap{
  min-width: 0;
  box-sizing: border-box;
  /* Clip any child that still tries 100vw breakout beside the card */
  overflow-x: clip;
}
/* Nested content wraps (Resources briefing, etc.) must never inherit the shell shift */
body.ea-shell-open #rsHost > .wrap,
body.ea-shell-open #panelResources .wrap{
  transform: none !important;
  margin-left: auto !important; /* cancel any shell margin-left bleed */
}
body.ea-shell-open{
  /* keep fixed bottom mobile nav clear of rail if needed */
}
/* Global: no full-viewport width breakouts while EA dock owns the left strip */
body.ea-shell-open .panel.active{
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Shell shift is TRANSFORM-ONLY (GPU compositor). Never transition margin-left /
   max-width on .wrap — those reflow the whole dashboard every frame and kill FPS
   (the “10–15×” gap vs a pure transform slide). */
body > .wrap{
  transition: none;
  min-width: 0;
  backface-visibility: hidden;
}

/* High-FPS morph window: drop the glass blur (paint-heavy) while size/position
   are changing; solid fill still reads as the same card. */
body.ea-morphing #eaPanel,
body.ea-morphing #eaPanel.open{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.ea-morphing > .wrap{
  will-change: transform;
  pointer-events: none; /* skip hit-testing cost during the slide */
}

/* ── Energy Agent dock — open/close (desktop) ──────────────────────────────
   ONLY transform + visibility animate (compositor, ~60fps). Geometry
   (left/top/width) is set INSTANTLY; mode morphs use JS FLIP on transform.
   Scoped ≥961px — mobile bottom-sheet is separate. */
@media (min-width: 961px){
  #eaPanel{
    display: flex;
    /* Park fully off-screen on the compositor thread */
    transform: translate3d(calc(-100% - var(--ea-gap) - 28px), 0, 0);
    visibility: hidden;
    pointer-events: none;
    /* Own layer; isolate paints so chat internals don’t dirty the page */
    contain: layout paint;
    isolation: isolate;
    backface-visibility: hidden;
    will-change: auto;
    /* Instant open/close — no rail slide (Ford 2026-07-22). */
    transition: none;
  }
  #eaPanel.open{
    /* translate3d(0,0,0) keeps the layer promoted while open */
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    will-change: auto;
    transition: none;
  }
  /* Pack column tight to the card via GPU translate — left-aligned box, then
     slide by content-inset. max-width is set instantly (no transition). */
  body.ea-shell-open > .wrap{
    max-width: min(1440px, calc(100vw - var(--ea-content-inset) - 16px));
    margin-left: 0 !important;
    margin-right: auto !important;
    width: auto;
    transform: translate3d(var(--ea-content-inset), 0, 0);
    will-change: transform;
  }
}
@media (prefers-reduced-motion: reduce){
  body.ea-shell-open > .wrap,
  body > .wrap{ transition: none; }
  #eaPanel,
  #eaPanel.open{ transition: none; }
  .ea-mic-gate{ transition: none; }
  body.ea-morphing > .wrap{ pointer-events: auto; }
}

/* App modals (openModal / AODialog / claim) center on the FULL viewport by
   default. With the EA rail open that lands the card under/over the agent on
   ~1280px widths ("Open repair ticket" × Open tickets KPIs bleeding through
   the frosted card into the Energy Agent panel). Pin scrims to the content
   column so dialogs center in the remaining width only. */
/* !important: openModal() stamps inline `inset:0` on .ao-overlay, which would
   otherwise win over a plain left: rule and keep the modal under the EA rail. */
body.ea-shell-open .ao-overlay,
body.ea-shell-open .sb-ov,
body.ea-shell-open .cl-modal-back,
body.ea-shell-open .sb-detail-host.sb-dc-open{
  left: var(--ea-content-inset) !important;
  right: 0 !important;
  width: auto !important;
}
body.ho-shell-open:not(.ea-shell-open) .ao-overlay,
body.ho-shell-open:not(.ea-shell-open) .sb-ov,
body.ho-shell-open:not(.ea-shell-open) .cl-modal-back,
body.ho-shell-open:not(.ea-shell-open) .sb-detail-host.sb-dc-open{
  /* Floating setup card: rail + left/right insets */
  left: calc(var(--ho-rail, 360px) + (var(--ho-inset, 12px) * 2)) !important;
  right: 0 !important;
  width: auto !important;
}
body.ho-shell-open.ea-shell-open .ao-overlay,
body.ho-shell-open.ea-shell-open .sb-ov,
body.ho-shell-open.ea-shell-open .cl-modal-back,
body.ho-shell-open.ea-shell-open .sb-detail-host.sb-dc-open,
body.ho-ea-sidebyside.ea-shell-open .ao-overlay,
body.ho-ea-sidebyside.ea-shell-open .sb-ov,
body.ho-ea-sidebyside.ea-shell-open .cl-modal-back,
body.ho-ea-sidebyside.ea-shell-open .sb-detail-host.sb-dc-open{
  /* setup inset + rail + gap + EA rail + trailing gap */
  left: calc(var(--ho-inset, 12px) + var(--ho-rail, 360px) + 10px + var(--ea-rail, 360px) + 12px) !important;
  right: 0 !important;
  width: auto !important;
}
@media (max-width: 900px){
  /* Mobile EA is a bottom sheet (rail width → 0); keep full-bleed scrims. */
  body.ea-shell-open .ao-overlay,
  body.ea-shell-open .sb-ov,
  body.ea-shell-open .cl-modal-back,
  body.ea-shell-open .sb-detail-host.sb-dc-open,
  body.ho-shell-open .ao-overlay,
  body.ho-shell-open .sb-ov,
  body.ho-shell-open .cl-modal-back,
  body.ho-shell-open .sb-detail-host.sb-dc-open,
  body.ho-shell-open.ea-shell-open .ao-overlay,
  body.ho-shell-open.ea-shell-open .sb-ov,
  body.ho-shell-open.ea-shell-open .cl-modal-back,
  body.ho-shell-open.ea-shell-open .sb-detail-host.sb-dc-open,
  body.ho-ea-sidebyside.ea-shell-open .ao-overlay,
  body.ho-ea-sidebyside.ea-shell-open .sb-detail-host.sb-dc-open{
    left: 0 !important;
  }
}

/* When EA rail is open, tighten the tabbar so labels + identity chip all fit
   inside the narrowed .wrap without clipping the account email mid-character. */
body.ea-shell-open .tabbar{
  gap: 2px;
  padding-left: 3px;
  padding-right: 3px;
}
body.ea-shell-open .tabbar > .tab:not(.tab-whoami):not(.tab-signout){
  padding-left: 8px;
  padding-right: 8px;
  font-size: 13px;
}
body.ea-shell-open .tab.tab-whoami{
  max-width: min(180px, 28%);
  padding-left: 9px;
  padding-right: 10px;
  gap: 6px;
}
body.ea-shell-open .tab.tab-signout{
  padding-left: 8px;
  padding-right: 10px;
  font-size: 12px;
}
body.ea-shell-open #tabbar .tab.ea-tab{
  padding-left: 10px;
  padding-right: 10px;
}

/* ── Beside hands-off setup (step 17 Open Energy Agent) ────────────────────
   Setup is a floating glass card (inset); EA is an identical companion to its
   RIGHT — same radius, edge, shadow (Ford 2026-07-16 design match). */
body.ho-shell-open.ea-shell-open #eaPanel,
body.ho-ea-sidebyside.ea-shell-open #eaPanel{
  left: calc(var(--ho-inset, 12px) + var(--ho-rail, 360px) + 10px);
  top: 12px;
  bottom: 12px;
  height: auto;
  width: min(var(--ea-rail), calc(100vw - var(--ho-rail, 360px) - (var(--ho-inset, 12px) * 2) - 28px));
  max-width: min(380px, calc(100vw - var(--ho-rail, 360px) - (var(--ho-inset, 12px) * 2) - 28px));
  border-radius: 18px;
  border: 1px solid rgba(14,165,233,.2);
  box-shadow:
    0 20px 50px -20px rgba(15,40,80,.4),
    0 0 0 1px rgba(255,255,255,.5) inset;
  z-index: 99968; /* under/over site; setup sheet stays visible on the left */
}
html.sky body.ho-shell-open.ea-shell-open #eaPanel,
html.sky body.ho-ea-sidebyside.ea-shell-open #eaPanel{
  border-color: rgba(33,150,243,.22);
  box-shadow:
    0 22px 56px -18px rgba(20,60,120,.38),
    0 0 0 1px rgba(255,255,255,.55) inset;
}
/* Main content clears BOTH floating cards. This side-by-side combo positions via
   margin-left, so cancel the EA-only transform re-center or it would double-shift. */
body.ho-shell-open.ea-shell-open > .wrap{
  margin-left: calc(var(--ho-inset, 12px) + var(--ho-rail, 360px) + 10px + var(--ea-rail) + 12px);
  max-width: calc(100vw - var(--ho-inset, 12px) - var(--ho-rail, 360px) - 10px - var(--ea-rail) - 12px);
  min-width: 0;
  transform: none;
}
/* Mic gate sits above the companion panel */
body.ho-shell-open.ea-shell-open .ea-mic-gate{
  left: calc(var(--ho-inset, 12px) + var(--ho-rail, 360px) + 10px + var(--ea-rail) + 16px);
}
@media (max-width: 900px){
  /* Narrow: keep EA as bottom sheet / default mobile; don't stack two rails */
  body.ho-shell-open.ea-shell-open #eaPanel,
  body.ho-ea-sidebyside.ea-shell-open #eaPanel{
    left: 0; top: 0; bottom: 0;
    width: var(--ea-rail);
    max-width: min(var(--ea-rail), 92vw);
    border-radius: 0;
    height: auto;
  }
  body.ho-shell-open.ea-shell-open > .wrap{
    margin-left: 0;
  }
}

/* ══ Repairs dual-pane (body.ea-on-ops + ea-shell-open) ═════════════════════
   When Energy Agent is open on Repairs:

   · Full-width top tabbar (no .wrap side-shift)
   · Chat card tucked under the tabbar
   · Chat LEFT edge lines up with the Energy Agent top-tab (leftmost control)
   · Repairs fills the column to the right

   Geometry uses the SAME transition list as the regular rail so toggling
   ea-on-ops morphs width/left/top/wrap-margin — never snaps. Desktop ≥961px. */
@media (min-width: 961px){
  /* Set geometry vars whenever we're on Repairs (even if EA closed) so opening
     the agent already targets dual-pane dimensions — one smooth entrance. */
  body.ea-on-ops:not(.ho-shell-open):not(.ho-ea-sidebyside){
    --ea-rail: min(560px, 42vw);
    --ea-ops-wrap-max: min(1680px, calc(100vw - 24px));
    /* CSS-first align: centered wrap left + .wrap pad (28) + sky tabbar pad (6).
       JS may refine with the live EA tab getBoundingClientRect after settle. */
    --ea-ops-left: calc((100vw - var(--ea-ops-wrap-max)) / 2 + 28px + 6px);
    --ea-ops-top: 88px;
    --ea-ops-content-pad: calc(var(--ea-rail) + 18px);
    /* Content inset for overlays / mic follows the wide rail while on ops */
    --ea-content-inset: calc(var(--ea-ops-left) + var(--ea-rail) + var(--ea-content-gap));
  }
  @media (min-width: 1280px){
    body.ea-on-ops:not(.ho-shell-open):not(.ho-ea-sidebyside){
      --ea-rail: min(640px, 46vw);
    }
  }

  /* Full-bleed chrome: center via GPU translate (same property as packed mode
     so the shell morphs at compositor rate, not layout rate). */
  body.ea-shell-open.ea-on-ops:not(.ho-shell-open):not(.ho-ea-sidebyside) > .wrap{
    max-width: var(--ea-ops-wrap-max) !important;
    width: 100%;
    margin-left: 0 !important;
    margin-right: auto !important;
    transform: translate3d(calc((100vw - var(--ea-ops-wrap-max)) / 2), 0, 0) !important;
  }

  /* Wide chat card: under the tabbar; left edge = Energy Agent top-tab.
     left/top/width transition on the panel layer (blur off while morphing). */
  body.ea-shell-open.ea-on-ops:not(.ho-shell-open):not(.ho-ea-sidebyside) #eaPanel{
    top: var(--ea-ops-top);
    left: var(--ea-ops-left);
    bottom: var(--ea-gap);
    width: var(--ea-rail);
    max-width: min(var(--ea-rail), calc(100vw - var(--ea-ops-left) - var(--ea-gap)));
  }

  /* Repairs column — pad set instantly (no margin transition → no page reflow) */
  body.ea-shell-open.ea-on-ops:not(.ho-shell-open):not(.ho-ea-sidebyside) #panelOps.active{
    margin-left: var(--ea-ops-content-pad);
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
  }
  body.ea-shell-open.ea-on-ops:not(.ho-shell-open):not(.ho-ea-sidebyside) #panelOps .rp-shell{
    max-width: min(1000px, 100%);
    margin-left: 4px;
    margin-right: auto;
    margin-top: 12px;
  }

  /* Mic gate parks above the wide rail (inherits left/top transition) */
  body.ea-shell-open.ea-on-ops:not(.ho-shell-open):not(.ho-ea-sidebyside) .ea-mic-gate{
    left: calc(var(--ea-ops-left) + var(--ea-rail) + 16px);
    top: calc(var(--ea-ops-top) + 8px);
  }

  /* Dialogs center in the repairs column only */
  body.ea-shell-open.ea-on-ops:not(.ho-shell-open):not(.ho-ea-sidebyside) .ao-overlay,
  body.ea-shell-open.ea-on-ops:not(.ho-shell-open):not(.ho-ea-sidebyside) .sb-ov,
  body.ea-shell-open.ea-on-ops:not(.ho-shell-open):not(.ho-ea-sidebyside) .cl-modal-back,
  body.ea-shell-open.ea-on-ops:not(.ho-shell-open):not(.ho-ea-sidebyside) .sb-detail-host.sb-dc-open{
    left: calc(var(--ea-ops-left) + var(--ea-rail) + 12px) !important;
    top: var(--ea-ops-top) !important;
  }
}

/* ── Panel internals ─────────────────────────────────────────────────────── */
#eaRoot{ font-family: inherit; color: var(--ink, #0f172a); }
#eaRoot *{ box-sizing: border-box; }

.ea-head{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 16px 16px 12px; border-bottom: 1px solid rgba(14,165,233,.14);
  flex: 0 0 auto;
  position: relative;
  z-index: 4; /* keep × above msgs/overlays */
}
.ea-head h3{ margin: 0; font-size: 15px; font-weight: 760; letter-spacing: -.01em; }
.ea-head p{ margin: 3px 0 0; font-size: 11.5px; color: var(--muted,#64748b); line-height: 1.35; max-width: 28ch; }
.ea-x{
  border: 0; background: transparent; color: var(--muted,#64748b); font-size: 20px;
  cursor: pointer; line-height: 1; padding: 0;
  /* Comfortable 36×36 hit target so the × is easy to press (Ford 2026-07-21) */
  min-width: 36px; min-height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  position: relative;
  z-index: 5; /* above head chrome / tour cap */
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.ea-x:hover{ background: rgba(14,165,233,.08); color: var(--ink); }
.ea-x:active{ background: rgba(14,165,233,.14); }

.ea-status{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 16px; font-size: 11.5px; color: var(--muted,#64748b);
  border-bottom: 1px solid rgba(14,165,233,.1);
  flex: 0 0 auto;
}
/* Docked above the compose bar — status + Pro meter on row 1; mind chip alone on row 2
   so it never floats over the Pro badge (Ford visual glitch 2026-07-16). */
.ea-status.ea-status-dock{
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid rgba(14,165,233,.16);
  border-bottom: 1px solid rgba(14,165,233,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  position: relative;
  z-index: 2;
  overflow: hidden; /* contain chips — no floating over compose */
}
html:not(.sky) .ea-status.ea-status-dock{
  background: rgba(11,18,32,.72);
  border-color: rgba(255,255,255,.1);
  box-shadow: none;
}
.ea-status.ea-status-dock .ea-dot{ order: 1; }
.ea-status.ea-status-dock #eaStatusText{
  order: 2;
  font-weight: 650;
  color: var(--ink, #0f172a);
  min-width: 0;
  flex: 1 1 auto;
}
html:not(.sky) .ea-status.ea-status-dock #eaStatusText{ color: var(--ink, #e8eef7); }
.ea-status.ea-status-dock .ea-budget{
  order: 3;
  margin-left: auto;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}
/* Mind chip always on its own full-width row under status — never collides with Pro */
.ea-status.ea-status-dock .ea-mind{
  order: 4;
  flex: 1 1 100%;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
}
.ea-dot{
  width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; flex: 0 0 auto;
}
.ea-dot.on{ background: var(--ea-sky2); box-shadow: 0 0 0 3px rgba(14,165,233,.18); }
.ea-dot.warn{ background: #f59e0b; }

/* Operating mind — subtle "still thinking" chip (not an agent roster) */
.ea-mind{
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--ea-sky2, #0ea5e9);
  background: rgba(14,165,233,.08);
  border: 1px solid rgba(14,165,233,.18);
  border-radius: 99px;
  padding: 2px 8px 2px 6px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ea-mind[hidden],
.ea-mind:not(.on){ display: none !important; }
.ea-mind.on{ display: inline-flex !important; }
.ea-mind-pulse{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ea-sky2, #0ea5e9);
  box-shadow: 0 0 0 0 rgba(14,165,233,.45);
  animation: eaMindPulse 1.6s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes eaMindPulse{
  0%{ box-shadow: 0 0 0 0 rgba(14,165,233,.45); opacity: 1; }
  70%{ box-shadow: 0 0 0 6px rgba(14,165,233,0); opacity: .85; }
  100%{ box-shadow: 0 0 0 0 rgba(14,165,233,0); opacity: 1; }
}
/* Generic mind awareness is status-chip only (Ford 2026-07-14).
   Exception: repair email surface (data-origin=repair) — chat ⇄ mailbox is one
   continuous mind, so those bubbles MUST show. Sovereign = deep-blue below. */
.ea-msg.agent.mind-update{ display: none !important; }
.ea-msg.agent.mind-update[data-origin="repair"],
.ea-msg.agent.repair-email{
  display: block !important;
  border-color: rgba(14, 165, 233, .28);
  background: linear-gradient(165deg, rgba(14,165,233,.10), rgba(14,165,233,.04));
  font-size: 13px;
  line-height: 1.45;
}
.ea-msg.agent.repair-email .ea-email-label,
.ea-msg.agent.mind-update[data-origin="repair"] .ea-email-label{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #0284c7;
  margin: 0 0 .35em;
  opacity: .9;
}
html:not(.sky) .ea-msg.agent.repair-email,
html:not(.sky) .ea-msg.agent.mind-update[data-origin="repair"]{
  background: linear-gradient(165deg, rgba(14,165,233,.12), rgba(14,165,233,.04));
  border-color: rgba(125, 211, 252, .22);
}
html:not(.sky) .ea-msg.agent.repair-email .ea-email-label,
html:not(.sky) .ea-msg.agent.mind-update[data-origin="repair"] .ea-email-label{
  color: #7dd3fc;
}
/* ── Next-step chips after each agent reply ────────────────────────────────
   Owner clicks one → sent as their next message; typing still works. */
.ea-next-steps{
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: flex-start;
  margin: -2px 0 12px 2px;
  max-width: 96%;
  animation: ea-next-in .22s ease-out;
}
@keyframes ea-next-in{
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.ea-next-steps-lbl{
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint, #94a3b8);
  padding-left: 2px;
}
.ea-next-steps-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ea-next-chip{
  appearance: none;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(14,165,233,.28);
  background: rgba(255,255,255,.88);
  color: var(--ink, #0f172a);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.25;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset;
  transition: border-color .12s, background .12s, transform .08s, box-shadow .12s;
}
.ea-next-chip:hover{
  border-color: rgba(14,165,233,.5);
  background: rgba(224,242,254,.95);
  box-shadow: 0 4px 14px -8px rgba(14,60,120,.35);
}
.ea-next-chip:active,
.ea-next-chip.ea-next-picked{
  transform: translateY(1px);
  background: rgba(186,230,253,.98);
  border-color: rgba(14,165,233,.55);
}
.ea-next-chip:disabled{
  opacity: .7;
  cursor: default;
}
html:not(.sky) .ea-next-steps-lbl{ color: #64748b; }
html:not(.sky) .ea-next-chip{
  background: rgba(255,255,255,.06);
  border-color: rgba(56,189,248,.28);
  color: #e2e8f0;
  box-shadow: none;
}
html:not(.sky) .ea-next-chip:hover{
  background: rgba(56,189,248,.14);
  border-color: rgba(56,189,248,.45);
  color: #f8fafc;
}
html:not(.sky) .ea-next-chip:active,
html:not(.sky) .ea-next-chip.ea-next-picked{
  background: rgba(56,189,248,.22);
}
@media (prefers-reduced-motion: reduce){
  .ea-next-steps{ animation: none; }
}

/* Sovereign action chips stay visible under the product-mind bubble */
.ea-mind-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: flex-start;
  margin: -4px 0 8px 2px;
  max-width: 94%;
}
.ea-mind-act{
  appearance: none;
  border: 1px solid rgba(15, 50, 120, .28);
  background: rgba(15, 50, 120, .06);
  color: #0a2a6e;
  font: 650 11.5px/1.2 inherit;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
}
.ea-mind-act.yes{
  border-color: rgba(15, 50, 120, .4);
  background: linear-gradient(180deg, #1a4db8, #0d2f8a);
  color: #fff;
}
.ea-mind-act.no{ opacity: .9; }
.ea-mind-act:hover{ filter: brightness(1.05); }
html:not(.sky) .ea-mind-act{
  color: #c7d7ff;
  border-color: rgba(120, 160, 255, .35);
  background: rgba(40, 70, 140, .25);
}
html:not(.sky) .ea-mind-act.yes{
  color: #fff;
  background: linear-gradient(180deg, #3b6fe0, #1e4bb8);
}

/* ── Sovereign / product-mind bubble (deep blue) ───────────────────────────
   Distinct from normal agent (slate glass) and user (sky gradient) so owners
   immediately see when the product executive mind is speaking in their chat. */
.ea-msg.agent.sovereign{
  align-self: flex-start;
  color: #061536 !important;                 /* deep navy text */
  background:
    linear-gradient(165deg, rgba(230, 240, 255, .97), rgba(200, 220, 255, .94)) !important;
  border: 1.5px solid rgba(12, 48, 120, .42) !important;
  border-left: 4px solid #0a2a6e !important;
  border-bottom-left-radius: 5px;
  box-shadow:
    0 8px 22px -14px rgba(10, 40, 110, .45),
    inset 0 1px 0 rgba(255, 255, 255, .65);
  max-width: 96%;
}
.ea-msg.agent.sovereign .ea-sov-label{
  display: block;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0a2a6e;
  margin: 0 0 6px;
  opacity: .92;
}
.ea-msg.agent.sovereign .ea-sov-body{
  color: #061536;
  font-weight: 520;
}
.ea-msg.agent.sovereign .ea-sov-body strong,
.ea-msg.agent.sovereign .ea-sov-body b{
  color: #04102e !important;
  font-weight: 780;
}
.ea-msg.agent.sovereign .ea-ul li::marker{ color: #0a2a6e; }
.ea-msg.agent.sovereign a{ color: #0d3d9c; font-weight: 700; }

/* Dark (non-sky) shell */
html:not(.sky) .ea-msg.agent.sovereign{
  color: #d6e4ff !important;
  background: linear-gradient(165deg, rgba(18, 40, 90, .92), rgba(10, 24, 56, .95)) !important;
  border-color: rgba(100, 150, 255, .4) !important;
  border-left-color: #5b8dff !important;
  box-shadow: 0 10px 28px -16px rgba(0, 0, 0, .55);
}
html:not(.sky) .ea-msg.agent.sovereign .ea-sov-label{ color: #8eb4ff; }
html:not(.sky) .ea-msg.agent.sovereign .ea-sov-body{ color: #dce8ff; }
html:not(.sky) .ea-msg.agent.sovereign .ea-sov-body strong,
html:not(.sky) .ea-msg.agent.sovereign .ea-sov-body b{ color: #fff !important; }

/* Status chip tint when product mind is active */
.ea-status.sov .ea-dot,
#eaStatus.sov .ea-dot{
  background: #0a2a6e !important;
  box-shadow: 0 0 0 3px rgba(10, 42, 110, .2) !important;
}

/* Weekly AI usage meter — fills 0→100% toward the $5 thinking+voice cap */
.ea-budget{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.ea-usage{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 140px;
  cursor: default;
  user-select: none;
}
.ea-usage-label{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted,#64748b);
  flex: 0 0 auto;
}
.ea-usage-track{
  position: relative;
  display: block;
  width: 72px;
  height: 6px;
  border-radius: 99px;
  background: rgba(14,165,233,.12);
  box-shadow: inset 0 0 0 1px rgba(14,165,233,.14);
  overflow: hidden;
  flex: 0 0 auto;
}
.ea-usage-fill{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #38bdf8, #0ea5e9 55%, #0284c7);
  box-shadow: 0 0 8px rgba(14,165,233,.35);
  transition: width .45s cubic-bezier(.2,.8,.2,1), background .3s ease;
}
.ea-usage-warn .ea-usage-fill{
  background: linear-gradient(90deg, #fbbf24, #f59e0b 60%, #d97706);
  box-shadow: 0 0 8px rgba(245,158,11,.35);
}
.ea-usage-warn .ea-usage-label{ color: #b45309; }
.ea-usage-full .ea-usage-fill{
  background: linear-gradient(90deg, #f87171, #ef4444 55%, #dc2626);
  box-shadow: 0 0 8px rgba(239,68,68,.35);
}
.ea-usage-full .ea-usage-label{ color: #b91c1c; }
.ea-usage-full .ea-usage-track{
  background: rgba(239,68,68,.12);
  box-shadow: inset 0 0 0 1px rgba(239,68,68,.18);
}
/* Exhausted: pulse the red fill so "out of credits" is unmistakable */
.ea-budget-exhausted .ea-usage-fill,
.ea-usage-full .ea-usage-fill{
  animation: eaBudgetPulse 1.6s ease-in-out infinite;
}
@keyframes eaBudgetPulse{
  0%, 100%{ opacity: 1; filter: brightness(1); }
  50%{ opacity: .85; filter: brightness(1.15); }
}
.ea-budget-exhausted .ea-usage-label{
  font-weight: 800;
  letter-spacing: .04em;
}

.ea-tools{
  /* Keep tool dump short so the conversation stays the scroll surface */
  max-height: 72px; overflow: auto; padding: 8px 14px;
  border-bottom: 1px solid rgba(14,165,233,.1);
  background: rgba(14,165,233,.04);
  font-size: 11px; color: var(--muted,#64748b);
  flex: 0 0 auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(14,165,233,.22) transparent;
}
.ea-tools:empty,
.ea-tools[hidden]{ display: none !important; }
.ea-tools::-webkit-scrollbar{ width: 5px; }
.ea-tools::-webkit-scrollbar-thumb{ background: rgba(14,165,233,.2); border-radius: 99px; }
.ea-tool{
  display: flex; gap: 6px; padding: 3px 0; font-variant-numeric: tabular-nums;
}
.ea-tool b{ color: var(--ink); font-weight: 700; flex: 0 0 auto; }
.ea-tool code{ font-size: 10.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mobile + AI home: never show raw tool dumps — answer is the product */
@media (max-width: 960px){
  #eaTools.ea-tools,
  .ea-tools{ display: none !important; max-height: 0 !important; padding: 0 !important; border: 0 !important; }
}
body.mh-os #eaTools,
body.mh-os .ea-tools{
  display: none !important;
}

.ea-msgs{
  flex: 1 1 auto;
  min-height: 140px; /* never collapse to a single bubble */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 14px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Thin, unobtrusive scrollbar (Firefox + WebKit) */
  scrollbar-width: thin;
  scrollbar-color: rgba(14,165,233,.28) transparent;
}
.ea-msgs::-webkit-scrollbar{ width: 6px; }
.ea-msgs::-webkit-scrollbar-track{ background: transparent; margin: 6px 0; }
.ea-msgs::-webkit-scrollbar-thumb{
  background: rgba(14,165,233,.22);
  border-radius: 99px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
.ea-msgs::-webkit-scrollbar-thumb:hover{ background: rgba(14,165,233,.4); }
/* History bubbles slightly quieter so live turns read as "now" */
.ea-msg.history{ opacity: .92; }

/* Live tour caption — one sticky line instead of spamming chat bubbles */
.ea-tour-cap{
  flex: 0 0 auto;
  margin: 0 12px 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(14,165,233,.22);
  background: linear-gradient(180deg, rgba(14,165,233,.1), rgba(14,165,233,.05));
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink, #0f172a);
  box-shadow: 0 6px 16px -12px rgba(14,60,120,.35);
}
.ea-tour-cap[hidden]{ display: none !important; }
.ea-tour-cap b{ font-weight: 760; }
.ea-tour-cap .ea-tour-kicker{
  display: block; font-size: 10.5px; font-weight: 720; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ea-sky2); margin-bottom: 3px;
}
.ea-msg{
  max-width: 94%; font-size: 13px; line-height: 1.5;
  /* right 26px always reserves the copy-icon corner — no hover reflow */
  padding: 10px 26px 10px 13px; border-radius: 14px;
  letter-spacing: -.005em;
  position: relative;
}
.ea-msg.user{
  align-self: flex-end; background: linear-gradient(180deg, var(--ea-sky), var(--ea-sky2));
  color: #fff; border-bottom-right-radius: 5px;
}
.ea-msg.agent{
  align-self: flex-start; background: rgba(15,23,42,.04); border: 1px solid rgba(14,165,233,.12);
  border-bottom-left-radius: 5px;
}
html:not(.sky) .ea-msg.agent{ background: rgba(255,255,255,.04); border-color: var(--line); }

/* ── Spoken conclusion block ───────────────────────────────────────────────
   The tight line the Energy Agent narrates aloud, lifted above the panel
   detail so owners see "what was said" vs the backup numbers/evidence. */
.ea-spoken-block{
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(14,165,233,.22);
  border-left: 3px solid var(--ea-sky2, #0284c7);
  background: linear-gradient(180deg, rgba(14,165,233,.10), rgba(14,165,233,.045));
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink, #0f172a);
}
.ea-spoken-block .ea-spoken-ic{
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1.35;
  opacity: .9;
}
.ea-spoken-block .ea-spoken-text{ flex: 1 1 auto; }
html:not(.sky) .ea-spoken-block{
  border-color: rgba(100,150,255,.32);
  border-left-color: #5b8dff;
  background: linear-gradient(180deg, rgba(80,130,255,.16), rgba(80,130,255,.07));
  color: #dce8ff;
}

/* Tiny corner copy control (icon only) — absolute, never shifts text */
.ea-msg .chat-msg-copy{
  appearance: none;
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  border-radius: 5px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.55);
  color: #64748b;
  font: inherit;
  cursor: pointer;
  opacity: 0;
  pointer-events: none; /* invisible = no hit target, no layout fight */
  transition: opacity .12s, background .12s, border-color .12s, color .12s;
  box-sizing: border-box;
  line-height: 0;
}
.ea-msg:hover .chat-msg-copy,
.ea-msg:focus-within .chat-msg-copy,
.ea-msg .chat-msg-copy:focus-visible{
  opacity: .85;
  pointer-events: auto;
}
.ea-msg .chat-msg-copy:hover{
  opacity: 1;
  pointer-events: auto;
  background: rgba(255,255,255,.95);
  border-color: rgba(14,165,233,.35);
  color: #0369a1;
}
.ea-msg .chat-msg-copy svg{
  display: block;
  width: 10px;
  height: 10px;
  flex: none;
}
/* Label hidden — icon-only; aria-label stays for a11y */
.ea-msg .chat-msg-copy .chat-msg-copy-lbl{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ea-msg .chat-msg-copy.copied{
  opacity: 1;
  background: linear-gradient(180deg, var(--ea-sky), var(--ea-sky2));
  border-color: transparent;
  color: #fff;
}
.ea-msg .chat-msg-copy.copy-fail{
  opacity: 1;
  border-color: rgba(255,107,107,.5);
  color: #ff6b6b;
}
.ea-msg.user .chat-msg-copy{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.85);
}
.ea-msg.user .chat-msg-copy:hover{
  background: rgba(255,255,255,.3);
  color: #fff;
  opacity: 1;
}
.ea-msg.user .chat-msg-copy.copied{
  background: #fff;
  color: #0369a1;
}
/* Body fills the bubble; corner gutter lives on .ea-msg padding (stable on hover) */
.ea-msg .ea-msg-body,
.ea-msg .ea-sov-body,
.ea-msg .ea-email-body{
  padding-right: 0;
}

.ea-chip-ic-svg{
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  flex: 0 0 14px;
  line-height: 0;
  overflow: visible;
}
.ea-chip-ic-svg svg{
  display: block;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  flex: none;
  overflow: visible;
}

/* Markdown inside bubbles — scannable structure (lists, headings, spacing) */
.ea-msg{
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.ea-msg .ea-p{ margin: 0 0 .5em; }
.ea-msg .ea-p:last-child{ margin-bottom: 0; }
.ea-msg .ea-sp{ height: .55em; }
.ea-msg strong, .ea-msg b{
  font-weight: 760; letter-spacing: -.01em;
  color: inherit;
}
.ea-msg.agent strong, .ea-msg.agent b{ color: var(--ink, #0f172a); }
html:not(.sky) .ea-msg.agent strong, html:not(.sky) .ea-msg.agent b{ color: #f1f5f9; }
.ea-msg.user strong, .ea-msg.user b{ color: #fff; font-weight: 780; }
.ea-msg em{ font-style: italic; opacity: .95; }
.ea-msg .ea-h{
  font-weight: 780; letter-spacing: -.015em; margin: .55em 0 .28em; line-height: 1.3;
}
.ea-msg .ea-h1{ font-size: 1.08em; }
.ea-msg .ea-h2{ font-size: 1.04em; }
.ea-msg .ea-h3, .ea-msg .ea-h4, .ea-msg .ea-h5, .ea-msg .ea-h6{ font-size: 1em; }
.ea-msg .ea-h:first-child{ margin-top: 0; }
.ea-msg .ea-ul, .ea-msg .ea-ol{
  margin: .2em 0 .55em; padding-left: 1.25em;
}
.ea-msg .ea-ul{ list-style: disc; }
.ea-msg .ea-ol{ list-style: decimal; }
.ea-msg .ea-ul.ea-nested, .ea-msg .ea-ol.ea-nested{
  margin: .15em 0 .2em; padding-left: 1.1em;
}
.ea-msg .ea-ul.ea-nested{ list-style: circle; }
.ea-msg .ea-ul li, .ea-msg .ea-ol li{
  margin: .28em 0; padding-left: .2em;
  line-height: 1.4;
}
.ea-msg .ea-ul li::marker{ color: var(--ea-sky2); font-weight: 700; }
.ea-msg .ea-ol li::marker{ color: var(--ea-sky2); font-weight: 700; }
.ea-msg.user .ea-ul li::marker,
.ea-msg.user .ea-ol li::marker{ color: rgba(255,255,255,.85); }
.ea-msg .ea-quote{
  margin: .35em 0 .5em;
  padding: .35em .65em;
  border-left: 3px solid rgba(14,165,233,.45);
  background: rgba(14,165,233,.06);
  border-radius: 0 8px 8px 0;
  font-size: .97em;
  opacity: .95;
}
html:not(.sky) .ea-msg .ea-quote{
  border-left-color: rgba(56,189,248,.5);
  background: rgba(56,189,248,.08);
}
.ea-msg .ea-hr{
  border: 0;
  border-top: 1px solid rgba(14,165,233,.18);
  margin: .55em 0;
}
html:not(.sky) .ea-msg .ea-hr{ border-top-color: rgba(255,255,255,.12); }
.ea-msg .ea-icode{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em; font-weight: 600;
  padding: .08em .35em; border-radius: 5px;
  background: rgba(14,165,233,.1); color: #0369a1;
}
.ea-msg.user .ea-icode{
  background: rgba(255,255,255,.2); color: #fff;
}
html:not(.sky) .ea-msg.agent .ea-icode{
  background: rgba(56,189,248,.12); color: #7dd3fc;
}
.ea-msg .ea-code{
  display: block; margin: .45em 0; padding: 8px 10px; border-radius: 10px;
  overflow: auto; max-height: 180px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.4;
  background: rgba(15,23,42,.06); border: 1px solid rgba(14,165,233,.12);
  white-space: pre-wrap; word-break: break-word;
}
html:not(.sky) .ea-msg .ea-code{
  background: rgba(0,0,0,.35); border-color: var(--line);
}
.ea-msg .ea-code code{ font: inherit; background: none; padding: 0; }
.ea-msg .ea-link{
  color: var(--ea-sky2); font-weight: 650; text-decoration: underline;
  text-underline-offset: 2px;
}
.ea-msg.user .ea-link{ color: #fff; }
.ea-msg a.ea-link:hover{ opacity: .85; }

.ea-pending{
  margin: 0 14px 8px; padding: 10px 12px; border-radius: 12px;
  background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35);
  font-size: 12.5px; line-height: 1.4;
  flex: 0 0 auto;
}
.ea-pending[hidden]{ display: none !important; }
.ea-pending-actions{ display: flex; gap: 8px; margin-top: 8px; }
.ea-pending-actions button{
  font: inherit; font-size: 12px; font-weight: 720; padding: 7px 12px; border-radius: 9px;
  border: 0; cursor: pointer;
}
.ea-yes{ background: var(--ea-sky2); color: #fff; }
.ea-no{ background: transparent; border: 1px solid rgba(15,23,42,.12) !important; color: var(--ink); }

/* ── Footer: status dock + raised glass composer ────────────────────────── */
.ea-footer{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0 10px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(248,251,255,.92) 28%, rgba(248,251,255,.98) 100%);
  border-top: 1px solid rgba(14,165,233,.1);
  /* Lift the input off the absolute bottom so it reads as a toolbar, not a footer scrap */
  margin-top: 0;
  padding-top: 10px;
  box-shadow: 0 -16px 28px -22px rgba(14,60,120,.18);
  z-index: 2;
  min-width: 0;
}
html:not(.sky) .ea-footer{
  background: linear-gradient(180deg, transparent 0%, rgba(11,18,32,.92) 30%, rgba(11,18,32,.98) 100%);
  border-top-color: var(--line, rgba(255,255,255,.08));
  box-shadow: 0 -16px 28px -18px rgba(0,0,0,.45);
}

.ea-compose{
  display: block;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
}

/* ── Suggested prompts — Railway-style dual marquee ────────────────────────
   Two rows, opposite directions (RTL + LTR) so chips gear past each other.
   Each track holds two identical sets; animate -50% for a seamless loop. */
.ea-suggestions{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 10px;
  overflow: hidden;
  /* side fades so chips dissolve at the rail edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  transition: opacity .2s ease, max-height .25s ease, margin .2s ease;
  max-height: 80px;
}
.ea-suggestions[hidden],
.ea-suggestions.ea-suggestions-gone{
  display: none !important;
  max-height: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.ea-sug-row{
  overflow: hidden;
  width: 100%;
  min-height: 28px;
}
.ea-sug-track{
  display: flex;
  width: max-content;
  will-change: transform;
}
/* slow continuous drift — opposite dirs gear past each other; durations
   offset so rows don't phase-lock */
.ea-sug-row-rtl .ea-sug-track{
  animation: ea-sug-marquee-rtl 48s linear infinite;
}
.ea-sug-row-ltr .ea-sug-track{
  animation: ea-sug-marquee-ltr 56s linear infinite;
}
.ea-sug-set{
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding-right: 6px; /* gap between the two sets in the track */
  flex: 0 0 auto;
}
@keyframes ea-sug-marquee-rtl{
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); } /* one set width left */
}
@keyframes ea-sug-marquee-ltr{
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }    /* one set width right */
}
/* Pause on hover/focus so chips are clickable; also per-row after click */
.ea-suggestions.ea-sug-paused .ea-sug-track,
.ea-sug-row.ea-sug-row-paused .ea-sug-track{
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce){
  .ea-sug-track{
    animation: none !important;
    transform: none !important;
  }
  .ea-suggestions{
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ea-sug-row{ overflow-x: auto; }
  .ea-sug-track{ width: auto; }
  .ea-sug-set:last-child{ display: none; } /* no duplicate when static */
}

.ea-sug{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  margin: 0;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(14,165,233,.18);
  background: rgba(255,255,255,.78);
  color: var(--ink, #0f172a);
  font: inherit;
  font-size: 11.5px;
  font-weight: 620;
  letter-spacing: -.01em;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
  transition: border-color .12s, background .12s, transform .08s, box-shadow .12s;
}
.ea-sug:hover{
  border-color: rgba(14,165,233,.45);
  background: rgba(224,242,254,.95);
  box-shadow: 0 4px 14px -8px rgba(14,60,120,.4);
}
.ea-sug:active,
.ea-sug.ea-sug-fired{
  transform: translateY(1px) scale(.98);
  background: rgba(186,230,253,.98);
  border-color: rgba(14,165,233,.55);
}
.ea-sug-ic{
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  opacity: .85;
}
html:not(.sky) .ea-sug{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: #e2e8f0;
  box-shadow: none;
}
html:not(.sky) .ea-sug:hover{
  background: rgba(56,189,248,.14);
  border-color: rgba(56,189,248,.4);
  color: #f8fafc;
}
html:not(.sky) .ea-sug:active,
html:not(.sky) .ea-sug.ea-sug-fired{
  background: rgba(56,189,248,.22);
}

.ea-compose-shell{
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 16px;
  border: 1px solid rgba(14,165,233,.22);
  background: rgba(255,255,255,.92);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 10px 28px -14px rgba(14,60,120,.28),
    0 0 0 1px rgba(14,165,233,.04);
  /* clip radius without eating the Send chip on a 360px rail */
  overflow: hidden;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.ea-compose-shell:focus-within{
  border-color: rgba(14,165,233,.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 12px 32px -12px rgba(14,165,233,.35),
    0 0 0 3px rgba(14,165,233,.12);
}
html:not(.sky) .ea-compose-shell{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-color: var(--line, rgba(255,255,255,.12));
  box-shadow: 0 10px 28px -14px rgba(0,0,0,.5);
}
html:not(.sky) .ea-compose-shell:focus-within{
  border-color: rgba(56,189,248,.45);
  box-shadow: 0 0 0 3px rgba(56,189,248,.12), 0 12px 32px -12px rgba(0,0,0,.55);
}

.ea-compose textarea,
.ea-compose-shell textarea{
  display: block;
  width: 100%;
  box-sizing: border-box;
  flex: none;
  min-height: 40px;      /* one clean line at rest — grows with content */
  max-height: 120px;
  resize: none;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: -.01em;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  field-sizing: content; /* progressive: grows with content where supported */
  overflow-y: auto;
  scrollbar-width: none; /* no bar at rest; still scrollable once past max-height */
}
.ea-compose textarea::-webkit-scrollbar,
.ea-compose-shell textarea::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}
.ea-compose textarea:focus,
.ea-compose-shell textarea:focus{
  outline: none;
  box-shadow: none;
}
.ea-compose textarea::placeholder{
  color: var(--muted,#94a3b8);
  font-weight: 500;
}

/* Compose action row — icon-only chips + written Send (Ford 2026-07-16).
   Labels were clipping in the narrow EA rail; hover title / aria-label name them. */
.ea-compose-bar{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 6px 8px;
  border-top: 1px solid rgba(14,165,233,.08);
  background: linear-gradient(180deg, rgba(14,165,233,.03), rgba(14,165,233,.06));
  min-width: 0;
  box-sizing: border-box;
}
html:not(.sky) .ea-compose-bar{
  border-top-color: rgba(255,255,255,.06);
  background: rgba(0,0,0,.15);
}
/* Push Send to the trailing edge */
.ea-compose-spacer{
  display: block !important;
  flex: 1 1 auto;
  min-width: 4px;
  height: 1px;
}

/* Shared geometry for bar controls */
.ea-compose-bar > .ea-chip,
.ea-compose-bar > .ea-send{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 720;
  letter-spacing: -.015em;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  transition: background .12s, border-color .12s, color .12s, filter .12s, box-shadow .12s, transform .1s;
}

/* Icon-only chips — fixed square, never crush text (text is hidden) */
.ea-compose-bar > .ea-chip.ea-chip-icon,
.ea-compose-bar > .ea-chip{
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  padding: 0;
}
/* Visually hide labels; keep in DOM for syncMicBtn/syncMuteBtn state text */
.ea-compose-bar > .ea-chip .ea-chip-lbl{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Quiet chip buttons (Attach / Improve / Mic / Mute) */
.ea-chip{
  border: 1px solid rgba(14,165,233,.18);
  background: rgba(255,255,255,.75);
  color: #0c4a6e;
  position: relative;
}
.ea-chip:hover{
  background: #fff;
  border-color: rgba(14,165,233,.35);
  transform: translateY(-0.5px);
}
.ea-chip:active{ transform: translateY(0); }
.ea-chip-ic{
  font-size: 14px;
  line-height: 1;
  opacity: .95;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ea-compose-bar > .ea-chip .ea-chip-ic,
.ea-compose-bar > .ea-chip .ea-chip-ic-svg{
  flex: 0 0 16px;
  width: 16px;
  min-width: 16px;
  height: 16px;
}
html:not(.sky) .ea-chip{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: #e2e8f0;
}
html:not(.sky) .ea-chip:hover{ background: rgba(255,255,255,.1); }

.ea-chip.ea-mic.on{
  background: linear-gradient(180deg, #f87171, #ef4444);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(239,68,68,.55);
}
.ea-chip.ea-mic.on:hover{ filter: brightness(1.05); }

/* Speaker mute — agent voice off (text chat still works) */
.ea-chip.ea-mute.on{
  background: linear-gradient(180deg, #64748b, #475569);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(71,85,105,.45);
}
.ea-chip.ea-mute.on:hover{ filter: brightness(1.06); }

/* Primary send — keeps written "Send" label; grows to fill remaining rail */
.ea-compose-bar > .ea-send,
.ea-send{
  flex: 0 0 auto;
  min-width: 76px;
  padding: 0 14px 0 16px;
  border: 0;
  background: linear-gradient(180deg, #38bdf8, #0ea5e9);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(14,165,233,.55);
}
.ea-send:hover{
  filter: brightness(1.05);
  box-shadow: 0 6px 14px -4px rgba(14,165,233,.65);
  transform: translateY(-0.5px);
}
.ea-send:active{ transform: translateY(0); filter: brightness(.98); }
.ea-send-ic{
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  font-size: 11px; font-weight: 800; line-height: 1;
  flex: none;
}
.ea-send-lbl{ line-height: 1; flex: 0 0 auto; }

/* Legacy class hooks (no-op if unused) */
.ea-mic{ /* mic styling lives on .ea-chip.ea-mic */ }

/* Attachment strip above composer */
.ea-attach-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 4px 8px;
  flex: 0 0 auto;
}
.ea-attach-row[hidden]{ display: none !important; }
.ea-attach-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  background: rgba(14,165,233,.1);
  border: 1px solid rgba(14,165,233,.28);
  color: #0c4a6e;
  font-size: 11.5px;
  font-weight: 650;
  max-width: 100%;
}
html:not(.sky) .ea-attach-chip{
  background: rgba(56,189,248,.12);
  border-color: rgba(56,189,248,.28);
  color: #e2e8f0;
}
.ea-attach-name{
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ea-attach-size{ opacity: .65; font-weight: 600; font-size: 10.5px; }
.ea-attach-x{
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: .7;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
}
.ea-attach-x:hover{ opacity: 1; }
.ea-attach-uploading{ opacity: .75; font-style: italic; }

/* Drag-drop highlight on compose / panel */
.ea-compose.ea-drop-hot .ea-compose-shell,
#eaPanel.ea-drop-hot .ea-compose-shell{
  outline: 2px dashed rgba(14,165,233,.55);
  outline-offset: 2px;
  background: rgba(14,165,233,.06);
}
html:not(.sky) .ea-compose.ea-drop-hot .ea-compose-shell,
html:not(.sky) #eaPanel.ea-drop-hot .ea-compose-shell{
  outline-color: rgba(56,189,248,.55);
  background: rgba(56,189,248,.08);
}

/* Footer metrics strip removed (Ford 2026-07-15). */
.ea-legal{ display: none !important; }

/* ── Improve-site compose (merged Wish this was better) ─────────────────── */
.ea-improve{
  margin: 0 12px 10px; padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(14,165,233,.22);
  background: rgba(14,165,233,.06);
  flex: 0 0 auto;
}
.ea-improve[hidden]{ display: none !important; }
.ea-improve-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.ea-improve-head b{ font-size: 13px; font-weight: 760; }
.ea-improve-x{
  border: 0; background: transparent; color: var(--muted,#64748b);
  font-size: 16px; cursor: pointer; line-height: 1; padding: 2px 6px;
}
.ea-improve-lead{
  margin: 0 0 8px; font-size: 11.5px; color: var(--muted,#64748b); line-height: 1.35;
}
.ea-improve-thumb{
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.ea-improve-thumb[hidden]{ display: none !important; }
.ea-improve-thumb img{
  width: 72px; height: 48px; object-fit: cover; border-radius: 8px;
  border: 1px solid rgba(14,165,233,.25);
}
.ea-improve-thumb button,
.ea-improve-mark{
  font: inherit; font-size: 12px; font-weight: 680; cursor: pointer;
  border-radius: 9px; border: 1px solid rgba(14,165,233,.3);
  background: #fff; color: var(--ea-sky2); padding: 6px 10px;
}
html:not(.sky) .ea-improve-mark,
html:not(.sky) .ea-improve-thumb button{
  background: var(--card,#111827); color: var(--ea-sky);
}
.ea-improve textarea{
  width: 100%; min-height: 52px; resize: vertical; box-sizing: border-box;
  font: inherit; font-size: 13px; padding: 9px 11px; border-radius: 12px;
  border: 1px solid rgba(14,165,233,.2); background: #fff; color: inherit;
  margin-bottom: 8px;
}
html:not(.sky) .ea-improve textarea{ background: var(--bg2,#0b1220); border-color: var(--line); }
.ea-improve-row{ display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.ea-improve-send{
  font: inherit; font-size: 12.5px; font-weight: 720; cursor: pointer;
  border: 0; border-radius: 10px; padding: 8px 14px;
  background: var(--ea-sky2); color: #fff;
}
.ea-improve-msg{ font-size: 11.5px; margin-top: 6px; color: var(--muted,#64748b); min-height: 1em; }
/* Improve CTA is now .ea-chip in the compose bar */

/* Live build journey — compact horizontal stepper; never crush chat / compose */
.ea-journey{
  margin: 0 10px 8px;
  padding: 10px 11px 9px;
  border-radius: 14px;
  border: 1px solid rgba(14,165,233,.22);
  background: rgba(255,255,255,.9);
  flex: 0 0 auto; /* do not steal flex from msgs */
  max-height: none;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  box-shadow: 0 8px 22px -14px rgba(14,100,160,.25);
  z-index: 1;
}
.ea-journey[hidden]{ display: none !important; }
html:not(.sky) .ea-journey{ background: rgba(255,255,255,.07); }
html.sky .ea-journey{
  background: rgba(255,255,255,.92);
  border-color: rgba(33,150,243,.22);
}
/* When journey is open, let chat shrink instead of clipping footer */
body.ea-journey-open .ea-msgs{
  min-height: 72px;
}
.ea-journey h4{
  margin: 0 0 2px;
  font-size: 12.5px;
  font-weight: 760;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.ea-j-top{ min-width: 0; }
.ea-j-lead{
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--muted,#64748b);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Horizontal step row — fits the 360px rail without a tall list */
.ea-j-steps{
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2px;
  min-width: 0;
}
.ea-j-steps li{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-size: 10px;
  text-align: center;
  position: relative;
}
/* connector line between steps */
.ea-j-steps li:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 8px;
  left: calc(50% + 10px);
  right: calc(-50% + 10px);
  height: 1.5px;
  background: rgba(14,165,233,.18);
  z-index: 0;
  pointer-events: none;
}
.ea-j-steps li.done:not(:last-child)::after{
  background: var(--ea-sky2, #0ea5e9);
}
.ea-j-steps .ea-j-ic{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  border: 1.5px solid rgba(14,165,233,.28);
  color: var(--muted,#64748b);
  background: rgba(255,255,255,.7);
  box-sizing: border-box;
  line-height: 1;
  position: relative;
  z-index: 1;
  flex: 0 0 18px;
}
.ea-j-steps li.todo .ea-j-ic{
  opacity: .55;
  border-color: rgba(100,116,139,.28);
  background: transparent;
}
.ea-j-steps li.done .ea-j-ic{
  background: var(--ea-sky2);
  border-color: var(--ea-sky2);
  color: #fff;
  opacity: 1;
}
.ea-j-steps li.active .ea-j-ic{
  border-color: var(--ea-sky2);
  color: var(--ea-sky2);
  background: rgba(14,165,233,.1);
  box-shadow: 0 0 0 3px rgba(14,165,233,.14);
  opacity: 1;
  animation: eaJActive 1.4s ease-in-out infinite;
}
.ea-j-steps li.fail .ea-j-ic{
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220,38,38,.08);
  opacity: 1;
}
@keyframes eaJActive{
  0%,100%{ box-shadow: 0 0 0 3px rgba(14,165,233,.12); }
  50%{ box-shadow: 0 0 0 5px rgba(14,165,233,.08); }
}
.ea-j-steps b{
  display: block;
  font-weight: 700;
  font-size: 9.5px;
  line-height: 1.15;
  letter-spacing: -.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ea-j-steps li.todo b{ color: var(--muted,#64748b); font-weight: 650; }
.ea-j-steps li.active b{ color: var(--ea-sky2, #0284c7); }
.ea-j-actions{
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 0;
  flex-wrap: wrap;
}
.ea-j-actions button{
  font: inherit;
  font-size: 11.5px;
  font-weight: 680;
  cursor: pointer;
  border-radius: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(14,165,233,.3);
  background: transparent;
  color: var(--ea-sky2);
}
.ea-j-actions #eaJReload{ background: var(--ea-sky2); border-color: var(--ea-sky2); color: #fff; }
.ea-j-actions .ea-j-esc,
.ea-j-actions #eaJEscalate{
  background: rgba(251,191,36,.15);
  border-color: rgba(245,158,11,.45);
  color: #b45309;
  font-weight: 720;
}
.ea-j-actions .ea-j-esc:hover{ background: rgba(251,191,36,.28); }

/* Mini bubble when "Building your change" is Hidden — click to reopen (Ford 2026-07-15).
   Fixed so it survives closing the EA panel; poll keeps running. */
.ea-journey-mini{
  display: none;
  position: fixed;
  z-index: 9035;
  left: 16px;
  bottom: 16px;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: 1px solid rgba(14,165,233,.35);
  background: rgba(255,255,255,.94);
  color: #0E1420;
  border-radius: 999px;
  padding: 9px 14px;
  font: inherit;
  font-weight: 680;
  font-size: 12.5px;
  box-shadow: 0 8px 28px -10px rgba(14,165,233,.4);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  max-width: min(280px, calc(100vw - 32px));
  appearance: none;
  -webkit-appearance: none;
}
.ea-journey-mini.show,
.ea-journey-mini:not([hidden]){ display: inline-flex; }
.ea-journey-mini[hidden]{ display: none !important; }
.ea-journey-mini:hover{
  border-color: var(--ea-sky2);
  box-shadow: 0 12px 32px -10px rgba(14,165,233,.45);
}
.ea-journey-mini .ea-j-mini-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ea-sky2);
  flex-shrink: 0;
  animation: eaJMiniPulse 1.4s ease-in-out infinite;
}
.ea-journey-mini.live .ea-j-mini-dot{ background: #10b981; animation: none; }
.ea-journey-mini.fail .ea-j-mini-dot{ background: #dc2626; animation: none; }
.ea-journey-mini span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes eaJMiniPulse{
  0%,100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .55; transform: scale(.85); }
}
/* Park beside the open EA rail on desktop so it doesn't cover the dock */
body.ea-shell-open .ea-journey-mini{
  left: calc(var(--ea-rail, 360px) + 16px);
  bottom: 20px;
}
html:not(.sky) .ea-journey-mini{
  background: rgba(15,23,42,.92);
  color: #e2e8f0;
  border-color: rgba(56,189,248,.35);
}

/* Hide residual floating wish widget when EA is the improve entry */
body.ea-shell-open #fsWrap,
#eaOrb ~ #fsWrap,
html.ea-merged #fsWrap{ display: none !important; }

/* highlight driver — stronger during tours */
.ea-hl{
  outline: 3px solid var(--ea-sky2) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(14,165,233,.18) !important;
  transition: outline .15s, box-shadow .15s;
  scroll-margin: 100px;
  position: relative;
  z-index: 5;
}
.ea-hl-pulse{
  animation: eaHlPulse 1.2s ease-in-out infinite;
}
@keyframes eaHlPulse{
  0%,100%{ box-shadow: 0 0 0 6px rgba(14,165,233,.16); }
  50%{ box-shadow: 0 0 0 10px rgba(14,165,233,.28); }
}

/* ══ Mobile (≤720px): floating chat bubble + collapsible sheet ════════════
   Desktop keeps the left dock. On phones the agent is a sun bubble that
   follows the user (position:fixed) and expands into a bottom chat sheet.
   Never shifts page content (no margin-left rail). ─────────────────────── */
/* ≤960 so Fold 5 open + large phones get the bubble (not a left rail that
   squishes content). Desktop ≥961 keeps the dock. */
@media (max-width: 960px){
  :root{
    --ea-rail: 0px;
    --ea-fab: 58px;
    --ea-sheet-h: min(68vh, 560px);
    --ea-bottom-clear: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* No content shift — bubble overlays, site stays full-width */
  body.ea-shell-open > .wrap{
    margin-left: 0 !important;
    width: auto !important;
  }

  /* Hide the desktop tabbar control; FAB is the entry point */
  #tabbar .tab.ea-tab{
    display: none !important;
  }

  /* ── Floating chat bubble (collapsed state) ─────────────────────────── */
  #eaFab{
    display: flex !important;
    position: fixed;
    right: 14px;
    bottom: calc(var(--ea-bottom-clear) + 10px);
    z-index: 99985;
    width: var(--ea-fab);
    height: var(--ea-fab);
    border: 0;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(circle at 35% 30%, #fff7cc 0%, var(--ea-sun) 28%, transparent 46%),
      radial-gradient(circle at 50% 55%, var(--ea-sky) 0%, var(--ea-sky2) 58%, #0369a1 100%);
    box-shadow:
      0 12px 28px -10px rgba(14,165,233,.7),
      0 0 0 3px rgba(255,255,255,.55);
    transition: transform .18s ease, box-shadow .18s ease, opacity .15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  #eaFab:active{ transform: scale(.94); }
  #eaFab .ea-fab-ic{
    width: 100%; height: 100%; border-radius: 50%;
    pointer-events: none;
  }
  #eaFab .ea-fab-label{
    position: absolute;
    width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
  }
  /* Pulse when listening / speaking */
  #eaFab.listening,
  #eaFab.thinking{
    animation: eaPulse 1.5s ease-in-out infinite;
  }
  #eaFab.speaking{
    box-shadow:
      0 12px 28px -10px rgba(14,165,233,.7),
      0 0 0 5px rgba(251,191,36,.28);
  }
  /* When chat is open, bubble becomes a minimize chip (still follows user) */
  body.ea-shell-open #eaFab{
    width: 46px;
    height: 46px;
    bottom: calc(var(--ea-bottom-clear) + var(--ea-sheet-h) + 12px);
    right: 16px;
    box-shadow: 0 8px 20px -8px rgba(14,165,233,.55), 0 0 0 2px rgba(255,255,255,.7);
  }
  body.ea-shell-open #eaFab::after{
    content: "−";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #0c4a6e;
    background: rgba(255,255,255,.55);
    border-radius: 50%;
    line-height: 1;
  }

  /* Dim the page while chat is open — tap to collapse */
  #eaBackdrop{
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99960;
    background: rgba(15,23,42,.32);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  body.ea-shell-open #eaBackdrop{ display: block; }

  /* ── Chat sheet (expanded) — bottom card, collapsible ───────────────── */
  #eaPanel{
    top: auto;
    left: 8px;
    right: 8px;
    bottom: calc(var(--ea-bottom-clear) + 6px);
    width: auto;
    max-width: none;
    height: var(--ea-sheet-h);
    max-height: calc(100dvh - var(--ea-bottom-clear) - 24px);
    border-radius: 20px;
    border: 1px solid rgba(14,165,233,.22);
    border-right: 1px solid rgba(14,165,233,.22);
    box-shadow:
      0 24px 56px -18px rgba(14,60,120,.45),
      0 0 0 1px rgba(255,255,255,.5) inset;
    transform: translateY(12px);
    opacity: 0;
    pointer-events: none;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
  }
  #eaPanel.open{
    display: flex;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  html.sky #eaPanel{
    border-right-color: var(--sky-glass-edge, rgba(14,165,233,.18));
  }
  html:not(.sky) #eaPanel{
    box-shadow: 0 24px 56px -16px rgba(0,0,0,.65);
  }

  /* Compact head for the sheet */
  .ea-head{
    padding: 12px 14px 10px;
    align-items: center;
  }
  .ea-head h3{ font-size: 15px; }
  .ea-head p{
    display: none; /* save vertical room on phones */
  }
  .ea-head::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: rgba(14,165,233,.22);
  }
  .ea-head{ position: relative; padding-top: 16px; }

  .ea-status{ padding: 6px 14px; font-size: 11px; }
  .ea-status.ea-status-dock{ padding: 7px 9px; margin-bottom: 6px; font-size: 11px; }
  .ea-msgs{ padding: 10px 12px 12px; }
  .ea-msg{ font-size: 12.5px; padding: 9px 24px 9px 11px; }
  .ea-footer{ padding: 0 8px 10px; padding-top: 8px; }
  .ea-suggestions{ gap: 5px; margin-bottom: 8px; }
  .ea-sug{ font-size: 11px; padding: 4px 8px 4px 7px; }
  .ea-sug-row-rtl .ea-sug-track{ animation-duration: 40s; }
  .ea-sug-row-ltr .ea-sug-track{ animation-duration: 48s; }
  .ea-compose-bar{ gap: 5px; padding: 6px 8px; }
  .ea-compose-bar > .ea-chip.ea-chip-icon,
  .ea-compose-bar > .ea-chip{
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    height: 36px;
  }
  .ea-compose-bar > .ea-send{
    height: 36px;
    min-width: 72px;
    font-size: 12px;
    padding: 0 12px 0 14px;
  }
  .ea-compose-bar > .ea-chip .ea-chip-ic,
  .ea-compose-bar > .ea-chip .ea-chip-ic-svg{
    flex: 0 0 16px;
    width: 16px;
    min-width: 16px;
  }

  /* Mic gate parks near the bubble, not the rail */
  .ea-mic-gate,
  body.ea-shell-open .ea-mic-gate{
    left: auto;
    right: 14px;
    top: auto;
    bottom: calc(var(--ea-bottom-clear) + var(--ea-fab) + 22px);
  }
  body.ea-shell-open .ea-mic-gate{
    bottom: calc(var(--ea-bottom-clear) + var(--ea-sheet-h) + 60px);
  }

  /* Build journey mini sits above the FAB (or sheet when open) */
  .ea-journey-mini{
    left: auto;
    right: 14px;
    bottom: calc(var(--ea-bottom-clear) + var(--ea-fab) + 14px);
  }
  body.ea-shell-open .ea-journey-mini{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(var(--ea-bottom-clear) + var(--ea-sheet-h) + 12px);
  }
}

/* Desktop: hide mobile-only FAB / backdrop */
@media (min-width: 961px){
  #eaFab{ display: none !important; }
  #eaBackdrop{ display: none !important; }
}

/* Fold open: slightly larger sheet, FAB clears floating dock insets */
@media (min-width: 601px) and (max-width: 960px){
  :root{
    --ea-fab: 60px;
    --ea-sheet-h: min(64vh, 600px);
    --ea-bottom-clear: calc(78px + env(safe-area-inset-bottom, 0px));
  }
  #eaFab{ right: 22px; }
  #eaPanel{
    left: 18px;
    right: 18px;
    max-width: none;
  }
}