/* Chat Theme Styles - Override Bulma's default variables */

/* Base theme variables - these will override Bulma's CSS variables */
:root {
  --theme-primary: #3273dc;
  --theme-primary-light: #4a9eff;
  --theme-primary-dark: #2366d1;
  --theme-secondary: #f5f5f5;
  --theme-text: #363636;
  --theme-text-light: #4a4a4a;
  --theme-background: #ffffff;
  --theme-card: #ffffff;
  --theme-border: #dbdbdb;
  --theme-shadow: rgba(10, 10, 10, 0.1);
  --theme-gradient-start: #3273dc;
  --theme-gradient-end: #2366d1;

  /* Apple iOS Chat UI System Defaults (Light Theme) */
  --ios-chat-bg: #f8fafc;
  --ios-chat-header-bg: rgba(255, 255, 255, 0.92);
  --ios-chat-header-border: rgba(0, 0, 0, 0.08);
  --ios-chat-header-text: #0f172a;
  --ios-bubble-user-bg: linear-gradient(135deg, #007aff 0%, #2563eb 100%);
  --ios-bubble-user-text: #ffffff;
  --ios-bubble-team-bg: #f1f5f9;
  --ios-bubble-team-text: #0f172a;
  --ios-bubble-system-bg: rgba(0, 0, 0, 0.05);
  --ios-bubble-system-text: #475569;
  --ios-input-bar-bg: rgba(255, 255, 255, 0.94);
  --ios-input-bar-border: rgba(0, 0, 0, 0.08);
  --ios-input-field-bg: #f1f5f9;
  --ios-input-field-text: #0f172a;
  --ios-input-field-border: rgba(0, 0, 0, 0.08);
  --ios-input-field-focus-bg: #ffffff;
  --ios-input-placeholder: rgba(100, 116, 139, 0.65);
  --ios-send-btn-gradient: linear-gradient(135deg, #007aff 0%, #3b82f6 50%, #4f46e5 100%);
  --ios-send-btn-shadow: 0 4px 14px rgba(0, 122, 255, 0.4);
  --ios-chip-bg: rgba(59, 130, 246, 0.08);
  --ios-chip-text: #2563eb;
  --ios-chip-border: rgba(59, 130, 246, 0.22);
}

/* Override Bulma's primary color variables for our themes */

/* Original themes */
.theme-dark {
  --bulma-primary: #ff6b6b !important;
  --bulma-primary-h: 0 !important;
  --bulma-primary-s: 100% !important;
  --bulma-primary-l: 70% !important;
  --bulma-primary-invert: #ffffff !important;
  
  /* Override Bulma's CSS custom properties */
  --bulma-scheme-main: #1a1a1a !important;
  --bulma-scheme-main-bis: #2d2d2d !important;
  --bulma-scheme-main-ter: #404040 !important;
  --bulma-scheme-invert: #ffffff !important;
  --bulma-scheme-invert-bis: #e0e0e0 !important;
  --bulma-scheme-invert-ter: #c0c0c0 !important;
}

.theme-white {
  --bulma-primary: #4a4a4a !important;
  --bulma-primary-h: 0 !important;
  --bulma-primary-s: 0% !important;
  --bulma-primary-l: 29% !important;
  --bulma-primary-invert: #ffffff !important;
}

.theme-purple {
  --bulma-primary: #8b5cf6 !important;
  --bulma-primary-h: 262 !important;
  --bulma-primary-s: 85% !important;
  --bulma-primary-l: 66% !important;
  --bulma-primary-invert: #ffffff !important;
}

.theme-gray {
  --bulma-primary: #6b7280 !important;
  --bulma-primary-h: 220 !important;
  --bulma-primary-s: 9% !important;
  --bulma-primary-l: 46% !important;
  --bulma-primary-invert: #ffffff !important;
}

.theme-orange {
  --bulma-primary: #f97316 !important;
  --bulma-primary-h: 25 !important;
  --bulma-primary-s: 95% !important;
  --bulma-primary-l: 53% !important;
  --bulma-primary-invert: #ffffff !important;
}

.theme-blue {
  --bulma-primary: #3b82f6 !important;
  --bulma-primary-h: 213 !important;
  --bulma-primary-s: 94% !important;
  --bulma-primary-l: 58% !important;
  --bulma-primary-invert: #ffffff !important;
}

/* New mixed themes - Dark backgrounds with colored accents */
.theme-dark-purple {
  --bulma-primary: #a78bfa !important;
  --bulma-primary-h: 262 !important;
  --bulma-primary-s: 85% !important;
  --bulma-primary-l: 75% !important;
  --bulma-primary-invert: #ffffff !important;
  
  --bulma-scheme-main: #1a1a1a !important;
  --bulma-scheme-main-bis: #2d2d2d !important;
  --bulma-scheme-main-ter: #404040 !important;
  --bulma-scheme-invert: #ffffff !important;
  --bulma-scheme-invert-bis: #e0e0e0 !important;
  --bulma-scheme-invert-ter: #c0c0c0 !important;
}

.theme-dark-primary {
  --bulma-primary: #60a5fa !important;
  --bulma-primary-h: 213 !important;
  --bulma-primary-s: 94% !important;
  --bulma-primary-l: 70% !important;
  --bulma-primary-invert: #ffffff !important;
  
  --bulma-scheme-main: #1a1a1a !important;
  --bulma-scheme-main-bis: #2d2d2d !important;
  --bulma-scheme-main-ter: #404040 !important;
  --bulma-scheme-invert: #ffffff !important;
  --bulma-scheme-invert-bis: #e0e0e0 !important;
  --bulma-scheme-invert-ter: #c0c0c0 !important;
}

.theme-dark-link {
  --bulma-primary: #3b82f6 !important;
  --bulma-primary-h: 213 !important;
  --bulma-primary-s: 94% !important;
  --bulma-primary-l: 58% !important;
  --bulma-primary-invert: #ffffff !important;
  
  --bulma-scheme-main: #1a1a1a !important;
  --bulma-scheme-main-bis: #2d2d2d !important;
  --bulma-scheme-main-ter: #404040 !important;
  --bulma-scheme-invert: #ffffff !important;
  --bulma-scheme-invert-bis: #e0e0e0 !important;
  --bulma-scheme-invert-ter: #c0c0c0 !important;
}

.theme-dark-orange {
  --bulma-primary: #fb923c !important;
  --bulma-primary-h: 25 !important;
  --bulma-primary-s: 95% !important;
  --bulma-primary-l: 65% !important;
  --bulma-primary-invert: #ffffff !important;
  
  --bulma-scheme-main: #1a1a1a !important;
  --bulma-scheme-main-bis: #2d2d2d !important;
  --bulma-scheme-main-ter: #404040 !important;
  --bulma-scheme-invert: #ffffff !important;
  --bulma-scheme-invert-bis: #e0e0e0 !important;
  --bulma-scheme-invert-ter: #c0c0c0 !important;
}

/* New mixed themes - White backgrounds with colored accents */
.theme-white-purple {
  --bulma-primary: #8b5cf6 !important;
  --bulma-primary-h: 262 !important;
  --bulma-primary-s: 85% !important;
  --bulma-primary-l: 66% !important;
  --bulma-primary-invert: #ffffff !important;
  
  --bulma-scheme-main: #ffffff !important;
  --bulma-scheme-main-bis: #f8f9fa !important;
  --bulma-scheme-main-ter: #e9ecef !important;
  --bulma-scheme-invert: #1f2937 !important;
  --bulma-scheme-invert-bis: #374151 !important;
  --bulma-scheme-invert-ter: #6b7280 !important;
}

.theme-white-primary {
  --bulma-primary: #3b82f6 !important;
  --bulma-primary-h: 213 !important;
  --bulma-primary-s: 94% !important;
  --bulma-primary-l: 58% !important;
  --bulma-primary-invert: #ffffff !important;
  
  --bulma-scheme-main: #ffffff !important;
  --bulma-scheme-main-bis: #f8f9fa !important;
  --bulma-scheme-main-ter: #e9ecef !important;
  --bulma-scheme-invert: #1f2937 !important;
  --bulma-scheme-invert-bis: #374151 !important;
  --bulma-scheme-invert-ter: #6b7280 !important;
}

.theme-white-link {
  --bulma-primary: #2563eb !important;
  --bulma-primary-h: 213 !important;
  --bulma-primary-s: 94% !important;
  --bulma-primary-l: 50% !important;
  --bulma-primary-invert: #ffffff !important;
  
  --bulma-scheme-main: #ffffff !important;
  --bulma-scheme-main-bis: #f8f9fa !important;
  --bulma-scheme-main-ter: #e9ecef !important;
  --bulma-scheme-invert: #1f2937 !important;
  --bulma-scheme-invert-bis: #374151 !important;
  --bulma-scheme-invert-ter: #6b7280 !important;
}

.theme-white-orange {
  --bulma-primary: #f97316 !important;
  --bulma-primary-h: 25 !important;
  --bulma-primary-s: 95% !important;
  --bulma-primary-l: 53% !important;
  --bulma-primary-invert: #ffffff !important;
  
  --bulma-scheme-main: #ffffff !important;
  --bulma-scheme-main-bis: #f8f9fa !important;
  --bulma-scheme-main-ter: #e9ecef !important;
  --bulma-scheme-invert: #1f2937 !important;
  --bulma-scheme-invert-bis: #374151 !important;
  --bulma-scheme-invert-ter: #6b7280 !important;
}

/* Force our theme variables to override Bulma's system theme */
.theme-dark,
.theme-white,
.theme-purple,
.theme-gray,
.theme-orange,
.theme-blue,
.theme-dark-purple,
.theme-dark-primary,
.theme-dark-link,
.theme-dark-orange,
.theme-white-purple,
.theme-white-primary,
.theme-white-link,
.theme-white-orange {
  /* Override Bulma's color scheme variables */
  --bulma-scheme-main: var(--theme-background) !important;
  --bulma-scheme-main-bis: var(--theme-secondary) !important;
  --bulma-scheme-main-ter: var(--theme-border) !important;
  --bulma-scheme-invert: var(--theme-text) !important;
  --bulma-scheme-invert-bis: var(--theme-text-light) !important;
  --bulma-scheme-invert-ter: var(--theme-border) !important;
  
  /* Override Bulma's background and text colors */
  --bulma-background: var(--theme-background) !important;
  --bulma-text: var(--theme-text) !important;
  --bulma-text-strong: var(--theme-text) !important;
  --bulma-text-light: var(--theme-text-light) !important;
}

/* Dark Themes iOS UI Variables */
.app-theme-dark,
.theme-dark,
.theme-dark-purple,
.theme-dark-primary,
.theme-dark-link,
.theme-dark-orange,
.theme-gray {
  --ios-chat-bg: #0f0f14;
  --ios-chat-header-bg: rgba(20, 20, 26, 0.94);
  --ios-chat-header-border: rgba(255, 255, 255, 0.08);
  --ios-chat-header-text: #ffffff;
  --ios-bubble-user-bg: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --ios-bubble-user-text: #ffffff;
  --ios-bubble-team-bg: rgba(255, 255, 255, 0.1);
  --ios-bubble-team-text: #f8fafc;
  --ios-bubble-system-bg: rgba(255, 255, 255, 0.08);
  --ios-bubble-system-text: #cbd5e1;
  --ios-input-bar-bg: rgba(20, 20, 26, 0.94);
  --ios-input-bar-border: rgba(255, 255, 255, 0.08);
  --ios-input-field-bg: rgba(255, 255, 255, 0.08);
  --ios-input-field-text: #ffffff;
  --ios-input-field-border: rgba(255, 255, 255, 0.12);
  --ios-input-field-focus-bg: rgba(255, 255, 255, 0.13);
  --ios-input-placeholder: rgba(255, 255, 255, 0.45);
  --ios-send-btn-gradient: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #2563eb 100%);
  --ios-send-btn-shadow: 0 4px 14px rgba(59, 130, 246, 0.45);
  --ios-chip-bg: rgba(255, 255, 255, 0.08);
  --ios-chip-text: #f1f5f9;
  --ios-chip-border: rgba(255, 255, 255, 0.16);
}

.theme-purple,
.theme-white-purple,
.theme-dark-purple {
  --ios-send-btn-gradient: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #7c3aed 100%);
  --ios-send-btn-shadow: 0 4px 14px rgba(139, 92, 246, 0.45);
  --ios-bubble-user-bg: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.theme-orange,
.theme-white-orange,
.theme-dark-orange {
  --ios-send-btn-gradient: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #ea580c 100%);
  --ios-send-btn-shadow: 0 4px 14px rgba(249, 115, 22, 0.45);
  --ios-bubble-user-bg: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

/* Dark Theme */
.theme-dark {
  --theme-primary: #ff6b6b;
  --theme-primary-light: #ff8e8e;
  --theme-primary-dark: #ff5252;
  --theme-secondary: #2d2d2d;
  --theme-text: #ffffff;
  --theme-text-light: #e0e0e0;
  --theme-background: #1a1a1a;
  --theme-card: #2d2d2d;
  --theme-border: #404040;
  --theme-shadow: rgba(0, 0, 0, 0.3);
  --theme-gradient-start: #ff6b6b;
  --theme-gradient-end: #ff5252;
}

/* White Theme */
.theme-white {
  --theme-primary: #4a4a4a;
  --theme-primary-light: #6b6b6b;
  --theme-primary-dark: #363636;
  --theme-secondary: #f8f9fa;
  --theme-text: #212529;
  --theme-text-light: #495057;
  --theme-background: #ffffff;
  --theme-card: #ffffff;
  --theme-border: #dee2e6;
  --theme-shadow: rgba(0, 0, 0, 0.15);
  --theme-gradient-start: #4a4a4a;
  --theme-gradient-end: #363636;
}

/* Purple Theme */
.theme-purple {
  --theme-primary: #8b5cf6;
  --theme-primary-light: #a78bfa;
  --theme-primary-dark: #7c3aed;
  --theme-secondary: #f3f4f6;
  --theme-text: #1f2937;
  --theme-text-light: #4b5563;
  --theme-background: #ffffff;
  --theme-card: #ffffff;
  --theme-border: #e5e7eb;
  --theme-shadow: rgba(139, 92, 246, 0.1);
  --theme-gradient-start: #8b5cf6;
  --theme-gradient-end: #7c3aed;
}

/* Gray Theme */
.theme-gray {
  --theme-primary: #6b7280;
  --theme-primary-light: #9ca3af;
  --theme-primary-dark: #4b5563;
  --theme-secondary: #f9fafb;
  --theme-text: #111827;
  --theme-text-light: #374151;
  --theme-background: #ffffff;
  --theme-card: #ffffff;
  --theme-border: #d1d5db;
  --theme-shadow: rgba(107, 114, 128, 0.1);
  --theme-gradient-start: #6b7280;
  --theme-gradient-end: #4b5563;
}

/* Orange Theme */
.theme-orange {
  --theme-primary: #f97316;
  --theme-primary-light: #fb923c;
  --theme-primary-dark: #ea580c;
  --theme-secondary: #fff7ed;
  --theme-text: #1c1917;
  --theme-text-light: #44403c;
  --theme-background: #ffffff;
  --theme-card: #ffffff;
  --theme-border: #fed7aa;
  --theme-shadow: rgba(249, 115, 22, 0.1);
  --theme-gradient-start: #f97316;
  --theme-gradient-end: #ea580c;
}

/* Blue Theme */
.theme-blue {
  --theme-primary: #3b82f6;
  --theme-primary-light: #60a5fa;
  --theme-primary-dark: #2563eb;
  --theme-secondary: #eff6ff;
  --theme-text: #1e3a8a;
  --theme-text-light: #1e40af;
  --theme-background: #ffffff;
  --theme-card: #ffffff;
  --theme-border: #bfdbfe;
  --theme-shadow: rgba(59, 130, 246, 0.1);
  --theme-gradient-start: #3b82f6;
  --theme-gradient-end: #2563eb;
}

/* New Mixed Themes - Dark backgrounds with colored accents */
.theme-dark-purple {
  --theme-primary: #a78bfa;
  --theme-primary-light: #c4b5fd;
  --theme-primary-dark: #8b5cf6;
  --theme-secondary: #2d2d2d;
  --theme-text: #ffffff;
  --theme-text-light: #e0e0e0;
  --theme-background: #1a1a1a;
  --theme-card: #2d2d2d;
  --theme-border: #404040;
  --theme-shadow: rgba(167, 139, 250, 0.3);
  --theme-gradient-start: #a78bfa;
  --theme-gradient-end: #8b5cf6;
}

.theme-dark-primary {
  --theme-primary: #60a5fa;
  --theme-primary-light: #93c5fd;
  --theme-primary-dark: #3b82f6;
  --theme-secondary: #2d2d2d;
  --theme-text: #ffffff;
  --theme-text-light: #e0e0e0;
  --theme-background: #1a1a1a;
  --theme-card: #2d2d2d;
  --theme-border: #404040;
  --theme-shadow: rgba(96, 165, 250, 0.3);
  --theme-gradient-start: #60a5fa;
  --theme-gradient-end: #3b82f6;
}

.theme-dark-link {
  --theme-primary: #3b82f6;
  --theme-primary-light: #60a5fa;
  --theme-primary-dark: #2563eb;
  --theme-secondary: #2d2d2d;
  --theme-text: #ffffff;
  --theme-text-light: #e0e0e0;
  --theme-background: #1a1a1a;
  --theme-card: #2d2d2d;
  --theme-border: #404040;
  --theme-shadow: rgba(59, 130, 246, 0.3);
  --theme-gradient-start: #3b82f6;
  --theme-gradient-end: #2563eb;
}

.theme-dark-orange {
  --theme-primary: #fb923c;
  --theme-primary-light: #fdba74;
  --theme-primary-dark: #f97316;
  --theme-secondary: #2d2d2d;
  --theme-text: #ffffff;
  --theme-text-light: #e0e0e0;
  --theme-background: #1a1a1a;
  --theme-card: #2d2d2d;
  --theme-border: #404040;
  --theme-shadow: rgba(251, 146, 60, 0.3);
  --theme-gradient-start: #fb923c;
  --theme-gradient-end: #f97316;
}

/* New Mixed Themes - White backgrounds with colored accents */
.theme-white-purple {
  --theme-primary: #8b5cf6;
  --theme-primary-light: #a78bfa;
  --theme-primary-dark: #7c3aed;
  --theme-secondary: #f3f4f6;
  --theme-text: #1f2937;
  --theme-text-light: #4b5563;
  --theme-background: #ffffff;
  --theme-card: #ffffff;
  --theme-border: #e5e7eb;
  --theme-shadow: rgba(139, 92, 246, 0.1);
  --theme-gradient-start: #8b5cf6;
  --theme-gradient-end: #7c3aed;
}

.theme-white-primary {
  --theme-primary: #3b82f6;
  --theme-primary-light: #60a5fa;
  --theme-primary-dark: #2563eb;
  --theme-secondary: #f3f4f6;
  --theme-text: #1f2937;
  --theme-text-light: #4b5563;
  --theme-background: #ffffff;
  --theme-card: #ffffff;
  --theme-border: #e5e7eb;
  --theme-shadow: rgba(59, 130, 246, 0.1);
  --theme-gradient-start: #3b82f6;
  --theme-gradient-end: #2563eb;
}

.theme-white-link {
  --theme-primary: #2563eb;
  --theme-primary-light: #3b82f6;
  --theme-primary-dark: #1d4ed8;
  --theme-secondary: #f3f4f6;
  --theme-text: #1f2937;
  --theme-text-light: #4b5563;
  --theme-background: #ffffff;
  --theme-card: #ffffff;
  --theme-border: #e5e7eb;
  --theme-shadow: rgba(37, 99, 235, 0.1);
  --theme-gradient-start: #2563eb;
  --theme-gradient-end: #1d4ed8;
}

.theme-white-orange {
  --theme-primary: #f97316;
  --theme-primary-light: #fb923c;
  --theme-primary-dark: #ea580c;
  --theme-secondary: #f3f4f6;
  --theme-text: #1f2937;
  --theme-text-light: #4b5563;
  --theme-background: #ffffff;
  --theme-card: #ffffff;
  --theme-border: #e5e7eb;
  --theme-shadow: rgba(249, 115, 22, 0.1);
  --theme-gradient-start: #f97316;
  --theme-gradient-end: #ea580c;
}

/* Override Bulma's button and link colors for our themes */
.theme-dark .button.is-primary,
.theme-dark .button.is-link,
.theme-dark a.is-primary,
.theme-dark .is-primary {
  background-color: #4a4a4a !important;
  border-color: #4a4a4a !important;
  color: #ffffff !important;
}

.theme-dark-purple .button.is-primary,
.theme-dark-purple .button.is-link,
.theme-dark-purple a.is-primary,
.theme-dark-purple .is-primary {
  background-color: #4a4a4a !important;
  border-color: #4a4a4a !important;
  color: #ffffff !important;
}

.theme-dark-primary .button.is-primary,
.theme-dark-primary .button.is-link,
.theme-dark-primary a.is-primary,
.theme-dark-primary .is-primary {
  background-color: #4a4a4a !important;
  border-color: #4a4a4a !important;
  color: #ffffff !important;
}

.theme-dark-link .button.is-primary,
.theme-dark-link .button.is-link,
.theme-dark-link a.is-primary,
.theme-dark-link .is-primary {
  background-color: #4a4a4a !important;
  border-color: #4a4a4a !important;
  color: #ffffff !important;
}

.theme-dark-orange .button.is-primary,
.theme-dark-orange .button.is-link,
.theme-dark-orange a.is-primary,
.theme-dark-orange .is-primary {
  background-color: #4a4a4a !important;
  border-color: #4a4a4a !important;
  color: #ffffff !important;
}

.theme-white-purple .button.is-primary,
.theme-white-purple .button.is-link,
.theme-white-purple a.is-primary,
.theme-white-purple .is-primary,
.theme-white-primary .button.is-primary,
.theme-white-primary .button.is-link,
.theme-white-primary a.is-primary,
.theme-white-primary .is-primary,
.theme-white-link .button.is-primary,
.theme-white-link .button.is-link,
.theme-white-link a.is-primary,
.theme-white-link .is-primary,
.theme-white-orange .button.is-primary,
.theme-white-orange .button.is-link,
.theme-white-orange a.is-primary,
.theme-white-orange .is-primary {
  background-color: var(--bulma-primary) !important;
  border-color: var(--bulma-primary) !important;
  color: var(--bulma-primary-invert) !important;
}

.theme-white .button.is-primary,
.theme-white .button.is-link,
.theme-white a.is-primary,
.theme-white .is-primary,
.theme-purple .button.is-primary,
.theme-purple .button.is-link,
.theme-purple a.is-primary,
.theme-purple .is-primary,
.theme-gray .button.is-primary,
.theme-gray .button.is-link,
.theme-gray a.is-primary,
.theme-gray .is-primary,
.theme-orange .button.is-primary,
.theme-orange .button.is-link,
.theme-orange a.is-primary,
.theme-orange .is-primary,
.theme-blue .button.is-primary,
.theme-blue .button.is-link,
.theme-blue a.is-primary,
.theme-blue .is-primary {
  background-color: var(--bulma-primary) !important;
  border-color: var(--bulma-primary) !important;
  color: var(--bulma-primary-invert) !important;
}


/* Chat Card Theme Styles */
.chat-card.theme-dark {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  box-shadow: var(--shadow-card);
}

.chat-card.theme-dark .card-header {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
  color: white;
}

.chat-card.theme-dark .card-header-title {
  color: white;
}

.chat-card.theme-dark .card-content {
  background: var(--theme-card);
  color: var(--theme-text);
}

.chat-card.theme-dark .card-footer-item {
  color: var(--theme-primary);
  border-top: 1px solid var(--theme-border);
}

.chat-card.theme-dark .card-footer-item:hover {
  background: var(--theme-secondary);
  color: var(--theme-primary-dark);
}

/* Theme dropdown in card header */
.chat-card .card-header .select {
  min-width: 120px;
  max-width: 150px;
}

.chat-card .card-header .select select {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  width: 100%;
  min-width: 120px;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* White themes dropdown - black text */
.chat-card.theme-white .card-header .select select,
.chat-card.theme-white-purple .card-header .select select,
.chat-card.theme-white-primary .card-header .select select,
.chat-card.theme-white-link .card-header .select select,
.chat-card.theme-white-orange .card-header .select select {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #1f2937;
}

.chat-card .card-header .select select:focus {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
  outline: none;
}

.chat-card .card-header .select select option {
  background: var(--theme-card);
  color: var(--theme-text);
  padding: 0.5rem;
  white-space: nowrap;
  min-width: 120px;
  max-width: 150px;
}

/* White themes dropdown options - ensure black text */
.chat-card.theme-white .card-header .select select option,
.chat-card.theme-white-purple .card-header .select select option,
.chat-card.theme-white-primary .card-header .select select option,
.chat-card.theme-white-link .card-header .select select option,
.chat-card.theme-white-orange .card-header .select select option {
  background: #ffffff;
  color: #1f2937;
}

/* Apply dropdown styling to all themes */
.chat-card.theme-white .card-header .select select,
.chat-card.theme-purple .card-header .select select,
.chat-card.theme-gray .card-header .select select,
.chat-card.theme-orange .card-header .select select,
.chat-card.theme-blue .card-header .select select {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.chat-card.theme-white .card-header .select select:focus,
.chat-card.theme-purple .card-header .select select:focus,
.chat-card.theme-gray .card-header .select select:focus,
.chat-card.theme-orange .card-header .select select:focus,
.chat-card.theme-blue .card-header .select select:focus {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
  outline: none;
}

/* Override Bulma tabs for our themes */
.theme-dark .tabs.is-toggle li.is-active a,
.theme-dark .tabs.is-boxed li.is-active a {
  background-color: var(--bulma-primary) !important;
  border-color: var(--bulma-primary) !important;
  color: var(--bulma-primary-invert) !important;
}

.theme-white .tabs.is-toggle li.is-active a,
.theme-white .tabs.is-boxed li.is-active a {
  background-color: var(--bulma-primary) !important;
  border-color: var(--bulma-primary) !important;
  color: var(--bulma-primary-invert) !important;
}

.theme-purple .tabs.is-toggle li.is-active a,
.theme-purple .tabs.is-boxed li.is-active a {
  background-color: var(--bulma-primary) !important;
  border-color: var(--bulma-primary) !important;
  color: var(--bulma-primary-invert) !important;
}

.theme-gray .tabs.is-toggle li.is-active a,
.theme-gray .tabs.is-boxed li.is-active a {
  background-color: var(--bulma-primary) !important;
  border-color: var(--bulma-primary) !important;
  color: var(--bulma-primary-invert) !important;
}

.theme-orange .tabs.is-toggle li.is-active a,
.theme-orange .tabs.is-boxed li.is-active a {
  background-color: var(--bulma-primary) !important;
  border-color: var(--bulma-primary) !important;
  color: var(--bulma-primary-invert) !important;
}

.theme-blue .tabs.is-toggle li.is-active a,
.theme-blue .tabs.is-boxed li.is-active a {
  background-color: var(--bulma-primary) !important;
  border-color: var(--bulma-primary) !important;
  color: var(--bulma-primary-invert) !important;
}

/* Override Bulma notifications for our themes */
.theme-dark .notification.is-primary {
  background-color: var(--bulma-primary) !important;
  color: var(--bulma-primary-invert) !important;
}

.theme-white .notification.is-primary {
  background-color: var(--bulma-primary) !important;
  color: var(--bulma-primary-invert) !important;
}

.theme-purple .notification.is-primary {
  background-color: var(--bulma-primary) !important;
  color: var(--bulma-primary-invert) !important;
}

.theme-gray .notification.is-primary {
  background-color: var(--bulma-primary) !important;
  color: var(--bulma-primary-invert) !important;
}

.theme-orange .notification.is-primary {
  background-color: var(--bulma-primary) !important;
  color: var(--bulma-primary-invert) !important;
}

.theme-blue .notification.is-primary {
  background-color: var(--bulma-primary) !important;
  color: var(--bulma-primary-invert) !important;
}

/* White Theme Card */
.chat-card.theme-white {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  box-shadow: var(--shadow-card);
}

.chat-card.theme-white .card-header {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
  color: white;
}

.chat-card.theme-white .card-header-title {
  color: white;
}

.chat-card.theme-white .card-content {
  background: var(--theme-card);
  color: var(--theme-text);
}

.chat-card.theme-white .card-footer-item {
  color: var(--theme-primary);
  border-top: 1px solid var(--theme-border);
}

.chat-card.theme-white .card-footer-item:hover {
  background: var(--theme-secondary);
  color: var(--theme-primary-dark);
}

/* Purple Theme Card */
.chat-card.theme-purple {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  box-shadow: var(--shadow-card);
}

.chat-card.theme-purple .card-header {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
  color: white;
}

.chat-card.theme-purple .card-header-title {
  color: white;
}

.chat-card.theme-purple .card-content {
  background: var(--theme-card);
  color: var(--theme-text);
}

.chat-card.theme-purple .card-footer-item {
  color: var(--theme-primary);
  border-top: 1px solid var(--theme-border);
}

.chat-card.theme-purple .card-footer-item:hover {
  background: var(--theme-secondary);
  color: var(--theme-primary-dark);
}

/* Gray Theme Card */
.chat-card.theme-gray {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  box-shadow: var(--shadow-card);
}

.chat-card.theme-gray .card-header {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
  color: white;
}

.chat-card.theme-gray .card-header-title {
  color: white;
}

.chat-card.theme-gray .card-content {
  background: var(--theme-card);
  color: var(--theme-text);
}

.chat-card.theme-gray .card-footer-item {
  color: var(--theme-primary);
  border-top: 1px solid var(--theme-border);
}

.chat-card.theme-gray .card-footer-item:hover {
  background: var(--theme-secondary);
  color: var(--theme-primary-dark);
}

/* Orange Theme Card */
.chat-card.theme-orange {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  box-shadow: var(--shadow-card);
}

.chat-card.theme-orange .card-header {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
  color: white;
}

.chat-card.theme-orange .card-header-title {
  color: white;
}

.chat-card.theme-orange .card-content {
  background: var(--theme-card);
  color: var(--theme-text);
}

.chat-card.theme-orange .card-footer-item {
  color: var(--theme-primary);
  border-top: 1px solid var(--theme-border);
}

.chat-card.theme-orange .card-footer-item:hover {
  background: var(--theme-secondary);
  color: var(--theme-primary-dark);
}

/* Blue Theme Card */
.chat-card.theme-blue {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  box-shadow: var(--shadow-card);
}

.chat-card.theme-blue .card-header {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
  color: white;
}

.chat-card.theme-blue .card-header-title {
  color: white;
}

.chat-card.theme-blue .card-content {
  background: var(--theme-card);
  color: var(--theme-text);
}

.chat-card.theme-blue .card-footer-item {
  color: var(--theme-primary);
  border-top: 1px solid var(--theme-border);
}

.chat-card.theme-blue .card-footer-item:hover {
  background: var(--theme-secondary);
  color: var(--theme-primary-dark);
}

/* Override Bulma hero sections for our themes */
.chat-show.theme-dark .hero.is-primary,
.theme-dark .hero.is-primary {
  background: linear-gradient(135deg, #2d2d2d, #404040) !important;
}

.chat-show.theme-dark-purple .hero.is-primary,
.theme-dark-purple .hero.is-primary {
  background: linear-gradient(135deg, #2d2d2d, #404040) !important;
}

.chat-show.theme-dark-primary .hero.is-primary,
.theme-dark-primary .hero.is-primary {
  background: linear-gradient(135deg, #2d2d2d, #404040) !important;
}

.chat-show.theme-dark-link .hero.is-primary,
.theme-dark-link .hero.is-primary {
  background: linear-gradient(135deg, #2d2d2d, #404040) !important;
}

.chat-show.theme-dark-orange .hero.is-primary,
.theme-dark-orange .hero.is-primary {
  background: linear-gradient(135deg, #2d2d2d, #404040) !important;
}

/* Theme dropdown in settings form */
.field .select select {
  min-width: 200px;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field .select select option {
  white-space: nowrap;
  min-width: 200px;
  max-width: 300px;
  padding: 0.5rem;
}

.chat-show.theme-white .hero.is-primary,
.theme-white .hero.is-primary {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end)) !important;
}

.chat-show.theme-purple .hero.is-primary,
.theme-purple .hero.is-primary {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end)) !important;
}

.chat-show.theme-gray .hero.is-primary,
.theme-gray .hero.is-primary {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end)) !important;
}

.chat-show.theme-orange .hero.is-primary,
.theme-orange .hero.is-primary {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end)) !important;
}

.chat-show.theme-blue .hero.is-primary,
.theme-blue .hero.is-primary {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end)) !important;
}

/* White themes hero sections - use theme colors */
.chat-show.theme-white-purple .hero.is-primary,
.theme-white-purple .hero.is-primary {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end)) !important;
}

