/* ============================================================
   APEX — Shared Stylesheet
   Theme matches the APEX pitch deck: deep space black,
   teal → blue → magenta → pink gradient, mono labels.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --navy-deep:    #000000;
  --navy-panel:   #08080f;
  --navy-raised:  #0d0d18;
  --navy-line:    #1a1a2e;
  --cream:        #f5f0e6;
  --slate:        #94a3b8;
  --slate-dim:    #5b6b85;
  --teal:         #2dd4bf;
  --blue:         #3b82f6;
  --magenta:      #d946ef;
  --pink:         #ec4899;
  --orange:       #f59e0b;

  --grad-cool: linear-gradient(95deg, var(--teal) 0%, var(--blue) 100%);
  --grad-warm: linear-gradient(95deg, #a855f7 0%, var(--magenta) 55%, var(--pink) 100%);
  --grad-full: linear-gradient(95deg, var(--teal) 0%, var(--blue) 45%, var(--magenta) 80%, var(--pink) 100%);

  --font-display: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  --font-body:    'Inter', 'Segoe UI', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--navy-deep);
  color: var(--cream);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.grad-text {
  background: var(--grad-full);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-text-cool {
  background: var(--grad-cool);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-text-warm {
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mono {
  font-family: var(--font-mono);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

/* ============================================================
   Starfield background canvas (sits behind everything)
   ============================================================ */
#space-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   Navbar
   ============================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 5%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--navy-line);
}

.navbar .logo-link img {
  height: 46px;
  width: auto;
  display: block;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  position: relative;
  padding: 6px 0;
  transition: color 0.25s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--cream);
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--grad-full);
  border-radius: 2px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
}
.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
}

/* ============================================================
   Nav dropdown (Products / Spares / Workshop)
   ============================================================ */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  padding: 6px 0;
  transition: color 0.25s ease;
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active {
  color: var(--cream);
}
.nav-dropdown-caret {
  font-size: 10px;
  transition: transform 0.2s ease;
}
.nav-dropdown.open .nav-dropdown-caret {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--navy-deep);
  border: 1px solid var(--navy-line);
  border-radius: 10px;
  min-width: 170px;
  padding: 8px;
  margin: 0;
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  z-index: 1001;
}
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate);
  white-space: nowrap;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
  color: var(--cream);
  background: var(--navy-raised);
}

/* ============================================================
   Page shell — pushes content below fixed navbar
   ============================================================ */
main {
  position: relative;
  z-index: 1;
  padding-top: 88px;
}

.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 5% 90px;
  position: relative;
  z-index: 1;
}

.section-sm {
  max-width: 900px;
}

/* ============================================================
   Panels / Cards
   ============================================================ */
.panel {
  background: var(--navy-panel);
  border: 1px solid var(--navy-line);
  border-radius: 14px;
  padding: 26px;
}

.card {
  background: var(--navy-panel);
  border: 1px solid var(--navy-line);
  border-radius: 16px;
  padding: 30px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--teal);
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--cream);
  background: var(--navy-raised);
  border: 1px solid var(--navy-line);
  border-radius: 999px;
  padding: 7px 14px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--grad-full);
  color: #000;
  font-weight: 600;
}
.btn-primary:hover {
  box-shadow: 0 8px 24px rgba(217, 70, 239, 0.35);
}

.btn-outline {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--navy-line);
}
.btn-outline:hover {
  border-color: var(--teal);
  color: var(--teal);
}

/* ============================================================
   Hero (shared pattern for top of pages)
   ============================================================ */
.hero {
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 60px 5%;
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: clamp(38px, 6vw, 68px);
  margin-bottom: 18px;
}

