/* =============================================================
   DMARS Chatbot Widget — chatbot.css
   Version 5.0 ULTRA — Full Premium Rebuild
   ============================================================= */

/* ════════════════════════════════════════════════
   0) CSS PROPERTY REGISTRATIONS
════════════════════════════════════════════════ */
@property --cb-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --cb-glow-x {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: false;
}

@property --cb-glow-y {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: false;
}

/* ════════════════════════════════════════════════
   1) TOKENS
════════════════════════════════════════════════ */
:root {
  /* Core colors */
  --cb-bg:               #040610;
  --cb-bg-elevated:      rgba(7, 9, 20, 0.99);
  --cb-bg-subtle:        rgba(8, 10, 22, 0.97);
  --cb-border:           rgba(255, 255, 255, 0.07);
  --cb-border-subtle:    rgba(255, 255, 255, 0.04);
  --cb-border-strong:    rgba(255, 255, 255, 0.14);
  --cb-text:             #f5f7ff;
  --cb-text-soft:        rgba(245, 247, 255, 0.90);
  --cb-text-muted:       rgba(245, 247, 255, 0.42);
  --cb-accent:           #0057ff;
  --cb-accent-soft:      rgba(0, 87, 255, 0.60);
  --cb-accent-2:         #00c8ff;
  --cb-accent-3:         #8a5cff;
  --cb-success:          #4ade80;
  --cb-danger:           #fb7185;
  --cb-warning:          #fbbf24;

  /* Gradients */
  --cb-grad-accent:
    linear-gradient(135deg, #0057ff 0%, #344bff 50%, #00c8ff 100%);
  --cb-grad-accent-strong:
    linear-gradient(135deg, #2463ff 0%, #0040dd 50%, #00b8ff 100%);
  --cb-grad-header:
    linear-gradient(165deg, #06091c 0%, #030514 55%, #020511 100%);
  --cb-grad-bubble-bot:
    linear-gradient(150deg, rgba(16, 20, 48, 0.98) 0%, rgba(8, 11, 26, 0.97) 100%);
  --cb-surface-1:
    radial-gradient(ellipse 90% 55% at 8%   0%,   rgba(0,  87, 255, 0.20), transparent 65%),
    radial-gradient(ellipse 75% 60% at 92% 100%,  rgba(0, 200, 255, 0.22), transparent 60%),
    radial-gradient(ellipse 65% 45% at 50%  50%,  rgba(52, 75, 255, 0.07), transparent 70%),
    radial-gradient(ellipse 50% 40% at 80%  20%,  rgba(138,92, 255, 0.08), transparent 65%),
    var(--cb-bg-elevated);

  /* Shadows */
  --cb-shadow-soft:
    0 12px 40px rgba(0, 0, 0, 0.75);
  --cb-shadow-panel:
    0 40px 100px rgba(0, 0, 0, 0.90),
    0 16px 40px  rgba(0, 0, 0, 0.60),
    0  0   0 1px rgba(255, 255, 255, 0.03);
  --cb-shadow-fab:
    0 8px 32px rgba(0, 87, 255, 0.58),
    0 2px 8px  rgba(0,  0,  0, 0.40);
  --cb-shadow-bubble-user:
    0 6px 22px rgba(37, 99, 235, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  --cb-shadow-bubble-bot:
    0 4px 16px rgba(0, 0, 0, 0.38);

  /* Radii */
  --cb-r-panel:  22px;
  --cb-r-bubble: 18px;
  --cb-r-input:  999px;
  --cb-r-fab:    999px;
  --cb-r-chip:   999px;
  --cb-r-btn:    999px;

  /* Sizing */
  --cb-width-desktop:  395px;
  --cb-height-desktop: 550px;
  --cb-height-mobile:  91dvh;

  /* Motion */
  --cb-ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --cb-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cb-t-fast:    0.14s;
  --cb-t-med:     0.24s;
  --cb-t-slow:    0.40s;
}

/* ════════════════════════════════════════════════
   2) VISIBILITY TOGGLE
════════════════════════════════════════════════ */
#chatbot-container.is-hidden       { display: none    !important; }
#chatbot-container:not(.is-hidden) { display: flex    !important; }

/* ════════════════════════════════════════════════
   3) FAB BUTTON
════════════════════════════════════════════════ */
.chat-fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  background: var(--cb-grad-accent);
  color: #fff;
  border: none;
  border-radius: var(--cb-r-fab);
  font-size: 0.875rem;
  font-weight: 700;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
  letter-spacing: 0.01em;
  min-height: 48px;
  min-width: 48px;
  white-space: nowrap;
  isolation: isolate;
  box-shadow: var(--cb-shadow-fab);
  transition:
    transform    var(--cb-t-fast) var(--cb-ease),
    box-shadow   var(--cb-t-fast) var(--cb-ease),
    background   var(--cb-t-med)  var(--cb-ease);
}

/* Rotating conic border ring */
.chat-fab::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--cb-angle),
    #0057ff, #00c8ff, #8a5cff, #00c8ff, #0057ff
  );
  z-index: -1;
  animation: fabBorderSpin 4s linear infinite;
  opacity: 0.70;
}

