/* Platforms Code (كود المنصات) — token values copied from design.dga.gov.sa (PC 1.0 bundle).
   Primitive → semantic → component, so a future switch to the official CSS keeps the same names. */
@font-face { font-family: "IBMPlexSansArabic"; src: url(/fonts/IBMPlexSansArabic-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBMPlexSansArabic"; src: url(/fonts/IBMPlexSansArabic-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBMPlexSansArabic"; src: url(/fonts/IBMPlexSansArabic-SemiBold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBMPlexSansArabic"; src: url(/fonts/IBMPlexSansArabic-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  /* base */
  --colors-base-white: #ffffff; --colors-base-black: #161616;
  /* primary — SA flag green */
  --colors-primary-25: #f7fdf9; --colors-primary-50: #f3fcf6; --colors-primary-100: #dff6e7; --colors-primary-200: #b8eacb;
  --colors-primary-300: #88d8ad; --colors-primary-400: #54c08a; --colors-primary-500: #25935f; --colors-primary-600: #1b8354;
  --colors-primary-700: #166a45; --colors-primary-800: #14573a; --colors-primary-900: #104631; --colors-primary-950: #092a1e;
  /* neutral */
  --colors-neutral-25: #fcfcfd; --colors-neutral-50: #f9fafb; --colors-neutral-100: #f3f4f6; --colors-neutral-200: #e5e7eb;
  --colors-neutral-300: #d2d6db; --colors-neutral-400: #9da4ae; --colors-neutral-500: #6c727e; --colors-neutral-600: #4d5761;
  --colors-neutral-700: #384250; --colors-neutral-800: #1f2a37; --colors-neutral-900: #111927; --colors-neutral-950: #0c111b;
  /* secondary gold / tertiary lavender (identity accents) */
  --colors-secondary-50: #fffef2; --colors-secondary-200: #fcf3bd; --colors-secondary-600: #dba102; --colors-secondary-700: #b87b02;
  --colors-tertiary-50: #f9f5fa; --colors-tertiary-200: #e1cce8; --colors-tertiary-500: #80519f; --colors-tertiary-700: #532d75;
  /* semantic palettes */
  --colors-red-50: #fef3f2; --colors-red-100: #fee4e2; --colors-red-200: #fecdca; --colors-red-600: #d92c20; --colors-red-700: #b42318;
  --colors-blue-50: #eff8ff; --colors-blue-100: #d1e9ff; --colors-blue-200: #b2ddff; --colors-blue-600: #156fee; --colors-blue-700: #175cd3;
  --colors-green-50: #ecfdf3; --colors-green-200: #abefc6; --colors-green-600: #069454; --colors-green-700: #067647;
  --colors-yellow-50: #fffaeb; --colors-yellow-200: #fedf89; --colors-yellow-600: #dc6803; --colors-yellow-700: #b54707;
  /* spacing */
  --spacing-xxs: 2px; --spacing-xs: 4px; --spacing-sm: 6px; --spacing-md: 8px; --spacing-lg: 12px; --spacing-xl: 16px;
  --spacing-2xl: 20px; --spacing-3xl: 24px; --spacing-4xl: 32px; --spacing-5xl: 40px; --spacing-6xl: 48px; --spacing-7xl: 64px;
  /* radius */
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px;
  /* elevation */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  --shadow-md: 0 2px 4px -2px rgba(16, 24, 40, .06), 0 4px 8px -2px rgba(16, 24, 40, .1);
  --shadow-lg: 0 4px 6px -2px rgba(16, 24, 40, .03), 0 12px 16px -4px rgba(16, 24, 40, .08);
  /* semantic roles */
  --background-body: var(--colors-neutral-50);
  --background-card: var(--colors-base-white);
  --background-brand-light: var(--colors-primary-50);
  --background-primary: var(--colors-primary-600);
  --background-primary-hover: var(--colors-primary-700);
  --background-primary-active: var(--colors-primary-800);
  --background-neutral-100: var(--colors-neutral-100);
  --background-disabled: var(--colors-neutral-200);
  --text-default: var(--colors-base-black);
  --text-secondary: var(--colors-neutral-600);
  --text-placeholder: var(--colors-neutral-500);
  --text-disabled: var(--colors-neutral-400);
  --text-oncolor: var(--colors-base-white);
  --text-brand: var(--colors-primary-700);
  --text-error: var(--colors-red-700);
  --border-neutral-primary: var(--colors-neutral-300);
  --border-neutral-secondary: var(--colors-neutral-200);
  --border-primary: var(--colors-primary-600);
  --focus-ring: 2px solid var(--colors-primary-600);
  --font-family-text: "IBMPlexSansArabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  --max-width: 1040px;
}
/* Accessibility tools: text scale and a high-contrast scheme (both WCAG 2.1 AA compliant). */
html[data-font="lg"] { font-size: 112.5%; }
html[data-font="xl"] { font-size: 125%; }
html.high-contrast {
  --background-body: #ffffff; --background-brand-light: #ffffff; --background-neutral-100: #ffffff;
  --text-secondary: #1f2a37; --text-placeholder: #384250;
  --border-neutral-primary: #161616; --border-neutral-secondary: #384250;
  --background-primary: #104631; --background-primary-hover: #092a1e; --background-primary-active: #000000;
  --text-brand: #104631; --focus-ring: 3px solid #161616;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--background-body); color: var(--text-default); font: 400 1rem/1.5 var(--font-family-text); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: var(--spacing-md); inset-inline-start: -999px; z-index: 100; padding: var(--spacing-md) var(--spacing-xl); background: var(--colors-base-white); color: var(--text-brand); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); text-decoration: none; }
.skip-link:focus { inset-inline-start: var(--spacing-xl); }
.icon { width: 1.25rem; height: 1.25rem; flex: none; }

/* ---------- accessibility tools bar (first in tab order) ---------- */
.a11y-tools { display: flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-3xl); background: var(--background-neutral-100); border-bottom: 1px solid var(--border-neutral-secondary); font-size: .875rem; }
.a11y-tools__label { color: var(--text-secondary); margin-inline-end: var(--spacing-xs); }

/* ---------- UI shell: header / footer ---------- */
.header { position: sticky; top: 0; z-index: 10; background: var(--colors-base-white); border-bottom: 1px solid var(--border-neutral-secondary); }
.header__inner { max-width: var(--max-width); margin: 0 auto; min-height: 72px; padding: var(--spacing-md) var(--spacing-3xl); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-xl); }
.header__brand { display: flex; align-items: center; gap: var(--spacing-lg); color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.header__logo { width: 44px; height: 44px; border-radius: var(--radius-md); }
.header__actions { display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap; justify-content: flex-end; }
.header__text { display: flex; flex-direction: column; }
.header__entity { font-size: .75rem; line-height: 1.125rem; color: var(--text-secondary); }
.header__title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.footer { background: var(--background-neutral-100); border-top: 1px solid var(--border-neutral-secondary); margin-top: var(--spacing-4xl); }
.footer__inner { max-width: var(--max-width); margin: 0 auto; padding: var(--spacing-3xl); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-xl); font-size: .875rem; line-height: 1.25rem; color: var(--text-secondary); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--spacing-xl); }
.footer__note { width: 100%; font-size: .75rem; }
.link { color: var(--text-brand); text-decoration: underline; text-underline-offset: 3px; border-radius: var(--radius-xs); }
.link:hover { color: var(--colors-primary-800); }

