/*
 * TECHGURU Chat Widget - GLASSMORPHISM WITH THEME TOGGLE
 * Light/Dark Mode | Animated Border | 3D Effects
 * Clean Enterprise Design
 */

/* ============================================
   CSS Variables - DARK THEME (Default)
   ============================================ */
:root,
body.dark-theme {
  /* Glass Effects - Dark transparent values */
  --glass-bg: rgba(15, 23, 42, 0.7);
  --glass-bg-hover: rgba(30, 41, 59, 0.8);
  --glass-bg-solid: rgba(15, 23, 42, 0.9);

  /* 3D Raised Border Effect */
  --glass-border-top: rgba(255, 255, 255, 0.25);
  --glass-border-left: rgba(255, 255, 255, 0.15);
  --glass-border-bottom: rgba(0, 0, 0, 0.3);
  --glass-border-right: rgba(0, 0, 0, 0.2);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-hover: rgba(255, 255, 255, 0.25);

  /* 3D Shadow for depth */
  --glass-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 8px 16px rgba(0, 0, 0, 0.25),
    0 16px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --glass-shadow-hover:
    0 4px 8px rgba(0, 0, 0, 0.35),
    0 12px 24px rgba(0, 0, 0, 0.3),
    0 20px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);

  /* Reduced blur */
  --glass-blur: blur(6px);

  /* Colors - Dark Theme */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  /* Accent Colors */
  --accent-primary: #a5b4fc;
  --accent-secondary: #d4b483;
  --accent-gradient: linear-gradient(135deg, #a5b4fc 0%, #d4b483 100%);

  /* Semantic Colors */
  --success: #22c55e;
  --error: #ef4444;

  /* Spacing & Radii */
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 50px;

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Manrope', 'Inter', sans-serif;
}

/* ============================================
   CSS Variables - LIGHT THEME
   ============================================ */
body.light-theme {
  /* Glass Effects - Light transparent values */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-hover: rgba(248, 250, 252, 0.85);
  --glass-bg-solid: rgba(255, 255, 255, 0.95);

  /* 3D Raised Border Effect (inverted for light) */
  --glass-border-top: rgba(255, 255, 255, 0.9);
  --glass-border-left: rgba(255, 255, 255, 0.7);
  --glass-border-bottom: rgba(100, 116, 139, 0.3);
  --glass-border-right: rgba(100, 116, 139, 0.2);
  --glass-border: rgba(100, 116, 139, 0.15);
  --glass-border-hover: rgba(100, 116, 139, 0.3);

  /* 3D Shadow for depth (softer for light mode) */
  --glass-shadow:
    0 2px 4px rgba(15, 23, 42, 0.08),
    0 8px 16px rgba(15, 23, 42, 0.06),
    0 16px 32px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glass-shadow-hover:
    0 4px 8px rgba(15, 23, 42, 0.12),
    0 12px 24px rgba(15, 23, 42, 0.08),
    0 20px 40px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);

  /* Reduced blur (same for both themes) */
  --glass-blur: blur(6px);

  /* Colors - Light Theme */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  /* Accent Colors (darker for light mode) */
  --accent-primary: #6366f1;
  --accent-secondary: #b8860b;
  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #b8860b 100%);

  /* Semantic Colors */
  --success: #16a34a;
  --error: #dc2626;

  /* Spacing & Radii (same for both themes) */
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 50px;

  /* Typography (same for both themes) */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Manrope', 'Inter', sans-serif;
}

/* ============================================
   Chat Widget Container
   ============================================ */
.chat-widget-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1rem;
  z-index: 9999;
  font-family: var(--font-primary);
  /* Performance: CSS containment */
  contain: layout style;
}

/* ============================================
   Chat Toggle Button - PREMIUM ANIMATIONS
   ============================================ */
.chat-toggle {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  /* Breathing/Float Animation - Slowed for Premium Feel */
  animation: chat-float 6s ease-in-out infinite;
  /* GPU acceleration */
  will-change: transform;
}

