/* The look of the app for the advanced chat. Served by the app: lib/advanced-chat/embed-pure.ts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap");

html:root {
  --background: 210 24% 99%;
  --foreground: 222 30% 12%;
  --card: 210 22% 97%;
  --popover: 210 24% 99%;
  --secondary: 205 20% 94%;
  --muted: 210 18% 92%;
  --muted-foreground: 215 14% 42%;
  --border: 214 20% 87%;
  --input: 214 20% 87%;
  --primary: 184 80% 27%;
  --primary-foreground: 0 0% 100%;
  --ring: 184 80% 27%;
  --presentation: hsl(210 24% 99%);
  --text-primary: hsl(222 30% 12%);
  --text-secondary: hsl(215 14% 42%);
  --text-secondary-alt: hsl(215 14% 42%);
  --text-tertiary: hsl(215 14% 42%);
  --ring-primary: hsl(184 80% 27%);
  --header-primary: hsl(210 24% 99%);
  --header-hover: hsl(205 20% 94%);
  --header-button-hover: hsl(205 20% 94%);
  --surface-active: hsl(210 18% 92%);
  --surface-active-alt: hsl(210 18% 92%);
  --surface-hover: hsl(205 20% 94%);
  --surface-hover-alt: hsl(210 18% 92%);
  --surface-primary: hsl(210 24% 99%);
  --surface-primary-alt: hsl(210 22% 97%);
  --surface-primary-contrast: hsl(205 20% 94%);
  --surface-secondary: hsl(210 22% 97%);
  --surface-secondary-alt: hsl(210 18% 92%);
  --surface-tertiary: hsl(205 20% 94%);
  --surface-tertiary-alt: hsl(210 24% 99%);
  --surface-dialog: hsl(210 24% 99%);
  --surface-chat: hsl(210 24% 99%);
  --surface-submit: hsl(184 80% 27%);
  --surface-submit-hover: hsl(184 80% 24%);
  --border-light: hsl(214 20% 87%);
  --border-medium: hsl(214 20% 87%);
  --border-medium-alt: hsl(214 20% 87%);
  --border-heavy: hsl(215 14% 42% / 0.45);
  --border-xheavy: hsl(215 14% 42% / 0.6);
}
html.dark:root {
  --background: 218 52% 7%;
  --foreground: 210 28% 96%;
  --card: 218 40% 11%;
  --popover: 218 36% 14%;
  --secondary: 218 30% 16%;
  --muted: 218 22% 18%;
  --muted-foreground: 214 18% 67%;
  --border: 217 26% 19%;
  --input: 217 26% 19%;
  --primary: 184 78% 48%;
  --primary-foreground: 210 60% 6%;
  --ring: 184 78% 48%;
  --presentation: hsl(218 52% 7%);
  --text-primary: hsl(210 28% 96%);
  --text-secondary: hsl(214 18% 67%);
  --text-secondary-alt: hsl(214 18% 67%);
  --text-tertiary: hsl(214 18% 67%);
  --ring-primary: hsl(184 78% 48%);
  --header-primary: hsl(218 52% 7%);
  --header-hover: hsl(218 30% 16%);
  --header-button-hover: hsl(218 30% 16%);
  --surface-active: hsl(218 22% 18%);
  --surface-active-alt: hsl(218 22% 18%);
  --surface-hover: hsl(218 30% 16%);
  --surface-hover-alt: hsl(218 22% 18%);
  --surface-primary: hsl(218 52% 7%);
  --surface-primary-alt: hsl(218 40% 11%);
  --surface-primary-contrast: hsl(218 30% 16%);
  --surface-secondary: hsl(218 40% 11%);
  --surface-secondary-alt: hsl(218 22% 18%);
  --surface-tertiary: hsl(218 30% 16%);
  --surface-tertiary-alt: hsl(218 52% 7%);
  --surface-dialog: hsl(218 36% 14%);
  --surface-chat: hsl(218 40% 11%);
  --surface-submit: hsl(184 78% 48%);
  --surface-submit-hover: hsl(184 78% 54%);
  --border-light: hsl(217 26% 19%);
  --border-medium: hsl(217 26% 19%);
  --border-medium-alt: hsl(217 26% 19%);
  --border-heavy: hsl(214 18% 67% / 0.45);
  --border-xheavy: hsl(214 18% 67% / 0.6);
}

html body,
html .font-sans {
  font-family: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
}
html[dir="rtl"] body,
html[dir="rtl"] .font-sans {
  font-family: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
}
html body { background: hsl(var(--background)); color: hsl(var(--foreground)); }
#loading-container { background: hsl(var(--background)) !important; }

/* Main buttons and links in the app's colour. */
html .bg-green-500, html .bg-green-600, html .bg-green-700 { background-color: hsl(var(--primary)) !important; }
html .text-green-500, html .text-green-600 { color: hsl(var(--primary)) !important; }
html a.underline, html .markdown a { color: hsl(var(--primary)); }

/* Rounded like the app's cards. */
html textarea, html .rounded-3xl { border-radius: 0.875rem; }

/* In the app's frame: the app already shows the brand and the page title. */
html.os-embedded body { background: hsl(var(--background)); }