/* Import AND Digital Design System */
/**
 * AND Digital Design System - CSS Custom Properties
 *
 * This file defines all CSS custom properties (variables) based on the
 * AND Digital Branding Guidelines 2023. These variables should be used
 * throughout the application for consistent styling.
 *
 * Usage: var(--color-primary-red) in your CSS files
 */
:root {
  /* ========================================================================
     COLORS - Brand Palette
     ======================================================================== */

  /* Primary Brand Colors */
  --color-primary-red: #ff323c;
  --color-orange: #ff7900;
  --color-yellow: #ffc800;
  --color-green: #5ac328;
  --color-blue: #2897ff;
  --color-purple: #a050ff;
  --color-pink: #ff6ecf;
  --color-charcoal: #323232;
  --color-white: #ffffff;

  /* Online Colors (AA Compliant) */
  --color-red-aa: #d82036;
  --color-blue-aa: #1f73c2;
  --color-purple-aa: #7d41c8;
  --color-green-aa: #337d0f;
  --color-pink-aa: #e664c5;
  --color-navy: #0d123c;
  
  /* Semantic Colors - Text */
  --text-primary: #333333;
  --text-secondary: #757575;
  --text-tertiary: #757575;
  --text-placeholder: #757575;
  --text-on-dark: #ffffff;
  --text-link: var(--color-blue-aa);
  --text-error: var(--color-red-aa);
  --text-success: var(--color-green-aa);
  
  /* Semantic Colors - Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f8f8;
  --bg-tertiary: #f5f5f5;
  --bg-hover: #fff5f5;
  --bg-light-blue: #f0f8ff;
  
  /* Semantic Colors - Borders */
  --border-light: #e0e0e0;
  --border-medium: #cccccc;
  --border-dark: #999999;
  --border-interactive: #767676;
  
  /* Semantic Colors - Interactive States */
  --interactive: var(--color-red-aa);
  --interactive-hover: var(--color-primary-red);
  --interactive-active: #b01828;
  --interactive-disabled: #cccccc;
  
  /* Semantic Colors - Status */
  --status-success: var(--color-green-aa);
  --status-warning: var(--color-yellow);
  --status-error: var(--color-red-aa);
  --status-info: var(--color-blue-aa);
  
  /* Dark Mode Colors (fallback for prefers-color-scheme: dark) */
  --dark-bg-primary: #242424;
  --dark-bg-secondary: #1a1a1a;
  --dark-text-primary: rgba(255, 255, 255, 0.87);
  
  /* Default Component Theming */
    --gradient-cta-start: var(--color-red-aa);
    --gradient-cta-end: var(--color-purple);
  
  
  /* ========================================================================
  TYPOGRAPHY
     ======================================================================== */

  /* Font Families - Based on AND Digital brand guidelines */
  --font-headline: Poppins, system-ui, -apple-system, sans-serif;
  --font-body: Roboto, system-ui, -apple-system, sans-serif;
  --font-logo: Brown, system-ui, sans-serif;
  --font-system: system-ui, Avenir, Helvetica, Arial, sans-serif;

  /* Font Weights */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Font Sizes */
  --font-size-display-large: 3.2rem;
  --font-size-display-medium: 2.5rem;
  --font-size-display-small: 2rem;
  --font-size-h1: 2rem;
  --font-size-h2: 1.75rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-h5: 1.125rem;
  --font-size-h6: 1rem;
  --font-size-body-large: 1.125rem;
  --font-size-body-base: 1rem;
  --font-size-body-small: 0.9375rem;
  --font-size-caption: 0.875rem;
  --font-size-label: 0.8125rem;
  --font-size-small: 0.75rem;
  --font-size-tiny: 0.6875rem;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.75;

  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.05em;

  /* ========================================================================
     SPACING
     Based on 8px grid system
     ======================================================================== */

  --spacing-0: 0;
  --spacing-0-5: 0.125rem; /* 2px */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-3-5: 0.875rem; /* 14px */
  --spacing-4: 1rem; /* 16px */
  --spacing-4-5: 1.125rem; /* 18px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-5-5: 1.375rem; /* 22px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-7: 1.75rem; /* 28px */
  --spacing-7-5: 1.875rem; /* 30px */
  --spacing-8: 2rem; /* 32px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-12: 3rem; /* 48px */
  --spacing-12-5: 3.125rem; /* 50px */
  --spacing-14: 3.5rem; /* 56px */
  --spacing-16: 4rem; /* 64px */
  --spacing-20: 5rem; /* 80px */
  --spacing-22-5: 5.625rem; /* 90px */
  --spacing-24: 6rem; /* 96px */
  --spacing-30: 7.5rem; /* 120px */
  --spacing-80: 20rem; /* 320px */

  /* ========================================================================
     BORDERS & RADII
     ======================================================================== */

  /* Border Widths */
  --border-width-none: 0;
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;

  /* Border Radius */
  --radius-none: 0;
  --radius-small: 0.375rem; /* 6px */
  --radius-medium: 0.625rem; /* 10px */
  --radius-large: 0.75rem; /* 12px */
  --radius-xl: 1rem; /* 16px */
  --radius-2xl: 1.125rem; /* 18px */
  --radius-full: 9999px; /* Perfect circles */

  /* ========================================================================
     SHADOWS
     ======================================================================== */

  --shadow-none: none;
  --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-medium: 0 2px 10px rgba(0, 0, 0, 0.1);
  --shadow-large: 0 10px 30px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* ========================================================================
     TRANSITIONS
     ======================================================================== */

  /* Durations */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  /* Easing Functions */
  --easing-linear: linear;
  --easing-in: ease-in;
  --easing-out: ease-out;
  --easing-in-out: ease-in-out;
  --easing-custom: cubic-bezier(0.4, 0, 0.2, 1);

  /* Common Transitions */
  --transition-fast: all var(--duration-fast) var(--easing-in-out);
  --transition-normal: all var(--duration-normal) var(--easing-in-out);
  --transition-slow: all var(--duration-slow) var(--easing-in-out);
  --transition-color: color var(--duration-normal) var(--easing-in-out);
  --transition-background: background-color var(--duration-normal)
    var(--easing-in-out);
  --transition-transform: transform var(--duration-normal) var(--easing-custom);
  --transition-opacity: opacity var(--duration-normal) var(--easing-in-out);

  /* ========================================================================
     OPACITY
     ======================================================================== */

  --opacity-disabled: 0.6;
  --opacity-muted: 0.7;
  --opacity-light: 0.8;
  --opacity-medium: 0.5;

  /* ========================================================================
     Z-INDEX SCALE
     ======================================================================== */

  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-overlay: 1200;
  --z-modal: 1300;
  --z-popover: 1400;
  --z-tooltip: 1500;
  --z-notification: 1600;

  /* ========================================================================
     LAYOUT
     ======================================================================== */

  --max-width-content: 50rem; /* 900px */
  --max-width-container: 75rem; /* 1200px */
  --max-width-button: var(--spacing-80); /* 320px */
  --min-width-mobile: 20rem; /* 320px */
  --header-height: var(--spacing-22-5); /* 90px */
  --input-max-height: var(--spacing-30); /* 120px */
}
/* ============================================================================
   ANIMATION KEYFRAMES
   ============================================================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */
