/* ==========================================================================
   DIVA (Digital Intelligent Virtual Assistant) — CSS Architecture
   Sant Vivekanand Junior High School (SVS Mainpuri)
   Scope: Exclusively encapsulated under #diva-chat-root
   ========================================================================== */

#diva-chat-root {
  --diva-font-main: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --diva-font-display: 'Nunito', 'Cinzel', sans-serif;

  /* Official SVS Brand Color System */
  --diva-navy-deep: #072244;
  --diva-navy-primary: #0B3568;
  --diva-navy-royal: #00138E;
  --diva-navy-light: #EBF2FA;
  --diva-navy-subtle: rgba(11, 53, 104, 0.06);

  --diva-gold-primary: #C08A3E;
  --diva-gold-hover: #D6A34D;
  --diva-gold-light: #FFF9ED;
  --diva-gold-glow: rgba(192, 138, 62, 0.35);

  --diva-surface-bg: rgba(255, 255, 255, 0.96);
  --diva-header-bg: linear-gradient(135deg, #072244 0%, #0B3568 55%, #00138E 100%);
  --diva-border-glass: rgba(192, 138, 62, 0.22);
  --diva-border-subtle: rgba(226, 232, 240, 0.9);

  --diva-text-primary: #0F172A;
  --diva-text-secondary: #475569;
  --diva-text-muted: #64748B;
  --diva-text-inverse: #FFFFFF;

  --diva-msg-bot-bg: #F8FAFC;
  --diva-msg-bot-border: rgba(226, 232, 240, 0.95);
  --diva-msg-bot-text: #1E293B;

  --diva-msg-user-bg: linear-gradient(135deg, #0B3568 0%, #00138E 100%);
  --diva-msg-user-text: #FFFFFF;

  --diva-shadow-card: 0 20px 50px -12px rgba(11, 53, 104, 0.28), 0 0 1px 1px rgba(192, 138, 62, 0.2);
  --diva-shadow-pill: 0 10px 28px rgba(11, 53, 104, 0.32), 0 0 16px rgba(192, 138, 62, 0.25);

  --diva-radius-xl: 24px;
  --diva-radius-lg: 16px;
  --diva-radius-md: 12px;
  --diva-radius-sm: 8px;
  --diva-radius-pill: 9999px;

  font-family: var(--diva-font-main);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Dark Theme Tokens
   ========================================================================== */
#diva-chat-root.dark-theme {
  --diva-surface-bg: rgba(10, 17, 32, 0.96);
  --diva-header-bg: linear-gradient(135deg, #050B14 0%, #0B192E 60%, #11284E 100%);
  --diva-border-glass: rgba(192, 138, 62, 0.32);
  --diva-border-subtle: rgba(30, 41, 59, 0.85);

  --diva-text-primary: #F8FAFC;
  --diva-text-secondary: #CBD5E1;
  --diva-text-muted: #94A3B8;

  --diva-msg-bot-bg: #111C30;
  --diva-msg-bot-border: rgba(51, 65, 85, 0.7);
  --diva-msg-bot-text: #E2E8F0;

  --diva-msg-user-bg: linear-gradient(135deg, #1E40AF 0%, #00138E 100%);
  --diva-shadow-card: 0 24px 60px -10px rgba(0, 0, 0, 0.65), 0 0 20px rgba(192, 138, 62, 0.2);
}

/* Encapsulated resets */
#diva-chat-root * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: inherit;
}

#diva-chat-root button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* ==========================================================================
   1. Proactive Welcome Preview Bubble (Above Trigger)
   ========================================================================== */
#diva-chat-root .diva-preview-bubble {
  position: fixed;
  bottom: 86px;
  right: 25px;
  background: #FFFFFF;
  color: var(--diva-navy-deep);
  border: 1px solid var(--diva-gold-primary);
  border-radius: var(--diva-radius-lg);
  padding: 10px 14px 10px 12px;
  box-shadow: 0 10px 28px rgba(11, 53, 104, 0.22);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 99998;
  cursor: pointer;
  max-width: 290px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  animation: divaFloat 4s ease-in-out infinite;
  transition: opacity 0.3s, transform 0.3s;
}

#diva-chat-root .diva-preview-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  right: 32px;
  width: 12px;
  height: 12px;
  background: #FFFFFF;
  border-right: 1px solid var(--diva-gold-primary);
  border-bottom: 1px solid var(--diva-gold-primary);
  transform: rotate(45deg);
}

#diva-chat-root .diva-preview-close {
  color: var(--diva-text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 2px;
  transition: color 0.2s;
}

#diva-chat-root .diva-preview-close:hover {
  color: #DC2626;
}

