/* ════════════════════════════════════════════════════════════════
   $100B UPGRADE — ZOOM Prospecting Voice AI (#chat)
   ════════════════════════════════════════════════════════════════ */

#chat { background: #f0f2f7 !important; color: #111827 !important; padding: 28px 30px 60px !important; }
#chat, #chat * { color: #111827 !important; -webkit-text-fill-color: #111827 !important; }

/* Keyframes */
@keyframes z100bChatHeroGlow {
  0%, 100% { box-shadow: 0 0 25px rgba(0,101,241,0.10), 0 0 50px rgba(0,101,241,0.05), 0 8px 32px rgba(0,101,241,0.07); }
  33% { box-shadow: 0 0 25px rgba(0,200,255,0.12), 0 0 50px rgba(0,200,255,0.06), 0 8px 32px rgba(0,200,255,0.07); }
  66% { box-shadow: 0 0 25px rgba(124,58,237,0.10), 0 0 50px rgba(124,58,237,0.05), 0 8px 32px rgba(124,58,237,0.07); }
}
@keyframes z100bChatGlowLine { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
@keyframes z100bChatCardGlow {
  0%, 100% { box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 6px 20px rgba(0,101,241,0.06); }
  33% { box-shadow: 0 1px 3px rgba(0,200,255,0.06), 0 6px 20px rgba(0,200,255,0.07); }
  66% { box-shadow: 0 1px 3px rgba(124,58,237,0.05), 0 6px 20px rgba(124,58,237,0.06); }
}

/* Hero — dark purple gradient → premium light glass */
#chat .ai-section > div:first-child,
#chat [style*="linear-gradient(135deg,#0d0f17"],
#chat [style*="linear-gradient(135deg, #0d0f17"],
#chat [style*="linear-gradient(135deg,#170d14"] {
  background: linear-gradient(135deg, #ffffff, #f0f4ff, #e8f0fe, #f0f4ff) !important;
  border: 0.5px solid rgba(0,101,241,0.12) !important;
  border-radius: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  animation: z100bChatHeroGlow 6s ease-in-out infinite !important;
}
#chat .ai-section > div:first-child::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #0065f1, #00c8ff, #7c3aed, transparent) !important;
  background-size: 300% 100% !important;
  animation: z100bChatGlowLine 3s linear infinite !important;
  z-index: 2 !important;
}

/* Purple accents (#A855F7) → blue */
#chat [style*="#A855F7"], #chat [style*="#a855f7"] {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
}
#chat [style*="rgba(168,85,247"] {
  background: rgba(0,101,241,0.08) !important;
  border-color: rgba(0,101,241,0.20) !important;
}

/* Hero stat pills */
#chat [style*="background:rgba(168,85,247,0.08)"],
#chat [style*="background: rgba(168,85,247,0.08)"],
#chat [style*="background:rgba(0,200,100,0.08)"],
#chat [style*="background: rgba(0,200,100,0.08)"] {
  background: rgba(0,101,241,0.06) !important;
  border: 0.5px solid rgba(0,101,241,0.15) !important;
  border-radius: 14px !important;
  animation: z100bChatCardGlow 8s ease-in-out infinite !important;
}

/* Tabs */
#chat .inner-tab,
#chat button[onclick*="setChatMode"] {
  background: rgba(255,255,255,0.7) !important;
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  border: 0.5px solid rgba(0,101,241,0.10) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  transition: all 0.2s ease !important;
}
#chat .inner-tab:hover, #chat button[onclick*="setChatMode"]:hover {
  background: rgba(0,101,241,0.04) !important;
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
  border-color: rgba(0,101,241,0.20) !important;
  transform: translateY(-1px) !important;
}
#chat .inner-tab.active,
#chat button[onclick*="setChatMode"].active {
  background: linear-gradient(135deg, #0065f1, #2d7af8) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(0,101,241,0.30) !important;
}

/* Inputs in settings row */
#chat select, #chat input[type="text"], #chat input[type="email"], #chat textarea {
  background: #fff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border: 0.5px solid rgba(0,101,241,0.12) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}
#chat textarea { padding: 14px 18px !important; font-size: 0.92rem !important; }
#chat select:focus, #chat input:focus, #chat textarea:focus {
  border-color: #0065f1 !important;
  box-shadow: 0 0 0 3px rgba(0,101,241,0.10), 0 0 20px rgba(0,101,241,0.05) !important;
  outline: none !important;
}
#chat select option { background: #fff !important; color: #111827 !important; }
#chat textarea::placeholder, #chat input::placeholder { color: #9ca3af !important; }

