/* ─────────────────────────────────────────────────────────────────────────────
   TechHub360 Theme Overrides for SSAI Chatbot Embed
   High-Contrast Typography, Union Red Branding, and Seamless Dark/Light Modes
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 1. Root & Upstream Custom Property Tokens ──────────────────────────────── */
:root,
body {
  --ssai-primary-color: #ce1126;
  --ssai-primary: #ce1126;
  --ssai-primary-hover: #b00e1f;
  --ssai-secondary-color: #0f172a;
  --ssai-secondary: #0f172a;
  --ssai-bg-color: #ffffff;
  --ssai-bg: #ffffff;
  --ssai-surface: #f8fafc;
  --ssai-surface-alt: #f1f5f9;
  --ssai-font-color: #0f172a;
  --ssai-text: #0f172a;
  --ssai-text-muted: #64748b;
  --ssai-border: #e2e8f0;
  --ssai-user-bubble-bg: #ce1126;
  --ssai-user-bubble-text: #ffffff;
  --ssai-bot-bubble-bg: #f1f5f9;
  --ssai-bot-bubble-text: #0f172a;
  --ssai-radius: 16px;
}

/* ── 2. Dark Mode Theme Adaptation ─────────────────────────────────────────── */
[data-theme="dark"],
.dark,
body.dark {
  --ssai-primary-color: #e61c33;
  --ssai-primary: #e61c33;
  --ssai-primary-hover: #ce1126;
  --ssai-secondary-color: #1e293b;
  --ssai-secondary: #1e293b;
  --ssai-bg-color: #0b111e;
  --ssai-bg: #0b111e;
  --ssai-surface: #111c2e;
  --ssai-surface-alt: #18263e;
  --ssai-font-color: #f8fafc;
  --ssai-text: #f8fafc;
  --ssai-text-muted: #94a3b8;
  --ssai-border: #1e293b;
  --ssai-user-bubble-bg: #e61c33;
  --ssai-user-bubble-text: #ffffff;
  --ssai-bot-bubble-bg: #18263e;
  --ssai-bot-bubble-text: #f8fafc;
}

/* ── 3. High-Specificity Component Hierarchy ────────────────────────────────── */
body .ssai-chatbot {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ssai-text);
}

/* ── Floating Launcher Button ───────────────────────────────────────────────── */
body .ssai-chatbot .ssai-toggle-btn {
  background: linear-gradient(135deg, #ce1126 0%, #990011 100%);
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 24px -4px rgba(206, 17, 38, 0.45), 0 4px 12px rgba(0, 0, 0, 0.15);
  color: #ffffff;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

body .ssai-chatbot .ssai-toggle-btn:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 30px -4px rgba(206, 17, 38, 0.6), 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Unread Badge */
body .ssai-chatbot .ssai-badge {
  background: #ffffff;
  color: #ce1126;
  border: 2px solid #ce1126;
  font-weight: 800;
}

/* ── Chat Panel Frame ───────────────────────────────────────────────────────── */
body .ssai-chatbot .ssai-panel {
  border-radius: var(--ssai-radius);
  border: 1px solid var(--ssai-border);
  background: var(--ssai-bg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.1);
}

body .ssai-chatbot .ssai-panel-body {
  background: var(--ssai-bg);
}

/* ── Header Styling & High-Contrast Typography ──────────────────────────────── */
body .ssai-chatbot .ssai-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-bottom: 2px solid #ce1126;
  padding: 0.85rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* Brand Name / Title: Crisp White Bold Text */
body .ssai-chatbot .ssai-header-name {
  color: #ffffff;
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Status Indicator Dot: Vibrant Green */
body .ssai-chatbot .ssai-header-dot {
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e, 0 0 2px #22c55e;
  width: 0.5rem;
  height: 0.5rem;
}

/* Header Action Buttons (Minimize / Close Dropdown) */
body .ssai-chatbot .ssai-header-btn {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0.375rem;
  width: 1.85rem;
  height: 1.85rem;
  transition: all 0.2s ease;
}

body .ssai-chatbot .ssai-header-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

body .ssai-chatbot .ssai-header-btn svg {
  stroke: currentColor;
  color: currentColor;
  fill: currentColor;
}

body .ssai-chatbot .ssai-header-logo-initials {
  background: #ce1126;
  color: #ffffff;
  font-weight: 800;
  border-radius: 0.375rem;
}

body .ssai-chatbot .ssai-header-divider {
  background: rgba(255, 255, 255, 0.18);
}

/* ── Messages Area & Greetings ──────────────────────────────────────────────── */
body .ssai-chatbot .ssai-messages {
  background: var(--ssai-surface);
  color: var(--ssai-text);
}

body .ssai-chatbot .ssai-greeting {
  color: var(--ssai-text);
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-weight: 700;
}

/* User Message Bubbles */
body .ssai-chatbot .ssai-msg--user .ssai-bubble {
  background: var(--ssai-user-bubble-bg);
  color: var(--ssai-user-bubble-text);
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 12px -2px rgba(206, 17, 38, 0.3);
}

body .ssai-chatbot .ssai-msg--user .ssai-bubble a {
  color: #ffffff;
  text-decoration: underline;
}

/* Bot Message Bubbles */
body .ssai-chatbot .ssai-msg--bot .ssai-bubble {
  background: var(--ssai-bot-bubble-bg);
  color: var(--ssai-bot-bubble-text);
  border: 1px solid var(--ssai-border);
  border-bottom-left-radius: 4px;
}

body .ssai-chatbot .ssai-msg--bot .ssai-bubble a {
  color: var(--ssai-primary);
  text-decoration: underline;
  font-weight: 600;
}

/* ── Input Box & Footer ─────────────────────────────────────────────────────── */
body .ssai-chatbot .ssai-footer {
  background: var(--ssai-bg);
  border-top: 1px solid var(--ssai-border);
}

body .ssai-chatbot .ssai-input-form {
  background: var(--ssai-surface);
  border: 1px solid var(--ssai-border);
  border-radius: 0.75rem;
  transition: all 0.2s ease;
}

body .ssai-chatbot .ssai-input-form:focus-within {
  border-color: var(--ssai-primary);
  box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.15);
  background: var(--ssai-bg);
}

body .ssai-chatbot .ssai-input {
  color: var(--ssai-text);
}

body .ssai-chatbot .ssai-input::placeholder {
  color: var(--ssai-text-muted);
}

body .ssai-chatbot .ssai-send-btn {
  background: var(--ssai-primary);
  color: #ffffff;
}

body .ssai-chatbot .ssai-send-btn:hover {
  background: var(--ssai-primary-hover);
}

body .ssai-chatbot .ssai-powered {
  color: var(--ssai-text-muted);
}

body .ssai-chatbot .ssai-powered a {
  color: var(--ssai-text-muted);
  font-weight: 700;
}

body .ssai-chatbot .ssai-powered a:hover {
  color: var(--ssai-primary);
}