@keyframes fabBorderSpin {
  to { --cb-angle: 360deg; }
}

/* Inner fill to mask the conic gradient */
.chat-fab::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: calc(var(--cb-r-fab) - 1px);
  background: var(--cb-grad-accent);
  z-index: -1;
  transition: background var(--cb-t-med) var(--cb-ease);
}

.chat-fab__label { line-height: 1; position: relative; z-index: 1; }
.chat-fab svg    { position: relative; z-index: 1; }

.chat-fab:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 16px 50px rgba(0, 87, 255, 0.80),
    0 4px 14px rgba(0, 0, 0, 0.40);
}

.chat-fab:hover::after {
  background: var(--cb-grad-accent-strong);
}

.chat-fab:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 4px 18px rgba(0, 87, 255, 0.50);
}

.chat-fab:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

/* Idle breathe ring (outside conic) */
.chat-fab-ring {
  position: fixed;
  bottom: 14px;
  right: 14px;
  width: 80px;
  height: 80px;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 200, 255, 0.20);
  pointer-events: none;
  z-index: 9997;
  animation: fabRingBreathe 3s ease-in-out infinite;
}

@keyframes fabRingBreathe {
  0%, 100% { transform: scale(1);    opacity: 0.30; }
  50%       { transform: scale(1.18); opacity: 0.70; }
}

/* Exit-intent pulse */
.chat-fab--pulse {
  animation: fabExitPulse 1.1s ease-in-out 3;
}

@keyframes fabExitPulse {
  0%, 100% { box-shadow: var(--cb-shadow-fab); }
  50% {
    box-shadow:
      0 0 0 10px rgba(0, 87,  255, 0.12),
      0 0 0 22px rgba(0, 87,  255, 0.05),
      var(--cb-shadow-fab);
  }
}

@media (max-width: 480px) {
  .chat-fab__label { display: none; }
  .chat-fab {
    padding: 0;
    width: 58px;
    height: 58px;
    justify-content: center;
    bottom: 16px;
    right: 16px;
  }
  .chat-fab-ring {
    bottom: 6px;
    right: 6px;
    width: 70px;
    height: 70px;
  }
}

/* ════════════════════════════════════════════════
   4) CONTAINER
════════════════════════════════════════════════ */
#chatbot-container {
  position: fixed;
  bottom: 90px;
  right: 22px;
  z-index: 9998;
  width: var(--cb-width-desktop);
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  filter:
    drop-shadow(0 30px 80px rgba(0, 0, 0, 0.90))
    drop-shadow(0  0   40px rgba(0, 87, 255, 0.08));
}

