/* Import required fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
 
:root {
  /* Typography */
  --font-family-base: 'Roboto', 'Helvetica Neue', Arial, 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.2em;
  --chat-bubble-radius-user-bottom-right: 0.3em;
  --chat-bubble-radius-assistant-bottom-left: 0.3em;
  --chat-bubble-padding: 0.8em 1.2em;
  --chat-bubble-max-width: 85%;
 
  /* Avatar */
  --avatar-user-path: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjE5IiBmaWxsPSJyZ2JhKDIyMCwgMzgsIDM4LCAwLjEpIiBzdHJva2U9InJnYmEoMjIwLCAzOCwgMzgsIDEpIiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxwYXRoIGQ9Ik0yMCAxMEMxNy4yMzg2IDEwIDE1IDEyLjIzODYgMTUgMTVDMTUgMTcuNzYxNCAxNy4yMzg2IDIwIDIwIDIwQzIyLjc2MTQgMjAgMjUgMTcuNzYxNCAyNSAxNUMyNSAxMi4yMzg2IDIyLjc2MTQgMTAgMjAgMTBaIiBmaWxsPSJyZ2JhKDIyMCwgMzgsIDM4LCAxKSIvPgogICAgPHBhdGggZD0iTTI4IDMwQzI4IDI1LjU4MTcgMjQuNDE4MyAyMiAyMCAyMkMxNS41ODE3IDIyIDEyIDI1LjU4MTcgMTIgMzAiIHN0cm9rZT0icmdiYSgyMjAsIDM4LCAzOCwgMSkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPg==");
  --avatar-assistant-path: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjE5IiBmaWxsPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDEpIiBzdHJva2U9InJnYmEoMjI0LCAyMjQsIDIyNCwgMSkiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgPHBhdGggZD0iTTIwIDExQzE2LjEzNCAxMSAxMyAxNC4xMzQgMTMgMThDMTMgMjEuODY2IDE2LjEzNCAyNSAyMCAyNUMyMy44NjYgMjUgMjcgMjEuODY2IDI3IDE4QzI3IDE0LjEzNCAyMy44NjYgMTEgMjAgMTFaTTIwIDEzQzIyLjc2MTQgMTMgMjUgMTUuMjM4NiAyNSAxOEMyNSAyMC43NjE0IDIyLjc2MTQgMjMgMjAgMjNDMTcuMjM4NiAyMyAxNSAyMC43NjE0IDE1IDE4QzE1IDE1LjIzODYgMTcuMjM4NiAxMyAyMCAxM1oiIGZpbGw9InJnYmEoMTE3LCAxMTcsIDExNywgMSkiLz4KICAgIDxwYXRoIGQ9Ik0xNyAxNy41QzE3IDE4LjMyODQgMTcuNjcxNiAxOSAxOC41IDE5QzE5LjMyODQgMTkgMjAgMTguMzI4NCAyMCAxNy41QzIwIDE2LjY3MTYgMTkuMzI4NCAxNiAxOC41IDE2QzE3LjY3MTYgMTYgMTcgMTYuNjcxNiAxNyAxNy41WiIgZmlsbD0icmdiYSgxMTcsIDExNywgMTE3LCAxKSIvPgogICAgPHBhdGggZD0iTTIwIDE3LjVDMjAgMTguMzI4NCAyMC42NzE2IDE5IDIxLjUgMTlDMjIuMzI4NCAxOSAyMyAxOC4zMjg0IDIzIDE3LjVDMjMgMTYuNjcxNiAyMi4zMjg0IDE2IDIxLjUgMTZDMjAuNjcxNiAxNiAyMCAxNi42NzE2IDIwIDE3LjVaIiBmaWxsPSJyZ2JhKDExNywgMTE3LCAxMTcsIDEpIi8+CiAgICA8cGF0aCBkPSJNMTYgMjhDMTYgMjYuMzQzMSAxNy4zNDMxIDI1IDE5IDI1SDIxQzIyLjY1NjkgMjUgMjQgMjYuMzQzMSAyNCAyOCIgc3Ryb2tlPSJyZ2JhKDExNywgMTE3LCAxMTcsIDEpIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4=");
  --avatar-size: 2.2em;
  --avatar-margin: 0.6em;
  --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(33, 33, 33, 1);
  --color-text-placeholder: rgba(117, 117, 117, 1);
  --color-border: rgba(224, 224, 224, 1);
  --color-box-shadow-light: rgba(0, 0, 0, 0.1);
 
  /* Header */
  --color-header-bg: rgba(220, 38, 38, 1);
  --color-header-title-text: rgba(255, 255, 255, 1);
 
  /* Chat Container */
  --color-chat-background: rgba(250, 250, 250, 1);
 
  /* Chat Bubbles */
  --color-user-bubble-bg: rgba(220, 38, 38, 1);
  --color-user-bubble-text: rgba(255, 255, 255, 1);
  --color-server-bubble-bg: rgba(255, 255, 255, 1);
  --color-server-bubble-text: rgba(33, 33, 33, 1);
  --color-timestamp: rgba(117, 117, 117, 1);
  --color-teaser-bubble-bg: rgba(239, 68, 68, 1);
  --color-teaser-bubble-text: rgba(255, 255, 255, 1);
 
  /* Loading Dots */
  --color-loading-dot: rgba(220, 38, 38, 1);
 
  /* Burger Menu */
  --burger-menu-bg: rgba(255, 255, 255, 0.98);
  --burger-menu-text: rgba(33, 33, 33, 1);
  --burger-menu-hover-bg: rgba(220, 38, 38, 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(117, 117, 117, 1);
 
  /* Inputs */
  --color-input-bg: rgba(255, 255, 255, 0.98);
  --color-input-border: rgba(224, 224, 224, 1);
  --color-input-placeholder: rgba(117, 117, 117, 1);
  --color-input-container-bg: rgba(245, 245, 245, 1);
 
  /* Buttons */
  --color-button-bg: rgba(220, 38, 38, 1);
  --color-button-text: rgba(255, 255, 255, 1);
  --color-button-hover-shadow: rgba(220, 38, 38, 0.4);
 
  /* Image Component */
  --color-image-loading-bg: rgba(245, 245, 245, 1);
  --color-image-caption-text: rgba(117, 117, 117, 1);
  --color-image-caption-border: rgba(224, 224, 224, 1);
 
  /* Disclaimer Bar */
  --color-disclaimer-inner-shadow: rgba(0, 0, 0, 0.05);
  --color-disclaimer-bg: rgba(250, 250, 250, 1);
  --color-disclaimer-text: rgba(117, 117, 117, 1);
 
  /* Markdown */
  --color-markdown-link: rgba(220, 38, 38, 1);
  --color-markdown-link-hover: rgba(185, 28, 28, 1);
  --color-blockquote-border: rgba(220, 38, 38, 1);
  --color-blockquote-bg: rgba(220, 38, 38, 0.05);
  --color-table-border: rgba(224, 224, 224, 1);
  --color-table-header-bg: rgba(245, 245, 245, 1);
  --color-markdown-code-container-bg: rgba(245, 245, 245, 1);
 
  /* AIConcierge Deep Link Pills */
  --color-aiconcierge-pill-bg: rgba(255, 255, 255, 1);
  --color-aiconcierge-pill-hover-bg: rgba(250, 250, 250, 1);
  --color-aiconcierge-pill-border: rgba(224, 224, 224, 1);
 
  /* Carousel */
  --color-carousel-item-bg: rgba(255, 255, 255, 1);
  --color-carousel-item-shadow: rgba(0, 0, 0, 0.1);
  --color-carousel-item-title: rgba(33, 33, 33, 1);
  --color-carousel-item-subtitle: rgba(117, 117, 117, 1);
  --color-carousel-item-button: rgba(220, 38, 38, 1);
  --color-carousel-item-button-hover-bg: rgba(220, 38, 38, 0.08);
  --color-carousel-nav-bg: rgba(255, 255, 255, 1);
  --color-carousel-nav-border: rgba(224, 224, 224, 1);
  --color-carousel-nav-shadow: rgba(0, 0, 0, 0.15);
  --color-carousel-nav-color: rgba(117, 117, 117, 1);
  --color-carousel-nav-hover-bg: rgba(250, 250, 250, 1);
  --color-carousel-nav-hover-shadow: rgba(0, 0, 0, 0.2);
  --color-carousel-nav-hover-color: rgba(33, 33, 33, 1);
  --color-carousel-item-border: rgba(224, 224, 224, 1);
 
  /* Feedback Form */
  --color-feedback-input-border: rgba(224, 224, 224, 1);
  --color-feedback-input-border-focus: rgba(220, 38, 38, 1);
  --color-feedback-input-border-invalid: rgba(239, 68, 68, 1);
  --color-feedback-submit-bg: rgba(220, 38, 38, 1);
  --color-feedback-submit-bg-hover: rgba(185, 28, 28, 1);
  --color-feedback-submit-text: rgba(255, 255, 255, 1);
  --color-feedback-message-text: rgba(117, 117, 117, 1);
  --color-feedback-confirmation-text: rgba(34, 197, 94, 1);
 
  /* Error Message */
  --color-error: rgba(239, 68, 68, 1);
  --color-error-background: rgba(239, 68, 68, 0.1);
 
}
 
