/* ============================================
   AI-CHAT.CSS - AI Chat Panel & Study Prompts
   ============================================
   
   Contains:
   - AI chat panel layout and styling
   - Study prompts display
   - Message bubbles and interactions
   - Loading states and animations
   - Light/Dark theme support
*/

/* ============================================
   CSS CUSTOM PROPERTIES - THEME VARIABLES
   ============================================ */

/* Force immediate theme response - this ensures the panel updates instantly when theme changes */
html[data-theme="light"] .ai-chat-panel *,
[data-theme="light"] .ai-chat-panel * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

html[data-theme="dark"] .ai-chat-panel *,
[data-theme="dark"] .ai-chat-panel * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Additional override to force theme variables to be applied immediately */
html[data-theme="light"] .ai-chat-panel {
  --ai-bg-primary: var(--ai-light-bg-primary) !important;
  --ai-bg-secondary: var(--ai-light-bg-secondary) !important;
  --ai-bg-header: var(--ai-light-bg-header) !important;
  --ai-bg-content: var(--ai-light-bg-content) !important;
  --ai-bg-message: var(--ai-light-bg-message) !important;
  --ai-text-primary: var(--ai-light-text-primary) !important;
  --ai-text-secondary: var(--ai-light-text-secondary) !important;
  --ai-text-muted: var(--ai-light-text-muted) !important;
  --ai-border-primary: var(--ai-light-border-primary) !important;
  --ai-border-gold: var(--ai-light-border-gold) !important;
  --ai-shadow-primary: var(--ai-light-shadow-primary) !important;
  --ai-shadow-elevated: var(--ai-light-shadow-elevated) !important;
}

html[data-theme="dark"] .ai-chat-panel {
  --ai-bg-primary: var(--ai-dark-bg-primary) !important;
  --ai-bg-secondary: var(--ai-dark-bg-secondary) !important;
  --ai-bg-header: var(--ai-dark-bg-header) !important;
  --ai-bg-content: var(--ai-dark-bg-content) !important;
  --ai-bg-message: var(--ai-dark-bg-message) !important;
  --ai-text-primary: var(--ai-dark-text-primary) !important;
  --ai-text-secondary: var(--ai-dark-text-secondary) !important;
  --ai-text-muted: var(--ai-dark-text-muted) !important;
  --ai-border-primary: var(--ai-dark-border-primary) !important;
  --ai-border-gold: var(--ai-dark-border-gold) !important;
  --ai-shadow-primary: var(--ai-dark-shadow-primary) !important;
  --ai-shadow-elevated: var(--ai-dark-shadow-elevated) !important;
}