/* Chat messages container */
#chat #chat-messages, #chat .chat-messages {
  background: rgba(255,255,255,0.92) !important;
  border: 0.5px solid rgba(0,101,241,0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.04), 0 6px 20px rgba(0,101,241,0.06) !important;
  color: #111827 !important;
}

/* AI bubble + user bubble (our new JS classes) */
#chat .z100b-chat-ai-bubble { color: #111827 !important; -webkit-text-fill-color: #111827 !important; }
#chat .z100b-chat-ai-bubble * { color: #111827 !important; -webkit-text-fill-color: #111827 !important; }
/* Blue agent/user bubble: white text. Qualified with #chat-messages so this beats the broad
   "white-on-light -> dark" catch-all below (#chat [style*="color:#fff"]), which ties on specificity
   and would otherwise win by source order and force this bubble's text black. */
#chat #chat-messages .z100b-chat-user-bubble, #chat #chat-messages .z100b-chat-user-bubble * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Legacy dark AI bubble fallback — if any remain */
#chat [style*="background:var(--black)"],
#chat [style*="background: var(--black)"] {
  background: rgba(255,255,255,0.92) !important;
  border: 0.5px solid rgba(0,101,241,0.10) !important;
  border-radius: 18px !important;
}

/* DISC prospect buttons */
#chat [style*="border-radius"][style*="cursor:pointer"][style*="padding"] {
  background: rgba(255,255,255,0.92) !important;
  border: 0.5px solid rgba(0,101,241,0.10) !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}
#chat [style*="border-radius"][style*="cursor:pointer"][style*="padding"]:hover {
  background: rgba(0,101,241,0.04) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,101,241,0.10) !important;
}

/* Primary Send / Start Session buttons */
#chat .btn-gold, #chat .btn,
#chat button[onclick*="sendChat"],
#chat button[onclick*="startListening"],
#chat [style*="background:var(--gold)"] {
  background: linear-gradient(135deg, #0055d4, #0065f1, #2d7af8) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0,101,241,0.30) !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}
#chat .btn-gold:hover, #chat .btn:hover,
#chat button[onclick*="sendChat"]:hover,
#chat button[onclick*="startListening"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(0,101,241,0.40) !important;
}
#chat button[onclick*="startListening"] {
  animation: z100bChatCardGlow 6s ease-in-out infinite !important;
}

/* Mic button */
#chat #mic-btn {
  background: rgba(0,101,241,0.06) !important;
  border: 1px solid rgba(0,101,241,0.18) !important;
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
  border-radius: 50% !important;
}
#chat #mic-btn:hover {
  background: rgba(0,101,241,0.12) !important;
  box-shadow: 0 4px 14px rgba(0,101,241,0.22) !important;
}

/* Quick prompts */
#chat #quick-prompts button {
  background: rgba(255,255,255,0.92) !important;
  border: 0.5px solid rgba(0,101,241,0.10) !important;
  border-radius: 12px !important;
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
}
#chat #quick-prompts button:hover {
  background: rgba(0,101,241,0.04) !important;
  border-color: rgba(0,101,241,0.20) !important;
  transform: translateY(-2px) !important;
}

/* Generic dark backgrounds remaining */
#chat [style*="background:#0d0f14"], #chat [style*="background: #0d0f14"],
#chat [style*="background:#080a0e"], #chat [style*="background: #080a0e"],
#chat [style*="background:#111"], #chat [style*="background: #111"],
#chat [style*="background:rgb(13"] {
  background: rgba(255,255,255,0.92) !important;
  border: 0.5px solid rgba(0,101,241,0.10) !important;
  border-radius: 14px !important;
}

/* White text on light bg → dark */
#chat [style*="color:#fff"], #chat [style*="color: #fff"],
#chat [style*="color:white"], #chat [style*="color: white"] {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}
#chat [style*="rgba(255,255,255,0.5"], #chat [style*="rgba(255,255,255,0.4"],
#chat [style*="rgba(255,255,255,0.35"], #chat [style*="rgba(255,255,255,0.25"] {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}

/* Gold line → blue line */
#chat .gold-line {
  background: linear-gradient(90deg, transparent, #0065f1, #00c8ff, transparent) !important;
}

/* Section heading */
#chat .section-heading { color: #111827 !important; -webkit-text-fill-color: #111827 !important; }
#chat .section-sub { color: #6b7280 !important; -webkit-text-fill-color: #6b7280 !important; }

/* Spinner (loading) */
#chat .spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(0,101,241,0.15);
  border-top-color: #0065f1;
  border-radius: 50%;
  display: inline-block;
  animation: z100bChatSpin 0.8s linear infinite;
}
@keyframes z100bChatSpin { to { transform: rotate(360deg); } }