/* ════════════════════════════════════════════════
   5) PANEL
════════════════════════════════════════════════ */
.chatbot-panel {
  display: flex;
  flex-direction: column;
  height: var(--cb-height-desktop);
  max-height: calc(100vh - 140px);
  background: var(--cb-surface-1);
  backdrop-filter: blur(32px) saturate(1.7) brightness(1.04);
  -webkit-backdrop-filter: blur(32px) saturate(1.7) brightness(1.04);
  border-radius: var(--cb-r-panel);
  overflow: hidden;
  box-shadow: var(--cb-shadow-panel);
  animation: panelIn var(--cb-t-med) var(--cb-ease) both;
  position: relative;
  isolation: isolate;
  /* No border — replaced by conic pseudo */
  border: none;
}

/* Animated conic gradient border */
.chatbot-panel::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: calc(var(--cb-r-panel) + 2px);
  background: conic-gradient(
    from var(--cb-angle),
    rgba(0,   87, 255, 0.90),
    rgba(0,  200, 255, 0.80),
    rgba(138, 92, 255, 0.70),
    rgba(52,  75, 255, 0.85),
    rgba(0,  200, 255, 0.75),
    rgba(0,   87, 255, 0.90)
  );
  z-index: -2;
  animation: panelBorderSpin 6s linear infinite;
  opacity: 0.60;
}

@keyframes panelBorderSpin {
  to { --cb-angle: 360deg; }
}

/* Inner surface fill — masks conic to border only */
.chatbot-panel::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: calc(var(--cb-r-panel) - 1px);
  background: var(--cb-surface-1);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  z-index: -1;
  pointer-events: none;
}

/* Grain overlay */
.chatbot-panel .cb-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.022;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  border-radius: inherit;
}

/* If no .cb-grain element in HTML, use body::before style fallback */
.chatbot-panel:not(:has(.cb-grain))::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='.02'/%3E%3C/svg%3E");
}

/* All children above pseudo layers */
.chatbot-header,
.chatbot-messages,
.chatbot-quick-actions,
.chatbot-form,
.chatbot-footer {
  position: relative;
  z-index: 1;
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}

/* ════════════════════════════════════════════════
   6) HEADER
════════════════════════════════════════════════ */
.chatbot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--cb-grad-header);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

/* Aurora sweep */
.chatbot-header::before {
  content: "";
  position: absolute;
  top: -80%;
  left: -30%;
  width: 200%;
  height: 320%;
  background: conic-gradient(
    from 200deg at 50% 50%,
    transparent           0deg,
    rgba(0,  87, 255, 0.16) 25deg,
    rgba(0, 200, 255, 0.20) 55deg,
    rgba(138,92, 255, 0.14) 80deg,
    transparent           110deg
  );
  animation: headerAurora 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes headerAurora {
  0%   { transform: rotate(0deg)   scale(1);    opacity: 0.60; }
  33%  { transform: rotate(120deg) scale(1.08); opacity: 0.90; }
  66%  { transform: rotate(240deg) scale(0.96); opacity: 0.70; }
  100% { transform: rotate(360deg) scale(1);    opacity: 0.60; }
}

/* Bottom glow line */
.chatbot-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 87, 255, 0.55),
    rgba(0, 200, 255, 0.45),
    transparent
  );
  pointer-events: none;
}

.chatbot-header__info {
  display: flex;
  align-items: center;
  gap: 11px;
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════════════
   7) AVATAR
════════════════════════════════════════════════ */
.chatbot-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(135deg, #001aff, #00c8ff, #8a5cff, #00c8ff);
  background-size: 300% 300%;
  animation: avatarHolo 5s ease-in-out infinite;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow:
    0 0 0 3px rgba(0, 200, 255, 0.18),
    0 0 20px rgba(0, 200, 255, 0.30),
    0 6px 20px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

@keyframes avatarHolo {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* Outer orbit ring */
.chatbot-avatar::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    conic-gradient(
      from var(--cb-angle),
      rgba(0, 200, 255, 0.7),
      rgba(138, 92, 255, 0.5),
      transparent 50%,
      rgba(0, 87, 255, 0.6),
      rgba(0, 200, 255, 0.7)
    ) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: avatarOrbit 3s linear infinite;
}

@keyframes avatarOrbit {
  to { --cb-angle: 360deg; }
}

/* Inner shine dot */
.chatbot-avatar::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 7px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(2px);
}