@keyframes divaFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ==========================================================================
   2. Floating Chat Trigger Button (Corner Bottom Right)
   Dynamic 3-State Morphing Capsule:
   State 1: Default / Idle (Compact Logo Only)
   State 2: Hover (Smooth Width Expansion to Complete Name)
   State 3: Scroll (Auto Expansion on Page Scroll)
   ========================================================================== */
#diva-chat-root .diva-trigger-pill {
  position: fixed;
  bottom: 24px;
  right: 24px;
  height: 54px;
  width: auto;
  min-width: 54px;
  max-width: 54px;
  padding: 0 5px;
  border-radius: 27px;
  background: var(--diva-header-bg);
  border: 2px solid var(--diva-gold-primary);
  box-shadow: var(--diva-shadow-pill);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  cursor: pointer;
  z-index: 99999;
  user-select: none;
  overflow: hidden;
  box-sizing: border-box;
  transition: max-width 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              padding 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              border-radius 0.35s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Expanded State: Activated ONLY on Hover or Focus-Visible (Never on scroll) */
#diva-chat-root .diva-trigger-pill:hover,
#diva-chat-root .diva-trigger-pill:focus-visible {
  max-width: 240px;
  padding: 0 18px 0 5px;
  border-radius: var(--diva-radius-pill);
  border-color: var(--diva-gold-hover);
  box-shadow: 0 14px 34px rgba(11, 53, 104, 0.45), 0 0 24px var(--diva-gold-glow);
}

#diva-chat-root .diva-trigger-pill:hover,
#diva-chat-root .diva-trigger-pill:focus-visible {
  transform: translateY(-3px) scale(1.02);
}

#diva-chat-root .diva-trigger-pill:active {
  transform: translateY(-1px) scale(0.98);
}

/* Logo container inside pill */
#diva-chat-root .diva-trigger-logo-box {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--diva-gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: relative;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

#diva-chat-root .diva-trigger-pill:hover .diva-trigger-logo-box,
#diva-chat-root .diva-trigger-pill:focus-visible .diva-trigger-logo-box {
  transform: rotate(8deg);
}

#diva-chat-root .diva-trigger-logo-box img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}

/* Online pulsating radar dot */
#diva-chat-root .diva-radar-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #10B981;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 8px #10B981;
}

#diva-chat-root .diva-radar-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid #10B981;
  opacity: 0.8;
  animation: divaRadarPulse 2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

@keyframes divaRadarPulse {
  0% { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Pill text info: Hidden in default idle state, revealed smoothly on hover/focus/scroll */
#diva-chat-root .diva-trigger-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  margin-left: 0;
  transition: max-width 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.28s ease,
              margin-left 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              visibility 0.4s;
}

#diva-chat-root .diva-trigger-pill:hover .diva-trigger-info,
#diva-chat-root .diva-trigger-pill:focus-visible .diva-trigger-info {
  max-width: 160px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  margin-left: 10px;
}

#diva-chat-root .diva-trigger-title {
  color: #FFFFFF;
  font-family: var(--diva-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

#diva-chat-root .diva-trigger-title .sparkle {
  color: #FCD34D;
  font-size: 13px;
}

#diva-chat-root .diva-trigger-sub {
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

/* ==========================================================================
   2B. Floating Scroll Popup ("ASK DIVA")
   Positioned directly ABOVE the compact AI logo button.
   Visible strictly while user is scrolling, hides with short debounce on scroll stop.
   Does NOT interfere with clicking the AI logo (pointer-events: none).
   ========================================================================== */
#diva-chat-root .diva-scroll-popup {
  position: fixed;
  bottom: 88px;
  right: 51px;
  transform: translateX(50%) translateY(8px) scale(0.92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: linear-gradient(135deg, #072244 0%, #0B3568 55%, #00138E 100%);
  color: #FFFFFF;
  border: 1.5px solid var(--diva-gold-primary);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: var(--diva-font-display, "Playfair Display", Georgia, serif);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(7, 34, 68, 0.4), 0 0 16px rgba(192, 138, 62, 0.35);
  z-index: 99998;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.28s;
  user-select: none;
}

/* Tooltip Downward Arrow pointing directly to AI logo */
#diva-chat-root .diva-scroll-popup::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: #0B3568;
  border-right: 1.5px solid var(--diva-gold-primary);
  border-bottom: 1.5px solid var(--diva-gold-primary);
}

/* Active State: Displayed during scrolling with subtle premium float */
#diva-chat-root .diva-scroll-popup.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(50%) translateY(0) scale(1);
  animation: divaPopupBob 2.2s ease-in-out infinite alternate;
}

