/* ══════════════════════════════════════════════════════════════════════════
   Live agent — meeting layout.
   Left: a large, realistically shaded presenter seated across the table with
   captions and the mic. Right: a side panel that holds everything else (plan
   notes, suggestions, transcript, settings, composer).
   ══════════════════════════════════════════════════════════════════════════ */
.dns-agent-backdrop { position: fixed; inset: 0; z-index: 7000; background: rgba(2,6,23,.78); backdrop-filter: blur(8px); animation: fadeIn .2s ease both; }
.dns-agent-window {
  position: fixed; z-index: 7001; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1240px, calc(100vw - 32px)); height: min(860px, calc(100vh - 32px));
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: minmax(0, 1fr);
  border-radius: 24px; overflow: hidden; color: #e2e8f0;
  font-family: var(--dns-font-sans, 'Inter', system-ui, sans-serif); font-size: .875rem; line-height: 1.55; -webkit-font-smoothing: antialiased;
  background: #070b16; border: 1px solid rgba(129,140,248,.22);
  box-shadow: 0 40px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03) inset;
  animation: dnsAgentIn .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes dnsAgentIn { from { opacity: 0; transform: translate(-50%, -48%) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ── Minimized: window stays mounted (call keeps running) but is hidden off-screen; a chip takes its place ── */
.dns-agent-window.minimized { opacity: 0; pointer-events: none; transform: translate(-50%, 120vh); animation: none; }
.dns-agent-minichip {
  position: fixed; right: 18px; bottom: 18px; z-index: 6900; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 8px; max-width: min(420px, calc(100vw - 36px)); border-radius: 999px; cursor: pointer; text-align: left;
  color: #e2e8f0; background: rgba(7,11,22,.92); border: 1px solid rgba(129,140,248,.35);
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset; backdrop-filter: blur(10px);
  font-family: var(--dns-font-sans, 'Inter', system-ui, sans-serif); animation: fadeIn .2s ease both;
}
.dns-agent-minichip:hover { border-color: rgba(165,180,252,.6); }
.dns-agent-minichip-orb { position: relative; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #c7d2fe, #6366f1 55%, #312e81); box-shadow: 0 0 18px rgba(99,102,241,.6); }
.dns-agent-minichip-orb strong { font-size: .8rem; color: #fff; }
.dns-agent-minichip-orb i { position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(165,180,252,.45); opacity: 0; }
.dns-agent-minichip.speaking .dns-agent-minichip-orb i { animation: dnsChipPulse 1.6s ease-out infinite; }
.dns-agent-minichip.speaking .dns-agent-minichip-orb i:nth-child(2) { animation-delay: .5s; }
.dns-agent-minichip.speaking .dns-agent-minichip-orb i:nth-child(3) { animation-delay: 1s; }
.dns-agent-minichip.listening .dns-agent-minichip-orb { box-shadow: 0 0 18px rgba(52,211,153,.6); }
.dns-agent-minichip.thinking .dns-agent-minichip-orb { animation: dnsChipSpin 1.4s linear infinite; }
@keyframes dnsChipPulse { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
@keyframes dnsChipSpin { to { filter: hue-rotate(360deg); } }
.dns-agent-minichip-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.dns-agent-minichip-text b { font-size: .8rem; font-weight: 600; white-space: nowrap; }
.dns-agent-minichip-text small { font-size: .72rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.dns-agent-minichip-credits { font-size: .7rem; color: #a5b4fc; padding: 2px 8px; border-radius: 999px; background: rgba(99,102,241,.15); white-space: nowrap; }
.dns-agent-minichip-close { font-size: .8rem; color: #94a3b8; padding: 4px 6px; border-radius: 50%; }
.dns-agent-minichip-close:hover { color: #fca5a5; background: rgba(248,113,113,.12); }

/* ── Stage ─────────────────────────────────────────────────────────────── */
.dns-agent-stage {
  position: relative; min-width: 0; min-height: 0; overflow: hidden; display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(99,102,241,.22), transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 100%, rgba(14,165,233,.10), transparent 70%),
    linear-gradient(180deg, #0d1324 0%, #0a0f1d 55%, #05080f 100%);
}
/* meeting table edge */
.dns-agent-stage::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 84px; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(30,27,46,0) 0%, rgba(44,38,58,.85) 30%, #1a1626 100%); border-top: 1px solid rgba(255,255,255,.08); transform: perspective(600px) rotateX(55deg); transform-origin: bottom; }
.dns-agent-viewport { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.dns-avatar { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); height: 96%; max-height: calc(100% - 30px); width: auto; max-width: 100%; z-index: 1; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); animation: dnsBreath 5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes dnsBreath { 0%,100% { transform: translateX(-50%) translateY(0) scale(1); } 50% { transform: translateX(-50%) translateY(-4px) scale(1.008); } }
.dns-agent-stage.small { position: static; height: 240px; display: block; background: none; }
.dns-agent-stage.small::after { display: none; }
.dns-agent-stage.small .dns-avatar { position: relative; left: auto; bottom: auto; transform: none; height: 240px; animation: none; }

.dns-agent-head { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px 12px; min-width: 0; }
.dns-agent-title { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; border-radius: 999px; background: rgba(2,6,23,.6); border: 1px solid rgba(148,163,184,.14); backdrop-filter: blur(6px); min-width: 0; width: fit-content; max-width: 100%; }
.dns-agent-sub { font-size: .72rem; font-weight: 500; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; padding-left: 8px; border-left: 1px solid rgba(148,163,184,.2); }
.dns-agent-dot { width: 8px; height: 8px; border-radius: 50%; background: #64748b; }
.dns-agent-window.listening .dns-agent-dot { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.2); animation: dnsPulse 1.2s ease-in-out infinite; }
.dns-agent-window.speaking .dns-agent-dot { background: #818cf8; animation: dnsPulse 0.8s ease-in-out infinite; }
.dns-agent-window.thinking .dns-agent-dot { background: #f59e0b; animation: dnsPulse 1.6s ease-in-out infinite; }
@keyframes dnsPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .6; } }
.dns-agent-head-actions { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; justify-self: end; }
.dns-agent-icon, .dns-agent-recbtn, .dns-agent-mic, .dns-agent-send { height: 36px; min-width: 36px; padding: 0 10px; border-radius: 12px; border: 1px solid rgba(148,163,184,.22); background: rgba(2,6,23,.55); backdrop-filter: blur(6px); color: #e2e8f0; cursor: pointer; font-size: .78rem; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.dns-agent-icon svg, .dns-agent-recbtn svg, .dns-agent-mic svg, .dns-agent-send svg { width: 18px; height: 18px; }
.dns-agent-icon:hover, .dns-agent-recbtn:hover, .dns-agent-mic:hover:not(:disabled) { background: rgba(51,65,85,.9); }
.dns-agent-icon.on { color: #a5f3fc; border-color: rgba(34,211,238,.45); background: rgba(8,145,178,.25); }
/* Thin indeterminate bar along the top of the stage while connecting / thinking. */
.dns-agent-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 6; overflow: hidden; background: rgba(129,140,248,.12); }
.dns-agent-progress i { position: absolute; top: 0; bottom: 0; width: 38%; border-radius: 3px; background: linear-gradient(90deg, transparent, #818cf8 30%, #22d3ee 70%, transparent); animation: dnsProgress 1.4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes dnsProgress { 0% { left: -40%; } 100% { left: 100%; } }

.dns-agent-captions { position: relative; z-index: 3; align-self: end; justify-self: center; width: min(92%, 760px); padding: 0 0 14px; display: flex; flex-direction: column; align-items: center; pointer-events: none; transition: opacity .2s ease; }
.dns-agent-captions.hidden { opacity: 0; }
/* Named subtitle rows: "You" (right, teal) and "Nady" (left, indigo) so both sides of the exchange are readable. */
.dns-agent-cap { display: flex; gap: 10px; align-items: flex-start; padding: 8px 14px; border-radius: 14px; background: rgba(2,6,23,.78); border: 1px solid rgba(148,163,184,.14); backdrop-filter: blur(8px); font-size: clamp(.92rem, 1.3vw, 1.06rem); line-height: 1.45; color: #f1f5f9; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; }
.dns-agent-cap.agent { border-color: rgba(129,140,248,.35); }
.dns-agent-cap.agent.live { background: rgba(23,22,56,.84); border-color: rgba(165,180,252,.45); }
.dns-agent-cap.agent.live .dns-agent-cap-text { color: #e0e7ff; }
.dns-agent-cap.agent.live .dns-agent-cap-text::after { content: "▍"; margin-left: 2px; color: #a5b4fc; animation: dnsCaret 1s steps(2) infinite; }
.dns-agent-cap.agent.live .dns-agent-cap-text .dim { opacity: 0; }
.dns-agent-cap.user { border-color: rgba(45,212,191,.35); background: rgba(13,40,46,.8); }
.dns-agent-cap.user.live .dns-agent-cap-text { color: #ccfbf1; }
.dns-agent-cap.user.live .dns-agent-cap-text::after { content: "▍"; margin-left: 2px; color: #5eead4; animation: dnsCaret 1s steps(2) infinite; }
@keyframes dnsCaret { 50% { opacity: 0; } }
.dns-agent-cap.empty { opacity: .65; }
.dns-agent-cap-who { flex: 0 0 auto; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; margin-top: 3px; }
.dns-agent-cap.agent .dns-agent-cap-who { background: rgba(129,140,248,.25); color: #c7d2fe; }
.dns-agent-cap.user .dns-agent-cap-who { background: rgba(45,212,191,.22); color: #99f6e4; order: 2; }
.dns-agent-cap-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word; white-space: normal; max-height: 6.6em; overflow-y: auto; scrollbar-width: none; scroll-behavior: smooth; }
.dns-agent-cap-text::-webkit-scrollbar { display: none; }
.dns-agent-cap em { color: #94a3b8; font-style: normal; }
.dns-agent-cap mark { background: transparent; color: #fff; border-radius: 4px; padding: 0; font-weight: 600; text-shadow: 0 0 10px rgba(165,180,252,.55); }
.dns-agent-ellipsis::after { content: "…"; animation: dnsEllipsis 1.2s steps(4) infinite; display: inline-block; width: 1.2em; text-align: left; color: #94a3b8; }
@keyframes dnsEllipsis { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* Mic lives bottom-right like a call control, so the stage centre (presenter / joining orb) stays clear. */
.dns-agent-stage-controls { position: absolute; right: 14px; bottom: 14px; z-index: 6; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; padding: 0; }
.dns-agent-mic-hint { font-size: .66rem; color: #cbd5e1; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; background: rgba(2,6,23,.6); backdrop-filter: blur(6px); white-space: nowrap; }
.dns-agent-window.listening .dns-agent-mic-hint { color: #86efac; }
/* Explain mode (Live): hold the turn open through pauses; Done closes it */
.dns-agent-hold-row { display: flex; gap: 6px; align-items: center; justify-content: center; }
.dns-agent-hold, .dns-agent-done { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(148,163,184,.25); background: rgba(2,6,23,.65); backdrop-filter: blur(6px); color: #e2e8f0; font-size: .7rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dns-agent-hold.on { background: rgba(245,158,11,.22); border-color: rgba(245,158,11,.6); color: #fde68a; animation: dnsHoldPulse 1.6s ease-in-out infinite; }
.dns-agent-done { background: linear-gradient(135deg, #16a34a, #0ea5e9); border-color: transparent; color: #fff; }
@keyframes dnsHoldPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.35); } 50% { box-shadow: 0 0 0 6px rgba(245,158,11,0); } }
/* Keep captions clear of the mic column */
.dns-agent-captions { padding-right: 84px; padding-left: 84px; box-sizing: border-box; }

/* Header identity + language */
.dns-agent-brand { width: 22px; height: 22px; border-radius: 7px; background: #0b1120 url("../img/dotblazer-logo.svg") center / 16px 16px no-repeat; border: 1px solid rgba(165,180,252,.4); flex: 0 0 auto; }
.dns-agent-id { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.dns-agent-id small { font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #a5b4fc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dns-agent-lang { height: 36px; padding: 0 10px; border-radius: 12px; border: 1px solid rgba(148,163,184,.22); background: rgba(2,6,23,.55); color: #e2e8f0; font-size: .78rem; cursor: pointer; max-width: 120px; }
.dns-agent-lang option { background: #0f172a; color: #e2e8f0; }

/* ── Assistant mode: voice orb (Alexa/Siri-style). agent-orb.js drives --orb-level (0..1) from the TTS audio. ── */
.dns-agent-stage.has-orb::after { display: none; }
.dns-agent-stage.has-orb .dns-agent-viewport { align-items: center; background: radial-gradient(110% 80% at 50% 115%, rgba(79,70,229,.30), rgba(5,8,15,0) 60%), #060a14; }
.dns-orb-wrap { --orb-level: 0; --c1: #818cf8; --c2: #22d3ee; position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; color: #e2e8f0; animation: dnsJoinIn .5s ease both; }
.dns-orb-wrap[data-mood="excited"] { --c1: #f472b6; --c2: #fb923c; }
.dns-orb-wrap[data-mood="thinking"] { --c1: #f59e0b; --c2: #818cf8; }
.dns-orb-wrap[data-mood="concerned"] { --c1: #fb7185; --c2: #a78bfa; }
.dns-orb-rings { position: absolute; left: 50%; top: 46%; width: 220px; height: 220px; transform: translate(-50%, -50%); pointer-events: none; }
.dns-orb-rings i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--c1) 55%, transparent); opacity: 0; }
.dns-agent-stage.listening .dns-orb-rings i { animation: dnsOrbRing 2.4s cubic-bezier(.2,.7,.3,1) infinite; }
.dns-agent-stage.listening .dns-orb-rings i:nth-child(2) { animation-delay: .8s; } .dns-agent-stage.listening .dns-orb-rings i:nth-child(3) { animation-delay: 1.6s; }
.dns-agent-stage.listening .dns-orb-wrap { --c1: #34d399; --c2: #22d3ee; }
.dns-orb-wave { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c1) 60%, transparent)); }
.dns-orb-core { position: relative; z-index: 2; width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; margin-top: -8%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 40%), linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 18px 60px color-mix(in srgb, var(--c1) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
  transform: scale(calc(1 + var(--orb-level) * .14)); transition: transform .08s linear, background .6s ease, box-shadow .6s ease; animation: dnsOrbBreath 4s ease-in-out infinite; }
.dns-orb-core strong { font-size: 2.2rem; font-weight: 800; color: #fff; letter-spacing: .02em; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.dns-orb-glow { position: absolute; inset: -22px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c2) 45%, transparent), transparent 70%); opacity: calc(.35 + var(--orb-level) * .65); filter: blur(10px); pointer-events: none; transition: opacity .1s linear; }
.dns-agent-stage.thinking .dns-orb-core { animation: dnsOrbThink 1.4s ease-in-out infinite; }
@keyframes dnsOrbThink { 0%,100% { transform: scale(1) rotate(0); filter: brightness(1); } 50% { transform: scale(.96) rotate(3deg); filter: brightness(1.25); } }
.dns-orb-name { margin-top: 22px; font-size: 1.15rem; font-weight: 700; letter-spacing: .01em; z-index: 2; }
.dns-orb-role { font-size: .78rem; color: #a5b4fc; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; z-index: 2; }
.dns-agent-stage.small .dns-orb-core { width: 84px; height: 84px; } .dns-agent-stage.small .dns-orb-core strong { font-size: 1.5rem; }
@media (max-height: 560px) { .dns-orb-core { width: 92px; height: 92px; } .dns-orb-rings { width: 160px; height: 160px; } }

/* ── Orb v2: layered digital core (additive; remove the "v2" class on .dns-orb-wrap to roll back) ──
   Same silhouette as v1 — adds a slow plasma drift inside the core, a glass iris highlight, an ambient
   glow bleeding into the stage, a particle halo while speaking, and state-tinted ring behaviour. */
.dns-orb-wrap.v2 { --c3: #a78bfa; }
.dns-orb-wrap.v2[data-mood="excited"] { --c3: #fbbf24; }
.dns-orb-wrap.v2[data-mood="thinking"] { --c3: #fde68a; }
.dns-orb-wrap.v2[data-mood="concerned"] { --c3: #fda4af; }
.dns-agent-stage.listening .dns-orb-wrap.v2 { --c3: #67e8f9; }
.dns-agent-stage.speaking .dns-orb-wrap.v2 { --c1: #8b5cf6; --c2: #06b6d4; --c3: #f0abfc; }

.dns-orb-wrap.v2 .dns-orb-ambient { position: absolute; left: 50%; top: 46%; width: 460px; height: 460px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--c1) 26%, transparent) 0%, color-mix(in srgb, var(--c2) 10%, transparent) 38%, transparent 70%);
  opacity: calc(.55 + var(--orb-level) * .45); filter: blur(18px); transition: opacity .12s linear, background .8s ease; animation: dnsOrbAmbient 9s ease-in-out infinite; }
@keyframes dnsOrbAmbient { 0%,100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.08); } }

.dns-orb-wrap.v2 .dns-orb-core { background: #0b1020; box-shadow: 0 22px 70px color-mix(in srgb, var(--c1) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--c2) 35%, transparent), inset 0 0 28px rgba(0,0,0,.55); overflow: hidden; isolation: isolate; }
.dns-orb-wrap.v2 .dns-orb-plasma { position: absolute; inset: -40%; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg, var(--c1), var(--c3), var(--c2), var(--c1));
  filter: blur(14px) saturate(130%); opacity: .95; animation: dnsOrbSpin 14s linear infinite; transition: filter .4s ease; }
.dns-agent-stage.speaking .dns-orb-wrap.v2 .dns-orb-plasma { animation-duration: 5s; filter: blur(10px) saturate(160%) brightness(calc(1 + var(--orb-level) * .5)); }
.dns-agent-stage.thinking .dns-orb-wrap.v2 .dns-orb-plasma { animation-duration: 2.2s; animation-direction: reverse; }
@keyframes dnsOrbSpin { to { transform: rotate(360deg); } }
.dns-orb-wrap.v2 .dns-orb-iris { position: absolute; inset: 0; border-radius: 50%; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.55), rgba(255,255,255,.08) 28%, transparent 46%),
              radial-gradient(circle at 50% 50%, transparent 56%, rgba(255,255,255,.07) 58%, transparent 62%),
              radial-gradient(circle at 70% 78%, color-mix(in srgb, var(--c2) 40%, transparent), transparent 40%);
  mix-blend-mode: screen; }
.dns-orb-wrap.v2 .dns-orb-core::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed color-mix(in srgb, #fff 28%, transparent); z-index: 1; animation: dnsOrbSpin 40s linear infinite reverse; opacity: .7; }
.dns-orb-wrap.v2 .dns-orb-core strong { position: relative; z-index: 2; text-shadow: 0 2px 14px rgba(0,0,0,.5), 0 0 22px color-mix(in srgb, var(--c3) 70%, transparent); }
/* Alternate visuals (Aurora / Halo / Pulse) are drawn entirely on the canvas; the orb chrome steps aside. */
.dns-orb-wrap.v2[data-style="halo"] .dns-orb-core, .dns-orb-wrap.v2[data-style="pulse"] .dns-orb-core,
.dns-orb-wrap.v2[data-style="halo"] .dns-orb-rings, .dns-orb-wrap.v2[data-style="pulse"] .dns-orb-rings,
.dns-orb-wrap.v2[data-style="halo"] .dns-orb-halo, .dns-orb-wrap.v2[data-style="pulse"] .dns-orb-halo,
.dns-orb-wrap.v2[data-style="aurora"] .dns-orb-rings, .dns-orb-wrap.v2[data-style="aurora"] .dns-orb-halo { display: none; }
.dns-orb-wrap.v2[data-style="aurora"] .dns-orb-core { transform: scale(.72); opacity: .85; }
.dns-orb-wrap.v2[data-style="halo"] .dns-orb-wave, .dns-orb-wrap.v2[data-style="pulse"] .dns-orb-wave { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); }
.dns-orb-wrap.v2 .dns-orb-glow { z-index: 2; mix-blend-mode: screen; }

/* rings: v1 only animates while listening; v2 also pulses softly while speaking, tinted per state */
.dns-orb-wrap.v2 .dns-orb-rings i { border-width: 1px; border-color: color-mix(in srgb, var(--c3) 60%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--c1) 30%, transparent) inset; }
.dns-agent-stage.speaking .dns-orb-wrap.v2 .dns-orb-rings i { animation: dnsOrbRing 1.8s cubic-bezier(.2,.7,.3,1) infinite; }
.dns-agent-stage.speaking .dns-orb-wrap.v2 .dns-orb-rings i:nth-child(2) { animation-delay: .6s; } .dns-agent-stage.speaking .dns-orb-wrap.v2 .dns-orb-rings i:nth-child(3) { animation-delay: 1.2s; }

/* particle halo: eight tiny motes orbiting the core; visible only while Nady speaks */
.dns-orb-wrap.v2 .dns-orb-halo { position: absolute; left: 50%; top: 46%; width: 190px; height: 190px; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; opacity: 0; transition: opacity .5s ease; animation: dnsOrbSpin 18s linear infinite; }
.dns-agent-stage.speaking .dns-orb-wrap.v2 .dns-orb-halo { opacity: calc(.45 + var(--orb-level) * .55); }
.dns-orb-wrap.v2 .dns-orb-halo i { position: absolute; left: 50%; top: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--c3); box-shadow: 0 0 8px var(--c3), 0 0 16px color-mix(in srgb, var(--c2) 60%, transparent); transform-origin: 2px 95px; animation: dnsOrbMote 3.2s ease-in-out infinite; }
.dns-orb-wrap.v2 .dns-orb-halo i:nth-child(1) { transform: rotate(0deg); }   .dns-orb-wrap.v2 .dns-orb-halo i:nth-child(2) { transform: rotate(45deg); animation-delay: -.4s; }
.dns-orb-wrap.v2 .dns-orb-halo i:nth-child(3) { transform: rotate(90deg); animation-delay: -.8s; }  .dns-orb-wrap.v2 .dns-orb-halo i:nth-child(4) { transform: rotate(135deg); animation-delay: -1.2s; }
.dns-orb-wrap.v2 .dns-orb-halo i:nth-child(5) { transform: rotate(180deg); animation-delay: -1.6s; } .dns-orb-wrap.v2 .dns-orb-halo i:nth-child(6) { transform: rotate(225deg); animation-delay: -2s; }
.dns-orb-wrap.v2 .dns-orb-halo i:nth-child(7) { transform: rotate(270deg); animation-delay: -2.4s; } .dns-orb-wrap.v2 .dns-orb-halo i:nth-child(8) { transform: rotate(315deg); animation-delay: -2.8s; }
@keyframes dnsOrbMote { 0%,100% { opacity: .35; scale: .8; } 50% { opacity: 1; scale: 1.4; } }

.dns-orb-wrap.v2 .dns-orb-role { color: color-mix(in srgb, var(--c3) 75%, #fff); text-shadow: 0 0 12px color-mix(in srgb, var(--c1) 40%, transparent); }
.dns-agent-stage.small .dns-orb-wrap.v2 .dns-orb-ambient, .dns-agent-stage.small .dns-orb-wrap.v2 .dns-orb-halo { display: none; }
@media (max-height: 560px) { .dns-orb-wrap.v2 .dns-orb-ambient { width: 320px; height: 320px; } .dns-orb-wrap.v2 .dns-orb-halo { width: 140px; height: 140px; } .dns-orb-wrap.v2 .dns-orb-halo i { transform-origin: 2px 70px; } }
html.light-theme .dns-orb-wrap.v2 .dns-orb-core { background: #eef2ff; box-shadow: 0 18px 50px color-mix(in srgb, var(--c1) 40%, transparent), 0 0 0 1px color-mix(in srgb, var(--c2) 40%, transparent); }
html.light-theme .dns-orb-wrap.v2 .dns-orb-ambient { opacity: calc(.35 + var(--orb-level) * .4); }
@media (prefers-reduced-motion: reduce) { .dns-orb-wrap.v2 .dns-orb-plasma, .dns-orb-wrap.v2 .dns-orb-halo, .dns-orb-wrap.v2 .dns-orb-halo i, .dns-orb-wrap.v2 .dns-orb-ambient, .dns-orb-wrap.v2 .dns-orb-core::after { animation: none; } }

/* Realistic live presenter (HeyGen Interactive Avatar). The WebRTC <video> fills the stage edge to
   edge, cover-fitted and slightly framed so the header, caption and mic float over it like a call UI. */
.dns-agent-live { position: absolute; inset: 0; z-index: 1; display: none; background: #05080f; }
.dns-agent-stage.has-live .dns-agent-live { display: block; }
.dns-agent-stage.has-live .dns-avatar, .dns-agent-stage.has-live .dns-orb-wrap, .dns-agent-stage.has-live::after { display: none; }
.dns-agent-live .dns-agent-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; background: #05080f; opacity: 0; transform: scale(1.02); filter: saturate(.8); transition: opacity .9s ease, transform 1.4s cubic-bezier(.2,.8,.2,1), filter 1.2s ease; }
.dns-agent-live.live .dns-agent-video { opacity: 1; transform: scale(1); filter: saturate(1); }
/* Joining state: calm animated orb instead of the legacy presenter bleeding through */
.dns-agent-stage.connecting .dns-agent-viewport { background: radial-gradient(120% 90% at 50% 110%, rgba(79,70,229,.35), rgba(5,8,15,0) 60%), #05080f; }
.dns-agent-joining { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #e2e8f0; animation: dnsJoinIn .5s ease both; }
.dns-agent-joining-orb { position: relative; width: 96px; height: 96px; display: grid; place-items: center; margin-bottom: 14px; }
.dns-agent-joining-orb strong { position: relative; z-index: 2; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, #4f46e5, #0ea5e9); box-shadow: 0 12px 40px rgba(79,70,229,.5), inset 0 1px 0 rgba(255,255,255,.25); animation: dnsOrbBreath 2.6s ease-in-out infinite; }
.dns-agent-joining-orb span { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(129,140,248,.55); animation: dnsOrbRing 2.6s cubic-bezier(.2,.7,.3,1) infinite; }
.dns-agent-joining-orb span:nth-child(2) { animation-delay: .85s; }
.dns-agent-joining-orb span:nth-child(3) { animation-delay: 1.7s; }
.dns-agent-joining-name { font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; }
.dns-agent-joining-sub { font-size: .8rem; color: #a5b4fc; font-weight: 600; letter-spacing: .04em; }
@keyframes dnsJoinIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dnsOrbBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes dnsOrbRing { 0% { transform: scale(.66); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
/* Subtle presence glow while the live presenter talks */
.dns-agent-stage.has-live.speaking .dns-agent-live::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 90px rgba(99,102,241,.28); animation: dnsOrbBreath 2.2s ease-in-out infinite; }
/* soft vignette so overlaid text stays legible on any background the avatar ships with */
.dns-agent-live::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,8,15,.55) 0%, rgba(5,8,15,0) 22%, rgba(5,8,15,0) 62%, rgba(5,8,15,.72) 100%); }
.dns-agent-stage.has-live .dns-agent-cap { background: rgba(2,6,23,.72); }
.dns-agent-connecting { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(2,6,23,.7); border: 1px solid rgba(129,140,248,.35); color: #c7d2fe; font-size: .82rem; font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(8px); }
.dns-agent-stage.connecting .dns-avatar { opacity: .35; filter: blur(2px) drop-shadow(0 30px 40px rgba(0,0,0,.55)); transition: opacity .3s ease; }

/* Arms / hands gestures on the inline presenter */
.dns-av-arm { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.dns-av-arm.l { transform-origin: 100px 420px; } .dns-av-arm.r { transform-origin: 300px 420px; }
.dns-av-hand { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.dns-agent-stage.gesture-explain .dns-av-arm.r { animation: dnsArmExplain 2.6s ease-in-out infinite; }
.dns-agent-stage.gesture-explain .dns-av-arm.l { animation: dnsArmExplain 2.6s ease-in-out infinite reverse; animation-delay: .4s; }
@keyframes dnsArmExplain { 0%,100% { transform: rotate(0) translateY(0); } 40% { transform: rotate(-14deg) translateY(-22px); } 70% { transform: rotate(-8deg) translateY(-12px); } }
.dns-agent-stage.gesture-handup .dns-av-arm.r { transform: rotate(-38deg) translate(-10px, -70px); }
.dns-agent-stage.gesture-thumbup .dns-av-arm.r { transform: rotate(-30deg) translate(0, -60px); }
.dns-agent-stage.gesture-thumbup .dns-av-hand.r { transform: rotate(-70deg); transform-origin: 282px 516px; }
.dns-agent-stage.gesture-shrug .dns-av-arm.l { transform: rotate(18deg) translate(16px, -30px); }
.dns-agent-stage.gesture-shrug .dns-av-arm.r { transform: rotate(-18deg) translate(-16px, -30px); }
.dns-agent-stage.gesture-shrug .dns-av-body { animation: dnsShrug 1.4s ease-in-out 1; }
@keyframes dnsShrug { 0%,100% { transform: translateY(0); } 30%,60% { transform: translateY(-10px); } }
.dns-agent-stage.gesture-think .dns-av-arm.r { transform: rotate(-62deg) translate(-70px, -118px); }
.dns-agent-stage.gesture-think .dns-av-hand.r { animation: dnsTapChin 1.8s ease-in-out infinite; transform-origin: 282px 516px; }
@keyframes dnsTapChin { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-6deg) translateY(-3px); } }
.dns-agent-stage.gesture-listen .dns-av-head { animation: dnsNod 3.4s ease-in-out infinite; }
@keyframes dnsNod { 0%,100% { transform: rotate(-1.5deg); } 50% { transform: rotate(2deg) translateY(3px); } }
.dns-av-pin { filter: drop-shadow(0 0 6px rgba(165,180,252,.55)); animation: dnsPinGlow 3s ease-in-out infinite; }
@keyframes dnsPinGlow { 0%,100% { filter: drop-shadow(0 0 4px rgba(165,180,252,.4)); } 50% { filter: drop-shadow(0 0 10px rgba(165,180,252,.85)); } }
.dns-agent-mic.big { height: 56px; min-width: 56px; border-radius: 50%; background: linear-gradient(135deg, #4f46e5, #0ea5e9); border-color: transparent; color: #fff; box-shadow: 0 10px 30px rgba(79,70,229,.45); }
.dns-agent-mic.big svg { width: 24px; height: 24px; }
.dns-agent-mic.big:hover:not(:disabled) { transform: translateY(-1px); background: linear-gradient(135deg, #6366f1, #38bdf8); }
.dns-agent-mic.on, .dns-agent-mic.big.on { background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 0 0 6px rgba(34,197,94,.18), 0 10px 30px rgba(34,197,94,.35); animation: dnsPulse 1.6s ease-in-out infinite; }
/* Mic is on but held for Mira's turn: muted look, no pulse, so it is obvious she is not listening right now. */
.dns-agent-mic.held, .dns-agent-mic.big.held { background: linear-gradient(135deg, #475569, #64748b); box-shadow: 0 0 0 4px rgba(100,116,139,.18); opacity: .85; animation: none; }
.dns-agent-mic:disabled { opacity: .45; cursor: default; }

/* ── Presenter expression & lip-sync (viewBox 400×520) ──────────────────── */
.dns-av-glow { opacity: .5; transition: opacity .4s ease; }
.dns-agent-window.speaking .dns-av-glow { opacity: .95; }
.dns-agent-window.listening .dns-av-glow { opacity: .8; }
.dns-av-head { transform-origin: 200px 330px; animation: dnsNod 7s ease-in-out infinite; }
.dns-agent-window.speaking .dns-av-head { animation: dnsTalkHead 2.6s ease-in-out infinite; }
.dns-agent-window.listening .dns-av-head { animation: dnsLean 6s ease-in-out infinite; }
@keyframes dnsNod { 0%,100% { transform: rotate(0deg) translateY(0); } 30% { transform: rotate(-1.2deg) translateY(1px); } 70% { transform: rotate(1deg) translateY(0); } }
@keyframes dnsTalkHead { 0%,100% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(-1.6deg) translateY(2px); } 50% { transform: rotate(.6deg) translateY(-1px); } 75% { transform: rotate(1.4deg) translateY(1px); } }
@keyframes dnsLean { 0%,100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(2.2deg) translateY(4px); } }
.dns-av-body { transform-origin: 200px 520px; animation: dnsShoulders 5s ease-in-out infinite; }
@keyframes dnsShoulders { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.dns-av-lid { transform-origin: 200px 182px; transform: scaleY(0); animation: dnsBlink 5.4s infinite; }
@keyframes dnsBlink { 0%,93%,100% { transform: scaleY(0); } 95.5% { transform: scaleY(1.05); } 98% { transform: scaleY(0); } }
/* Pupils are clipped to the sclera in the SVG; keep offsets small so the iris never looks detached. */
.dns-av-pupil { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.dns-agent-window.listening .dns-av-pupil { transform: translate(1.5px, -1px); }
.dns-agent-window.thinking .dns-av-pupil { animation: dnsPonder 3.2s ease-in-out infinite; }
.dns-agent-window.speaking .dns-av-pupil { animation: dnsGaze 6s ease-in-out infinite; }
@keyframes dnsGaze { 0%,70%,100% { transform: translate(0,0); } 80% { transform: translate(-2.5px, 1px); } 90% { transform: translate(2.5px, 0); } }
@keyframes dnsPonder { 0%,100% { transform: translate(3px, -3px); } 45% { transform: translate(3.5px, -2.5px); } 60% { transform: translate(-2.5px, -3px); } 80% { transform: translate(-2px, -3px); } }
.dns-agent-window.thinking .dns-av-head { animation: dnsThinkTilt 3.2s ease-in-out infinite; }
@keyframes dnsThinkTilt { 0%,100% { transform: rotate(-2.4deg) translateY(1px); } 55% { transform: rotate(1.4deg) translateY(0); } }
.dns-agent-window.thinking .dns-av-glow { animation: dnsGlowPulse 1.8s ease-in-out infinite; }
@keyframes dnsGlowPulse { 0%,100% { opacity: .5; } 50% { opacity: .9; } }
.dns-av-brow { transform-origin: 200px 176px; transition: transform .4s ease; }
.dns-avatar.mood-excited .dns-av-brow, .dns-avatar.mood-happy .dns-av-brow { transform: translateY(-4px); }
.dns-avatar.mood-concerned .dns-av-brow.l { transform: translateY(2px) rotate(6deg); }
.dns-avatar.mood-concerned .dns-av-brow.r { transform: translateY(2px) rotate(-6deg); }
.dns-avatar.mood-thinking .dns-av-brow.r { transform: translateY(-5px) rotate(-4deg); }
.dns-av-cheek { transition: opacity .4s ease; }
.dns-avatar.mood-happy .dns-av-cheek, .dns-avatar.mood-excited .dns-av-cheek { opacity: .34 !important; }
/* Visemes — exactly one mouth shape visible */
.dns-av-mouth > g { opacity: 0; transition: opacity .05s linear; }
.dns-avatar.viseme-rest .dns-av-mouth-rest, .dns-avatar.viseme-a .dns-av-mouth-a, .dns-avatar.viseme-e .dns-av-mouth-e,
.dns-avatar.viseme-o .dns-av-mouth-o, .dns-avatar.viseme-m .dns-av-mouth-m, .dns-avatar.viseme-f .dns-av-mouth-f { opacity: 1; }
.dns-avatar.mood-excited .dns-av-mouth-rest path:first-child, .dns-avatar.mood-happy .dns-av-mouth-rest path:first-child { d: path("M162 290q38 26 76 0"); }
.dns-avatar.mood-concerned .dns-av-mouth-rest path:first-child { d: path("M168 298q32-10 64 0"); }

/* ── Side panel ─────────────────────────────────────────────────────────── */
.dns-agent-panel { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; height: 100%; overflow: hidden; background: linear-gradient(180deg, #0f172a, #0b1120); border-left: 1px solid rgba(148,163,184,.12); }
/* Jump-to-latest button, shown when the chat is scrolled up. */
.dns-agent-scroll-end { position: absolute; right: 14px; bottom: 72px; z-index: 20; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(148,163,184,.25); background: rgba(30,41,59,.95); color: #e0e7ff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.dns-agent-scroll-end svg { width: 16px; height: 16px; }
/* Top dock: notes + chips, auto height, no border/scroll. */
.dns-agent-dock { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 10px; background: linear-gradient(180deg, rgba(99,102,241,.10), rgba(99,102,241,0)); }
.dns-agent-dock-head { display: flex; align-items: center; gap: 8px; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #a5b4fc; }
.dns-agent-dock-count { font-size: .68rem; font-weight: 600; padding: 0 7px; border-radius: 999px; background: rgba(129,140,248,.2); color: #c7d2fe; }
.dns-agent-dock-credits { margin-left: auto; font-size: .7rem; font-weight: 500; letter-spacing: 0; color: #94a3b8; text-transform: none; }
.dns-agent-notes-tags { display: flex; flex-wrap: wrap; gap: 5px; max-height: 92px; overflow: hidden; cursor: pointer; min-width: 0; }
.dns-agent-tag { display: inline-block; max-width: 100%; padding: 3px 9px; border-radius: 999px; font-size: .72rem; line-height: 1.4; color: #a7f3d0; background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.28); white-space: normal; overflow-wrap: anywhere; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dns-agent-tag.more { color: #c7d2fe; background: rgba(129,140,248,.16); border-color: rgba(129,140,248,.35); cursor: pointer; font-family: inherit; display: inline-block; white-space: nowrap; }
.dns-agent-tag.more:hover { background: rgba(129,140,248,.28); }
.dns-agent-notes-all { flex: 0 0 auto; height: 22px; padding: 0 9px; font-size: .68rem; font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 20px; }
.dns-agent-dock .dns-agent-muted { font-size: .78rem; }
.dns-agent-dock .dns-agent-warn { margin: 0; }
/* Full notes list: a scrollable popup over the panel so a long conversation never pushes the chat down. */
.dns-agent-notes-pop { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: rgba(11,17,32,.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dns-agent-notes-pop-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid rgba(148,163,184,.12); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #a5b4fc; }
.dns-agent-notes-pop-close { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(148,163,184,.2); background: rgba(148,163,184,.1); color: #e2e8f0; cursor: pointer; font-size: 1rem; line-height: 1; }
.dns-agent-notes-pop-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); list-style: none; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.35) transparent; }
.dns-agent-notes-pop-list li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.2); color: #d1fae5; font-size: .82rem; line-height: 1.4; overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.dns-agent-notes-pop-list li span { flex: 1 1 auto; min-width: 0; white-space: normal; }
.dns-agent-notes-pop-list li b { flex: 0 0 auto; font-size: .68rem; color: #6ee7b7; font-weight: 700; padding-top: 2px; }
/* Low credits / time-cap reminder + autosave status + saved-conversation picker. */
.dns-agent-warn-credits { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35); color: #fde68a; border-radius: 10px; padding: 8px 10px; font-size: .8rem; animation: dns-warn-pulse 2.4s ease-in-out infinite; }
.dns-agent-warn-credits .dns-agent-tag.more { color: #0b1120; background: #fbbf24; border-color: #fbbf24; text-decoration: none; font-weight: 700; }
.dns-agent-saved-hint { flex: 1 1 100%; font-size: .7rem; opacity: .8; }
@keyframes dns-warn-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); } 50% { box-shadow: 0 0 0 4px rgba(251,191,36,.18); } }
.dns-agent-saved { font-size: .68rem; color: #6ee7b7; opacity: .85; }
.dns-agent-resume { position: absolute; inset: 0; z-index: 31; display: flex; flex-direction: column; background: rgba(11,17,32,.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dns-agent-resume-list { flex: 1 1 auto; overflow-y: auto; margin: 0; padding: 10px 14px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.dns-agent-resume-list li { display: flex; gap: 6px; align-items: center; }
.dns-agent-resume-list li.current .dns-agent-resume-item { border-color: rgba(129,140,248,.6); }
.dns-agent-resume-item { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(148,163,184,.18); background: rgba(148,163,184,.08); color: #e2e8f0; font: inherit; cursor: pointer; transition: background .15s, border-color .15s; }
.dns-agent-resume-item:hover { background: rgba(129,140,248,.16); border-color: rgba(129,140,248,.4); }
.dns-agent-resume-item b { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dns-agent-resume-item small { font-size: .7rem; color: #94a3b8; }
html.light-theme .dns-agent-resume { background: rgba(255,255,255,.97); }
html.light-theme .dns-agent-resume-item { color: #0f172a; background: #f8fafc; border-color: #e2e8f0; }
html.light-theme .dns-agent-warn-credits { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
.dns-agent-panel-tabs { display: flex; gap: 4px; padding: 12px 12px 0; border-bottom: 1px solid rgba(148,163,184,.12); }
.dns-agent-panel-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; background: transparent; color: #94a3b8; font: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.dns-agent-panel-tabs button.active { color: #e0e7ff; border-bottom-color: #818cf8; }
.dns-agent-panel-tabs button span { font-size: .68rem; padding: 0 6px; border-radius: 999px; background: rgba(148,163,184,.15); }
.dns-agent-panel-tabs button.active { color: #e0e7ff; border-bottom-color: #818cf8; }
.dns-agent-panel-body { overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.35) transparent; border-top: 1px solid rgba(148,163,184,.08); }
.dns-agent-panel-body > * { flex-shrink: 0; }
.dns-agent-panel-block { padding: 12px; border-radius: 14px; background: rgba(30,41,59,.4); border: 1px solid rgba(148,163,184,.12); }
.dns-agent-reqs-head { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #a5b4fc; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.dns-agent-reqs-head span { font-size: .68rem; padding: 0 6px; border-radius: 999px; background: rgba(129,140,248,.18); }
.dns-agent-reqs { background: rgba(16,185,129,.06); border: 1px dashed rgba(16,185,129,.35); }
.dns-agent-reqs .dns-agent-reqs-head { color: #6ee7b7; }
.dns-agent-reqs ul { margin: 0; padding-left: 18px; font-size: .875rem; line-height: 1.55; }
.dns-agent-prompt { margin: 0; font-size: .875rem; line-height: 1.55; color: #cbd5e1; max-height: 120px; overflow: auto; }
.dns-agent-muted { margin: 0; font-size: .8125rem; color: #7c8aa5; }
.dns-agent-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dns-agent-error { color: #fca5a5; font-size: .8125rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dns-agent-reconnect { flex: 0 0 auto; }
.dns-agent-warn { margin: 8px 0 0; font-size: .8125rem; line-height: 1.5; color: #fcd34d; }
.dns-agent-select { width: 100%; margin-top: 8px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(148,163,184,.25); background: #0b1120; color: #e2e8f0; font-size: .88rem; }
.dns-agent-toggle { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #cbd5e1; padding: 6px 0; cursor: pointer; }
.dns-agent-toggle input { accent-color: #818cf8; }
.dns-agent-langpill { margin-left: auto; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(129,140,248,.35); background: rgba(99,102,241,.15); color: #c7d2fe; font-size: .7rem; cursor: pointer; }
/* Transcript: grouped notes summary on top, then a chat thread — agent left, user right. */
.dns-agent-notes { background: rgba(16,185,129,.06); border-color: rgba(52,211,153,.18); }
.dns-agent-notes .dns-agent-reqs-head { color: #6ee7b7; }
.dns-agent-notes-groups { display: flex; flex-direction: column; gap: 8px; }
.dns-agent-notes-group { padding: 8px 10px; border-radius: 10px; background: rgba(2,6,23,.35); border: 1px solid rgba(148,163,184,.1); }
.dns-agent-notes-title { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #cbd5e1; display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.dns-agent-notes-title span { font-size: .68rem; padding: 0 6px; border-radius: 999px; background: rgba(148,163,184,.15); color: #94a3b8; }
.dns-agent-notes-group ul { margin: 0; padding-left: 16px; font-size: .8125rem; line-height: 1.5; color: #e2e8f0; display: flex; flex-direction: column; gap: 2px; }
.dns-agent-notes-group li { overflow-wrap: anywhere; }

.dns-agent-chat { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.dns-agent-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.dns-agent-msg.user { justify-content: flex-end; }
.dns-agent-msg.agent { justify-content: flex-start; }
.dns-agent-msg-avatar { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 800; color: #fff; background: radial-gradient(circle at 30% 30%, #c4b5fd, #6d28d9 70%); box-shadow: 0 0 0 2px rgba(167,139,250,.25); }
.dns-agent-bubble { position: relative; max-width: 82%; min-width: 0; padding: 10px 14px 11px; border-radius: 16px; font-size: .875rem; font-weight: 400; line-height: 1.55; letter-spacing: 0; }
.dns-agent-bubble p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.dns-agent-msg-who { display: block; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .7; margin-bottom: 4px; }
.dns-agent-msg.agent .dns-agent-bubble { background: rgba(30,41,59,.75); border: 1px solid rgba(148,163,184,.14); color: #e2e8f0; border-bottom-left-radius: 6px; }
.dns-agent-msg.user .dns-agent-bubble { background: linear-gradient(135deg, rgba(99,102,241,.85), rgba(139,92,246,.85)); border: 1px solid rgba(165,180,252,.35); color: #fff; border-bottom-right-radius: 6px; }
.dns-agent-bubble.typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.dns-agent-bubble.typing i { width: 6px; height: 6px; border-radius: 50%; background: #a5b4fc; animation: dnsTyping 1.2s ease-in-out infinite; }
.dns-agent-bubble.typing i:nth-child(2) { animation-delay: .2s; } .dns-agent-bubble.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes dnsTyping { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
.dns-agent-compose { display: flex; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid rgba(148,163,184,.12); width: 100%; box-sizing: border-box; }
.dns-agent-upload { position: relative; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(148,163,184,.22); background: rgba(2,6,23,.55); color: #cbd5e1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.dns-agent-upload svg { width: 18px; height: 18px; }
.dns-agent-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.dns-agent-upload.busy { opacity: .5; pointer-events: none; }
.dns-agent-upload:hover { border-color: rgba(165,180,252,.5); color: #fff; }
.dns-agent-input { flex: 1 1 auto; min-width: 0; width: 100%; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(148,163,184,.25); background: rgba(2,6,23,.55);
  color: #e2e8f0; font-size: .875rem; outline: none; box-sizing: border-box; }
.dns-agent-input::placeholder { color: #7c8aa5; }
.dns-agent-input:focus { border-color: rgba(129,140,248,.6); }
.dns-agent-send { flex: 0 0 auto; background: linear-gradient(135deg, #4f46e5, #0ea5e9); border-color: transparent; color: #fff; height: 42px; padding: 0 14px; }
.dns-agent-foot { display: flex; gap: 8px; padding: 4px 16px 12px; font-size: .75rem; color: #7c8aa5; }

/* ── Locked (Free/Starter) ──────────────────────────────────────────────── */
.dns-agent-locked { grid-column: 1 / -1; position: relative; padding: 36px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: radial-gradient(ellipse at 50% 30%, rgba(99,102,241,.18), transparent 65%); }
.dns-agent-locked h3 { margin: 0; font-size: 1.3rem; }
.dns-agent-locked p { margin: 0; color: #94a3b8; max-width: 520px; }
.dns-agent-locked-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.dns-agent-close { position: absolute; top: 14px; right: 14px; }

@media (max-width: 920px) {
  .dns-agent-window { grid-template-columns: 1fr; grid-template-rows: minmax(0, 52%) minmax(0, 48%); width: calc(100vw - 16px); height: calc(100vh - 16px); border-radius: 18px; }
  .dns-agent-panel { border-left: none; border-top: 1px solid rgba(148,163,184,.12); }
  .dns-agent-captions { width: 94%; padding: 0 72px 10px; }
  .dns-agent-stage-controls { right: 10px; bottom: 10px; }
  .dns-agent-mic-hint { display: none; }
  .dns-agent-cap { padding: 7px 11px; font-size: .88rem; }
  .dns-agent-sub { display: none; }
  .dns-agent-lang { max-width: 84px; }
  .dns-agent-head { padding: 8px; }
  .dns-agent-head-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
  .dns-agent-dock { padding: 10px 12px 8px; }
  .dns-agent-minichip { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }
  .dns-agent-minichip-text small { max-width: 180px; }
}
/* Phone: full-bleed sheet, presenter on the upper half, chat panel below */
@media (max-width: 600px) {
  .dns-agent-window { width: 100vw; height: 100dvh; left: 0; top: 0; transform: none; border-radius: 0; border: 0; grid-template-rows: minmax(0, 50%) minmax(0, 50%); animation: dnsAgentSheet .32s cubic-bezier(.32,.72,0,1) both; }
  @keyframes dnsAgentSheet { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  /* Compact single-row header so it never wraps down over the orb. */
  .dns-agent-head { padding: calc(6px + env(safe-area-inset-top)) 8px 4px; gap: 6px; }
  .dns-agent-title { padding: 4px 10px 4px 6px; gap: 6px; font-size: .85rem; }
  .dns-agent-id small { display: none; }
  .dns-agent-head-actions { flex-wrap: nowrap; gap: 2px; }
  .dns-agent-head-actions .dns-agent-icon { width: 30px; height: 30px; }
  .dns-agent-lang { height: 30px; padding: 0 4px; font-size: .7rem; max-width: 64px; }
  /* Orb centred in the space between the header and the controls, fully visible. */
  .dns-agent-stage.has-orb .dns-agent-viewport { top: 52px; bottom: 60px; }
  .dns-orb-core { width: 112px; height: 112px; min-width: 112px; min-height: 112px; flex: 0 0 112px; aspect-ratio: 1 / 1; margin-top: 0; }
  .dns-orb-core strong { font-size: 1.9rem; }
  .dns-orb-rings { width: 190px; height: 190px; top: 50%; }
  .dns-orb-wave, .dns-orb-wrap.v2 .dns-orb-halo, .dns-orb-wrap.v2 .dns-orb-ambient { top: 50%; }
  .dns-orb-wrap.v2 .dns-orb-halo { width: 160px; height: 160px; }
  .dns-orb-wrap.v2 .dns-orb-halo i { transform-origin: 2px 80px; }
  .dns-orb-wrap.v2 .dns-orb-ambient { width: 300px; height: 300px; }
  .dns-orb-name { margin-top: 12px; font-size: 1rem; }
  .dns-orb-role { font-size: .68rem; }
  .dns-agent-captions { padding: 0 56px 8px; }
  .dns-agent-stage-controls { right: 8px; bottom: 8px; }
  /* Panel: a slim notes dock so the chat keeps most of the lower half. */
  .dns-agent-dock { gap: 6px; padding: 8px 10px 6px; }
  .dns-agent-dock .dns-agent-muted { font-size: .72rem; margin: 0; }
  .dns-agent-notes-tags { max-height: 52px; }
  .dns-agent-chips { gap: 6px; }
  .dns-agent-panel-tabs { padding: 6px 10px 0; }
  .dns-agent-panel-body { padding: 8px 10px; gap: 8px; }
  .dns-agent-composer, .dns-agent-dock:last-child { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  /* The panel is only the lower part of the sheet on phones: pin the notes list over the whole viewport so it
     has room to scroll instead of a 60%-tall overlay with its header clipped under the presenter. */
  .dns-agent-notes-pop { position: fixed; inset: 0; z-index: 60; padding-top: env(safe-area-inset-top); }
  .dns-agent-notes-pop-head { padding: 14px 16px; font-size: .8rem; }
  .dns-agent-notes-pop-close { width: 36px; height: 36px; }
  .dns-agent-notes-pop-list li { font-size: .9rem; padding: 10px 12px; }
  .dns-agent-scroll-end { right: 12px; bottom: 76px; width: 38px; height: 38px; }
  .dns-agent-input { height: 44px; font-size: 16px; } /* 16px prevents iOS zoom-on-focus */
  /* The phone sheet resets transform, so the minimized state hides via display instead; the chip stays. */
  .dns-agent-window.minimized { display: none; }
  .dns-agent-minichip { right: 10px; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: none; border-radius: 18px; }
  .dns-agent-minichip-text { flex: 1; }
  .dns-agent-minichip-text small { max-width: none; }
  .dns-agent-warn-credits { font-size: .76rem; padding: 7px 9px; }
  .dns-agent-resume-item { padding: 10px 12px; }
  .dns-agent-resume-item small { display: block; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .dns-avatar, .dns-av-head, .dns-av-body, .dns-av-lid, .dns-av-pupil, .dns-av-arm, .dns-av-hand, .dns-av-pin, .dns-agent-mic.big.on { animation: none; } }

/* ── Light theme ─────────────────────────────────────────────────────────── */
html.light-theme .dns-agent-backdrop { background: rgba(15,23,42,.45); }
html.light-theme .dns-agent-window { background: #f8fafc; color: #0f172a; border-color: #e2e8f0; box-shadow: 0 40px 120px rgba(15,23,42,.35); }
html.light-theme .dns-agent-stage { background: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(99,102,241,.14), transparent 70%), linear-gradient(180deg, #eef2ff 0%, #f1f5f9 55%, #e2e8f0 100%); }
html.light-theme .dns-agent-stage::after { background: linear-gradient(180deg, rgba(226,232,240,0) 0%, rgba(203,213,225,.85) 30%, #cbd5e1 100%); border-top-color: rgba(15,23,42,.08); }
html.light-theme .dns-agent-title, html.light-theme .dns-agent-icon, html.light-theme .dns-agent-recbtn, html.light-theme .dns-agent-mic, html.light-theme .dns-agent-lang { background: rgba(255,255,255,.85); border-color: #e2e8f0; color: #1e293b; }
html.light-theme .dns-agent-icon:hover, html.light-theme .dns-agent-recbtn:hover, html.light-theme .dns-agent-mic:hover:not(:disabled) { background: #e2e8f0; }
html.light-theme .dns-agent-sub { color: #64748b; border-left-color: #cbd5e1; }
html.light-theme .dns-agent-cap { background: rgba(255,255,255,.92); border-color: #e2e8f0; color: #0f172a; }
html.light-theme .dns-agent-cap.user { background: rgba(204,251,241,.9); }
html.light-theme .dns-agent-panel { background: #ffffff; border-left-color: #e2e8f0; }
html.light-theme .dns-agent-dock { background: linear-gradient(180deg, rgba(99,102,241,.08), rgba(99,102,241,0)); }
html.light-theme .dns-agent-dock-head { color: #4f46e5; }
html.light-theme .dns-agent-dock-count { background: rgba(79,70,229,.12); color: #4338ca; }
html.light-theme .dns-agent-tag { color: #065f46; background: #d1fae5; border-color: #6ee7b7; font-weight: 600; }
html.light-theme .dns-agent-tag.more { color: #3730a3; background: #e0e7ff; border-color: #a5b4fc; }
html.light-theme .dns-agent-tag.more:hover { background: #c7d2fe; }
html.light-theme .dns-agent-dock .dns-agent-muted { color: #475569; }
html.light-theme .dns-agent-notes-pop { background: rgba(248,250,252,.98); }
html.light-theme .dns-agent-notes-pop-head { color: #4f46e5; border-bottom-color: #e2e8f0; }
html.light-theme .dns-agent-notes-pop-close { background: #f1f5f9; border-color: #e2e8f0; color: #0f172a; }
html.light-theme .dns-agent-notes-pop-list li { background: #ecfdf5; border-color: #a7f3d0; color: #064e3b; }
html.light-theme .dns-agent-notes-pop-list li b { color: #059669; }
html.light-theme .dns-agent-scroll-end { background: #fff; border-color: #e2e8f0; color: #1e293b; }
html.light-theme .dns-agent-dock-credits { color: #64748b; }
html.light-theme .dns-agent-panel-tabs { border-bottom-color: #e2e8f0; }
html.light-theme .dns-agent-panel-tabs button { color: #64748b; }
html.light-theme .dns-agent-panel-tabs button.active { color: #4f46e5; border-bottom-color: #6366f1; }
html.light-theme .dns-agent-panel-body { border-top-color: #e2e8f0; scrollbar-color: #cbd5e1 transparent; }
html.light-theme .dns-agent-panel-block { background: #f8fafc; border-color: #e2e8f0; }
html.light-theme .dns-agent-reqs-head { color: #4f46e5; }
html.light-theme .dns-agent-prompt, html.light-theme .dns-agent-toggle { color: #334155; }
html.light-theme .dns-agent-muted { color: #64748b; }
html.light-theme .dns-agent-select { background: #ffffff; border-color: #cbd5e1; color: #0f172a; }
html.light-theme .dns-agent-notes-group { background: #ffffff; border-color: #e2e8f0; }
html.light-theme .dns-agent-notes-title { color: #334155; }
html.light-theme .dns-agent-notes-group ul { color: #1e293b; }
html.light-theme .dns-agent-msg.agent .dns-agent-bubble { background: #f1f5f9; border-color: #e2e8f0; color: #0f172a; }
html.light-theme .dns-agent-compose { border-top-color: #e2e8f0; }
html.light-theme .dns-agent-input { background: #ffffff; border-color: #cbd5e1; color: #0f172a; }
html.light-theme .dns-agent-input::placeholder { color: #94a3b8; }
html.light-theme .dns-agent-foot { color: #64748b; }
html.light-theme .dns-agent-locked h3 { color: #0f172a; }
html.light-theme .dns-agent-locked p { color: #475569; }
html.light-theme .dns-agent-stage.has-orb .dns-agent-viewport { background: radial-gradient(110% 80% at 50% 115%, rgba(99,102,241,.18), rgba(248,250,252,0) 60%), transparent; }
html.light-theme .dns-agent-stage.connecting .dns-agent-viewport { background: radial-gradient(120% 90% at 50% 110%, rgba(99,102,241,.18), rgba(248,250,252,0) 60%), #f1f5f9; }
html.light-theme .dns-agent-live, html.light-theme .dns-agent-live .dns-agent-video { background: #e2e8f0; }
html.light-theme .dns-orb-wrap { color: #1e293b; }
html.light-theme .dns-orb-role { color: #4f46e5; }
html.light-theme .dns-orb-wrap.v2 .dns-orb-role { color: #4f46e5; text-shadow: none; }
html.light-theme .dns-orb-core strong, html.light-theme .dns-orb-wrap.v2 .dns-orb-core strong { color: #312e81; text-shadow: none; }
html.light-theme .dns-agent-joining-name { color: #0f172a; }
html.light-theme .dns-agent-joining-sub { color: #64748b; }
html.light-theme .dns-agent-cap.agent.live { background: rgba(238,242,255,.95); border-color: #c7d2fe; }
html.light-theme .dns-agent-cap.agent.live .dns-agent-cap-text { color: #1e1b4b; }
html.light-theme .dns-agent-cap.agent.live .dns-agent-cap-text::after { color: #6366f1; }
html.light-theme .dns-agent-cap mark { color: #312e81; text-shadow: none; }
html.light-theme .dns-agent-cap.user.live .dns-agent-cap-text { color: #134e4a; }
html.light-theme .dns-agent-cap.agent .dns-agent-cap-who { background: #e0e7ff; color: #4338ca; }
html.light-theme .dns-agent-cap.user .dns-agent-cap-who { background: #ccfbf1; color: #0f766e; }
html.light-theme .dns-agent-cap em { color: #64748b; }
html.light-theme .dns-agent-stage.has-live .dns-agent-cap { background: rgba(255,255,255,.92); }
html.light-theme .dns-agent-mic-hint { color: #475569; background: rgba(255,255,255,.8); }