/* ---------- layout ---------- */
.main { flex: 1; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: var(--spacing-3xl); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--spacing-3xl); align-items: start; }
.card { background: var(--background-card); border: 1px solid var(--border-neutral-secondary); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }

/* ---------- chat ---------- */
.chat { display: flex; flex-direction: column; height: min(78vh, 840px); min-height: 480px; overflow: hidden; }
.messages { flex: 1; overflow-y: auto; padding: var(--spacing-3xl); display: flex; flex-direction: column; gap: var(--spacing-2xl); scroll-behavior: smooth; }
.message { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--spacing-lg); align-items: start; }
.message--user { grid-template-columns: minmax(0, 1fr) 40px; }
.message--user .message__avatar { order: 2; }
.message--user .message__body { justify-self: end; max-width: 44rem; }
.message__avatar { width: 40px; height: 40px; border-radius: var(--radius-full); display: grid; place-items: center; font-size: .75rem; font-weight: 600; }
.message__avatar--assistant { background: var(--background-brand-light); border: 1px solid var(--colors-primary-200); }
.message__avatar--assistant img { width: 24px; height: 24px; border-radius: 6px; }
.message__avatar--user { background: var(--colors-neutral-100); color: var(--text-secondary); border: 1px solid var(--border-neutral-secondary); }
.message__body { min-width: 0; }
.message__meta { display: flex; align-items: baseline; gap: var(--spacing-md); margin-bottom: var(--spacing-xs); font-size: .75rem; line-height: 1.125rem; color: var(--text-secondary); }
.message__name { font-weight: 600; color: var(--text-default); }
.message__bubble { padding: var(--spacing-lg) var(--spacing-xl); border-radius: var(--radius-lg); border: 1px solid var(--border-neutral-secondary); background: var(--background-card); max-width: 44rem; box-shadow: var(--shadow-xs); }
.message--assistant .message__bubble { border-start-start-radius: var(--radius-xs); }
.message--user .message__bubble { background: var(--background-brand-light); border-color: var(--colors-primary-200); border-start-end-radius: var(--radius-xs); }
.message__content { overflow-wrap: anywhere; }
.message__content p, .message__content ul, .message__content ol { margin: 0 0 var(--spacing-md); }
.message__content > :last-child { margin-bottom: 0; }
.message__content ul, .message__content ol { padding-inline-start: 1.5rem; }
.message__content li + li { margin-top: var(--spacing-xs); }
.message__heading { font-weight: 600; }
.typing { display: inline-flex; gap: 5px; padding: var(--spacing-xs) 0; }
.typing i { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--colors-neutral-400); animation: typing 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* sources (verbatim FAQ records behind the answer) */
.sources { margin-top: var(--spacing-lg); border-top: 1px solid var(--border-neutral-secondary); padding-top: var(--spacing-md); }
.sources__summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; min-height: 44px; gap: var(--spacing-xs); color: var(--text-brand); font-size: .875rem; font-weight: 500; border-radius: var(--radius-sm); padding-inline: var(--spacing-xs); }
.sources__summary::-webkit-details-marker { display: none; }
.sources__summary::before { content: ""; width: .5rem; height: .5rem; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-inline-end: var(--spacing-xs); transition: transform .15s; }
.sources[open] .sources__summary::before { transform: rotate(-135deg); }
.source { margin-top: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); border-inline-start: 3px solid var(--colors-primary-300); background: var(--colors-neutral-25); border-radius: var(--radius-sm); }
.source__title { font-size: .875rem; line-height: 1.25rem; font-weight: 600; }
.source__body { margin-top: var(--spacing-xs); font-size: .875rem; line-height: 1.375rem; color: var(--text-secondary); white-space: pre-line; }