/* Animations */
.animate-fade-in {
  animation: fadeIn var(--duration-slow) var(--easing-in);
}
.animate-slide-up {
  animation: slideUp var(--duration-slow) var(--easing-out);
}
.animate-slide-in-right {
  animation: slideInRight var(--duration-slow) var(--easing-out);
}
/* Transitions */
.transition-fast {
  transition: var(--transition-fast);
}
.transition-normal {
  transition: var(--transition-normal);
}
.transition-slow {
  transition: var(--transition-slow);
}
/* Scrollbar Styling */
.custom-scrollbar::-webkit-scrollbar {
  width: var(--spacing-2);
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: var(--radius-full);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--border-dark);
}
/* Layout Utilities */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.message-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.message-timestamp {
  font-size: var(--font-size-label);
  color: var(--text-secondary);
}
.message-content-box {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: var(--radius-large);
  border: var(--border-width-thin) solid var(--border-light);
  padding: var(--spacing-3) var(--spacing-4);
  max-width: 100%;
  width: fit-content;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-relaxed);
  word-wrap: break-word;
  position: relative;
}
.section-container-padding {
  padding: var(--spacing-5);
}
/* Button Styles */
.btn-pill-outline-red {
  border: var(--border-width-thin) solid var(--color-red-aa);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-3) var(--spacing-6);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-medium);
  transition: var(--transition-normal);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-pill-outline-red:hover {
  background: var(--bg-hover);
}
/* Message Content Typography - Shared styles for message links, strong text, lists */
.message-content-link {
  color: var(--color-red-aa);
  text-decoration: none;
  transition: var(--transition-color);
}
.message-content-link:hover {
  text-decoration: underline;
  color: var(--color-primary-red);
}
.message-content-strong {
  color: var(--color-red-aa);
  font-weight: var(--font-semibold);
}
:root {
  /* Use brand typography */
  font-family: var(--font-body);
  line-height: var(--line-height-normal);
  font-weight: var(--font-regular);

  color-scheme: light dark;
  color: var(--dark-text-primary);
  background-color: var(--dark-bg-primary);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  font-weight: var(--font-medium);
  color: var(--color-blue-aa); /* AND Digital brand blue */
  text-decoration: inherit;
  transition: var(--transition-color);
}
a:hover {
  color: var(--color-blue); /* Brighter blue on hover */
}
body {
  margin: 0;
  min-width: var(--min-width-mobile);
  min-height: 100vh;
}
h1 {
  font-family: var(
    --font-headline
  ); /* Poppins for headlines per brand guidelines */
  font-weight: var(--font-semibold);
  font-size: var(--font-size-display-large);
  line-height: var(--line-height-tight);
}
button {
  border-radius: var(--radius-medium);
  border: var(--border-width-thin) solid transparent;
  padding: var(--spacing-3) var(--spacing-5);
  font-size: 1em;
  font-weight: var(--font-medium);
  font-family: var(--font-body);
  background-color: var(--dark-bg-secondary);
  cursor: pointer;
  transition: var(--transition-normal);
}
button:hover {
  border-color: var(--color-blue-aa);
}
button:focus,
button:focus-visible {
  outline: var(--border-width-thick) auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
  :root {
    color: var(--text-primary); /* AND Digital charcoal for text */
    background-color: var(--bg-primary); /* White background */
  }
  a:hover {
    color: var(--color-blue); /* Brighter blue on hover */
  }
  button {
    background-color: var(--bg-secondary); /* Light gray background */
  }
}
@media screen and (min-width: 600px) {
  #root {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: end;
    margin-right: 20px;
    gap: var(--spacing-6);
  }
}

