/* Digivarsity Guide — Disha avatar, tours and Help Centre styling.
 * Self-contained: no Tailwind dependency, plain CSS with the site's brand
 * palette (orange #E8720C, blue #2563eb, navy #162236). */

/* ── Launcher ──────────────────────────────────────────────── */

/* White puck + orange ring: pops on the blue bands, the white body and the
   dark footer alike — a blue-on-blue orb disappeared into the site's bands.
   At rest it shows Disha working at her laptop rather than an abstract mark —
   a person waiting to be asked reads as available; a logo reads as a widget. */
#dv-avatar-launcher {
  position: fixed;
  bottom: 18px;
  left: 12px;
  z-index: 55;
  width: 132px;
  height: 132px;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  padding: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 0.2s ease;
}
#dv-avatar-launcher:hover { transform: scale(1.05); }
#dv-avatar-launcher.dv-hidden { display: none; }

/* Placeholder until the 3D scene arrives, and the permanent look on devices
   that skip 3D. The generic AI orb, nothing else — it is a FALLBACK, so it
   reads as "assistant available" rather than impersonating the 3D guide. */
.dv-launcher-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: none;
  filter: drop-shadow(0 8px 18px rgba(2, 6, 23, 0.35));
}
.dv-launcher-face svg { display: block; width: 76px; height: 76px; }

/* The live scene, reparented in here by dockToLauncher(). */
.dv-launcher-dock {
  position: absolute;
  inset: 0;
  display: none;
}
#dv-avatar-launcher.dv-launcher-3d .dv-launcher-dock { display: block; }
#dv-avatar-launcher.dv-launcher-3d .dv-launcher-face { display: none; }
/* Nothing but her: no card, no ring, no border — she sits on the page. */
#dv-avatar-launcher.dv-launcher-3d { background: transparent; box-shadow: none; }
#dv-avatar-launcher.dv-launcher-3d .dv-launcher-ring { display: none; }

/* Without a puck the affordance has to come from somewhere — this appears on
   hover and while she is speaking. */
.dv-launcher-label {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.86);
  color: #f8fafc;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#dv-avatar-launcher:hover .dv-launcher-label,
#dv-avatar-launcher:focus-visible .dv-launcher-label,
#dv-avatar-launcher.dv-narrating .dv-launcher-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Launcher-sized stage: she is framed head-to-keyboard here, not head-to-hips,
   so this box is square-ish rather than the panel's tall portrait.
   Qualified with the launcher's ID deliberately: `.dv-avatar-wrap.dv-stage-3d`
   further down this file sets the panel's 214x312 and has the same specificity,
   so on class alone the later rule won and the launcher rendered a 214x312
   scene cropped into a 132px box — i.e. an extreme close-up of her face. */
#dv-avatar-launcher .dv-avatar-wrap.dv-stage-desk {
  width: 100%;
  height: 100%;
  animation: none;
  filter: drop-shadow(0 10px 22px rgba(2, 6, 23, 0.42));
}
#dv-avatar-launcher .dv-avatar-wrap.dv-stage-desk > svg,
#dv-avatar-launcher .dv-avatar-wrap.dv-stage-desk .dv-expand-hint,
#dv-avatar-launcher .dv-avatar-wrap.dv-stage-desk .dv-mic-status { display: none; }

.dv-launcher-ring {
  position: absolute;
  left: calc(50% - 46px);
  top: calc(50% - 46px);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 2px solid rgba(232, 114, 12, 0.7);
  opacity: 0;
  pointer-events: none;
}
#dv-avatar-launcher.dv-narrating .dv-launcher-ring,
#dv-avatar-launcher.dv-touring .dv-launcher-ring {
  opacity: 1;
  animation: dv-ring-pulse 1.6s ease-out infinite;
}
@keyframes dv-ring-pulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* ── Panel ─────────────────────────────────────────────────── */

/* Disha is composited straight onto the page as a transparent cutout — no
   window, no header bar, no stage backdrop. Only the parts that carry text or
   take input are opaque: the bubble, the chips, the input pill and the small
   round controls. (Same treatment as the CRM guide.) */
