/* ════════════════════════════════════════════════════════════════════════════
   delax-ask.css — the Ask DELAX bubble, its hidden-state tab and its panel
   (docs/ask-delax-plan.md step 3, 11 Oct 2026). Drawn by delax-ask.js.
   Uses the page's tokens (--bg-panel, --text-pri, --cyan …) with fallbacks, so
   it follows the light and dark themes. Motion only inside
   prefers-reduced-motion: no-preference.
   ════════════════════════════════════════════════════════════════════════════ */
.dxa-root{ --dxa-cyan: var(--cyan, #45daf2); --dxa-amber: var(--amber, #f0b536);
  --dxa-panel: var(--bg-panel, #08131f); --dxa-text: var(--text-pri, #ecf4f9); --dxa-soft: var(--text-sec, #9babb7);
  --dxa-line: var(--border, #233746); --dxa-bottom: 18px; font-family: var(--sans, "IBM Plex Sans", system-ui, sans-serif); }
body.dxa-has-bnav .dxa-root{ --dxa-bottom: 78px; }           /* the Workspace's bottom nav, under 1024px */

/* ── the launcher: bubble + its name ─────────────────────────────────────── */
.dxa-launch{ position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(var(--dxa-bottom), var(--dxa-lift, 0px)) + env(safe-area-inset-bottom));
  z-index: 880; display: flex; align-items: center; gap: 10px; }
.dxa-launch[hidden]{ display: none; }
.dxa-open{ all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; border-radius: 40px; }
.dxa-open:focus-visible{ outline: 3px solid var(--dxa-amber); outline-offset: 4px; }
.dxa-name{ order: -1; padding: 9px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--dxa-cyan) 55%, transparent);
  background: color-mix(in srgb, var(--dxa-panel) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--dxa-text); font: 600 .82rem/1 var(--mono, "IBM Plex Mono", monospace); letter-spacing: .06em; white-space: nowrap;
  box-shadow: 0 6px 22px rgba(0,0,0,.28); }
.dxa-name b{ color: var(--dxa-cyan); font-weight: 700; }
.dxa-bubble{ width: 68px; height: 62px; display: block; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.dxa-bubble svg{ width: 100%; height: 100%; overflow: visible; }
.dxa-photo{ width: 64px; height: 64px; border-radius: 18px; overflow: hidden; display: block; position: relative;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dxa-cyan) 60%, transparent), 0 8px 20px rgba(0,0,0,.35); }
.dxa-photo img, .dxa-photo video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dxa-photo video{ opacity: 0; transition: opacity .25s; }
.dxa-photo.dxa-playing video{ opacity: 1; }
.dxa-hide{ all: unset; box-sizing: border-box; cursor: pointer; position: absolute; top: -8px; right: -6px; width: 26px; height: 26px;
  border-radius: 50%; display: grid; place-items: center; background: var(--dxa-panel); color: var(--dxa-soft);
  border: 1px solid var(--dxa-line); font: 600 15px/1 system-ui, sans-serif; opacity: 0; transition: opacity .15s; }
.dxa-launch:hover .dxa-hide, .dxa-launch:focus-within .dxa-hide{ opacity: 1; }
@media (hover: none){ .dxa-hide{ opacity: .9; } }
.dxa-hide:focus-visible{ outline: 2px solid var(--dxa-amber); outline-offset: 2px; opacity: 1; }
@media (max-width: 520px){ .dxa-name{ padding: 8px 11px; font-size: .74rem; } .dxa-bubble{ width: 58px; height: 53px; } }

/* ── hidden: one small tab on the right edge brings it back ──────────────── */
.dxa-dock{ all: unset; box-sizing: border-box; cursor: pointer; position: fixed; right: 0; bottom: calc(max(var(--dxa-bottom), var(--dxa-lift, 0px)) + 70px + env(safe-area-inset-bottom));
  z-index: 880; width: 44px; height: 44px; border-radius: 14px 0 0 14px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--dxa-panel) 78%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--dxa-cyan) 55%, transparent); border-right: 0; box-shadow: -4px 6px 18px rgba(0,0,0,.28); }
