/* P421 — Victoria Widget Fortune 500 */
@keyframes v421-breathe {
  0%, 100% { transform: scale(0.96); }
  50% { transform: scale(1.04); }
}
@keyframes v421-pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes v421-typing {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}
@keyframes v421-orb-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#v421-root { --v421-blue: #1e3a8a; --v421-blue-b: #2563eb; --v421-gold: #d4af37; --v421-bg: #f7f9fc; font-family: "Inter", -apple-system, sans-serif; }

#v421-fab {
  position: fixed; bottom: 24px; right: 24px; width: 72px; height: 72px; border-radius: 50%;
  border: none; cursor: pointer; z-index: 99990;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #d4af37 100%);
  box-shadow: 0 12px 32px rgba(30,58,138,0.32), 0 4px 12px rgba(212,175,55,0.16);
  color: #fff; font-size: 32px; font-weight: 700;
  animation: v421-breathe 3s ease-in-out infinite;
  transition: transform 200ms cubic-bezier(0.16,1,0.3,1), box-shadow 200ms;
}
#v421-fab:hover { transform: scale(1.08); }
#v421-fab .v421-dot {
  position: absolute; bottom: 8px; right: 8px; width: 12px; height: 12px;
  border-radius: 50%; background: #10b981; border: 2px solid #fff;
}
#v421-fab.processing .v421-dot { background: #f59e0b; }
#v421-fab.error .v421-dot { background: #ef4444; }

#v421-panel {
  position: fixed; bottom: 108px; right: 24px; width: 420px; max-width: calc(100vw - 32px);
  height: 640px; max-height: calc(100vh - 120px);
  background: #fff; border-radius: 20px; z-index: 99989;
  box-shadow: 0 24px 48px rgba(10,14,26,0.16);
  display: none; flex-direction: column; overflow: hidden;
  border: 1px solid #eef1f6;
}
#v421-panel.open { display: flex; }

.v421-header {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid #eef1f6; min-height: 72px;
}
.v421-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #1e3a8a, #d4af37);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 22px;
}
.v421-header h2 { margin: 0; font-size: 18px; font-weight: 600; color: #1a1f36; }
.v421-header small { color: #718096; font-size: 13px; }
.v421-online { color: #10b981; font-size: 12px; }
.v421-header-actions { margin-left: auto; display: flex; gap: 8px; }
.v421-header-actions button { background: none; border: none; font-size: 20px; cursor: pointer; color: #4a5568; }

.v421-tabs { display: flex; gap: 4px; padding: 8px 12px; background: #fafbfc; }
.v421-tabs button {
  flex: 1; border: none; background: transparent; padding: 8px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: #718096; cursor: pointer;
}
.v421-tabs button.active { background: #fff; color: #1e3a8a; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

.v421-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  background: linear-gradient(180deg, #fff 0%, #eff6ff 100%);
}
.v421-msg { max-width: 85%; margin-bottom: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.45; }
.v421-msg.bot {
  background: #fff; border-radius: 16px 16px 16px 4px;
  box-shadow: 0 2px 8px rgba(10,14,26,0.06); color: #1a1f36;
}
.v421-msg.user {
  margin-left: auto; background: #1e3a8a; color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.v421-ts { font-size: 10px; color: #a0aec0; margin-top: 4px; }
.v421-typing { display: flex; gap: 4px; padding: 8px 12px; }
.v421-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: #2563eb;
  animation: v421-typing 1.2s infinite;
}
.v421-typing span:nth-child(2) { animation-delay: 0.15s; }
.v421-typing span:nth-child(3) { animation-delay: 0.3s; }

.v421-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.v421-chips button {
  border: 1px solid #dbeafe; background: #fff; border-radius: 999px;
  padding: 6px 12px; font-size: 12px; cursor: pointer; color: #1e3a8a;
}

.v421-voice-zone { display: none; flex-direction: column; align-items: center; padding: 20px; }
.v421-voice-zone.active { display: flex; }
.v421-speak-btn {
  width: 88px; height: 88px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #fff; font-size: 28px;
  box-shadow: 0 8px 24px rgba(30,58,138,0.25);
  transition: transform 200ms;
}
.v421-speak-btn.active { background: linear-gradient(135deg, #2563eb, #60a5fa); animation: v421-breathe 2s infinite; }
.v421-voice-hint { margin-top: 12px; font-size: 13px; color: #718096; text-align: center; }

.v421-footer { padding: 12px; border-top: 1px solid #eef1f6; display: flex; gap: 8px; }
.v421-footer textarea {
  flex: 1; border: 1px solid #eef1f6; border-radius: 12px; padding: 10px 12px;
  resize: none; font-family: inherit; font-size: 14px;
}
.v421-send {
  background: linear-gradient(135deg, #d4af37, #f5b942); border: none; border-radius: 12px;
  padding: 0 18px; font-weight: 700; cursor: pointer; color: #0a0e1a;
}

#v421-overlay {
  display: none; position: fixed; inset: 0; z-index: 99999;
  background: radial-gradient(circle at 50% 40%, #eff6ff 0%, #fff 70%);
  flex-direction: column; align-items: center; justify-content: center;
}
#v421-overlay.open { display: flex; }
.v421-exit {
  position: absolute; top: 20px; right: 20px; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid #eef1f6; background: #fff; cursor: pointer; font-size: 20px;
}
.v421-orb-wrap { width: 320px; height: 320px; position: relative; display: grid; place-items: center; }
.v421-orb {
  width: 200px; height: 200px; border-radius: 50%;
  background: linear-gradient(135deg, #1e3a8a, #60a5fa, #d4af37);
  filter: blur(0.5px);
  box-shadow: 0 0 60px rgba(37,99,235,0.35);
  animation: v421-breathe 2s ease-in-out infinite;
  transition: background 400ms, box-shadow 400ms;
}
.v421-orb-ring {
  position: absolute; inset: 20px; border-radius: 50%;
  border: 2px solid rgba(37,99,235,0.2);
  animation: v421-pulse-ring 2s ease-out infinite;
}
.v421-orb.escuchando { background: linear-gradient(135deg, #2563eb, #3b82f6); box-shadow: 0 0 80px rgba(37,99,235,0.5); }
.v421-orb.pensando { background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 0 60px rgba(99,102,241,0.4); }
.v421-orb.hablando { background: linear-gradient(135deg, #d4af37, #2563eb); box-shadow: 0 0 70px rgba(212,175,55,0.45); }
.v421-orb-status { margin-top: 24px; font-size: 18px; font-weight: 600; color: #1e3a8a; text-align: center; max-width: 90%; }
.v421-karaoke { margin-top: 12px; font-size: 15px; color: #4a5568; text-align: center; max-width: 480px; }
.v421-karaoke .on { color: #1e3a8a; font-weight: 600; }

@media (max-width: 768px) {
  #v421-panel.open { inset: 0; width: 100%; height: 100%; max-height: 100%; bottom: 0; right: 0; border-radius: 0; }
  #v421-fab { bottom: 16px; right: 16px; }
}