/* feedback (Platforms Code chatbot guidance: ask if the answer helped) */
.feedback { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-md); margin-top: var(--spacing-md); font-size: .875rem; color: var(--text-secondary); }
.feedback__button[aria-pressed="true"] { background: var(--colors-primary-100); color: var(--colors-primary-800); }

/* chips / suggested questions */
.chips { display: flex; flex-wrap: wrap; gap: var(--spacing-md); margin-top: var(--spacing-lg); }
.chips:empty { display: none; }
.chip { min-height: 44px; padding: var(--spacing-md) var(--spacing-xl); border-radius: var(--radius-full); border: 1px solid var(--border-neutral-primary); background: var(--colors-base-white); color: var(--text-default); font-size: .875rem; line-height: 1.25rem; text-align: start; cursor: pointer; transition: background .15s, border-color .15s; }
.chip:hover { background: var(--background-brand-light); border-color: var(--colors-primary-400); }
.chip:active { background: var(--colors-primary-100); }

/* composer */
.composer { display: flex; align-items: flex-end; gap: var(--spacing-md); padding: var(--spacing-xl) var(--spacing-3xl) var(--spacing-md); border-top: 1px solid var(--border-neutral-secondary); background: var(--background-card); }
.composer__field { flex: 1; }
.composer__hint { margin: 0; padding: 0 var(--spacing-3xl) var(--spacing-xl); font-size: .75rem; line-height: 1.125rem; color: var(--text-secondary); }
.textarea { display: flex; min-height: 44px; border: 1px solid var(--border-neutral-primary); border-radius: var(--radius-sm); background: var(--colors-base-white); transition: border-color .15s, box-shadow .15s; }
.textarea:focus-within { border-color: var(--border-primary); box-shadow: 0 0 0 3px var(--colors-primary-100); }
.textarea__field { width: 100%; border: 0; outline: 0; background: transparent; resize: none; padding: var(--spacing-md) var(--spacing-xl); line-height: 1.5; max-height: 160px; color: var(--text-default); }
.textarea__field::placeholder { color: var(--text-placeholder); }
.textarea__field:read-only { color: var(--text-secondary); }

/* buttons (Platforms Code sizes sm/md/lg; lg raised to the 44px WCAG target size) */
.btn { appearance: none; border: 1px solid transparent; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.btn--sm { min-height: 32px; padding-inline: var(--spacing-md); font-size: .875rem; }
.btn--md { min-height: 40px; padding-inline: var(--spacing-lg); }
.btn--lg { min-height: 44px; padding-inline: var(--spacing-xl); }
.btn--icon { width: 44px; min-width: 44px; padding: 0; }
.btn--primary { background: var(--background-primary); color: var(--text-oncolor); }
.btn--primary:hover { background: var(--background-primary-hover); }
.btn--primary:active { background: var(--background-primary-active); }
.btn--secondary { background: var(--colors-neutral-100); color: var(--text-default); border-color: var(--border-neutral-secondary); }
.btn--secondary:hover { background: var(--colors-neutral-200); }
.btn--secondary:active { background: var(--colors-neutral-300); }
.btn--subtle { background: transparent; color: var(--text-default); }
.btn--subtle:hover { background: var(--colors-neutral-100); }
.btn--subtle:active { background: var(--colors-neutral-200); }
.btn--subtle[aria-pressed="true"] { background: var(--colors-primary-100); color: var(--colors-primary-800); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--background-disabled); color: var(--text-disabled); border-color: transparent; cursor: not-allowed; }