.chat-show.theme-white-primary .hero.is-primary,
.theme-white-primary .hero.is-primary {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end)) !important;
}

.chat-show.theme-white-link .hero.is-primary,
.theme-white-link .hero.is-primary {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end)) !important;
}

.chat-show.theme-white-orange .hero.is-primary,
.theme-white-orange .hero.is-primary {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end)) !important;
}

/* Chat Show View Theme Styles */
.chat-show.theme-dark {
  background: var(--theme-background);
  color: var(--theme-text);
}

.chat-show.theme-dark .hero {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
}

.chat-show.theme-dark .hero .title,
.chat-show.theme-dark .hero .subtitle {
  color: white;
}

.chat-show.theme-dark .box {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
}

.chat-show.theme-dark .button.is-primary {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
}

.chat-show.theme-dark .button.is-primary:hover {
  background: var(--theme-primary-dark);
  border-color: var(--theme-primary-dark);
}

/* White Theme Show */
.chat-show.theme-white {
  background: var(--theme-background);
  color: var(--theme-text);
}

.chat-show.theme-white .hero {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
}

.chat-show.theme-white .hero .title,
.chat-show.theme-white .hero .subtitle {
  color: white;
}

/* Purple Theme Show */
.chat-show.theme-purple {
  background: var(--theme-background);
  color: var(--theme-text);
}