#dv-avatar-panel {
  position: fixed;
  bottom: 24px;
  left: 16px;
  z-index: 70;
  width: 372px;
  max-width: calc(100vw - 32px);
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  position: fixed; /* anchor for the floating controls */
  pointer-events: none; /* the page shows through the gaps around her */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  animation: dv-panel-in 0.28s cubic-bezier(0.35, 1.2, 0.4, 1);
}
/* …but every actual control inside it stays clickable. */
#dv-avatar-panel > *,
#dv-avatar-panel .dv-bubble,
#dv-avatar-panel .dv-stage-canvas { pointer-events: auto; }
.dv-stage { pointer-events: none; }
#dv-avatar-panel[hidden] { display: none; }
@keyframes dv-panel-in {
  from { transform: translateY(18px) scale(0.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* No header bar: her name and face are the 3D model itself. The controls are
   lifted out of the flow and parked beside her head — the model is framed with
   fixed headroom, so these offsets land next to her face at any panel height.
   Left in normal flow they floated a long way above her and read as page
   furniture rather than hers. */
.dv-panel-head {
  position: absolute;
  top: 2px;
  /* Hard against the left of the panel — i.e. against the edge of the screen,
     where a rail of controls belongs. Parked beside her face (the old 100px)
     they sat ON the avatar and read as part of her rather than as the window
     furniture they are. */
  left: 0;
  /* Above the avatar. Both this and .dv-avatar-wrap are positioned with an
     auto z-index, so DOM order decided the stacking — and the wrap comes
     later, which put the 214px-wide canvas ON TOP of the leftmost control.
     Clicks on the style chip landed on the canvas (a no-op unless they hit
     her hands), which is exactly what "the Anime switch does nothing" was:
     the mute and close buttons sit clear of the canvas and always worked. */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 0;
  background: transparent;
  color: #0f172a;
}
/* Above her head, in a row — not down her side. Parked beside her face they
   sat ON her (see the shot in the 2026-08-07 review): the canvas is a
   transparent cutout, so anything overlapping it lands on her jacket. Clearing
   the top of the canvas entirely is the only placement that cannot collide
   with her at any framing, and a row centred over her reads as her controls
   rather than as page furniture. */
#dv-avatar-panel.dv-panel-3d .dv-panel-head {
  /* A COLUMN beside her head, not a row over it: stacked, the rail occupies
     the empty strip down the left of the canvas that she never fills, so it
     costs no vertical space above her and cannot land on her hair.
     `top` is set from JS (positionRail in avatar.js), measured against where
     her head actually is — that changes with the mode, the canvas size and
     the model, so no constant here can be right for all of them. This value
     is only what shows for the frame before the first measurement lands. */
  top: 4px;
  bottom: auto;
  left: 0;
  width: auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
#dv-avatar-panel.dv-panel-3d .dv-head-btns {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
/* The flat SVG badge is only 96px wide, so the rail would sit on top of it.
   Give the stage row the rail's width back. */
#dv-avatar-panel:not(.dv-panel-3d) .dv-stage { padding-left: 38px; }
/* Controls stack VERTICALLY beside her head. Laid out in a row they ran across
   the page next to her face and needed the panel to be wider than the avatar;
   a column tucks into the space her shoulder already occupies. */
.dv-panel-head { flex-direction: column; align-items: flex-start; gap: 6px; }

.dv-head-id { display: none; }
.dv-head-id-legacy {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.dv-head-face {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  flex-shrink: 0;
}
.dv-head-face svg { display: block; }
.dv-head-id strong {
  display: block;
  font-size: 0.9rem;
  line-height: 1.15;
}
.dv-head-id span {
  display: block;
  font-size: 0.68rem;
  opacity: 0.75;
}
.dv-head-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex-shrink: 0;
}
/* Opaque pills on their own so they stay readable over any page content. */
.dv-head-btns button {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  transition: background 0.15s ease;
}
.dv-head-btns button:hover { background: #fff; }

/* ── Stage (avatar + bubble) ───────────────────────────────── */

.dv-stage {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 0 0 6px;
  background: transparent;
  min-height: 118px;
}
#dv-avatar-panel.dv-panel-3d .dv-stage {
  min-height: 320px;
  padding-bottom: 0;
  background: transparent;
}
#dv-avatar-panel.dv-panel-3d { width: 468px; }

/* The conversation keeps the original stacked layout: the bubble sits beside
   her in the stage row, and the chips, results and input pill run the full
   width of the panel underneath. A grid that pinned all four into one narrow
   column beside her was tried and reverted — it squeezed the chips into a
   single stack and put a scrollbar in the bubble. */
.dv-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  animation: dv-float 4.5s ease-in-out infinite;
}
/* Once the 3D model is live it replaces the SVG and gets a taller stage —
   the float animation stops because the model has its own idle motion. */
/* Standing on the page rather than in a box, she needs her own shadow to
   separate from whatever is behind her. */
.dv-avatar-wrap.dv-stage-3d {
  width: 214px;
  height: 312px;
  animation: none;
  filter: drop-shadow(0 14px 30px rgba(2, 6, 23, 0.4));
}
.dv-avatar-wrap.dv-stage-3d > svg { display: none; }
.dv-stage-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.dv-stage-canvas.dv-stage-ready { opacity: 1; }
/* she reacts to clicks on her hands / watch */
.dv-stage-3d .dv-stage-canvas { cursor: pointer; }

/* Guide switcher — same round icon button as mute and close, in the brand blue
   so it reads as an action rather than a state. (It used to be an "ANIME" pill;
   see STYLE_ICON in avatar.js for why that failed.) */
.dv-head-btns button.dv-style-btn {
  color: #1d4ed8;
  background: rgba(224, 231, 255, 0.95);
  border: 1px solid rgba(37, 99, 235, 0.3);
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.dv-head-btns button.dv-style-btn:hover { background: #c7d2fe; color: #1e3a8a; }
.dv-head-btns button.dv-style-btn:disabled { opacity: 0.55; cursor: progress; }
.dv-head-btns button.dv-style-btn[hidden] { display: none; }

/* The moment between disposing one model and the next one appearing. */
.dv-avatar-wrap.dv-stage-swapping { opacity: 0.35; transition: opacity 0.2s ease; }

@keyframes dv-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* AI mark: slow orbit idle, sparkle pulses per spoken word */
.dv-ai-mark .dv-ai-orbit {
  transform-origin: center;
  transform-box: fill-box;
  animation: dv-orbit 7s linear infinite;
}
@keyframes dv-orbit {
  from { transform: rotate(-24deg); }
  to { transform: rotate(336deg); }
}
.dv-ai-mark .dv-ai-spark {
  transform-origin: center;
  transform-box: fill-box;
}
.dv-talking .dv-ai-mark .dv-ai-spark,
.dv-speaking .dv-ai-mark .dv-ai-spark {
  animation: dv-spark-pulse 0.55s ease-in-out infinite;
}
.dv-talking .dv-ai-mark .dv-ai-spark-sm,
.dv-speaking .dv-ai-mark .dv-ai-spark-sm { animation-delay: 0.18s; }
@keyframes dv-spark-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.22); opacity: 0.85; }
}

/* thinking: brows + gentle tilt */
.dv-thinking { animation: dv-tilt 1.2s ease-in-out infinite; }
@keyframes dv-tilt {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-2.5deg); }
}

