/* Import required fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Typography */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --line-height-base: 1.5;
  --font-weight-normal: 400;

  /* Font Sizes */
  --font-size-base-small: 0.875rem;
  --font-size-base: 1rem;
  --font-size-base-big: 1.125rem;

  /* Header */
  --header-title-align: left;
  --header-padding: 1em 1.5em;

  /* Chat Bubble */
  --chat-bubble-radius: 1.25em;
  --chat-bubble-radius-user-bottom-right: 0.35em;
  --chat-bubble-radius-assistant-bottom-left: 0.35em;
  --chat-bubble-padding: 0.875em 1.25em;
  --chat-bubble-max-width: 85%;

  /* Avatar */
  --avatar-user-path: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIxOSIgZmlsbD0icmdiYSg5NSwgNzAsIDE4MCwgMC4xKSIgc3Ryb2tlPSJyZ2JhKDEyMCwgOTAsIDIwMCwgMC40KSIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTIwIDEwQzE3LjIzODYgMTAgMTUgMTIuMjM4NiAxNSAxNUMxNSAxNy43NjE0IDE3LjIzODYgMjAgMjAgMjBDMjIuNzYxNCAyMCAyNSAxNy43NjE0IDI1IDE1QzI1IDEyLjIzODYgMjIuNzYxNCAxMCAyMCAxMFoiIGZpbGw9InJnYmEoOTUsIDcwLCAxODAsIDEpIi8+PHBhdGggZD0iTTI4IDMwQzI4IDI1LjU4MTcgMjQuNDE4MyAyMiAyMCAyMkMxNS41ODE3IDIyIDEyIDI1LjU4MTcgMTIgMzAiIHN0cm9rZT0icmdiYSg5NSwgNzAsIDE4MCwgMSkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+");
  --avatar-assistant-path: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIxOSIgZmlsbD0icmdiYSgyNDUsIDI0MiwgMjUyLCAxKSIgc3Ryb2tlPSJyZ2JhKDEyMCwgOTAsIDIwMCwgMC4zKSIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTIwIDExQzE2LjEzNCAxMSAxMyAxNC4xMzQgMTMgMThDMTMgMjEuODY2IDE2LjEzNCAyNSAyMCAyNUMyMy44NjYgMjUgMjcgMjEuODY2IDI3IDE4QzI3IDE0LjEzNCAyMy44NjYgMTEgMjAgMTFaTTIwIDEzQzIyLjc2MTQgMTMgMjUgMTUuMjM4NiAyNSAxOEMyNSAyMC43NjE0IDIyLjc2MTQgMjMgMjAgMjNDMTcuMjM4NiAyMyAxNSAyMC43NjE0IDE1IDE4QzE1IDE1LjIzODYgMTcuMjM4NiAxMyAyMCAxM1oiIGZpbGw9InJnYmEoMTIwLCA5MCwgMjAwLCAxKSIvPjxwYXRoIGQ9Ik0xNyAxNy41QzE3IDE4LjMyODQgMTcuNjcxNiAxOSAxOC41IDE5QzE5LjMyODQgMTkgMjAgMTguMzI4NCAyMCAxNy41QzIwIDE2LjY3MTYgMTkuMzI4NCAxNiAxOC41IDE2QzE3LjY3MTYgMTYgMTcgMTYuNjcxNiAxNyAxNy41WiIgZmlsbD0icmdiYSgxMjAsIDkwLCAyMDAsIDEpIi8+PHBhdGggZD0iTTIwIDE3LjVDMjAgMTguMzI4NCAyMC42NzE2IDE5IDIxLjUgMTlDMjIuMzI4NCAxOSAyMyAxOC4zMjg0IDIzIDE3LjVDMjMgMTYuNjcxNiAyMi4zMjg0IDE2IDIxLjUgMTZDMjAuNjcxNiAxNiAyMCAxNi42NzE2IDIwIDE3LjVaIiBmaWxsPSJyZ2JhKDEyMCwgOTAsIDIwMCwgMSkiLz48cGF0aCBkPSJNMTYgMjhDMTYgMjYuMzQzMSAxNy4zNDMxIDI1IDE5IDI1SDIxQzIyLjY1NjkgMjUgMjQgMjYuMzQzMSAyNCAyOCIgc3Ryb2tlPSJyZ2JhKDEyMCwgOTAsIDIwMCwgMSkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+");
  --avatar-size: 2.25em;
  --avatar-margin: 0.625em;
  --avatar-user-bottom: 16px;
  --avatar-assistant-bottom: 24px;
  --chat-bubble-align: flex-end;

  /* Input Container */
  --input-container-size: 1.2em;

}