.hero .lead {
  color: var(--slate);
  font-size: clamp(16px, 2vw, 18px);
  max-width: 720px;
  margin: 0 auto;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 34px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   Grid helpers
   ============================================================ */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

/* ============================================================
   Product image placeholder box
   ============================================================ */
.product-visual {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background: var(--navy-raised);
  border: 1px solid var(--navy-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  margin-bottom: 22px;
  overflow: hidden;
}
.product-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Footer
   ============================================================ */
footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--navy-line);
  padding: 36px 5%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

footer .mono {
  font-size: 12.5px;
  color: var(--slate-dim);
  letter-spacing: 0.08em;
  /* The starfield canvas's tripod/dish illustration sits fixed in the
     bottom-left corner at every scroll position — nudge the copyright line
     right so it isn't crowded up against it, same reasoning as the
     footer-links margin on the other side. */
  margin-left: 170px;
}

footer .footer-links {
  display: flex;
  gap: 22px;
  /* Pixie stands fixed in the bottom-right corner — nudge the link group left
     so it's never hidden behind him when the footer scrolls into view. */
  margin-right: 170px;
}
footer .footer-links a {
  font-size: 13px;
  color: var(--slate);
}
footer .footer-links a:hover {
  color: var(--teal);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .grid-2, .grid-3 {
    grid-template-columns: 1fr;
  }
  .navbar-right {
    gap: 14px;
  }
  .nav-links {
    /* A small anchored card under the hamburger, not a full-width bar —
       right:5% lines its edge up with the toggle button, which sits inside
       the navbar's own 5% side padding. */
    position: fixed;
    top: 76px;
    left: auto;
    right: 5%;
    width: min(220px, 68vw);
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    background: var(--navy-deep);
    border: 1px solid var(--navy-line);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px;
    transform-origin: top right;
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1002;
  }
  .nav-links.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .nav-links a {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
  }
  .nav-links a:hover,
  .nav-links a.active {
    background: var(--navy-raised);
  }
  .nav-toggle {
    display: flex;
  }
  .nav-dropdown {
    width: 100%;
  }
  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 8px;
  }
  .nav-dropdown-toggle:hover,
  .nav-dropdown-toggle.active {
    background: var(--navy-raised);
  }
  .nav-dropdown-menu {
    position: static;
    display: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0;
  }
  .nav-dropdown.open .nav-dropdown-menu {
    display: block;
    /* The base (desktop) rule of the same selector sets
       transform: translateX(-50%) translateY(0) to center the absolute
       dropdown under its toggle. It has equal specificity to this rule
       but sits earlier in the file, so without repeating the reset here,
       that transform wins over the plain ".nav-dropdown-menu { transform:
       none }" reset above (lower specificity) and shifts the whole panel
       half a viewport-width off-screen to the left. */
    transform: none;
  }
  .nav-dropdown-menu a {
    padding: 10px 14px 10px 26px;
    border-radius: 8px;
  }
  /* Footer's desktop side-margins exist only to dodge the fixed corner
     illustration (left) and the Pixie mascot (right) on wide screens —
     on narrower viewports they either cram the copyright line into a
     tight indented column or push the links wide enough to overflow.
     Stacking everything centered sidesteps both fixed elements instead. */
  footer {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
  footer .mono {
    margin-left: 0;
  }
  footer .footer-links {
    margin-right: 0;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .navbar {
    padding: 12px 4%;
  }
  .navbar-right {
    gap: 10px;
  }
  .nav-links {
    right: 4%;
    width: min(200px, 62vw);
  }
  .navbar .logo-link img {
    height: 36px;
  }
  .apex-nav-bubble {
    padding: 4px 4px;
  }
  .apex-cart-btn {
    padding: 6px 8px;
  }
  .apex-status-btn {
    padding: 6px 8px 6px 6px;
  }
  .apex-status-label {
    display: none;
  }
  .modal-box {
    padding: 26px 20px;
  }
  .hero {
    padding: 48px 5%;
  }
}

/* Very wide / 4K viewports: the layout looks intentional on a laptop because
   the 1200px content column takes up most of the window, but the same
   1200px cap on a 3840px-wide screen leaves ~80% of it as dead space and
   reads as broken rather than "spacious". Scale the column and type up so
   the page still feels designed at that width instead of just centered. */
@media (min-width: 2200px) {
  .section {
    max-width: 1800px;
  }
  .section-sm {
    max-width: 1300px;
  }
  .hero .lead {
    max-width: 960px;
  }
}

/* ============================================================
   Product Modal (popup)
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.modal-overlay.open {
  display: flex;
  opacity: 1;
}

.modal-box {
  background: var(--navy-panel);
  border: 1px solid var(--navy-line);
  border-radius: 18px;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 38px;
  position: relative;
  transform: translateY(20px) scale(0.98);
  transition: transform 0.3s ease;
}

.modal-overlay.open .modal-box {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy-raised);
  border: 1px solid var(--navy-line);
  color: var(--cream);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.modal-close:hover {
  border-color: var(--magenta);
  color: var(--magenta);
}

.modal-box .spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--navy-line);
  font-size: 14.5px;
}
.modal-box .spec-row:last-child {
  border-bottom: none;
}
.modal-box .spec-row .spec-label {
  color: var(--slate);
}
.modal-box .spec-row .spec-value {
  color: var(--cream);
  font-family: var(--font-mono);
  font-weight: 500;
  text-align: right;
}

.card-clickable {
  cursor: pointer;
}

body.modal-active {
  overflow: hidden;
}

/* ============ Add-to-cart toast ============ */
.apex-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  max-width: 90vw;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy-panel);
  border: 1px solid var(--teal);
  color: var(--cream);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.apex-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============ NAV ACTION BUBBLE (cart + track request, merged) ============ */
.apex-nav-bubble {
  display: flex;
  align-items: center;
  gap: 0;
  background: transparent;
  border: 1px solid var(--navy-line);
  border-radius: 999px;
  padding: 6px 6px;
  transition: border-color 0.2s ease;
}
.apex-nav-bubble:hover {
  border-color: var(--teal);
}

.apex-cart-btn {
  position: relative;
  background: transparent;
  border: none;
  font-size: 19px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 6px 10px;
  transition: opacity 0.2s ease;
}
.apex-cart-btn:hover {
  opacity: 0.75;
}

.apex-status-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--navy-line);
  padding: 8px 14px 8px 12px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.apex-status-btn:hover {
  color: var(--teal);
}