/* Dark Theme */
[data-theme="dark"] {
  /* Global Colors */
  --color-text-main: rgba(245, 245, 245, 1);
  --color-text-placeholder: rgba(158, 158, 158, 1);
  --color-border: rgba(66, 66, 66, 1);
  --color-box-shadow-light: rgba(0, 0, 0, 0.3);
 
  /* Header */
  --color-header-bg: rgba(185, 28, 28, 1);
  --color-header-title-text: rgba(255, 255, 255, 1);
 
  /* Chat Container */
  --color-chat-background: rgba(18, 18, 18, 1);
 
  /* Chat Bubbles */
  --color-user-bubble-bg: rgba(185, 28, 28, 1);
  --color-user-bubble-text: rgba(255, 255, 255, 1);
  --color-server-bubble-bg: rgba(38, 38, 38, 1);
  --color-server-bubble-text: rgba(245, 245, 245, 1);
  --color-timestamp: rgba(158, 158, 158, 1);
  --color-teaser-bubble-bg: rgba(220, 38, 38, 1);
  --color-teaser-bubble-text: rgba(255, 255, 255, 1);
 
  /* Loading Dots */
  --color-loading-dot: rgba(185, 28, 28, 1);
 
  /* Burger Menu */
  --burger-menu-bg: rgba(38, 38, 38, 0.98);
  --burger-menu-text: rgba(245, 245, 245, 1);
  --burger-menu-hover-bg: rgba(185, 28, 28, 0.15);
  --burger-menu-warning-text: rgba(239, 68, 68, 1);
  --burger-menu-warning-bg: rgba(239, 68, 68, 0.1);
  --burger-menu-thumb-bg: rgba(158, 158, 158, 1);
 
  /* Inputs */
  --color-input-bg: rgba(38, 38, 38, 0.98);
  --color-input-border: rgba(66, 66, 66, 1);
  --color-input-placeholder: rgba(158, 158, 158, 1);
  --color-input-container-bg: rgba(28, 28, 28, 1);
 
  /* Buttons */
  --color-button-bg: rgba(185, 28, 28, 1);
  --color-button-text: rgba(255, 255, 255, 1);
  --color-button-hover-shadow: rgba(185, 28, 28, 0.5);
 
  /* Image Component */
  --color-image-loading-bg: rgba(38, 38, 38, 1);
  --color-image-caption-text: rgba(158, 158, 158, 1);
  --color-image-caption-border: rgba(66, 66, 66, 1);
 
  /* Disclaimer Bar */
  --color-disclaimer-inner-shadow: rgba(0, 0, 0, 0.2);
  --color-disclaimer-bg: rgba(28, 28, 28, 1);
  --color-disclaimer-text: rgba(158, 158, 158, 1);
 
  /* Markdown */
  --color-markdown-link: rgba(239, 68, 68, 1);
  --color-markdown-link-hover: rgba(220, 38, 38, 1);
  --color-blockquote-border: rgba(185, 28, 28, 1);
  --color-blockquote-bg: rgba(185, 28, 28, 0.1);
  --color-table-border: rgba(66, 66, 66, 1);
  --color-table-header-bg: rgba(38, 38, 38, 1);
  --color-markdown-code-container-bg: rgba(28, 28, 28, 1);
 
  /* AIConcierge Deep Link Pills */
  --color-aiconcierge-pill-bg: rgba(38, 38, 38, 1);
  --color-aiconcierge-pill-hover-bg: rgba(48, 48, 48, 1);
  --color-aiconcierge-pill-border: rgba(66, 66, 66, 1);
 
  /* Carousel */
  --color-carousel-item-bg: rgba(38, 38, 38, 1);
  --color-carousel-item-shadow: rgba(0, 0, 0, 0.3);
  --color-carousel-item-title: rgba(245, 245, 245, 1);
  --color-carousel-item-subtitle: rgba(158, 158, 158, 1);
  --color-carousel-item-button: rgba(239, 68, 68, 1);
  --color-carousel-item-button-hover-bg: rgba(185, 28, 28, 0.15);
  --color-carousel-nav-bg: rgba(38, 38, 38, 1);
  --color-carousel-nav-border: rgba(66, 66, 66, 1);
  --color-carousel-nav-shadow: rgba(0, 0, 0, 0.3);
  --color-carousel-nav-color: rgba(158, 158, 158, 1);
  --color-carousel-nav-hover-bg: rgba(48, 48, 48, 1);
  --color-carousel-nav-hover-shadow: rgba(0, 0, 0, 0.4);
  --color-carousel-nav-hover-color: rgba(245, 245, 245, 1);
  --color-carousel-item-border: rgba(66, 66, 66, 1);
 
  /* Feedback Form */
  --color-feedback-input-border: rgba(66, 66, 66, 1);
  --color-feedback-input-border-focus: rgba(185, 28, 28, 1);
  --color-feedback-input-border-invalid: rgba(248, 113, 113, 1);
  --color-feedback-submit-bg: rgba(185, 28, 28, 1);
  --color-feedback-submit-bg-hover: rgba(153, 27, 27, 1);
  --color-feedback-submit-text: rgba(255, 255, 255, 1);
  --color-feedback-message-text: rgba(158, 158, 158, 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);
 
}