/* ============================================================================
   Emily — site-guide widget
   Tokens from tbg.css only. No :root overrides, no new palette.
   Navy / electric / cyan. NO --emerald (it reads as a status-green in a UI
   surface and belongs to Aperture), NO --amber.
   ---------------------------------------------------------------------------- */

.emily {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: var(--z-widget);          /* 90 — always BELOW the contact modal at 100 */
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}

/* ---------- ORB ---------- */
.emily__orb {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--tint-cyan-50);
  background: radial-gradient(circle at 38% 34%, var(--tint-cyan-22), var(--void-3) 72%);
  box-shadow: var(--shadow-md);
  display: grid; place-items: center;
  padding: 0;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.emily__orb:hover { transform: translateY(-2px); border-color: var(--cyan); }
.emily__orb-core {
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle, var(--cyan-2), var(--electric));
  box-shadow: var(--shadow-glow-cyan);
}
.emily__orb-ring {
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--tint-cyan-22);
  animation: emily-breathe 3s ease-in-out infinite;
}
@keyframes emily-breathe {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
.emily__orb-cap {
  position: absolute; right: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
  background: var(--void-2);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 6px 12px;
  opacity: 0;
  animation: emily-cap-in var(--dur-med) var(--ease-out-soft) 2.4s forwards;
}
@keyframes emily-cap-in { to { opacity: 1; } }
.emily[data-open="true"] .emily__orb-cap { display: none; }
.emily[data-open="true"] .emily__orb-ring { animation: none; opacity: 1; border-color: var(--cyan); }

/* ---------- PANEL ---------- */
.emily__panel {
  width: 360px; max-width: calc(100vw - 40px);
  background: var(--void-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  order: -1;                          /* panel sits ABOVE the orb */
}
.emily__panel[hidden] { display: none; }

.emily__panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 14px 12px 18px;
  border-bottom: 1px solid var(--rule);
}
.emily__panel-titles { flex: 1 1 auto; min-width: 0; }
.emily__panel-title { font-size: 15px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.emily__panel-sub {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4);
  margin-top: 2px;
}
.emily__icon-btn {
  width: 30px; height: 30px; flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  display: grid; place-items: center;
  font-size: 12px; line-height: 1;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.emily__icon-btn:hover { border-color: var(--rule-strong); color: var(--ink); }

/* ---------- VIDEO / POSTER ---------- */
.emily__video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--void);
  border-bottom: 1px solid var(--rule);
}
.emily__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.emily__video-fallback {
  position: absolute; inset: 0;
  display: none; place-items: center;
  background:
    radial-gradient(ellipse 60% 70% at 50% 55%, var(--tint-cyan-16), transparent 70%),
    var(--void);
}
.emily__fallback-orb {
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, var(--cyan-2), var(--electric));
  box-shadow: var(--shadow-glow-cyan);
  animation: emily-breathe 3s ease-in-out infinite;
}
/* text-only mode: no clip file yet, or playback refused. Fully functional. */
.emily[data-video="off"] .emily__video { display: none; }
.emily[data-video="off"] .emily__video-fallback { display: grid; }

/* ---------- CAPTIONS (always on — never a toggle) ---------- */
.emily__captions {
  padding: 14px 18px;
  font-size: 15px; line-height: 1.5;
  color: var(--ink);
  min-height: 62px;
  border-bottom: 1px solid var(--rule);
}
.emily__captions[data-partial="true"] { color: var(--ink-3); font-style: italic; }
.emily__captions:empty::before { content: '…'; color: var(--ink-4); }

/* ---------- CHIPS ---------- */
.emily__chip-row {
  display: flex; gap: 8px;
  padding: 12px 18px;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--rule);
}
.emily__chip-row::-webkit-scrollbar { display: none; }
.emily__chip-row[hidden] { display: none; }
.emily-chip {
  flex: 0 0 auto;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 12.5px; color: var(--ink-2);
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease);
}
.emily-chip:hover { border-color: var(--electric); background: var(--tint-electric-08); color: var(--ink); }

/* ---------- FOOT ---------- */
.emily__panel-foot { display: flex; align-items: center; gap: 8px; padding: 12px 14px 14px 18px; }
.emily__form { flex: 1 1 auto; display: flex; gap: 6px; min-width: 0; }
.emily__input {
  flex: 1 1 auto; min-width: 0;
  background: var(--void-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--ink);
  font-family: var(--f-body); font-size: 13.5px;
}
.emily__input:focus { outline: none; border-color: var(--electric); box-shadow: 0 0 0 3px var(--tint-electric-16); }
.emily__send, .emily__mic {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  display: grid; place-items: center;
  font-size: 13px;
  transition: all var(--dur-fast) var(--ease);
}
.emily__send:hover, .emily__mic:hover { border-color: var(--electric); color: var(--ink); }
.emily__mic[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 0 3px var(--tint-cyan-16); }
.emily__mic[hidden] { display: none; }
.emily__handoff {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: var(--ink-4);
  font-size: 11.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0 2px;
}
.emily__handoff:hover { color: var(--cyan); }

/* state cue that is NOT colour — a11y */
.emily[data-mode="listening"]   .emily__panel-sub::before,
.emily[data-mode="near-miss"]   .emily__panel-sub::before,
.emily[data-mode="no-match"]    .emily__panel-sub::before,
.emily[data-mode="handoff"]     .emily__panel-sub::before { margin-right: 6px; }
.emily[data-mode="listening"] .emily__panel-sub::before { content: '●'; color: var(--cyan); }
.emily[data-mode="near-miss"] .emily__panel-sub::before,
.emily[data-mode="no-match"]  .emily__panel-sub::before { content: '?'; }
.emily[data-mode="handoff"]   .emily__panel-sub::before { content: '→'; }

/* ---------- MOBILE — bottom sheet ---------- */
@media (max-width: 819px) {
  /* 88px keeps a full orb clear of a browser bottom bar and of any
     page-bottom Contact CTA */
  .emily { right: 16px; bottom: 88px; }
  .emily__panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100vw; max-width: 100vw;
    height: 78dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  .emily__video-wrap { flex: 0 0 auto; }
  .emily__captions { flex: 1 1 auto; overflow-y: auto; }
}
@media (max-width: 480px) {
  .emily__chip-row { flex-wrap: wrap; overflow-x: visible; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .emily__orb-ring, .emily__fallback-orb { animation: none; opacity: 1; transform: none; }
  .emily__orb-cap { animation: none; opacity: 1; }
  .emily__orb:hover { transform: none; }
}

/* ---------- FORCED COLORS ---------- */
@media (forced-colors: active) {
  .emily__panel, .emily__orb, .emily-chip { border-color: currentColor; }
}