/* ════════════════════════════════════════════════
   8) STATUS DOT — RADAR PULSE
════════════════════════════════════════════════ */
.chatbot-status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--cb-success);
  box-shadow:
    0 0 6px rgba(74, 222, 128, 0.60),
    0 0 12px rgba(74, 222, 128, 0.25);
  flex-shrink: 0;
}

.chatbot-status-dot::before,
.chatbot-status-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 1.5px solid rgba(74, 222, 128, 0.65);
  animation: radarOut 2.2s ease-out infinite;
}

.chatbot-status-dot::after {
  animation-delay: 1.0s;
}

@keyframes radarOut {
  0%   { transform: scale(1);   opacity: 0.75; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* ════════════════════════════════════════════════
   9) HEADER NAME + ACTIONS
════════════════════════════════════════════════ */
.chatbot-header__name {
  margin: 0;
  font-size: 0.89rem;
  font-weight: 700;
  color: var(--cb-text-soft);
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

.chatbot-header__status {
  margin: 0;
  font-size: 0.72rem;
  color: var(--cb-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 1;
}

.chatbot-header__actions {
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 1;
}

/* Close button */
.chatbot-icon-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background     var(--cb-t-fast) var(--cb-ease),
    border-color   var(--cb-t-fast) var(--cb-ease),
    color          var(--cb-t-fast) var(--cb-ease),
    transform      var(--cb-t-fast) var(--cb-ease-back),
    box-shadow     var(--cb-t-fast) var(--cb-ease);
}

.chatbot-icon-btn:hover {
  background: rgba(251, 113, 133, 0.14);
  border-color: rgba(251, 113, 133, 0.40);
  color: #fb7185;
  transform: scale(1.10) rotate(90deg);
  box-shadow: 0 0 12px rgba(251, 113, 133, 0.25);
}

.chatbot-icon-btn:active {
  transform: scale(0.94) rotate(90deg);
}

.chatbot-icon-btn:focus-visible {
  outline: 2px solid rgba(129, 140, 248, 0.90);
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════
   10) MESSAGES AREA
════════════════════════════════════════════════ */
.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 13px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  position: relative;
  /* Deep ambient background */
  background:
    radial-gradient(ellipse 100% 40% at 50%   0%,  rgba(0,  87, 255, 0.07), transparent 60%),
    radial-gradient(ellipse  80% 55% at 15% 100%,  rgba(0, 200, 255, 0.06), transparent 60%),
    radial-gradient(ellipse  60% 60% at 85%  55%,  rgba(138,92, 255, 0.04), transparent 65%),
    transparent;
}

/* Custom scrollbar */
.chatbot-messages::-webkit-scrollbar       { width: 3px; }
.chatbot-messages::-webkit-scrollbar-track { background: transparent; }
.chatbot-messages::-webkit-scrollbar-thumb {
  background: rgba(0, 200, 255, 0.20);
  border-radius: 999px;
  transition: background 0.2s ease;
}
.chatbot-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 200, 255, 0.45);
}

/* Top fade mask */
.chatbot-messages::before {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 24px;
  margin-bottom: -24px;
  background: linear-gradient(to bottom, rgba(6,8,18,0.80), transparent);
  pointer-events: none;
  z-index: 2;
}

/* Bottom fade mask */
.chatbot-messages::after {
  content: "";
  position: sticky;
  bottom: 0;
  display: block;
  height: 20px;
  margin-top: -20px;
  background: linear-gradient(to top, rgba(6,8,18,0.60), transparent);
  pointer-events: none;
}