.dv-bubble {
  position: relative;
  flex: 1;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.97) 0%, rgba(244, 248, 255, 0.95) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px 16px 16px 5px;
  padding: 11px 13px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #1e293b;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
  max-height: 170px;
  overflow-y: auto;
}
.dv-bubble-pop { animation: dv-pop 0.22s ease-out; }
@keyframes dv-pop {
  from { transform: scale(0.94); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}
/* Reading finished: the bubble has been heard, so it leaves. visibility keeps
   the column from reflowing under the chips mid-glance. */
.dv-bubble.dv-bubble-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

/* On a transparent panel a bare caption would sit on the page itself, so it
   gets its own small opaque strip. */
.dv-caption {
  align-self: flex-start;
  max-width: 100%;
  margin: 4px 0 0;
  padding: 4px 10px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.2);
  font-size: 0.72rem;
  color: #64748b;
}
.dv-caption a { color: #2563eb; font-weight: 600; text-decoration: none; }
.dv-caption a:hover { text-decoration: underline; }

/* ── Actions (chips + result cards) ────────────────────────── */

.dv-actions {
  padding: 8px 0 4px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.dv-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 5px;
  max-width: 100%;
}
/* Small frosted pills: a faint gradient and a blur so they sit on any page
   background without a heavy card behind them. */
.dv-chip {
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(100, 116, 139, 0.34);
  /* Opaque on purpose: these sit directly on page copy and images, and a
     see-through pill was unreadable over both. */
  background: linear-gradient(135deg, #ffffff 0%, #e9f0ff 100%);
  color: #0f172a;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease,
    border-color 0.15s ease;
}
.dv-chip:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #ffffff 0%, #e6efff 100%);
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.18);
}
.dv-chip:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12); }

/* A tour chip performs an action rather than asking a question — warm accent
   and a play marker so the difference is readable at a glance. */
