/* Aura skin for /preview/aura-live-demo — does not load on live /voice-demo/ */
:root { --preview-banner-h: 44px; }
html,
body {
  background-color: #15131d !important;
  background-image:
    radial-gradient(ellipse 80% 55% at 50% -18%, rgba(124, 58, 237, 0.42), transparent 52%),
    radial-gradient(ellipse 45% 40% at 92% 28%, rgba(91, 33, 182, 0.22), transparent 50%),
    radial-gradient(ellipse 40% 35% at 8% 78%, rgba(139, 92, 246, 0.16), transparent 48%) !important;
  background-attachment: fixed !important;
  color: #f5f5f6 !important;
}
::-webkit-scrollbar-thumb { background: #3f3f46 !important; }

.preview-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: #1d4ed8; color: #fff;
  font-size: 12px; letter-spacing: 0.04em;
  min-height: var(--preview-banner-h);
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 6px;
  text-align: center;
  box-sizing: border-box;
}
.preview-banner a {
  color: #fff; text-decoration: underline; font-weight: 600;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 8px;
}

.aura-fx { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.aura-orb {
  position: absolute; border-radius: 50%; filter: blur(90px);
  opacity: 0.62; animation: aura-orb-float 22s ease-in-out infinite;
}
.aura-orb-a { width: 520px; height: 520px; background: rgba(124, 58, 237, 0.46); top: -16%; left: 18%; }
.aura-orb-b { width: 380px; height: 380px; background: rgba(167, 139, 250, 0.22); bottom: 4%; right: -6%; animation-delay: -7s; }
.aura-orb-c { width: 300px; height: 300px; background: rgba(91, 33, 182, 0.28); top: 42%; left: -10%; animation-delay: -13s; }
@keyframes aura-orb-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(40px, -28px, 0) scale(1.08); }
}
.aura-grain {
  position: absolute; inset: 0; opacity: 0.2; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.aura-cursor {
  position: fixed; top: 0; left: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.22), transparent 64%);
  pointer-events: none; will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .aura-orb { animation: none; }
}

.demo-page > .fixed.inset-0,
[style*="#f2f3fb"] { background: transparent !important; }
.demo-page > .fixed[style*="radial-gradient"],
.demo-page > .fixed[style*="48px 48px"],
[style*="rgba(139,92,246,0.10)"],
[style*="rgba(20,200,186,0.08)"] { opacity: 0 !important; }