/* Only accessible by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-red-aa);
  color: var(--color-white);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: 0 0 var(--radius-medium) var(--radius-medium);
  z-index: var(--z-overlay);
  text-decoration: none;
  font-weight: var(--font-medium);
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
  outline: var(--border-width-medium) solid var(--color-blue-aa);
}

.chat-container {
  width: 100%;
  max-width: var(--max-width-content);
  flex: 1;
  max-height: 80vh;
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: none;
  border: var(--border-width-thin) solid var(--border-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-container main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Ensure the widget stays fixed on the page so it doesn't move while the host page scrolls */
.modal-space {
  position: fixed;
  right: 64px;
  bottom: 64px;
  z-index: 9999; /* above the button (9998) but below any full-screen overlays if present */
}

.modal-wrapper {
  max-width: 400px;
  min-height: 700px;
}

.modal-wrapper #main-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.modal-wrapper .chatbot-container {
  width: 100%;
  max-width: var(--max-width-content);
  background: var(--bg-primary);
  box-shadow: none;
  border: var(--border-width-thin) solid var(--border-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 700px;
}

@media screen and (max-width: 600px) {
  /* make the widget fill the viewport on small screens */
  .modal-space {
    /* cover entire viewport so the widget is fullscreen on mobile */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999; /* ensure above other page content */
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: transparent; /* keep host page visible if needed */
  }

  .modal-wrapper {
    max-width: 100%;
    min-height: auto;
    margin: 0;
    width: 100%;
    height: 100%;
  }

  .modal-wrapper .chatbot-container {
    width: 100%;
    max-width: 100%;
    background: var(--bg-primary);
    box-shadow: none;
    border: var(--border-width-thin) solid var(--border-light);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 0; /* remove rounded corners for fullscreen */
  }
}.andi-floating-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px;
  position: fixed;
  right: 64px;
  bottom: 76px;
  width: 170px;
  height: 66px;
  background: linear-gradient(
    90deg,
    var(--gradient-cta-start) 28%,
    var(--gradient-cta-end) 86%
  );
  border-radius: 100px;
  text-decoration: none;
  box-sizing: border-box;
  position: fixed;
  overflow: hidden;
  z-index: 9998;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.andi-floating-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-cta-end); 
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: -1; 
}

.andi-floating-button:hover::after {
  opacity: 1;
}

.andi-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%; 
  flex-shrink: 0; 
  position: relative; 
}

.andi-button-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  color: #FFFFFF;
  width: 138px;
  position: relative;
}

.andi-description {
  display: none;
}

@media (max-width: 768px) {
  body .andi-floating-button {
    right: auto;           
    left: 50%;            
    transform: translateX(-50%); 
    bottom: 40px;
    border: white 2px solid;
  }

  .andi-floating-button:hover {
    transform: translateX(-50%) scale(1.05); 
  }
}
/* Ensure button has a lower z-index than the modal */
.andi-floating-button {
  z-index: 9998; /* if you already have a z-index, keep it ≤ 9998 */
}

/* Modal overlay */
.andi-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;              /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

/* When active */
.andi-modal-overlay.is-active {
  display: flex;
}

/* Modal container */
.andi-modal {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  max-width: 900px;         
  max-height: 90vh;          
  min-height: 400px;          
  padding: 24px;
  position: relative;
  overflow: auto;           
  width: auto;              
  height: auto;           
  overflow: auto; 
}

/* Close button */
.andi-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.andi-modal-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between; /* header content on left, X on right */
  gap: 8px;
  margin-bottom: 16px;
}
.andi-floating-div {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 8px;
  width: 170px;
  height: 50px;
  border-radius: 100px;
  text-decoration: none;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 9998;
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}
.chat-header.section-container-padding {
  padding: 5px 20px 5px 10px;
  background: linear-gradient(
    90deg,
    var(--gradient-cta-start) 8%,
    var(--gradient-cta-end) 50%
  );
}
/* s

/* Mobile tweaks */
@media (max-width: 768px) {
  .andi-modal {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: auto;          
    max-width: 90vw;     
    height: auto;        
    max-height: 90vh;     
    padding: 0;           
    overflow: hidden;    
  }

.andi-modal-overlay {
  position: fixed;
  inset: 0;                        /* full viewport */
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);  /* dim background */
  z-index: 10000;
}

.andi-modal-overlay.is-active {
  display: flex;
}
  
  .andi-body-row {
    display: flex;
    flex-direction: row; /* This is the default, but keeps it clear */
    align-items: center; /* Aligns them vertically in the center */
    gap: 10px;           /* Adds space between the div and the button */
    padding: 10px;
}
}.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.chat-input-container {
  background-color: var(--bg-secondary);
  flex-shrink: 0;
  padding: var(--spacing-4);
}

.chat-input-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
}

.chat-input-field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}

/* Higher specificity + explicit box model so host page global textarea/box-sizing
   rules cannot collapse the composer. */
.chat-input-field .chat-input {
  box-sizing: border-box;
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: var(--spacing-3-5) var(--spacing-12-5) var(--spacing-3-5) var(--spacing-4-5);
  border: var(--border-width-thin) solid var(--border-interactive);
  border-radius: var(--radius-medium);
  font-size: var(--font-size-body-small);
  font-family: var(--font-body);
  line-height: var(--line-height-normal);
  resize: none;
  min-height: 2.75rem; /* ~44px; stable row vs host line-height/height overrides */
  max-height: var(--input-max-height);
  transition: var(--transition-color);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  field-sizing: content;
}