:root {
  /* Light Theme Colors - Professional Spiritual Theme Integration */
  --ai-light-bg-primary: linear-gradient(135deg, #FFFFFF 0%, #FBF9F7 30%, #F9F7F4 100%);
  --ai-light-bg-secondary: linear-gradient(165deg, #F9F7F4 60%, #FFFFFF 100%);
  --ai-light-bg-header: linear-gradient(270deg, #F5F2ED 60%, #FFFFFF 100%);
  --ai-light-bg-content: linear-gradient(165deg, #FEFEFE 60%, #F9F7F4 100%);
  --ai-light-bg-message: linear-gradient(165deg, rgba(107, 69, 150, 0.05) 20%, #FEFEFE 100%);
  --ai-light-bg-user-message: linear-gradient(90deg, #F2F0FF 20%, rgba(107, 69, 150, 0.1) 100%);
  
  --ai-light-text-primary: #2d1e2f;
  --ai-light-text-secondary: #5e5873;
  --ai-light-text-muted: #888888;
  --ai-light-text-header: #2d1e2f;
  
  --ai-light-border-primary: rgba(107, 69, 150, 0.15);
  --ai-light-border-secondary: rgba(107, 69, 150, 0.25);
  --ai-light-border-gold: rgba(107, 69, 150, 0.2);
  
  --ai-light-shadow-primary: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(107, 69, 150, 0.05);
  --ai-light-shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(107, 69, 150, 0.08);
  
  --ai-light-accent-hope: #DED8FF;
  --ai-light-accent-faith: #CAC0FF;
  --ai-light-accent-love: #E8E4FF;
  --ai-light-accent-wisdom: #6B4596;
  --ai-light-accent-peace: #8B5A9C;
  --ai-light-accent-growth: #4B2E83;
  --ai-light-accent-prayer: #5B3A93;
  
  /* Dark Theme Colors - Modern Professional Charcoal */
  --ai-dark-bg-primary: linear-gradient(135deg, #0f1117 0%, #121417 30%, #1a1d23 100%);
  --ai-dark-bg-secondary: linear-gradient(165deg, #121417 60%, #1a1d23 100%);
  --ai-dark-bg-header: linear-gradient(270deg, #1c1f26 60%, #121417 100%);
  --ai-dark-bg-content: linear-gradient(165deg, #121417 60%, #1a1d23 100%);
  --ai-dark-bg-message: linear-gradient(165deg, rgba(46, 49, 54, 0.15) 20%, #121417 100%);
  --ai-dark-bg-user-message: linear-gradient(90deg, #1c1f26 20%, rgba(46, 49, 54, 0.25) 100%);
  
  --ai-dark-text-primary: #f8fafc;
  --ai-dark-text-secondary: #e2e8f0;
  --ai-dark-text-muted: #a0aec0;
  --ai-dark-text-header: #f8fafc;
  
  --ai-dark-border-primary: rgba(42, 45, 51, 0.4);
  --ai-dark-border-secondary: rgba(42, 45, 51, 0.6);
  --ai-dark-border-gold: rgba(46, 49, 54, 0.5);
  
  --ai-dark-shadow-primary: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(42, 45, 51, 0.2);
  --ai-dark-shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(42, 45, 51, 0.25);
  
  --ai-dark-accent-hope: #2e3136;
  --ai-dark-accent-faith: #34383d;
  --ai-dark-accent-love: #2a2d33;
  --ai-dark-accent-wisdom: #bfdbfe;
  --ai-dark-accent-peace: #93c5fd;
  --ai-dark-accent-growth: #60a5fa;
  --ai-dark-accent-prayer: #3b82f6;
  
/* Light theme defaults (moved above dark theme) */
html[data-theme="light"] {
  --ai-bg-primary: var(--ai-light-bg-primary);
  --ai-bg-secondary: var(--ai-light-bg-secondary);
  --ai-bg-header: var(--ai-light-bg-header);
  --ai-bg-content: var(--ai-light-bg-content);
  --ai-bg-message: var(--ai-light-bg-message);
  --ai-bg-user-message: var(--ai-light-bg-user-message);
  
  --ai-text-primary: var(--ai-light-text-primary);
  --ai-text-secondary: var(--ai-light-text-secondary);
  --ai-text-muted: var(--ai-light-text-muted);
  --ai-text-header: var(--ai-light-text-header);
  
  --ai-border-primary: var(--ai-light-border-primary);
  --ai-border-secondary: var(--ai-light-border-secondary);
  --ai-border-gold: var(--ai-light-border-gold);
  
  --ai-shadow-primary: var(--ai-light-shadow-primary);
  --ai-shadow-elevated: var(--ai-light-shadow-elevated);
  
  --ai-accent-hope: var(--ai-light-accent-hope);
  --ai-accent-faith: var(--ai-light-accent-faith);
  --ai-accent-love: var(--ai-light-accent-love);
  --ai-accent-wisdom: var(--ai-light-accent-wisdom);
  --ai-accent-peace: var(--ai-light-accent-peace);
  --ai-accent-growth: var(--ai-light-accent-growth);
  --ai-accent-prayer: var(--ai-light-accent-prayer);
}

/* Dark theme explicit override */
html[data-theme="dark"] {
  --ai-bg-primary: var(--ai-dark-bg-primary);
  --ai-bg-secondary: var(--ai-dark-bg-secondary);
  --ai-bg-header: var(--ai-dark-bg-header);
  --ai-bg-content: var(--ai-dark-bg-content);
  --ai-bg-message: var(--ai-dark-bg-message);
  --ai-bg-user-message: var(--ai-dark-bg-user-message);
  
  --ai-text-primary: var(--ai-dark-text-primary);
  --ai-text-secondary: var(--ai-dark-text-secondary);
  --ai-text-muted: var(--ai-dark-text-muted);
  --ai-text-header: var(--ai-dark-text-header);
  
  --ai-border-primary: var(--ai-dark-border-primary);
  --ai-border-secondary: var(--ai-dark-border-secondary);
  --ai-border-gold: var(--ai-dark-border-gold);
  
  --ai-shadow-primary: var(--ai-dark-shadow-primary);
  --ai-shadow-elevated: var(--ai-dark-shadow-elevated);
  
  --ai-accent-hope: var(--ai-dark-accent-hope);
  --ai-accent-faith: var(--ai-dark-accent-faith);
  --ai-accent-love: var(--ai-dark-accent-love);
  --ai-accent-wisdom: var(--ai-dark-accent-wisdom);
  --ai-accent-peace: var(--ai-dark-accent-peace);
  --ai-accent-growth: var(--ai-dark-accent-growth);
  --ai-accent-prayer: var(--ai-dark-accent-prayer);
}
}
/* Main AI Chat Panel - Base styles, positioning handled by media queries */
.ai-chat-panel {
  position: fixed;
  background: var(--ai-bg-primary);
  border: none;
  box-shadow: var(--ai-shadow-elevated);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  color: var(--ai-text-primary);
  min-width: var(--ai-panel-min-width);
  max-width: var(--ai-panel-max-width);
  overflow: hidden;
  font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  /* Ensure the panel doesn't interfere with content when hidden */
  pointer-events: auto;
  border-left: 1px solid var(--ai-border-gold);
  transition: all 0.3s ease;
}

/* Ensure the panel responds to theme changes immediately */
html[data-theme="light"] .ai-chat-panel,
[data-theme="light"] .ai-chat-panel {
  background: var(--ai-light-bg-primary);
  color: var(--ai-light-text-primary);
  border-left-color: var(--ai-light-border-gold);
  box-shadow: var(--ai-light-shadow-elevated);
}

html[data-theme="dark"] .ai-chat-panel,
[data-theme="dark"] .ai-chat-panel {
  background: var(--ai-dark-bg-primary);
  color: var(--ai-dark-text-primary);
  border-left-color: var(--ai-dark-border-gold);
  box-shadow: var(--ai-dark-shadow-elevated);
}

/* Dark mode - Professional charcoal with subtle glow */
html[data-theme="dark"] .ai-chat-panel {
  border-left: 2px solid rgba(42, 45, 51, 0.6);
  box-shadow: 
    var(--ai-shadow-elevated),
    -8px 0 24px rgba(0, 0, 0, 0.4),
    -16px 0 40px rgba(0, 0, 0, 0.2),
    inset 2px 0 8px rgba(42, 45, 51, 0.1);
}

/* Light mode keeps professional styling */
html[data-theme="light"] .ai-chat-panel {
  border-left: 2px solid rgba(107, 69, 150, 0.25);
  box-shadow: 
    var(--ai-shadow-elevated),
    -4px 0 12px rgba(107, 69, 150, 0.08);
}

/* When panel is not active, prevent it from blocking interactions */
.ai-chat-panel:not(.active) {
  pointer-events: none;
}

.ai-chat-panel.active {
  pointer-events: auto;
}

/* Ensure panel stays visible during viewport transitions */
.ai-chat-panel.active {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Active state handled by media queries */

/* Remove the gradient pseudo-element */
.ai-chat-panel::after {
  display: none;
}

/* Resize handle for AI chat panel - hidden */
.ai-chat-panel::before {
  display: none;
}

/* AI Chat Header */
.ai-chat-header {
  background: var(--ai-bg-header);
  border-bottom: 1px solid var(--ai-border-gold);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: clamp(50px, 8vh, 60px);
  transition: all 0.3s ease;
  color: var(--ai-text-header);
}

/* Ensure header responds to theme changes */
html[data-theme="light"] .ai-chat-header,
[data-theme="light"] .ai-chat-header {
  background: var(--ai-light-bg-header);
  border-bottom-color: var(--ai-light-border-gold);
  color: var(--ai-text-header);
}

html[data-theme="dark"] .ai-chat-header,
[data-theme="dark"] .ai-chat-header {
  background: var(--ai-dark-bg-header);
  border-bottom-color: var(--ai-dark-border-gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  color: var(--ai-text-header);
}

.ai-chat-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--ai-text-header);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-family: 'Segoe UI Semibold', 'SF Pro Display Medium', system-ui, -apple-system, sans-serif;
  transition: text-shadow 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* AI Header glow effect while typing */
.ai-chat-header h3.typing {
  animation: wisdomGlow 2s ease-in-out infinite;
}

/* Light theme typing glow */
html[data-theme="light"] .ai-chat-header h3.typing {
  text-shadow: 0 0 10px var(--ai-accent-wisdom), 0 0 20px var(--ai-accent-wisdom), 0 0 30px var(--ai-accent-wisdom);
}

/* Dark theme typing glow */
html[data-theme="dark"] .ai-chat-header h3.typing {
  text-shadow: 0 0 10px var(--ai-accent-wisdom), 0 0 20px var(--ai-accent-wisdom), 0 0 30px var(--ai-accent-wisdom);
}

.ai-chat-header svg {
  opacity: 0.8;
}

/* AI Toggle Button - positioning handled by media queries */
.ai-toggle-btn {
  background: var(--ai-accent-peace);
  border: none;
  border-radius: 50%;
  font-size: var(--font-size-sm);
  padding: var(--spacing-sm);
  cursor: pointer;
  color: white;
  transition: all 0.3s ease;
  z-index: 1052;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 6vw, 48px);
  height: clamp(44px, 6vw, 48px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}

/* Ensure AI toggle button stays above modal backdrop */
body:has(.modal:not(.hidden)) .ai-toggle-btn,
body:has(.modal.show) .ai-toggle-btn {
  z-index: 1102 !important;
}

/* Light mode toggle button - Professional spiritual theme */
html[data-theme="light"] .ai-toggle-btn {
  background: linear-gradient(135deg, #6B4596, #5B3A93);
  box-shadow: 0 4px 12px rgba(107, 69, 150, 0.3), 0 0 20px rgba(107, 69, 150, 0.1);
}

html[data-theme="light"] .ai-toggle-btn:hover {
  background: linear-gradient(135deg, #5B3A93, #4B2E83);
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(107, 69, 150, 0.4), 0 0 25px rgba(107, 69, 150, 0.2);
}

/* Dark mode toggle button - Professional charcoal with blue accent */
html[data-theme="dark"] .ai-toggle-btn {
  background: linear-gradient(135deg, #93c5fd, #60a5fa);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(147, 197, 253, 0.3);
}

html[data-theme="dark"] .ai-toggle-btn:hover {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 30px rgba(147, 197, 253, 0.4);
}

/* Active state for toggle button - changes color when panel is open */
.ai-toggle-btn.active {
  background: var(--ai-accent-prayer);
}

html[data-theme="light"] .ai-toggle-btn.active {
  background: linear-gradient(135deg, #4B2E83, #3A2066);
}

html[data-theme="dark"] .ai-toggle-btn.active {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(59, 130, 246, 0.4);
}

.ai-toggle-btn.active:hover {
  background: var(--ai-accent-growth);
}

html[data-theme="light"] .ai-toggle-btn.active:hover {
  background: linear-gradient(135deg, #3A2066, #2D1850);
}

html[data-theme="dark"] .ai-toggle-btn.active:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 30px rgba(37, 99, 235, 0.5);
}

/* When panel is not active, add pulse effect */
.ai-chat-panel:not(.active) .ai-toggle-btn {
  animation: pulse-glow 2s infinite;
}

/* AI Chat Content Area */
.ai-chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
  overflow: hidden;
  background: var(--ai-bg-content);
  font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  transition: all 0.3s ease;
}

/* Ensure content area responds to theme changes */
html[data-theme="light"] .ai-chat-content,
[data-theme="light"] .ai-chat-content {
  background: var(--ai-light-bg-content);
  color: var(--ai-light-text-primary);
}

html[data-theme="dark"] .ai-chat-content,
[data-theme="dark"] .ai-chat-content {
  background: var(--ai-dark-bg-content);
  color: var(--ai-dark-text-primary);
}

/* AI Messages Container */
.ai-messages {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ai-text-muted) transparent;
  padding-right: 8px;
  margin-bottom: 20px;
}

.ai-messages::-webkit-scrollbar {
  width: 6px;
}

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

.ai-messages::-webkit-scrollbar-thumb {
  background: var(--ai-text-muted);
  border-radius: 3px;
}

.ai-messages::-webkit-scrollbar-thumb:hover {
  background: var(--ai-accent-peace);
}

/* Individual AI Messages */
.ai-message {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 12px;
  line-height: 1.5;
  word-wrap: breaks-word;
  font-size: 1rem;
  color: var(--ai-text-primary);
  border: 1px solid var(--ai-border-primary);
  background: var(--ai-bg-message);
  box-shadow: var(--ai-shadow-primary);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Ensure messages respond to theme changes */
html[data-theme="light"] .ai-message,
[data-theme="light"] .ai-message {
  background: var(--ai-light-bg-message);
  border-color: var(--ai-light-border-primary);
  color: var(--ai-light-text-primary);
  box-shadow: var(--ai-light-shadow-primary);
}

html[data-theme="dark"] .ai-message,
[data-theme="dark"] .ai-message {
  background: var(--ai-dark-bg-message);
  border-color: var(--ai-dark-border-primary);
  color: var(--ai-dark-text-primary);
  box-shadow: var(--ai-dark-shadow-primary);
}

/* AI Message Hover Border Animation */
.ai-message::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: aqua;
  z-index: -1;
  border-radius: 8px;
  border: none;
  transition: left 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.ai-message:hover::before {
  background: linear-gradient(-165deg transparent, rgba(192, 191, 191, 0.6), transparent);
}

/* AI Messages - Hover effects with theme awareness */
.ai-message:hover {
  transform: translateY(-1px);
  box-shadow: var(--ai-shadow-primary);
  border-color: var(--ai-border-secondary);
}

[data-theme="light"] .ai-message:hover {
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.15), 0 2px 8px rgba(15, 23, 42, 0.1);
}

[data-theme="dark"] .ai-message:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(52, 73, 94, 0.3);
}

/* User Message Hover - theme aware */
.ai-message.ai-user:hover {
  border-color: var(--ai-accent-peace);
  transform: translateY(-1px);
}

/* Flat AI Response Styling for Desktop (1024px and wider) - No Box Appearance */
@media (min-width: 1025px) {
  /* Make AI assistant responses completely flat - remove all box styling */
  .ai-message:not(.ai-user) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
    border-radius: 0 !important;
  }
  
  /* Remove hover effects for AI responses on desktop */
  .ai-message:not(.ai-user):hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  
  /* Remove the border animation pseudo-element for AI responses */
  .ai-message:not(.ai-user)::before {
    display: none !important;
  }
  
  /* Ensure AI message content is completely flat */
  .ai-message:not(.ai-user) .ai-message-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  
  /* Override theme-specific styling for AI responses */
  html[data-theme="light"] .ai-message:not(.ai-user),
  [data-theme="light"] .ai-message:not(.ai-user) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  html[data-theme="dark"] .ai-message:not(.ai-user),
  [data-theme="dark"] .ai-message:not(.ai-user) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  /* Override hover effects for both themes */
  [data-theme="light"] .ai-message:not(.ai-user):hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  
  [data-theme="dark"] .ai-message:not(.ai-user):hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  
  /* Keep user messages styled normally (with boxes) on desktop */
  .ai-message.ai-user {
    background: var(--ai-bg-user-message) !important;
    border: 1px solid var(--ai-border-primary) !important;
    box-shadow: var(--ai-shadow-primary) !important;
    padding: 16px !important;
    border-radius: 12px !important;
  }
}

/* User Message Styling - Right-aligned with faint purple background */
.ai-message.ai-user {
  margin-left: auto;
  margin-right: 0;
  max-width: 85%;
  text-align: right;
  background: rgba(167, 139, 250, 0.08) !important;
  border: 1px solid rgba(167, 139, 250, 0.2) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.08) !important;
}

.ai-message.ai-user .ai-message-content {
  text-align: right;
  direction: ltr;
}

.ai-message.ai-user strong {
  color: rgba(109, 40, 217, 0.9);
}

/* Dark theme user messages */
[data-theme="dark"] .ai-message.ai-user {
  background: rgba(167, 139, 250, 0.12) !important;
  border: 1px solid rgba(167, 139, 250, 0.25) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15) !important;
}

[data-theme="dark"] .ai-message.ai-user strong {
  color: rgba(196, 181, 253, 0.95);
}

/* User message hover effect */
.ai-message.ai-user:hover {
  background: rgba(167, 139, 250, 0.12) !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12) !important;
}

[data-theme="dark"] .ai-message.ai-user:hover {
  background: rgba(167, 139, 250, 0.16) !important;
  border-color: rgba(167, 139, 250, 0.35) !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2) !important;
}

/* Theme Toggle Button */
.ai-theme-toggle {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid var(--ai-border-primary);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 14px;
  color: var(--ai-text-secondary);
}

.ai-theme-toggle:hover {
  background: var(--ai-border-primary);
  border-color: var(--ai-border-secondary);
  color: var(--ai-text-primary);
  transform: translateY(-50%) scale(1.1);
}

.ai-theme-toggle:active {
  transform: translateY(-50%) scale(0.95);
}

/* Icons for theme toggle */
.ai-theme-toggle .sun-icon {
  display: none;
}

.ai-theme-toggle .moon-icon {
  display: block;
}

[data-theme="light"] .ai-theme-toggle .sun-icon {
  display: block;
}

[data-theme="light"] .ai-theme-toggle .moon-icon {
  display: none;
}



.ai-message-content {
  color: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ai-message-content strong {
  font-weight: 500;
}

[data-theme="light"] .ai-message-content strong {
  color: #2d1e2f;
}

[data-theme="dark"] .ai-message-content strong {
  color: #f8fafc;
}
/* Typing Animation */
.typing-cursor {
  color: #ffffff;
  font-weight: bold;
  margin-left: 2px;
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* Formatted AI Response Styling */
.ai-message-content .study-point {
  background: rgba(59, 130, 246, 0.1);
  border-left: 3px solid #3b82f6;
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 4px;
  font-size: 14px;
}

.ai-message-content .cross-reference {
  background: rgba(34, 197, 94, 0.1);
  border-left: 3px solid #22c55e;
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 4px;
  font-size: 14px;
}

.ai-message-content .practical-application {
  background: rgba(245, 158, 11, 0.1);
  border-left: 3px solid #f59e0b;
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 4px;
  font-size: 14px;
}

.ai-message-content p {
  margin: 12px 0;
  line-height: 1.75;
  font-size: 1rem;
}

.ai-message-content p:first-child {
  margin-top: 0;
}

.ai-message-content p:last-child {
  margin-bottom: 0;
}

/* Enhanced AI Response Formatting - Theme Aware */
.ai-message-content .ai-bold {
  color: var(--ai-accent-wisdom);
  font-weight: 600;
  text-shadow: 0 0 2px rgba(251, 191, 36, 0.3);
}

.ai-message-content .ai-italic {
  color: var(--ai-accent-peace);
  font-style: italic;
  background: rgba(59, 130, 246, 0.1);
  padding: 2px 4px;
  border-radius: 3px;
}

.ai-message-content .ai-bullet-item::before {
  content: "•";
  color: var(--ai-accent-peace);
  font-weight: bold;
  position: absolute;
  left: 0;
  font-size: 16px;
}

.ai-message-content .ai-prayer {
  background: rgba(184, 117, 218, 0.03);
  padding: 12px 16px;
  margin: 12px 0;
  border-radius: 4px;
  font-style: italic;
  color: var(--ai-text-primary);
  position: relative;
}

.ai-message-content .ai-paragraph {
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 6px;
  line-height: 1.75;
  font-size: 1rem;
  color: var(--ai-text-primary);
}

[data-theme="dark"] .ai-message-content .ai-paragraph {
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid rgba(255, 255, 255, 0.15);
  color: var(--ai-text-primary);
}

.ai-message-content .ai-verse-reference {
  background: rgba(0, 0, 0, 0.03);
  border-left: 2px solid rgba(0, 0, 0, 0.12);
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 4px;
  font-size: 13px;
  color: var(--ai-text-primary);
}

.ai-message-content .prayer-label,
.ai-message-content .application-label,
.ai-message-content .cross-ref-label {
  font-weight: 600;
  color: var(--ai-accent-wisdom);
  margin-right: 8px;
}

/* Welcome title when chat is empty */
.ai-welcome-title {
  text-align: center;
  padding: 40px 20px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
  border: none;
  background: none;
  margin-bottom: 20px;
}



.ai-welcome-subtitle {
  text-align: center;
  color: #8b949e;
  font-size: 14px;
  font-weight: 400;
  margin-top: -15px;
  margin-bottom: 30px;
}

/* Welcome Message Section */
.ai-welcome-message {
  padding: 20px;
  text-align: center;
  margin: 15px;
  background: var(--ai-bg-message);
  border-radius: 12px;
  border: 1px solid var(--ai-border-primary);
}

/* Ensure welcome message responds to theme changes */
html[data-theme="light"] .ai-welcome-message,
[data-theme="light"] .ai-welcome-message {
  background: var(--ai-light-bg-message);
  border-color: var(--ai-light-border-primary);
}

html[data-theme="dark"] .ai-welcome-message,
[data-theme="dark"] .ai-welcome-message {
  background: var(--ai-dark-bg-message);
  border-color: var(--ai-dark-border-primary);
}

.welcome-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.3;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

[data-theme="light"] .welcome-title{
    color: #2d1e2f;
}

[data-theme="dark"] .welcome-title{
    color: #f8fafc;
}

.welcome-subtitle {
  font-size: 14px;
  color: #cbd5e0;
  line-height: 1.4;
  opacity: 0.9;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
}

[data-theme="light"] .welcome-subtitle{
    color: #5e5873;
}

[data-theme="dark"] .welcome-subtitle{
    color: #e2e8f0;
}

/* Hide welcome message when there are active conversations OR when study prompts are visible */
.ai-messages:not(:empty) ~ .ai-input-section .ai-welcome-message,
.ai-messages.has-messages + .ai-welcome-message,
.study-prompts-section:not(.hidden) + .ai-welcome-message {
  display: none;
}

/* AI Input Section - Base Styles */
.ai-input-section {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-top: auto;
  padding: 0;
  background: transparent;
  border: none;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

/* Light theme AI input section background - spiritual theme integration */
html[data-theme="light"] .ai-input-section,
[data-theme="light"] .ai-input-section {
  background: linear-gradient(135deg, #F9F7F4 0%, #F5F2ED 100%);
  padding: 16px;
  border-radius: 8px;
  margin: 16px;
  border: 1px solid rgba(107, 69, 150, 0.15);
  box-shadow: 0 2px 8px rgba(107, 69, 150, 0.08);
}

/* Dark theme AI input section background */
html[data-theme="dark"] .ai-input-section,
[data-theme="dark"] .ai-input-section {
  background: linear-gradient(135deg, #1c1f26 0%, #1a1d23 100%);
  padding: 16px;
  border-radius: 8px;
  margin: 16px;
  border: 1px solid rgba(42, 45, 51, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ai-input-section textarea {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--ai-border-primary);
  border-radius: 6px;
  background: var(--ai-bg-message);
  color: var(--ai-text-primary);
  font-size: 14px;
  resize: none;
  outline: none;
  transition: all 0.2s ease;
  font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  min-height: 44px;
  max-height: 120px;
}

/* Ensure textarea responds to theme changes */
html[data-theme="light"] .ai-input-section textarea,
[data-theme="light"] .ai-input-section textarea {
  background: var(--ai-light-bg-message);
  border-color: var(--ai-light-border-primary);
  color: var(--ai-light-text-primary);
}

html[data-theme="dark"] .ai-input-section textarea,
[data-theme="dark"] .ai-input-section textarea {
  background: var(--ai-dark-bg-message);
  border-color: var(--ai-dark-border-primary);
  color: var(--ai-dark-text-primary);
}

.ai-input-section textarea::placeholder {
  color: var(--ai-text-muted);
}

/* Ensure placeholder text responds to theme changes */
html[data-theme="light"] .ai-input-section textarea::placeholder,
[data-theme="light"] .ai-input-section textarea::placeholder {
  color: var(--ai-light-text-muted);
}

html[data-theme="dark"] .ai-input-section textarea::placeholder,
[data-theme="dark"] .ai-input-section textarea::placeholder {
  color: var(--ai-dark-text-muted);
}

.ai-input-section textarea:focus {
  border-color: var(--ai-accent-peace);
  outline: 2px solid var(--ai-accent-peace);
  outline-offset: -1px;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Ensure focus states respond to theme changes */
html[data-theme="light"] .ai-input-section textarea:focus,
[data-theme="light"] .ai-input-section textarea:focus {
  border-color: var(--ai-light-accent-peace);
  outline-color: var(--ai-light-accent-peace);
  box-shadow: 0 0 0 3px rgba(107, 69, 150, 0.1);
}

html[data-theme="dark"] .ai-input-section textarea:focus,
[data-theme="dark"] .ai-input-section textarea:focus {
  border-color: var(--ai-dark-accent-peace);
  outline-color: var(--ai-dark-accent-peace);
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.2);
}

/* AI Send Button */
.ai-send-btn {
  background: var(--ai-accent-peace);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
}

/* Light mode send button - Professional spiritual theme */
[data-theme="light"] .ai-send-btn {
  background: linear-gradient(135deg, #6B4596, #5B3A93);
  box-shadow: 0 2px 8px rgba(107, 69, 150, 0.3);
}

[data-theme="light"] .ai-send-btn:hover {
  background: linear-gradient(135deg, #5B3A93, #4B2E83);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(107, 69, 150, 0.4);
}

/* Dark mode send button - Professional charcoal with blue accent */
[data-theme="dark"] .ai-send-btn {
  background: linear-gradient(135deg, #93c5fd, #60a5fa);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 15px rgba(147, 197, 253, 0.2);
  color: #0f1117;
}

[data-theme="dark"] .ai-send-btn:hover {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(147, 197, 253, 0.3);
}

.ai-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--ai-text-muted);
}

.ai-send-btn.loading {
  opacity: 0.7;
}

/* Study Prompts Section */
.study-prompts-section {
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--ai-bg-secondary);
  border: 1px solid var(--ai-border-primary);
  box-shadow: var(--ai-shadow-primary);
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: relative; /* For absolute positioning of close button */
  display: flex;
  flex-direction: column;
}

/* Make study prompts scrollable for 1024-1366px range */
@media (min-width: 1024px) and (max-width: 1366px) {
  .study-prompts-section {
    max-height: 450px;
    overflow: hidden; /* Changed from visible to hidden */
  }
  
  .study-prompts-section .selected-text-info {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--ai-bg-secondary);
    margin-bottom: 12px;
  }
  
  .study-prompts-section .prompt-pills-container {
    max-height: 320px; /* Increased from 280px */
    min-height: 150px; /* Ensure minimum height */
    overflow-y: auto !important;
    overflow-x: hidden;
    padding-right: 12px; /* More space for scrollbar */
    flex: 1;
    display: block !important; /* Override flex */
  }
  
  /* Custom scrollbar for prompt pills - Make it more visible */
  .study-prompts-section .prompt-pills-container::-webkit-scrollbar {
    width: 10px; /* Wider scrollbar */
  }
  
  .study-prompts-section .prompt-pills-container::-webkit-scrollbar-track {
    background: rgba(107, 69, 150, 0.1); /* More visible track */
    border-radius: 5px;
    margin: 4px 0;
  }
  
  .study-prompts-section .prompt-pills-container::-webkit-scrollbar-thumb {
    background: rgba(107, 69, 150, 0.5); /* More visible thumb */
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  
  .study-prompts-section .prompt-pills-container::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 69, 150, 0.7); /* Darker on hover */
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  
  /* Dark theme scrollbar */
  [data-theme="dark"] .study-prompts-section .prompt-pills-container::-webkit-scrollbar-track {
    background: rgba(42, 45, 51, 0.5); /* More visible in dark mode */
  }
  
  [data-theme="dark"] .study-prompts-section .prompt-pills-container::-webkit-scrollbar-thumb {
    background: rgba(167, 139, 250, 0.5); /* More visible */
  }
  
  [data-theme="dark"] .study-prompts-section .prompt-pills-container::-webkit-scrollbar-thumb:hover {
    background: rgba(167, 139, 250, 0.7); /* Brighter on hover */
  }
  
  /* Firefox scrollbar */
  .study-prompts-section .prompt-pills-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 69, 150, 0.5) rgba(107, 69, 150, 0.1);
  }
  
  [data-theme="dark"] .study-prompts-section .prompt-pills-container {
    scrollbar-color: rgba(167, 139, 250, 0.5) rgba(42, 45, 51, 0.5);
  }
  
  /* Hide the type badges (WORD STUDY, CULTURAL CONTEXT, etc.) for better visibility */
  .study-prompts-section .prompt-type-badge {
    display: none !important;
  }
  
  /* Make prompt pills more compact without badges */
  .study-prompts-section .prompt-pill {
    padding: 0.7rem 1rem;
  }
}

/* Ensure study prompts section responds to theme changes */
html[data-theme="light"] .study-prompts-section,
[data-theme="light"] .study-prompts-section {
  background: var(--ai-light-bg-secondary);
  border-color: var(--ai-light-border-primary);
  box-shadow: var(--ai-light-shadow-primary);
}

html[data-theme="dark"] .study-prompts-section,
[data-theme="dark"] .study-prompts-section {
  background: var(--ai-dark-bg-secondary);
  border-color: var(--ai-dark-border-primary);
  box-shadow: var(--ai-dark-shadow-primary);
}

/* Close button for study prompts section */
.close-prompts-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(107, 114, 128, 0.1);
  border: none;
  border-radius: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-secondary, #6b7280);
  z-index: 10;
}

.close-prompts-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error-color, #ef4444);
  transform: scale(1.1);
}

.close-prompts-btn:active {
  transform: scale(0.95);
}

/* Dark mode styles for close button */
[data-theme="dark"] .close-prompts-btn {
  background: rgba(156, 163, 175, 0.15);
  color: var(--text-secondary-dark, #9ca3af);
}

[data-theme="dark"] .close-prompts-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: var(--error-color-dark, #f87171);
}

/* Focus state for accessibility */
.close-prompts-btn:focus {
  outline: 2px solid var(--accent-color, #6366f1);
  outline-offset: 2px;
}

/* Better centering for study prompts on mobile/tablet */
@media (max-width: 1023px) {
  .study-prompts-section {
    text-align: center; /* Center the section content */
    padding: 1.2rem; /* Slightly reduced padding for mobile */
  }
  
  .selected-text-info {
    text-align: center; /* Center the selected text info */
  }
}

.study-prompts-section.reappearing {
  animation: promptsReappear 0.4s ease-out;
}

.study-prompts-section.hiding {
  opacity: 0;
  transform: translateY(-10px);
}

.selected-text-info {
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--ai-bg-message);
  border-radius: 8px;
  border: 1px solid var(--ai-border-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
}

/* Ensure selected text info responds to theme changes */
html[data-theme="light"] .selected-text-info,
[data-theme="light"] .selected-text-info {
  background: var(--ai-light-bg-message);
  border-color: var(--ai-light-border-primary);
  color: var(--ai-light-text-primary);
}

html[data-theme="dark"] .selected-text-info,
[data-theme="dark"] .selected-text-info {
  background: var(--ai-dark-bg-message);
  border-color: var(--ai-dark-border-primary);
  color: var(--ai-dark-text-primary);
}

.selected-text-info strong {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
  letter-spacing: 0.5px;
  opacity: 0.9;
}



/* Selected Text Preview */
.selected-text-preview {
  color: var(--ai-text-muted);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  opacity: 0.9;
}

/* Ensure selected text preview responds to theme changes */
html[data-theme="light"] .selected-text-preview,
[data-theme="light"] .selected-text-preview {
  color: var(--ai-light-text-muted);
}

html[data-theme="dark"] .selected-text-preview,
[data-theme="dark"] .selected-text-preview {
  color: var(--ai-dark-text-muted);
}

/* Prompt Pills Container */
.prompt-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1rem;
  transition: opacity 0.3s ease;
}

/* Vertical layout for scrollable area in 1024-1366px range */
@media (min-width: 1024px) and (max-width: 1366px) {
  .study-prompts-section .prompt-pills-container {
    flex-direction: column;
    gap: 1rem; /* Increased from 0.6rem for better spacing */
    margin-bottom: 0;
  }
  
  .study-prompts-section .prompt-pill {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Better centering for mobile/tablet when prompts fit in viewport */
@media (max-width: 1023px) {
  .prompt-pills-container {
    justify-content: center; /* Center when prompts fit */
  }
  
  /* When scrollable, align to start for better scroll UX */
  .prompt-pills-container.scrollable {
    justify-content: flex-start;
  }
}

.prompt-pills-container.dimmed {
  opacity: 0.5;
}

.prompt-pills-container.dimmed .prompt-pill {
  opacity: 1 !important;
  visibility: visible !important;
}

.study-prompts-section.hiding .prompt-pill {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Individual Prompt Pills */
.prompt-pill {
  background: var(--ai-bg-message);
  color: var(--ai-text-primary);
  border: 1px solid var(--ai-border-primary);
  padding: 0.6rem 1rem;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.8rem;
  font-weight: 500;
  box-shadow: var(--ai-shadow-primary);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  word-wrap: break-word;
  line-height: 1.3;
  min-height: auto;
  animation: slideInUp 0.4s ease-out;
  flex-wrap: wrap;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
}

/* Light mode prompt pills - Professional spiritual theme */
[data-theme="light"] .prompt-pill {
  background: linear-gradient(135deg, #FFFFFF, #F9F7F4);
  border: 1px solid rgba(107, 69, 150, 0.2);
  box-shadow: 0 2px 8px rgba(107, 69, 150, 0.1);
}

[data-theme="light"] .prompt-pill:hover {
  background: linear-gradient(135deg, #6B4596, #5B3A93);
  color: white;
  transform: translateY(-2px);
  border-color: #6B4596;
  box-shadow: 0 4px 12px rgba(107, 69, 150, 0.3);
}

/* Dark mode prompt pills - Professional charcoal theme */
[data-theme="dark"] .prompt-pill {
  background: linear-gradient(135deg, #16191f, #1a1d23);
  border: 1px solid rgba(42, 45, 51, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(42, 45, 51, 0.1);
}

[data-theme="dark"] .prompt-pill:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #ffffff;
  transform: translateY(-2px);
  border-color: #8b5cf6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 92, 246, 0.3);
}

.prompt-pill:active {
  transform: translateY(0);
}

.prompt-pill.selected {
  background: var(--ai-accent-peace);
  color: white;
  border-color: var(--ai-accent-peace);
  transform: translateY(-2px);
}

[data-theme="light"] .prompt-pill.selected {
  background: linear-gradient(135deg, #5B3A93, #4B2E83);
  box-shadow: 0 4px 12px rgba(91, 58, 147, 0.4);
}

[data-theme="dark"] .prompt-pill.selected {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: #0f1117;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 25px rgba(96, 165, 250, 0.4);
}

.prompt-pill.selected .prompt-pill-icon {
  opacity: 1;
}

.prompt-pill.selected .prompt-type-badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Prompt pill components */
.prompt-pill-icon {
  font-size: 0.9rem;
  opacity: 0.8;
  flex-shrink: 0;
}

.prompt-pill-text {
  flex: 1;
  white-space: normal;
  word-break: break-word;
  -webkit-hyphens: auto; /* Safari */
  -ms-hyphens: auto;     /* IE */
  hyphens: auto;         /* Standard */
  text-align: left;
  font-weight: 500;
  font-size: 0.8rem;
}

.prompt-type-badge {
  padding: 0.2rem 0.4rem;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 500;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

[data-theme="light"] .prompt-type-badge{
  color: #5e5873;
  background: rgba(107, 69, 150, 0.1);
}

[data-theme="dark"] .prompt-type-badge{
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.1);
}

/* Staggered animation delays for prompt pills */
.prompt-pill:nth-child(1) { animation-delay: 0.1s; }
.prompt-pill:nth-child(2) { animation-delay: 0.2s; }
.prompt-pill:nth-child(3) { animation-delay: 0.3s; }
.prompt-pill:nth-child(4) { animation-delay: 0.4s; }
.prompt-pill:nth-child(5) { animation-delay: 0.5s; }

/* Error Message Styling */
.error-message {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0;
  color: #dc2626;
}

.error-message i {
  margin-right: 8px;
  color: #ef4444;
}

/* Loading Animation */
.ai-loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #404040;
  border-radius: 50%;
  border-top-color: #e1e4e8;
  animation: spin 1s ease-in-out infinite;
}

.prompts-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: #64748b;
  font-size: 0.9rem;
}

/* Enhanced focus states for accessibility */
.ai-input-section textarea:focus,
.ai-send-btn:focus,
.prompt-pill:focus,
.ai-toggle-btn:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Bottom action buttons like in GitHub Copilot */
.ai-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding: 0 20px;
}

.ai-action-btn {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 6px;
  padding: 12px 16px;
  color: #e1e4e8;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-action-btn:hover {
  background: #404040;
  border-color: #555555;
}

/* Regenerate Prompts Button */
.regenerate-prompts-section {
  padding: 12px 16px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}

/* Hide regenerate button on desktop devices (>1024px) - auto-generate instead */
@media (min-width: 1024px) {
  .regenerate-prompts-section {
    display: none !important;
  }
}

.regenerate-prompts-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.regenerate-prompts-btn:hover {
  background: linear-gradient(135deg, #333333 0%, #222222 100%);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.regenerate-prompts-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.regenerate-prompts-btn svg {
  animation: rotate 0.3s ease;
}

.regenerate-prompts-btn:hover svg {
  animation: rotate 0.5s ease;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Generate Prompts Button */
.generate-prompts-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  margin: 12px 0;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
  position: relative;
  overflow: hidden;
}

.generate-prompts-btn:hover {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
}

.generate-prompts-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

.generate-prompts-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  box-shadow: none;
}

.generate-prompts-btn svg {
  transition: transform 0.2s ease;
}

.generate-prompts-btn:hover svg {
  transform: scale(1.1);
}

.generate-prompts-btn .ai-loading {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Hide button by default */
.generate-prompts-btn.hidden {
  display: none;
}

/* Light theme adjustments for generate button */
html[data-theme="light"] .generate-prompts-btn {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: white;
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
}

html[data-theme="light"] .generate-prompts-btn:hover {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
}

/* Enhanced responsive breakpoint for AI chat panel positioning */
@media (max-width: 1023px) {
  .ai-chat-panel {
    position: fixed;
    top: auto;
    bottom: -100vh; /* Completely hidden by default */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(calc(100vw - 60px), 500px);
    height: auto;
    min-height: 120px;
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
                bottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
                height 0.3s ease, 
                width 0.3s ease;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    resize: none; /* Disable default resize to prevent conflicts */
    overflow: hidden;
    z-index: 1050;
  }

  /* Enhanced resize handle for mobile/tablet users */
  .ai-chat-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 20px;
    background: transparent;
    cursor: ns-resize;
    z-index: 1060;
  }

  /* When not active, panel slides down and away */
  .ai-chat-panel:not(.active) {
    bottom: -100vh;
    left: -100vw !important; /* Force off-screen to prevent resize visibility */
    transform: translateX(0) translateY(0) !important; /* Reset transform */
    opacity: 0;
    pointer-events: none;
  }

  /* When active, panel slides up from bottom center */  
  .ai-chat-panel.active {
    bottom: 0;
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
    animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  /* When verses are selected, auto-expand the panel height - optimized for content visibility */
  .ai-chat-panel.expanded {
    height: min(75vh, 450px); /* Smart expansion - not too high */
    min-height: 350px;
  }

  /* Compact mode - show only input area initially, but always show messages if they exist */
  .ai-chat-panel:not(.expanded) .ai-messages:empty {
    display: none; /* Only hide messages when container is empty */
  }
  
  /* Ensure messages are visible when they exist, even in compact mode */
  .ai-chat-panel:not(.expanded) .ai-messages:not(:empty) {
    display: block; /* Always show messages when they exist */
    max-height: 200px; /* Limit height in compact mode */
    overflow-y: auto; /* Allow scrolling for longer conversations */
  }

  .ai-chat-panel:not(.expanded) .study-prompts-section {
    display: block; /* Keep prompts visible even in compact mode */
  }

  /* Sidebar responsiveness - simplified since panel is now centered */
  /* Remove sidebar-specific positioning since panel is centered */
  
  /* For all screen sizes, keep panel centered */
  @media (min-width: 1024px) {
    .ai-chat-panel {
      width: min(calc(100vw - 200px), 600px); /* Slightly wider on larger tablets */
    }
  }

  /* For smaller screens, keep more compact */
  @media (max-width: 1023px) {
    .ai-chat-panel {
      width: min(calc(100vw - 60px), 450px);
    }
  }

  .ai-toggle-btn {
    position: fixed;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    bottom: auto;
    border-radius: 50%;
    z-index: 1052;
  }

  /* Hide welcome text and AI assistant header on smaller screens */
  .ai-welcome-title,
  .ai-welcome-subtitle,
  .ai-welcome-message {
    display: none;
  }

  /* Keep header minimal but visible for drag handle */
  .ai-chat-header h3 {
    display: none;
  }

  /* Adjust header for compact view - theme responsive */
  .ai-chat-header {
    padding: 8px 16px;
    min-height: 40px;
    background: var(--ai-bg-header);
    border-bottom: 1px solid var(--ai-border-primary);
    flex-shrink: 0;
    position: relative;
    cursor: grab;
  }

  /* Theme-responsive mobile header styling */
  html[data-theme="light"] .ai-chat-header,
  [data-theme="light"] .ai-chat-header {
    background: var(--ai-light-bg-header);
    border-bottom-color: var(--ai-light-border-primary);
  }

  html[data-theme="dark"] .ai-chat-header,
  [data-theme="dark"] .ai-chat-header {
    background: var(--ai-dark-bg-header);
    border-bottom-color: var(--ai-dark-border-primary);
  }

  .ai-chat-header:active {
    cursor: grabbing;
  }

  /* Add a more prominent drag handle indicator */
  .ai-chat-header::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 6px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  /* More compact content area */
  .ai-chat-content {
    padding: 12px 16px;
    flex: 1;
    overflow: hidden;
  }

  .ai-messages {
    margin-bottom: 12px;
    flex: 1;
    overflow-y: auto;
  }

  .ai-message {
    padding: 12px;
    font-size: 0.9rem;
    margin-bottom: 12px;
    border-radius: 16px;
  }

  .ai-input-section {
    padding: 0;
    gap: 8px;
    flex-shrink: 0;
    margin-top: 12px;
  }

  .ai-input-section textarea {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 1rem;
    border-radius: 12px;
    border: 2px solid var(--ai-border-primary);
    background: var(--ai-bg-message);
  }

  .ai-input-section textarea::placeholder {
    color: var(--ai-text-muted);
    font-size: 1rem;
    content: "Ask anything about the Bible...";
  }

  .ai-send-btn {
    padding: 12px 16px;
    min-width: 60px;
    font-size: 1rem;
    border-radius: 12px;
    background: var(--ai-accent-peace);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }

  /* Horizontal layout for prompt pills on mobile/tablet */
  .prompt-pills-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    overflow-x: auto;
    padding: 8px 16px 16px 16px; /* Increased left/right padding for better centering */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    position: relative;
    scroll-behavior: smooth; /* Smooth scrolling */
    justify-content: flex-start; /* Start from left but allow scrolling */
    /* Add gradient fade-out effect on edges */
    mask-image: linear-gradient(
      to right,
      transparent 0px,
      black 24px,
      black calc(100% - 24px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0px,
      black 24px,
      black calc(100% - 24px),
      transparent 100%
    );
  }

  .prompt-pills-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
  }

  /* Add scroll indicators on the sides */
  .prompt-pills-container::before,
  .prompt-pills-container::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ai-accent-peace);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
  }

  .prompt-pills-container::before {
    left: -10px;
    box-shadow: inset 3px 0 5px rgba(255, 255, 255, 0.3);
    opacity: var(--scroll-left-opacity, 0);
  }

  .prompt-pills-container::after {
    right: -10px;
    box-shadow: inset -3px 0 5px rgba(255, 255, 255, 0.3);
    opacity: var(--scroll-right-opacity, 0);
  }

  /* Show scroll indicators when scrollable */
  .prompt-pills-container.scrollable::before,
  .prompt-pills-container.scrollable::after {
    opacity: 0.6;
    animation: pulse-scroll-hint 2s infinite;
  }

  .prompt-pills-container.scrollable::before {
    opacity: var(--scroll-left-opacity, 0.6);
  }

  .prompt-pills-container.scrollable::after {
    opacity: var(--scroll-right-opacity, 0.6);
  }

  @keyframes pulse-scroll-hint {
    0%, 100% { 
      opacity: 0.4; 
      transform: translateY(-50%) scale(1);
    }
    50% { 
      opacity: 0.8; 
      transform: translateY(-50%) scale(1.1);
    }
  }

  /* Scroll indicator dots */
  .prompt-scroll-indicator {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 0.8rem;
    padding: 4px 0;
  }

  .scroll-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ai-text-muted);
    opacity: 0.4;
    transition: all 0.3s ease;
  }

  .scroll-dot.active {
    background: var(--ai-accent-peace);
    opacity: 1;
    transform: scale(1.2);
  }

  .scroll-dot.has-more {
    background: var(--ai-accent-wisdom);
    opacity: 0.7;
    animation: pulse-dot 2s infinite;
  }

  @keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; }
  }

  .prompt-pill {
    font-size: 0.8rem;
    padding: 0.6rem 1rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: auto;
    background: var(--ai-bg-message);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother transition */
    cursor: pointer;
    user-select: none;-webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+ */
    user-select: none;         /* Standard */
    /* Add subtle border for better definition */
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .prompt-pill:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  /* Add touch feedback for mobile */
  .prompt-pill:active {
    transform: translateY(-1px) scale(0.98);
    transition: all 0.1s ease;
  }

  .selected-text-info {
    font-size: 0.9rem;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--ai-bg-message);
    border: 1px solid var(--ai-border-primary);
  }

  /* Theme-responsive mobile selected text info styling */
  html[data-theme="light"] .selected-text-info,
  [data-theme="light"] .selected-text-info {
    background: var(--ai-light-bg-message);
    border-color: var(--ai-light-border-primary);
  }

  html[data-theme="dark"] .selected-text-info,
  [data-theme="dark"] .selected-text-info {
    background: var(--ai-dark-bg-message);
    border-color: var(--ai-dark-border-primary);
  }

  .selected-text-info strong {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .selected-text-preview {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  /* Make study prompts section more compact but elegant - theme responsive */
  .study-prompts-section {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 16px;
    background: var(--ai-bg-secondary);
    border: 1px solid var(--ai-border-primary);
    position: relative;
  }

  /* Theme-responsive mobile study prompts styling */
  html[data-theme="light"] .study-prompts-section,
  [data-theme="light"] .study-prompts-section {
    background: var(--ai-light-bg-secondary);
    border-color: var(--ai-light-border-primary);
  }

  html[data-theme="dark"] .study-prompts-section,
  [data-theme="dark"] .study-prompts-section {
    background: var(--ai-dark-bg-secondary);
    border-color: var(--ai-dark-border-primary);
  }

  /* Add scroll hint for prompts */
  .study-prompts-section::after {
    content: '👈 Swipe to see more prompts 👉';
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: var(--ai-text-muted);
    opacity: 0.8;
    margin-top: 0.5rem;
    animation: fade-hint 3s ease-in-out infinite;
    font-style: italic;
  }

  @keyframes fade-hint {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
  }

  /* Hide hint when prompts are not scrollable or after interaction */
  .study-prompts-section.no-scroll::after {
    display: none;
  }

  /* Ensure content doesn't shift with bottom panel - panel is now centered */
  .bible-main-content {
    margin-right: 0 !important;
  }

  /* Override any layout margin adjustments for AI panel */
  body.ai-panel-open .bible-main-content {
    margin-right: 0 !important;
  }
}

/* Tablet range - ensure sidebar responsiveness */
@media (min-width: 769px) and (max-width: 1023px) {
  .ai-chat-panel {
    min-height: 140px; /* Slightly larger for tablets */
    border-radius: 24px 24px 0 0;
    width: min(calc(100vw - 80px), 750px); /* Wider for tablets */
  }

  .ai-chat-panel.expanded {
    height: min(70vh, 500px); /* Better tablet expansion */
    min-height: 380px;
  }

  /* Enhanced drag handle for tablets */
  .ai-chat-header::before {
    width: 80px;
    height: 8px;
    top: 14px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  /* Make the header draggable for height adjustment */
  .ai-chat-header {
    cursor: ns-resize;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+ */
  user-select: none;         /* Standard */

  }

  .ai-chat-header:hover::before {
    background: rgba(255, 255, 255, 0.7);
  }

  /* Add visual indicator for scrollable prompts */
  .prompt-pills-scroll-hint {
    position: relative;
  }

  .prompt-pills-scroll-hint::after {
    content: '← Scroll to see more prompts →';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: var(--ai-text-muted);
    opacity: 0.8;
    white-space: nowrap;
    animation: fade-in-out 3s infinite;
  }

  @keyframes fade-in-out {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
  }

  /* Enhanced Orientation-Specific Responsive Design for AI Chat */



  /* Tablet Landscape - Optimized for horizontal reading while chatting */
  @media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .ai-chat-panel {
      position: fixed;
      bottom: 0;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      width: min(calc(100vw - 60px), 580px);
      max-height: 75vh; /* Use landscape space efficiently */
      min-height: 140px;
      border-radius: 20px 20px 0 0;
    }
    
    .ai-chat-panel:not(.active) {
      bottom: -100vh;
      left: -100vw !important; /* Force off-screen to prevent resize visibility */
      transform: translateX(0) translateY(0) !important; /* Reset transform */
      opacity: 0;
      pointer-events: none;
    }
    
    .ai-chat-panel.active {
      bottom: 0;
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      pointer-events: auto;
      animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    
    .ai-chat-panel.expanded {
      height: min(65vh, 420px);
      min-height: 340px;
      left: 50%;
      transform: translateX(-50%);
    }
    
    /* Compact header for landscape */
    .ai-chat-header {
      padding: 6px 16px;
      min-height: 36px;
    }
    
    .ai-chat-header::before {
      width: 70px;
      height: 6px;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  /* Tablet Portrait - Taller layout for better content viewing */
  @media (min-width: 768px) and (max-width: 1365px) and (orientation: portrait) {
    .ai-chat-panel {
      position: fixed;
      bottom: 0;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      width: min(calc(100vw - 50px), 520px);
      max-height: 80vh; /* Use more vertical space in portrait */
      min-height: 160px;
      border-radius: 20px 20px 0 0;
    }
    
    .ai-chat-panel:not(.active) {
      bottom: -100vh;
      left: -100vw !important; /* Force off-screen to prevent resize visibility */
      transform: translateX(0) translateY(0) !important; /* Reset transform */
      opacity: 0;
      pointer-events: none;
    }
    
    .ai-chat-panel.active {
      bottom: 0;
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      pointer-events: auto;
      animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    
    .ai-chat-panel.expanded {
      height: min(75vh, 520px);
      min-height: 400px;
      left: 50%;
      transform: translateX(-50%);
    }
    
    /* Enhanced header for portrait mode */
    .ai-chat-header {
      padding: 10px 18px;
      min-height: 44px;
    }
    
    .ai-chat-header::before {
      width: 75px;
      height: 7px;
      top: 15px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  /* Mobile Landscape - Compact but functional */
  @media (max-width: 767px) and (orientation: landscape) {
    .ai-chat-panel {
      position: fixed;
      bottom: 0;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      width: min(calc(100vw - 40px), 480px);
      max-height: 65vh; /* Conservative height for landscape */
      min-height: 110px;
      border-radius: 20px 20px 0 0;
    }
    
    .ai-chat-panel:not(.active) {
      bottom: -100vh;
      left: -100vw !important; /* Force off-screen to prevent resize visibility */
      transform: translateX(0) translateY(0) !important; /* Reset transform */
      opacity: 0;
      pointer-events: none;
    }
    
    .ai-chat-panel.active {
      bottom: 0;
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      pointer-events: auto;
      animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    
    .ai-chat-panel.expanded {
      height: min(60vh, 360px);
      min-height: 280px;
      left: 50%;
      transform: translateX(-50%);
    }
    
    /* Very compact header for mobile landscape */
    .ai-chat-header {
      padding: 4px 14px;
      min-height: 32px;
    }
    
    .ai-chat-header::before {
      width: 45px;
      height: 4px;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
    }
    
    /* Compact content spacing */
    .ai-chat-content {
      padding: 8px 14px;
    }
    
    .ai-message {
      padding: 8px;
      font-size: 0.8rem;
      margin-bottom: 8px;
      border-radius: 12px;
    }
  }

  /* Animation for scroll hints */
  @keyframes fade-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
  }

  /* Better spacing for tablet inputs */
  .ai-input-section textarea {
    min-height: 52px;
    font-size: 1.1rem;
  }

  .ai-send-btn {
    font-size: 1.1rem;
    padding: 14px 18px;
  }

  /* Horizontal scroll for prompts with better spacing and centering on tablets */
  .prompt-pills-container {
    gap: 0.8rem;
    padding: 10px 24px 16px 24px; /* Enhanced padding for tablet centering */
    justify-content: center; /* Center prompts when they fit in view */
    /* Enhanced gradient fade for tablets */
    mask-image: linear-gradient(
      to right,
      transparent 0px,
      black 32px,
      black calc(100% - 32px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0px,
      black 32px,
      black calc(100% - 32px),
      transparent 100%
    );
  }

  .prompt-pill {
    font-size: 0.85rem; /* Slightly larger for tablets */
    padding: 0.7rem 1.1rem; /* Increased padding for better touch targets */
    scroll-snap-align: center; /* Center alignment when scrolling */
    flex-shrink: 0; /* Maintain pill sizes */
    border-radius: 22px;
    /* Enhanced touch target for tablets */
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Enhanced scroll hint for tablets */
  .study-prompts-section::after {
    content: '👈 Swipe horizontally to explore more prompts 👉';
    font-size: 0.8rem;
    margin-top: 0.8rem;
    padding: 8px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(59, 130, 246, 0.2);
  }

  /* Scroll indicator adjustments for tablets */
  .scroll-dot {
    width: 8px;
    height: 8px;
  }
}

/* ============================================
   DEVICE-SPECIFIC OVERRIDES
   ============================================ */

/* iPhone SE, iPhone 12 mini, iPhone 13 mini */
@media (max-width: 428px) and (max-height: 926px) {
  .ai-chat-panel {
    width: min(calc(100vw - 30px), 380px) !important;
  }
  
  .ai-chat-panel.active {
    animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }
}

/* iPhone 14, iPhone 15 Standard sizes */
@media (min-width: 390px) and (max-width: 430px) and (max-height: 932px) {
  .ai-chat-panel {
    width: min(calc(100vw - 35px), 400px) !important;
  }
  
  .ai-chat-panel.active {
    animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }
}

/* iPhone 14 Plus, iPhone 15 Plus */
@media (min-width: 428px) and (max-width: 430px) and (min-height: 926px) {
  .ai-chat-panel {
    width: min(calc(100vw - 40px), 420px) !important;
  }
  
  .ai-chat-panel.active {
    animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }
}

/* iPad Mini Portrait */
@media (min-width: 744px) and (max-width: 768px) and (orientation: portrait) {
  .ai-chat-panel {
    width: min(calc(100vw - 50px), 500px) !important;
    max-height: 80vh !important;
  }
  
  .ai-chat-panel.active {
    animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }
}

/* iPad Mini Landscape */
@media (min-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
  .ai-chat-panel {
    width: min(calc(100vw - 60px), 600px) !important;
    max-height: 75vh !important;
  }
  
  .ai-chat-panel.active {
    animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }
}

/* iPad Air Portrait */
@media (min-width: 820px) and (max-width: 834px) and (orientation: portrait) {
  .ai-chat-panel {
    width: min(calc(100vw - 60px), 550px) !important;
    max-height: 82vh !important;
  }
  
  .ai-chat-panel.active {
    animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }
}

/* iPad Air Landscape */
@media (min-width: 1180px) and (max-width: 1194px) and (orientation: landscape) {
  .ai-chat-panel {
    width: min(calc(100vw - 70px), 650px) !important;
    max-height: 78vh !important;
  }
  
  .ai-chat-panel.active {
    animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }
}

/* iPad Pro 11" Portrait */
@media (min-width: 834px) and (max-width: 834px) and (orientation: portrait) {
  .ai-chat-panel {
    width: min(calc(100vw - 60px), 560px) !important;
    max-height: 82vh !important;
  }
  
  .ai-chat-panel.active {
    animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }
}

/* iPad Pro 11" Landscape */
@media (min-width: 1194px) and (max-width: 1194px) and (orientation: landscape) {
  .ai-chat-panel {
    width: min(calc(100vw - 70px), 660px) !important;
    max-height: 78vh !important;
  }
  
  .ai-chat-panel.active {
    animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }
}

/* iPad Pro 12.9" Portrait */
@media (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
  .ai-chat-panel {
    width: min(calc(100vw - 70px), 650px) !important;
    max-height: 85vh !important;
  }
  
  .ai-chat-panel.active {
    animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }
}


/* Ensure all tablet and mobile devices use bottom-center positioning */
@media (max-width: 1023px) {
  .ai-chat-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border-radius: 20px 20px 0 0 !important;
  }
  
  .ai-chat-panel:not(.active) {
    bottom: -100vh !important;
    left: -100vw !important; /* Force off-screen to prevent resize visibility */
    transform: translateX(0) translateY(0) !important; /* Reset transform */
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  .ai-chat-panel.active {
    bottom: 0 !important;
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }
  
  .ai-chat-panel.expanded {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* Exactly 1024px devices - Original desktop behavior */
@media (min-width: 1024px) and (max-width: 1024px) {
  .ai-chat-panel {
    position: fixed !important;
    top: 0 !important;
    right: calc(-1 * var(--ai-panel-default-width) - 30px) !important;
    bottom: auto !important;
    left: auto !important;
    width: var(--ai-panel-default-width) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3) !important;
    transition: right 0.3s ease !important;
    z-index: 1060 !important;
    transform: none !important;
  }

  .ai-chat-panel.active {
    right: 0 !important;
    bottom: auto !important;
    animation: slideInFromRight 0.3s ease !important;
  }

  .ai-toggle-btn {
    position: fixed;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    bottom: auto;
    z-index: 1070;
  }

  /* Standard behavior for 1024px devices */
  .bible-main-content {
    margin-right: 0 !important;
    transition: margin-right 0.3s ease;
  }

  body.ai-panel-open .bible-main-content {
    margin-right: var(--ai-panel-default-width) !important;
  }
}

/* Keep desktop behavior for screens larger than 1024px */
@media (min-width: 1025px) and (max-width: 1366px) {
  .ai-chat-panel {
    position: fixed !important;
    top: 0 !important;
    right: calc(-380px - 30px) !important; /* Reduced width from default */
    bottom: auto !important;
    left: auto !important;
    width: 380px !important; /* Reduced from default 450px */
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3) !important;
    transition: right 0.3s ease !important;
    z-index: 1060 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .ai-chat-panel.active {
    right: 0 !important;
    bottom: auto !important;
    animation: slideInFromRight 0.3s ease !important;
  }

  /* Ensure proper layout for panel content */
  .ai-chat-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 120px) !important; /* Reserve space for input */
    overflow: hidden !important;
  }

  /* Make messages area scrollable with fixed input */
  .ai-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px !important;
    margin-bottom: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent !important;
  }

  /* Keep input section always visible at bottom */
  .ai-input-section {
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    background: var(--ai-bg-content) !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 16px !important;
    border-top: 1px solid var(--ai-border-primary) !important;
  }

  .ai-toggle-btn {
    position: fixed;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    bottom: auto;
    z-index: 1070;
  }

  /* Show welcome text and header on larger screens */
  .ai-welcome-title,
  .ai-welcome-subtitle,
  .ai-welcome-message,
  .ai-chat-header h3 {
    display: block;
  }

  /* Allow main content to shift on mid-size desktop when AI panel is open - no gap */
  .bible-main-content {
    margin-right: 0 !important;
    transition: margin-right 0.3s ease;
  }

  /* Adjust content to be right next to AI panel with no gap for 1025px-1366px screens */
  body.ai-panel-open .bible-main-content {
    margin-right: 360px !important; /* Further reduced panel width for maximum Bible content */
  }
}

/* Large desktop behavior for screens larger than 1366px - with gap */
@media (min-width: 1367px) {
  .ai-chat-panel {
    position: fixed !important;
    top: 0 !important;
    right: calc(-1 * var(--ai-panel-default-width) - 30px) !important;
    bottom: auto !important;
    left: auto !important;
    width: var(--ai-panel-default-width) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3) !important;
    transition: right 0.3s ease !important;
    z-index: 1060 !important;
    transform: none !important; /* Reset any mobile transforms */
  }

  .ai-chat-panel.active {
    right: 0 !important;
    bottom: auto !important;
    animation: slideInFromRight 0.3s ease !important;
  }

  .ai-toggle-btn {
    position: fixed;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    bottom: auto;
    z-index: 1070;
  }

  /* Show welcome text and header on larger screens */
  .ai-welcome-title,
  .ai-welcome-subtitle,
  .ai-welcome-message,
  .ai-chat-header h3 {
    display: block;
  }

  /* Allow main content to shift on large desktop when AI panel is open - with standard gap */
  .bible-main-content {
    margin-right: 0 !important;
    transition: margin-right 0.3s ease;
  }

  /* Standard desktop behavior with gap for screens larger than 1366px */
  body.ai-panel-open .bible-main-content {
    margin-right: 420px !important; /* Standard desktop margin with gap */
  }
}

/* Mobile Portrait - Enhanced vertical layout */
@media (max-width: 768px) and (orientation: portrait) {
  .ai-chat-panel {
    position: fixed;
    bottom: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    min-height: 120px; /* Slightly taller initial height for portrait */
    max-height: 80vh; /* Use more vertical space in portrait */
    width: min(calc(100vw - 40px), 420px);
    border-radius: 20px 20px 0 0;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  }

  .ai-chat-panel:not(.active) {
    bottom: -100vh;
    transform: translateX(-50%) translateY(50px);
    opacity: 0;
    pointer-events: none;
  }

  .ai-chat-panel.active {
    bottom: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
    animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  .ai-chat-panel.expanded {
    height: min(70vh, 450px); /* Better portrait expansion */
    min-height: 360px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .ai-chat-header {
    padding: 8px 16px;
    min-height: 40px;
    position: relative;
  }

  .ai-chat-header::before {
    width: 55px;
    height: 6px;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px;
    background: var(--ai-text-secondary);
    opacity: 0.6;
  }
}

/* Mobile All Orientations - Common styles */
@media (max-width: 768px) {
/* Mobile All Orientations - Common styles */
@media (max-width: 768px) {
  /* Common mobile styles that apply to both orientations */
  .ai-toggle-btn {
    position: fixed;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    bottom: auto;
    left: auto;
    padding: 0.8rem;
    font-size: 1.2rem;
    min-height: 50px;
    min-width: 50px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    transform: none;
  }

  /* Enhanced drag handle visibility */
  .ai-chat-header::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 12px;
    background: transparent;
    border-radius: 6px;
    cursor: ns-resize;
    z-index: 10;
  }

  .ai-chat-content {
    padding: 8px 16px;
  }

  .ai-message {
    padding: 10px;
    font-size: 0.85rem;
    margin-bottom: 10px;
    border-radius: 14px;
  }

  .ai-input-section textarea {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 1rem;
    border-radius: 12px;
  }

  .ai-send-btn {
    padding: 10px 14px;
    min-width: 55px;
    font-size: 1rem;
    border-radius: 12px;
  }

  .selected-text-info {
    padding: 10px 14px;
    margin-bottom: 10px;
  }

  .selected-text-info strong {
    font-size: 0.9rem;
  }

  .selected-text-preview {
    font-size: 0.8rem;
  }

  /* Mobile horizontal prompts with touch-friendly sizing and better centering */
  .prompt-pills-container {
    gap: 0.6rem;
    padding: 12px 20px 16px 20px;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .prompt-pill {
    font-size: 0.8rem;
    padding: 0.6rem 1rem;
    border-radius: 18px;
    min-width: auto;
    flex-shrink: 0;
    scroll-snap-align: center;
    white-space: nowrap;
  }

  .study-prompts-section {
    padding: 0.8rem;
    margin-bottom: 0.8rem;
    border-radius: 14px;
    text-align: center;
  }

  /* Mobile scroll indicators */
  .scroll-dot {
    width: 5px;
    height: 5px;
  }

  .prompt-scroll-indicator {
    gap: 4px;
    margin-bottom: 0.6rem;
  }
}

/* Enhanced Tablet specific improvements (between mobile and desktop) */
@media (min-width: 769px) and (max-width: 1024px) {
  .ai-chat-panel {
    /* Center panel properly on tablets */
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 0;
    transform: translateX(-50%);
    width: min(500px, calc(100vw - 60px));
  }
  
  .ai-chat-panel.active {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  
  .ai-chat-panel:not(.active) {
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(100%);
  }
  
  /* Improved touch targets for tablet */
  .ai-chat-header {
    min-height: 44px;
    padding: 10px 18px;
  }
  
  .ai-chat-header::before {
    width: 65px;
    height: 7px;
    top: 14px;
  }
  
  .prompt-pill {
    font-size: 0.9rem;
    padding: 0.7rem 1.2rem;
    min-height: 44px; /* Touch-friendly height */
  }
  
  /* Enhanced touch interaction for tablets */
  .ai-toggle-btn:active {
    transform: scale(0.95);
  }
  
  .ai-input-section .ai-send-btn:active {
    transform: scale(0.95);
  }
}

/* Tablet-specific optimizations for enhanced AI chat experience */
.ai-chat-panel.tablet-optimized {
  /* Improved spacing for tablet touch interaction */
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ai-chat-panel.tablet-optimized .ai-chat-header {
  /* Enhanced tablet header with better touch targets */
  padding: 12px 20px;
  min-height: 48px;
  cursor: grab;
}

.ai-chat-panel.tablet-optimized .ai-chat-header:active {
  cursor: grabbing;
}

.ai-toggle-btn.tablet-touch-optimized {
  /* Optimized toggle button for tablet devices */
  min-width: 48px;
  min-height: 48px;
  font-size: 1.1rem;
  transition: all 0.2s ease;
}

.ai-toggle-btn.tablet-touch-optimized:hover {
  transform: scale(1.05);
}

.ai-toggle-btn.tablet-touch-optimized:active {
  transform: scale(0.95);
}

/* When panel is not active, add pulse effect */
.ai-chat-panel:not(.active) .ai-toggle-btn {
  animation: pulse-glow 3s infinite;
}

/* Enhanced pulse animation for mobile visibility */
@media (max-width: 1024px) {
  .ai-chat-panel:not(.active) .ai-toggle-btn {
    animation: mobile-pulse-glow 2.5s infinite;
  }
}

/* Pulse animation for visibility when panel is closed */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: -6px 0 20px rgba(59, 130, 246, 0.5);
  }
  50% {
    box-shadow: -8px 0 30px rgba(59, 130, 246, 0.7);
  }
}

/* Enhanced mobile pulse animation */
@keyframes mobile-pulse-glow {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.6);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 8px 35px rgba(59, 130, 246, 0.8);
    transform: scale(1.05);
  }
}

/* Enhanced Animations for Mobile/Tablet AI Chat */
@keyframes slideInFromRight {
  from {
    right: -450px;
    opacity: 0.8;
  } 
  to {
    right: 0;
    opacity: 1;
  }
}

@keyframes slideInFromBottom {
  from {
    bottom: -100vh;
    opacity: 0.7;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    bottom: 0;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* New enhanced slide-up animation */
@keyframes slideUpFromBottom {
  from {
    bottom: -100vh;
    opacity: 0;
    transform: translateX(-50%) translateY(50px) scale(0.95);
  }
  50% {
    opacity: 0.8;
    transform: translateX(-50%) translateY(10px) scale(0.98);
  }
  to {
    bottom: 0;
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes promptsReappear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Update animation keyframes for themes */
@keyframes wisdomGlow {
  0%, 100% {
    filter: drop-shadow(0 0 8px var(--ai-accent-wisdom)) drop-shadow(0 0 16px var(--ai-accent-wisdom));
  }
  50% {
    filter: drop-shadow(0 0 16px var(--ai-accent-wisdom)) drop-shadow(0 0 24px var(--ai-accent-wisdom));
  }
}

/* White glow animation for AI header while typing */
@keyframes whiteGlow {
  0%, 100% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.2);
  }
  50% {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 25px rgba(255, 255, 255, 0.7), 0 0 35px rgba(255, 255, 255, 0.5);
  }
}

/* Gold glow animation for AI header while typing */
@keyframes goldGlow {
  0%, 100% {
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.6), 0 0 16px rgba(212, 175, 55, 0.4), 0 0 24px rgba(212, 175, 55, 0.3);
  }
  50% {
    text-shadow: 0 0 20px rgba(212, 175, 55, 1), 0 0 30px rgba(212, 175, 55, 0.8), 0 0 40px rgba(212, 175, 55, 0.6);
  }
}

/* Lavender glow animation for light theme */
@keyframes lavenderGlow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(147, 112, 219, 0.6), 0 0 20px rgba(147, 112, 219, 0.4), 0 0 30px rgba(147, 112, 219, 0.2);
  }
  50% {
    text-shadow: 0 0 20px rgba(147, 112, 219, 1), 0 0 30px rgba(147, 112, 219, 0.8), 0 0 40px rgba(147, 112, 219, 0.6);
  }
}

/* Neon indigo glow animation for dark theme */
@keyframes neonIndigoGlow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(79, 172, 254, 0.8), 0 0 20px rgba(79, 172, 254, 0.6), 0 0 30px rgba(79, 172, 254, 0.4);
  }
  50% {
    text-shadow: 0 0 20px rgba(79, 172, 254, 1), 0 0 40px rgba(79, 172, 254, 0.8), 0 0 60px rgba(79, 172, 254, 0.6);
  }
}

/* Dark mode neon border pulse animation */
@keyframes neonBorderPulse {
  0%, 100% {
    border-color: rgba(79, 172, 254, 0.4);
    box-shadow: 
      -10px 0 30px rgba(79, 172, 254, 0.1),
      -20px 0 50px rgba(79, 172, 254, 0.05),
      inset 2px 0 10px rgba(79, 172, 254, 0.05);
  }
  50% {
    border-color: rgba(79, 172, 254, 0.7);
    box-shadow: 
      -15px 0 40px rgba(79, 172, 254, 0.2),
      -30px 0 70px rgba(79, 172, 254, 0.1),
      inset 2px 0 15px rgba(79, 172, 254, 0.1);
  }
}

/* Apply the neon border animation to dark mode AI panel */
[data-theme="dark"] .ai-chat-panel.active {
  animation: neonBorderPulse 3s ease-in-out infinite;
}

/* Update typing animation for different themes */
[data-theme="light"] .ai-chat-header h3.typing {
  animation: lavenderGlow 2s ease-in-out infinite;
}

[data-theme="dark"] .ai-chat-header h3.typing {
  animation: neonIndigoGlow 2s ease-in-out infinite;
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .ai-chat-header h3,
  .ai-message {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Mobile-specific enhancements for resize and auto-hide */
@media (max-width: 768px) {
  /* Visual feedback during resize */
  .ai-chat-panel.will-hide {
    background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%) !important;
    border-color: #f87171 !important;
    transition: all 0.2s ease;
  }
  
  [data-theme="dark"] .ai-chat-panel.will-hide {
    background: linear-gradient(135deg, #450a0a 0%, #1c1917 100%) !important;
    border-color: #dc2626 !important;
  }
  
  .ai-chat-panel.resizing {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+ */
  user-select: none;         /* Standard */

    pointer-events: none;
  }
  
  .ai-chat-panel.resizing .ai-chat-header {
    background: var(--ai-bg-secondary) !important;
    cursor: ns-resize !important;
  }
  
  /* Sliding down behavior when at minimum height */
  .ai-chat-panel.sliding-down {
    transition: none !important;
  }
  
  .ai-chat-panel.sliding-down.will-hide {
    background: linear-gradient(135deg, #fca5a5 0%, #fee2e2 100%) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3) !important;
  }
  
  [data-theme="dark"] .ai-chat-panel.sliding-down.will-hide {
    background: linear-gradient(135deg, #7f1d1d 0%, #450a0a 100%) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4) !important;
  }
  
  /* Enhanced drag handle for mobile */
  .ai-chat-header::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 12px;
    background: transparent;
    border-radius: 6px;
    cursor: ns-resize;
    z-index: 10;
  }
  
  /* Enhanced drag handle visibility when sliding */
  .ai-chat-panel.sliding-down .ai-chat-header::before {
    background: #ef4444 !important;
    opacity: 0.8 !important;
    animation: pulse-drag-handle 1s ease-in-out infinite;
  }
  
  [data-theme="dark"] .ai-chat-panel.sliding-down .ai-chat-header::before {
    background: #f87171 !important;
  }
  
  /* Auto-hide notification styling */
  .ai-hide-notification {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    border: 1px solid rgba(139, 69, 255, 0.2);
  }
  
  [data-theme="dark"] .ai-hide-notification {
    background: rgba(31, 41, 55, 0.95) !important;
    color: #ffffff !important;
    border-color: rgba(79, 172, 254, 0.3) !important;
  }
}

/* Pulse animation for drag handle when sliding */
@keyframes pulse-drag-handle {
  0%, 100% {
    opacity: 0.8;
    transform: translateX(-50%) scaleY(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1.2);
  }
}

/* ============================================
   RESPONSIVE BREAKPOINTS FOR 1025px & 1366px
   ============================================ */

/* Auto-generation notification animations */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

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

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Auto-generation notification styling */
.auto-generation-notification {
  pointer-events: none;
}

/* Specific styling for 1025px and 1366px devices */
@media (width: 1025px), (width: 1366px) {
  .study-prompts-section {
    max-height: 300px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ai-border-primary) transparent;
  }

  .study-prompts-section::-webkit-scrollbar {
    width: 6px;
  }

  .study-prompts-section::-webkit-scrollbar-track {
    background: transparent;
  }

  .study-prompts-section::-webkit-scrollbar-thumb {
    background: var(--ai-border-primary);
    border-radius: 3px;
  }

  .study-prompts-section::-webkit-scrollbar-thumb:hover {
    background: var(--ai-border-gold);
  }

  .selected-text-info {
    margin-bottom: 0.75rem;
  }

  .selected-text-info strong {
    font-size: 0.9rem;
    margin-bottom: 0.375rem;
  }

  .selected-text-preview {
    font-size: 0.8rem;
    line-height: 1.3;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .prompt-pill {
    font-size: 0.8rem;
    padding: 0.375rem 0.75rem;
    margin: 0.25rem;
    line-height: 1.2;
  }

  .close-prompts-btn {
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    top: 6px;
    right: 6px;
  }
}}