.dv-chip-tour {
  background: linear-gradient(135deg, #fffaf2 0%, #ffe4c4 100%);
  border-color: rgba(232, 114, 12, 0.42);
  color: #8a3009;
}
.dv-chip-tour::before {
  content: "▶";
  font-size: 0.5rem;
  margin-right: 5px;
  vertical-align: 1px;
  opacity: 0.7;
}
.dv-chip-tour:hover {
  background: linear-gradient(135deg, #fffaf3 0%, #ffe2c2 100%);
  border-color: rgba(232, 114, 12, 0.5);
  box-shadow: 0 6px 16px rgba(232, 114, 12, 0.2);
}

.dv-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.dv-result-card {
  text-align: left;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 14px;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.97) 0%, rgba(244, 248, 255, 0.94) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.dv-result-card:hover {
  border-color: #93b4f0;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.13);
  transform: translateY(-1px);
}
.dv-result-card strong {
  font-size: 0.8rem;
  color: #0f172a;
  line-height: 1.3;
}
.dv-result-uni { font-size: 0.7rem; color: #64748b; }
.dv-result-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.dv-badge {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  background: #f1f5f9;
  color: #475569;
}
.dv-badge-blue { background: #eff6ff; color: #1d4ed8; }
.dv-badge-green { background: #f0fdf4; color: #15803d; }
.dv-badge-orange { background: #fff7ed; color: #c2410c; }
.dv-result-reason {
  font-size: 0.68rem;
  color: #94a3b8;
  font-style: italic;
}

/* ── Input row ─────────────────────────────────────────────── */

/* A floating pill rather than a footer welded to a panel that no longer
   exists. Kept deliberately narrow: full-width it was a bar across the corner
   of the page, and it only ever holds a short question. */
.dv-input-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  width: 268px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 4px 5px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 247, 255, 0.96) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}
.dv-input-row input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.74rem;
  outline: none;
  background: transparent;
  color: #0f172a;
}
.dv-input-row input::placeholder { color: #94a3b8; }
.dv-input-row input:focus { box-shadow: none; }
.dv-input-row button {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
#dv-mic-btn { background: #eef2f7; color: #475569; }
#dv-mic-btn:hover { background: #e2e8f0; }
/* Recording right now. */
#dv-mic-btn.dv-mic-live {
  background: #dc2626;
  color: #fff;
  animation: dv-mic-pulse 1.2s ease-in-out infinite;
}
/* Conversation is on but it's her turn — she's speaking or thinking, and the
   mic picks back up the moment she's done. */
#dv-mic-btn.dv-mic-armed {
  background: #fee2e2;
  color: #b91c1c;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.28);
}
@keyframes dv-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); }
}
#dv-send-btn { background: #2563eb; color: #fff; }
#dv-send-btn:hover { background: #1d4ed8; }

/* ── Live mic status ───────────────────────────────────────── */

/* The pill that makes an open mic unmistakable: a pulsing dot, five bars
   moving with the visitor's own voice (transforms set from the analyser in
   avatar.js), and a state label. A static mic icon convinces nobody that she
   can hear them — the bars reacting to THEM is what does.

   It floats at her feet, absolutely positioned inside .dv-avatar-wrap, so it
   takes NO row of the panel: chips, results and the input pill keep every
   pixel they had. (Its first version sat in the panel flow and squeezed the
   course chips half off screen.)

   While she LISTENS it is a light (pointer-events none). While she TALKS it
   is the interrupt control — "Tap to interrupt" is the only way to cut her
   off mid-line, so it must read and behave as a button then. */
.dv-mic-status {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  color: #f8fafc;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.28);
  animation: dv-mic-in 0.18s ease-out;
}
.dv-mic-status[hidden] { display: none; }
.dv-mic-status.dv-mic-status-armed {
  pointer-events: auto;
  cursor: pointer;
}
.dv-mic-status.dv-mic-status-armed:hover { background: rgba(15, 23, 42, 0.98); }
/* Fade only — a keyframe that ends at transform:none would wipe the
   centering translateX. */
@keyframes dv-mic-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.dv-mic-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}
/* Recording right now. */
.dv-mic-status-listening .dv-mic-dot {
  background: #ef4444;
  animation: dv-mic-dot 1.1s ease-in-out infinite;
}
/* Her turn — the mic is open and she can be talked over. */
.dv-mic-status-armed .dv-mic-dot { background: #f59e0b; }
@keyframes dv-mic-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}
.dv-mic-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 13px;
  flex-shrink: 0;
}
.dv-mic-bars i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: #34d399;
  transform: scaleY(0.16);
  transform-origin: bottom;
  transition: transform 80ms linear;
}
/* While she talks the meter idles grey, so green + moving can only ever mean
   "we hear you". */