.chat-input-field .chat-input::placeholder {
  color: var(--text-placeholder);
  opacity: 1;
}

.send-button-container {
  position: absolute;
  right: var(--spacing-3);
  top: 50%;
  transform: translateY(-50%);
  width: var(--spacing-7-5);
  height: var(--spacing-7-5);
  background: var(--border-medium);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-small);
}

.send-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--spacing-5-5);
  height: var(--spacing-5-5);
  color: var(--border-medium);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-normal);
  padding: 0;
  background: transparent;
}

.send-button-container.has-text {
  background: var(--color-red-aa);
}

.send-button:disabled {
  color: var(--interactive-disabled);
  cursor: not-allowed;
}

.privacy-notice {
  font-size: var(--font-size-small);
  color: var(--text-primary);
  text-align: left;
  margin-top: var(--spacing-3);
  line-height: var(--line-height-normal);
}

.contact-button {
  gap: var(--spacing-2);
  font-size: var(--font-size-caption);
  margin-top: var(--spacing-3);
  width: 100%;
}

.contact-button:hover {
  background-color: var(--color-charcoal);
  color: var(--color-white);
  border-color: var(--color-charcoal);
}

.contact-button:hover > .contact-icon {
  background: var(--color-red-aa);
}
.contact-icon {
  width: var(--spacing-6);
  height: var(--spacing-6);
  background: var(--text-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-icon svg {
  width: var(--spacing-3-5);
  height: var(--spacing-3-5);
}
/**
 * Custom hover/focus tooltip — native `title` is unreliable on named buttons
 * (`aria-labelledby` + visible label often suppresses the browser tooltip).
 */
.gradient-mic-button-root {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.gradient-mic-button-root--denied,
.gradient-mic-button-root--unsupported {
  /* render the tooltip above the input row / sibling controls */
  z-index: var(--z-tooltip);
}

.gradient-mic-tooltip {
  position: absolute;
  bottom: 100%;
  top: auto;
  right: 0;
  left: auto;
  margin-bottom: var(--spacing-2);
  box-sizing: border-box;
  width: min(19rem, 320px);
  max-width: 320px;
  overflow-wrap: break-word;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
  font-family: var(--font-body);
  color: var(--text-primary);
  text-align: center;
  background: var(--bg-primary);
  border: var(--border-width-thin) solid var(--border-medium);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-medium);
  z-index: var(--z-tooltip);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
}

.gradient-mic-button-root--denied:hover .gradient-mic-tooltip,
.gradient-mic-button-root--denied:focus-within .gradient-mic-tooltip,
.gradient-mic-button-root--unsupported:hover .gradient-mic-tooltip,
.gradient-mic-button-root--unsupported:focus-within .gradient-mic-tooltip {
  opacity: 1;
  visibility: visible;
}

@supports (width: 1cqw) {
  .gradient-mic-tooltip {
    width: min(19rem, calc(100cqw - 2rem));
    max-width: calc(100cqw - 2rem);
  }
}
.gradient-button {
  --gradient-button-start: var(--gradient-cta-start);
  --gradient-button-end: var(--gradient-cta-end);
  --gradient-button-size: 5rem;
  --gradient-button-radius: 28%;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  vertical-align: top;
}

.gradient-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.gradient-button__face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--gradient-button-size);
  height: var(--gradient-button-size);
  box-sizing: border-box;
  border-radius: var(--gradient-button-radius);
  background: linear-gradient(
    135deg,
    var(--gradient-button-start) 0%,
    var(--gradient-button-end) 100%
  );
  color: var(--color-white);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
  box-shadow: var(--shadow-small);
}

.gradient-button:not(:disabled):hover .gradient-button__face {
  transform: scale(1.03);
  box-shadow: var(--shadow-medium);
}

.gradient-button:not(:disabled):active .gradient-button__face {
  transform: scale(0.98);
}

.gradient-button:focus {
  outline: none;
}

.gradient-button:focus-visible .gradient-button__face {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
  box-shadow:
    0 0 0 2px var(--color-blue-aa),
    var(--shadow-medium);
}

.gradient-button__label {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  text-align: center;
  max-width: calc(var(--gradient-button-size) + var(--spacing-8));
}

.gradient-button--compact {
  --gradient-button-size: 3rem;
  gap: var(--spacing-1);
}

.gradient-button--compact .gradient-button__label {
  font-size: var(--font-size-caption);
}
#welcomeMessage {
  flex-direction: column;
  align-items: flex-start;
  animation: fadeIn var(--duration-slow) var(--easing-in);
}

#welcomeMessage .message-content p {
  margin: 0 0 var(--spacing-3) 0;
}

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

#welcomeMessage .message-content strong {
  font-weight: var(--font-semibold);
  color: var(--color-red-aa);
}

#welcomeMessage .message-content ul {
  margin: var(--spacing-3) 0;
  padding-left: var(--spacing-6);
  list-style: none;
}

#welcomeMessage .message-content ul li {
  margin: var(--spacing-2) 0;
  line-height: var(--line-height-relaxed);
  position: relative;
  padding-left: var(--spacing-5);
}

#welcomeMessage .message-content ul li::before {
  content: "•";
  color: var(--color-red-aa);
  font-weight: var(--font-bold);
  position: absolute;
  left: 0;
  top: calc(-1 * var(--spacing-0-5));
  font-size: var(--font-size-h5);
}