/* Pulsing Glow Effect - Enhanced Neon */
.chat-toggle::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(100, 222, 223, 0.8) 0%,
      rgba(165, 180, 252, 0.7) 30%,
      rgba(219, 112, 255, 0.6) 60%,
      transparent 85%);
  opacity: 0.8;
  animation: pulse-glow 5s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
  filter: blur(12px);
}


/* Breathing/Float Animation - Subtle & Smooth */
@keyframes chat-float {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-12px) scale(1.04);
  }
}

/* Pulse Glow Animation - Gentle & Premium */
@keyframes pulse-glow {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}


.chat-toggle:hover {
  transform: scale(1.12) translateY(-4px);
  animation-play-state: paused;
}

/* 3D Depth Press on Click */
.chat-toggle:active {
  transform: scale(0.92) translateY(2px);
  transition: transform 0.1s ease;
  filter: brightness(0.9);
}

.chat-toggle:active::before {
  opacity: 0.4;
  transform: scale(0.85);
}

.chat-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));
  transition: filter 0.3s ease;
}

.chat-toggle:hover .chat-avatar {
  filter: drop-shadow(0 12px 40px rgba(100, 222, 223, 0.7)) drop-shadow(0 0 30px rgba(219, 112, 255, 0.6));
}

/* ============================================
   Chat Window - Dark Glassmorphism
   ============================================ */
.chat-window {
  position: fixed;
  bottom: calc(1.5rem + 90px);
  right: 1rem;
  width: min(600px, calc(100vw - 1.5rem));
  height: min(550px, calc(100vh - 140px));
  min-width: 400px;
  min-height: 400px;
  max-width: min(800px, calc(100vw - 1.5rem));
  max-height: min(700px, calc(100vh - 140px));

  /* Solid fallback for browsers without backdrop-filter support */
  background: #0f172a;
  background: var(--glass-bg-solid);

  /* Simplified shadow for better performance */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);

  /* Backdrop filter with fallback */
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);

  /* 3D Raised Border */
  border: 1px solid;
  border-color: var(--glass-border-top) var(--glass-border-right) var(--glass-border-bottom) var(--glass-border-left);

  display: flex;
  flex-direction: column;

  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.95);
  /* Simplified transition */
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;

  z-index: 10000;
  overflow: hidden;

  /* Performance: CSS containment */
  contain: layout style paint;

  /* Accessibility: ensure proper role communication */
  --chat-window-role: dialog;
}

/* Animated Gradient Border - Simplified for performance */
.chat-window::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(90deg,
      var(--accent-primary) 0%,
      var(--accent-secondary) 50%,
      var(--accent-primary) 100%);
  background-size: 200% 100%;
  /* Slower animation = less CPU usage */
  animation: border-flow 20s linear infinite;
  /* Use will-change for GPU acceleration */
  will-change: background-position;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

@keyframes border-flow {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 200% 0%;
  }
}

.chat-window.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* ============================================
   Chat Header
   ============================================ */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  /* Solid fallback + glass effect */
  background: #141e32;
  background: rgba(20, 30, 50, 0.85);

  /* 3D Raised Bottom Border */
  border-bottom: 1px solid;
  border-bottom-color: var(--glass-border-bottom);
  /* Simplified shadow */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.chat-header-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.chat-header-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.chat-header-info h3 {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.chat-header-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.status-dot {
  width: 6px;
  height: 6px;
  background: var(--success);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.status-text {
  font-size: 0.75rem;
  /* Improved contrast ratio for WCAG AA compliance */
  color: var(--text-secondary);
}

/* Header Actions */
.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chat-action-btn,
.chat-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--glass-bg);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;

  /* 3D Raised Border */
  border: 1px solid;
  border-color: var(--glass-border-top) var(--glass-border-right) var(--glass-border-bottom) var(--glass-border-left);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.chat-action-btn svg {
  width: 16px;
  height: 16px;
}

.chat-close {
  font-size: 1.25rem;
  line-height: 1;
}

.chat-action-btn:hover,
.chat-close:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  color: var(--text-primary);
}

/* ============================================
   Suggestions
   ============================================ */
.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--glass-border);
}