.dv-mic-status-armed .dv-mic-bars i { background: #64748b; }

@media (prefers-reduced-motion: reduce) {
  .dv-mic-status-listening .dv-mic-dot { animation: none; }
  .dv-mic-bars i { transition: none; }
}

/* ── Resting (compact) panel ───────────────────────────────── */

/* The complaint after the demo was that she owns a corner of the page whether
   or not anyone is talking to her. So the open panel has two sizes:
     compact  — just Disha and her two controls. Nothing to read, nothing to
                dismiss, the page shows through everywhere else.
     expanded — the whole thing: bubble, chips, results, input pill.
   Hovering her, focusing anything inside her, talking to her, or her having
   something to show all expand it; moving away collapses it again. */
#dv-avatar-panel.dv-panel-compact {
  width: auto;
  max-height: none;
}
/* The control rail is NOT part of the conversation, so it survives the
   collapse: whichever size she is, close / switch guide / mute are in the same
   place. (The style switch used to vanish here, which read as the button
   disappearing at random.) */
#dv-avatar-panel.dv-panel-compact .dv-caption,
#dv-avatar-panel.dv-panel-compact .dv-actions,
#dv-avatar-panel.dv-panel-compact .dv-input-row {
  display: none;
}
/* While collapsed she may still be mid-sentence — the bubble shrinks to a
   glanceable two-line whisper rather than disappearing, so a spoken answer is
   never invisible to someone who has muted her. */
#dv-avatar-panel.dv-panel-compact .dv-bubble {
  flex: 0 1 auto;
  max-width: 208px;
  max-height: 58px;
  padding: 7px 10px;
  font-size: 0.72rem;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Nothing being said, nothing being asked: no bubble at all. */
#dv-avatar-panel.dv-panel-compact.dv-panel-quiet .dv-bubble { display: none; }

/* A hint that she opens up, for people who would never think to hover an
   avatar. Fades out for good once they have expanded her once. */
.dv-expand-hint {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  color: #f8fafc;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
#dv-avatar-panel.dv-panel-compact .dv-expand-hint { opacity: 0.9; }
#dv-avatar-panel.dv-hint-done .dv-expand-hint { display: none; }

/* The panel grows and shrinks around her; animating the size itself would
   reflow the 3D canvas every frame, so only the parts that appear animate. */
#dv-avatar-panel .dv-actions,
#dv-avatar-panel .dv-input-row,
#dv-avatar-panel .dv-caption {
  animation: dv-reveal 0.18s ease-out;
}
@keyframes dv-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ── Dragged to the other side (dock.js) ───────────────────── */

/* She ships bottom-left and stays there until somebody drags her. A drag
   snaps her to the nearer SIDE at the height she was let go — the vertical
   offset is an inline `bottom` set by dock.js, and everything horizontal is
   here, so the phone layout below keeps its own rules for a panel that spans
   the screen. */

/* Her height comes from an inline `bottom`, so nothing may anchor her by the
   top as well — a rule doing both would stretch her instead of moving her. */
html.dv-docked #dv-avatar-launcher,
html.dv-docked #dv-avatar-panel { top: auto; }

html.dv-dock-right #dv-avatar-launcher { left: auto; right: 12px; }
html.dv-dock-right #dv-avatar-panel { left: auto; right: 16px; }

/* The control rail lives against the outer edge of the panel — i.e. against
   the edge of the SCREEN, which is the right-hand one now. Left where it was,
   it would sit in the middle of the page pointing at nothing. */
html.dv-dock-right .dv-panel-head,
html.dv-dock-right #dv-avatar-panel.dv-panel-3d .dv-panel-head {
  left: auto;
  right: 0;
  align-items: flex-end;
}
html.dv-dock-right #dv-avatar-panel.dv-panel-3d .dv-head-btns { align-items: flex-end; }
/* The flat-SVG badge is narrower than the rail, so the gap the rail needs
   moves to the other side with it. */
html.dv-dock-right #dv-avatar-panel:not(.dv-panel-3d) .dv-stage {
  padding-left: 0;
  padding-right: 38px;
}

/* While a drag is in progress: no float animation fighting the finger, no
   hover growth, no text selection anywhere on the page, and a cursor that
   says what is happening. */