.apex-cart-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  background: var(--teal);
  color: var(--navy-deep);
  font-size: 11px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.apex-qty-btn {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--navy-line);
  background: var(--navy-raised);
  color: var(--cream);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.apex-qty-btn:hover { border-color: var(--teal); color: var(--teal); }
.apex-remove-btn { background: transparent; border: none; color: var(--slate-dim); cursor: pointer; font-size: 14px; }
.apex-remove-btn:hover { color: var(--magenta); }
.btn-add-cart {
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--teal);
  color: var(--teal);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.btn-add-cart:hover { background: var(--teal); color: var(--navy-deep); }
.btn-add-cart-wide { flex: 1; margin-top: 0; }

.btn-coming-soon {
  border-color: var(--slate-dim);
  color: var(--slate);
}
.btn-coming-soon:hover { background: var(--slate-dim); color: var(--navy-deep); }
.btn-coming-soon[disabled] { cursor: default; pointer-events: none; opacity: 0.7; }
.btn-coming-soon[disabled]:hover { background: transparent; color: var(--slate); }

/* ============================================================
   Pixie — chat widget (button-driven assistant, no external AI)
   Everything (browsing, cart, checkout, workshop requests, support,
   order tracking, FAQs) renders inside this panel, one question at a
   time — no separate modals, no multi-field forms.
   ============================================================ */
.pixie-avatar-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* No circle, no background plate — just the character, sized big and anchored
   to the bottom edge of the viewport so it reads as "standing" there. */
.pixie-toggle-btn {
  position: fixed;
  right: 6px;
  bottom: 0;
  width: auto;
  height: 180px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1400;
}
.pixie-toggle-btn .pixie-avatar-img {
  height: 100%;
  width: auto;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55));
  transition: filter 0.2s ease, opacity 0.26s ease, transform 0.26s ease;
}
.pixie-toggle-btn:hover .pixie-avatar-img {
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55)) brightness(1.12);
}

/* Pose cycling — real artwork swap (JS sets a new src on #pixie-toggle-img
   every PIXIE_POSE_INTERVAL_MS while idle); this class just crossfades the
   swap so it reads as a transition instead of a jarring pop. */
.pixie-pose-fade { opacity: 0; transform: scale(0.94); }

/* ---------- Greeting — a speech "cloud" rising from Pixie's head ---------- */
.pixie-greeting-bubble {
  position: fixed;
  right: 8px;
  bottom: 190px;
  max-width: 220px;
  background: var(--navy-panel);
  border: 1px solid var(--teal);
  border-radius: 26px;
  padding: 14px 34px 14px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  z-index: 1401;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.pixie-greeting-bubble.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* Trailing cloud-tail circles, cascading down toward Pixie's head */
.pixie-greeting-bubble::before,
.pixie-greeting-bubble::after {
  content: "";
  position: absolute;
  background: var(--navy-panel);
  border: 1px solid var(--teal);
  border-radius: 50%;
}
.pixie-greeting-bubble::before { width: 16px; height: 16px; bottom: -13px; right: 38px; }
.pixie-greeting-bubble::after { width: 9px; height: 9px; bottom: -24px; right: 28px; }
.pixie-greeting-avatar { display: none; }
.pixie-greeting-text {
  font-size: 13px;
  color: var(--cream);
  line-height: 1.4;
}
.pixie-greeting-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--slate);
  font-size: 11px;
  cursor: pointer;
  padding: 4px;
}
.pixie-greeting-close:hover { color: var(--magenta); }