#welcomeMessage .message-content a {
  color: var(--color-red-aa);
  text-decoration: underline;
  font-weight: var(--font-medium);
  transition: var(--transition-color);
}

#welcomeMessage .message-content a:hover {
  color: var(--interactive-active);
}
/* Avatar - default size */
.message-avatar {
  width: var(--spacing-10); /* 40px */
  height: var(--spacing-10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.message-avatar svg {
  width: 100%;
  height: 100%;
}

/* Avatar - large size (for header) */
.message-avatar-large {
  width: var(--spacing-14); /* 56px */
  height: var(--spacing-14);
}

.message-avatar-small {
  width: var(--spacing-6);
  height: var(--spacing-6);
}
/* Typing indicator text animation */
#typingIndicator .typing-indicator {
  display: inline-block;
  color: var(--text-tertiary);
  position: relative;
  width: var(--spacing-20);
}
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1-5);
  margin-top: var(--spacing-3);
  width: 100%;
  max-width: var(--max-width-button);
  align-items: flex-start;
}

.btn-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: var(--radius-full);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: var(--transition-normal);
  text-decoration: none;
}

.action-buttons .btn-pill-outline-red {
  width: 80%;
  height: var(--spacing-12);
  box-sizing: border-box;
  justify-content: flex-start !important;
  padding-left: var(--spacing-6) !important;
  align-self: flex-start;
  text-align: left;
}

.action-buttons .btn-pill-outline-red:hover {
  text-decoration: none;
}
.contact-button-container {
  margin-top: var(--spacing-4);
}

.contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  background-color: var(--color-red-aa);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-full);
  padding: var(--spacing-3) var(--spacing-5);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-semibold);
  text-decoration: none;
  transition: var(--transition-background);
  cursor: pointer;
  box-shadow: var(--shadow-small);
  white-space: nowrap;
  width: fit-content;
  max-width: 100%;
  height: var(--spacing-12);
  box-sizing: border-box;
}

.contact-button span {
  color: var(--color-white);
}

.contact-button-compact {
  width: 80% !important;
  height: var(--spacing-12) !important;
  box-shadow: none !important;
  justify-content: space-between;
  padding: var(--spacing-3) var(--spacing-2) var(--spacing-3) var(--spacing-6) !important;
  box-sizing: border-box;
  max-width: none;
}

.btn-icon-circle {
  width: var(--spacing-8);
  height: var(--spacing-8);
  background: var(--bg-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-red-aa);
  flex-shrink: 0;
}

.contact-button:hover {
  background-color: var(--interactive-active);
  box-shadow: var(--shadow-medium);
  text-decoration: none !important;
}

.contact-button:hover span {
  text-decoration: none !important;
}

.contact-button-compact:hover {
  background-color: var(--interactive-active);
  box-shadow: none;
  text-decoration: none !important;
}

.contact-button-compact:hover span {
  text-decoration: none !important;
}

.contact-button:visited,
.contact-button:active,
.contact-button:focus {
  color: var(--color-white);
  text-decoration: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .contact-button {
    font-size: var(--font-size-caption);
    padding: var(--spacing-2) var(--spacing-4);
  }
}
.copy-button {
  position: absolute;
  top: var(--spacing-3);
  right: var(--spacing-3);
  padding: var(--spacing-2);
  background: transparent;
  color: var(--text-tertiary);
  border: none;
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.copy-button:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.copy-button.copied {
  color: var(--color-green-aa);
}
.message {
  display: flex;
  margin-bottom: var(--spacing-3);
  animation: fadeIn var(--duration-slow) var(--easing-in);
}

.message.assistant {
  flex-direction: column;
  align-items: flex-start;
}

.message.user {
  flex-direction: column;
  align-items: flex-end;
}

.message-content {
  max-width: 80%;
  border-radius: var(--radius-medium);
  line-height: var(--line-height-normal);
  word-wrap: break-word;
  position: relative;
}

.message.assistant .message-content {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: var(--radius-2xl) var(--radius-2xl) var(--radius-2xl) 0;
  border: none;
  padding: var(--spacing-4) var(--spacing-4);
  width: fit-content;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-relaxed);
}

.message-timestamp {
  font-size: var(--font-size-tiny);
  color: var(--text-primary);
  font-weight: var(--font-medium);
  letter-spacing: var(--letter-spacing-wide);
}

.message.assistant .message-content a {
  color: var(--color-red-aa);
  text-decoration: none;
  transition: var(--transition-color);
}

.message.assistant .message-content a:hover {
  text-decoration: underline;
  color: var(--color-primary-red);
}

.message.assistant .message-content strong {
  color: var(--color-red-aa);
  font-weight: var(--font-semibold);
}

.message.user .message-content {
  background: var(--color-red-aa);
  color: var(--color-white);
  padding: var(--spacing-4) var(--spacing-5);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 var(--radius-2xl);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-relaxed);
}

.message.assistant .message-content p {
  margin: 0 0 var(--spacing-3) 0;
}

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

.message.assistant .message-content ul {
  margin: 0 0 var(--spacing-3) 0;
  padding-left: var(--spacing-5);
  list-style-type: disc;
}

.message.assistant .message-content ul:last-child {
  margin-bottom: 0;
}

.message.assistant .message-content li {
  margin-bottom: var(--spacing-1);
}