html.dv-dragging, html.dv-dragging body { user-select: none; cursor: grabbing; }
html.dv-dragging #dv-avatar-launcher,
html.dv-dragging #dv-avatar-panel { transition: none; animation: none; }
html.dv-dragging #dv-avatar-launcher:hover { transform: none; }
html.dv-dragging .dv-avatar-wrap { animation: none; }
/* Grabbable, and it says so — but only on a pointer that has a cursor. */
@media (hover: hover) {
  #dv-avatar-launcher, .dv-avatar-wrap { cursor: grab; }
  html.dv-dragging #dv-avatar-launcher,
  html.dv-dragging .dv-avatar-wrap { cursor: grabbing; }
}

/* ── Mobile ────────────────────────────────────────────────── */

@media (max-width: 640px) {
  #dv-avatar-panel {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-height: 82vh;
  }
  /* Compact must not stretch edge to edge — that is the space-hogging this
     mode exists to stop. */
  #dv-avatar-panel.dv-panel-compact { right: auto; }
  /* stay clear of the finder FAB which sits at bottom-24 (96px) left-4 */
  #dv-avatar-launcher { bottom: 14px; left: 6px; width: 96px; height: 96px; }

  /* Dragged right, on a phone: the expanded panel still spans the screen (it
     is a full card there, and half a screen of chat is unusable), so only the
     launcher and the resting panel actually change sides. */
  html.dv-dock-right #dv-avatar-panel { left: 8px; right: 8px; }
  html.dv-dock-right #dv-avatar-panel.dv-panel-compact { left: auto; right: 8px; }
  html.dv-dock-right #dv-avatar-launcher { left: auto; right: 6px; }
}

/* ── Marker pen (spotlight.js) ─────────────────────────────── */

/* A layer of ink over the page, nothing else: no backdrop, no dimming, no
   click capture. The page stays exactly as readable as it was — the point is to
   point, not to take over. */
#dv-spotlight-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60; /* over the page, under the panel (70) */
  overflow: visible;
}
.dv-spot-ink {
  fill: none;
  stroke: #E8720C;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
  filter: drop-shadow(0 2px 6px rgba(232, 114, 12, 0.45));
  transition: opacity 0.18s ease;
}
/* A highlighter swipe rather than a ring: thicker, softer, translucent, so the
   text underneath stays readable through it. */
.dv-spot-ink-underline {
  stroke: rgba(232, 114, 12, 0.62);
  stroke-width: 6;
  filter: none;
}
.dv-spot-ink-out { opacity: 0; }

/* The one-line note beside the mark. Dark glass so it reads over any part of
   any page, and small enough that it never becomes the thing being read. */
.dv-spot-note {
  position: fixed;
  z-index: 61;
  max-width: 300px;
  padding: 8px 13px;
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(22, 34, 58, 0.96) 0%, rgba(30, 58, 138, 0.96) 100%);
  color: #eef4ff;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.dv-spot-note.dv-spot-note-in { opacity: 1; transform: none; }
.dv-spot-note::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, #E8720C 0%, #fbbf24 55%, #38bdf8 100%);
}
/* The way out of a walkthrough. Sits on the corner of the note she is reading,
   so it is wherever the visitor is already looking. The only part of the
   spotlight that accepts a pointer — everything else lets clicks through to the
   page, which stays live the whole time. */
.dv-spot-stop {
  position: fixed;
  z-index: 62;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #16223a;
  color: #eef4ff;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.45);
  transition: background 0.15s ease, transform 0.15s ease;
}
.dv-spot-stop:hover { background: #E8720C; transform: scale(1.08); }
.dv-spot-stop:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }

@media (max-width: 640px) {
  .dv-spot-note { max-width: calc(100vw - 32px); font-size: 0.74rem; }
  /* Bigger touch target than the desktop dot — this is the escape hatch. */
  .dv-spot-stop { width: 34px; height: 34px; font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dv-spot-ink { transition: none; }
  .dv-spot-note { transition: opacity 0.1s linear; transform: none; }
  .dv-spot-stop { transition: none; }
  .dv-spot-stop:hover { transform: none; }
}

/* ── Tour presenter — Disha stands beside the tour, pointing ── */

#dv-tour-presenter {
  position: fixed;
  /* JS drives left/top so she can glide clear of the spotlight each step;
     these are only the first-frame defaults. */
  top: auto;
  bottom: 14px;
  left: 14px;
  width: 216px;
  height: 308px;
  transition: left 0.55s cubic-bezier(0.4, 0.85, 0.35, 1),
    top 0.55s cubic-bezier(0.4, 0.85, 0.35, 1);
  z-index: 999999998; /* above the driver.js overlay (10000), below its popover */
  display: none;
  pointer-events: none; /* she narrates; clicks pass through to the tour */
  filter: drop-shadow(0 14px 30px rgba(2, 6, 23, 0.5));
  animation: dv-presenter-in 0.35s cubic-bezier(0.35, 1.2, 0.4, 1);
}
#dv-tour-presenter.dv-presenter-active { display: block; }
@keyframes dv-presenter-in {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
/* the reparented stage fills the presenter, whatever size it had in the panel */
#dv-tour-presenter .dv-avatar-wrap,
#dv-tour-presenter .dv-avatar-wrap.dv-stage-3d {
  width: 100%;
  height: 100%;
  animation: none;
}
/* Only the 3D model presents — the flat SVG blown up to this size reads as a
   giant badge, so it never appears here. */
