/* NimbusJoy voice — Listen buttons, mic/Live buttons, Live conversation overlay */

/* ---------- 🔊 Listen pill on replies ---------- */
.msg .spk {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  padding: 5px 11px 5px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.04); color: var(--ink-3); font: 600 12px/1 inherit;
  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.msg .spk svg { width: 16px; height: 16px; }
.msg .spk:active { background: rgba(255,255,255,.1); }
.msg .spk.on, .msg .spk.busy { color: var(--accent); border-color: var(--accent); }
.msg .spk.busy span { animation: vl-fade 1s ease-in-out infinite alternate; }

/* ---------- input bar ---------- */
.chat-input-row .voice-btn svg { width: 23px; height: 23px; }
.chat-input-row .live-btn { color: var(--accent); }
#micBtn.rec { color: #fff; background: #d03b3b; animation: vl-rec 1.2s ease-in-out infinite; }
/* Gemini-style: mic + Live while empty, send arrow once there's something to send */
.chat-input-row:not(.has-text) #sendBtn { display: none; }
.chat-input-row.has-text #liveBtn { display: none; }
.chat-input-row.has-text #micBtn:not(.rec) { display: none; }
@keyframes vl-rec { 0%,100% { box-shadow: 0 0 0 0 rgba(208,59,59,.55); } 50% { box-shadow: 0 0 0 9px rgba(208,59,59,0); } }

/* ---------- Live overlay ---------- */
body.vlive-open { overflow: hidden; }
.vlive {
  --lvl: 0; position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 14px) 20px calc(env(safe-area-inset-bottom) + 22px);
  color: var(--ink);
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(56,200,232,.20), transparent 60%),
    radial-gradient(90% 50% at 50% 0%, rgba(124,92,255,.14), transparent 70%),
    #08080b;
  animation: vl-in .22s ease-out;
}
.vlive.hidden { display: none; }
@keyframes vl-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

.vl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vl-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; letter-spacing: .2px; }
.vl-agent { color: var(--ink-3); font-weight: 600; font-size: 14px; }
.vl-dot { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 10px #3ddc84; }
.vl-chip {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.05);
  color: var(--ink-2); font: 600 12.5px/1 inherit;
}

.vl-captions {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 14px; padding: 18px 2px 10px; text-align: center;
}
.vl-you { color: var(--ink-3); font-size: 16px; line-height: 1.4; }
.vl-you.live::after { content: "▍"; color: var(--accent); animation: vl-fade .7s steps(2) infinite; }
.vl-bot { color: var(--ink); font-size: 19px; line-height: 1.45; font-weight: 500; max-height: 38vh; overflow-y: auto; }
.vl-bot:empty, .vl-you:empty { display: none; }

.vl-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0 18px; }
.vl-status { color: var(--ink-2); font-size: 14.5px; font-weight: 600; min-height: 20px; text-align: center; }

/* the orb */
.vl-orb {
  position: relative; width: 168px; height: 168px; border: 0; padding: 0; border-radius: 50%;
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.vl-core {
  position: absolute; inset: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a8f0ff 0%, #38c8e8 32%, #4b6bff 68%, #7c5cff 100%);
  box-shadow: 0 0 40px rgba(56,200,232,.45), inset 0 -10px 30px rgba(0,0,0,.25);
  transition: transform .18s ease-out;
  transform: scale(calc(1 + var(--lvl) * .18));
}
.vl-ring { position: absolute; inset: 22px; border-radius: 50%; border: 2px solid rgba(56,200,232,.5); opacity: 0; }
.vl-bars { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 6px; }
.vl-bars i { width: 7px; height: 26px; border-radius: 4px; background: rgba(255,255,255,.92); animation: vl-bar .9s ease-in-out infinite; }
.vl-bars i:nth-child(2) { animation-delay: -.15s; } .vl-bars i:nth-child(3) { animation-delay: -.3s; }
.vl-bars i:nth-child(4) { animation-delay: -.45s; } .vl-bars i:nth-child(5) { animation-delay: -.6s; }

.vlive[data-state="idle"] .vl-core { animation: vl-breathe 3.2s ease-in-out infinite; filter: saturate(.6) brightness(.8); }
.vlive[data-state="listening"] .vl-ring { animation: vl-ripple 1.6s ease-out infinite; }
.vlive[data-state="listening"] .vl-ring.r2 { animation-delay: .8s; }
.vlive[data-state="listening"] .vl-core { animation: vl-pulse 1.4s ease-in-out infinite; }
.vlive[data-state="transcribing"] .vl-core,
.vlive[data-state="thinking"] .vl-core {
  background: conic-gradient(from 0deg, #38c8e8, #7c5cff, #ff5ca8, #38c8e8);
  animation: vl-spin 1.6s linear infinite;
}
.vlive[data-state="speaking"] .vl-bars { display: flex; }
.vlive[data-state="speaking"] .vl-core { animation: vl-pulse 2s ease-in-out infinite; }

@keyframes vl-breathe { 0%,100% { transform: scale(.94); } 50% { transform: scale(1); } }
@keyframes vl-pulse { 0%,100% { transform: scale(calc(1 + var(--lvl) * .18)); } 50% { transform: scale(calc(1.06 + var(--lvl) * .18)); } }
@keyframes vl-ripple { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.55); } }
@keyframes vl-spin { to { transform: rotate(360deg); } }
@keyframes vl-bar { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1.25); } }
@keyframes vl-fade { from { opacity: .35; } to { opacity: 1; } }

.vl-controls { display: flex; justify-content: center; gap: 34px; }
.vl-ctl {
  width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,255,255,.07); color: var(--ink); display: grid; place-items: center;
}
.vl-ctl svg { width: 26px; height: 26px; }
.vl-ctl:active { background: rgba(255,255,255,.14); }
.vl-ctl.end { background: #d03b3b; border-color: #d03b3b; color: #fff; }
@media (prefers-reduced-motion: reduce) { .vlive * { animation: none !important; } }