.message.assistant .message-content li:last-child {
  margin-bottom: 0;
}
.error-message {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border-radius: var(--radius-large);
  margin: var(--spacing-4) 0;
  animation: slideIn var(--duration-slow) var(--easing-out);
}

.error-message.error {
  background-color: var(--status-error);
  border: var(--status-error);
}

.error-message.warning {
  background-color: var(--color-orange);
  border: var(--color-orange);
}

.error-icon {
  flex-shrink: 0;
  margin-top: var(--spacing-0-5);
}

.error-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.error-text {
  margin: 0;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-normal);
}

.error-actions {
  display: flex;
  gap: var(--spacing-2);
}

.retry-button,
.dismiss-button {
  padding: var(--spacing-1-5) var(--spacing-3);
  border-radius: var(--radius-small);
  font-size: var(--font-size-caption);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: var(--transition-normal);
  border: none;
}

.retry-button {
  background-color: var(--status-error);
  color: var(--color-white);
  border: var(--border-width-thin) solid var(--color-white);
  padding: var(--spacing-2);
}

.retry-button:hover:not(:disabled) {
  border: var(--border-width-thin) solid var(--color-white);
}

.retry-button:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.dismiss-button {
  background-color: transparent;
  color: inherit;
  border: var(--border-width-thin) solid var(--color-white);
  padding: var(--spacing-2);
}

.dismiss-button:hover {
  border: var(--border-width-thin) solid var(--color-white);
}
.feedback-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 400px; /* Adjust to match your chat bubble width */
  align-self: flex-start;
}

.feedback-link-container {
  display: flex;
  justify-content: flex-end;
}

.expert-link {
  background: none;
  border: none;
  color: #3b82f6; /* Bright blue link */
  text-decoration: underline;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.feedback-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.input-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-section input {
  border: 1px solid var(--border-medium);
}

.label-text {
  color: #475569;
  font-size: 16px;
  font-weight: 500;
}

.email-field {
  padding: 16px;
  border-radius: 12px;
  border: 2px solid transparent;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  background-color: #ffffff;
}

/* Selected/Focus state requirement */
.email-field:focus {
  border-color: #000000; /* Maintains the black/blue focus style */
}

.action-button-red {
  background-color: #ef4444; /* ANDi Red */
  color: white;
  border: none;
  padding: 16px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-button-red:hover {
  background-color: #dc2626;
}
.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--spacing-4);
  background: var(--bg-primary);
  scroll-behavior: smooth;
  position: relative;
}
.info-header-container {
    display: flex;
    align-items: center;
    height: 80px;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding: 16px 24px;
  background-color: var(--bg-primary);
}

.info-header-text {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--text-primary);
}

.info-header-icon {
  width: 48px;
  height: 48px;
  display: block;
}

.info-header-icon-button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.info-header-icon-button:focus-visible {
  outline: 0px;
  outline-offset: 0px;
  border-radius: 8px;
}

.info-header-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.toggle-track {
  position: relative;
  width: 72px;
  height: 44px;
  border-radius: 999px;
  background-color: #e5e7eb;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  overflow: visible;
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.toggle-track:focus,
.toggle-track:active,
.toggle-track:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  z-index: 2;
}

.toggle-track.is-text .toggle-thumb {
  transform: translateX(0);
}

.toggle-track.is-video .toggle-thumb {
  transform: translateX(28px);
}

.toggle-thumb .info-header-icon {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;
  filter: none !important;
}
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-red-aa);
  color: var(--color-white);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: 0 0 var(--radius-medium) var(--radius-medium);
  z-index: var(--z-overlay);
  text-decoration: none;
  font-weight: var(--font-medium);
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
  outline: var(--border-width-medium) solid var(--color-blue-aa);
}