.suggestion-chip {
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  /* Improved contrast */
  color: var(--text-primary);
  /* Solid fallback */
  background: #1e293b;
  background: var(--glass-bg);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;

  /* Simplified border */
  border: 1px solid var(--glass-border);
  /* Simplified shadow */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.suggestion-chip:hover {
  background: var(--glass-bg-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.suggestion-chip:active {
  transform: translateY(0);
}

/* ============================================
   Chat Messages
   ============================================ */
.chat-messages {
  flex: 1 1 0;
  min-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  scroll-behavior: smooth;
  /* Allow messages area to shrink to make room for form */
  overflow: auto;
}

/* Scrollbar */
.chat-messages::-webkit-scrollbar {
  width: 4px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ============================================
   Message Bubbles
   ============================================ */
.chat-message {
  display: flex;
  gap: 0.6rem;
  max-width: 85%;
  animation: msg-in 0.25s ease-out;
}

@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-message.user {
  flex-direction: row-reverse;
  align-self: flex-end;
}

.chat-message.assistant {
  align-self: flex-start;
}

/* Avatar */
.message-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);

  /* 3D Raised Border */
  border: 1px solid;
  border-color: var(--glass-border-top) var(--glass-border-right) var(--glass-border-bottom) var(--glass-border-left);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.message-avatar img {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  object-fit: contain;
}

/* Message Content */
.message-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.message-bubble {
  padding: 0.7rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  line-height: 1.5;
  word-wrap: break-word;
}

/* Assistant message - Dark glass with simplified effect */
.chat-message.assistant .message-bubble {
  /* Solid fallback */
  background: #1e293b;
  background: var(--glass-bg);
  color: var(--text-primary);

  /* Simplified border */
  border: 1px solid var(--glass-border);
  /* Simplified shadow */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* User message - Gradient */
.chat-message.user .message-bubble {
  background: var(--accent-gradient);
  color: #0f172a;
  font-weight: 500;
}

/* Timestamp - Improved contrast for accessibility */
.message-time {
  font-size: 0.65rem;
  /* Better contrast ratio */
  color: var(--text-secondary);
  padding: 0 0.25rem;
}

.chat-message.user .message-time {
  text-align: right;
}

/* Reactions */
.message-reactions {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.reaction-btn,
.copy-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  cursor: pointer;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.15s ease;
  padding: 0;
}

.reaction-btn svg,
.copy-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-secondary);
  transition: all 0.15s ease;
}

.chat-message:hover .reaction-btn,
.chat-message:hover .copy-btn {
  opacity: 1;
}

.reaction-btn:hover,
.copy-btn:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}

.reaction-btn:hover svg,
.copy-btn:hover svg {
  stroke: var(--text-color);
}

.reaction-btn.active {
  background: var(--accent-gradient);
}

.reaction-btn.active svg {
  stroke: white;
}

.copy-btn.copied {
  background: var(--success);
  border-color: var(--success);
}

.copy-btn.copied svg {
  stroke: white;
}

/* File icon in chat */
.file-icon {
  width: 18px;
  height: 18px;
  stroke: var(--primary);
  vertical-align: middle;
  margin-right: 0.35rem;
}

/* ============================================
   Typing Indicator
   ============================================ */
.chat-typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
}

.typing-avatar {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.typing-dots {
  display: flex;
  gap: 3px;
  padding: 0.5rem 0.75rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
}

.typing-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-secondary);
  /* Simplified animation - opacity only for better performance */
  animation: typing 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

/* Hidden state for typing indicator */
.chat-typing-hidden {
  display: none !important;
}

/* ============================================
   Chat Input Form
   ============================================ */
.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  /* Solid fallback */
  background: #141e32;
  background: rgba(20, 30, 50, 0.95);
  border-top: 1px solid var(--glass-border);
  /* Mobile fix: prevent overflow */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  /* CRITICAL: Prevent form from shrinking or being cut off */
  flex-shrink: 0;
  min-height: 60px;
  position: relative;
  z-index: 10;
}

