/* ============================================================================
   Live AI Voice Agent demo — redesigned section (rendered inside demo-widget.html,
   embedded full-width by the landing's #live-demo iframe). Two states:
   .lad[data-state="idle"]   -> two-column "Talk to our AI Voice Agent" (marketing + widget card)
   .lad[data-state="active"] -> centered conversation view (chat bubbles + mic bar)
   Uses the site brand tokens from theme.css. ============================================================================ */

.lad { font-family: var(--font-sans); color: var(--foreground); width: 100%; max-width: 1180px; margin: 0 auto; }
.lad-idle { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.lad-active { display: none; }
.lad[data-state="active"] .lad-idle { display: none; }
.lad[data-state="active"] .lad-active { display: block; }

/* ---------- shared bits ---------- */
.lad-badge { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--primary); background: var(--card);
  border: 1px solid var(--border); border-radius: 999px; padding: .35rem .85rem; }
.lad-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); animation: lad-pulse 1.6s infinite; }
.lad-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  line-height: 1.05; letter-spacing: -.02em; margin: 1rem 0 0; }
.lad-h .grad { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lad-sub { color: var(--muted-foreground); font-size: 1.02rem; line-height: 1.6; margin-top: 1rem; }
@keyframes lad-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- IDLE: left marketing column ---------- */
.lad-features { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 1rem; }
.lad-features li { display: flex; align-items: center; gap: .85rem; font-size: 1rem; font-weight: 500; color: var(--foreground); }
.lad-features .ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: color-mix(in oklab, var(--primary) 10%, var(--card)); color: var(--primary);
  display: grid; place-items: center; box-shadow: 0 2px 10px color-mix(in oklab, var(--primary) 14%, transparent); }
.lad-security { display: flex; gap: .85rem; align-items: flex-start; margin-top: 1.75rem; padding: 1rem 1.15rem;
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow-card); max-width: 360px; }
.lad-security .ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  color: #fff; background: var(--gradient-brand); }
.lad-security strong { display: block; font-size: .92rem; }
.lad-security span { display: block; font-size: .82rem; color: var(--muted-foreground); margin-top: .15rem; line-height: 1.4; }
.lad-trust { margin-top: 1.75rem; }
.lad-trust-label { font-size: .8rem; color: var(--muted-foreground); }
.lad-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: .75rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: color-mix(in oklab, var(--muted-foreground) 80%, transparent); }
.lad-logos span { opacity: .7; }

/* ---------- IDLE: right widget card ---------- */
.lad-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl);
  box-shadow: 0 24px 60px -28px color-mix(in oklab, var(--primary) 40%, transparent), var(--shadow-card);
  padding: clamp(1.25rem, 2.5vw, 2rem); position: relative; }
.lad-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lad-online { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--foreground); }
.lad-online .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 22%, transparent); }
.lad-powered { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--muted-foreground); }
.lad-powered svg { color: var(--primary); }

/* orb + side waveforms */
.lad-orb-area { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; margin: 1.75rem 0 .25rem; }
.lad-wave { width: 100%; height: 70px; }
.lad-orb-wrap { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.lad-orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid color-mix(in oklab, var(--primary) 18%, transparent); }
.lad-orb-ring--2 { inset: -16px; border-color: color-mix(in oklab, var(--primary) 12%, transparent); }
.lad-orb-ring--3 { inset: -32px; border-color: color-mix(in oklab, var(--primary) 7%, transparent); }
.lad[data-state] .lad-orb-wrap.is-live .lad-orb-ring { animation: lad-ring 2.4s ease-in-out infinite; }
.lad[data-state] .lad-orb-wrap.is-live .lad-orb-ring--2 { animation-delay: .4s; }
.lad[data-state] .lad-orb-wrap.is-live .lad-orb-ring--3 { animation-delay: .8s; }
@keyframes lad-ring { 0%,100% { transform: scale(.96); opacity: .8; } 50% { transform: scale(1.06); opacity: .3; } }
.lad-orb { width: 88px; height: 88px; border-radius: 50%; border: none; cursor: pointer; position: relative; z-index: 1;
  background: var(--gradient-brand); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px -8px color-mix(in oklab, var(--primary) 65%, transparent);
  transition: transform .25s, box-shadow .25s; }
.lad-orb:hover { transform: scale(1.07); }
.lad-orb:active { transform: scale(.94); }
.lad-orb.is-live { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 12px 30px -8px rgba(239,68,68,.5); }
.lad-orb .end-ic { display: none; }
.lad-orb.is-live .mic-ic { display: none; }
.lad-orb.is-live .end-ic { display: block; }
.lad-orb-title { text-align: center; font-weight: 700; font-size: 1.05rem; margin: .5rem 0 0; }
.lad-orb-sub { text-align: center; color: var(--muted-foreground); font-size: .85rem; margin: .25rem 0 0; }

/* stat cards */
.lad-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin-top: 1.5rem; }
.lad-stat { border: 1px solid var(--border); border-radius: var(--radius-xl); padding: .85rem .75rem; text-align: center; background: var(--card); }
.lad-stat .ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; margin-bottom: .35rem;
  background: color-mix(in oklab, var(--primary) 10%, var(--card)); color: var(--primary); }
.lad-stat strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--primary); line-height: 1; }
.lad-stat span { display: block; font-size: .72rem; color: var(--muted-foreground); margin-top: .25rem; }