.chat-container {
  width: 100%;
  max-width: var(--max-width-content);
  flex: 1;
  max-height: 80vh;
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: none;
  border: var(--border-width-thin) solid var(--border-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-container main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.user > .message-header > .message-timestamp {
  display: none;
}

.assistant {
  > .message-header {
    margin-bottom: 8px;
  }
  .message-timestamp-inline {
    position: absolute;
    margin-top: -48px;
    left: 0;
  }
  > .message-content:first-child {
    margin-top: 40px;
  }
  .message-timestamp-inline::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 6px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='12' fill='url(%23paint0_linear_3590_2285)'/%3E%3Cpath d='M11.4549 6.79599C11.9257 6.79599 12.3828 6.85623 12.8187 6.96851L12.5459 8.02941C11.901 7.86221 11.2264 7.84547 10.574 7.98047C9.92165 8.11547 9.30869 8.39863 8.78214 8.80826C8.25558 9.21788 7.82941 9.7431 7.53628 10.3437C7.24314 10.9442 7.09082 11.6042 7.09099 12.273C7.09099 13.4516 7.55466 14.5542 8.36908 15.3713L9.14095 16.1458L8.63365 16.6546H11.4549C12.072 16.6546 12.6821 16.5232 13.2448 16.2691C13.8076 16.015 14.3103 15.644 14.7198 15.1805C15.1292 14.717 15.4362 14.1716 15.6203 13.5802C15.8044 12.9889 15.8615 12.3651 15.7878 11.7499L16.8717 11.6207C16.8971 11.835 16.9099 12.0525 16.9099 12.273C16.9099 15.2979 14.4677 17.75 11.4549 17.75H6L7.59775 16.1458C7.09049 15.6377 6.6882 15.0341 6.41401 14.3695C6.13982 13.7048 5.99912 12.9924 6 12.273C6 9.24804 8.44218 6.79599 11.4549 6.79599ZM13.6369 12.8207C13.6369 13.4017 13.407 13.959 12.9978 14.3698C12.5886 14.7807 12.0336 15.0115 11.4549 15.0115C10.8762 15.0115 10.3212 14.7807 9.91205 14.3698C9.50285 13.959 9.27296 13.4017 9.27296 12.8207H13.6369ZM15.5625 6.42355C15.5832 6.37227 15.6186 6.32836 15.6643 6.29744C15.71 6.26652 15.7638 6.25 15.8189 6.25C15.874 6.25 15.9278 6.26652 15.9735 6.29744C16.0192 6.32836 16.0546 6.37227 16.0753 6.42355L16.2138 6.75765C16.4454 7.32456 16.8847 7.78072 17.4412 8.03215L17.8323 8.20741C17.8824 8.23068 17.9248 8.26785 17.9545 8.31453C17.9842 8.36121 18 8.41545 18 8.47086C18 8.52626 17.9842 8.5805 17.9545 8.62718C17.9248 8.67387 17.8824 8.71103 17.8323 8.7343L17.4188 8.91942C16.8758 9.16365 16.4438 9.60335 16.2078 10.1517L16.0736 10.4617C16.0527 10.5122 16.0173 10.5553 15.9719 10.5857C15.9266 10.616 15.8734 10.6322 15.8189 10.6322C15.7644 10.6322 15.7112 10.616 15.6658 10.5857C15.6205 10.5553 15.5851 10.5122 15.5641 10.4617L15.4294 10.1523C15.1937 9.60379 14.7618 9.1639 14.219 8.91942L13.8044 8.7343C13.7541 8.7111 13.7116 8.67393 13.6818 8.62718C13.6519 8.58044 13.6361 8.52609 13.6361 8.47058C13.6361 8.41507 13.6519 8.36072 13.6818 8.31398C13.7116 8.26724 13.7541 8.23006 13.8044 8.20686L14.196 8.0316C14.7526 7.78054 15.192 7.32479 15.4239 6.7582L15.5625 6.42355Z' fill='white'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_3590_2285' x1='-4.63758e-09' y1='3.56757' x2='25.0687' y2='5.38754' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.274038' stop-color='%23D81F36'/%3E%3Cstop offset='0.865385' stop-color='%23A050FF'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }
}

.chat-messages {
  > .message.assistant .message-content {
    border-radius: 8px;
    border: 1px solid #ececec;
    background: #fff;
  }
  &.custom-scrollbar {
    padding: 0 24px 24px 24px;
  }
  .message.user .message-content {
    padding: 16px;
  }
}

.message-header > .message-timestamp,
.assistant .message-timestamp-inline {
  color: #757575;
  font-size: 13px;
  letter-spacing: -0.26px;
  font-weight: 400;
}

.chat-header .message-avatar-large {
  height: 45px;
  width: 45px;
}

.widget-footer {
  display: flex;
}

.widget-footer > *:first-child {
  flex: 9;
}

.widget-footer > *:last-child {
  flex: 1;
}

.avatar {
  position: relative;
  width: 367px;
  margin: 0 auto;
  background: #000;
  border-radius: 5px;
  overflow: hidden;
  transition:
    max-height 360ms cubic-bezier(0.4, 0, 0.2, 1),
    margin-bottom 360ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 240ms ease;
  will-change: max-height, margin-bottom, opacity;
}

.avatar > video,
.avatar > .avatar-skeleton {
  transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

.avatar > video {
  display: block;
  width: 100%;
  height: 212px;
  object-fit: cover;
  border-radius: 5px;
}

.avatar .close-speech-button {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
}

.avatar--visible {
  max-height: 212px;
  min-height: 212px;
  margin-bottom: 20px;
  opacity: 1;
}

.avatar--visible > video,
.avatar--visible > .avatar-skeleton {
  transform: translateY(0);
}

.avatar--hidden {
  max-height: 0;
  min-height: 0;
  margin-bottom: 0;
  opacity: 0;
  pointer-events: none;
}

/* Slides the video/skeleton up behind the InfoHeader as the slot collapses. */
.avatar--hidden > video,
.avatar--hidden > .avatar-skeleton {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .avatar,
  .avatar > video,
  .avatar > .avatar-skeleton {
    transition: none;
  }
}

.controls {
  padding-bottom: 20px;
}

.video-container {
  padding: 12px;
  flex-shrink: 0;
  min-height: 120px;
  box-sizing: border-box;
  width: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.widget-column {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.widget-main-stack {
  flex: 1;
  display: flex;
  min-height: 0;
  flex-direction: column;
}
.overlay {
  inset: 0;
  /* Full-takeover overlay - must sit above the mic tooltip (z-tooltip) and
     any other in-widget layering, otherwise the mic button can bleed through
     during the splash fade. */
  z-index: var(--z-notification);
  display: flex;
  position: absolute;
  pointer-events: none;
  flex-direction: column;
  background: var(--color-primary-red);
  opacity: 1;
  animation: splashFade 5s ease forwards;
}

/* Pending: fade in and hold at full opacity until the parent clears isPending. */
.overlay.overlay--pending {
  animation: splashPending 400ms ease forwards;
}

@keyframes splashPending {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Post-pending: hold, then fade out over the final second. */
@keyframes splashFade {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.splash__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  width: 100%;
}

.splash__content {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: min(420px, calc(100% - 48px));
  margin-inline: auto;
  padding-inline: var(--spacing-6);
  box-sizing: border-box;
  text-align: center;
  color: var(--color-white);
}

.splash__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.splash__copy {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 3.5rem);
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--font-size-display-small) * 2 * var(--line-height-tight));
}

.splash__footer {
  flex-shrink: 0;
  margin: 0;
  padding: var(--spacing-6) var(--spacing-6) var(--spacing-8);
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--font-size-caption);
  font-weight: var(--font-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-white);
}

/*
 * Loading spinner shown only while the parent has isPending=true
 */
.splash__spinner {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  align-self: center;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--color-white);
  background: transparent;
  animation: splashSpin 900ms linear infinite;
}