/* notification (inline, Platforms Code variants) */
.notification { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-3xl); border-bottom: 2px solid; font-size: .875rem; line-height: 1.25rem; }
.notification--info { background: var(--colors-blue-50); border-color: var(--colors-blue-200); color: var(--colors-blue-700); }
.notification--critical { background: var(--colors-red-50); border-color: var(--colors-red-200); color: var(--text-error); }
.notification--success { background: var(--colors-green-50); border-color: var(--colors-green-200); color: var(--colors-green-700); }
.notification--warning { background: var(--colors-yellow-50); border-color: var(--colors-yellow-200); color: var(--colors-yellow-700); }

/* support aside */
.support { padding: var(--spacing-3xl); position: sticky; top: calc(72px + var(--spacing-3xl)); }
.support__title { margin: 0 0 var(--spacing-md); font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.support__title--spaced { margin-top: var(--spacing-3xl); }
.support__text { margin: 0 0 var(--spacing-lg); font-size: .875rem; line-height: 1.375rem; color: var(--text-secondary); }
.support__link { width: 100%; }
.support__list { margin: 0; padding-inline-start: 1.25rem; font-size: .875rem; line-height: 1.5rem; color: var(--text-secondary); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .main { grid-template-columns: 1fr; padding: var(--spacing-xl); gap: var(--spacing-xl); }
  .chat { height: auto; min-height: 70vh; }
  .support { position: static; }
  .messages, .composer { padding-inline: var(--spacing-xl); }
  .composer__hint { padding-inline: var(--spacing-xl); }
  .header__inner, .a11y-tools, .footer__inner { padding-inline: var(--spacing-xl); }
  .message--user .message__body, .message__bubble { max-width: 100%; }
}
@media (max-width: 480px) {
  .header__title { font-size: 1rem; }
  #new-chat { padding-inline: var(--spacing-lg); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* channel switch (text / voice) */
.mode-switch { display: inline-flex; border: 1px solid var(--border-neutral-primary); border-radius: var(--radius-full); background: var(--colors-base-white); padding: 2px; }
.mode-switch__option { appearance: none; border: 0; background: transparent; color: var(--text-secondary); min-height: 40px; padding-inline: var(--spacing-xl); border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: var(--spacing-xs); font-weight: 500; cursor: pointer; }
.mode-switch__option[aria-pressed="true"] { background: var(--background-primary); color: var(--text-oncolor); }
.mode-switch__option:hover:not([aria-pressed="true"]) { background: var(--colors-neutral-100); color: var(--text-default); }

/* voice channel: the character is the view, so nothing else competes for the height */
.chat--voice .messages { display: none; }
.chat--voice { height: auto; min-height: 0; }
.voice { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-xl); padding: var(--spacing-2xl) var(--spacing-3xl) var(--spacing-3xl); text-align: center; }
.voice__character { width: min(380px, 80%); }
/* The character's own height is fixed by its component; this variable lets it breathe. */
.voice__character saudi-avatar { display: block; width: 100%; --avatar-render-height: clamp(220px, 42vh, 380px); }
.voice__intro { max-width: 52ch; color: var(--text-secondary); font-size: .9375rem; line-height: 1.5rem; }
.voice__intro p { margin: 0; }
.voice__status { margin: 0; font-weight: 600; font-size: 1.125rem; color: var(--text-default); min-height: 1.75rem; }
.voice__controls { display: flex; flex-wrap: wrap; gap: var(--spacing-md); justify-content: center; }
.voice__hint { margin: 0; font-size: .75rem; line-height: 1.125rem; color: var(--text-secondary); max-width: 46ch; }
@media (max-width: 560px) { .mode-switch__option { padding-inline: var(--spacing-md); } .header__inner { gap: var(--spacing-md); } }
@media (max-width: 720px) { .voice { padding: var(--spacing-xl); gap: var(--spacing-lg); } .voice__character { width: min(300px, 78%); } }

/* a fresh context on a channel switch */
.divider { align-self: center; font-size: .75rem; color: var(--text-secondary); background: var(--colors-neutral-100); border-radius: var(--radius-full); padding: var(--spacing-xs) var(--spacing-lg); }