@keyframes divaPopupBob {
  0% {
    transform: translateX(50%) translateY(0) scale(1);
  }
  100% {
    transform: translateX(50%) translateY(-3px) scale(1.02);
  }
}

/* If user hovers over trigger pill or when chat window is open, hide scroll popup cleanly */
#diva-chat-root .diva-trigger-pill:hover ~ .diva-scroll-popup,
#diva-chat-root.diva-chat-open .diva-scroll-popup {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(50%) translateY(8px) scale(0.92) !important;
}

/* ==========================================================================
   3. Chat Window (Main Box)
   ========================================================================== */
#diva-chat-root .diva-chat-window {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 400px;
  max-width: calc(100vw - 32px);
  height: 610px;
  max-height: calc(100vh - 110px);
  border-radius: var(--diva-radius-xl);
  background: var(--diva-surface-bg);
  border: 1px solid var(--diva-border-glass);
  box-shadow: var(--diva-shadow-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 99998;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#diva-chat-root .diva-chat-window.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* ==========================================================================
   4. Header Design
   ========================================================================== */
#diva-chat-root .diva-header {
  background: var(--diva-header-bg);
  color: var(--diva-text-inverse);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--diva-gold-primary);
  position: relative;
  flex-shrink: 0;
}

#diva-chat-root .diva-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

#diva-chat-root .diva-header-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--diva-gold-primary);
  box-shadow: 0 0 10px rgba(192, 138, 62, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

#diva-chat-root .diva-header-avatar img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}

#diva-chat-root .diva-header-titles h3 {
  font-family: var(--diva-font-display);
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

#diva-chat-root .diva-ai-badge {
  font-size: 9.5px;
  font-weight: 800;
  background: rgba(192, 138, 62, 0.25);
  border: 1px solid var(--diva-gold-primary);
  color: #FCD34D;
  padding: 1px 6px;
  border-radius: var(--diva-radius-pill);
  letter-spacing: 0.5px;
}

#diva-chat-root .diva-header-status {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}

#diva-chat-root .diva-status-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  display: inline-block;
}

/* Header Action Controls */
#diva-chat-root .diva-header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Language Switcher Toggle */
#diva-chat-root .diva-lang-toggle {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--diva-radius-pill);
  display: flex;
  padding: 2px;
  gap: 2px;
}

#diva-chat-root .diva-lang-btn {
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--diva-radius-pill);
  transition: all 0.2s;
}

#diva-chat-root .diva-lang-btn.active {
  background: var(--diva-gold-primary);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Header utility icon buttons */
#diva-chat-root .diva-icon-action {
  width: 32px;
  height: 32px;
  border-radius: var(--diva-radius-sm);
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
}

#diva-chat-root .diva-icon-action:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.06);
}

#diva-chat-root .diva-icon-action svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* ==========================================================================
   5. Direct Quick Contact Strip
   ========================================================================== */
#diva-chat-root .diva-quick-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(11, 53, 104, 0.04);
  border-bottom: 1px solid var(--diva-border-subtle);
  flex-shrink: 0;
}

#diva-chat-root .diva-strip-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 6px;
  border-radius: var(--diva-radius-sm);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  color: #FFFFFF;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}

#diva-chat-root .diva-strip-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

#diva-chat-root .diva-strip-wa {
  background: #25D366;
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.25);
}

#diva-chat-root .diva-strip-call {
  background: #0284C7;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}

#diva-chat-root .diva-strip-apply {
  background: var(--diva-gold-primary);
  box-shadow: 0 2px 6px rgba(192, 138, 62, 0.25);
}

#diva-chat-root .diva-strip-btn:hover {
  transform: translateY(-1.5px);
  filter: brightness(1.08);
}

/* ==========================================================================
   6. Chat Messages Area
   ========================================================================== */
#diva-chat-root .diva-messages-box {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}

#diva-chat-root .diva-messages-box::-webkit-scrollbar {
  width: 5px;
}

#diva-chat-root .diva-messages-box::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 10px;
}

/* Message Item Layout */
#diva-chat-root .diva-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 88%;
  animation: divaMsgIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes divaMsgIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#diva-chat-root .diva-msg-bot {
  align-self: flex-start;
}

#diva-chat-root .diva-msg-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

/* Mini Bot Avatar next to bot message */
#diva-chat-root .diva-msg-bot-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid var(--diva-gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

#diva-chat-root .diva-msg-bot-avatar img {
  width: 84%;
  height: 84%;
  object-fit: contain;
}

/* Message Bubbles */
#diva-chat-root .diva-msg-content {
  display: flex;
  flex-direction: column;
}