.dxa-dock[hidden]{ display: none; }
.dxa-dock svg{ width: 30px; height: 27px; }
.dxa-dock:focus-visible{ outline: 3px solid var(--dxa-amber); outline-offset: 2px; }

/* ── the drawn bubble (SVG) ──────────────────────────────────────────────── */
.dxa-svg .dxa-pupil{ transition: transform .14s ease-out; }
.dxa-svg .dxa-lid{ transform-box: fill-box; transform-origin: center; transform: scaleY(0); }

/* ── the panel ───────────────────────────────────────────────────────────── */
.dxa-panel{ position: fixed; z-index: 960;   /* above the analytics banner (950): opened on purpose, it must never sit under it (live check, 11 Oct 2026) */ display: flex; flex-direction: column; color: var(--dxa-text);
  background: color-mix(in srgb, var(--dxa-panel) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--dxa-line); box-shadow: 0 24px 70px rgba(0,0,0,.45); }
.dxa-panel[hidden]{ display: none; }
@media (min-width: 640px){
  .dxa-panel{ right: max(16px, env(safe-area-inset-right)); bottom: calc(var(--dxa-bottom) + env(safe-area-inset-bottom));
    width: min(440px, calc(100vw - 32px)); height: min(680px, calc(100dvh - var(--dxa-bottom) - 32px)); border-radius: 18px; }
}
@media (max-width: 639.98px){
  .dxa-panel{ left: 0; right: 0; bottom: 0; height: min(86dvh, 720px); border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
}
.dxa-top{ display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--dxa-line); }
.dxa-top svg{ width: 34px; height: 31px; flex-shrink: 0; }
.dxa-title{ font: 700 1.02rem/1.15 var(--display, "Bebas Neue", sans-serif); letter-spacing: .06em; }
.dxa-title small{ display: block; font: 400 .78rem/1.35 var(--sans, system-ui, sans-serif); letter-spacing: 0; color: var(--dxa-soft); margin-top: 2px; }
.dxa-tier{ font: 600 .66rem/1 var(--mono, monospace); letter-spacing: .08em; padding: 4px 6px; border-radius: 4px; border: 1px solid currentColor; color: var(--dxa-cyan); white-space: nowrap; }
.dxa-tier[data-tier="UNPRICED"], .dxa-tier[data-tier="DRAFT"]{ color: var(--dxa-amber); }
.dxa-x{ all: unset; box-sizing: border-box; cursor: pointer; margin-left: auto; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  color: var(--dxa-soft); font: 400 22px/1 system-ui, sans-serif; }
.dxa-x:hover{ color: var(--dxa-text); background: color-mix(in srgb, var(--dxa-line) 60%, transparent); }
.dxa-x:focus-visible{ outline: 2px solid var(--dxa-amber); }
.dxa-body{ flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; overscroll-behavior: contain; }
.dxa-intro{ color: var(--dxa-soft); font-size: .95rem; line-height: 1.6; margin: 0 0 12px; }
.dxa-sugg{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.dxa-sugg button{ all: unset; box-sizing: border-box; cursor: pointer; min-height: 40px; padding: 8px 12px; border-radius: 10px; font-size: .9rem; line-height: 1.3;
  border: 1px solid color-mix(in srgb, var(--dxa-cyan) 45%, transparent); color: var(--dxa-text); background: color-mix(in srgb, var(--dxa-cyan) 8%, transparent); }
.dxa-sugg button:hover{ background: color-mix(in srgb, var(--dxa-cyan) 16%, transparent); }
.dxa-sugg button:focus-visible{ outline: 2px solid var(--dxa-amber); }
.dxa-msg{ margin: 0 0 14px; font-size: 1rem; line-height: 1.7; }
.dxa-msg.dxa-q{ margin-left: 36px; padding: 10px 12px; border-radius: 12px 12px 4px 12px; background: color-mix(in srgb, var(--dxa-cyan) 14%, transparent); }
.dxa-msg.dxa-a{ padding: 12px 14px; border-radius: 12px 12px 12px 4px; border: 1px solid var(--dxa-line); background: color-mix(in srgb, var(--dxa-panel) 60%, transparent); }
.dxa-msg.dxa-a p{ margin: 0 0 .7em; } .dxa-msg.dxa-a p:last-child{ margin-bottom: 0; }
.dxa-msg.dxa-held{ color: var(--dxa-soft); border-style: dashed; }
.dxa-src{ margin-top: 10px; }
.dxa-src > summary{ cursor: pointer; font: 500 .78rem/1.4 var(--mono, monospace); color: var(--dxa-soft); padding: 4px 0; list-style-position: inside; }
.dxa-src > summary:focus-visible{ outline: 2px solid var(--dxa-amber); }
.dxa-cites{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dxa-fact a{ color: var(--dxa-cyan); }
.dxa-cite{ all: unset; box-sizing: border-box; cursor: pointer; font: 500 .72rem/1.3 var(--mono, monospace); padding: 5px 8px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--dxa-cyan) 40%, transparent); color: var(--dxa-cyan); }
.dxa-cite[aria-expanded="true"]{ background: color-mix(in srgb, var(--dxa-cyan) 12%, transparent); }
.dxa-cite:focus-visible{ outline: 2px solid var(--dxa-amber); }
.dxa-fact{ width: 100%; margin: 4px 0 0; padding: 8px 10px; border-left: 2px solid var(--dxa-cyan); font-size: .88rem; line-height: 1.55; color: var(--dxa-soft); }
.dxa-typing{ display: inline-flex; gap: 5px; } .dxa-typing i{ width: 6px; height: 6px; border-radius: 50%; background: var(--dxa-cyan); opacity: .5; }
.dxa-foot{ border-top: 1px solid var(--dxa-line); padding: 10px 12px 12px; }
.dxa-form{ display: flex; gap: 8px; align-items: flex-end; }
.dxa-form textarea{ flex: 1; resize: none; min-height: 44px; max-height: 140px; padding: 10px 12px; border-radius: 12px; font: inherit; font-size: 1rem; line-height: 1.45;
  color: var(--dxa-text); background: color-mix(in srgb, var(--dxa-panel) 70%, transparent); border: 1px solid var(--dxa-line); }