.chat-input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  /* Mobile fix: constrain width */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.chat-input-container {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  /* Solid fallback */
  background: #0a0f1e;
  background: rgba(10, 15, 30, 0.9);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease;
  /* Simplified border */
  border: 1px solid var(--glass-border);
  /* Mobile fix: constrain width */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.chat-input-container:focus-within {
  border-color: var(--accent-primary);
}

/* Input Buttons */
.chat-input-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.chat-input-btn svg {
  width: 16px;
  height: 16px;
}

.chat-input-btn:hover {
  color: var(--text-primary);
  background: var(--glass-bg-hover);
}

.chat-input-btn.recording {
  color: var(--error);
  animation: pulse-rec 1s infinite;
}

@keyframes pulse-rec {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

/* Textarea */
#chat-input,
.chat-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-family: var(--font-primary);
  resize: none;
  outline: none;
  min-height: 24px;
  max-height: 100px;
  line-height: 1.4;
}

#chat-input::placeholder,
.chat-input::placeholder {
  color: var(--text-muted);
}

/* Input Footer */
.chat-input-footer {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0.5rem;
  flex-shrink: 0;
}

.char-count,
.input-hint {
  font-size: 0.65rem;
  /* Improved contrast */
  color: var(--text-secondary);
}

.char-count.warning {
  color: var(--error);
  font-weight: 500;
}

/* ============================================
   PREMIUM SEND BUTTON - Uiverse Style
   ============================================ */
.chat-send-wrapper {
  position: relative;
  display: inline-block;
}

.chat-send {
  --border-radius: 24px;
  --padding: 3px;
  --transition: 0.3s;
  --button-color: #101018;
  --highlight-color-hue: 220deg;

  position: relative;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6em 1em 0.6em 0.8em;
  font-family: var(--font-primary);
  font-size: 0.85em;
  font-weight: 500;
  min-width: 90px;
  height: 44px;

  background-color: var(--button-color);

  box-shadow:
    /* inset highlights */
    inset 0px 1px 1px rgba(255, 255, 255, 0.15),
    inset 0px 2px 2px rgba(255, 255, 255, 0.1),
    inset 0px 4px 4px rgba(255, 255, 255, 0.08),
    inset 0px 8px 8px rgba(255, 255, 255, 0.04),
    /* drop shadows */
    0px -1px 1px rgba(0, 0, 0, 0.02),
    0px -2px 2px rgba(0, 0, 0, 0.03),
    0px -4px 4px rgba(0, 0, 0, 0.05),
    0px -8px 8px rgba(0, 0, 0, 0.06);

  border: solid 1px rgba(255, 255, 255, 0.12);
  border-radius: var(--border-radius);
  cursor: pointer;

  transition:
    box-shadow var(--transition),
    border var(--transition),
    background-color var(--transition),
    transform var(--transition);
}

.chat-send::before {
  content: "";
  position: absolute;
  top: calc(0px - var(--padding));
  left: calc(0px - var(--padding));
  width: calc(100% + var(--padding) * 2);
  height: calc(100% + var(--padding) * 2);
  border-radius: calc(var(--border-radius) + var(--padding));
  pointer-events: none;
  background-image: linear-gradient(0deg, #0004, #000a);
  z-index: -1;
  transition:
    box-shadow var(--transition),
    filter var(--transition);
  box-shadow:
    0 -8px 8px -6px transparent inset,
    0 -16px 16px -8px transparent inset,
    1px 1px 1px rgba(255, 255, 255, 0.12),
    2px 2px 2px rgba(255, 255, 255, 0.06),
    -1px -1px 1px rgba(0, 0, 0, 0.12),
    -2px -2px 2px rgba(0, 0, 0, 0.06);
}

.chat-send::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(0deg,
      #fff,
      hsl(var(--highlight-color-hue), 100%, 70%),
      hsla(var(--highlight-color-hue), 100%, 70%, 50%),
      8%,
      transparent);
  background-position: 0 0;
  opacity: 0;
  transition:
    opacity var(--transition),
    filter var(--transition);
}

/* Send Button SVG Icon */
.chat-send .send-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #e8e8e8;
  stroke-width: 2;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
  animation: send-flicker 2s linear infinite;
  transition:
    stroke var(--transition),
    filter var(--transition);
}