/* example pills */
.lad-divider { text-align: center; position: relative; margin: 1.5rem 0 1rem; }
.lad-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border); }
.lad-divider span { position: relative; background: var(--card); padding: 0 .75rem; font-size: .78rem; color: var(--muted-foreground); }
.lad-pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.lad-pill { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: inherit; font-size: .85rem; font-weight: 500;
  color: var(--foreground); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: .6rem .9rem; cursor: pointer; transition: all .2s; }
.lad-pill:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); color: var(--primary); transform: translateY(-1px); }
.lad-pill svg { color: var(--primary); }

/* pilot footer */
.lad-pilot { display: flex; align-items: center; gap: .85rem; margin-top: 1.5rem; padding: .9rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: color-mix(in oklab, var(--primary) 5%, var(--card)); }
.lad-pilot > .ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--primary);
  background: color-mix(in oklab, var(--primary) 12%, var(--card)); }
.lad-pilot-text { flex: 1; min-width: 0; }
.lad-pilot-text strong { display: block; font-size: .88rem; }
.lad-pilot-text span { display: block; font-size: .8rem; color: var(--muted-foreground); }
.lad-pilot-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; background: var(--gradient-brand); color: #fff;
  font-weight: 600; font-size: .85rem; padding: .6rem 1.1rem; border-radius: var(--radius); text-decoration: none; box-shadow: var(--shadow-elegant); transition: opacity .2s; }
.lad-pilot-btn:hover { opacity: .9; }

/* ---------- ACTIVE: conversation view ---------- */
.lad-active-head { text-align: center; margin-bottom: 1.5rem; }
.lad-active-head .lad-h { margin-top: .75rem; }
.lad-conv-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl);
  box-shadow: 0 24px 60px -28px color-mix(in oklab, var(--primary) 35%, transparent), var(--shadow-card); overflow: hidden; }
.lad-conv-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.lad-conv-top .lad-wave { height: 34px; max-width: 320px; justify-self: center; }
.lad-conv-top .lad-powered { justify-self: end; }
.lad-conv { height: 360px; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; scroll-behavior: smooth;
  background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 3%, var(--card)), var(--card)); }
.lad-conv::-webkit-scrollbar { width: 8px; }
.lad-conv::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--primary) 28%, transparent); border-radius: 999px; }
.lad-conv-empty { margin: auto; text-align: center; color: var(--muted-foreground); font-size: .9rem; max-width: 32ch; }

/* chat rows */
.lad-msg { display: flex; gap: .7rem; max-width: 78%; }
.lad-msg--agent { align-self: flex-start; }
.lad-msg--you { align-self: flex-end; flex-direction: row-reverse; }
.lad-ava { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--gradient-brand); }
.lad-msg--you .lad-ava { background: color-mix(in oklab, var(--primary) 16%, var(--card)); color: var(--primary); }
.lad-bub { min-width: 0; }
.lad-meta { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .25rem; font-size: .72rem; }
.lad-msg--you .lad-meta { flex-direction: row-reverse; }
.lad-who { font-weight: 700; color: var(--primary); }
.lad-time { color: var(--muted-foreground); }
.lad-text { font-size: .92rem; line-height: 1.5; padding: .7rem .95rem; border-radius: 14px; word-break: break-word;
  background: color-mix(in oklab, var(--primary) 9%, var(--card)); color: var(--foreground); border-top-left-radius: 4px; }
.lad-msg--you .lad-text { background: color-mix(in oklab, var(--primary) 6%, var(--card)); border-top-left-radius: 14px; border-top-right-radius: 4px; }

/* bottom bar */
.lad-conv-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.1rem 1.25rem; border-top: 1px solid var(--border); }
.lad-audio, .lad-restart { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-size: .85rem; font-weight: 500;
  color: var(--muted-foreground); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: .55rem 1rem; cursor: pointer; transition: all .2s; }
.lad-audio { justify-self: start; }
.lad-restart { justify-self: end; color: var(--primary); }
.lad-audio:hover, .lad-restart:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
.lad-audio.is-off { color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 40%, var(--border)); }
.lad-mic-wrap { display: grid; justify-items: center; gap: .4rem; }
.lad-orb--sm { width: 64px; height: 64px; }
.lad-tap { font-size: .78rem; color: var(--muted-foreground); }
.lad-status-line { text-align: center; font-size: .82rem; color: var(--muted-foreground); margin-top: .75rem; min-height: 1.1em; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .lad-idle { grid-template-columns: 1fr; }
  .lad-intro { text-align: center; }
  .lad-features { max-width: 420px; margin-inline: auto; }
  .lad-features li { justify-content: flex-start; }
  .lad-security, .lad-trust { margin-inline: auto; }
  .lad-logos { justify-content: center; }
}
@media (max-width: 560px) {
  .lad-stats { grid-template-columns: 1fr; }
  .lad-pills { grid-template-columns: 1fr; }
  .lad-pilot { flex-direction: column; align-items: stretch; text-align: center; }
  .lad-pilot-btn { justify-content: center; }
  .lad-msg { max-width: 90%; }
  .lad-conv-top { grid-template-columns: auto 1fr; }
  .lad-conv-top .lad-powered { display: none; }
  .lad-conv-bottom { grid-template-columns: auto 1fr auto; gap: .5rem; }
  .lad-audio span, .lad-restart span { display: none; }
}