.chat-show.theme-purple .hero {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
}

.chat-show.theme-purple .hero .title,
.chat-show.theme-purple .hero .subtitle {
  color: white;
}

/* Gray Theme Show */
.chat-show.theme-gray {
  background: var(--theme-background);
  color: var(--theme-text);
}

.chat-show.theme-gray .hero {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
}

.chat-show.theme-gray .hero .title,
.chat-show.theme-gray .hero .subtitle {
  color: white;
}

/* Orange Theme Show */
.chat-show.theme-orange {
  background: var(--theme-background);
  color: var(--theme-text);
}

.chat-show.theme-orange .hero {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
}

.chat-show.theme-orange .hero .title,
.chat-show.theme-orange .hero .subtitle {
  color: white;
}

/* Blue Theme Show */
.chat-show.theme-blue {
  background: var(--theme-background);
  color: var(--theme-text);
}

.chat-show.theme-blue .hero {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
}

.chat-show.theme-blue .hero .title,
.chat-show.theme-blue .hero .subtitle {
  color: white;
}

/* Message bubbles theme support */
.message-bubble.theme-dark {
  background: var(--theme-primary);
  color: white;
}

.message-bubble.theme-white {
  background: var(--theme-primary);
  color: white;
}

.message-bubble.theme-purple {
  background: var(--theme-primary);
  color: white;
}