#dv-tour-presenter .dv-avatar-wrap > svg { display: none; }
@media (max-width: 640px) {
  #dv-tour-presenter { width: 130px; height: 186px; bottom: 8px; left: 8px; }
}

/* ── Tour (driver.js) — modern spotlight theme ─────────────── */
/* driver.js ships a pale grey popover and a flat cutout. Everything below
   overrides that: a glowing animated ring around the highlighted element and
   a dark glass popover with a gradient accent bar. */

/* the cut-out element itself: bright ring + halo, and it lifts off the page */
.driver-active-element,
body.driver-active .driver-active-element {
  border-radius: 10px !important;
  outline: 3px solid #E8720C !important;
  outline-offset: 3px;
  box-shadow:
    0 0 0 6px rgba(232, 114, 12, 0.28),
    0 0 26px 6px rgba(232, 114, 12, 0.45),
    0 18px 45px rgba(2, 6, 23, 0.45) !important;
  animation: dv-spot-pulse 2.1s ease-in-out infinite;
}
@keyframes dv-spot-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 6px rgba(232, 114, 12, 0.28),
      0 0 26px 6px rgba(232, 114, 12, 0.45),
      0 18px 45px rgba(2, 6, 23, 0.45);
  }
  50% {
    box-shadow:
      0 0 0 11px rgba(232, 114, 12, 0.14),
      0 0 40px 12px rgba(232, 114, 12, 0.6),
      0 18px 45px rgba(2, 6, 23, 0.45);
  }
}