.dxa-form textarea:focus{ outline: 2px solid var(--dxa-cyan); outline-offset: 0; }
.dxa-send{ all: unset; box-sizing: border-box; cursor: pointer; min-width: 64px; height: 44px; padding: 0 14px; border-radius: 12px; display: grid; place-items: center;
  background: var(--dxa-cyan); color: #04121c; font: 700 .9rem/1 var(--sans, system-ui, sans-serif); }
.dxa-send[disabled]{ opacity: .45; cursor: default; }
.dxa-send:focus-visible{ outline: 3px solid var(--dxa-amber); outline-offset: 2px; }
.dxa-small{ margin: 8px 2px 0; font-size: .78rem; line-height: 1.45; color: var(--dxa-soft); }

@media (prefers-reduced-motion: no-preference){
  .dxa-svg .dxa-lid{ animation: dxa-blink 6.5s infinite; }
  .dxa-launch{ animation: dxa-in .5s cubic-bezier(.2,.9,.3,1.2) both; }
  .dxa-typing i{ animation: dxa-dot 1s infinite; } .dxa-typing i:nth-child(2){ animation-delay: .15s; } .dxa-typing i:nth-child(3){ animation-delay: .3s; }
  .dxa-panel{ animation: dxa-up .28s cubic-bezier(.2,.9,.3,1) both; }
  .dxa-open:active .dxa-bubble, .dxa-open:active .dxa-photo{ transform: scale(.94); }
}
@media (prefers-reduced-motion: reduce){ .dxa-svg .dxa-pupil{ transition: none; } }
@keyframes dxa-blink{ 0%, 93%, 100%{ transform: scaleY(0); } 95.5%{ transform: scaleY(1); } }
@keyframes dxa-in{ from{ opacity: 0; transform: translateY(14px) scale(.9); } to{ opacity: 1; transform: none; } }
@keyframes dxa-up{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: none; } }
@keyframes dxa-dot{ 0%, 70%, 100%{ opacity: .25; } 35%{ opacity: 1; } }
@media print{ .dxa-root{ display: none !important; } }