#diva-chat-root .diva-msg-bubble {
  padding: 12px 15px;
  border-radius: var(--diva-radius-lg);
  font-size: 13.5px;
  line-height: 1.55;
  word-wrap: break-word;
}

#diva-chat-root .diva-msg-bot .diva-msg-bubble {
  background: var(--diva-msg-bot-bg);
  color: var(--diva-msg-bot-text);
  border: 1px solid var(--diva-msg-bot-border);
  border-bottom-left-radius: 4px;
  border-left: 3px solid var(--diva-gold-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

#diva-chat-root .diva-msg-user .diva-msg-bubble {
  background: var(--diva-msg-user-bg);
  color: var(--diva-msg-user-text);
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 14px rgba(11, 53, 104, 0.2);
}

#diva-chat-root .diva-msg-time {
  font-size: 10px;
  color: var(--diva-text-muted);
  margin-top: 4px;
  padding: 0 4px;
}

#diva-chat-root .diva-msg-user .diva-msg-time {
  align-self: flex-end;
}

/* Rich formatted elements inside bot bubble */
#diva-chat-root .diva-msg-bubble strong {
  color: var(--diva-navy-deep);
  font-weight: 700;
}

#diva-chat-root.dark-theme .diva-msg-bubble strong {
  color: #FCD34D;
}

#diva-chat-root .diva-msg-bubble a {
  color: var(--diva-navy-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

#diva-chat-root .diva-msg-bubble a:hover {
  color: var(--diva-gold-primary);
}

#diva-chat-root.dark-theme .diva-msg-bubble a {
  color: #60A5FA;
}

#diva-chat-root .diva-msg-bubble ul,
#diva-chat-root .diva-msg-bubble ol {
  padding-left: 18px;
  margin: 6px 0;
}

#diva-chat-root .diva-msg-bubble li {
  margin-bottom: 4px;
}

/* Action button inside message */
#diva-chat-root .diva-msg-bubble .diva-btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--diva-gold-primary);
  color: #FFFFFF !important;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  padding: 7px 12px;
  border-radius: var(--diva-radius-sm);
  margin-top: 8px;
  box-shadow: 0 2px 8px rgba(192, 138, 62, 0.3);
  transition: transform 0.2s, background-color 0.2s;
}

#diva-chat-root .diva-msg-bubble .diva-btn-link:hover {
  background: var(--diva-gold-hover);
  transform: translateY(-1.5px);
}

/* Verified Source Citations */
#diva-chat-root .diva-citations-row {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--diva-border-glass);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}

#diva-chat-root .diva-cit-label {
  color: var(--diva-text-muted);
  font-weight: 700;
  margin-right: 2px;
}

#diva-chat-root .diva-citation-link {
  display: inline-flex;
  align-items: center;
  background: var(--diva-gold-light);
  color: var(--diva-navy-primary) !important;
  border: 1px solid var(--diva-gold-primary);
  padding: 2px 7px;
  border-radius: var(--diva-radius-pill);
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.2s;
}

#diva-chat-root .diva-citation-link:hover {
  background: var(--diva-gold-primary);
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* Grounded Bubble Action Buttons */
#diva-chat-root .diva-bubble-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#diva-chat-root .diva-bubble-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--diva-header-bg);
  border: 1px solid var(--diva-gold-primary);
  color: #FFFFFF !important;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--diva-radius-sm);
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(11, 53, 104, 0.2);
  transition: transform 0.2s, filter 0.2s;
}

#diva-chat-root .diva-bubble-btn:hover {
  transform: translateY(-1.5px);
  filter: brightness(1.1);
}

/* ==========================================================================
   7. Typing Indicator Wave Animation
   ========================================================================== */
#diva-chat-root .diva-typing-bubble {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
}

#diva-chat-root .diva-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--diva-gold-primary);
  animation: divaTypingWave 1.4s infinite ease-in-out both;
}

#diva-chat-root .diva-typing-dot:nth-child(1) { animation-delay: -0.32s; }
#diva-chat-root .diva-typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes divaTypingWave {
  0%, 80%, 100% {
    transform: scale(0.4);
    opacity: 0.35;
  }
  40% {
    transform: scale(1.1);
    opacity: 1;
  }
}

#diva-chat-root .diva-typing-text {
  font-size: 11px;
  color: var(--diva-text-muted);
  font-style: italic;
  margin-left: 4px;
}

/* ==========================================================================
   8. Smart Suggestion Chips
   ========================================================================== */
#diva-chat-root .diva-chips-container {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  background: transparent;
  border-top: 1px solid var(--diva-border-subtle);
  flex-shrink: 0;
}

