/* ===========================================================================
   the ONE orb (shared, not a screen). Prefix: .gd-
   The sphere itself is the #/home orb: the element carries the .cn-orb classes
   and canvas.css draws it (colours, drift keyframes, --amp / --gain, the
   reduced-motion rule). This file places it in its three homes, sizes it,
   breathes it, and draws the bubble that goes with it:
     .gd[data-place="stage"]    #/home, fills the stage slot (.cn-orbwrap)
     .gd[data-place="welcome"]  #/welcome, fills the wizard's slot (.ob-orbslot)
     .gd[data-place="dock"]     the top bar, 36 px (32 at 500 px)
     .gd[data-place="park"]     between two screens, fixed at its last rect
   The bubble (.gd-b) follows the same data-place: a card under the orb on the
   stage and the wizard, a one-line chip + dropdown popover in the dock, the
   live strip (state word + red end) in all three.
   One global class is defined here by contract: .guide-hl, the six-second
   highlight the guide puts on a control it points at.
   Tokens only, nothing under 12px, no gradients of our own, flat surfaces.
   =========================================================================== */

/* ── the orb node ─────────────────────────────────────────────────────────── */
.gd { display: block; }
.gd[hidden] { display: none; }
.gd-orbwrap {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  /* the FLIP between two homes: guide.js sets the inverse transform, then
     clears it and this transition carries the sphere to its new rect */
  transition: transform .5s cubic-bezier(.2, 0, 0, 1);
  will-change: transform;
}
.gd-orbbtn {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-circle);
  font: inherit; color: inherit; -webkit-tap-highlight-color: transparent;
  animation: gd-breathe 4.2s ease-in-out infinite;
}
.gd-orbbtn:focus-visible { outline: none; box-shadow: var(--focus); }
/* a resting orb is fully alive: no desaturation, only the breath */
.gd-orb { width: 100%; height: 100%; }
@keyframes gd-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
/* the breath stops while the voice drives the sphere, or it fights --amp */
.gd[data-mode="speaking"] .gd-orbbtn,
.gd[data-mode="listening"] .gd-orbbtn,
.gd[data-mode="connecting"] .gd-orbbtn { animation: none; }

/* stage: the slot (.cn-orbwrap) sets the size, the orb fills it */
.gd[data-place="stage"] { width: 100%; }
/* welcome: the wizard's slot sets the size */
.gd[data-place="welcome"] { width: 100%; }
/* dock: 36 px in the top bar, the halo kept tight on a small sphere */
.gd[data-place="dock"] { width: 36px; flex: none; }
.gd[data-place="dock"] .gd-halo { inset: -28%; filter: blur(4px); }
/* park: fixed at the last rect, the eye keeps it while the next screen renders */
.gd[data-place="park"] { position: fixed; z-index: 65; pointer-events: none; }

/* ── the bubble node ──────────────────────────────────────────────────────── */
.gd-b { display: block; }
.gd-b[hidden] { display: none; }
.gd-b__chip[hidden], .gd-b__card[hidden], .gd-live[hidden], .gd-b__talk[hidden], .gd-b__hint[hidden],
.gd-b__acts[hidden], .gd-b__prog[hidden] { display: none; }

/* the card: one sentence, one action, one quiet way out, the progress line */
.gd-b__card {
  position: relative; text-align: left;
  width: 340px; max-width: 100%;
  padding: var(--sp-14) var(--sp-16) var(--sp-12);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--e3);
  display: flex; flex-direction: column; gap: var(--sp-10);
  animation: gd-in .22s cubic-bezier(.2, 0, 0, 1);
}
@keyframes gd-in { from { opacity: 0; transform: translateY(6px); } }
.gd-b__say {
  margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); line-height: var(--lh-body);
  overflow-wrap: anywhere; min-height: calc(var(--fs-sm) * var(--lh-body));
}
.gd-b__acts { display: flex; align-items: center; gap: var(--sp-12); }
.gd-b__go { flex: none; }
.gd-b__later {
  font-size: var(--fs-btn); font-weight: 600; color: var(--muted); padding: 0 var(--sp-4);
  height: var(--btn-h-sm); border-radius: var(--r-sm); transition: color var(--t);
}
.gd-b__later:hover { color: var(--ink); }
.gd-b__later:focus-visible { outline: none; box-shadow: var(--focus); }
.gd-b__prog { font-size: var(--fs-micro); font-weight: 600; color: var(--muted-2); letter-spacing: .02em; }