/* ════════════════════════════════════════════════
   11) MESSAGE ROWS
════════════════════════════════════════════════ */
.chatbot-msg {
  display: flex;
  max-width: 88%;
  animation: msgAppear 0.22s var(--cb-ease) both;
}

.chatbot-msg:nth-child(odd)  { animation-duration: 0.20s; }
.chatbot-msg:nth-child(even) { animation-duration: 0.28s; }

@keyframes msgAppear {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.chatbot-msg--user {
  align-self: flex-end;
  justify-content: flex-end;
}

.chatbot-msg--bot {
  align-self: flex-start;
  justify-content: flex-start;
}

/* ════════════════════════════════════════════════
   12) BUBBLES
════════════════════════════════════════════════ */
.chatbot-bubble {
  padding: 10px 14px;
  border-radius: var(--cb-r-bubble);
  font-size: 0.875rem;
  line-height: 1.68;
  word-break: break-word;
  position: relative;
  overflow: hidden;
}

/* ── User bubble ── */
.chatbot-msg--user .chatbot-bubble {
  background: var(--cb-grad-accent);
  color: #f9fafb;
  border-bottom-right-radius: 4px;
  box-shadow: var(--cb-shadow-bubble-user);
}

/* Inner highlight gloss */
.chatbot-msg--user .chatbot-bubble::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.16),
    transparent
  );
  border-radius: var(--cb-r-bubble) var(--cb-r-bubble) 0 0;
  pointer-events: none;
}

/* Shimmer sweep on hover */
.chatbot-msg--user .chatbot-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent    30%,
    rgba(255,255,255,0.12) 50%,
    transparent    70%
  );
  transform: translateX(-100%);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.chatbot-msg--user .chatbot-bubble:hover::after {
  transform: translateX(120%);
}

/* ── Bot bubble ── */
.chatbot-msg--bot .chatbot-bubble {
  background: var(--cb-grad-bubble-bot);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 4px;
  color: var(--cb-text-soft);
  box-shadow: var(--cb-shadow-bubble-bot);
}

/* Left accent bar */
.chatbot-msg--bot .chatbot-bubble::before {
  content: "";
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 200, 255, 0.55),
    transparent
  );
  border-radius: 999px;
  pointer-events: none;
}

/* Shimmer on hover */
.chatbot-msg--bot .chatbot-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent    30%,
    rgba(255,255,255,0.035) 50%,
    transparent    70%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.chatbot-msg--bot .chatbot-bubble:hover::after {
  transform: translateX(130%);
}

/* Timestamp on hover via data-time attr */
.chatbot-bubble[data-time]::after {
  content: attr(data-time) !important;
  background: none !important;
  transform: none !important;
  position: absolute;
  bottom: -18px;
  right: 6px;
  font-size: 0.60rem;
  color: rgba(255, 255, 255, 0.26);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  white-space: nowrap;
}

.chatbot-bubble[data-time]:hover::after {
  opacity: 1;
}

/* Grouped bubbles */
.chatbot-msg--user + .chatbot-msg--user .chatbot-bubble { border-top-right-radius: 10px; }
.chatbot-msg--bot  + .chatbot-msg--bot  .chatbot-bubble { border-top-left-radius: 10px; }

/* ════════════════════════════════════════════════
   13) TYPING INDICATOR — NEON DOTS
════════════════════════════════════════════════ */
.chatbot-bubble--typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 11px 16px;
  min-width: 56px;
}

.chatbot-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0057ff, #00c8ff);
  box-shadow: 0 0 6px rgba(0, 200, 255, 0.55);
  animation: neonBounce 1.4s ease-in-out infinite;
}