@keyframes send-flicker {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

/* Text wrapper for "Send" / "Sending" */
.send-txt-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 3em;
  height: 1.2em;
  overflow: hidden;
}

.send-txt-1,
.send-txt-2 {
  position: absolute;
  left: 0;
  display: flex;
}

.send-txt-1 {
  opacity: 1;
}

.send-txt-2 {
  opacity: 0;
}

.send-letter {
  position: relative;
  display: inline-block;
  color: rgba(255, 255, 255, 0.5);
  animation: send-letter-anim 2s ease-in-out infinite;
  transition:
    color var(--transition),
    text-shadow var(--transition);
}

@keyframes send-letter-anim {

  0%,
  100% {
    color: rgba(255, 255, 255, 0.5);
  }

  50% {
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
    color: #fff;
  }
}

/* Letter animation delays */
.send-letter:nth-child(1) {
  animation-delay: 0s;
}

.send-letter:nth-child(2) {
  animation-delay: 0.08s;
}

.send-letter:nth-child(3) {
  animation-delay: 0.16s;
}

.send-letter:nth-child(4) {
  animation-delay: 0.24s;
}

.send-letter:nth-child(5) {
  animation-delay: 0.32s;
}

.send-letter:nth-child(6) {
  animation-delay: 0.4s;
}

.send-letter:nth-child(7) {
  animation-delay: 0.48s;
}

/* Hover state */
.chat-send:hover {
  border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%);
}

.chat-send:hover::before {
  box-shadow:
    0 -8px 8px -6px rgba(255, 255, 255, 0.6) inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset,
    1px 1px 1px rgba(255, 255, 255, 0.12),
    2px 2px 2px rgba(255, 255, 255, 0.06),
    -1px -1px 1px rgba(0, 0, 0, 0.12),
    -2px -2px 2px rgba(0, 0, 0, 0.06);
}

.chat-send:hover::after {
  opacity: 0.8;
  -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
  mask-image: linear-gradient(0deg, #fff, transparent);
}

.chat-send:hover .send-icon {
  stroke: #fff;
  filter: drop-shadow(0 0 4px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px rgba(0, 0, 0, 0.5));
  animation: none;
}

.chat-send:hover .send-letter {
  color: #fff;
  text-shadow: 0 0 4px hsla(var(--highlight-color-hue), 100%, 70%, 80%);
}

/* Active/Pressed state */
.chat-send:active {
  transform: scale(0.97);
  border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%);
  background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5);
}

.chat-send:active::before {
  box-shadow:
    0 -8px 12px -6px rgba(255, 255, 255, 0.8) inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset,
    1px 1px 1px rgba(255, 255, 255, 0.25),
    2px 2px 2px rgba(255, 255, 255, 0.12),
    -1px -1px 1px rgba(0, 0, 0, 0.12),
    -2px -2px 2px rgba(0, 0, 0, 0.06);
}

.chat-send:active::after {
  opacity: 1;
  -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
  mask-image: linear-gradient(0deg, #fff, transparent);
  filter: brightness(200%);
}

.chat-send:active .send-letter {
  text-shadow: 0 0 2px hsla(var(--highlight-color-hue), 100%, 90%, 90%);
  animation: none;
  color: #fff;
}

/* Loading/Sending state */
.chat-send.sending .send-txt-1 {
  opacity: 0;
}

.chat-send.sending .send-txt-2 {
  opacity: 1;
}

.chat-send.sending .send-icon {
  animation: send-pulse 0.8s ease-in-out infinite;
}

@keyframes send-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.15);
    opacity: 0.7;
  }
}

/* Disabled state */
.chat-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.chat-send:disabled .send-icon,
.chat-send:disabled .send-letter {
  animation: none;
}

/* File Input Hidden */
.chat-file-input {
  display: none;
}

/* File Preview */
.chat-file-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1rem 0.5rem;
  flex-shrink: 0;
  background: rgba(20, 30, 50, 0.95);
}

.chat-file-preview:empty {
  display: none;
}