.demo-header {
  top: var(--preview-banner-h);
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid rgba(15, 15, 15, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}
.demo-logo-cell {
  background: #111 !important;
  color: #fff !important;
}
.demo-logo-ai,
.demo-logo-agent { color: #111 !important; }
.demo-header-badge {
  background: rgba(124, 58, 237, 0.12) !important;
  border-color: rgba(167, 139, 250, 0.35) !important;
}
.demo-header-badge-label { color: #5b21b6 !important; }
.demo-header-back {
  background: #fff !important;
  border-color: rgba(15, 15, 15, 0.12) !important;
  color: #3f3f46 !important;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px !important;
  box-sizing: border-box;
}

.demo-page {
  padding-top: calc(var(--preview-banner-h) + 76px) !important;
}

.app-container {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 60px rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.app-container > div:first-child {
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-container > div:last-child,
.app-container > div:last-child > div {
  background: rgba(18, 16, 28, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e4e4e7 !important;
}
.app-container > div:last-child [style*="border-bottom"] {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
.app-container > div:last-child span,
.app-container > div:last-child div {
  color: inherit;
}

.phone-stage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  padding: 12px 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(167, 139, 250, 0.42), transparent 58%),
    linear-gradient(180deg, #3d3363 0%, #2a2448 52%, #1f1a36 100%) !important;
}
.phone-frame {
  height: min(100%, 640px) !important;
  width: auto !important;
  max-width: calc(100% - 12px) !important;
  max-height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 9 / 19.5 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 44px !important;
  padding: 8px !important;
  background: linear-gradient(165deg, #4a4266 0%, #1c1828 46%, #121018 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 36px rgba(124, 58, 237, 0.22),
    0 24px 48px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
.phone-btn { background: #2a2440 !important; }
.phone-screen {
  overflow: hidden !important;
  background: linear-gradient(180deg, #1a1628 0%, #15131d 42%, #12101a 100%) !important;
}
.phone-status { color: #f5f5f6 !important; position: relative; z-index: 12; }
.phone-status-icons { filter: none !important; color: #f5f5f6; display: flex; align-items: center; gap: 5px; }
.phone-status-icons svg { fill: #f5f5f6; flex-shrink: 0; }
.phone-status-icons svg [fill="none"] { fill: none !important; }
.phone-status-icons svg [fill="#14131a"] { fill: #f5f5f6 !important; }
.phone-status-icons svg [stroke="#14131a"] { stroke: #f5f5f6 !important; }
.phone-island { z-index: 3 !important; }
.phone-head h2 { color: #fff !important; }
.phone-status-text { color: #c4b5fd !important; }
.dial-mark span {
  background: #fff !important;
  color: #111 !important;
}
.phone-orb {
  background: radial-gradient(circle at 50% 42%, #2a2150 0%, #15131d 72%) !important;
  box-shadow: 0 0 0 14px rgba(124, 58, 237, 0.18), 0 0 0 28px rgba(91, 33, 182, 0.12) !important;
}
/* After call ends: no glowing circle — only the centered star */
.phone-orb-wrap.is-ended {
  min-height: 64px !important;
  flex: 0 0 auto !important;
}
.phone-ended-star {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.phone-screen:has(.phone-msg-ended) .phone-orb {
  display: none !important;
}
.pulse-ring { border-color: rgba(167, 139, 250, 0.4) !important; }
.phone-timer { color: #e4e4e7 !important; }
.ctrl { color: #a1a1aa !important; }
.ctrl-circle {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #c4b5fd !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
.ctrl-circle.on { background: #7c3aed !important; color: #fff !important; }
.phone-msg p,
.phone-fine,
.phone-foot { color: #a1a1aa !important; }
.phone-msg-title { color: #fff !important; }
.phone-error {
  color: #fecaca !important;
  background: rgba(127, 29, 29, 0.35) !important;
  border-color: rgba(248, 113, 113, 0.35) !important;
}
.phone-cta {
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  box-shadow: 0 8px 20px rgba(91, 33, 182, 0.35) !important;
}
.phone-cta.ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ddd6fe !important;
  border-color: rgba(167, 139, 250, 0.35) !important;
}
.phone-home { background: #f5f5f6 !important; opacity: 0.22; }

.phone-modal-bg { background: rgba(8, 6, 16, 0.72) !important; }
.phone-modal {
  background: #1a1826 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f5f5f6 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important;
}
.phone-modal-pill {
  background: rgba(124, 58, 237, 0.2) !important;
  color: #ddd6fe !important;
}
.phone-modal h3 { color: #fff !important; }
[style*="#f1ecfe"] {
  background: rgba(124, 58, 237, 0.28) !important;
  border-color: rgba(167, 139, 250, 0.32) !important;
  color: #f5f5f6 !important;
}
.app-container > div:last-child [style*="background: #fff"],
.app-container > div:last-child [style*="background:#fff"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f5f5f6 !important;
}
[style*="#25213b"],
[style*="rgb(37, 33, 59)"],
[style*="rgb(37,33,59)"],
[style*="#6b6785"],
[style*="color:#6b6785"],
[style*="color: #6b6785"],
[style*="rgb(107, 103, 133)"],
[style*="rgb(107,103,133)"] {
  color: #e4e4e7 !important;
}
[style*="#a19dbd"],
[style*="rgb(161, 157, 189)"] { color: #c4c4cc !important; }

.va-transcript {
  background: #16141f !important;
}
.va-transcript [style*="#f7f5ff"],
.va-transcript {
  background: #16141f !important;
  color: #f5f5f6 !important;
}
.va-transcript .va-bubble-ai,
.va-bubble-ai {
  background: #2a2440 !important;
  border-color: rgba(167, 139, 250, 0.35) !important;
  color: #f5f5f6 !important;
}
.va-transcript .va-bubble-user,
.va-bubble-user {
  background: #1c1930 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #f5f5f6 !important;
}
.app-container > div:last-child {
  background: #16141f !important;
  min-width: 0;
  overflow: auto !important;
}

.demo-page [style*="max-width: 420px"],
.demo-page [style*="max-width:420px"] {
  background: linear-gradient(180deg, rgba(36, 32, 52, 0.96), rgba(21, 19, 29, 0.96)) !important;
  border: 1px solid rgba(167, 139, 250, 0.28) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5) !important;
  color: #f5f5f6 !important;
}
.demo-page [style*="max-width: 420px"] p,
.demo-page [style*="max-width:420px"] p {
  color: #e4e4e7 !important;
}
.demo-page [style*="max-width: 420px"] p:first-of-type,
.demo-page [style*="max-width:420px"] p:first-of-type {
  color: #ffffff !important;
}
.demo-page [style*="max-width: 420px"] a,
.demo-page [style*="max-width:420px"] a {
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  color: #ffffff !important;
}

body.aura-token-needed .demo-page [style*="max-width: 420px"],
body.aura-token-needed .demo-page [style*="max-width:420px"] {
  display: none !important;
}
body.aura-token-needed .demo-page {
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.aura-token-needed .demo-page .app-container,
body.aura-token-needed .demo-page > div[style*="max-width: 900"],
body.aura-token-needed .demo-page > div[style*="max-width:900"] {
  display: none !important;
}
body.aura-token-needed {
  overflow: hidden;
}

#auraTokenGate {
  position: fixed;
  top: calc(var(--preview-banner-h) + 58px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 20px 24px;
  overflow: auto;
}
.aura-token-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 22px 22px 20px;
  border-radius: 22px;
  background: rgba(18, 18, 22, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  color: #f5f5f6;
}
.aura-token-card::before,
.aura-token-card::after {
  content: none;
  display: none;
}
.aura-token-card > * { position: relative; z-index: 1; }
.aura-token-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.18);
  border: 1px solid rgba(129, 140, 248, 0.35);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 14px;
}
.aura-token-card h3 {
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: #fff;
}
.aura-token-card .desc {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #c6c6cb;
}
.aura-token-card .field { margin-bottom: 11px; }
.aura-token-card label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #c6c6cb;
  margin-bottom: 6px;
}
.aura-token-card input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 14px;
  outline: none;
}
.aura-token-card input:focus {
  border-color: rgba(99, 102, 241, 0.75);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22);
}
.aura-token-card input::placeholder { color: #8a8a93; }
.aura-token-btn {
  width: 100%;
  margin-top: 6px;
  border: none;
  border-radius: 999px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 650;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #4f46e5, #1d4ed8);
  box-shadow: 0 10px 28px rgba(79, 70, 229, 0.45);
}
.aura-token-btn:disabled { opacity: 0.7; cursor: wait; }
.aura-token-state {
  display: none;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 10px;
}
.aura-token-state.show { display: block; }
.aura-token-state.success {
  background: rgba(74, 222, 128, 0.12);
  color: #86efac;
  border: 1px solid rgba(74, 222, 128, 0.28);
}
.aura-token-state.error {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
  border: 1px solid rgba(248, 113, 113, 0.28);
}

@media (max-width: 767px) {
  html, body {
    background-color: #2a2448 !important;
    overflow-x: hidden;
  }

  .demo-page {
    min-height: 100dvh !important;
    max-height: none !important;
    padding:
      calc(var(--preview-banner-h) + 52px)
      10px
      max(10px, env(safe-area-inset-bottom, 0px))
      10px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
  }

  .demo-page > div[style] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .demo-logo {
    gap: 7px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .demo-logo .da-logo-grid {
    flex-shrink: 0 !important;
    gap: 2px !important;
  }
  .demo-logo-cell {
    background: #111 !important;
    color: #fff !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    line-height: 1 !important;
  }
  .demo-logo-words {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    min-width: 0;
  }
  .demo-logo-ai {
    color: #111 !important;
    font-size: 22px !important;
    white-space: nowrap !important;
  }
  .demo-logo-agent {
    display: none !important;
  }

  .app-container {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    height: auto !important;
    max-height: calc(100dvh - 96px) !important;
    min-height: 0 !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .app-container > div:first-child {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: 58dvh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .app-container > div:last-child {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 148px !important;
    max-height: 28dvh !important;
    overflow: auto !important;
    border-radius: 0 0 18px 18px !important;
  }

  .phone-stage {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: 8px 6px !important;
    border-radius: 18px 18px 0 0 !important;
    background:
      radial-gradient(ellipse 95% 75% at 50% 6%, rgba(196, 181, 253, 0.55), transparent 58%),
      linear-gradient(180deg, #5b4b8a 0%, #3a3164 48%, #2a2448 100%) !important;
  }
  .phone-frame {
    height: min(100%, 52dvh) !important;
    width: auto !important;
    max-width: min(280px, 78vw) !important;
    max-height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 9 / 19.5 !important;
    border-radius: 38px !important;
    padding: 7px !important;
    overflow: hidden !important;
  }
  .phone-screen {
    border-radius: 30px !important;
    padding: 0 14px 8px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #322a52 0%, #1c1830 52%, #14111f 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
  .phone-status {
    padding: 16px 8px 0 10px !important;
    z-index: 12 !important;
    position: relative !important;
    align-items: center;
    font-size: 11px !important;
    box-sizing: border-box;
  }
  .phone-status-icons {
    gap: 4px !important;
    padding-right: 2px;
    flex-shrink: 0;
  }
  .phone-status-icons svg {
    display: block;
    overflow: visible;
    width: auto;
    height: 10px;
  }
  .phone-island {
    top: 10px !important;
    width: 58px !important;
    height: 16px !important;
    z-index: 1 !important;
    background: #0a0a0c !important;
  }
  .phone-head {
    margin-top: 14px !important;
  }
  .phone-head h2 {
    font-size: 16px !important;
    margin: 8px 0 2px !important;
  }
  .phone-status-text {
    font-size: 12px !important;
  }
  .dial-mark {
    width: 40px !important;
    height: 40px !important;
    gap: 3px !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .dial-mark span {
    background: #fff !important;
    color: #111 !important;
    font-size: 10px !important;
    border-radius: 5px !important;
  }
  .phone-orb-wrap { min-height: 0 !important; flex: 1 1 auto !important; }
  .phone-orb {
    width: min(148px, 44%) !important;
    height: auto !important;
    aspect-ratio: 1;
  }
  .pulse-ring.r1 { width: 180px !important; height: 180px !important; }
  .pulse-ring.r2 { width: 152px !important; height: 152px !important; }
  .phone-timer {
    font-size: 16px !important;
    height: 24px !important;
    margin-bottom: 6px !important;
  }
  .phone-idle-actions, .phone-msg {
    gap: 7px !important;
  }
  .phone-cta {
    padding: 9px 18px !important;
    font-size: 12px !important;
    gap: 6px !important;
  }
  .phone-fine { font-size: 10px !important; }
  .phone-ctrls {
    gap: 16px !important;
  }
  .ctrl {
    font-size: 9.5px !important;
    gap: 5px !important;
  }
  .ctrl-circle {
    width: 44px !important;
    height: 44px !important;
  }
  .ctrl-circle.end {
    width: 52px !important;
    height: 52px !important;
  }
  .phone-foot { padding-top: 6px !important; font-size: 9.5px !important; }
  .phone-home { width: 90px !important; margin-top: 6px !important; }
}

/* Narrow phones: keep frame inside viewport edges */
@media (max-width: 374px) {
  .phone-frame {
    max-width: min(260px, 86vw) !important;
    height: min(100%, 50dvh) !important;
  }
}

.phone-screen:has(.phone-msg-ended) .phone-orb-wrap,
.phone-screen:has(.phone-msg) .phone-orb-wrap {
  flex: 0 1 auto !important;
  min-height: 64px !important;
}
.phone-screen:has(.phone-msg) .phone-orb {
  width: min(96px, 28%) !important;
}
.phone-screen:has(.phone-msg-ended) .phone-orb {
  display: none !important;
}
.phone-end-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.phone-msg {
  max-height: 48%;
  overflow-y: auto;
}

@media (min-width: 768px) {
  .phone-stage {
    max-height: 100% !important;
  }
  .phone-frame {
    height: min(100%, 640px) !important;
    width: auto !important;
    max-width: min(340px, calc(100% - 16px)) !important;
  }
}