.message-bubble.theme-gray {
  background: var(--theme-primary);
  color: white;
}

.message-bubble.theme-orange {
  background: var(--theme-primary);
  color: white;
}

.message-bubble.theme-blue {
  background: var(--theme-primary);
  color: white;
}

/* Button theme support */
.button.theme-dark {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
  color: white;
}

.button.theme-dark:hover {
  background: var(--theme-primary-dark);
  border-color: var(--theme-primary-dark);
}

.button.theme-white {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
  color: white;
}

.button.theme-purple {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
  color: white;
}

.button.theme-gray {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
  color: white;
}

.button.theme-orange {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
  color: white;
}

.button.theme-blue {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
  color: white;
}

/* Input field theme support */
.input.theme-dark,
.textarea.theme-dark {
  background: var(--theme-card);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

.input.theme-white,
.textarea.theme-white {
  background: var(--theme-card);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

.input.theme-purple,
.textarea.theme-purple {
  background: var(--theme-card);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

.input.theme-gray,
.textarea.theme-gray {
  background: var(--theme-card);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

.input.theme-orange,
.textarea.theme-orange {
  background: var(--theme-card);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

.input.theme-blue,
.textarea.theme-blue {
  background: var(--theme-card);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

/* Dark Mixed Themes Show */
.chat-show.theme-dark-purple {
  background: var(--theme-background);
  color: var(--theme-text);
}

.chat-show.theme-dark-purple .hero {
  background: linear-gradient(135deg, #2d2d2d, #404040);
}

.chat-show.theme-dark-purple .hero .title,
.chat-show.theme-dark-purple .hero .subtitle {
  color: white;
}

.chat-show.theme-dark-purple .box {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
}

.chat-show.theme-dark-primary {
  background: var(--theme-background);
  color: var(--theme-text);
}

.chat-show.theme-dark-primary .hero {
  background: linear-gradient(135deg, #2d2d2d, #404040);
}

.chat-show.theme-dark-primary .hero .title,
.chat-show.theme-dark-primary .hero .subtitle {
  color: white;
}

.chat-show.theme-dark-primary .box {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
}

.chat-show.theme-dark-link {
  background: var(--theme-background);
  color: var(--theme-text);
}

.chat-show.theme-dark-link .hero {
  background: linear-gradient(135deg, #2d2d2d, #404040);
}

.chat-show.theme-dark-link .hero .title,
.chat-show.theme-dark-link .hero .subtitle {
  color: white;
}

.chat-show.theme-dark-link .box {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
}

.chat-show.theme-dark-orange {
  background: var(--theme-background);
  color: var(--theme-text);
}

.chat-show.theme-dark-orange .hero {
  background: linear-gradient(135deg, #2d2d2d, #404040);
}

.chat-show.theme-dark-orange .hero .title,
.chat-show.theme-dark-orange .hero .subtitle {
  color: white;
}

.chat-show.theme-dark-orange .box {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
}

/* White Mixed Themes Show */
.chat-show.theme-white-purple {
  background: var(--theme-background);
  color: var(--theme-text);
}

.chat-show.theme-white-purple .hero {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
}

.chat-show.theme-white-purple .hero .title,
.chat-show.theme-white-purple .hero .subtitle {
  color: white;
}

.chat-show.theme-white-purple .box {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
}

.chat-show.theme-white-primary {
  background: var(--theme-background);
  color: var(--theme-text);
}

.chat-show.theme-white-primary .hero {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
}

.chat-show.theme-white-primary .hero .title,
.chat-show.theme-white-primary .hero .subtitle {
  color: white;
}

.chat-show.theme-white-primary .box {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
}

.chat-show.theme-white-link {
  background: var(--theme-background);
  color: var(--theme-text);
}

.chat-show.theme-white-link .hero {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
}

.chat-show.theme-white-link .hero .title,
.chat-show.theme-white-link .hero .subtitle {
  color: white;
}

.chat-show.theme-white-link .box {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
}

.chat-show.theme-white-orange {
  background: var(--theme-background);
  color: var(--theme-text);
}

.chat-show.theme-white-orange .hero {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
}

.chat-show.theme-white-orange .hero .title,
.chat-show.theme-white-orange .hero .subtitle {
  color: white;
}

.chat-show.theme-white-orange .box {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
}

/* Send Button Theme Styles */
.chat-show .button.is-primary[type="submit"],
.chat-show .button.is-primary#send-message-btn,
.chat-show .button.is-primary.send-button {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: white !important;
}

.chat-show .button.is-primary[type="submit"]:hover,
.chat-show .button.is-primary#send-message-btn:hover,
.chat-show .button.is-primary.send-button:hover {
  background-color: var(--theme-primary-dark) !important;
  border-color: var(--theme-primary-dark) !important;
}

/* Message Box Send Button */
.box .button.is-primary[type="submit"],
.box .button.is-primary#send-message-btn,
.box .button.is-primary.send-button {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: white !important;
}

.box .button.is-primary[type="submit"]:hover,
.box .button.is-primary#send-message-btn:hover,
.box .button.is-primary.send-button:hover {
  background-color: var(--theme-primary-dark) !important;
  border-color: var(--theme-primary-dark) !important;
}

/* Tab Menu Items Theme Styles */
.chat-show .tabs.is-toggle li.is-active a {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: white !important;
}

.chat-show .tabs.is-toggle li a {
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

.chat-show .tabs.is-toggle li a:hover {
  background-color: var(--theme-secondary) !important;
  color: var(--theme-text) !important;
}

/* Left Panel Tab Menu Items */
.chat-show #left-panel .tabs.is-toggle li.is-active a {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: white !important;
}

.chat-show #left-panel .tabs.is-toggle li a {
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

.chat-show #left-panel .tabs.is-toggle li a:hover {
  background-color: var(--theme-secondary) !important;
  color: var(--theme-text) !important;
}

/* Chat Card Header Theme Styles */
.chat-card .card-header {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end)) !important;
  color: white !important;
}

.chat-card .card-header-title {
  color: white !important;
}

/* Dark themes - theme-colored headers */
.chat-card.theme-dark .card-header {
  background: linear-gradient(135deg, #2d2d2d, #404040) !important;
  color: white !important;
}

.chat-card.theme-dark-purple .card-header {
  background: linear-gradient(135deg, #6b21a8, #8b5cf6) !important;
  color: white !important;
}

.chat-card.theme-dark-primary .card-header {
  background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
  color: white !important;
}

.chat-card.theme-dark-link .card-header {
  background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
  color: white !important;
}

.chat-card.theme-dark-orange .card-header {
  background: linear-gradient(135deg, #c2410c, #f97316) !important;
  color: white !important;
}

.chat-card.theme-dark .card-header-title,
.chat-card.theme-dark-purple .card-header-title,
.chat-card.theme-dark-primary .card-header-title,
.chat-card.theme-dark-link .card-header-title,
.chat-card.theme-dark-orange .card-header-title {
  color: white !important;
}

/* Force hero section theme colors with maximum specificity */
.chat-show.theme-dark .hero.is-primary {
  background: linear-gradient(135deg, #2d2d2d, #404040) !important;
}

.chat-show.theme-dark-purple .hero.is-primary {
  background: linear-gradient(135deg, #6b21a8, #8b5cf6) !important;
}

.chat-show.theme-dark-primary .hero.is-primary {
  background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
}

.chat-show.theme-dark-link .hero.is-primary {
  background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
}

.chat-show.theme-dark-orange .hero.is-primary {
  background: linear-gradient(135deg, #c2410c, #f97316) !important;
}

.chat-show.theme-white .hero.is-primary,
.chat-show.theme-purple .hero.is-primary,
.chat-show.theme-gray .hero.is-primary,
.chat-show.theme-orange .hero.is-primary,
.chat-show.theme-blue .hero.is-primary,
.chat-show.theme-white-purple .hero.is-primary,
.chat-show.theme-white-primary .hero.is-primary,
.chat-show.theme-white-link .hero.is-primary,
.chat-show.theme-white-orange .hero.is-primary {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end)) !important;
}

/* Chat Show Page Background Colors */
.chat-show.theme-dark,
.chat-show.theme-dark-purple,
.chat-show.theme-dark-primary,
.chat-show.theme-dark-link,
.chat-show.theme-dark-orange {
  background-color: var(--theme-background) !important;
  color: var(--theme-text) !important;
  min-height: 100vh;
}

.chat-show.theme-white,
.chat-show.theme-purple,
.chat-show.theme-gray,
.chat-show.theme-orange,
.chat-show.theme-blue,
.chat-show.theme-white-purple,
.chat-show.theme-white-primary,
.chat-show.theme-white-link,
.chat-show.theme-white-orange {
  background-color: var(--theme-background) !important;
  color: var(--theme-text) !important;
  min-height: 100vh;
}

/* Body background for chat show pages */
body:has(.chat-show.theme-dark),
body:has(.chat-show.theme-dark-purple),
body:has(.chat-show.theme-dark-primary),
body:has(.chat-show.theme-dark-link),
body:has(.chat-show.theme-dark-orange) {
  background-color: var(--theme-background) !important;
}

body:has(.chat-show.theme-white),
body:has(.chat-show.theme-purple),
body:has(.chat-show.theme-gray),
body:has(.chat-show.theme-orange),
body:has(.chat-show.theme-blue),
body:has(.chat-show.theme-white-purple),
body:has(.chat-show.theme-white-primary),
body:has(.chat-show.theme-white-link),
body:has(.chat-show.theme-white-orange) {
  background-color: var(--theme-background) !important;
}

/* Rounded Parent Container */
.chat-show .container.is-two-thirds {
  border-radius: var(--radius-xl, 16px) !important;
  overflow: hidden;
  box-shadow: var(--shadow-modal, 0 20px 40px -12px rgba(0, 0, 0, 0.22)) !important;
  background-color: var(--theme-background) !important;
}

/* Modern soft shadows for cards and components */
.chat-show .card {
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px -2px rgba(0, 0, 0, 0.06)) !important;
  border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.06)) !important;
}

.chat-show .box {
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px -2px rgba(0, 0, 0, 0.06)) !important;
  border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.06)) !important;
}

.chat-show .button {
  box-shadow: var(--shadow-button, 0 1px 2px rgba(0, 0, 0, 0.05)) !important;
}

.chat-show .tabs.is-toggle li a {
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.03)) !important;
}

/* Hero Address Styling */
.chat-show .hero-address {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-top: 0.25rem;
  font-weight: 400;
}

/* Ensure address is visible on all themes */
.chat-show.theme-dark .hero-address,
.chat-show.theme-dark-purple .hero-address,
.chat-show.theme-dark-primary .hero-address,
.chat-show.theme-dark-link .hero-address,
.chat-show.theme-dark-orange .hero-address {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.chat-show.theme-white .hero-address,
.chat-show.theme-purple .hero-address,
.chat-show.theme-gray .hero-address,
.chat-show.theme-orange .hero-address,
.chat-show.theme-blue .hero-address,
.chat-show.theme-white-purple .hero-address,
.chat-show.theme-white-primary .hero-address,
.chat-show.theme-white-link .hero-address,
.chat-show.theme-white-orange .hero-address {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Fix label colors in modals for light mode themes */
.theme-white .modal .field label,
.theme-white .modal .field .label,
.theme-white-purple .modal .field label,
.theme-white-purple .modal .field .label,
.theme-white-primary .modal .field label,
.theme-white-primary .modal .field .label,
.theme-white-link .modal .field label,
.theme-white-link .modal .field .label,
.theme-white-orange .modal .field label,
.theme-white-orange .modal .field .label {
  color: #363636 !important;
  font-weight: 600;
}