.file-preview-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.file-preview-remove {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-preview-remove:hover {
  background: var(--error);
  color: white;
}

/* ============================================
   Floating CTAs - Hidden by default, show on chat interaction
   ============================================ */
.chat-floating-ctas {
  position: fixed;
  bottom: 85px;
  right: 100px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transform: translateX(20px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.chat-floating-ctas.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.chat-cta-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--glass-bg-solid);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.chat-cta-btn:hover {
  transform: translateX(-4px);
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}

.chat-cta-icon {
  font-size: 1rem;
}

/* ============================================
   Resize Handles
   ============================================ */
.resize-handle {
  position: absolute;
  background: transparent;
  z-index: 10001;
}

.resize-handle-nw {
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  cursor: nw-resize;
}

.resize-handle-ne {
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  cursor: ne-resize;
}

.resize-handle-sw {
  bottom: 0;
  left: 0;
  width: 14px;
  height: 14px;
  cursor: sw-resize;
}

.resize-handle-se {
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  cursor: se-resize;
}

.resize-handle-n {
  top: 0;
  left: 14px;
  right: 14px;
  height: 4px;
  cursor: n-resize;
}

.resize-handle-s {
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 4px;
  cursor: s-resize;
}

.resize-handle-e {
  top: 14px;
  right: 0;
  bottom: 14px;
  width: 4px;
  cursor: e-resize;
}

.resize-handle-w {
  top: 14px;
  left: 0;
  bottom: 14px;
  width: 4px;
  cursor: w-resize;
}

/* ============================================
   Mobile Responsive - Improved Breakpoints
   ============================================ */

/* Tablet breakpoint */
@media (max-width: 768px) {
  .chat-widget-container {
    bottom: 1rem;
    right: 0.75rem;
  }

  .chat-window {
    position: fixed;
    bottom: calc(1rem + 75px);
    right: 0.75rem;
    width: min(360px, calc(100vw - 1.5rem));
    min-width: 260px;
    max-width: calc(100vw - 1.5rem);
  }
}

/* Mobile breakpoint - iPhone and similar devices */
@media (max-width: 480px) {
  .chat-widget-container {
    bottom: 1rem;
    right: 0.75rem;
    left: auto;
  }

  .chat-toggle {
    width: 64px;
    height: 64px;
  }

  .chat-window {
    /* Fixed positioning relative to viewport */
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    /* Full screen on mobile */

    /* Height and Width */
    width: 100%;
    height: 100%;
    /* Fallback */
    height: 100dvh;
    /* Dynamic viewport height */

    /* Remove max-height/width constraints */
    max-width: none;
    max-height: none;
    min-width: 0;

    /* Styling */
    border-radius: 0;
    margin: 0;
    background: var(--glass-bg-solid);
    /* Solid background for legibility */

    /* Flex layout */
    display: flex;
    flex-direction: column;

    /* Ensure it sits above everything */
    z-index: 10000;

    /* Prevent body scroll when chat is open (handled by JS usually, but this helps) */
    overscroll-behavior: contain;
  }

  .chat-window::before {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    /* Disable border animation on mobile for performance */
    animation: none;
    background: var(--accent-primary);
  }

  .chat-suggestions {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Firefox */
    scrollbar-width: none;
    padding: 0.5rem 0.75rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  .chat-suggestions::-webkit-scrollbar {
    display: none;
  }

  .chat-floating-ctas {
    bottom: 70px;
    right: 60px;
  }

  /* Improve touch targets for accessibility (44x44 minimum) */
  .chat-action-btn,
  .chat-close {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .chat-input-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .suggestion-chip {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    flex-shrink: 0;
  }

  /* Keyboard-aware input positioning - CRITICAL FOR MOBILE */
  .chat-form {
    padding: 0.5rem;
    /* Ensure form stays visible when keyboard opens */
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    gap: 0.35rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .chat-input-wrapper {
    min-width: 0;
    flex: 1 1 0%;
    max-width: calc(100% - 50px);
  }

  .chat-input-container {
    padding: 0.4rem 0.5rem;
    gap: 0.15rem;
  }

  #chat-input,
  .chat-input {
    font-size: 16px !important;
    /* Prevents iOS zoom on focus */
    min-width: 0;
  }

  .chat-send-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-shrink: 0;
    padding: 0.5rem;
  }

  .chat-input-footer {
    padding: 0 0.25rem;
    font-size: 0.6rem;
  }

  .char-count,
  .input-hint {
    font-size: 0.55rem;
  }
}

/* Small mobile breakpoint */
@media (max-width: 360px) {
  .chat-toggle {
    width: 56px;
    height: 56px;
  }

  .chat-header {
    padding: 0.75rem 1rem;
  }

  .chat-header-info h3 {
    font-size: 0.85rem;
  }
}

/* ============================================
   Reduced Motion - Enhanced accessibility
   ============================================ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .chat-avatar,
  .typing-dots span,
  .status-dot,
  .chat-window::before,
  .send-icon,
  .send-letter {
    animation: none !important;
  }

  .chat-window {
    transition: opacity 0.01ms ease !important;
    transform: none !important;
  }

  .chat-message {
    animation: none !important;
  }

  .chat-toggle:hover,
  .suggestion-chip:hover {
    transform: none !important;
  }
}

/* ============================================
   Focus States - Enhanced keyboard accessibility
   ============================================ */
.chat-toggle:focus-visible,
.chat-send:focus-visible,
.chat-input-btn:focus-visible,
.suggestion-chip:focus-visible,
.chat-action-btn:focus-visible,
.chat-close:focus-visible,
.chat-cta-btn:focus-visible,
.reaction-btn:focus-visible,
.copy-btn:focus-visible {
  outline: 3px solid var(--accent-primary);
  outline-offset: 2px;
  /* Ensure focus ring is visible on all backgrounds */
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3);
}

/* High contrast mode support */
@media (forced-colors: active) {

  .chat-toggle:focus-visible,
  .chat-send:focus-visible,
  .chat-input-btn:focus-visible,
  .suggestion-chip:focus-visible,
  .chat-action-btn:focus-visible,
  .chat-close:focus-visible {
    outline: 3px solid CanvasText;
  }

  .message-bubble {
    border: 2px solid CanvasText;
  }
}

/* ============================================
   Utility & Accessibility
   ============================================ */
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link for keyboard users */
.chat-skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--accent-primary);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 10002;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.chat-skip-link:focus {
  top: 0;
}

/* Ensure minimum touch target size (44x44px) */
@supports (min-height: 44px) {

  .chat-action-btn,
  .chat-close,
  .chat-input-btn,
  .reaction-btn,
  .copy-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ============================================
   Mobile Responsive - Larger Message Viewport
   ============================================ */

/* Tablets and below */
@media screen and (max-width: 768px) {
  .chat-window {
    width: calc(100vw - 1rem);
    height: calc(100vh - 120px);
    max-width: none;
    max-height: calc(100vh - 120px);
    right: 0.5rem;
    bottom: 100px;
    border-radius: 16px;
  }

  .chat-header {
    padding: 0.75rem 1rem;
  }

  .chat-quick-actions {
    padding: 0.5rem 0.75rem;
    gap: 0.4rem;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .quick-action-btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .chat-messages {
    min-height: 250px;
    padding: 0.75rem;
  }
}

/* Mobile phones - consolidated styles (avoiding conflicts with earlier 480px query) */
@media screen and (max-width: 480px) {
  .chat-header {
    padding: 0.6rem 0.75rem;
  }

  .chat-header-title {
    font-size: 0.95rem;
  }

  .chat-header-info h3 {
    font-size: 0.85rem;
  }

  .chat-quick-actions {
    padding: 0.4rem 0.5rem;
    box-sizing: border-box;
    max-width: 100%;
  }

  .quick-action-btn {
    padding: 0.35rem 0.5rem;
    font-size: 0.7rem;
    flex-shrink: 0;
  }

  .chat-messages {
    min-height: 200px;
    flex: 1 1 auto;
    padding: 0.75rem 0.5rem;
  }

  .message-bubble {
    max-width: 90%;
    word-break: break-word;
  }

  .chat-message {
    max-width: 95%;
  }
}

/* Print styles - hide chat widget when printing */
@media print {
  .chat-widget-container {
    display: none !important;
  }
}