.chatbot-dot:nth-child(1) { animation-delay: 0.00s; }
.chatbot-dot:nth-child(2) { animation-delay: 0.18s; }
.chatbot-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes neonBounce {
  0%, 70%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.50;
    box-shadow: 0 0 4px rgba(0, 200, 255, 0.40);
  }
  35% {
    transform: translateY(-6px) scale(1.20);
    opacity: 1;
    box-shadow:
      0 0 10px rgba(0, 200, 255, 0.80),
      0 0 20px rgba(0, 200, 255, 0.35);
  }
}

/* ════════════════════════════════════════════════
   14) QUICK CHIPS
════════════════════════════════════════════════ */
.chatbot-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 13px;
  border-top:    1px solid rgba(255, 255, 255, 0.045);
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  background:    rgba(5, 7, 18, 0.92);
  max-height: 80px;
  overflow-y: auto;
  position: relative;
}

/* Glow top line */
.chatbot-quick-actions::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 87,  255, 0.35),
    rgba(0, 200, 255, 0.30),
    transparent
  );
  pointer-events: none;
}

.chatbot-chip {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 13px;
  min-height: 30px;
  border-radius: var(--cb-r-chip);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: var(--cb-text-muted);
  cursor: pointer;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  transition:
    background    var(--cb-t-fast) var(--cb-ease),
    border-color  var(--cb-t-fast) var(--cb-ease),
    color         var(--cb-t-fast) var(--cb-ease),
    transform     var(--cb-t-fast) var(--cb-ease-back),
    box-shadow    var(--cb-t-fast) var(--cb-ease);
}

/* Chip shimmer */
.chatbot-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.07) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  pointer-events: none;
}

.chatbot-chip:hover {
  background: rgba(0, 87, 255, 0.14);
  border-color: rgba(0, 200, 255, 0.55);
  color: var(--cb-text-soft);
  transform: translateY(-2px);
  box-shadow:
    0 4px 14px rgba(0, 87, 255, 0.22),
    0 0 0 1px rgba(0, 200, 255, 0.20);
}

.chatbot-chip:hover::before {
  transform: translateX(120%);
}

.chatbot-chip:active {
  transform: translateY(0) scale(0.96);
}

/* ════════════════════════════════════════════════
   15) INPUT FORM
════════════════════════════════════════════════ */
.chatbot-form {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  padding-bottom: calc(9px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(5, 7, 18, 0.97);
  flex-shrink: 0;
  position: relative;
}

/* Top gradient glow line */
.chatbot-form::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 87,  255, 0.45),
    rgba(0, 200, 255, 0.40),
    rgba(138,92, 255, 0.30),
    transparent
  );
  pointer-events: none;
  animation: formGlowLine 4s ease-in-out infinite;
}

@keyframes formGlowLine {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1.00; }
}

/* ── Input field ── */
.chatbot-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--cb-r-input);
  color: var(--cb-text-soft);
  font-family: inherit;
  font-size: 1rem;
  padding: 9px 16px;
  outline: none;
  transition:
    border-color var(--cb-t-fast) var(--cb-ease),
    background   var(--cb-t-fast) var(--cb-ease),
    box-shadow   var(--cb-t-fast) var(--cb-ease);
}

.chatbot-input::placeholder {
  color: var(--cb-text-muted);
  transition: color var(--cb-t-med) ease;
}

.chatbot-input:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.055);
}

.chatbot-input:focus {
  border-color: rgba(0, 200, 255, 0.65);
  background: rgba(255, 255, 255, 0.065);
  box-shadow:
    0 0 0 3px rgba(0, 87,  255, 0.14),
    0 0 0 1px rgba(0, 200, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.chatbot-input:focus::placeholder {
  color: rgba(245, 247, 255, 0.22);
}

/* ── Voice button ── */
.voice-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  transition:
    background    var(--cb-t-fast) var(--cb-ease),
    border-color  var(--cb-t-fast) var(--cb-ease),
    transform     var(--cb-t-fast) var(--cb-ease-back),
    box-shadow    var(--cb-t-fast) var(--cb-ease);
}

.voice-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.20);
  transform: scale(1.10);
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.18);
}

