.MyWaveUI {
  /* ========================================
   * COLOR THEME - Core Brand Colors
   * ======================================== */

  /* Primary brand color - used for main buttons, links, and accent elements */
  --mw-color-primary: #0565ff;

  /* Main text color for dark text on light backgrounds */
  --mw-color-text: #000000;

  /* Text color for light text on dark backgrounds (reversed contrast) */
  --mw-color-text-reversed: #ffffff;

  /* Outline/border color for form fields and interactive elements */
  --mw-color-outline: #525252;

  /* Background color for form fields and input areas */
  --mw-color-field: #f0f0f0;

  /* Surface color for cards, modals, and elevated elements */
  --mw-color-surface: #ffffff;

  /* Block color for section backgrounds and dividers */
  --mw-color-block: #efeded;

  /* Error color for validation messages and error states */
  --mw-color-error: #c70000;

  /* ========================================
   * DERIVED COLORS - Pre-computed hex values
   * ======================================== */

  /* Lighter variant of primary color for hover states and secondary actions */
  --mw-color-primary-alt: hsl(from var(--mw-color-primary) h s calc(l + 36));

  /* Secondary text color for less prominent text */
  --mw-color-text-secondary: hsl(from var(--mw-color-text) h s calc(l + 40));

  /* Hover state for surface elements */
  --mw-color-surface-hover: hsl(from var(--mw-color-surface) h s calc(l - 5));

  /* Pressed/active state for surface elements */
  --mw-color-surface-pressed: hsl(
    from var(--mw-color-surface) h s calc(l - 10)
  );

  /* Hover state for elements on surface backgrounds */
  --mw-color-surface-on-surface-hover: hsl(
    from var(--mw-color-surface) h s calc(l - 8)
  );

  /* Lighter variant of outline color */
  --mw-color-outline-alt: hsl(from var(--mw-color-outline) h s calc(l + 20));

  /* Default outline color for form fields */
  --mw-color-outline-default: hsl(
    from var(--mw-color-outline) h s calc(l + 33)
  );

  /* Error color for form field backgrounds */
  --mw-color-error-field: hsl(from var(--mw-color-error) h s calc(l + 60));

  /* ========================================
   * TYPOGRAPHY
   * ======================================== */

  /* Font family for all text elements */
  --mw-font-family: Inter, 'Helvetica Neue', Helvetica, Arial, serif;

  /* Standard font size for body text */
  --mw-standard-font: 1rem;

  /* Small font size for captions and secondary text */
  --mw-small-font: 0.875rem;

  /* ========================================
   * BORDER RADIUS - Rounded corners system
   * ======================================== */

  /* Base border radius for the design system */
  --mw-border-radius-base: 1.25rem;

  /* Scale factor for border radius variations */
  --mw-border-radius-scale: 0.25rem;

  /* Border radius variations - smaller to larger */
  --mw-border-radius-4: max(
    0rem,
    calc(var(--mw-border-radius) - 4 * var(--mw-border-radius-scale))
  );
  --mw-border-radius-3: max(
    0rem,
    calc(var(--mw-border-radius) - 3 * var(--mw-border-radius-scale))
  );
  --mw-border-radius-2: max(
    0rem,
    calc(var(--mw-border-radius) - 2 * var(--mw-border-radius-scale))
  );
  --mw-border-radius-1: max(
    0rem,
    calc(var(--mw-border-radius) - 1 * var(--mw-border-radius-scale))
  );

  /* Default border radius */
  --mw-border-radius: var(--mw-border-radius-base);

  /* Larger border radius variant */
  --mw-border-radius1: calc(
    var(--mw-border-radius) + 1 * var(--mw-border-radius-scale)
  );

  /* ========================================
   * SCROLLBAR STYLING
   * ======================================== */

  /* Background color for scrollbar track */
  --mw-scrollbar-bg: #e5e3e3;

  /* Background color for scrollbar on hover */
  --mw-scrollbar-hover-bg: #d6d4d4;

  /* Background color for scrollbar when active/dragging */
  --mw-scrollbar-active-bg: #cccaca;

  /* ========================================
   * LOGO AND BRANDING
   * ======================================== */

  --mw-app-logo: url('logo.svg');
  /* Logo image for login modal */
  --mw-login-modal-image: var(--mw-app-logo);

  /* Logo position on login page */
  --mw-landing-page-logo-position-login: center;

  /* Logo image for error modals */
  --mw-error-modal-image: var(--mw-app-logo);

  /* Main logo for landing page */
  --mw-landing-page-logo: var(--mw-app-logo);

  /* Logo for sidebar navigation */
  --mw-sidebar-logo: url('sidebar-logo.svg');

  /* Position of sidebar logo */
  --mw-sidebar-logo-position: center;

  /* Icon logo for collapsed sidebar */
  --mw-sidebar-logo-icon: url('sidebar-logo-collapsed.svg');

  /* ========================================
   * ICON SIZES
   * ======================================== */

  /* Size for close/cross icons */
  --mw-cross-icon-size: 1.25rem;

  /* Standard icon size */
  --mw-icon-size: 1.5rem;

  /* ========================================
   * DATE PICKER STYLING
   * ======================================== */

  /* Border radius for date highlight circles */
  --mw-date-highlight-radius: 0.5rem;

  /* Background color for date hover state */
  --mw-date-hover-bg: #7dc8eb;

  /* Text color for date hover state */
  --mw-date-hover-color: #000;

  /* Background color for selected date */
  --mw-date-selected-bg: #0565ff;

  /* Text color for selected date */
  --mw-date-selected-color: #fff;

  /* ========================================
   * INTERACTION VIEW LAYOUT
   * ======================================== */

  /* Padding for interaction form fields */
  --mw-interaction-fields-padding: 0 0.75rem;

  /* Maximum width for conversation containers */
  --mw-conversation-max-width: 53.75rem;

  /* ========================================
   * FORM FIELD STYLING
   * ======================================== */

  /* Background color for form fields */
  --mw-field-bg: #fff;

  /* Border color for form fields */
  --mw-field-border-color: #dcdcdc;

  /* Error message color for form validation */
  --mw-field-error-message-color: #ff3b00;

  /* Border color for focused form fields */
  --mw-field-focus-border-color: #000;

  /* Gap between form fields */
  --mw-field-gap: 0.7rem;

  /* Color for field hint text */
  --mw-field-hint-color: #a7a7a7;

  /* Color for field labels */
  --mw-field-label-color: #757575;

  /* Color for field placeholder text */
  --mw-field-placeholder-color: #bababa;

  /* Text color inside form fields */
  --mw-field-text-color: #000;

  /* ========================================
   * CHECKBOX AND RADIO BUTTON STYLING
   * ======================================== */

  /* Color for checkbox button elements */
  --mw-checkbox-button-color: #000;

  /* Color for checkbox labels */
  --mw-checkbox-label-color: #000;

  /* Color for radio button elements */
  --mw-radio-button-color: #000;

  /* Color for radio button labels */
  --mw-radio-label-color: #000;

  /* ========================================
   * RICH CONTENT FIELD
   * ======================================== */

  /* Background color for rich content windows */
  --mw-rich-content-window-background: #fff;

  /* ========================================
   * LANDING PAGE STYLING
   * ======================================== */

  /* Background color for landing page */
  --mw-landing-view-bg: #fff;

  /* Background color for "Let's go" button on landing page */
  --mw-intent-submit-button-bg: #404eff;

  /* Background color for left side panel/navbar on landing page */
  --mw-navbar-bg: #404eff;

  /* Background color for predefined interaction tiles */
  --mw-intent-button-bg: #e193d533;

  /* Text color for intent buttons */
  --mw-intent-button-text-color: #000;

  /* Color for intent picker skip button when active */
  --mw-intent-picker-skip-to-active-color: #404eff;

  /* Color for intent picker skip button when inactive */
  --mw-intent-picker-skip-to-inactive-color: #f1f1f1;

  /* Color for intent picker title */
  --mw-intent-picker-title-color: #000;

  /* Color for intent placeholder text */
  --mw-intent-placeholder-color: #2d2d2d;

  /* ========================================
   * CONVERSATION/INTERACTION STYLING
   * ======================================== */

  /* Background color for interaction prompts */
  --mw-interaction-prompt-bg: #f5f6ff;

  /* Border color for interaction prompts */
  --mw-interaction-prompt-border-color: transparent;

  /* Text color for interaction prompts */
  --mw-interaction-prompt-color: #000;

  /* Background color for continue button */
  --mw-interaction-continue-bg: #404eff;

  /* Border color for continue button */
  --mw-interaction-continue-border-color: transparent;

  /* Text color for continue button */
  --mw-interaction-continue-color: #fff;

  /* Background color for disabled continue button */
  --mw-interaction-continue-disabled-bg: #b3b8ff;

  /* Border color for disabled continue button */
  --mw-interaction-continue-disabled-border-color: transparent;

  /* Text color for disabled continue button */
  --mw-interaction-continue-disabled-color: #fff;

  /* Background color for interaction answers */
  --mw-interaction-answer-bg: #fff;

  /* Background color for confirmation buttons */
  --mw-interaction-confirm-bg: #404eff;

  /* Border color for confirmation buttons */
  --mw-interaction-confirm-border-color: transparent;

  /* Text color for confirmation buttons */
  --mw-interaction-confirm-color: #fff;

  /* Error message color for interactions */
  --mw-interaction-error-message-color: #ff3b00;

  /* Opacity for answered interaction views */
  --mw-interaction-view-answered-opacity: 0.5;

  /* ========================================
   * LOGIN/AUTHENTICATION STYLING
   * ======================================== */

  /* Background color for login button */
  --mw-login-button-bg: #404eff;

  /* Text color for login button */
  --mw-login-button-text-color: #fdf6fc;

  /* Background color for login dialog */
  --mw-login-dialogue-bg: #fff;

  /* Color for login validation error messages */
  --mw-login-error-validation-color: #ff3b00;

  /* Border color for focused login input fields */
  --mw-login-input-focus-border: #404eff;

  /* Margin top for error modal image */
  --mw-error-modal-image-margin-top: 2rem;

  /* Margin bottom for error modal image */
  --mw-error-modal-image-margin-bottom: 2rem;

  /* ========================================
   * CONFIRMATION DIALOG STYLING
   * ======================================== */

  /* Background color for negative confirmation buttons */
  --mw-confirmation-negative-bg: #404eff;

  /* Border color for negative confirmation buttons */
  --mw-confirmation-negative-border-color: transparent;

  /* Text color for negative confirmation buttons */
  --mw-confirmation-negative-color: #fff;

  /* Background color for positive confirmation buttons */
  --mw-confirmation-positive-bg: #404eff;

  /* Border color for positive confirmation buttons */
  --mw-confirmation-positive-border-color: transparent;

  /* Text color for positive confirmation buttons */
  --mw-confirmation-positive-color: #fff;

  /* ========================================
   * HISTORY/NAVIGATION STYLING
   * ======================================== */

  /* Border color for history items */
  --mw-history-item-border-color: #fff;

  /* Text color for history items */
  --mw-history-item-color: #fff;

  /* Background color for selected history items */
  --mw-history-selected-item-bg: #fff;

  /* Text color for selected history items */
  --mw-history-selected-item-color: #000;

  /* ========================================
   * DROPDOWN AND SELECT STYLING
   * ======================================== */

  /* Background color for lookup dropdowns */
  --mw-lookup-dropdown-bg: #fff;

  /* Border color for lookup dropdowns */
  --mw-lookup-dropdown-border-color: #000;

  /* Maximum height for lookup dropdowns */
  --mw-lookup-dropdown-max-height: 22.18rem;

  /* Text color for lookup dropdowns */
  --mw-lookup-dropdown-color: #000;

  /* Color for select filter hint text */
  --mw-select-filter-hint-color: #a7a7a7;

  /* Padding for select filter elements */
  --mw-select-filter-padding: 0.3rem 0.5rem;

  /* Font size for select filter elements */
  --mw-select-filter-font-size: 0.8rem;

  /* Text color for select options */
  --mw-select-option-color: #000;

  /* Maximum height for select option lists */
  --mw-select-option-max-height: 14.5rem;

  /* Padding for select options */
  --mw-select-option-padding: 0.25rem 0.75rem;

  /* Line height for select options */
  --mw-select-option-line-height: auto;

  /* Background color for focused select options */
  --mw-select-option-highlight-focus-bg: #dcdcdc;

  /* Background color for hovered select options */
  --mw-select-option-highlight-hover-bg: #f6f6f6;

  /* Text color for hovered select options */
  --mw-select-option-highlight-hover-color: #000;

  /* Background color for selected select options */
  --mw-select-option-selected-bg: #bababa;

  /* Text color for selected select options */
  --mw-select-option-selected-color: #000;

  /* Background color for selected pills in multi-select */
  --mw-select-selected-pill-bg: #dcdcdc;

  /* Text color for selected pills in multi-select */
  --mw-select-selected-pill-color: #000;

  /* Padding for selected pills in multi-select */
  --mw-select-selected-pill-padding: 0.2rem 0.75rem;

  /* Gap between selected pills in multi-select */
  --mw-select-selected-pill-gap: 0.3rem;

  /* Gap for cross icon in selected pills */
  --mw-select-selected-pill-cross-icon-gap: 0.75rem;

  /* Line height for selected pill content */
  --mw-select-selected-pill-content-line-height: auto;

  /* ========================================
   * TEXT AND LINK STYLING
   * ======================================== */

  /* Color for text input elements */
  --mw-text-input-color: #000;

  /* Color for text links */
  --mw-textlink-color: #404eff;

  /* Color for submitted answer text */
  --mw-submitted-answer-color: #a7a7a7;

  /* Text color for submit buttons */
  --mw-submit-text-color: #fdf6fc;

  /* ========================================
   * ROOT BACKGROUND
   * ======================================== */

  /* Background color for the root element */
  --mw-root-bg: #fff;

  .assistant {
    padding: 0.75rem 1.5rem;
    background: var(--mw-color-field);
    border-radius: var(--mw-border-radius);
    color: var(--mw-color-text);
    opacity: 1;
    width: fit-content;
    margin-right: 24px;
    margin-bottom: 8px;
    max-width: 70%;
  }
  
  .user {
    padding: 0.75rem 1.5rem;
    background: #d1e3ff;
    border-radius: var(--mw-border-radius);
    color: var(--mw-color-text);
    opacity: 1;
    width: fit-content;
    margin-left: auto;
    margin-bottom: 8px;
  }
  
}

/* ========================================
 * RESPONSIVE BREAKPOINTS
 * ======================================== */

@media (min-width: 768px) {
  .MyWaveUI {
    /* Increase padding for interaction fields on desktop */
    --mw-interaction-fields-padding: 0 1rem;

    /* Use full sidebar logo on desktop */
    --mw-sidebar-logo: url('sidebar-logo.svg');

    /* Position sidebar logo to the left on desktop */
    --mw-sidebar-logo-position: left;
  }
}