#diva-chat-root .diva-chips-container::-webkit-scrollbar {
  display: none;
}

#diva-chat-root .diva-chip {
  background: var(--diva-surface-bg);
  color: var(--diva-navy-deep);
  border: 1px solid var(--diva-border-glass);
  padding: 6px 12px;
  border-radius: var(--diva-radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#diva-chat-root.dark-theme .diva-chip {
  color: #E2E8F0;
  background: #111C30;
}

#diva-chat-root .diva-chip:hover {
  background: var(--diva-header-bg);
  border-color: var(--diva-gold-primary);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(11, 53, 104, 0.25);
}

/* ==========================================================================
   9. Input Bar Form
   ========================================================================== */
#diva-chat-root .diva-input-form {
  padding: 10px 16px 14px 16px;
  background: var(--diva-surface-bg);
  border-top: 1px solid var(--diva-border-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#diva-chat-root .diva-input-wrapper {
  flex: 1;
  background: var(--diva-msg-bot-bg);
  border: 1.5px solid var(--diva-border-subtle);
  border-radius: var(--diva-radius-pill);
  padding: 4px 6px 4px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#diva-chat-root .diva-input-wrapper:focus-within {
  border-color: var(--diva-gold-primary);
  box-shadow: 0 0 0 3px rgba(192, 138, 62, 0.15);
  background: #FFFFFF;
}

#diva-chat-root.dark-theme .diva-input-wrapper:focus-within {
  background: #0B192E;
}

#diva-chat-root .diva-input-form input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  color: var(--diva-text-primary);
  padding: 8px 0;
}

#diva-chat-root .diva-input-form input::placeholder {
  color: var(--diva-text-muted);
  opacity: 0.85;
}

/* Voice microphone button */
#diva-chat-root .diva-voice-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--diva-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, transform 0.2s;
}

#diva-chat-root .diva-voice-btn:hover {
  color: var(--diva-gold-primary);
  transform: scale(1.08);
}

#diva-chat-root .diva-voice-btn.listening {
  color: #EF4444;
  animation: divaMicPulse 1s infinite;
}

@keyframes divaMicPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

#diva-chat-root .diva-voice-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Send button */
#diva-chat-root .diva-send-btn {
  background: var(--diva-header-bg);
  border: 1px solid var(--diva-gold-primary);
  color: #FFFFFF;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(11, 53, 104, 0.25);
  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}

#diva-chat-root .diva-send-btn:hover {
  transform: scale(1.06);
  background: linear-gradient(135deg, #0B3568 0%, #C08A3E 100%);
  box-shadow: 0 6px 16px rgba(192, 138, 62, 0.35);
}

#diva-chat-root .diva-send-btn:active {
  transform: scale(0.96);
}

#diva-chat-root .diva-send-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ==========================================================================
   10. Mobile Responsive Drawer Rules
   ========================================================================== */
@media (max-width: 520px) {
  #diva-chat-root .diva-chat-window {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    bottom: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    border: none !important;
  }

  #diva-chat-root .diva-trigger-pill {
    bottom: 16px;
    right: 16px;
    height: 48px;
    width: auto;
    min-width: 48px;
    max-width: 48px;
    padding: 0 4px;
    border-radius: 24px;
  }

  #diva-chat-root .diva-trigger-pill:hover,
  #diva-chat-root .diva-trigger-pill:focus-visible {
    max-width: 210px;
    padding: 0 14px 0 4px;
    border-radius: var(--diva-radius-pill);
  }

  #diva-chat-root .diva-trigger-pill:hover .diva-trigger-info,
  #diva-chat-root .diva-trigger-pill:focus-visible .diva-trigger-info {
    max-width: 140px;
    margin-left: 8px;
  }

  #diva-chat-root .diva-scroll-popup {
    bottom: 74px;
    right: 40px;
    padding: 5px 12px;
    font-size: 10.5px;
  }

  #diva-chat-root .diva-trigger-logo-box {
    width: 36px;
    height: 36px;
  }

  #diva-chat-root .diva-trigger-title {
    font-size: 13px;
  }

  #diva-chat-root .diva-trigger-sub {
    font-size: 9px;
  }

  #diva-chat-root .diva-preview-bubble {
    right: 16px;
    bottom: 74px;
    max-width: 250px;
  }

  /* When chat is open on mobile, hide the trigger to maximize screen real estate */
  #diva-chat-root.diva-chat-open .diva-trigger-pill,
  #diva-chat-root.diva-chat-open .diva-preview-bubble,
  #diva-chat-root.diva-chat-open .diva-scroll-popup {
    display: none !important;
  }
}