/* Strip the default native bar/value rendering so only our border spinner shows. */
.splash__spinner::-webkit-progress-bar,
.splash__spinner::-webkit-progress-value {
  background: transparent;
}
.splash__spinner::-moz-progress-bar {
  background: transparent;
}

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

@media (prefers-reduced-motion: reduce) {
  .splash__spinner {
    animation-duration: 2400ms;
  }
}

.splash__line {
  opacity: 0;
  transform: translateY(0);
  font-family: var(--font-headline);
  font-size: var(--font-size-display-small);
  font-weight: var(--font-semibold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash__line--1 {
  animation: splashLine1 var(--splash-total, 3500ms) linear forwards;
}

.splash__line--2 {
  animation: splashLine2 var(--splash-total, 3500ms) linear forwards;
}

@keyframes splashLine1 {
  0%,
  43% {
    opacity: 1;
    transform: translateY(0);
  }
  57%,
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes splashLine2 {
  0%,
  43% {
    opacity: 0;
    transform: translateY(8px);
  }
  57%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.avatar-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 212px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #000;
  pointer-events: none;
  z-index: 1;
}

.avatar-skeleton__spinner {
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--color-white);
  background: transparent;
  animation: avatarSkeletonSpin 900ms linear infinite;
}

/* Strip the default native bar/value rendering so only our border spinner shows. */
.avatar-skeleton__spinner::-webkit-progress-bar,
.avatar-skeleton__spinner::-webkit-progress-value {
  background: transparent;
}
.avatar-skeleton__spinner::-moz-progress-bar {
  background: transparent;
}

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

@media (prefers-reduced-motion: reduce) {
  .avatar-skeleton__spinner {
    animation-duration: 2400ms;
  }
}
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-small);
  flex-shrink: 0;
  z-index: 1;
}

.chat-header-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.chat-header-content h1 {
  font-family: var(--font-headline);
  font-size: var(--font-size-body-large);
  font-weight: var(--font-semibold);
  margin: 0;
  line-height: 1;
}

.chat-header-content p {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: var(--font-regular);
  margin: 0;
  opacity: 0.9;
}

.close-link {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: 25px;
  color: white;
}

.close-link::after {
  display: inline-block;
  content: '\00d7';
}
.container {
  height: 0px;
  opacity: 0;
  right: 64px;
  z-index: 100;
  bottom: 165px;
  position: fixed;
  animation: fadeIn 0.3s ease forwards;
  animation-delay: 20s;
}

@keyframes fadeIn {
  to {
    height: auto;
    opacity: 1;
  }
}

.modal {
  width: 400px;
  height: auto;
  position: relative;
  padding: 12px 20px 24px 20px;
  border: 2px solid transparent;
  border-radius: 12px 12px 0 12px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to right, rgba(216, 31, 54, 1), rgba(160, 80, 255, 1)) border-box;
  box-shadow: 2px 4px 16px 0 rgba(0, 0, 0, 0.12);
}

.close-button {
  top: 0px;
  right: 0px;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 10px;
  color: #323232;
  background: none;
  line-height: 20px;
  position: absolute;
  text-decoration: underline;
}

.close-button:hover {
  outline: none;
  color: #111827;
  border-color: none;
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.text-section {
  display: flex;
  font-size: 16px;
  color: #323232;
  margin-top: 20px;
  line-height: 24px;
  flex-direction: column;
}

.intro-text {
  margin: 0;
  font-size: 16px;
}

.intro-text strong {
  font-weight: 600;
}

.body-text:last-child {
  margin: 0px;
}

.pills {
  gap: 10px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.pill {
  font-size: 14px;
  cursor: pointer;
  background: none;
  padding: 0.5rem 1rem;
  border-radius: 0.4rem;
  transition: 0.3s ease;
  border: 2px solid #d7d7d7;
}
@media (prefers-color-scheme: dark) {
  .pill {
    color: #000000; 
  }
}

.pill:hover {
  outline-color: none;
  border: 2px solid transparent;
  border-radius: 0.4rem;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to right, rgba(216, 31, 54, 1), rgba(160, 80, 255, 1)) border-box;
}

.pill:active {
  background: rgba(216, 31, 54, 1);
  color: #fff;
  outline-color: rgba(216, 31, 54, 1);
}

.pill:visited,
.pill:focus {
  outline: rgba(216, 31, 54, 1);
}

@media (max-width: 768px) {
  .container {
    bottom: 135px;
    left: 0;
    right: 0;
  }

  .modal {
    width: fit-content;
    height: 100%;
  }
}