.voice-btn.listening {
  background: rgba(251, 113, 133, 0.14);
  border-color: rgba(251, 113, 133, 0.55);
  box-shadow: 0 0 0 0 rgba(251, 113, 133, 0.55);
  animation: voiceListenPulse 0.85s ease-in-out infinite;
}

.voice-btn.speaking {
  background: rgba(0, 87, 255, 0.14);
  border-color: rgba(0, 200, 255, 0.55);
  animation: voiceSpeakPulse 1.1s ease-in-out infinite;
}

@keyframes voiceListenPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(251, 113, 133, 0.55); transform: scale(1);    }
  50%       { box-shadow: 0 0 0 8px rgba(251, 113, 133, 0.00); transform: scale(1.08); }
}

@keyframes voiceSpeakPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(0, 200, 255, 0.55); transform: scale(1);    }
  50%       { box-shadow: 0 0 0 8px rgba(0, 200, 255, 0.00); transform: scale(1.08); }
}

/* ── Send button ── */
.chatbot-send {
  flex-shrink: 0;
  min-width: 36px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: var(--cb-grad-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 5px 18px rgba(37, 99, 235, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    transform   var(--cb-t-fast) var(--cb-ease-back),
    box-shadow  var(--cb-t-fast) var(--cb-ease),
    background  var(--cb-t-fast) var(--cb-ease),
    opacity     var(--cb-t-fast) var(--cb-ease);
}

/* Send button conic spin border */
.chatbot-send::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: conic-gradient(
    from var(--cb-angle),
    rgba(0,200,255,0.8),
    rgba(0, 87,255,0.6),
    rgba(0,200,255,0.8)
  );
  z-index: -1;
  animation: sendBorderSpin 2s linear infinite;
  opacity: 0;
  transition: opacity var(--cb-t-fast) ease;
}

@keyframes sendBorderSpin {
  to { --cb-angle: 360deg; }
}

.chatbot-send:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.85);
}

.chatbot-send:hover:not(:disabled)::before {
  opacity: 1;
}

.chatbot-send:active:not(:disabled) {
  transform: scale(0.94);
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.50);
}

.chatbot-send:disabled {
  opacity: 0.32;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  cursor: not-allowed;
}

.chatbot-send svg {
  width: 14px;
  height: 14px;
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════════════
   16) FOOTER
════════════════════════════════════════════════ */
.chatbot-footer {
  text-align: center;
  font-size: 0.68rem;
  color: rgba(148, 163, 184, 0.40);
  padding: 5px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(3, 4, 14, 0.99);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
  letter-spacing: 0.03em;
  position: relative;
  overflow: hidden;
}

/* Footer subtle shimmer line */
.chatbot-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 87,  255, 0.25),
    rgba(0, 200, 255, 0.20),
    transparent
  );
  pointer-events: none;
}

.chatbot-footer a {
  color: rgba(0, 200, 255, 0.50);
  text-decoration: none;
  transition: color var(--cb-t-fast) ease;
}

.chatbot-footer a:hover {
  color: rgba(0, 200, 255, 0.90);
  text-shadow: 0 0 8px rgba(0, 200, 255, 0.40);
}

/* ════════════════════════════════════════════════
   17) UNREAD BADGE
════════════════════════════════════════════════ */
.chat-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fb7185;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 8px rgba(251, 113, 133, 0.70),
    0 0 0 2px rgba(4, 6, 16, 1);
  animation: badgePop 0.35s var(--cb-ease-back) both;
  pointer-events: none;
}

@keyframes badgePop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}

/* ════════════════════════════════════════════════
   18) SYSTEM / INTRO MESSAGE
════════════════════════════════════════════════ */
.chatbot-msg--system {
  align-self: center;
  max-width: 90%;
  animation: msgAppear 0.30s var(--cb-ease) both;
}