/* darker, cooler overlay than the default flat grey */
.driver-overlay { color: #0b1220 !important; }

.driver-popover {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  border-radius: 16px !important;
  padding: 0 !important;
  min-width: 290px;
  max-width: 348px;
  background: linear-gradient(158deg, #16233a 0%, #1e3a8a 100%) !important;
  color: #eef4ff !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.55), 0 0 0 1px rgba(232, 114, 12, 0.25) !important;
  overflow: hidden;
  animation: dv-pop-in 0.26s cubic-bezier(0.34, 1.3, 0.5, 1);
}
@keyframes dv-pop-in {
  from { transform: scale(0.94) translateY(6px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
/* gradient accent bar across the top */
.driver-popover::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #E8720C 0%, #fbbf24 50%, #38bdf8 100%);
}

.driver-popover-title {
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  padding: 16px 18px 0 !important;
  line-height: 1.3;
}
.driver-popover-description {
  font-size: 0.83rem !important;
  line-height: 1.6 !important;
  color: #c9d8f2 !important;
  padding: 7px 18px 4px !important;
}
.driver-popover-description b { color: #ffd9a8; font-weight: 700; }

.driver-popover-progress-text {
  font-size: 0.68rem !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8fb0e8 !important;
}
.driver-popover-footer {
  padding: 4px 18px 16px !important;
  gap: 6px;
}
.driver-popover-navigation-btns { gap: 6px !important; }
.driver-popover-footer button {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #eef4ff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  text-shadow: none !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  padding: 6px 13px !important;
  transition: background 0.15s ease, transform 0.15s ease;
}
.driver-popover-footer button:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  transform: translateY(-1px);
}
/* the primary Next button carries the brand orange */
.driver-popover-next-btn {
  background: linear-gradient(180deg, #F0851F 0%, #E8720C 100%) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(232, 114, 12, 0.45) !important;
}
.driver-popover-next-btn:hover {
  background: linear-gradient(180deg, #f5923a 0%, #ef7d13 100%) !important;
}
.driver-popover-close-btn {
  color: #b9cbe9 !important;
  background: transparent !important;
  border: none !important;
  font-size: 20px !important;
  padding: 8px 12px !important;
}
.driver-popover-close-btn:hover { color: #fff !important; background: transparent !important; }
/* arrow must follow the dark popover, not driver's white default */
.driver-popover-arrow-side-left { border-left-color: #1e3a8a !important; }
.driver-popover-arrow-side-right { border-right-color: #16233a !important; }
.driver-popover-arrow-side-top { border-top-color: #16233a !important; }
.driver-popover-arrow-side-bottom { border-bottom-color: #1b3068 !important; }

.dv-tour-autoplay-btn {
  margin-right: auto;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffd9a8 !important;
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease;
}
.dv-tour-autoplay-btn:hover { background: rgba(255, 255, 255, 0.2) !important; }

/* ── Help Centre page ──────────────────────────────────────── */

.dvh-shell {
  display: flex;
  gap: 20px;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  min-height: 70vh;
}
.dvh-sidebar {
  width: 300px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: flex-start;
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
}
#dvh-search {
  width: 100%;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 0.85rem;
  outline: none;
}
#dvh-search:focus { border-color: #93b4f0; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.dvh-nav {
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dvh-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 0.83rem;
  color: #334155;
  cursor: pointer;
  transition: background 0.12s ease;
}
.dvh-nav-item:hover { background: #f1f5f9; }
.dvh-nav-item.dvh-active {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}
.dvh-nav-item small {
  display: block;
  font-size: 0.68rem;
  color: #94a3b8;
  font-weight: 400;
  margin-top: 1px;
}
.dvh-nav-tours {
  border: 1px dashed #c7d7f5;
  background: #f8fbff;
  margin-bottom: 6px;
}
.dvh-search-result small { color: #64748b; }
.dvh-sidebar-foot {
  border-top: 1px solid #eef2f7;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dvh-sidebar-foot button {
  border: 1px solid #c7d7f5;
  background: #fff;
  color: #1d4ed8;
  border-radius: 9px;
  padding: 7px 11px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.dvh-sidebar-foot button:hover { background: #f2f7ff; }

.dvh-article {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px 32px;
  overflow-x: hidden;
}
.dvh-article h1 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #162236;
  margin: 0 0 14px;
}
.dvh-article h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e3a8a;
  margin: 26px 0 10px;
  padding-top: 6px;
}
.dvh-article h3 { font-size: 1rem; font-weight: 700; margin: 18px 0 8px; }
.dvh-article p { font-size: 0.9rem; line-height: 1.7; color: #334155; margin: 0 0 12px; }
.dvh-article ul, .dvh-article ol { margin: 0 0 14px 22px; font-size: 0.9rem; color: #334155; }
.dvh-article li { margin-bottom: 6px; line-height: 1.6; }
.dvh-article blockquote {
  border-left: 4px solid #93b4f0;
  background: #f8fbff;
  border-radius: 0 10px 10px 0;
  padding: 10px 14px;
  margin: 0 0 14px;
}
.dvh-article blockquote p { margin: 0; font-size: 0.85rem; }
.dvh-article a { color: #2563eb; font-weight: 600; text-decoration: none; }
.dvh-article a:hover { text-decoration: underline; }
.dvh-article code {
  background: #f1f5f9;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.82em;
}
.dvh-table-wrap { overflow-x: auto; margin: 0 0 14px; }
.dvh-article table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.dvh-article th, .dvh-article td {
  border: 1px solid #e2e8f0;
  padding: 8px 11px;
  text-align: left;
}
.dvh-article th { background: #f8fafc; font-weight: 700; }
.dvh-article hr { border: none; border-top: 1px solid #e2e8f0; margin: 20px 0; }

/* tours gallery on the help page */
.dvh-tours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.dvh-tour-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dvh-tour-card:hover { border-color: #93b4f0; box-shadow: 0 4px 16px rgba(37, 99, 235, 0.1); }
.dvh-tour-card strong { font-size: 0.9rem; color: #0f172a; }
.dvh-tour-card p { font-size: 0.78rem; color: #64748b; margin: 0; flex: 1; }
.dvh-tour-card .dvh-tour-page {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1d4ed8;
}
.dvh-tour-card button {
  align-self: flex-start;
  margin-top: 6px;
  border: none;
  background: #2563eb;
  color: #fff;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.dvh-tour-card button:hover { background: #1d4ed8; }
.dvh-tour-note { font-size: 0.72rem; color: #c2410c; margin-top: 4px; }
.dvh-tour-note a { color: #c2410c; font-weight: 700; }

@media (max-width: 860px) {
  .dvh-shell { flex-direction: column; }
  .dvh-sidebar { width: auto; position: static; max-height: none; }
}