/* the welcome talk button: big on the intro, a small one on every step */
.gd-b__talk {
  width: 100%; height: var(--btn-h-sm); font-size: var(--fs-btn);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-10);
}
.gd-b--intro .gd-b__talk { height: 52px; font-size: var(--fs-base); }
.gd-b__mini {
  position: relative; width: 20px; height: 20px; flex: none; border-radius: var(--r-circle); overflow: hidden;
  background: linear-gradient(125deg, #7ED6A4 8%, #9CD9FF 92%);
}
.gd-b__mini i {
  position: absolute; inset: -28%; border-radius: var(--r-circle);
  background: radial-gradient(closest-side at 36% 56%, #2FBF6C 0%, #2FBF6C 26%, rgba(47,191,108,0) 68%);
  animation: cn-orbDrift1 11s cubic-bezier(.2, 0, 0, 1) infinite alternate;
}
.gd-b__mini i + i {
  background: radial-gradient(closest-side at 74% 44%, #52C6FF 0%, rgba(82,198,255,0) 62%);
  animation: cn-orbDrift2 9s cubic-bezier(.2, 0, 0, 1) infinite alternate; animation-delay: -3s;
}
.gd-b__hint { margin: 0; font-size: var(--fs-hint); font-weight: 500; color: var(--muted-2); line-height: var(--lh-body); }

/* the live strip: the state word and the red end button */
.gd-live {
  display: flex; align-items: center; gap: var(--sp-10);
  padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-14);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: var(--e3);
  animation: gd-in .22s cubic-bezier(.2, 0, 0, 1);
}
.gd-live__dot { width: 7px; height: 7px; border-radius: var(--r-circle); background: var(--live); flex: none; }
.gd-live__st { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); white-space: nowrap; }
.gd-live__end { background: var(--danger); border-color: var(--danger); color: var(--danger-ink); }
.gd-live__end:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: var(--danger-ink); }

/* stage: the card and the strip sit centred under the orb, part of the stage
   (canvas.js keeps the slot at the top of its status block). The card lies
   flat here, the sentence and the progress left, the two actions right, so the
   status block stays short and the orb keeps its size above it. */
.gd-b[data-place="stage"] { display: flex; flex-direction: column; align-items: center; width: 100%; }
.gd-b[data-place="stage"] .gd-b__card {
  text-align: left; width: 560px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "say acts" "prog acts";
  align-items: center; column-gap: var(--sp-16); row-gap: var(--sp-4);
  padding: var(--sp-12) var(--sp-14) var(--sp-12) var(--sp-16);
}
.gd-b[data-place="stage"] .gd-b__say { grid-area: say; }
.gd-b[data-place="stage"] .gd-b__acts { grid-area: acts; }
.gd-b[data-place="stage"] .gd-b__prog { grid-area: prog; }
.gd-b[data-place="stage"].gd-b--on, .gd-b[data-place="stage"] .gd-live { margin-bottom: var(--sp-4); }
/* stacked (500 px): the card stands upright again under the orb */
.cn-stage--stack .gd-b[data-place="stage"] .gd-b__card {
  width: 340px; display: flex; flex-direction: column; align-items: stretch;
  padding: var(--sp-14) var(--sp-16) var(--sp-12); gap: var(--sp-10);
}

/* welcome: the card is the greeting, centred, a touch wider */
.gd-b[data-place="welcome"] { display: flex; flex-direction: column; align-items: center; width: 100%; margin-bottom: var(--sp-24); }
.gd-b[data-place="welcome"] .gd-b__card { width: 420px; }
.gd-b[data-place="welcome"] .gd-b__say { font-size: var(--fs-base); }
.gd-b--intro .gd-b__say { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; }
.gd-b--intro .gd-b__hint { text-align: center; }