.chatbot-msg--system .chatbot-bubble {
  background: linear-gradient(
    135deg,
    rgba(0, 87, 255, 0.10),
    rgba(0, 200, 255, 0.08)
  );
  border: 1px solid rgba(0, 200, 255, 0.18);
  color: var(--cb-text-muted);
  font-size: 0.78rem;
  text-align: center;
  border-radius: 12px;
  padding: 7px 14px;
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.08);
}

/* ════════════════════════════════════════════════
   19) LINK INSIDE BUBBLE
════════════════════════════════════════════════ */
.chatbot-bubble a {
  color: var(--cb-accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 200, 255, 0.35);
  transition:
    color var(--cb-t-fast) ease,
    text-decoration-color var(--cb-t-fast) ease;
}

.chatbot-bubble a:hover {
  color: #fff;
  text-decoration-color: rgba(0, 200, 255, 0.75);
  text-shadow: 0 0 8px rgba(0, 200, 255, 0.35);
}

/* ════════════════════════════════════════════════
   20) EMOJI / ICON IN BUBBLE
════════════════════════════════════════════════ */
.chatbot-bubble .cb-emoji {
  display: inline-block;
  transition: transform 0.2s var(--cb-ease-back);
}

.chatbot-bubble:hover .cb-emoji {
  transform: scale(1.25) rotate(-5deg);
}

/* ════════════════════════════════════════════════
   21) MOBILE — BOTTOM SHEET
════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #chatbot-container {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    padding: 0;
    filter: none;
  }

  .chatbot-panel {
    height: var(--cb-height-mobile);
    max-height: var(--cb-height-mobile);
    border-radius: 22px 22px 0 0;
    margin: 0;
    animation: mobileSheetUp var(--cb-t-slow) var(--cb-ease) both;
  }

  @keyframes mobileSheetUp {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* iOS drag handle */
  .chatbot-panel > *:first-child::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    margin: 0 auto 8px;
  }

  .chatbot-header          { padding: 8px 12px 11px; }
  .chatbot-messages        { padding: 10px 10px 8px; }
  .chatbot-quick-actions   { padding-inline: 10px; }
  .chatbot-form {
    padding: 8px 10px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* ── Tablet ── */
@media (min-width: 481px) and (max-width: 768px) {
  #chatbot-container {
    width: 355px;
    right: 18px;
    bottom: 82px;
  }
  .chatbot-panel { height: 495px; }
}

/* ── Landscape phone ── */
@media (max-width: 768px) and (orientation: landscape) {
  #chatbot-container {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
  }
  .chatbot-panel {
    height: 85dvh;
    max-height: 85dvh;
    border-radius: 16px 16px 0 0;
  }
}

/* ════════════════════════════════════════════════
   22) REDUCED MOTION
════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  .chatbot-panel,
  .chatbot-bubble,
  .chatbot-dot,
  .chat-fab,
  .chatbot-avatar,
  .chatbot-status-dot,
  .chatbot-chip,
  .chatbot-send,
  .chatbot-icon-btn,
  .voice-btn {
    animation: none !important;
    transition: none !important;
  }

  .chatbot-panel::before,
  .chatbot-header::before,
  .chatbot-form::before,
  .chatbot-footer::before,
  .chatbot-avatar::before,
  .chatbot-avatar::after,
  .chatbot-status-dot::before,
  .chatbot-status-dot::after,
  .chat-fab::before,
  .chat-fab-ring {
    display: none !important;
  }

  .chatbot-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--cb-bg-elevated);
    border: 1px solid var(--cb-border-strong);
  }
}

/* ════════════════════════════════════════════════
   23) HIGH CONTRAST MODE
════════════════════════════════════════════════ */
@media (forced-colors: active) {
  .chatbot-panel,
  .chatbot-header,
  .chatbot-form,
  .chatbot-footer {
    border: 2px solid ButtonText;
  }

  .chat-fab {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .chatbot-bubble {
    border: 1px solid ButtonText;
  }
}