/* Light Theme (default) */
[data-theme="light"] {
  /* Global Colors */
  --color-text-main: rgba(30, 30, 50, 1);
  --color-text-placeholder: rgba(120, 110, 140, 1);
  --color-border: rgba(120, 90, 200, 0.2);
  --color-box-shadow-light: rgba(95, 70, 180, 0.1);

  /* Header */
  --color-header-bg: linear-gradient(135deg, rgba(95, 70, 180, 1), rgba(140, 90, 210, 1));
  --color-header-title-text: rgba(255, 255, 255, 1);

  /* Chat Container */
  --color-chat-background: linear-gradient(165deg, rgba(250, 248, 255, 1), rgba(245, 242, 252, 1));

  /* Chat Bubbles */
  --color-user-bubble-bg: linear-gradient(120deg, rgba(95, 70, 180, 1), rgba(120, 90, 200, 1));
  --color-user-bubble-text: rgba(255, 255, 255, 1);
  --color-server-bubble-bg: linear-gradient(120deg, rgba(255, 255, 255, 1), rgba(250, 248, 255, 1));
  --color-server-bubble-text: rgba(30, 30, 50, 1);
  --color-timestamp: rgba(120, 110, 140, 0.75);
  --color-teaser-bubble-bg: linear-gradient(120deg, rgba(85, 60, 170, 1), rgba(110, 80, 190, 1));
  --color-teaser-bubble-text: rgba(255, 255, 255, 1);

  /* Loading Dots */
  --color-loading-dot: rgba(120, 90, 200, 1);

  /* Burger Menu */
  --burger-menu-bg: rgba(255, 255, 255, 0.98);
  --burger-menu-text: rgba(30, 30, 50, 1);
  --burger-menu-hover-bg: rgba(95, 70, 180, 0.08);
  --burger-menu-warning-text: rgba(220, 38, 38, 1);
  --burger-menu-warning-bg: rgba(220, 38, 38, 0.1);
  --burger-menu-thumb-bg: rgba(120, 90, 200, 1);

  /* Inputs */
  --color-input-bg: rgba(255, 255, 255, 0.98);
  --color-input-border: rgba(120, 90, 200, 0.25);
  --color-input-placeholder: rgba(120, 110, 140, 1);
  --color-input-container-bg: linear-gradient(135deg, rgba(240, 235, 255, 1), rgba(235, 230, 252, 1));

  /* Buttons */
  --color-button-bg: rgba(95, 70, 180, 1);
  --color-button-text: rgba(255, 255, 255, 1);
  --color-button-hover-shadow: 0 0 20px rgba(95, 70, 180, 0.4);

  /* Image Component */
  --color-image-loading-bg: rgba(245, 242, 252, 1);
  --color-image-caption-text: rgba(120, 110, 140, 1);
  --color-image-caption-border: rgba(120, 90, 200, 0.2);

  /* Disclaimer Bar */
  --color-disclaimer-inner-shadow: rgba(95, 70, 180, 0.1);
  --color-disclaimer-bg: rgba(248, 246, 252, 1);
  --color-disclaimer-text: rgba(100, 90, 120, 1);

  /* Markdown */
  --color-markdown-link: rgba(95, 70, 180, 1);
  --color-markdown-link-hover: rgba(75, 50, 160, 1);
  --color-blockquote-border: rgba(95, 70, 180, 0.5);
  --color-blockquote-bg: rgba(95, 70, 180, 0.06);
  --color-table-border: rgba(120, 90, 200, 0.2);
  --color-table-header-bg: rgba(95, 70, 180, 0.08);
  --color-markdown-code-container-bg: rgba(248, 246, 252, 1);

  /* AIConcierge Deep Link Pills */
  --color-aiconcierge-pill-bg: rgba(245, 242, 252, 1);
  --color-aiconcierge-pill-hover-bg: rgba(235, 230, 250, 1);
  --color-aiconcierge-pill-border: rgba(120, 90, 200, 0.2);

  /* Carousel */
  --color-carousel-item-bg: rgba(255, 255, 255, 1);
  --color-carousel-item-shadow: 0 0 20px rgba(95, 70, 180, 0.15);
  --color-carousel-item-title: rgba(30, 30, 50, 1);
  --color-carousel-item-subtitle: rgba(120, 110, 140, 1);
  --color-carousel-item-button: rgba(95, 70, 180, 1);
  --color-carousel-item-button-hover-bg: rgba(245, 242, 252, 1);
  --color-carousel-nav-bg: rgba(255, 255, 255, 1);
  --color-carousel-nav-border: rgba(120, 90, 200, 0.2);
  --color-carousel-nav-shadow: 0 0 12px rgba(95, 70, 180, 0.2);
  --color-carousel-nav-color: rgba(120, 110, 140, 1);
  --color-carousel-nav-hover-bg: rgba(245, 242, 252, 1);
  --color-carousel-nav-hover-shadow: 0 0 15px rgba(95, 70, 180, 0.3);
  --color-carousel-nav-hover-color: rgba(30, 30, 50, 1);
  --color-carousel-item-border: rgba(120, 90, 200, 0.15);

  /* Feedback Form */
  --color-feedback-input-border: rgba(120, 90, 200, 0.2);
  --color-feedback-input-border-focus: rgba(95, 70, 180, 1);
  --color-feedback-input-border-invalid: rgba(220, 38, 38, 1);
  --color-feedback-submit-bg: rgba(95, 70, 180, 1);
  --color-feedback-submit-bg-hover: rgba(75, 50, 160, 1);
  --color-feedback-submit-text: rgba(255, 255, 255, 1);
  --color-feedback-message-text: rgba(120, 110, 140, 1);
  --color-feedback-confirmation-text: rgba(34, 197, 94, 1);

  /* Error Message */
  --color-error: rgba(220, 38, 38, 1);
  --color-error-background: rgba(220, 38, 38, 0.1);

}