/* dock: the chip inline beside the orb, the card as a dropdown popover, the
   strip inline while live */
.gd-b[data-place="dock"] { position: relative; display: flex; align-items: center; min-width: 0; }
.gd-b__chip {
  display: inline-flex; align-items: center; gap: var(--sp-6); min-width: 0; max-width: min(38vw, 380px);
  height: var(--seg-h-sm); padding: 0 var(--sp-8) 0 var(--sp-12);
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.gd-b__chip:hover { border-color: var(--line-2); background: var(--card-2); }
.gd-b__chip:focus-visible { outline: none; box-shadow: var(--focus); }
.gd-b__chip[aria-expanded="true"] { border-color: var(--ink); }
.gd-b__chiptx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-b__chev { width: 14px; height: 14px; flex: none; color: var(--muted-2); transform: rotate(90deg); transition: transform var(--t); }
.gd-b__chip[aria-expanded="true"] .gd-b__chev { transform: rotate(-90deg); }
/* an event summary flashing in the chip */
.gd-b__chip--flash { border-color: var(--live-line); background: var(--live-soft); }
.gd-b[data-place="dock"] .gd-b__card {
  position: absolute; top: calc(100% + var(--sp-10)); left: 0; z-index: 70;
  width: 340px;
}
.gd-b[data-place="dock"] .gd-live { padding-block: var(--sp-4); }

/* ── the top bar dock ─────────────────────────────────────────────────────── */
.sh-top__orb { display: flex; align-items: center; gap: var(--sp-10); min-width: 0; flex: 0 1 auto; }
.sh-top__orb:empty { display: none; }

/* ── the highlight the guide puts on a control (global by contract) ─────────
   A two-ring pulse in --attn, the one colour that means "your move here",
   over whatever the control already wears. Six seconds, guide.js removes it. */
.guide-hl {
  position: relative; z-index: 1;
  box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--attn) !important;
  animation: gd-hl 1.1s ease-in-out infinite;
  border-radius: var(--r-md);
}
.guide-hl.btn, .guide-hl.chip { border-radius: var(--r-btn); }
.guide-hl.card, .guide-hl.ch-card, .guide-hl.ch-phone, .guide-hl.kn-imp__card, .guide-hl.st-verif { border-radius: var(--r-card); }
.guide-hl.gd-orbbtn { border-radius: var(--r-circle); }
@keyframes gd-hl {
  0%, 100% { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--attn); }
  50% { box-shadow: 0 0 0 3px var(--card), 0 0 0 9px color-mix(in srgb, var(--attn) 55%, transparent); }
}

/* ── narrow ───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* 500 px: the dock orb is 32 px and the dock takes its own row of the top
     bar (the business name, the live pill and the language toggle keep the
     first row), the chip stretches beside the orb */
  .sh-top:has(.sh-top__orb:not(:empty)) {
    flex-wrap: wrap; height: auto; min-height: var(--topbar-h);
    align-content: center; row-gap: var(--sp-8); padding-block: var(--sp-10);
  }
  .sh-top__orb { order: 99; flex: 1 1 100%; }
  .gd[data-place="dock"] { width: 32px; }
  .gd-b[data-place="dock"] { flex: 1 1 auto; }
  .gd-b__chip { max-width: 100%; flex: 1 1 auto; }
  .gd-b[data-place="dock"] .gd-b__card { width: min(340px, calc(100vw - var(--sp-16) * 2)); left: calc(-32px - var(--sp-10)); }
}
@media (prefers-reduced-motion: reduce) {
  .gd-orbwrap { transition: none; }
  .gd-orbbtn, .gd-b__card, .gd-live, .guide-hl, .gd-b__mini i { animation: none !important; }
  .gd-b__chev { transition: none; }
  .guide-hl { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--attn) !important; }
}