/* ---------- Panel — opens just above Pixie's head ---------- */
.pixie-panel {
  position: fixed;
  right: 24px;
  bottom: 195px;
  width: 370px;
  max-width: calc(100vw - 48px);
  height: min(70vh, 560px);
  background: var(--navy-panel);
  border: 1px solid var(--navy-line);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  z-index: 1400;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.pixie-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.pixie-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--navy-line);
  flex-shrink: 0;
}
.pixie-header-avatar {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  overflow: hidden;
}
.pixie-header-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--cream);
}
.pixie-header-sub {
  font-size: 11px;
  color: var(--slate);
  letter-spacing: 0.06em;
}
.pixie-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy-raised);
  border: 1px solid var(--navy-line);
  color: var(--cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.pixie-close:hover { border-color: var(--magenta); color: var(--magenta); }

/* ---------- Message log ---------- */
.pixie-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pixie-msg {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.pixie-msg.bot {
  align-self: flex-start;
  background: var(--navy-raised);
  border: 1px solid var(--navy-line);
  color: var(--cream);
  border-bottom-left-radius: 4px;
}
.pixie-msg.user {
  align-self: flex-end;
  background: var(--grad-cool);
  color: #04121b;
  font-weight: 500;
  border-bottom-right-radius: 4px;
}

/* Reuse of the site's spec-row look (see .modal-box .spec-row) inside chat
   bubbles, for "Full Details" and "Track My Request" output. */
.pixie-msg .spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--navy-line);
  font-size: 12.5px;
}
.pixie-msg .spec-row:last-child { border-bottom: none; }
.pixie-msg .spec-row .spec-label { color: var(--slate); }
.pixie-msg .spec-row .spec-value {
  color: var(--cream);
  font-family: var(--font-mono);
  font-weight: 500;
  text-align: right;
  max-width: 60%;
  white-space: normal;
}

.pixie-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: flex-start;
  max-width: 100%;
}
.pixie-option-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--navy-line);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.pixie-option-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
  transform: translateY(-1px);
}
.pixie-option-btn.primary {
  background: var(--grad-full);
  color: #000;
  font-weight: 600;
  border: none;
}

/* ---------- In-chat cart card ---------- */
.pixie-cart-card { width: 88%; max-width: 88%; }
.pixie-cart-rows { display: flex; flex-direction: column; gap: 10px; }
.pixie-cart-row {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--navy-line);
}
.pixie-cart-row:last-child { border-bottom: none; padding-bottom: 0; }
.pixie-cart-row-name {
  font-size: 13px;
  color: var(--cream);
  margin-bottom: 6px;
}
.pixie-cart-row-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pixie-qty-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--navy-line);
  background: var(--navy-panel);
  color: var(--cream);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pixie-qty-btn:hover { border-color: var(--teal); color: var(--teal); }
.pixie-cart-row-price {
  margin-left: auto;
  color: var(--teal);
  font-size: 12.5px;
}
.pixie-qty-remove {
  background: transparent;
  border: none;
  color: var(--slate-dim);
  cursor: pointer;
  font-size: 12px;
  padding: 4px;
}
.pixie-qty-remove:hover { color: var(--magenta); }
.pixie-cart-total {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--navy-line);
  font-size: 13px;
}
.pixie-cart-total-amt { color: var(--teal); font-weight: 600; }

/* ---------- One-question-at-a-time input row ---------- */
.pixie-input-row {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pixie-input-row-fields {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.pixie-input-row-fields .pixie-input { flex: 1; }
.pixie-step-send {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  background: var(--grad-full);
  color: #000;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.pixie-step-send:hover { transform: translateY(-1px); }
.pixie-step-error {
  font-size: 11px;
  color: var(--magenta);
  min-height: 14px;
}

/* Escape hatch under every wizard step — abandon the current flow and jump
   back to the main menu without having to finish it. */
.pixie-mainmenu-link {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--slate-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 0;
}
.pixie-mainmenu-link:hover { color: var(--teal); }

.pixie-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--navy-raised);
  border: 1px solid var(--navy-line);
  border-radius: 8px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 13.5px;
  resize: vertical;
}
.pixie-input:focus { outline: none; border-color: var(--teal); }

@media (max-width: 480px) {
  .pixie-panel {
    right: 12px;
    left: 12px;
    bottom: 150px;
    width: auto;
    height: min(70vh, 520px);
  }
  .pixie-toggle-btn {
    right: 4px;
    height: 130px;
  }
  .pixie-greeting-bubble { right: 4px; bottom: 138px; max-width: 190px; }
}