/* Dark Theme */
[data-theme="dark"] {
  /* Global Colors */
  --color-text-main: rgba(245, 245, 250, 1);
  --color-text-placeholder: rgba(160, 155, 175, 1);
  --color-border: rgba(160, 130, 230, 0.25);
  --color-box-shadow-light: rgba(0, 0, 0, 0.4);

  /* Header */
  --color-header-bg: linear-gradient(135deg, rgba(75, 50, 150, 1), rgba(100, 70, 175, 1));
  --color-header-title-text: rgba(245, 245, 250, 1);

  /* Chat Container */
  --color-chat-background: linear-gradient(165deg, rgba(25, 20, 45, 1), rgba(35, 28, 55, 1));

  /* Chat Bubbles */
  --color-user-bubble-bg: linear-gradient(120deg, rgba(100, 75, 185, 1), rgba(125, 95, 205, 1));
  --color-user-bubble-text: rgba(255, 255, 255, 1);
  --color-server-bubble-bg: linear-gradient(120deg, rgba(45, 38, 65, 1), rgba(55, 45, 75, 1));
  --color-server-bubble-text: rgba(245, 245, 250, 1);
  --color-timestamp: rgba(160, 155, 175, 0.75);
  --color-teaser-bubble-bg: linear-gradient(120deg, rgba(90, 65, 175, 1), rgba(115, 85, 195, 1));
  --color-teaser-bubble-text: rgba(255, 255, 255, 1);

  /* Loading Dots */
  --color-loading-dot: rgba(160, 130, 230, 1);

  /* Burger Menu */
  --burger-menu-bg: rgba(35, 28, 55, 0.98);
  --burger-menu-text: rgba(245, 245, 250, 1);
  --burger-menu-hover-bg: rgba(120, 90, 200, 0.12);
  --burger-menu-warning-text: rgba(248, 113, 113, 1);
  --burger-menu-warning-bg: rgba(248, 113, 113, 0.1);
  --burger-menu-thumb-bg: rgba(160, 130, 230, 1);

  /* Inputs */
  --color-input-bg: rgba(35, 28, 55, 0.98);
  --color-input-border: rgba(160, 130, 230, 0.25);
  --color-input-placeholder: rgba(160, 155, 175, 1);
  --color-input-container-bg: linear-gradient(135deg, rgba(30, 24, 50, 1), rgba(40, 32, 60, 1));

  /* Buttons */
  --color-button-bg: rgba(120, 90, 200, 1);
  --color-button-text: rgba(255, 255, 255, 1);
  --color-button-hover-shadow: 0 0 20px rgba(120, 90, 200, 0.4);

  /* Image Component */
  --color-image-loading-bg: rgba(45, 38, 65, 1);
  --color-image-caption-text: rgba(160, 155, 175, 1);
  --color-image-caption-border: rgba(160, 130, 230, 0.2);

  /* Disclaimer Bar */
  --color-disclaimer-inner-shadow: rgba(0, 0, 0, 0.3);
  --color-disclaimer-bg: rgba(30, 24, 50, 1);
  --color-disclaimer-text: rgba(160, 155, 175, 1);

  /* Markdown */
  --color-markdown-link: rgba(140, 110, 220, 1);
  --color-markdown-link-hover: rgba(160, 130, 240, 1);
  --color-blockquote-border: rgba(140, 110, 220, 0.5);
  --color-blockquote-bg: rgba(140, 110, 220, 0.08);
  --color-table-border: rgba(160, 130, 230, 0.2);
  --color-table-header-bg: rgba(140, 110, 220, 0.1);
  --color-markdown-code-container-bg: rgba(30, 24, 50, 1);

  /* AIConcierge Deep Link Pills */
  --color-aiconcierge-pill-bg: rgba(45, 38, 65, 1);
  --color-aiconcierge-pill-hover-bg: rgba(55, 45, 75, 1);
  --color-aiconcierge-pill-border: rgba(160, 130, 230, 0.2);

  /* Carousel */
  --color-carousel-item-bg: rgba(45, 38, 65, 1);
  --color-carousel-item-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  --color-carousel-item-title: rgba(245, 245, 250, 1);
  --color-carousel-item-subtitle: rgba(160, 155, 175, 1);
  --color-carousel-item-button: rgba(140, 110, 220, 1);
  --color-carousel-item-button-hover-bg: rgba(55, 45, 75, 1);
  --color-carousel-nav-bg: rgba(45, 38, 65, 1);
  --color-carousel-nav-border: rgba(160, 130, 230, 0.2);
  --color-carousel-nav-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
  --color-carousel-nav-color: rgba(160, 155, 175, 1);
  --color-carousel-nav-hover-bg: rgba(55, 45, 75, 1);
  --color-carousel-nav-hover-shadow: 0 0 15px rgba(140, 110, 220, 0.3);
  --color-carousel-nav-hover-color: rgba(245, 245, 250, 1);
  --color-carousel-item-border: rgba(160, 130, 230, 0.15);

  /* Feedback Form */
  --color-feedback-input-border: rgba(160, 130, 230, 0.2);
  --color-feedback-input-border-focus: rgba(140, 110, 220, 1);
  --color-feedback-input-border-invalid: rgba(248, 113, 113, 1);
  --color-feedback-submit-bg: rgba(120, 90, 200, 1);
  --color-feedback-submit-bg-hover: rgba(140, 110, 220, 1);
  --color-feedback-submit-text: rgba(255, 255, 255, 1);
  --color-feedback-message-text: rgba(160, 155, 175, 1);
  --color-feedback-confirmation-text: rgba(74, 222, 128, 1);

  /* Error Message */
  --color-error: rgba(248, 113, 113, 1);
  --color-error-background: rgba(248, 113, 113, 0.1);

}