/* spark-voice.css — the live conversation panel, restored + re-themed to the site's
   current gold identity (was blue in the archived build). Display serif for Spark's
   voice, generous air, a breathing orb, and a thinking state so a pause never reads
   as broken. The "Done talking" button is intentionally absent — a button offering
   to stop mid-conversation gets pressed by mistake; Spark closes the conversation
   itself, warmly. */

.sv-veil{
  position:fixed; inset:0; z-index:9998;
  background:radial-gradient(120% 90% at 50% 0%, #16233d 0%, #0a1120 55%, #06090f 100%);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.sv-veil.open{ display:flex; }

.sv-box{
  width:100%; max-width:660px; display:flex; flex-direction:column; max-height:92vh;
  background:linear-gradient(180deg, rgba(23,34,58,.92), rgba(13,21,38,.96));
  border:1px solid rgba(206,156,28,.16);
  border-radius:20px; overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---- header ---- */
.sv-head{
  display:flex; align-items:center; gap:15px;
  padding:22px 26px 18px;
  border-bottom:1px solid rgba(206,156,28,.12);
}
.sv-orb{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto; position:relative;
  background:radial-gradient(circle at 34% 30%, #F2CE7A 0%, #CE9C1C 42%, #CE9C1C 100%);
  box-shadow:0 0 0 0 rgba(206,156,28,.55);
}
.sv-veil.live .sv-orb{ animation:svBreathe 3.4s ease-in-out infinite; }
.sv-veil.think .sv-orb{ animation:svBreathe 1.1s ease-in-out infinite; }
@keyframes svBreathe{
  0%,100%{ transform:scale(1);    box-shadow:0 0 0 0 rgba(206,156,28,.45); }
  50%    { transform:scale(1.07); box-shadow:0 0 0 13px rgba(206,156,28,0); }
}

.sv-title{ flex:1 1 auto; min-width:0; }
.sv-title b{
  display:block; font-family:Georgia,'Times New Roman',serif;
  font-size:20px; font-weight:400; letter-spacing:.01em; color:#F2F6FF;
}
.sv-sub{
  display:block; margin-top:3px;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:#7E93B8;
}
.sv-veil.live .sv-sub{ color:#CE9C1C; }

.sv-x{
  width:40px; height:40px; border-radius:11px; flex:0 0 auto;
  border:1px solid rgba(206,156,28,.2); background:rgba(255,255,255,.05);
  color:#7E93B8; font-size:16px; cursor:pointer; transition:.18s;
}
.sv-x:hover{ background:rgba(255,255,255,.12); color:#F2F6FF; }
.sv-x:focus-visible{ outline:2px solid #CE9C1C; outline-offset:2px; }

/* ---- the conversation ---- */
.sv-body{
  padding:26px; overflow-y:auto; flex:1 1 auto; min-height:220px;
  scrollbar-width:thin;
}
.sv-turn{ margin:0 0 22px; }
.sv-turn:last-child{ margin-bottom:4px; }
.sv-turn b{
  display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; margin-bottom:8px;
}
.sv-turn.spark b{ color:#CE9C1C; }
.sv-turn.you   b{ color:#7E93B8; }

.sv-turn.spark span{
  display:block; font-family:Georgia,'Times New Roman',serif;
  font-size:22px; line-height:1.48; color:#F2F6FF; letter-spacing:.004em;
}
.sv-turn.you span{
  display:block; font-size:16.5px; line-height:1.55; color:#7E93B8;
  padding-left:15px; border-left:2px solid rgba(206,156,28,.22);
}

/* thinking — a pause with an explanation is not a pause that feels broken */
.sv-think{ display:none; align-items:center; gap:9px; padding:2px 0 6px; }
.sv-veil.think .sv-think{ display:flex; }
.sv-think i{
  width:7px; height:7px; border-radius:50%; background:#CE9C1C;
  animation:svDot 1.25s ease-in-out infinite;
}
.sv-think i:nth-child(2){ animation-delay:.16s; }
.sv-think i:nth-child(3){ animation-delay:.32s; }
.sv-think em{
  font-style:normal; font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:#7E93B8; font-weight:600; margin-left:4px;
}
@keyframes svDot{ 0%,100%{opacity:.25;transform:translateY(0)} 50%{opacity:1;transform:translateY(-4px)} }

.sv-note{
  color:#7E93B8; font-size:17px; line-height:1.6; text-align:center;
  padding:34px 14px; font-family:Georgia,'Times New Roman',serif;
}
.sv-note b{ color:#F2F6FF; font-family:inherit; }
.sv-note small{
  display:block; margin-top:14px; font-family:system-ui,-apple-system,sans-serif;
  font-size:14px; line-height:1.55; color:#7E93B8;
}

/* ---- what Spark has so far ---- */
.sv-brief{
  border-top:1px solid rgba(206,156,28,.12);
  padding:18px 26px 20px; background:rgba(6,10,20,.5);
}
.sv-brief-t{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:#7E93B8; font-weight:700; margin-bottom:12px;
}
.sv-row{ display:flex; gap:11px; align-items:baseline; margin-bottom:9px; font-size:15px; line-height:1.5; }
.sv-row:last-child{ margin-bottom:0; }
.sv-row i{ color:#CE9C1C; font-style:normal; font-size:12px; flex:0 0 auto; }
.sv-row u{
  text-decoration:none; color:#7E93B8; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; flex:0 0 auto; min-width:82px;
}
.sv-row span{ color:#F2F6FF; }

/* ---- footer ---- */
.sv-foot{
  display:flex; align-items:center; gap:12px;
  padding:16px 26px 20px; border-top:1px solid rgba(206,156,28,.12);
}
.sv-hint{ flex:1 1 auto; font-size:13.5px; color:#7E93B8; line-height:1.45; }
.sv-btn{
  font:inherit; font-size:14px; font-weight:600; padding:11px 20px; border-radius:12px;
  cursor:pointer; border:1px solid rgba(206,156,28,.22);
  background:rgba(255,255,255,.05); color:#F2F6FF; transition:.18s; flex:0 0 auto;
}
.sv-btn:hover{ background:rgba(255,255,255,.13); }
.sv-btn:focus-visible{ outline:2px solid #CE9C1C; outline-offset:2px; }
.sv-btn[hidden]{ display:none; }

/* the button that opens it all */
.talkbtn{
  display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:14px;
  font-weight:600; padding:11px 17px; border-radius:12px; cursor:pointer; color:#FFFFFF;
  border:1px solid transparent; background:linear-gradient(95deg,#CE9C1C,#CE9C1C);
  box-shadow:0 6px 20px -8px rgba(206,156,28,.7); transition:.18s;
}
.talkbtn:hover{ filter:brightness(1.09); transform:translateY(-1px); }
.talkbtn:focus-visible{ outline:2px solid #CE9C1C; outline-offset:3px; }
.talkbtn[hidden]{ display:none; }

@media (max-width:640px){
  .sv-veil{ padding:0; }
  .sv-box{ max-width:100%; border-radius:0; max-height:100vh; height:100%; border:0; }
  .sv-head{ padding:18px 20px 15px; }
  .sv-body{ padding:20px; }
  .sv-turn.spark span{ font-size:19px; }
  .sv-turn.you span{ font-size:15.5px; }
  .sv-brief,.sv-foot{ padding-left:20px; padding-right:20px; }
}
@media (prefers-reduced-motion:reduce){
  .sv-veil.live .sv-orb,.sv-veil.think .sv-orb,.sv-think i{ animation:none; }
}

/* ---- ONE mic, big and gold: this button IS the AI agent now (Founder direction,
   Sep 5 2026 — no separate plain-dictation mic plus a second "talk to Spark" control,
   just one attractive, obviously-alive mic that opens the conversation). Sized up from
   the site's base .mic (68px) and given a soft breathing glow so it reads as smart,
   not just decorative. */
.sparkMic{
  width:84px; height:84px;
  box-shadow:0 1px 2px rgba(107,81,10,.4),0 12px 26px -10px rgba(157,121,21,.65),
             0 0 0 6px var(--gold-pale),0 0 0 7px var(--gold-line),
             0 0 0 0 rgba(206,156,28,.45);
  animation:sparkMicGlow 3.2s ease-in-out infinite;
}
.sparkMic svg{ width:26px; height:26px; }
.sparkMic:hover{ transform:scale(1.05); }
@keyframes sparkMicGlow{
  0%,100%{ box-shadow:0 1px 2px rgba(107,81,10,.4),0 12px 26px -10px rgba(157,121,21,.65),
                       0 0 0 6px var(--gold-pale),0 0 0 7px var(--gold-line),
                       0 0 0 0 rgba(206,156,28,.35); }
  50%{ box-shadow:0 1px 2px rgba(107,81,10,.4),0 12px 26px -10px rgba(157,121,21,.65),
                  0 0 0 6px var(--gold-pale),0 0 0 7px var(--gold-line),
                  0 0 0 9px rgba(206,156,28,0); }
}
@media (max-width:640px){
  .sparkMic{ width:72px; height:72px; }
  .sparkMic svg{ width:23px; height:23px; }
}
@media (prefers-reduced-motion:reduce){
  .sparkMic{ animation:none; }
}
.sparkMicNote{ font:500 13.5px/1.55 var(--sans,inherit); color:var(--ink3,#6b7280); text-align:center; margin:12px 0 0; }