/* Session-end / results area */
#chat .ai-result-label {
  background: linear-gradient(135deg, #0065f1, #00c8ff, #7c3aed) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Mobile */
@media (max-width: 768px) {
  #chat [style*="display:flex"][style*="gap"] { flex-wrap: wrap !important; }
  #chat textarea { font-size: 16px !important; }
  #chat .inner-tab, #chat button[onclick*="setChatMode"] { font-size: 0.78rem !important; padding: 8px 14px !important; }
}

/* ── Settings bar + mode-desc-bar + all var(--black-*) containers ── */
#chat [style*="background:var(--black-card)"],
#chat [style*="background: var(--black-card)"],
#chat [style*="background:var(--black-border)"],
#chat [style*="background: var(--black-border)"],
#chat [style*="background:rgba(0,0,0,0.2)"],
#chat [style*="background: rgba(0,0,0,0.2)"],
#chat [style*="background:rgba(0,0,0,0.3)"],
#chat [style*="background: rgba(0,0,0,0.3)"],
#chat [style*="background:rgba(255,255,255,0.03"],
#chat [style*="background:rgba(255,255,255,0.05"] {
  background: rgba(255,255,255,0.92) !important;
  border: 0.5px solid rgba(0,101,241,0.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.04), 0 6px 20px rgba(0,101,241,0.06) !important;
  animation: z100bChatCardGlow 8s ease-in-out infinite !important;
}

/* ── Select dropdowns inside settings bar (var(--black) bg) ── */
#chat select[style*="background:var(--black)"],
#chat select[style*="background: var(--black)"] {
  background: #fff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border: 0.5px solid rgba(0,101,241,0.15) !important;
  border-radius: 10px !important;
  padding: 7px 12px !important;
}

/* ── Voice toggle switch ── */
#chat #voice-toggle[style*="background:var(--black-border)"],
#chat #voice-toggle[style*="background: var(--black-border)"] {
  background: rgba(0,101,241,0.15) !important;
  border: 0.5px solid rgba(0,101,241,0.20) !important;
}
#chat #voice-knob[style*="background:var(--text-muted)"] {
  background: #0065f1 !important;
}

/* ── Mode description bar ── */
#chat #mode-desc-bar {
  background: rgba(0,101,241,0.04) !important;
  border: 0.5px solid rgba(0,101,241,0.12) !important;
  border-left: 3px solid #0065f1 !important;
  border-radius: 4px 14px 14px 4px !important;
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
  animation: z100bChatCardGlow 8s ease-in-out infinite !important;
}

/* ── DISC Quick chips container ── */
#chat #disc-chips {
  background: rgba(255,255,255,0.92) !important;
  border: 0.5px solid rgba(0,101,241,0.10) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 6px 20px rgba(0,101,241,0.06) !important;
  animation: z100bChatCardGlow 8s ease-in-out infinite !important;
}
#chat #disc-chips button { transition: all 0.2s ease !important; }
#chat #disc-chips button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0,101,241,0.12) !important;
}

/* ── .ai-panel chat window — glass + glow ── */
#chat .ai-panel {
  background: rgba(255,255,255,0.92) !important;
  border: 0.5px solid rgba(0,101,241,0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 10px 40px rgba(0,101,241,0.08) !important;
  animation: z100bChatCardGlow 8s ease-in-out infinite !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
#chat .ai-panel:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 20px rgba(0,101,241,0.10), 0 12px 48px rgba(0,101,241,0.10) !important;
}

/* ── Input row inside chat window ── */
#chat .ai-panel > div:last-child,
#chat .ai-panel [style*="padding"][style*="display:flex"] {
  background: rgba(255,255,255,0.60) !important;
  border-top: 0.5px solid rgba(0,101,241,0.08) !important;
}

/* ── Session status bar (when active) ── */
#chat #session-bar {
  background: linear-gradient(135deg, rgba(0,101,241,0.06), rgba(0,200,255,0.03)) !important;
  border: 0.5px solid rgba(0,101,241,0.20) !important;
  animation: z100bChatCardGlow 6s ease-in-out infinite !important;
}

/* ── All hero stat pills hover ── */
#chat .ai-section > div:first-child [style*="border-radius:12px"]:hover,
#chat .ai-section > div:first-child [style*="border-radius: 12px"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0,101,241,0.12) !important;
}

/* ── Text-muted across section ── */
#chat [style*="color:var(--text-muted)"],
#chat [style*="color: var(--text-muted)"] {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}
#chat [style*="color:var(--white-dim)"],
#chat [style*="color: var(--white-dim)"] {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}