@charset "UTF-8";@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');/*
** Custom color variables for SyGPT Application
** These extend the Fluent UI design tokens with additional color palettes
*/
/*
** CSS Custom Properties (CSS Variables)
** These can be overridden at runtime and support theming
*/
:root {
  /* Gray Scale */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-gray-ring-500: #c7c9cd;
  /* Slate Scale */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  /* Zinc Scale */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  /* Neutral Scale */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  /* Stone Scale */
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  /* Lime Scale */
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  /* Green Scale */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-green-ring-500: #c4ede8;
  /* Emerald Scale */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
  /* Teal Scale */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
  /* Cyan Scale */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
  /* Sky Scale */
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
  /* Blue Scale */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  /* Indigo Scale */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
  /* Violet Scale */
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
  /* Purple Scale */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
  /* Fuchsia Scale */
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
  /* Pink Scale */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  /* Rose Scale */
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
  /* Red Scale */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-red-ring-500: #fbd0d0;
  /* Orange Scale */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  /* Amber Scale */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
  /* Yellow Scale */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-yellow-ring-500: #f9ecc1;
  /* White Variants */
  --color-white-100pct: #ffffff;
  --color-white-10pct: #ffffff;
  --color-white-3pct: #ffffff;
  --color-white-5pct: #ffffff;
  --color-white-15pct: #ffffff;
  --color-white-20pct: #ffffff;
  --color-white-30pct: #ffffff;
  --color-white-40pct: #ffffff;
  --color-white-50pct: #ffffff;
  --color-white-60pct: #ffffff;
  --color-white-70pct: #ffffff;
  --color-white-80pct: #ffffff;
  --color-white-90pct: #ffffff;
  --color-white-1pct: #ffffff;
  /* Soft Colors */
  --color-soft-green: #115e59;
  --color-soft-blue: #1e40af;
  --color-soft-red: #991b1b;
  --color-soft-yellow: #854d0e;
  --color-soft-gray: #374151;
  /* Primary Brand Scale */
  --color-primary-50: #fff5f3;
  --color-primary-100: #ffebe6;
  --color-primary-200: #ffd7cc;
  --color-primary-300: #ffc3b3;
  --color-primary-400: #ffaf99;
  --color-primary-500: #ff5730;
  --color-primary-600: #e64a26;
  --color-primary-700: #cc3e1c;
  --color-primary-800: #b33113;
  --color-primary-900: #99250a;
  --color-primary-950: #801a05;
  --color-primary-ring-500: #ffcdc1;
  --color-primary-500-10pct: rgba(255, 87, 48, 0.1);
  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  /* Spacing Scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-17: 68px;
  --spacing-18: 72px;
  --spacing-19: 76px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
  --spacing-4-5: 18px;
  --spacing-5-5: 22px;
  --spacing-6-5: 26px;
  --spacing-7-5: 30px;
  --spacing-8-5: 34px;
  --spacing-9-5: 38px;
  --spacing-10-5: 42px;
  --spacing-11-5: 46px;
  --spacing-12-5: 50px;
  --spacing-13-5: 54px;
  --spacing-14-5: 58px;
  --spacing-15-5: 62px;
  --spacing-16-5: 66px;
  --spacing-17-5: 70px;
  --spacing-18-5: 74px;
  --spacing-19-5: 78px;
}
/*
** SCSS Variables for convenient usage in SCSS files
** These reference the CSS custom properties above
*/
/* Gray Scale */
/* Slate Scale */
/* Zinc Scale */
/* Neutral Scale */
/* Stone Scale */
/* Lime Scale */
/* Green Scale */
/* Emerald Scale */
/* Teal Scale */
/* Cyan Scale */
/* Sky Scale */
/* Blue Scale */
/* Indigo Scale */
/* Violet Scale */
/* Purple Scale */
/* Fuchsia Scale */
/* Pink Scale */
/* Rose Scale */
/* Red Scale */
/* Orange Scale */
/* Amber Scale */
/* Yellow Scale */
/* White Variants */
/* Soft Colors */
/* Primary Brand Scale */
/* Border Radius */
/* Spacing Scale */
/*
** This file is generated from Fluent UI tokens.
** To regenerate the file run: yarn run fluentSass.
** Generate on: 28/06/2023 23:34:58
*/
/*
** Variables for color
*/
/*
** Variables for border
*/
/*
** Variables for font
*/
/*
** Variables for line
*/
/*
** Variables for shadow
*/
/*
** Variables for stroke
*/
/*
** Variables for spacing
*/
/*
** Variables for duration
*/
/*
** Variables for curve
*/
.sy-button-secondary-round {
  border-radius: 8px !important;
}
/* Ensure a default root class enforces the 8px radius for all SyButton instances */
.sy-button-root,
.fui-Button.sy-button-root,
button.sy-button-root.fui-Button,
a.sy-button-root.fui-Button {
  border-radius: 8px !important;
}
/* Global SyButton defaults */
.fui-Button.sy-button-primary,
.fui-Button.sy-button-outline-plus,
.fui-Button.sy-button-secondary,
.fui-Button.sy-button-tertiary,
.fui-Button.sy-button-quarterly,
.fui-Button.sy-button-ghost,
.fui-Button.sy-button-link,
button.sy-button-primary.fui-Button,
button.sy-button-outline-plus.fui-Button,
button.sy-button-secondary.fui-Button,
button.sy-button-tertiary.fui-Button,
button.sy-button-quarterly.fui-Button,
button.sy-button-ghost.fui-Button,
button.sy-button-link.fui-Button,
a.sy-button-primary.fui-Button,
a.sy-button-outline-plus.fui-Button,
a.sy-button-secondary.fui-Button,
a.sy-button-tertiary.fui-Button,
a.sy-button-quarterly.fui-Button,
a.sy-button-ghost.fui-Button,
a.sy-button-link.fui-Button {
  box-sizing: border-box !important;
  min-height: 38px !important;
  /* When rendered it will actually be 48 px */
  height: 38px !important;
  border-radius: 8px !important;
  /* Force the SyButton root font-size so inner content reliably inherits */
  /* Use CSS custom property directly to ensure runtime token value is used */
  font-size: var(--fontSizeBase400) !important;
}
/* Extra-large size for buttons with size='extra-large' */
.fui-Button.sy-button-extra-large,
button.sy-button-extra-large.fui-Button,
a.sy-button-extra-large.fui-Button {
  min-height: 48px !important;
  height: 48px !important;
  width: 100% !important;
}
/* Icon-only helpers: when a button is iconOnly we want an exact 48x48 square */
.sy-button-iconOnly.fui-Button,
button.sy-button-iconOnly.fui-Button,
a.sy-button-iconOnly.fui-Button,
.sy-button-iconOnly,
button.sy-button-iconOnly,
a.sy-button-iconOnly {
  min-width: 38px !important;
  width: 38px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
}
/* Force icon SVG size for iconOnly buttons */
.sy-button-iconOnly .fui-Button__icon svg {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
}
/* Ensure SyButton icons use Fluent UI equivalent of "Input / Medium Semi-Bold" */
/* Maps to Fluent tokens: font-family = $fontFamilyBase, font-weight = $fontWeightSemibold,
  */
.fui-Button.sy-button-primary .fui-Button__icon,
.fui-Button.sy-button-outline-plus .fui-Button__icon,
.fui-Button.sy-button-secondary .fui-Button__icon,
.fui-Button.sy-button-tertiary .fui-Button__icon,
.fui-Button.sy-button-quarterly .fui-Button__icon,
.fui-Button.sy-button-ghost .fui-Button__icon,
.fui-Button.sy-button-link .fui-Button__icon,
button.sy-button-primary.fui-Button .fui-Button__icon,
button.sy-button-outline-plus.fui-Button .fui-Button__icon,
button.sy-button-secondary.fui-Button .fui-Button__icon,
button.sy-button-tertiary.fui-Button .fui-Button__icon,
button.sy-button-quarterly.fui-Button .fui-Button__icon,
button.sy-button-ghost.fui-Button .fui-Button__icon,
button.sy-button-link.fui-Button .fui-Button__icon,
a.sy-button-primary.fui-Button .fui-Button__icon,
a.sy-button-outline-plus.fui-Button .fui-Button__icon,
a.sy-button-secondary.fui-Button .fui-Button__icon,
a.sy-button-tertiary.fui-Button .fui-Button__icon,
a.sy-button-quarterly.fui-Button .fui-Button__icon,
a.sy-button-ghost.fui-Button .fui-Button__icon,
a.sy-button-link.fui-Button .fui-Button__icon {
  font-family: var(--fontFamilyBase) !important;
  font-weight: var(--fontWeightBold) !important;
  /* inherit font-size from button root to reliably override Fluent rules */
  font-size: inherit !important;
  line-height: inherit !important;
}
/* Also apply semibold tokens to the button label/text so it matches the desired visual weight */
.fui-Button.sy-button-primary .fui-Button__content,
.fui-Button.sy-button-outline-plus .fui-Button__content,
.fui-Button.sy-button-secondary .fui-Button__content,
.fui-Button.sy-button-tertiary .fui-Button__content,
.fui-Button.sy-button-quarterly .fui-Button__content,
.fui-Button.sy-button-ghost .fui-Button__content,
.fui-Button.sy-button-link .fui-Button__content,
button.sy-button-primary.fui-Button .fui-Button__content,
button.sy-button-outline-plus.fui-Button .fui-Button__content,
button.sy-button-secondary.fui-Button .fui-Button__content,
button.sy-button-tertiary.fui-Button .fui-Button__content,
button.sy-button-quarterly.fui-Button .fui-Button__content,
button.sy-button-ghost.fui-Button .fui-Button__content,
button.sy-button-link.fui-Button .fui-Button__content,
a.sy-button-primary.fui-Button .fui-Button__content,
a.sy-button-outline-plus.fui-Button .fui-Button__content,
a.sy-button-secondary.fui-Button .fui-Button__content,
a.sy-button-tertiary.fui-Button .fui-Button__content,
a.sy-button-quarterly.fui-Button .fui-Button__content,
a.sy-button-ghost.fui-Button .fui-Button__content,
a.sy-button-link.fui-Button .fui-Button__content {
  font-family: var(--fontFamilyBase) !important;
  font-weight: var(--fontWeightSemibold) !important;
  /* inherit font-size from button root so inner elements like spans inherit too */
  font-size: inherit !important;
  /* ensure any direct children also inherit (some Fluent markup wraps text in spans) */
}
.fui-Button.sy-button-primary .fui-Button__content > *,
.fui-Button.sy-button-outline-plus .fui-Button__content > *,
.fui-Button.sy-button-secondary .fui-Button__content > *,
.fui-Button.sy-button-tertiary .fui-Button__content > *,
.fui-Button.sy-button-quarterly .fui-Button__content > *,
.fui-Button.sy-button-ghost .fui-Button__content > *,
.fui-Button.sy-button-link .fui-Button__content > *,
button.sy-button-primary.fui-Button .fui-Button__content > *,
button.sy-button-outline-plus.fui-Button .fui-Button__content > *,
button.sy-button-secondary.fui-Button .fui-Button__content > *,
button.sy-button-tertiary.fui-Button .fui-Button__content > *,
button.sy-button-quarterly.fui-Button .fui-Button__content > *,
button.sy-button-ghost.fui-Button .fui-Button__content > *,
button.sy-button-link.fui-Button .fui-Button__content > *,
a.sy-button-primary.fui-Button .fui-Button__content > *,
a.sy-button-outline-plus.fui-Button .fui-Button__content > *,
a.sy-button-secondary.fui-Button .fui-Button__content > *,
a.sy-button-tertiary.fui-Button .fui-Button__content > *,
a.sy-button-quarterly.fui-Button .fui-Button__content > *,
a.sy-button-ghost.fui-Button .fui-Button__content > *,
a.sy-button-link.fui-Button .fui-Button__content > * {
  font-size: inherit !important;
}
.fui-Button.sy-button-primary .fui-Button__content,
.fui-Button.sy-button-outline-plus .fui-Button__content,
.fui-Button.sy-button-secondary .fui-Button__content,
.fui-Button.sy-button-tertiary .fui-Button__content,
.fui-Button.sy-button-quarterly .fui-Button__content,
.fui-Button.sy-button-ghost .fui-Button__content,
.fui-Button.sy-button-link .fui-Button__content,
button.sy-button-primary.fui-Button .fui-Button__content,
button.sy-button-outline-plus.fui-Button .fui-Button__content,
button.sy-button-secondary.fui-Button .fui-Button__content,
button.sy-button-tertiary.fui-Button .fui-Button__content,
button.sy-button-quarterly.fui-Button .fui-Button__content,
button.sy-button-ghost.fui-Button .fui-Button__content,
button.sy-button-link.fui-Button .fui-Button__content,
a.sy-button-primary.fui-Button .fui-Button__content,
a.sy-button-outline-plus.fui-Button .fui-Button__content,
a.sy-button-secondary.fui-Button .fui-Button__content,
a.sy-button-tertiary.fui-Button .fui-Button__content,
a.sy-button-quarterly.fui-Button .fui-Button__content,
a.sy-button-ghost.fui-Button .fui-Button__content,
a.sy-button-link.fui-Button .fui-Button__content {
  line-height: var(--lineHeightBase600) !important;
}
/* Custom styling for SyButton with appearance="primary" */
.sy-button-primary.fui-Button,
button.sy-button-primary.fui-Button,
a.sy-button-primary.fui-Button {
  color: var(--color-white-100pct) !important;
}
.sy-button-primary.fui-Button:focus-visible,
button.sy-button-primary.fui-Button:focus-visible,
a.sy-button-primary.fui-Button:focus-visible {
  outline: 2px solid var(--color-primary-ring-500) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--color-primary-ring-500) !important;
  border: none !important;
}
/* Dark mode for primary button */
.fui-FluentProvider--colorScheme-dark .sy-button-primary.fui-Button,
.fui-FluentProvider--colorScheme-dark button.sy-button-primary.fui-Button,
.fui-FluentProvider--colorScheme-dark a.sy-button-primary.fui-Button,
body[data-theme=dark] .sy-button-primary.fui-Button,
body[data-theme=dark] button.sy-button-primary.fui-Button,
body[data-theme=dark] a.sy-button-primary.fui-Button {
  background-color: var(--color-primary-500) !important;
  color: var(--color-white-100pct) !important;
}
/* Disabled state for primary button */
.sy-button-primary.fui-Button:disabled,
button.sy-button-primary.fui-Button:disabled,
a.sy-button-primary.fui-Button:disabled {
  background-color: var(--color-primary-400) !important;
  color: var(--color-white-100pct) !important;
  border: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
/* Dark mode disabled state for primary button */
body[data-theme=dark] .sy-button-primary.fui-Button:disabled,
body[data-theme=dark] button.sy-button-primary.fui-Button:disabled,
body[data-theme=dark] a.sy-button-primary.fui-Button:disabled {
  background-color: var(--color-primary-400) !important;
  color: var(--color-white-100pct) !important;
}
/* Custom styling for SyButton with appearance="outline+" */
.sy-button-outline-plus.fui-Button {
  color: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}
.sy-button-outline-plus.fui-Button:hover:not(:disabled) {
  color: var(--color-primary-600) !important;
  border-color: var(--color-primary-600) !important;
  background-color: transparent !important;
}
.sy-button-outline-plus.fui-Button:active:not(:disabled) {
  color: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
  background-color: var(--color-primary-500-10pct) !important;
}
.sy-button-outline-plus.fui-Button:focus-visible {
  outline: 2px solid var(--color-primary-ring-500) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--color-primary-ring-500) !important;
}
/* Dark mode for outline button */
.fui-FluentProvider--colorScheme-dark .sy-button-outline-plus.fui-Button,
.fui-FluentProvider--colorScheme-dark button.sy-button-outline-plus.fui-Button,
.fui-FluentProvider--colorScheme-dark a.sy-button-outline-plus.fui-Button,
body[data-theme=dark] .sy-button-outline-plus.fui-Button,
body[data-theme=dark] button.sy-button-outline-plus.fui-Button,
body[data-theme=dark] a.sy-button-outline-plus.fui-Button {
  color: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}
/* Disabled state for outline button */
.sy-button-outline-plus.fui-Button:disabled,
button.sy-button-outline-plus.fui-Button:disabled,
a.sy-button-outline-plus.fui-Button:disabled {
  background-color: transparent !important;
  color: var(--color-primary-300) !important;
  border-color: var(--color-primary-300) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
/* Dark mode disabled state for outline button */
body[data-theme=dark] .sy-button-outline-plus.fui-Button:disabled,
body[data-theme=dark] button.sy-button-outline-plus.fui-Button:disabled,
body[data-theme=dark] a.sy-button-outline-plus.fui-Button:disabled {
  background-color: transparent !important;
  color: var(--color-primary-300) !important;
  border-color: var(--color-primary-300) !important;
}
/*---------------------------------------------------------------------------------------------*/
/* Custom styling for SyButton with appearance="secondary" (light gray background + no border) */
.sy-button-secondary {
  background-color: var(--color-gray-100) !important;
  border: none !important;
}
.sy-button-secondary:hover:not(:disabled) {
  background-color: var(--color-gray-200) !important;
  border: none !important;
}
.sy-button-secondary:active:not(:disabled) {
  background-color: var(--color-gray-300) !important;
  border: none !important;
}
/* Also target the root element with higher specificity */
button.sy-button-secondary.fui-Button,
a.sy-button-secondary.fui-Button {
  background-color: var(--color-gray-100) !important;
  border: none !important;
}
button.sy-button-secondary.fui-Button:hover:not(:disabled),
a.sy-button-secondary.fui-Button:hover:not(:disabled) {
  background-color: var(--color-gray-200) !important;
  border: none !important;
}
button.sy-button-secondary.fui-Button:active:not(:disabled),
a.sy-button-secondary.fui-Button:active:not(:disabled) {
  background-color: var(--color-gray-300) !important;
  border: none !important;
}
.sy-button-secondary.fui-Button:focus-visible,
button.sy-button-secondary.fui-Button:focus-visible,
a.sy-button-secondary.fui-Button:focus-visible {
  outline: 2px solid var(--color-gray-ring-500) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--color-gray-ring-500) !important;
}
/* Dark mode for secondary button */
.fui-FluentProvider--colorScheme-dark .sy-button-secondary,
.fui-FluentProvider--colorScheme-dark button.sy-button-secondary.fui-Button,
.fui-FluentProvider--colorScheme-dark a.sy-button-secondary.fui-Button,
body[data-theme=dark] .sy-button-secondary,
body[data-theme=dark] button.sy-button-secondary.fui-Button,
body[data-theme=dark] a.sy-button-secondary.fui-Button {
  background-color: var(--color-zinc-700) !important;
  color: var(--color-gray-100) !important;
}
.fui-FluentProvider--colorScheme-dark button.sy-button-secondary.fui-Button:hover:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-secondary.fui-Button:hover:not(:disabled),
body[data-theme=dark] button.sy-button-secondary.fui-Button:hover:not(:disabled),
body[data-theme=dark] a.sy-button-secondary.fui-Button:hover:not(:disabled) {
  background-color: var(--color-zinc-600) !important;
  color: var(--color-gray-100) !important;
}
.fui-FluentProvider--colorScheme-dark button.sy-button-secondary.fui-Button:active:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-secondary.fui-Button:active:not(:disabled),
body[data-theme=dark] button.sy-button-secondary.fui-Button:active:not(:disabled),
body[data-theme=dark] a.sy-button-secondary.fui-Button:active:not(:disabled) {
  background-color: var(--color-zinc-800) !important;
  color: var(--color-gray-100) !important;
}
/*---------------------------------------------------------------------------------------------*/
/* Custom styling for SyButton with appearance="tertiary" (transparent background + border) */
/* Based on "Default" from design system */
.sy-button-tertiary {
  background-color: transparent !important;
  border-color: var(--color-gray-200) !important;
}
.sy-button-tertiary:hover:not(:disabled) {
  background-color: var(--color-gray-200) !important;
}
.sy-button-tertiary:active:not(:disabled) {
  background-color: var(--color-gray-300) !important;
}
/* Also target the root element with higher specificity */
button.sy-button-tertiary.fui-Button,
a.sy-button-tertiary.fui-Button {
  background-color: transparent !important;
  border-color: var(--color-gray-200) !important;
}
/* Apply tertiary foreground only when not disabled so disabled state falls back to standard disabled color (matches quarterly disabled) */
.sy-button-tertiary:not(:disabled) {
  color: var(--color-gray-500) !important;
}
button.sy-button-tertiary.fui-Button:not(:disabled),
a.sy-button-tertiary.fui-Button:not(:disabled) {
  color: var(--color-gray-500) !important;
}
button.sy-button-tertiary.fui-Button:hover:not(:disabled),
a.sy-button-tertiary.fui-Button:hover:not(:disabled) {
  background-color: var(--color-gray-200) !important;
}
button.sy-button-tertiary.fui-Button:active:not(:disabled),
a.sy-button-tertiary.fui-Button:active:not(:disabled) {
  background-color: var(--color-gray-300) !important;
}
.sy-button-tertiary.fui-Button:focus-visible,
button.sy-button-tertiary.fui-Button:focus-visible,
a.sy-button-tertiary.fui-Button:focus-visible {
  outline: 2px solid var(--color-gray-ring-500) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--color-gray-ring-500) !important;
  border: none !important;
}
/* Dark mode for tertiary button */
.fui-FluentProvider--colorScheme-dark .sy-button-tertiary:not(:disabled),
.fui-FluentProvider--colorScheme-dark button.sy-button-tertiary.fui-Button:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-tertiary.fui-Button:not(:disabled),
body[data-theme=dark] .sy-button-tertiary:not(:disabled),
body[data-theme=dark] button.sy-button-tertiary.fui-Button:not(:disabled),
body[data-theme=dark] a.sy-button-tertiary.fui-Button:not(:disabled) {
  background-color: var(--color-zinc-800) !important;
  border-color: var(--color-zinc-700) !important;
  color: var(--color-gray-100) !important;
}
.fui-FluentProvider--colorScheme-dark button.sy-button-tertiary.fui-Button:hover:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-tertiary.fui-Button:hover:not(:disabled),
body[data-theme=dark] button.sy-button-tertiary.fui-Button:hover:not(:disabled),
body[data-theme=dark] a.sy-button-tertiary.fui-Button:hover:not(:disabled) {
  background-color: var(--color-zinc-700) !important;
  color: var(--color-gray-100) !important;
}
.fui-FluentProvider--colorScheme-dark button.sy-button-tertiary.fui-Button:active:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-tertiary.fui-Button:active:not(:disabled),
body[data-theme=dark] button.sy-button-tertiary.fui-Button:active:not(:disabled),
body[data-theme=dark] a.sy-button-tertiary.fui-Button:active:not(:disabled) {
  background-color: var(--color-zinc-800) !important;
}
/* Dark mode - disabled tertiary should use a slightly darker border like quarterly disabled */
.fui-FluentProvider--colorScheme-dark .sy-button-tertiary.fui-Button:disabled,
.fui-FluentProvider--colorScheme-dark button.sy-button-tertiary.fui-Button:disabled,
.fui-FluentProvider--colorScheme-dark a.sy-button-tertiary.fui-Button:disabled,
body[data-theme=dark] .sy-button-tertiary.fui-Button:disabled,
body[data-theme=dark] button.sy-button-tertiary.fui-Button:disabled,
body[data-theme=dark] a.sy-button-tertiary.fui-Button:disabled {
  background-color: transparent !important;
  border: 1px solid var(--color-slate-500) !important;
  color: var(--color-slate-500) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
/* Light mode - disabled tertiary should use a muted gray foreground and subtle border */
.sy-button-tertiary.fui-Button:disabled,
button.sy-button-tertiary.fui-Button:disabled,
a.sy-button-tertiary.fui-Button:disabled {
  background-color: transparent !important;
  border: 1px solid var(--color-gray-200) !important;
  color: var(--color-gray-300) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
/* Light mode - ensure ghost and link disabled foreground matches tertiary disabled foreground */
.sy-button-ghost.fui-Button:disabled,
.sy-button-link.fui-Button:disabled,
button.sy-button-ghost.fui-Button:disabled,
button.sy-button-link.fui-Button:disabled,
a.sy-button-ghost.fui-Button:disabled,
a.sy-button-link.fui-Button:disabled {
  background-color: transparent !important;
  color: var(--color-gray-300) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
/*---------------------------------------------------------------------------------------------*/
/* Custom styling for SyButton with appearance="quarterly" (transparent background + black border) */
/* Based on "Neutral" from design system */
.sy-button-quarterly {
  background-color: transparent !important;
  border: 1px solid var(--color-gray-200) !important;
}
.sy-button-quarterly:hover:not(:disabled) {
  background-color: var(--color-gray-200) !important;
}
.sy-button-quarterly:active:not(:disabled) {
  background-color: var(--color-gray-300) !important;
}
/* Disabled state for quarterly button - use tertiary-like lighter border */
.sy-button-quarterly.fui-Button:disabled,
button.sy-button-quarterly.fui-Button:disabled,
a.sy-button-quarterly.fui-Button:disabled {
  background-color: transparent !important;
  border: 1px solid var(--color-gray-200) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
/* Also target the root element with higher specificity */
button.sy-button-quarterly.fui-Button,
a.sy-button-quarterly.fui-Button {
  background-color: transparent !important;
  border: 1px solid var(--color-gray-800) !important;
}
button.sy-button-quarterly.fui-Button:hover:not(:disabled),
a.sy-button-quarterly.fui-Button:hover:not(:disabled) {
  background-color: var(--color-gray-200) !important;
  border: 1px solid var(--color-gray-800) !important;
}
button.sy-button-quarterly.fui-Button:active:not(:disabled),
a.sy-button-quarterly.fui-Button:active:not(:disabled) {
  background-color: var(--color-gray-300) !important;
  border: 1px solid var(--color-gray-800) !important;
}
.sy-button-quarterly.fui-Button:focus-visible,
button.sy-button-quarterly.fui-Button:focus-visible,
a.sy-button-quarterly.fui-Button:focus-visible {
  outline: 2px solid var(--color-gray-ring-500) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--color-gray-ring-500) !important;
  border: none !important;
}
/* Dark mode for quarterly button */
.fui-FluentProvider--colorScheme-dark .sy-button-quarterly:not(:disabled),
.fui-FluentProvider--colorScheme-dark button.sy-button-quarterly.fui-Button:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-quarterly.fui-Button:not(:disabled),
body[data-theme=dark] .sy-button-quarterly:not(:disabled),
body[data-theme=dark] button.sy-button-quarterly.fui-Button:not(:disabled),
body[data-theme=dark] a.sy-button-quarterly.fui-Button:not(:disabled) {
  background-color: transparent !important;
  border: 1px solid var(--color-gray-100) !important;
  color: var(--color-gray-100) !important;
}
.fui-FluentProvider--colorScheme-dark button.sy-button-quarterly.fui-Button:hover:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-quarterly.fui-Button:hover:not(:disabled),
body[data-theme=dark] button.sy-button-quarterly.fui-Button:hover:not(:disabled),
body[data-theme=dark] a.sy-button-quarterly.fui-Button:hover:not(:disabled) {
  background-color: var(--color-zinc-700) !important;
}
.fui-FluentProvider--colorScheme-dark button.sy-button-quarterly.fui-Button:active:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-quarterly.fui-Button:active:not(:disabled),
body[data-theme=dark] button.sy-button-quarterly.fui-Button:active:not(:disabled),
body[data-theme=dark] a.sy-button-quarterly.fui-Button:active:not(:disabled) {
  background-color: var(--color-zinc-800) !important;
}
/* Dark mode - disabled quarterly should also use tertiary-like lighter border */
.fui-FluentProvider--colorScheme-dark .sy-button-quarterly.fui-Button:disabled,
.fui-FluentProvider--colorScheme-dark button.sy-button-quarterly.fui-Button:disabled,
.fui-FluentProvider--colorScheme-dark a.sy-button-quarterly.fui-Button:disabled,
body[data-theme=dark] .sy-button-quarterly.fui-Button:disabled,
body[data-theme=dark] button.sy-button-quarterly.fui-Button:disabled,
body[data-theme=dark] a.sy-button-quarterly.fui-Button:disabled {
  background-color: transparent !important;
  border: 1px solid var(--color-slate-500) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
/* Final fallback: ensure quarterly shows a visible border in dark mode even if other rules intervene */
.fui-FluentProvider--colorScheme-dark .sy-button-quarterly.fui-Button,
.fui-FluentProvider--colorScheme-dark button.sy-button-quarterly.fui-Button,
.fui-FluentProvider--colorScheme-dark a.sy-button-quarterly.fui-Button,
body[data-theme=dark] .sy-button-quarterly.fui-Button,
body[data-theme=dark] button.sy-button-quarterly.fui-Button,
body[data-theme=dark] a.sy-button-quarterly.fui-Button {
  border: 1px solid var(--color-slate-500) !important;
}
/*---------------------------------------------------------------------------------------------*/
/* Custom styling for SyButton with appearance="ghost" (transparent background + no border) */
.sy-button-ghost {
  background-color: transparent !important;
  border: none !important;
  color: var(--color-gray-800) !important;
}
.sy-button-ghost:hover:not(:disabled) {
  background-color: var(--color-gray-200);
  border: none !important;
  color: var(--color-gray-700) !important;
}
.sy-button-ghost:active:not(:disabled) {
  background-color: var(--color-gray-300) !important;
  border: none !important;
  color: var(--color-gray-800) !important;
}
/* Also target the root element with higher specificity */
button.sy-button-ghost.fui-Button,
a.sy-button-ghost.fui-Button {
  background-color: transparent !important;
  border: none !important;
  color: var(--color-gray-800) !important;
}
button.sy-button-ghost.fui-Button:hover:not(:disabled),
a.sy-button-ghost.fui-Button:hover:not(:disabled) {
  background-color: var(--color-gray-200) !important;
  border: none !important;
  color: var(--color-gray-700) !important;
}
button.sy-button-ghost.fui-Button:active:not(:disabled),
a.sy-button-ghost.fui-Button:active:not(:disabled) {
  background-color: var(--color-gray-300) !important;
  border: none !important;
  color: var(--color-gray-800) !important;
}
.sy-button-ghost.fui-Button:focus-visible,
button.sy-button-ghost.fui-Button:focus-visible,
a.sy-button-ghost.fui-Button:focus-visible {
  outline: 2px solid var(--color-gray-ring-500) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--color-gray-ring-500) !important;
}
/* Dark mode for ghost button - behave like secondary in dark mode */
.fui-FluentProvider--colorScheme-dark .sy-button-ghost,
.fui-FluentProvider--colorScheme-dark button.sy-button-ghost.fui-Button,
.fui-FluentProvider--colorScheme-dark a.sy-button-ghost.fui-Button,
body[data-theme=dark] .sy-button-ghost,
body[data-theme=dark] button.sy-button-ghost.fui-Button,
body[data-theme=dark] a.sy-button-ghost.fui-Button {
  /* Keep ghost transparent by default in dark mode; keep text light. Hover/active rules below will still apply a background. */
  background-color: transparent !important;
  color: var(--color-gray-100) !important;
}
.fui-FluentProvider--colorScheme-dark button.sy-button-ghost.fui-Button:hover:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-ghost.fui-Button:hover:not(:disabled),
body[data-theme=dark] button.sy-button-ghost.fui-Button:hover:not(:disabled),
body[data-theme=dark] a.sy-button-ghost.fui-Button:hover:not(:disabled) {
  background-color: var(--color-zinc-700) !important;
  color: var(--color-gray-100) !important;
}
.fui-FluentProvider--colorScheme-dark button.sy-button-ghost.fui-Button:active:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-ghost.fui-Button:active:not(:disabled),
body[data-theme=dark] button.sy-button-ghost.fui-Button:active:not(:disabled),
body[data-theme=dark] a.sy-button-ghost.fui-Button:active:not(:disabled) {
  background-color: var(--color-zinc-800) !important;
  color: var(--color-gray-100) !important;
}
/* Dark mode - disabled ghost should use a slightly darker/muted foreground like quarterly disabled */
.fui-FluentProvider--colorScheme-dark .sy-button-ghost.fui-Button:disabled,
.fui-FluentProvider--colorScheme-dark button.sy-button-ghost.fui-Button:disabled,
.fui-FluentProvider--colorScheme-dark a.sy-button-ghost.fui-Button:disabled,
body[data-theme=dark] .sy-button-ghost.fui-Button:disabled,
body[data-theme=dark] button.sy-button-ghost.fui-Button:disabled,
body[data-theme=dark] a.sy-button-ghost.fui-Button:disabled {
  background-color: transparent !important;
  color: var(--color-slate-500) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
/*---------------------------------------------------------------------------------------------*/
/* Custom styling for SyButton with appearance="transparent" (transparent background + no border) */
.sy-button-transparent {
  background-color: transparent !important;
  border: none !important;
  /* Default foreground for light mode */
  color: var(--color-gray-800) !important;
}
/* Ensure transparent buttons do not change foreground on hover/active/focus */
.sy-button-transparent:hover:not(:disabled),
.sy-button-transparent:active:not(:disabled),
.sy-button-transparent.fui-Button:focus-visible,
button.sy-button-transparent.fui-Button:hover:not(:disabled),
button.sy-button-transparent.fui-Button:active:not(:disabled),
button.sy-button-transparent.fui-Button:focus-visible,
a.sy-button-transparent.fui-Button:hover:not(:disabled),
a.sy-button-transparent.fui-Button:active:not(:disabled),
a.sy-button-transparent.fui-Button:focus-visible {
  background-color: transparent !important;
  border: none !important;
  /* Keep the same foreground color as the default (do not darken/lighten on hover) */
  color: inherit !important;
}
/* Dark mode: keep transparent button foreground light and unchanged on hover/active */
.fui-FluentProvider--colorScheme-dark .sy-button-transparent,
.fui-FluentProvider--colorScheme-dark button.sy-button-transparent.fui-Button,
.fui-FluentProvider--colorScheme-dark a.sy-button-transparent.fui-Button,
body[data-theme=dark] .sy-button-transparent,
body[data-theme=dark] button.sy-button-transparent.fui-Button,
body[data-theme=dark] a.sy-button-transparent.fui-Button {
  background-color: transparent !important;
  border: none !important;
  color: var(--color-gray-100) !important;
}
.fui-FluentProvider--colorScheme-dark .sy-button-transparent:hover:not(:disabled),
.fui-FluentProvider--colorScheme-dark .sy-button-transparent:active:not(:disabled),
.fui-FluentProvider--colorScheme-dark button.sy-button-transparent.fui-Button:hover:not(:disabled),
.fui-FluentProvider--colorScheme-dark button.sy-button-transparent.fui-Button:active:not(:disabled),
body[data-theme=dark] button.sy-button-transparent.fui-Button:hover:not(:disabled),
body[data-theme=dark] button.sy-button-transparent.fui-Button:active:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-transparent.fui-Button:hover:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-transparent.fui-Button:active:not(:disabled),
body[data-theme=dark] a.sy-button-transparent.fui-Button:hover:not(:disabled),
body[data-theme=dark] a.sy-button-transparent.fui-Button:active:not(:disabled) {
  background-color: transparent !important;
  border: none !important;
  color: var(--color-gray-100) !important;
}
/* If a foreground override was provided via CSS variables, ensure hover/active/focus keep that value
   (avoid the `color: inherit` rule above which forces the parent's color). */
.sy-button-override-fg.sy-button-transparent.fui-Button:hover:not(:disabled),
.sy-button-override-fg.sy-button-transparent.fui-Button:active:not(:disabled),
.sy-button-override-fg.sy-button-transparent.fui-Button:focus-visible,
button.sy-button-override-fg.sy-button-transparent.fui-Button:hover:not(:disabled),
button.sy-button-override-fg.sy-button-transparent.fui-Button:active:not(:disabled),
button.sy-button-override-fg.sy-button-transparent.fui-Button:focus-visible,
a.sy-button-override-fg.sy-button-transparent.fui-Button:hover:not(:disabled),
a.sy-button-override-fg.sy-button-transparent.fui-Button:active:not(:disabled),
a.sy-button-override-fg.sy-button-transparent.fui-Button:focus-visible {
  color: var(--sy-button-fg-light) !important;
}
.fui-FluentProvider--colorScheme-dark .sy-button-override-fg.sy-button-transparent.fui-Button:hover:not(:disabled),
.fui-FluentProvider--colorScheme-dark button.sy-button-override-fg.sy-button-transparent.fui-Button:hover:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-override-fg.sy-button-transparent.fui-Button:hover:not(:disabled),
body[data-theme=dark] .sy-button-override-fg.sy-button-transparent.fui-Button:hover:not(:disabled),
body[data-theme=dark] button.sy-button-override-fg.sy-button-transparent.fui-Button:hover:not(:disabled),
body[data-theme=dark] a.sy-button-override-fg.sy-button-transparent.fui-Button:hover:not(:disabled),
.fui-FluentProvider--colorScheme-dark .sy-button-override-fg.sy-button-transparent.fui-Button:active:not(:disabled),
.fui-FluentProvider--colorScheme-dark button.sy-button-override-fg.sy-button-transparent.fui-Button:active:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-override-fg.sy-button-transparent.fui-Button:active:not(:disabled),
body[data-theme=dark] .sy-button-override-fg.sy-button-transparent.fui-Button:active:not(:disabled),
body[data-theme=dark] button.sy-button-override-fg.sy-button-transparent.fui-Button:active:not(:disabled),
body[data-theme=dark] a.sy-button-override-fg.sy-button-transparent.fui-Button:active:not(:disabled),
.fui-FluentProvider--colorScheme-dark .sy-button-override-fg.sy-button-transparent.fui-Button:focus-visible,
.fui-FluentProvider--colorScheme-dark button.sy-button-override-fg.sy-button-transparent.fui-Button:focus-visible,
.fui-FluentProvider--colorScheme-dark a.sy-button-override-fg.sy-button-transparent.fui-Button:focus-visible,
body[data-theme=dark] .sy-button-override-fg.sy-button-transparent.fui-Button:focus-visible,
body[data-theme=dark] button.sy-button-override-fg.sy-button-transparent.fui-Button:focus-visible,
body[data-theme=dark] a.sy-button-override-fg.sy-button-transparent.fui-Button:focus-visible {
  color: var(--sy-button-fg-dark) !important;
}
/* Disabled state: ensure a muted but stable foreground */
.sy-button-transparent.fui-Button:disabled,
button.sy-button-transparent.fui-Button:disabled,
a.sy-button-transparent.fui-Button:disabled {
  background-color: transparent !important;
  border: none !important;
  color: var(--color-gray-300) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
/*---------------------------------------------------------------------------------------------*/
/* Custom styling for SyButton with appearance="link" (transparent background + no border) */
.sy-button-link {
  background-color: transparent !important;
  border: none !important;
  color: var(--color-gray-800) !important;
}
.sy-button-link:hover:not(:disabled) {
  background-color: transparent !important;
  border: none !important;
  color: var(--color-gray-700) !important;
  text-decoration: underline !important;
}
.sy-button-link:active:not(:disabled) {
  background-color: transparent !important;
  border: none !important;
  color: var(--color-gray-800) !important;
  text-decoration: underline !important;
}
/* Also target the root element with higher specificity */
button.sy-button-link.fui-Button,
a.sy-button-link.fui-Button {
  background-color: transparent !important;
  border: none !important;
  color: var(--color-gray-800) !important;
}
button.sy-button-link.fui-Button:hover:not(:disabled),
a.sy-button-link.fui-Button:hover:not(:disabled) {
  background-color: transparent !important;
  border: none !important;
  color: var(--color-gray-700) !important;
  text-decoration: underline !important;
}
button.sy-button-link.fui-Button:active:not(:disabled),
a.sy-button-link.fui-Button:active:not(:disabled) {
  background-color: transparent !important;
  border: none !important;
  color: var(--color-gray-800) !important;
  text-decoration: underline !important;
}
.sy-button-link.fui-Button:focus-visible,
button.sy-button-link.fui-Button:focus-visible,
a.sy-button-link.fui-Button:focus-visible {
  outline: 2px solid var(--color-gray-ring-500) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--color-gray-ring-500) !important;
}
/* Dark mode for link button - make foreground almost white to match secondary/quarterly */
.fui-FluentProvider--colorScheme-dark .sy-button-link:not(:disabled),
.fui-FluentProvider--colorScheme-dark button.sy-button-link.fui-Button:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-link.fui-Button:not(:disabled),
body[data-theme=dark] .sy-button-link:not(:disabled),
body[data-theme=dark] button.sy-button-link.fui-Button:not(:disabled),
body[data-theme=dark] a.sy-button-link.fui-Button:not(:disabled) {
  background-color: transparent !important;
  border: none !important;
  color: var(--color-gray-100) !important;
  text-decoration: none !important;
  /* default no underline in dark mode */
}
.fui-FluentProvider--colorScheme-dark button.sy-button-link.fui-Button:hover:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-link.fui-Button:hover:not(:disabled),
body[data-theme=dark] button.sy-button-link.fui-Button:hover:not(:disabled),
body[data-theme=dark] a.sy-button-link.fui-Button:hover:not(:disabled) {
  /* Keep transparent background on hover in dark mode; emphasize with underline and visible text */
  background-color: transparent !important;
  color: var(--color-gray-100) !important;
  text-decoration: underline !important;
}
.fui-FluentProvider--colorScheme-dark button.sy-button-link.fui-Button:active:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-link.fui-Button:active:not(:disabled),
body[data-theme=dark] button.sy-button-link.fui-Button:active:not(:disabled),
body[data-theme=dark] a.sy-button-link.fui-Button:active:not(:disabled) {
  background-color: transparent !important;
  color: var(--color-gray-100) !important;
  text-decoration: underline !important;
}
/*---------------------------------------------------------------------------------------------*/
/* Custom white background override for specific buttons (like Cancel in dialogs) */
.sy-button-white-bg {
  background-color: var(--color-white-100pct) !important;
  border: 1px solid var(--color-gray-300) !important;
  border-radius: 8px !important;
}
.sy-button-white-bg:hover:not(:disabled) {
  background-color: var(--color-gray-100) !important;
}
.sy-button-white-bg:active:not(:disabled) {
  background-color: var(--color-gray-200) !important;
}
/* Dark mode for white-bg button */
.fui-FluentProvider--colorScheme-dark .sy-button-white-bg,
body[data-theme=dark] .sy-button-white-bg {
  background-color: var(--color-zinc-800) !important;
  border-color: var(--color-zinc-600) !important;
}
.fui-FluentProvider--colorScheme-dark .sy-button-white-bg:hover:not(:disabled),
body[data-theme=dark] .sy-button-white-bg:hover:not(:disabled) {
  background-color: var(--color-zinc-700) !important;
}
.fui-FluentProvider--colorScheme-dark .sy-button-white-bg:active:not(:disabled),
body[data-theme=dark] .sy-button-white-bg:active:not(:disabled) {
  background-color: var(--color-zinc-600) !important;
}
/*---------------------------------------------------------------------------------------------*/
/* Background color override using CSS variables - with high specificity to override base appearances */
.sy-button-override-bg.fui-Button,
button.sy-button-override-bg.fui-Button,
a.sy-button-override-bg.fui-Button {
  background-color: var(--sy-button-bg-light) !important;
  border-radius: 8px !important;
}
.fui-FluentProvider--colorScheme-dark .sy-button-override-bg.fui-Button,
.fui-FluentProvider--colorScheme-dark button.sy-button-override-bg.fui-Button,
.fui-FluentProvider--colorScheme-dark a.sy-button-override-bg.fui-Button,
body[data-theme=dark] .sy-button-override-bg.fui-Button,
body[data-theme=dark] button.sy-button-override-bg.fui-Button,
body[data-theme=dark] a.sy-button-override-bg.fui-Button {
  background-color: var(--sy-button-bg-dark) !important;
}
/* Foreground override using CSS variables - allows component-level overrides for text/icon color */
.sy-button-override-fg.fui-Button,
button.sy-button-override-fg.fui-Button,
a.sy-button-override-fg.fui-Button {
  color: var(--sy-button-fg-light) !important;
}
.fui-FluentProvider--colorScheme-dark .sy-button-override-fg.fui-Button,
.fui-FluentProvider--colorScheme-dark button.sy-button-override-fg.fui-Button,
.fui-FluentProvider--colorScheme-dark a.sy-button-override-fg.fui-Button,
body[data-theme=dark] .sy-button-override-fg.fui-Button,
body[data-theme=dark] button.sy-button-override-fg.fui-Button,
body[data-theme=dark] a.sy-button-override-fg.fui-Button {
  color: var(--sy-button-fg-dark) !important;
}
/* Ensure icon elements and svgs inherit the overridden color */
.sy-button-override-fg .fui-Button__icon,
button.sy-button-override-fg.fui-Button .fui-Button__icon,
a.sy-button-override-fg.fui-Button .fui-Button__icon,
.sy-button-override-fg svg,
button.sy-button-override-fg.fui-Button svg,
a.sy-button-override-fg.fui-Button svg {
  color: inherit !important;
  /* Prefer stroke for outline icon sets (e.g., lucide). Avoid filling SVGs so outline icons stay outlines. */
  stroke: currentColor !important;
  fill: none !important;
}
/*---------------------------------------------------------------------------------------------*/
/* Opt-in hover background override
   Components can pass CSS variables --sy-button-hover-bg-light / --sy-button-hover-bg-dark
   and add the .sy-button-override-hover class to apply a custom hover background without
   modifying global ghost/tertiary styles.
*/
.sy-button-override-hover.fui-Button:hover:not(:disabled),
button.sy-button-override-hover.fui-Button:hover:not(:disabled),
a.sy-button-override-hover.fui-Button:hover:not(:disabled) {
  /* Use the light-mode hover var by default */
  background-color: var(--sy-button-hover-bg-light) !important;
}
/* Even higher specificity: when the button also has the ghost appearance, ensure the
   override wins (ghost rules also use !important). This selector has one extra class
   and will outrank the generic ghost hover selectors.
*/
button.sy-button-ghost.sy-button-override-hover.fui-Button:hover:not(:disabled),
.fui-Button.sy-button-ghost.sy-button-override-hover:hover:not(:disabled),
a.sy-button-ghost.sy-button-override-hover.fui-Button:hover:not(:disabled) {
  background-color: var(--sy-button-hover-bg-light) !important;
}
.fui-FluentProvider--colorScheme-dark .sy-button-override-hover.fui-Button:hover:not(:disabled),
.fui-FluentProvider--colorScheme-dark button.sy-button-override-hover.fui-Button:hover:not(:disabled),
.fui-FluentProvider--colorScheme-dark a.sy-button-override-hover.fui-Button:hover:not(:disabled),
body[data-theme=dark] .sy-button-override-hover.fui-Button:hover:not(:disabled),
body[data-theme=dark] button.sy-button-override-hover.fui-Button:hover:not(:disabled),
body[data-theme=dark] a.sy-button-override-hover.fui-Button:hover:not(:disabled) {
  /* In dark mode use dark-mode hover var */
  background-color: var(--sy-button-hover-bg-dark) !important;
}
/* Higher specificity dark-mode override for ghost + override-hover combination */
.fui-FluentProvider--colorScheme-dark button.sy-button-ghost.sy-button-override-hover.fui-Button:hover:not(:disabled),
.fui-FluentProvider--colorScheme-dark .fui-Button.sy-button-ghost.sy-button-override-hover:hover:not(:disabled),
body[data-theme=dark] button.sy-button-ghost.sy-button-override-hover.fui-Button:hover:not(:disabled),
body[data-theme=dark] .fui-Button.sy-button-ghost.sy-button-override-hover:hover:not(:disabled),
body[data-theme=dark] a.sy-button-ghost.sy-button-override-hover.fui-Button:hover:not(:disabled) {
  background-color: var(--sy-button-hover-bg-dark) !important;
}body[data-theme=dark] .footer-central-dark-mode {
  background-color: rgba(201, 130, 56, 0.2) !important;
  color: #ffffff !important;
}
body[data-theme=dark] .footer-central-dark-mode .fui-Text {
  color: #ffffff !important;
}

/* Move footer top spacing here instead of inline style in the component */
.footer-container-margin {
  margin-top: 16px;
  margin-bottom: 24px;
}

/* Mobile footer enhancements */
@media (min-width: 390px) and (max-width: 480px) {
  .footer-central-dark-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .footer-central-dark-mode svg {
    align-self: center;
    margin-top: 0;
    flex-shrink: 0;
    margin-right: 6px;
  }
  /* iPhone 16 Pro (narrow) */
}
@media (min-width: 390px) and (max-width: 480px) and (min-width: 390px) and (max-width: 399px) {
  .footer-container-margin {
    width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (min-width: 390px) and (max-width: 480px) {
  /* iPhone 16 Pro Max (wider) */
}
@media (min-width: 390px) and (max-width: 480px) and (min-width: 400px) and (max-width: 480px) {
  .footer-container-margin {
    width: 402.11px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}.sourcePreviewContainer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  box-sizing: border-box;
  padding-left: 32px;
  padding-right: 26px;
}
body[data-theme=dark] .sourcePreviewContainer {
  background-color: var(--color-zinc-800) !important;
}/*
** Custom color variables for SyGPT Application
** These extend the Fluent UI design tokens with additional color palettes
*/
/*
** CSS Custom Properties (CSS Variables)
** These can be overridden at runtime and support theming
*/
:root {
  /* Gray Scale */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-gray-ring-500: #c7c9cd;
  /* Slate Scale */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  /* Zinc Scale */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  /* Neutral Scale */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  /* Stone Scale */
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  /* Lime Scale */
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  /* Green Scale */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-green-ring-500: #c4ede8;
  /* Emerald Scale */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
  /* Teal Scale */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
  /* Cyan Scale */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
  /* Sky Scale */
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
  /* Blue Scale */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  /* Indigo Scale */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
  /* Violet Scale */
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
  /* Purple Scale */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
  /* Fuchsia Scale */
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
  /* Pink Scale */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  /* Rose Scale */
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
  /* Red Scale */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-red-ring-500: #fbd0d0;
  /* Orange Scale */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  /* Amber Scale */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
  /* Yellow Scale */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-yellow-ring-500: #f9ecc1;
  /* White Variants */
  --color-white-100pct: #ffffff;
  --color-white-10pct: #ffffff;
  --color-white-3pct: #ffffff;
  --color-white-5pct: #ffffff;
  --color-white-15pct: #ffffff;
  --color-white-20pct: #ffffff;
  --color-white-30pct: #ffffff;
  --color-white-40pct: #ffffff;
  --color-white-50pct: #ffffff;
  --color-white-60pct: #ffffff;
  --color-white-70pct: #ffffff;
  --color-white-80pct: #ffffff;
  --color-white-90pct: #ffffff;
  --color-white-1pct: #ffffff;
  /* Soft Colors */
  --color-soft-green: #115e59;
  --color-soft-blue: #1e40af;
  --color-soft-red: #991b1b;
  --color-soft-yellow: #854d0e;
  --color-soft-gray: #374151;
  /* Primary Brand Scale */
  --color-primary-50: #fff5f3;
  --color-primary-100: #ffebe6;
  --color-primary-200: #ffd7cc;
  --color-primary-300: #ffc3b3;
  --color-primary-400: #ffaf99;
  --color-primary-500: #ff5730;
  --color-primary-600: #e64a26;
  --color-primary-700: #cc3e1c;
  --color-primary-800: #b33113;
  --color-primary-900: #99250a;
  --color-primary-950: #801a05;
  --color-primary-ring-500: #ffcdc1;
  --color-primary-500-10pct: rgba(255, 87, 48, 0.1);
  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  /* Spacing Scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-17: 68px;
  --spacing-18: 72px;
  --spacing-19: 76px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
  --spacing-4-5: 18px;
  --spacing-5-5: 22px;
  --spacing-6-5: 26px;
  --spacing-7-5: 30px;
  --spacing-8-5: 34px;
  --spacing-9-5: 38px;
  --spacing-10-5: 42px;
  --spacing-11-5: 46px;
  --spacing-12-5: 50px;
  --spacing-13-5: 54px;
  --spacing-14-5: 58px;
  --spacing-15-5: 62px;
  --spacing-16-5: 66px;
  --spacing-17-5: 70px;
  --spacing-18-5: 74px;
  --spacing-19-5: 78px;
}
/*
** SCSS Variables for convenient usage in SCSS files
** These reference the CSS custom properties above
*/
/* Gray Scale */
/* Slate Scale */
/* Zinc Scale */
/* Neutral Scale */
/* Stone Scale */
/* Lime Scale */
/* Green Scale */
/* Emerald Scale */
/* Teal Scale */
/* Cyan Scale */
/* Sky Scale */
/* Blue Scale */
/* Indigo Scale */
/* Violet Scale */
/* Purple Scale */
/* Fuchsia Scale */
/* Pink Scale */
/* Rose Scale */
/* Red Scale */
/* Orange Scale */
/* Amber Scale */
/* Yellow Scale */
/* White Variants */
/* Soft Colors */
/* Primary Brand Scale */
/* Border Radius */
/* Spacing Scale */
/* Dark mode: bouton primary dans le header, fond zinc 700 et texte blanc */
[data-theme=dark] .drawer-header-custom .sy-button-primary.fui-Button,
[data-theme=dark] .drawer-header-custom button.sy-button-primary.fui-Button,
[data-theme=dark] .drawer-header-custom a.sy-button-primary.fui-Button {
  background-color: var(--color-zinc-700) !important;
  color: #fff !important;
  border: none !important;
}
/* Light mode: make primary button text black only in drawer header */
[data-theme=light] .drawer-header-custom .sy-button-primary.fui-Button {
  color: var(--color-gray-500) !important;
}
[data-theme=light] .drawer-header-actions .sy-button-root {
  border: 1px solid var(--color-gray-300) !important;
  background-color: var(--color-zinc-50) !important; /* Colors/Zinc/50 (mode jour) */
}
.drawer-header-actions {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  filter: none !important;
}
[data-theme=light] .drawer-header-custom {
  background-color: var(--color-zinc-50); /* Colors/Zinc/50 (mode jour) */
}
.drawer-header-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 57px;
  min-height: 57px;
  max-height: 57px;
  padding: 0 8px;
  border-bottom: 1px solid var(--color-slate-300); /* Colors/Slate/300 */
  width: 100%;
  box-sizing: border-box;
  gap: 8px;
}
/* Mode nuit uniquement : fond zinc 800 */
[data-theme=dark] .drawer-header-custom {
  background-color: var(--color-zinc-800) !important; /* Colors/Zinc/800 for dark mode */
  border-bottom: 1px solid var(--color-slate-600);
}
.drawer-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0; /* allow children to shrink for ellipsis */
}
.drawer-header-book-icon {
  color: var(--color-gray-700);
  width: 18px;
  height: 18px;
}
[data-theme=dark] .drawer-header-book-icon {
  color: #fff !important;
}
.drawer-header-title {
  /* occupy remaining space but stay on one line */
  flex: 1 1 auto;
  min-width: 0; /* important for truncation inside flex */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 8px;
  font-size: 16px;
}
.drawer-header-actions {
  display: flex;
  align-items: center;
  gap: 12px; /* increase gap so buttons aren't visually cramped */
  flex: 0 0 auto;
  /* ensure the actions are always visible and not clipped; give more right padding */
  padding-right: 14px;
  margin-left: 12px; /* push actions further right away from title */
}
/* small tweak to keep close icon accessible on small viewports */
.drawer-header-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 6px;
  margin-left: 2px;
  cursor: pointer;
  color: #000 !important;
}
[data-theme=dark] .drawer-header-close {
  color: #fff !important;
}
/* Remove background for the open-btn and its children (including icon) */
.drawer-header-actions .sy-button-root.open-btn * {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* Also apply border to the immediate child (Fluent internal element) to ensure the visual border is shown
   even if Fluent places backgrounds/borders on inner elements */
.drawer-header-actions .sy-button-root > * {
  border: 1px solid var(--color-slate-400) !important;
  border-radius: var(--radius-lg) !important;
  box-sizing: border-box !important;
  background-color: var(--color-zinc-50) !important;
}/*
** This file is generated from Fluent UI tokens.
** To regenerate the file run: yarn run fluentSass.
** Generate on: 28/06/2023 23:34:58
*/
/*
** Variables for color
*/
/*
** Variables for border
*/
/*
** Variables for font
*/
/*
** Variables for line
*/
/*
** Variables for shadow
*/
/*
** Variables for stroke
*/
/*
** Variables for spacing
*/
/*
** Variables for duration
*/
/*
** Variables for curve
*/
/*
** Custom color variables for SyGPT Application
** These extend the Fluent UI design tokens with additional color palettes
*/
/*
** CSS Custom Properties (CSS Variables)
** These can be overridden at runtime and support theming
*/
:root {
  /* Gray Scale */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-gray-ring-500: #c7c9cd;
  /* Slate Scale */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  /* Zinc Scale */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  /* Neutral Scale */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  /* Stone Scale */
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  /* Lime Scale */
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  /* Green Scale */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-green-ring-500: #c4ede8;
  /* Emerald Scale */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
  /* Teal Scale */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
  /* Cyan Scale */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
  /* Sky Scale */
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
  /* Blue Scale */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  /* Indigo Scale */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
  /* Violet Scale */
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
  /* Purple Scale */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
  /* Fuchsia Scale */
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
  /* Pink Scale */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  /* Rose Scale */
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
  /* Red Scale */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-red-ring-500: #fbd0d0;
  /* Orange Scale */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  /* Amber Scale */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
  /* Yellow Scale */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-yellow-ring-500: #f9ecc1;
  /* White Variants */
  --color-white-100pct: #ffffff;
  --color-white-10pct: #ffffff;
  --color-white-3pct: #ffffff;
  --color-white-5pct: #ffffff;
  --color-white-15pct: #ffffff;
  --color-white-20pct: #ffffff;
  --color-white-30pct: #ffffff;
  --color-white-40pct: #ffffff;
  --color-white-50pct: #ffffff;
  --color-white-60pct: #ffffff;
  --color-white-70pct: #ffffff;
  --color-white-80pct: #ffffff;
  --color-white-90pct: #ffffff;
  --color-white-1pct: #ffffff;
  /* Soft Colors */
  --color-soft-green: #115e59;
  --color-soft-blue: #1e40af;
  --color-soft-red: #991b1b;
  --color-soft-yellow: #854d0e;
  --color-soft-gray: #374151;
  /* Primary Brand Scale */
  --color-primary-50: #fff5f3;
  --color-primary-100: #ffebe6;
  --color-primary-200: #ffd7cc;
  --color-primary-300: #ffc3b3;
  --color-primary-400: #ffaf99;
  --color-primary-500: #ff5730;
  --color-primary-600: #e64a26;
  --color-primary-700: #cc3e1c;
  --color-primary-800: #b33113;
  --color-primary-900: #99250a;
  --color-primary-950: #801a05;
  --color-primary-ring-500: #ffcdc1;
  --color-primary-500-10pct: rgba(255, 87, 48, 0.1);
  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  /* Spacing Scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-17: 68px;
  --spacing-18: 72px;
  --spacing-19: 76px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
  --spacing-4-5: 18px;
  --spacing-5-5: 22px;
  --spacing-6-5: 26px;
  --spacing-7-5: 30px;
  --spacing-8-5: 34px;
  --spacing-9-5: 38px;
  --spacing-10-5: 42px;
  --spacing-11-5: 46px;
  --spacing-12-5: 50px;
  --spacing-13-5: 54px;
  --spacing-14-5: 58px;
  --spacing-15-5: 62px;
  --spacing-16-5: 66px;
  --spacing-17-5: 70px;
  --spacing-18-5: 74px;
  --spacing-19-5: 78px;
}
/*
** SCSS Variables for convenient usage in SCSS files
** These reference the CSS custom properties above
*/
/* Gray Scale */
/* Slate Scale */
/* Zinc Scale */
/* Neutral Scale */
/* Stone Scale */
/* Lime Scale */
/* Green Scale */
/* Emerald Scale */
/* Teal Scale */
/* Cyan Scale */
/* Sky Scale */
/* Blue Scale */
/* Indigo Scale */
/* Violet Scale */
/* Purple Scale */
/* Fuchsia Scale */
/* Pink Scale */
/* Rose Scale */
/* Red Scale */
/* Orange Scale */
/* Amber Scale */
/* Yellow Scale */
/* White Variants */
/* Soft Colors */
/* Primary Brand Scale */
/* Border Radius */
/* Spacing Scale */
.welcome-section + div {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.conversationView {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: white !important;
}
.conversationView.show-welcome {
  background-color: #FAFAFA !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body[data-theme=dark] .conversationView {
  background-color: var(--color-zinc-900) !important;
}
.conversationView body[data-theme=dark] .fui-DrawerBody {
  background: transparent !important;
  background-color: transparent !important;
}
@media (max-width: 768px) {
  .conversationView {
    gap: 0.25rem;
  }
  .conversationView .fui-Divider {
    margin: 0.5rem 0;
  }
  .conversationView .fui-FeatureHighlight__content {
    margin-bottom: 1rem;
  }
}
.conversationView.mobile {
  gap: 0.125rem;
  margin-top: 0px !important;
  border-top: 1px solid var(--colorNeutralStroke2);
}
@media (max-width: 768px) {
  .conversationView.mobile {
    margin-top: 0px !important;
  }
}
.conversationView.mobile > * {
  margin-bottom: 0.25rem;
}
.conversationView.mobile .welcome-section {
  margin-bottom: 2px;
}
.conversationView .scrollable-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.conversationView .welcome-section {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  margin-bottom: 0rem;
  width: 100%;
}
.conversationView .welcome-section > * {
  max-width: 960px;
  width: 100%;
}
.conversationView .fui-Carousel {
  overflow: visible !important;
}
.conversationView .fui-Carousel .fui-CarouselViewport {
  overflow: visible !important;
}
.conversationView .fui-Carousel .fui-CarouselSlider {
  overflow: visible !important;
}
.conversationHeaderButtons {
  display: flex;
  gap: 1rem;
}
@media (max-width: 768px) {
  .conversationHeaderButtons {
    gap: 0.5rem;
  }
}
.fui-FluentProvider--colorScheme-dark .sy-conversation-menu-btn,
body[data-theme=dark] .sy-conversation-menu-btn {
  border: none !important;
}
.fui-FluentProvider--colorScheme-dark .sy-conversation-menu-btn svg,
body[data-theme=dark] .sy-conversation-menu-btn svg {
  color: white !important;
}
.fui-FluentProvider--colorScheme-dark .sy-conversation-menu-btn:hover,
body[data-theme=dark] .sy-conversation-menu-btn:hover {
  background-color: var(--color-zinc-600) !important;
}
.fui-FluentProvider--colorScheme-dark .sy-conversation-menu-btn:hover svg,
body[data-theme=dark] .sy-conversation-menu-btn:hover svg {
  color: white !important;
}
/* Light mode: subtle light gray border for conversation menu button */
body:not([data-theme=dark]) .sy-conversation-menu-btn,
body:not([data-theme=dark]) button.sy-conversation-menu-btn.fui-Button,
body:not([data-theme=dark]) a.sy-conversation-menu-btn.fui-Button {
  border: 1px solid var(--color-gray-200) !important;
  background: transparent !important;
}
/* Prevent a brief darker border or shadow when mouse leaves the button (focus-out)
     by forcing the same border on all interaction states and removing box-shadow
     and border transitions for this specific button in light mode. Keep focus-visible
     ring handling minimal to avoid visual flashes. */
/* Minimal fix: when the button receives keyboard focus or loses focus, avoid
     animating border/box-shadow to prevent a brief dark flash. Keep the same
     light gray border color. This is intentionally minimal to avoid extra rules. */
body:not([data-theme=dark]) .sy-conversation-menu-btn:focus-visible {
  border: 1px solid var(--color-gray-200) !important;
  box-shadow: none !important;
}
/* Also ensure no border/box-shadow transitions apply to this button in light mode */
body:not([data-theme=dark]) .sy-conversation-menu-btn {
  transition-property: background !important;
}
/* GPT name style as requested */
.gpt-name {
  text-align: center;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 18px;
  font-style: normal;
  font-weight: 600; /* Semi Bold */
  line-height: normal;
  letter-spacing: 0.09px;
}
/* GPT badge: rounded white pill with subtle border and icon */
.gpt-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--color-white-100pct);
  border: 1px solid var(--color-gray-200); /* subtle border */
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  /* allow badge to shrink inside flex containers */
  min-width: 0;
  max-width: 100%;
  /* ensure children can participate in flex sizing */
  align-items: center;
}
.gpt-badge__icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-slate-900); /* dark color for icon */
}
.gpt-badge__text {
  color: var(--color-slate-900);
}
/* Truncation utility for the GPT badge label */
.gpt-badge__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* make the label grow/shrink to occupy available space inside the badge */
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  /* Limit width by approximately number of characters using "ch" unit. */
  /* Desktop: ~40 characters, Mobile: ~15 characters. Adjust if needed. */
  max-width: 40ch; /* approx 40 characters */
  align-items: center;
}
@media (max-width: 768px) {
  .gpt-badge__label {
    max-width: 15ch; /* approx 15 characters on mobile */
  }
}
.gpt-badge__label .gpt-badge__text {
  display: inline-block !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
}
/* Dark mode: badge background --color-zinc-800, no border, white text/icon */
body[data-theme=dark] .gpt-badge {
  background: var(--color-zinc-800) !important;
  border: none !important;
  box-shadow: none !important;
}
body[data-theme=dark] .gpt-badge__icon,
body[data-theme=dark] .gpt-badge__text {
  color: white !important;
}
/* Skeleton alignment rules to match actual message bubbles (desktop defaults) */
.conversationView {
  /* Query / answer chat bubble skeletons (user / assistant) */
}
.conversationView .skeleton-253x83,
.conversationView .skeleton-253x32 {
  box-sizing: border-box;
  display: block;
  border-radius: 8px;
  padding: 12px 20px;
  max-width: 70%;
}
.conversationView .skeleton-253x83 {
  height: 83px;
}
.conversationView .skeleton-253x32 {
  height: 32px;
}
.conversationView {
  /* Centered placeholders (no conversation id) - desktop sizes */
}
.conversationView .skeleton-170x53 {
  display: block;
  width: 170px;
  height: 53px;
  border-radius: 6px;
}
.conversationView .skeleton-436x41 {
  display: block;
  width: 436px;
  height: 41px;
  border-radius: 6px;
}
.conversationView .skeleton-800x173 {
  display: block;
  width: 800px;
  height: 173px;
  border-radius: 6px;
}
.conversationView {
  /* wrapper to center centered placeholders */
}
.conversationView .skeleton-rect-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}
.conversationView {
  /* Ensure the last skeleton rectangle sits at the bottom of the viewport
     when in loading mode by making the wrapper a full-height column flex
     container and pushing content to the bottom. */
}
.conversationView .skeleton-loading-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;
  gap: 16px;
  min-height: calc(100vh - 120px); /* leave room for header/footer */
  /* push the final skeleton rectangle to the bottom */
}
.conversationView .skeleton-loading-wrapper > .skeleton-rect-wrapper:last-child {
  margin-top: auto;
  align-self: stretch;
  display: flex;
  justify-content: center;
}
.conversationView {
  /* Theme-specific visuals: use centralized skeleton variables when available */
}
body[data-theme=light] .conversationView .skeleton-170x53, body[data-theme=light] .conversationView .skeleton-436x41, body[data-theme=light] .conversationView .skeleton-800x173, body[data-theme=light] .conversationView .skeleton-253x83, body[data-theme=light] .conversationView .skeleton-253x32 {
  background-color: var(--skeleton-base-light) !important;
  background-image: linear-gradient(90deg, var(--skeleton-base-light) 0%, var(--skeleton-highlight-light) 50%, var(--skeleton-base-light) 100%) !important;
}
body[data-theme=dark] .conversationView .skeleton-170x53, body[data-theme=dark] .conversationView .skeleton-436x41, body[data-theme=dark] .conversationView .skeleton-800x173, body[data-theme=dark] .conversationView .skeleton-253x83, body[data-theme=dark] .conversationView .skeleton-253x32 {
  background-color: var(--skeleton-base-dark) !important;
  background-image: linear-gradient(90deg, var(--skeleton-base-dark) 0%, var(--skeleton-highlight-dark) 50%, var(--skeleton-base-dark) 100%) !important;
}
.conversationView {
  /* When a queryMessage is shown in skeleton mode, collapse inner wrappers so
     only a single rectangle is visible (avoid nested rounded boxes/paddings). */
}
.conversationView .queryMessage.skeleton-only {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: flex;
  justify-content: flex-start;
  /* Ensure the Skeleton child receives the proper radius */
}
.conversationView .queryMessage.skeleton-only .react-loading-skeleton,
.conversationView .queryMessage.skeleton-only .skeleton-253x83 {
  border-radius: 8px !important;
  padding: 12px 20px !important;
  display: block !important;
  max-width: 70% !important;
  box-sizing: border-box !important;
}
.conversationView {
  /* Align query/answer skeletons slightly to the right to match message bubbles */
}
.conversationView .queryMessage.skeleton-only,
.conversationView .answerMessage.skeleton-only {
  display: flex;
  width: 100%;
  justify-content: flex-end; /* push children to the right */
  padding: 0 16px !important;
}
.conversationView {
  /* Answer skeletons are slightly more right (assistant alignment) */
}
.conversationView .answerMessage.skeleton-only {
  justify-content: flex-end;
}
@media (max-width: 768px) {
  .conversationView .queryMessage.skeleton-only,
  .conversationView .answerMessage.skeleton-only {
    padding: 0 12px !important;
    justify-content: flex-end;
  }
  .conversationView .queryMessage.skeleton-only .skeleton-253x83,
  .conversationView .answerMessage.skeleton-only .skeleton-253x32 {
    max-width: 85% !important;
  }
}
.conversationView {
  /* Mobile-specific sizes (iPhone and similar): exact widths requested */
}
@media (max-width: 768px) {
  .conversationView .skeleton-170x53 {
    width: 142px !important;
    max-width: 142px !important;
  }
  .conversationView .skeleton-436x41 {
    width: 348px !important;
    max-width: 348px !important;
  }
  .conversationView .skeleton-800x173 {
    width: 348px !important;
    max-width: 348px !important;
    height: 140px !important;
  }
}
/* Three centered rectangular skeleton placeholders when no conversationId */
.conversationView .skeleton-rect-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (max-width: 768px) {
  .conversationView {
    /* Mobile exact widths requested */
  }
  .conversationView .conversationView .react-loading-skeleton.skeleton-170x53,
  .conversationView .conversationView .skeleton-170x53 {
    width: 142px !important;
    max-width: 142px !important;
  }
  .conversationView .conversationView .react-loading-skeleton.skeleton-436x41,
  .conversationView .conversationView .skeleton-436x41,
  .conversationView .conversationView .react-loading-skeleton.skeleton-800x173,
  .conversationView .conversationView .skeleton-800x173 {
    width: 348px !important;
    max-width: 348px !important;
  }
  .conversationView .skeleton-800x173 {
    height: 140px !important;
  }
}
/* Stronger, highly-specific rules to ensure skeletons are visible and sized correctly */
.conversationView .react-loading-skeleton.skeleton-170x53 {
  width: 170px !important;
  height: 53px !important;
  display: block !important;
  border-radius: 6px !important;
}
.conversationView .react-loading-skeleton.skeleton-436x41 {
  width: 436px !important;
  height: 41px !important;
  display: block !important;
  border-radius: 6px !important;
}
.conversationView .react-loading-skeleton.skeleton-800x173 {
  width: 800px !important;
  height: 173px !important;
  display: block !important;
  border-radius: 6px !important;
}
/* Ensure skeleton background remains visible in both themes for these specific elements */
.conversationView .react-loading-skeleton.skeleton-170x53,
.conversationView .react-loading-skeleton.skeleton-436x41,
.conversationView .react-loading-skeleton.skeleton-800x173 {
  background-color: var(--skeleton-base-light) !important;
  background-image: linear-gradient(90deg, var(--skeleton-base-light) 0%, var(--skeleton-highlight-light) 50%, var(--skeleton-base-light) 100%) !important;
}
body[data-theme=dark] .conversationView .react-loading-skeleton.skeleton-170x53,
body[data-theme=dark] .conversationView .react-loading-skeleton.skeleton-436x41,
body[data-theme=dark] .conversationView .react-loading-skeleton.skeleton-800x173 {
  background-color: var(--skeleton-base-dark) !important;
  background-image: linear-gradient(90deg, var(--skeleton-base-dark) 0%, var(--skeleton-highlight-dark) 50%, var(--skeleton-base-dark) 100%) !important;
}
/* Centered content column that matches the width of the big bottom rectangle
   so message skeletons align with the final large placeholder. Scoped under
   .conversationView to avoid global leakage. */
.conversationView .skeleton-content {
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Queries (user) aligned to the right within the content column */
.conversationView .skeleton-content .queryMessage.skeleton-only {
  display: flex;
  justify-content: flex-end !important;
  align-items: flex-end;
  padding: 0 8px !important;
}
/* Answers (assistant) aligned to the left within the content column */
.conversationView .skeleton-content .answerMessage.skeleton-only {
  display: flex;
  justify-content: flex-start !important;
  align-items: flex-start;
  padding: 0 8px !important;
}
@media (max-width: 768px) {
  .conversationView .skeleton-content {
    width: 348px;
  }
  .conversationView .skeleton-content .queryMessage.skeleton-only,
  .conversationView .skeleton-content .answerMessage.skeleton-only {
    width: 100%;
  }
  .conversationView .skeleton-content .queryMessage.skeleton-only .skeleton-253x83,
  .conversationView .skeleton-content .answerMessage.skeleton-only .skeleton-253x32 {
    max-width: 100% !important;
  }
}
/* Make the skeleton-content take the available vertical space so the last
   skeleton rectangle can be pushed to the bottom of the viewport. */
.conversationView .skeleton-loading-wrapper {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 120px); /* leave room for header/footer */
}
.conversationView .skeleton-content {
  flex: 1 1 auto;
}
.conversationView .skeleton-content .skeleton-rect-wrapper:last-child {
  margin-top: auto;
}/*
** This file is generated from Fluent UI tokens.
** To regenerate the file run: yarn run fluentSass.
** Generate on: 28/06/2023 23:34:58
*/
/*
** Variables for color
*/
/*
** Variables for border
*/
/*
** Variables for font
*/
/*
** Variables for line
*/
/*
** Variables for shadow
*/
/*
** Variables for stroke
*/
/*
** Variables for spacing
*/
/*
** Variables for duration
*/
/*
** Variables for curve
*/
/*
** This file is generated from Fluent UI tokens.
** To regenerate the file run: yarn run fluentSass.
** Generate on: 28/06/2023 23:34:58
*/
/*
** Variables for color
*/
/*
** Variables for border
*/
/*
** Variables for font
*/
/*
** Variables for line
*/
/*
** Variables for shadow
*/
/*
** Variables for stroke
*/
/*
** Variables for spacing
*/
/*
** Variables for duration
*/
/*
** Variables for curve
*/
/*
** Custom color variables for SyGPT Application
** These extend the Fluent UI design tokens with additional color palettes
*/
/*
** CSS Custom Properties (CSS Variables)
** These can be overridden at runtime and support theming
*/
:root {
  /* Gray Scale */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-gray-ring-500: #c7c9cd;
  /* Slate Scale */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  /* Zinc Scale */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  /* Neutral Scale */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  /* Stone Scale */
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  /* Lime Scale */
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  /* Green Scale */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-green-ring-500: #c4ede8;
  /* Emerald Scale */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
  /* Teal Scale */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
  /* Cyan Scale */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
  /* Sky Scale */
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
  /* Blue Scale */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  /* Indigo Scale */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
  /* Violet Scale */
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
  /* Purple Scale */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
  /* Fuchsia Scale */
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
  /* Pink Scale */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  /* Rose Scale */
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
  /* Red Scale */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-red-ring-500: #fbd0d0;
  /* Orange Scale */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  /* Amber Scale */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
  /* Yellow Scale */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-yellow-ring-500: #f9ecc1;
  /* White Variants */
  --color-white-100pct: #ffffff;
  --color-white-10pct: #ffffff;
  --color-white-3pct: #ffffff;
  --color-white-5pct: #ffffff;
  --color-white-15pct: #ffffff;
  --color-white-20pct: #ffffff;
  --color-white-30pct: #ffffff;
  --color-white-40pct: #ffffff;
  --color-white-50pct: #ffffff;
  --color-white-60pct: #ffffff;
  --color-white-70pct: #ffffff;
  --color-white-80pct: #ffffff;
  --color-white-90pct: #ffffff;
  --color-white-1pct: #ffffff;
  /* Soft Colors */
  --color-soft-green: #115e59;
  --color-soft-blue: #1e40af;
  --color-soft-red: #991b1b;
  --color-soft-yellow: #854d0e;
  --color-soft-gray: #374151;
  /* Primary Brand Scale */
  --color-primary-50: #fff5f3;
  --color-primary-100: #ffebe6;
  --color-primary-200: #ffd7cc;
  --color-primary-300: #ffc3b3;
  --color-primary-400: #ffaf99;
  --color-primary-500: #ff5730;
  --color-primary-600: #e64a26;
  --color-primary-700: #cc3e1c;
  --color-primary-800: #b33113;
  --color-primary-900: #99250a;
  --color-primary-950: #801a05;
  --color-primary-ring-500: #ffcdc1;
  --color-primary-500-10pct: rgba(255, 87, 48, 0.1);
  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  /* Spacing Scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-17: 68px;
  --spacing-18: 72px;
  --spacing-19: 76px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
  --spacing-4-5: 18px;
  --spacing-5-5: 22px;
  --spacing-6-5: 26px;
  --spacing-7-5: 30px;
  --spacing-8-5: 34px;
  --spacing-9-5: 38px;
  --spacing-10-5: 42px;
  --spacing-11-5: 46px;
  --spacing-12-5: 50px;
  --spacing-13-5: 54px;
  --spacing-14-5: 58px;
  --spacing-15-5: 62px;
  --spacing-16-5: 66px;
  --spacing-17-5: 70px;
  --spacing-18-5: 74px;
  --spacing-19-5: 78px;
}
/*
** SCSS Variables for convenient usage in SCSS files
** These reference the CSS custom properties above
*/
/* Gray Scale */
/* Slate Scale */
/* Zinc Scale */
/* Neutral Scale */
/* Stone Scale */
/* Lime Scale */
/* Green Scale */
/* Emerald Scale */
/* Teal Scale */
/* Cyan Scale */
/* Sky Scale */
/* Blue Scale */
/* Indigo Scale */
/* Violet Scale */
/* Purple Scale */
/* Fuchsia Scale */
/* Pink Scale */
/* Rose Scale */
/* Red Scale */
/* Orange Scale */
/* Amber Scale */
/* Yellow Scale */
/* White Variants */
/* Soft Colors */
/* Primary Brand Scale */
/* Border Radius */
/* Spacing Scale */
.knowledgeToken {
  display: inline-flex;
  align-items: center;
  max-width: none;
  padding: 4px 12px;
  border-radius: 16px;
  background-color: var(--color-slate-100);
  color: var(--colorNeutralForeground2);
  font-size: 0.8125rem;
  font-weight: 500;
  gap: 6px;
  cursor: pointer;
}
.knowledgeToken .knowledgeIcon {
  color: var(--colorNeutralForeground3);
  font-size: 14px;
}
.knowledgeToken .knowledgeName {
  white-space: nowrap;
  display: inline;
}
.knowledgeToken .eyeIcon {
  color: var(--color-slate-400);
  font-size: 14px;
  margin-left: 4px;
  flex-shrink: 0;
}
body[data-theme=dark] .knowledgeToken {
  background-color: var(--color-zinc-800) !important;
  color: var(--colorNeutralForeground2) !important;
}
body[data-theme=dark] .answerMessage .actions button,
body[data-theme=dark] .answerMessage .actions .imageCopyButton,
body[data-theme=dark] .answerMessage .actions .lightbulbIcon,
body[data-theme=dark] .answerMessage .actions .thumbIcon {
  color: var(--color-neutral-500) !important;
}
.conversationText {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: var(--Utilities-Spacing-5_5, 22px);
  letter-spacing: 0.07px;
}
.slate600 {
  color: var(--color-slate-600) !important;
}
.knowledgeLabel,
.attachmentLabel.slate600 {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.07px;
}
.slate600 {
  color: var(--color-slate-600) !important;
}
.answerMessage {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: white !important;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
body[data-theme=dark] .answerMessage {
  background-color: var(--color-zinc-900) !important;
}
@media (max-width: 768px) {
  .answerMessage {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
.answerModelNotice {
  text-align: right;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: var(--Utilities-Spacing-5_5, 22px);
  letter-spacing: 0.05px;
}
.inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: 900px;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.inner .gptLogo, .inner .defaultGptLogo {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0.25rem;
  justify-content: flex-start;
}
.inner .gptLogo svg, .inner .defaultGptLogo svg,
.inner .gptLogo img, .inner .defaultGptLogo img {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px;
  max-height: 40px;
}
.inner .content {
  max-width: 100%;
  margin-left: 0;
}
.inner .content .topActionsContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 12px;
  gap: 2px;
}
.inner .content .topActionsContainer .actions {
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: center;
}
.inner .content .topActionsContainer .actions button {
  color: var(--colorNeutralForeground4);
}
.inner .content .topActionsContainer .answerModelNotice {
  margin-top: 0;
  font-size: 0.75rem;
  color: var(--colorNeutralForeground3);
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
body[data-theme=dark] .inner .content .topActionsContainer .answerModelNotice {
  color: var(--color-neutral-500);
}
.inner .content .topActionsContainer .answerModelNotice .modelInfoIcon {
  cursor: pointer;
  color: var(--colorNeutralForeground3);
}
body[data-theme=dark] .inner .content .topActionsContainer .answerModelNotice .modelInfoIcon {
  color: #737373;
}
.inner .content .topActionsContainer .answerModelNotice .modelInfoIcon:hover {
  color: var(--colorBrandForeground1);
}
.inner .content .answerContent {
  position: relative;
  font-weight: normal !important;
}
.inner .content .answerContent * {
  font-weight: normal !important;
}
.inner .content .answerContent .answerAttachmentImage[data-zoom=in] {
  cursor: zoom-in;
}
.inner .content .answerContent .answerAttachmentImage[data-zoom=out] {
  cursor: zoom-out;
}
.inner .content .answerContent .answerAttachmentNotice {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  color: var(--colorNeutralForeground1);
  font-size: 0.95rem;
}
.inner .content .answerContent .answerAttachmentNotice .attachmentLabel {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--colorNeutralForeground2);
}
.inner .content .answerContent .answerAttachmentNotice .attachmentNames {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.inner .content .answerContent .answerAttachmentNotice .attachmentToken {
  display: inline-flex;
  align-items: center;
  max-width: none;
  padding: 4px 12px;
  border-radius: 16px;
  border: 1px solid var(--colorNeutralStroke2);
  background-color: var(--colorNeutralBackground3);
  color: var(--colorNeutralForeground2);
  font-size: 0.8125rem;
  font-weight: 500;
  gap: 6px;
}
.inner .content .answerContent .answerAttachmentNotice .attachmentToken .attachmentIcon {
  color: var(--colorNeutralForeground3);
  font-size: 14px;
}
.inner .content .answerContent .answerAttachmentNotice .attachmentToken .attachmentIndex {
  font-weight: 600;
}
.inner .content .answerContent .answerAttachmentNotice .attachmentToken .attachmentName {
  white-space: nowrap;
  display: inline;
}
.inner .content .answerContent .docAttachments {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  margin: 10px;
}
.inner .content .answerContent .docAttachments button {
  border-color: var(--colorNeutralStroke1);
}
.bottomActionsContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0px;
}
.bottomActionsContainer .actions {
  display: flex;
  gap: 2px;
  align-items: center;
  margin-right: -4px;
}
.bottomActionsContainer .actions button {
  padding: 4px;
}
.bottomActionsContainer .answerModelNotice {
  margin-top: 2px;
  margin-right: 0;
  padding-right: 0;
  font-size: 0.75rem;
  color: var(--colorNeutralForeground3);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
body[data-theme=dark] .bottomActionsContainer .answerModelNotice {
  color: #737373;
}
.bottomActionsContainer .answerModelNotice .modelInfoIcon {
  cursor: pointer;
  color: var(--colorNeutralForeground3);
}
body[data-theme=dark] .bottomActionsContainer .answerModelNotice .modelInfoIcon {
  color: var(--color-neutral-500);
}
.bottomActionsContainer .answerModelNotice .modelInfoIcon:hover {
  color: var(--colorBrandForeground1);
}
.sup {
  font-size: 0.8rem;
  color: var(--colorBrandForeground1);
  background-color: var(--colorBrandBackground2);
}
.thoughtItem {
  display: flex;
}
.thoughtItem .thoughtItemIndex {
  margin-right: 5px;
}
.imageCopyButton {
  position: absolute;
  top: 15px;
}@media (prefers-color-scheme: dark) {
  .wmde-markdown,
  .wmde-markdown-var {
    color-scheme: dark;
    --color-prettylights-syntax-comment: #8b949e;
    --color-prettylights-syntax-constant: #79c0ff;
    --color-prettylights-syntax-entity: #d2a8ff;
    --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
    --color-prettylights-syntax-entity-tag: #7ee787;
    --color-prettylights-syntax-keyword: #ff7b72;
    --color-prettylights-syntax-string: #a5d6ff;
    --color-prettylights-syntax-variable: #ffa657;
    --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
    --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
    --color-prettylights-syntax-carriage-return-text: #f0f6fc;
    --color-prettylights-syntax-carriage-return-bg: #b62324;
    --color-prettylights-syntax-string-regexp: #7ee787;
    --color-prettylights-syntax-markup-list: #f2cc60;
    --color-prettylights-syntax-markup-heading: #1f6feb;
    --color-prettylights-syntax-markup-italic: #c9d1d9;
    --color-prettylights-syntax-markup-bold: #c9d1d9;
    --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
    --color-prettylights-syntax-markup-deleted-bg: #67060c;
    --color-prettylights-syntax-markup-inserted-text: #aff5b4;
    --color-prettylights-syntax-markup-inserted-bg: #033a16;
    --color-prettylights-syntax-markup-changed-text: #ffdfb6;
    --color-prettylights-syntax-markup-changed-bg: #5a1e02;
    --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
    --color-prettylights-syntax-markup-ignored-bg: #1158c7;
    --color-prettylights-syntax-meta-diff-range: #d2a8ff;
    --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
    --color-fg-default: #c9d1d9;
    --color-fg-muted: #8b949e;
    --color-fg-subtle: #484f58;
    --color-canvas-default: #0d1117;
    --color-canvas-subtle: #161b22;
    --color-border-default: #30363d;
    --color-border-muted: #21262d;
    --color-neutral-muted: rgba(110, 118, 129, 0.4);
    --color-accent-fg: #58a6ff;
    --color-accent-emphasis: #1f6feb;
    --color-attention-subtle: rgba(187, 128, 9, 0.15);
    --color-danger-fg: #f85149;
    --color-danger-emphasis: #da3633;
    --color-attention-fg: #d29922;
    --color-attention-emphasis: #9e6a03;
    --color-done-fg: #a371f7;
    --color-done-emphasis: #8957e5;
    --color-success-fg: #3fb950;
    --color-success-emphasis: #238636;
    --color-copied-active-bg: #2e9b33;
  }
}
@media (prefers-color-scheme: light) {
  .wmde-markdown,
  .wmde-markdown-var {
    color-scheme: light;
    --color-prettylights-syntax-comment: #6e7781;
    --color-prettylights-syntax-constant: #0550ae;
    --color-prettylights-syntax-entity: #8250df;
    --color-prettylights-syntax-storage-modifier-import: #24292f;
    --color-prettylights-syntax-entity-tag: #116329;
    --color-prettylights-syntax-keyword: #cf222e;
    --color-prettylights-syntax-string: #0a3069;
    --color-prettylights-syntax-variable: #953800;
    --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
    --color-prettylights-syntax-invalid-illegal-bg: #82071e;
    --color-prettylights-syntax-carriage-return-text: #f6f8fa;
    --color-prettylights-syntax-carriage-return-bg: #cf222e;
    --color-prettylights-syntax-string-regexp: #116329;
    --color-prettylights-syntax-markup-list: #3b2300;
    --color-prettylights-syntax-markup-heading: #0550ae;
    --color-prettylights-syntax-markup-italic: #24292f;
    --color-prettylights-syntax-markup-bold: #24292f;
    --color-prettylights-syntax-markup-deleted-text: #82071e;
    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
    --color-prettylights-syntax-markup-inserted-text: #116329;
    --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
    --color-prettylights-syntax-markup-changed-text: #953800;
    --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
    --color-prettylights-syntax-markup-ignored-text: #eaeef2;
    --color-prettylights-syntax-markup-ignored-bg: #0550ae;
    --color-prettylights-syntax-meta-diff-range: #8250df;
    --color-prettylights-syntax-brackethighlighter-angle: #57606a;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
    --color-prettylights-syntax-constant-other-reference-link: #0a3069;
    --color-fg-default: #24292f;
    --color-fg-muted: #57606a;
    --color-fg-subtle: #6e7781;
    --color-canvas-default: #ffffff;
    --color-canvas-subtle: #f6f8fa;
    --color-border-default: #d0d7de;
    --color-border-muted: hsl(210, 18%, 87%);
    --color-neutral-muted: rgba(175, 184, 193, 0.2);
    --color-accent-fg: #0969da;
    --color-accent-emphasis: #0969da;
    --color-attention-subtle: #fff8c5;
    --color-danger-fg: #d1242f;
    --color-danger-emphasis: #cf222e;
    --color-attention-fg: #9a6700;
    --color-attention-emphasis: #9a6700;
    --color-done-fg: #8250df;
    --color-done-emphasis: #8250df;
    --color-success-fg: #1a7f37;
    --color-success-emphasis: #1f883d;
    --color-copied-active-bg: #2e9b33;
  }
}
[data-color-mode*='dark'] .wmde-markdown,
[data-color-mode*='dark'] .wmde-markdown-var,
.wmde-markdown-var[data-color-mode*='dark'],
.wmde-markdown[data-color-mode*='dark'],
body[data-color-mode*='dark'] {
  color-scheme: dark;
  --color-prettylights-syntax-comment: #8b949e;
  --color-prettylights-syntax-constant: #79c0ff;
  --color-prettylights-syntax-entity: #d2a8ff;
  --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
  --color-prettylights-syntax-entity-tag: #7ee787;
  --color-prettylights-syntax-keyword: #ff7b72;
  --color-prettylights-syntax-string: #a5d6ff;
  --color-prettylights-syntax-variable: #ffa657;
  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
  --color-prettylights-syntax-carriage-return-bg: #b62324;
  --color-prettylights-syntax-string-regexp: #7ee787;
  --color-prettylights-syntax-markup-list: #f2cc60;
  --color-prettylights-syntax-markup-heading: #1f6feb;
  --color-prettylights-syntax-markup-italic: #c9d1d9;
  --color-prettylights-syntax-markup-bold: #c9d1d9;
  --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
  --color-prettylights-syntax-markup-deleted-bg: #67060c;
  --color-prettylights-syntax-markup-inserted-text: #aff5b4;
  --color-prettylights-syntax-markup-inserted-bg: #033a16;
  --color-prettylights-syntax-markup-changed-text: #ffdfb6;
  --color-prettylights-syntax-markup-changed-bg: #5a1e02;
  --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
  --color-prettylights-syntax-markup-ignored-bg: #1158c7;
  --color-prettylights-syntax-meta-diff-range: #d2a8ff;
  --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
  --color-fg-default: #c9d1d9;
  --color-fg-muted: #8b949e;
  --color-fg-subtle: #484f58;
  --color-canvas-default: #0d1117;
  --color-canvas-subtle: #161b22;
  --color-border-default: #30363d;
  --color-border-muted: #21262d;
  --color-neutral-muted: rgba(110, 118, 129, 0.4);
  --color-accent-fg: #58a6ff;
  --color-accent-emphasis: #1f6feb;
  --color-attention-subtle: rgba(187, 128, 9, 0.15);
  --color-danger-fg: #f85149;
}
[data-color-mode*='light'] .wmde-markdown,
[data-color-mode*='light'] .wmde-markdown-var,
.wmde-markdown-var[data-color-mode*='light'],
.wmde-markdown[data-color-mode*='light'],
body[data-color-mode*='light'] {
  color-scheme: light;
  --color-prettylights-syntax-comment: #6e7781;
  --color-prettylights-syntax-constant: #0550ae;
  --color-prettylights-syntax-entity: #8250df;
  --color-prettylights-syntax-storage-modifier-import: #24292f;
  --color-prettylights-syntax-entity-tag: #116329;
  --color-prettylights-syntax-keyword: #cf222e;
  --color-prettylights-syntax-string: #0a3069;
  --color-prettylights-syntax-variable: #953800;
  --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
  --color-prettylights-syntax-carriage-return-text: #f6f8fa;
  --color-prettylights-syntax-carriage-return-bg: #cf222e;
  --color-prettylights-syntax-string-regexp: #116329;
  --color-prettylights-syntax-markup-list: #3b2300;
  --color-prettylights-syntax-markup-heading: #0550ae;
  --color-prettylights-syntax-markup-italic: #24292f;
  --color-prettylights-syntax-markup-bold: #24292f;
  --color-prettylights-syntax-markup-deleted-text: #82071e;
  --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
  --color-prettylights-syntax-markup-inserted-text: #116329;
  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
  --color-prettylights-syntax-markup-changed-text: #953800;
  --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
  --color-prettylights-syntax-markup-ignored-text: #eaeef2;
  --color-prettylights-syntax-markup-ignored-bg: #0550ae;
  --color-prettylights-syntax-meta-diff-range: #8250df;
  --color-prettylights-syntax-brackethighlighter-angle: #57606a;
  --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
  --color-fg-default: #24292f;
  --color-fg-muted: #57606a;
  --color-fg-subtle: #6e7781;
  --color-canvas-default: #ffffff;
  --color-canvas-subtle: #f6f8fa;
  --color-border-default: #d0d7de;
  --color-border-muted: hsl(210, 18%, 87%);
  --color-neutral-muted: rgba(175, 184, 193, 0.2);
  --color-accent-fg: #0969da;
  --color-accent-emphasis: #0969da;
  --color-attention-subtle: #fff8c5;
  --color-danger-fg: #cf222e;
}
.wmde-markdown {
  -webkit-text-size-adjust: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
  color: var(--color-fg-default);
  background-color: var(--color-canvas-default);
}
.wmde-markdown details,
.wmde-markdown figcaption,
.wmde-markdown figure {
  display: block;
}
.wmde-markdown summary {
  display: list-item;
}
.wmde-markdown [hidden] {
  display: none !important;
}
.wmde-markdown a {
  background-color: transparent;
  color: var(--color-accent-fg);
  text-decoration: none;
}
.wmde-markdown a:active,
.wmde-markdown a:hover {
  outline-width: 0;
}
.wmde-markdown abbr[title] {
  border-bottom: none;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
.wmde-markdown b,
.wmde-markdown strong {
  font-weight: 600;
}
.wmde-markdown dfn {
  font-style: italic;
}
.wmde-markdown h1 {
  margin: 0.67em 0;
  font-weight: 600;
  padding-bottom: 0.3em;
  font-size: 2em;
  border-bottom: 1px solid var(--color-border-muted);
}
.wmde-markdown mark {
  background-color: var(--color-attention-subtle);
  color: var(--color-text-primary);
}
.wmde-markdown small {
  font-size: 90%;
}
.wmde-markdown sub,
.wmde-markdown sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.wmde-markdown sub {
  bottom: -0.25em;
}
.wmde-markdown sup {
  top: -0.5em;
}
.wmde-markdown img {
  display: inline-block;
  border-style: none;
  max-width: 100%;
  box-sizing: content-box;
  background-color: var(--color-canvas-default);
}
.wmde-markdown code,
.wmde-markdown kbd,
.wmde-markdown pre,
.wmde-markdown samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
.wmde-markdown figure {
  margin: 1em 40px;
}
.wmde-markdown hr {
  box-sizing: content-box;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border-muted);
  height: 0.25em;
  padding: 0;
  margin: 24px 0;
  background-color: var(--color-border-default);
}
.wmde-markdown input {
  font: inherit;
  margin: 0;
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.wmde-markdown [type='button'],
.wmde-markdown [type='reset'],
.wmde-markdown [type='submit'] {
  -webkit-appearance: button;
}
.wmde-markdown [type='button']::-moz-focus-inner,
.wmde-markdown [type='reset']::-moz-focus-inner,
.wmde-markdown [type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
.wmde-markdown [type='button']:-moz-focusring,
.wmde-markdown [type='reset']:-moz-focusring,
.wmde-markdown [type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}
.wmde-markdown [type='checkbox'],
.wmde-markdown [type='radio'] {
  box-sizing: border-box;
  padding: 0;
}
.wmde-markdown [type='number']::-webkit-inner-spin-button,
.wmde-markdown [type='number']::-webkit-outer-spin-button {
  height: auto;
}
.wmde-markdown [type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
.wmde-markdown [type='search']::-webkit-search-cancel-button,
.wmde-markdown [type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
.wmde-markdown ::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}
.wmde-markdown ::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
.wmde-markdown a:hover {
  text-decoration: underline;
}
.wmde-markdown hr::before {
  display: table;
  content: '';
}
.wmde-markdown hr::after {
  display: table;
  clear: both;
  content: '';
}
.wmde-markdown table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  width: max-content;
  max-width: 100%;
}
.wmde-markdown td,
.wmde-markdown th {
  padding: 0;
}
.wmde-markdown details summary {
  cursor: pointer;
}
.wmde-markdown details:not([open]) > *:not(summary) {
  display: none !important;
}
.wmde-markdown kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  line-height: 10px;
  color: var(--color-fg-default);
  vertical-align: middle;
  background-color: var(--color-canvas-subtle);
  border: solid 1px var(--color-neutral-muted);
  border-bottom-color: var(--color-neutral-muted);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
}
.wmde-markdown h1,
.wmde-markdown h2,
.wmde-markdown h3,
.wmde-markdown h4,
.wmde-markdown h5,
.wmde-markdown h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.wmde-markdown td,
.wmde-markdown th {
  padding: 0;
}
.wmde-markdown details summary {
  cursor: pointer;
}
.wmde-markdown details:not([open]) > *:not(summary) {
  display: none !important;
}
.wmde-markdown kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  line-height: 10px;
  color: var(--color-fg-default);
  vertical-align: middle;
  background-color: var(--color-canvas-subtle);
  border: solid 1px var(--color-neutral-muted);
  border-bottom-color: var(--color-neutral-muted);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
}
.wmde-markdown h1,
.wmde-markdown h2,
.wmde-markdown h3,
.wmde-markdown h4,
.wmde-markdown h5,
.wmde-markdown h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.wmde-markdown h2 {
  font-weight: 600;
  padding-bottom: 0.3em;
  font-size: 1.5em;
  border-bottom: 1px solid var(--color-border-muted);
}
.wmde-markdown h3 {
  font-weight: 600;
  font-size: 1.25em;
}
.wmde-markdown h4 {
  font-weight: 600;
  font-size: 1em;
}
.wmde-markdown h5 {
  font-weight: 600;
  font-size: 0.875em;
}
.wmde-markdown h6 {
  font-weight: 600;
  font-size: 0.85em;
  color: var(--color-fg-muted);
}
.wmde-markdown p {
  margin-top: 0;
  margin-bottom: 10px;
}
.wmde-markdown blockquote {
  margin: 0;
  padding: 0 1em;
  color: var(--color-fg-muted);
  border-left: 0.25em solid var(--color-border-default);
}
.wmde-markdown ul,
.wmde-markdown ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 2em;
}
.wmde-markdown ol ol,
.wmde-markdown ul ol {
  list-style-type: lower-roman;
}
.wmde-markdown ul ul ol,
.wmde-markdown ul ol ol,
.wmde-markdown ol ul ol,
.wmde-markdown ol ol ol {
  list-style-type: lower-alpha;
}
.wmde-markdown dd {
  margin-left: 0;
}
.wmde-markdown tt,
.wmde-markdown code {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 12px;
}
.wmde-markdown pre {
  margin-top: 0;
  margin-bottom: 0;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 12px;
  word-wrap: normal;
}
.wmde-markdown .octicon {
  display: inline-block;
  overflow: visible !important;
  vertical-align: text-bottom;
  fill: currentColor;
}
.wmde-markdown ::placeholder {
  color: var(--color-fg-subtle);
  opacity: 1;
}
.wmde-markdown input::-webkit-outer-spin-button,
.wmde-markdown input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}
.wmde-markdown [data-catalyst] {
  display: block;
}
.wmde-markdown::before {
  display: table;
  content: '';
}
.wmde-markdown::after {
  display: table;
  clear: both;
  content: '';
}
.wmde-markdown > *:first-child {
  margin-top: 0 !important;
}
.wmde-markdown > *:last-child {
  margin-bottom: 0 !important;
}
.wmde-markdown a:not([href]) {
  color: inherit;
  text-decoration: none;
}
.wmde-markdown .absent {
  color: var(--color-danger-fg);
}
.wmde-markdown a.anchor {
  float: left;
  padding-right: 4px;
  margin-left: -20px;
  line-height: 1;
}
.wmde-markdown .anchor:focus {
  outline: none;
}
.wmde-markdown p,
.wmde-markdown blockquote,
.wmde-markdown ul,
.wmde-markdown ol,
.wmde-markdown dl,
.wmde-markdown table,
.wmde-markdown pre,
.wmde-markdown details {
  margin-top: 0;
  margin-bottom: 16px;
}
.wmde-markdown blockquote > :first-child {
  margin-top: 0;
}
.wmde-markdown blockquote > :last-child {
  margin-bottom: 0;
}
.wmde-markdown sup > a::before {
  content: '[';
}
.wmde-markdown sup > a::after {
  content: ']';
}
.wmde-markdown h1 .octicon-link,
.wmde-markdown h2 .octicon-link,
.wmde-markdown h3 .octicon-link,
.wmde-markdown h4 .octicon-link,
.wmde-markdown h5 .octicon-link,
.wmde-markdown h6 .octicon-link {
  color: var(--color-fg-default);
  vertical-align: middle;
  visibility: hidden;
}
.wmde-markdown h1:hover .anchor,
.wmde-markdown h2:hover .anchor,
.wmde-markdown h3:hover .anchor,
.wmde-markdown h4:hover .anchor,
.wmde-markdown h5:hover .anchor,
.wmde-markdown h6:hover .anchor {
  text-decoration: none;
}
.wmde-markdown h1:hover .anchor .octicon-link,
.wmde-markdown h2:hover .anchor .octicon-link,
.wmde-markdown h3:hover .anchor .octicon-link,
.wmde-markdown h4:hover .anchor .octicon-link,
.wmde-markdown h5:hover .anchor .octicon-link,
.wmde-markdown h6:hover .anchor .octicon-link {
  visibility: visible;
}
.wmde-markdown h1 tt,
.wmde-markdown h1 code,
.wmde-markdown h2 tt,
.wmde-markdown h2 code,
.wmde-markdown h3 tt,
.wmde-markdown h3 code,
.wmde-markdown h4 tt,
.wmde-markdown h4 code,
.wmde-markdown h5 tt,
.wmde-markdown h5 code,
.wmde-markdown h6 tt,
.wmde-markdown h6 code {
  padding: 0 0.2em;
  font-size: inherit;
}
.wmde-markdown ul.no-list,
.wmde-markdown ol.no-list {
  padding: 0;
  list-style-type: none;
}
.wmde-markdown ol[type='1'] {
  list-style-type: decimal;
}
.wmde-markdown ol[type='a'] {
  list-style-type: lower-alpha;
}
.wmde-markdown ol[type='i'] {
  list-style-type: lower-roman;
}
.wmde-markdown div > ol:not([type]) {
  list-style-type: decimal;
}
.wmde-markdown ul ul,
.wmde-markdown ul ol,
.wmde-markdown ol ol,
.wmde-markdown ol ul {
  margin-top: 0;
  margin-bottom: 0;
}
.wmde-markdown li > p {
  margin-top: 16px;
}
.wmde-markdown li + li {
  margin-top: 0.25em;
}
.wmde-markdown dl {
  padding: 0;
}
.wmde-markdown dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: 600;
}
.wmde-markdown dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}
.wmde-markdown table th {
  font-weight: 600;
}
.wmde-markdown table th,
.wmde-markdown table td {
  padding: 6px 13px;
  border: 1px solid var(--color-border-default);
}
.wmde-markdown table tr {
  background-color: var(--color-canvas-default);
  border-top: 1px solid var(--color-border-muted);
}
.wmde-markdown table tr:nth-child(2n) {
  background-color: var(--color-canvas-subtle);
}
.wmde-markdown table img {
  background-color: transparent;
}
.wmde-markdown img[align='right'] {
  padding-left: 20px;
}
.wmde-markdown img[align='left'] {
  padding-right: 20px;
}
.wmde-markdown .emoji {
  max-width: none;
  vertical-align: text-top;
  background-color: transparent;
}
.wmde-markdown span.frame {
  display: block;
  overflow: hidden;
}
.wmde-markdown span.frame > span {
  display: block;
  float: left;
  width: auto;
  padding: 7px;
  margin: 13px 0 0;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
}
.wmde-markdown span.frame span img {
  display: block;
  float: left;
}
.wmde-markdown span.frame span span {
  display: block;
  padding: 5px 0 0;
  clear: both;
  color: var(--color-fg-default);
}
.wmde-markdown span.align-center {
  display: block;
  overflow: hidden;
  clear: both;
}
.wmde-markdown span.align-center > span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: center;
}
.wmde-markdown span.align-center span img {
  margin: 0 auto;
  text-align: center;
}
.wmde-markdown span.align-right {
  display: block;
  overflow: hidden;
  clear: both;
}
.wmde-markdown span.align-right > span {
  display: block;
  margin: 13px 0 0;
  overflow: hidden;
  text-align: right;
}
.wmde-markdown span.align-right span img {
  margin: 0;
  text-align: right;
}
.wmde-markdown span.float-left {
  display: block;
  float: left;
  margin-right: 13px;
  overflow: hidden;
}
.wmde-markdown span.float-left span {
  margin: 13px 0 0;
}
.wmde-markdown span.float-right {
  display: block;
  float: right;
  margin-left: 13px;
  overflow: hidden;
}
.wmde-markdown span.float-right > span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: right;
}
.wmde-markdown code,
.wmde-markdown tt {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: var(--color-neutral-muted);
  border-radius: 6px;
}
.wmde-markdown code br,
.wmde-markdown tt br {
  display: none;
}
.wmde-markdown del code {
  text-decoration: inherit;
}
.wmde-markdown pre code {
  font-size: 100%;
}
.wmde-markdown pre > code {
  padding: 0;
  margin: 0;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}
.wmde-markdown pre {
  font-size: 85%;
  line-height: 1.45;
  background-color: var(--color-canvas-subtle);
  border-radius: 6px;
}
.wmde-markdown pre code,
.wmde-markdown pre tt {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}
.wmde-markdown pre > code {
  padding: 16px;
  overflow: auto;
  display: block;
}
.wmde-markdown pre > code::-webkit-scrollbar {
  background: transparent;
  width: 8px;
  height: 8px;
}
.wmde-markdown pre > code::-webkit-scrollbar-thumb {
  background: var(--color-fg-muted);
  border-radius: 10px;
}
.wmde-markdown .csv-data td,
.wmde-markdown .csv-data th {
  padding: 5px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}
.wmde-markdown .csv-data .blob-num {
  padding: 10px 8px 9px;
  text-align: right;
  background: var(--color-canvas-default);
  border: 0;
}
.wmde-markdown .csv-data tr {
  border-top: 0;
}
.wmde-markdown .csv-data th {
  font-weight: 600;
  background: var(--color-canvas-subtle);
  border-top: 0;
}
.wmde-markdown .footnotes {
  font-size: 12px;
  color: var(--color-fg-muted);
  border-top: 1px solid var(--color-border-default);
}
.wmde-markdown .footnotes ol {
  padding-left: 16px;
}
.wmde-markdown .footnotes li {
  position: relative;
}
.wmde-markdown .footnotes li:target::before {
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -24px;
  pointer-events: none;
  content: '';
  border: 2px solid var(--color-accent-emphasis);
  border-radius: 6px;
}
.wmde-markdown .footnotes li:target {
  color: var(--color-fg-default);
}
.wmde-markdown .footnotes .data-footnote-backref g-emoji {
  font-family: monospace;
}
.wmde-markdown .task-list-item {
  list-style-type: none;
}
.wmde-markdown .task-list-item label {
  font-weight: 400;
}
.wmde-markdown .task-list-item.enabled label {
  cursor: pointer;
}
.wmde-markdown .task-list-item + .wmde-markdown .task-list-item {
  margin-top: 3px;
}
.wmde-markdown .task-list-item .handle {
  display: none;
}
.wmde-markdown .task-list-item-checkbox,
.wmde-markdown .contains-task-list input[type='checkbox'] {
  margin: 0 0.2em 0.25em -1.6em;
  vertical-align: middle;
}
.wmde-markdown .contains-task-list:dir(rtl) .task-list-item-checkbox,
.wmde-markdown .contains-task-list:dir(rtl) input[type='checkbox'] {
  margin: 0 -1.6em 0.25em 0.2em;
}
.wmde-markdown ::-webkit-calendar-picker-indicator {
  filter: invert(50%);
}
.wmde-markdown pre {
  position: relative;
}
.wmde-markdown pre .copied {
  visibility: hidden;
  display: flex;
  position: absolute;
  cursor: pointer;
  color: var(--color-fg-default);
  top: 6px;
  right: 6px;
  border-radius: 5px;
  background: var(--color-border-default);
  padding: 6px;
  font-size: 12px;
  transition: all 0.3s;
}
.wmde-markdown pre .copied .octicon-copy {
  display: block;
}
.wmde-markdown pre .copied .octicon-check {
  display: none;
}
.wmde-markdown pre:hover .copied {
  visibility: visible;
}
.wmde-markdown pre:hover .copied:hover {
  background: var(--color-prettylights-syntax-entity-tag);
  color: var(--color-canvas-default);
}
.wmde-markdown pre:hover .copied:active,
.wmde-markdown pre .copied.active {
  background: var(--color-copied-active-bg);
  color: var(--color-canvas-default);
}
.wmde-markdown pre .active .octicon-copy {
  display: none;
}
.wmde-markdown pre .active .octicon-check {
  display: block;
}
.wmde-markdown .markdown-alert {
  padding: 0.5rem 1em;
  color: inherit;
  margin-bottom: 16px;
  border-left: 0.25em solid var(--borderColor-default, var(--color-border-default));
}
.wmde-markdown .markdown-alert > :last-child {
  margin-bottom: 0 !important;
}
.wmde-markdown .markdown-alert .markdown-alert-title {
  display: flex;
  align-items: center;
  line-height: 1;
  font-weight: 500;
  font-size: 14px;
}
.wmde-markdown .markdown-alert .markdown-alert-title svg.octicon {
  margin-right: var(--base-size-8, 8px) !important;
}
.wmde-markdown .markdown-alert.markdown-alert-note {
  border-left-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-note .markdown-alert-title {
  color: var(--fgColor-accent, var(--color-accent-fg));
}
.wmde-markdown .markdown-alert.markdown-alert-tip {
  border-left-color: var(--borderColor-success-emphasis, var(--color-success-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-tip .markdown-alert-title {
  color: var(--fgColor-success, var(--color-success-fg));
}
.wmde-markdown .markdown-alert.markdown-alert-important {
  border-left-color: var(--borderColor-done-emphasis, var(--color-done-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-important .markdown-alert-title {
  color: var(--fgColor-done, var(--color-done-fg));
}
.wmde-markdown .markdown-alert.markdown-alert-warning {
  border-left-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-warning .markdown-alert-title {
  color: var(--fgColor-attention, var(--color-attention-fg));
}
.wmde-markdown .markdown-alert.markdown-alert-caution {
  border-left-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-caution .markdown-alert-title {
  color: var(--fgColor-danger, var(--color-danger-fg));
}
.wmde-markdown .highlight-line {
  background-color: var(--color-neutral-muted);
}
.wmde-markdown .code-line.line-number::before {
  display: inline-block;
  width: 1rem;
  text-align: right;
  margin-right: 16px;
  color: var(--color-fg-subtle);
  content: attr(line);
  white-space: nowrap;
}
.wmde-markdown .token.comment,
.wmde-markdown .token.prolog,
.wmde-markdown .token.doctype,
.wmde-markdown .token.cdata {
  color: var(--color-prettylights-syntax-comment);
}
.wmde-markdown .token.namespace {
  opacity: 0.7;
}
.wmde-markdown .token.property,
.wmde-markdown .token.tag,
.wmde-markdown .token.selector,
.wmde-markdown .token.constant,
.wmde-markdown .token.symbol,
.wmde-markdown .token.deleted {
  color: var(--color-prettylights-syntax-entity-tag);
}
.wmde-markdown .token.maybe-class-name {
  color: var(--color-prettylights-syntax-variable);
}
.wmde-markdown .token.property-access,
.wmde-markdown .token.operator,
.wmde-markdown .token.boolean,
.wmde-markdown .token.number,
.wmde-markdown .token.selector .token.class,
.wmde-markdown .token.attr-name,
.wmde-markdown .token.string,
.wmde-markdown .token.char,
.wmde-markdown .token.builtin {
  color: var(--color-prettylights-syntax-constant);
}
.wmde-markdown .token.deleted {
  color: var(--color-prettylights-syntax-markup-deleted-text);
}
.wmde-markdown .code-line .token.deleted {
  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
}
.wmde-markdown .token.inserted {
  color: var(--color-prettylights-syntax-markup-inserted-text);
}
.wmde-markdown .code-line .token.inserted {
  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
}
.wmde-markdown .token.variable {
  color: var(--color-prettylights-syntax-constant);
}
.wmde-markdown .token.entity,
.wmde-markdown .token.url,
.wmde-markdown .language-css .token.string,
.wmde-markdown .style .token.string {
  color: var(--color-prettylights-syntax-string);
}
.wmde-markdown .token.color,
.wmde-markdown .token.atrule,
.wmde-markdown .token.attr-value,
.wmde-markdown .token.function,
.wmde-markdown .token.class-name {
  color: var(--color-prettylights-syntax-string);
}
.wmde-markdown .token.rule,
.wmde-markdown .token.regex,
.wmde-markdown .token.important,
.wmde-markdown .token.keyword {
  color: var(--color-prettylights-syntax-keyword);
}
.wmde-markdown .token.coord {
  color: var(--color-prettylights-syntax-meta-diff-range);
}
.wmde-markdown .token.important,
.wmde-markdown .token.bold {
  font-weight: bold;
}
.wmde-markdown .token.italic {
  font-style: italic;
}
.wmde-markdown .token.entity {
  cursor: help;
}
/*
** This file is generated from Fluent UI tokens.
** To regenerate the file run: yarn run fluentSass.
** Generate on: 28/06/2023 23:34:58
*/
/*
** Variables for color
*/
/*
** Variables for border
*/
/*
** Variables for font
*/
/*
** Variables for line
*/
/*
** Variables for shadow
*/
/*
** Variables for stroke
*/
/*
** Variables for spacing
*/
/*
** Variables for duration
*/
/*
** Variables for curve
*/
.wmde-markdown {
  font-family: var(--DefaultFontFamily);
  font-weight: normal !important;
}
.wmde-markdown * {
  font-weight: normal !important;
}
.wmde-markdown pre {
  display: grid;
}@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/assets/KaTeX_AMS-Regular-0cdd387c.woff2) format("woff2"),url(/assets/KaTeX_AMS-Regular-30da91e8.woff) format("woff"),url(/assets/KaTeX_AMS-Regular-68534840.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Caligraphic-Bold-de7701e4.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Bold-1ae6bd74.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Bold-07d8e303.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Caligraphic-Regular-5d53e70a.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Regular-3398dd02.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Regular-ed0b7437.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Fraktur-Bold-74444efd.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Bold-9be7ceb8.woff) format("woff"),url(/assets/KaTeX_Fraktur-Bold-9163df9c.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Fraktur-Regular-51814d27.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Regular-5e28753b.woff) format("woff"),url(/assets/KaTeX_Fraktur-Regular-1e6f9579.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Main-Bold-0f60d1b8.woff2) format("woff2"),url(/assets/KaTeX_Main-Bold-c76c5d69.woff) format("woff"),url(/assets/KaTeX_Main-Bold-138ac28d.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Main-BoldItalic-99cd42a3.woff2) format("woff2"),url(/assets/KaTeX_Main-BoldItalic-a6f7ec0d.woff) format("woff"),url(/assets/KaTeX_Main-BoldItalic-70ee1f64.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Main-Italic-97479ca6.woff2) format("woff2"),url(/assets/KaTeX_Main-Italic-f1d6ef86.woff) format("woff"),url(/assets/KaTeX_Main-Italic-0d85ae7c.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Main-Regular-c2342cd8.woff2) format("woff2"),url(/assets/KaTeX_Main-Regular-c6368d87.woff) format("woff"),url(/assets/KaTeX_Main-Regular-d0332f52.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Math-BoldItalic-dc47344d.woff2) format("woff2"),url(/assets/KaTeX_Math-BoldItalic-850c0af5.woff) format("woff"),url(/assets/KaTeX_Math-BoldItalic-f9377ab0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Math-Italic-7af58c5e.woff2) format("woff2"),url(/assets/KaTeX_Math-Italic-8a8d2445.woff) format("woff"),url(/assets/KaTeX_Math-Italic-08ce98e5.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/assets/KaTeX_SansSerif-Bold-e99ae511.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Bold-ece03cfd.woff) format("woff"),url(/assets/KaTeX_SansSerif-Bold-1ece03f7.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/assets/KaTeX_SansSerif-Italic-00b26ac8.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Italic-91ee6750.woff) format("woff"),url(/assets/KaTeX_SansSerif-Italic-3931dd81.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/assets/KaTeX_SansSerif-Regular-68e8c73e.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Regular-11e4dc8a.woff) format("woff"),url(/assets/KaTeX_SansSerif-Regular-f36ea897.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Script-Regular-036d4e95.woff2) format("woff2"),url(/assets/KaTeX_Script-Regular-d96cdf2b.woff) format("woff"),url(/assets/KaTeX_Script-Regular-1c67f068.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size1-Regular-6b47c401.woff2) format("woff2"),url(/assets/KaTeX_Size1-Regular-c943cc98.woff) format("woff"),url(/assets/KaTeX_Size1-Regular-95b6d2f1.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size2-Regular-d04c5421.woff2) format("woff2"),url(/assets/KaTeX_Size2-Regular-2014c523.woff) format("woff"),url(/assets/KaTeX_Size2-Regular-a6b2099f.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(data:font/woff2;base64,d09GMgABAAAAAA4oAA4AAAAAHbQAAA3TAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgRQIDgmcDBEICo1oijYBNgIkA14LMgAEIAWJAAeBHAyBHBvbGiMRdnO0IkRRkiYDgr9KsJ1NUAf2kILNxgUmgqIgq1P89vcbIcmsQbRps3vCcXdYOKSWEPEKgZgQkprQQsxIXUgq0DqpGKmIvrgkeVGtEQD9DzAO29fM9jYhxZEsL2FeURH2JN4MIcTdO049NCVdxQ/w9NrSYFEBKTDKpLKfNkCGDc1RwjZLQcm3vqJ2UW9Xfa3tgAHz6ivp6vgC2yD4/6352ndnN0X0TL7seypkjZlMsjmZnf0Mm5Q+JykRWQBKCVCVPbARPXWyQtb5VgLB6Biq7/Uixcj2WGqdI8tGSgkuRG+t910GKP2D7AQH0DB9FMDW/obJZ8giFI3Wg8Cvevz0M+5m0rTh7XDBlvo9Y4vm13EXmfttwI4mBo1EG15fxJhUiCLbiiyCf/ZA6MFAhg3pGIZGdGIVjtPn6UcMk9A/UUr9PhoNsCENw1APAq0gpH73e+M+0ueyHbabc3vkbcdtzcf/fiy+NxQEjf9ud/ELBHAXJ0nk4z+MXH2Ev/kWyV4k7SkvpPc9Qr38F6RPWnM9cN6DJ0AdD1BhtgABtmoRoFCvPsBAumNm6soZG2Gk5GyVTo2sJncSyp0jQTYoR6WDvTwaaEcHsxHfvuWhHA3a6bN7twRKtcGok6NsCi7jYRrM2jExsUFMxMQYuJbMhuWNOumEJy9hi29Dmg5zMp/A5+hhPG19j1vBrq8JTLr8ki5VLPmG/PynJHVul440bxg5xuymHUFPBshC+nA9I1FmwbRBTNHAcik3Oae0cxKoI3MOriM42UrPe51nsaGxJ+WfXubAsP84aabUlQSJ1IiE0iPETLUU4CATgfXSCSpuRFRmCGbO+wSpAnzaeaCYW1VNEysRtuXCEL1kUFUbbtMv3Tilt/1c11jt3Q5bbMa84cpWipp8Elw3MZhOHsOlwwVUQM3lAR35JiFQbaYCRnMF2lxAWoOg2gyoIV4PouX8HytNIfLhqpJtXB4vjiViUI8IJ7bkC4ikkQvKksnOTKICwnqWSZ9YS5f0WCxmpgjbIq7EJcM4aI2nmhLNY2JIUgOjXZFWBHb+x5oh6cwb0Tv1ackHdKi0I9OO2wE9aogIOn540CCCziyhN+IaejtgAONKznHlHyutPrHGwCx9S6B8kfS4Mfi4Eyv7OU730bT1SCBjt834cXsf43zVjPUqqJjgrjeGnBxSG4aYAKFuVbeCfkDIjAqMb6yLNIbCuvXhMH2/+k2vkNpkORhR59N1CkzoOENvneIosjYmuTxlhUzaGEJQ/iWqx4dmwpmKjrwTiTGTCVozNAYqk/zXOndWxuWSmJkQpJw3pK5KX6QrLt5LATMqpmPAQhkhK6PUjzHUn7E0gHE0kPE0iKkolgkUx9SZmVAdDgpffdyJKg3k7VmzYGCwVXGz/tXmkOIp+vcWs+EMuhhvN0h9uhfzWJziBQmCREGSIFmQIkgVpAnSBRmC//6hkLZwaVhwxlrJSOdqlFtOYxlau9F2QN5Y98xmIAsiM1HVp2VFX+DHHGg6Ecjh3vmqtidX3qHI2qycTk/iwxSt5UzTmEP92ZBnEWTk4Mx8Mpl78ZDokxg/KWb+Q0QkvdKVmq3TMW+RXEgrsziSAfNXFMhDc60N5N9jQzjfO0kBKpUZl0ZmwJ41j/B9Hz6wmRaJB84niNmQrzp9eSlQCDDzazGDdVi3P36VZQ+Jy4f9UBNp+3zTjqI4abaFAm+GShVaXlsGdF3FYzZcDI6cori4kMxUECl9IjJZpzkvitAoxKue+90pDMvcKRxLl53TmOKCmV/xRolNKSqqUxc6LStOETmFOiLZZptlZepcKiAzteG8PEdpnQpbOMNcMsR4RR2Bs0cKFEvSmIjAFcnarqwUL4lDhHmnVkwu1IwshbiCcgvOheZuYyOteufZZwlcTlLgnZ3o/WcYdzZHW/WGaqaVfmTZ1aWCceJjkbZqsfbkOtcFlUZM/jy+hXHDbaUobWqqXaeWobbLO99yG5N3U4wxco0rQGGcOLASFMXeJoham8M+/x6O2WywK2l4HGbq1CoUyC/IZikQhdq3SiuNrvAEj0AVu9x2x3lp/xWzahaxidezFVtdcb5uEnzyl0ZmYiuKI0exvCd4Xc9CV1KB0db00z92wDPde0kukbvZIWN6jUWFTmPIC/Y4UPCm8UfDTFZpZNon1qLFTkBhxzB+FjQRA2Q/YRJT8pQigslMaUpFyAG8TMlXigiqmAZX4xgijKjRlGpLE0GdplRfCaJo0JQaSxNBk6ZmMzcya0FmrcisDdn0Q3HI2sWSppYigmlM1XT/kLQZSNpMJG0WkjYbSZuDpM1F0uYhFc1HxU4m1QJjDK6iL0S5uSj5rgXc3RejEigtcRBtqYPQsiTskmO5vosV+q4VGIKbOkDg0jtRrq+Em1YloaTFar3EGr1EUC8R0kus1Uus00usL97ABr2BjXoDm/QGNhuWtMVBKOwg/i78lT7hBsAvDmwHc/ao3vmUbBmhjeYySZNWvGkfZAgISDSaDo1SVpzGDsAEkF8B+gEapViUoZgUWXcRIGFZNm6gWbAKk0bp0k1MHG9fLYtV4iS2SmLEQFARzRcnf9PUS0LVn05/J9MiRRBU3v2IrvW974v4N00L7ZMk0wXP1409CHo/an8zTRHD3eSJ6m8D4YMkZNl3M79sqeuAsr/m3f+8/yl7A50aiAEJgeBeMWzu7ui9UfUBCe2TIqZIoOd/3/udRBOQidQZUERzb2/VwZN1H/Sju82ew2H2Wfr6qvfVf3hqwDvAIpkQVFy4B9Pe9e4/XvPeceu7h3dvO56iJPf0+A6cqA2ip18ER+iFgggiuOkvj24bby0N9j2UHIkgqIt+sVgfodC4YghLSMjSZbH0VR/6dMDrYJeKHilKTemt6v6kvzvn3/RrdWtr0GoN/xL+Sex/cPYLUpepx9cz/D46UPU5KXgAQa+NDps1v6J3xP1i2HtaDB0M9aX2deA7SYff//+gUCovMmIK/qfsFcOk+4Y5ZN97XlG6zebqtMbKgeRFi51vnxTQYBUik2rS/Cn6PC8ADR8FGxsRPB82dzfND90gIcshOcYUkfjherBz53odpm6TP8txlwOZ71xmfHHOvq053qFF/MRlS3jP0ELudrf2OeN8DHvp6ZceLe8qKYvWz/7yp0u4dKPfli3CYq0O13Ih71mylJ80tOi10On8wi+F4+LWgDPeJ30msSQt9/vkmHq9/Lvo2b461mP801v3W4xTcs6CbvF9UDdrSt+A8OUbpSh55qAUFXWznBBfdeJ8a4d7ugT5tvxUza3h9m4H7ptTqiG4z0g5dc0X29OcGlhpGFMpQo9ytTS+NViZpNdvU4kWx+LKxNY10kQ1yqGXrhe4/1nvP7E+nd5A92TtaRplbHSqoIdOqtRWti+fkB5/n1+/VvCmz12pG1kpQWsfi1ftlBobm0bpngs16CHkbIwdLnParxtTV3QYRlfJ0KFskH7pdN/YDn+yRuSd7sNH3aO0DYPggk6uWuXrfOc+fa3VTxFVvKaNxHsiHmsXyCLIE5yuOeN3/Jdf8HBL/5M6shjyhxHx9BjB1O0+4NLOnjLLSxwO7ukN4jMbOIcD879KLSi6Pk61Oqm2377n8079PXEEQ7cy7OKEC9nbpet118fxweTafpt69x/Bt8UqGzNQt7aelpc44dn5cqhwf71+qKp/Zf/+a0zcizOUWpl/iBcSXip0pplkatCchoH5c5aUM8I7/dWxAej8WicPL1URFZ9BDJelUwEwTkGqUhgSlydVes95YdXvhh9Gfz/aeFWvgVb4tuLbcv4+wLdutVZv/cUonwBD/6eDlE0aSiKK/uoH3+J1wDE/jMVqY2ysGufN84oIXB0sPzy8ollX/LegY74DgJXJR57sn+VGza0x3DnuIgABFM15LmajjjsNlYj+JEZGbuRYcAMOWxFkPN2w6Wd46xo4gVWQR/X4lyI/R6K/YK0110GzudPRW7Y+UOBGTfNNzHeYT0fiH0taunBpq9HEW8OKSaBGj21L0MqenEmNRWBAWDWAk4CpNoEZJ2tTaPFgbQYj8HxtFilErs3BTRwT8uO1NXQaWfIotchmPkAF5mMBAliEmZiOGVgCG9LgRzpscMAOOwowlT3JhusdazXGSC/hxR3UlmWVwWHpOIKheqONvjyhSiTHIkVUco5bnji8m//zL7PKaT1Vl5I6UE609f+gkr6MZKVyKc7zJRmCahLsdlyA5fdQkRSan9LgnnLEyGSkaKJCJog0wAgvepWBt80+1yKln1bMVtCljfNWDueKLsWwaEbBSfSPTEmVRsUcYYMnEjcjeyCZzBXK9E9BYBXLKjOSpUDR+nEV3TFSUdQaz+ot98QxgXwx0GQ+EEUAKB2qZPkQQ0GqFD8UPFMqyaCHM24BZmSGic9EYMagKizOw9Hz50DMrDLrqqLkTAhplMictiCAx5S3BIUQdeJeLnBy2CNtMfz6cV4u8XKoFZQesbf9YZiIERiHjaNodDW6LgcirX/mPnJIkBGDUpTBhSa0EIr38D5hCIszhCM8URGBqImoWjpvpt1ebu/v3Gl3qJfMnNM+9V+kiRFyROTPHQWOcs1dNW94/ukKMPZBvDi55i5CttdeJz84DLngLqjcdwEZ87bFFR8CIG35OAkDVN6VRDZ7aq67NteYqZ2lpT8oYB2CytoBd6VuAx4WgiAsnuj3WohG+LugzXiQRDeM3XYXlULv4dp5VFYC) format("woff2"),url(/assets/KaTeX_Size3-Regular-6ab6b62e.woff) format("woff"),url(/assets/KaTeX_Size3-Regular-500e04d5.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size4-Regular-a4af7d41.woff2) format("woff2"),url(/assets/KaTeX_Size4-Regular-99f9c675.woff) format("woff"),url(/assets/KaTeX_Size4-Regular-c647367d.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Typewriter-Regular-71d517d6.woff2) format("woff2"),url(/assets/KaTeX_Typewriter-Regular-e14fed02.woff) format("woff"),url(/assets/KaTeX_Typewriter-Regular-f01f3e87.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.25"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}
/*
** This file is generated from Fluent UI tokens.
** To regenerate the file run: yarn run fluentSass.
** Generate on: 28/06/2023 23:34:58
*/
/*
** Variables for color
*/
/*
** Variables for border
*/
/*
** Variables for font
*/
/*
** Variables for line
*/
/*
** Variables for shadow
*/
/*
** Variables for stroke
*/
/*
** Variables for spacing
*/
/*
** Variables for duration
*/
/*
** Variables for curve
*/
code[class^=language-] {
  font-family: var(--fontFamilyMonospace);
  background-color: var(--color-neutral-muted);
  box-shadow: var(--shadow4);
  position: relative;
}
.codeCopyButton {
  position: absolute;
  top: 0;
  right: 0;
}/*
** This file is generated from Fluent UI tokens.
** To regenerate the file run: yarn run fluentSass.
** Generate on: 28/06/2023 23:34:58
*/
/*
** Variables for color
*/
/*
** Variables for border
*/
/*
** Variables for font
*/
/*
** Variables for line
*/
/*
** Variables for shadow
*/
/*
** Variables for stroke
*/
/*
** Variables for spacing
*/
/*
** Variables for duration
*/
/*
** Variables for curve
*/
.table {
  max-width: 200px;
}
.tableDivCopyButton {
  position: absolute;
}
.tableContainer {
  overflow-x: auto;
}
.tableCopyButton {
  position: absolute;
  top: 0;
  right: 0;
}body[data-theme=dark] .fui-Tooltip__content,
body[data-theme=dark] [role=tooltip] {
  background-color: #27272A !important;
  color: #A1A1AA !important;
}
body[data-theme=dark] .fui-Arrow,
body[data-theme=dark] .fui-Tooltip__arrow,
body[data-theme=dark] [data-popper-arrow] {
  background-color: #27272A !important;
}
body[data-theme=dark] .fui-Arrow::before, body[data-theme=dark] .fui-Arrow::after,
body[data-theme=dark] .fui-Tooltip__arrow::before,
body[data-theme=dark] .fui-Tooltip__arrow::after,
body[data-theme=dark] [data-popper-arrow]::before,
body[data-theme=dark] [data-popper-arrow]::after {
  background-color: #27272A !important;
  border-color: #27272A !important;
}
body[data-theme=dark] .fui-Arrow__svg,
body[data-theme=dark] .fui-Tooltip__arrow svg {
  fill: #27272A !important;
}

:global .fui-Tooltip__content,
:global [role=tooltip] {
  background-color: #000000 !important;
  color: #ffffff !important;
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  border: none !important;
  text-align: center !important;
}
:global .fui-Arrow,
:global .fui-Tooltip__arrow,
:global [data-popper-arrow] {
  background-color: #000000 !important;
}
:global .fui-Arrow::before, :global .fui-Arrow::after,
:global .fui-Tooltip__arrow::before,
:global .fui-Tooltip__arrow::after,
:global [data-popper-arrow]::before,
:global [data-popper-arrow]::after {
  background-color: #000000 !important;
  border-color: #000000 !important;
}
:global .fui-Arrow__svg,
:global .fui-Tooltip__arrow svg {
  fill: #000000 !important;
  width: 16px !important;
  height: 16px !important;
}
body[data-theme=dark] :global .fui-Tooltip__content,
body[data-theme=dark] :global [role=tooltip] {
  background-color: #27272A !important;
  color: #A1A1AA !important;
}
body[data-theme=dark] :global .fui-Arrow,
body[data-theme=dark] :global .fui-Tooltip__arrow,
body[data-theme=dark] :global [data-popper-arrow] {
  background-color: #27272A !important;
}
body[data-theme=dark] :global .fui-Arrow::before, body[data-theme=dark] :global .fui-Arrow::after,
body[data-theme=dark] :global .fui-Tooltip__arrow::before,
body[data-theme=dark] :global .fui-Tooltip__arrow::after,
body[data-theme=dark] :global [data-popper-arrow]::before,
body[data-theme=dark] :global [data-popper-arrow]::after {
  background-color: #27272A !important;
  border-color: #27272A !important;
}
body[data-theme=dark] :global .fui-Arrow__svg,
body[data-theme=dark] :global .fui-Tooltip__arrow svg {
  fill: #27272A !important;
}/* Lexical Editor Styles */
.lexical-editor-container {
  position: relative;
  width: 100%;
  border: none;
  border-radius: 4px;
  background-color: #fff;
  overflow: visible; /* Allow scrolling to be visible */
  box-sizing: border-box;
}

/* Allow default overflow behavior for child elements; avoid forcing horizontal hiding which can create empty space */
.lexical-editor-container * {
  overflow-x: hidden;
}

.lexical-editor {
  border: none;
  border-radius: 0;
  min-height: 60px;
  padding: 8px;
  font-family: var(--font-family-body);
  font-size: inherit;
  line-height: 1.4;
  outline: none;
  background-color: transparent;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden !important;
}

.lexical-content-editable {
  min-height: 60px;
  padding: 8px 12px;
  border: none !important;
  border-radius: 0;
  outline: none !important;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.4;
  background-color: transparent;
  resize: none;
  overflow-y: auto; /* Allow vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
  max-height: none !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Firefox */
}

/* Custom scrollbar styling for better UX */
.lexical-content-editable::-webkit-scrollbar {
  width: 8px;
}

.lexical-content-editable::-webkit-scrollbar-track {
  background: transparent;
}

.lexical-content-editable::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.lexical-content-editable::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.lexical-content-editable::-webkit-scrollbar-corner {
  background: transparent;
}

/* Override parent .lexicaleditor styles specifically for lexical editor */
.lexical-editor-container.lexicaleditor {
  overflow: visible; /* Allow scrolling to be visible */
  max-height: none !important;
}

.lexical-editor-container.lexicaleditor .lexical-content-editable {
  overflow-y: auto; /* Allow vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
  max-height: none !important;
}

/* Global override for any parent containers */
.lexicaleditor.lexical-editor-container,
.lexicaleditor .lexical-editor-container,
div.lexicaleditor.lexical-editor-container {
  overflow: visible; /* Allow scrolling to be visible */
}

/* Custom scrollbar styling for the container level */
.lexical-editor-container::-webkit-scrollbar {
  width: 8px;
}

.lexical-editor-container::-webkit-scrollbar-track {
  background: transparent;
}

.lexical-editor-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.lexical-editor-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.lexical-content-editable:focus {
  outline: none;
}

.lexical-placeholder {
  position: absolute;
  top: 8px; /* No toolbar now, so adjust position */
  left: 12px;
  color: var(--color-bg-primary);
  pointer-events: none;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.4;
  transition: opacity 0.12s ease-in-out;
  opacity: 1;
}

/* Focus styles for the container */
.lexical-editor-container:focus-within {
  border-color: transparent;
  box-shadow: none;
}

.lexical-paragraph {
  margin: 0;
  padding: 0;
}

/* Rich text formatting styles */
.lexical-text-bold {
  font-weight: bold;
}

.lexical-text-italic {
  font-style: italic;
}

.lexical-text-underline {
  text-decoration: underline;
}

.lexical-text-strikethrough {
  text-decoration: line-through;
}

/* List styles */
.lexical-list-ol {
  padding-left: 16px;
  margin: 8px 0;
}

.lexical-list-ul {
  padding-left: 16px;
  margin: 8px 0;
}

.lexical-listitem {
  margin: 4px 0;
}

.lexical-nested-listitem {
  margin-left: 16px;
}

/* Heading styles */
.lexical-heading-h1 {
  font-size: 2em;
  font-weight: bold;
  margin: 16px 0 8px 0;
}

.lexical-heading-h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 14px 0 6px 0;
}

.lexical-heading-h3 {
  font-size: 1.25em;
  font-weight: bold;
  margin: 12px 0 4px 0;
}

/* Quote styles */
.lexical-quote {
  border-left: 4px solid #ccc;
  padding-left: 16px;
  margin: 8px 0;
  font-style: italic;
  color: #666;
}

/* Link styles */
.lexical-link {
  color: #0078d4;
  text-decoration: underline;
}

.lexical-link:hover {
  text-decoration: none;
}

/* Ensure the editor behaves like a lexicaleditor */
.lexical-content-editable[contenteditable=true] {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  overflow-y: auto; /* Allow vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
  text-overflow: ellipsis;
}

/* If you need vertical scrolling, use this instead */
.lexical-content-editable.with-scroll[contenteditable=true] {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Hide placeholder when the editor has content or is focused.
   Use the data-has-content attribute set from the editor change handler
   because :empty can be unreliable with contenteditable elements that
   contain non-text nodes. */
.lexical-content-editable[data-has-content=true] + .lexical-placeholder,
.lexical-content-editable:focus + .lexical-placeholder {
  opacity: 0;
  pointer-events: none;
}/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 *
 */
.PlaygroundEditorTheme__ltr {
  text-align: left;
}
.PlaygroundEditorTheme__rtl {
  text-align: right;
}
.PlaygroundEditorTheme__paragraph {
  margin: 0;
  position: relative;
  /* Ensure visual height matches design: set line-height/min-height to 32px */
  line-height: 1.5;
  font-size: 1rem
}
.PlaygroundEditorTheme__quote {
  margin: 0;
  margin-left: 20px;
  margin-bottom: 10px;
  font-size: 15px;
  color: rgb(101, 103, 107);
  border-left-color: rgb(206, 208, 212);
  border-left-width: 4px;
  border-left-style: solid;
  padding-left: 16px;
}
.PlaygroundEditorTheme__h1 {
  font-size: 24px;
  color: rgb(5, 5, 5);
  font-weight: 400;
  margin: 0;
}
.PlaygroundEditorTheme__h2 {
  font-size: 15px;
  color: rgb(101, 103, 107);
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}
.PlaygroundEditorTheme__h3 {
  font-size: 12px;
  margin: 0;
  text-transform: uppercase;
}
.PlaygroundEditorTheme__indent {
  --lexical-indent-base-value: 40px;
}
.PlaygroundEditorTheme__textBold {
  font-weight: bold;
}
.PlaygroundEditorTheme__paragraph mark {
  background-color: unset;
}
.PlaygroundEditorTheme__textHighlight {
  background: rgba(255, 212, 0, 0.14);
  border-bottom: 2px solid rgba(255, 212, 0, 0.3);
}
.PlaygroundEditorTheme__textItalic {
  font-style: italic;
}
.PlaygroundEditorTheme__textUnderline {
  text-decoration: underline;
}

.PlaygroundEditorTheme__textStrikethrough {
  text-decoration: line-through;
}

.PlaygroundEditorTheme__textUnderlineStrikethrough {
  text-decoration: underline line-through;
}

.PlaygroundEditorTheme__tabNode {
  position: relative;
  text-decoration: none;
}

.PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textUnderline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15em;
  border-bottom: 0.1em solid currentColor;
}

.PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textStrikethrough::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0.69em;
  border-top: 0.1em solid currentColor;
}

.PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textUnderlineStrikethrough::before,
.PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textUnderlineStrikethrough::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
}

.PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textUnderlineStrikethrough::before {
  top: 0.69em;
  border-top: 0.1em solid currentColor;
}

.PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textUnderlineStrikethrough::after {
  bottom: 0.05em;
  border-bottom: 0.1em solid currentColor;
}

.PlaygroundEditorTheme__textSubscript {
  font-size: 0.8em;
  vertical-align: sub !important;
}
.PlaygroundEditorTheme__textSuperscript {
  font-size: 0.8em;
  vertical-align: super;
}
.PlaygroundEditorTheme__textCode {
  background-color: rgb(240, 242, 245);
  padding: 1px 0.25rem;
  font-family: Menlo, Consolas, Monaco, monospace;
  font-size: 94%;
}
.PlaygroundEditorTheme__textLowercase {
  text-transform: lowercase;
}
.PlaygroundEditorTheme__textUppercase {
  text-transform: uppercase;
}
.PlaygroundEditorTheme__textCapitalize {
  text-transform: capitalize;
}
.PlaygroundEditorTheme__hashtag {
  background-color: rgba(88, 144, 255, 0.15);
  border-bottom: 1px solid rgba(88, 144, 255, 0.3);
}
.PlaygroundEditorTheme__link {
  color: rgb(33, 111, 219);
  text-decoration: none;
}
.PlaygroundEditorTheme__link:hover {
  text-decoration: underline;
  cursor: pointer;
}
.PlaygroundEditorTheme__blockCursor {
  display: block;
  pointer-events: none;
  position: absolute;
}
.PlaygroundEditorTheme__blockCursor:after {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid black;
  animation: CursorBlink 1.1s steps(2, start) infinite;
}
@keyframes CursorBlink {
  to {
    visibility: hidden;
  }
}
.PlaygroundEditorTheme__code {
  background-color: rgb(240, 242, 245);
  font-family: Menlo, Consolas, Monaco, monospace;
  display: block;
  padding: 8px 8px 8px 52px;
  line-height: 1.53;
  font-size: 13px;
  margin: 0;
  margin-top: 8px;
  margin-bottom: 8px;
  overflow-x: auto;
  position: relative;
  tab-size: 2;
}
.PlaygroundEditorTheme__code:before {
  content: attr(data-gutter);
  position: absolute;
  background-color: #eee;
  left: 0;
  top: 0;
  border-right: 1px solid #ccc;
  padding: 8px;
  color: #777;
  white-space: pre-wrap;
  text-align: right;
  min-width: 25px;
}
.PlaygroundEditorTheme__tableScrollableWrapper {
  overflow-x: auto;
  margin: 0px 25px 30px 0px;
}
.PlaygroundEditorTheme__tableScrollableWrapper > .PlaygroundEditorTheme__table {
  /* Remove the table's vertical margin and put it on the wrapper */
  margin-top: 0;
  margin-bottom: 0;
}
.PlaygroundEditorTheme__tableAlignmentCenter {
  margin-left: auto;
  margin-right: auto;
}
.PlaygroundEditorTheme__tableAlignmentRight {
  margin-left: auto;
}
.PlaygroundEditorTheme__table {
  border-collapse: collapse;
  border-spacing: 0;
  overflow-y: scroll;
  overflow-x: scroll;
  table-layout: fixed;
  width: fit-content;
  margin-top: 25px;
  margin-bottom: 30px;
}
.PlaygroundEditorTheme__tableScrollableWrapper.PlaygroundEditorTheme__tableFrozenRow {
  /* position:sticky needs overflow:clip or visible
     https://github.com/w3c/csswg-drafts/issues/865#issuecomment-350585274 */
  overflow-x: clip;
}
.PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > td {
  overflow: clip;
  background-color: #ffffff;
  position: sticky;
  z-index: 2;
  top: 44px;
}
.PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > th {
  overflow: clip;
  background-color: #f2f3f5;
  position: sticky;
  z-index: 2;
  top: 44px;
}
.PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > th:after,
.PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > td:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-bottom: 1px solid #bbb;
}
.PlaygroundEditorTheme__tableFrozenColumn tr > td:first-child {
  background-color: #ffffff;
  position: sticky;
  z-index: 2;
  left: 0;
}
.PlaygroundEditorTheme__tableFrozenColumn tr > th:first-child {
  background-color: #f2f3f5;
  position: sticky;
  z-index: 2;
  left: 0;
}
.PlaygroundEditorTheme__tableFrozenColumn tr > :first-child::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 100%;
  border-right: 1px solid #bbb;
}
.PlaygroundEditorTheme__tableRowStriping tr:nth-child(even),
.PlaygroundEditorTheme__tableFrozenColumn
  .PlaygroundEditorTheme__table.PlaygroundEditorTheme__tableRowStriping
  tr:nth-child(even)
  > td:first-child {
  background-color: #f2f5fb;
}
.PlaygroundEditorTheme__tableSelection *::selection {
  background-color: transparent;
}
.PlaygroundEditorTheme__tableSelected {
  outline: 2px solid rgb(60, 132, 244);
}
.PlaygroundEditorTheme__tableCell {
  border: 1px solid #bbb;
  width: 75px;
  vertical-align: top;
  text-align: start;
  padding: 6px 8px;
  position: relative;
  outline: none;
  overflow: auto;
}
/*
  A firefox workaround to allow scrolling of overflowing table cell
  ref: https://bugzilla.mozilla.org/show_bug.cgi?id=1904159
*/
.PlaygroundEditorTheme__tableCell > * {
  overflow: inherit;
}
.PlaygroundEditorTheme__tableCellResizer {
  position: absolute;
  right: -4px;
  height: 100%;
  width: 8px;
  cursor: ew-resize;
  z-index: 10;
  top: 0;
}
.PlaygroundEditorTheme__tableCellHeader {
  background-color: #f2f3f5;
  text-align: start;
}
.PlaygroundEditorTheme__tableCellSelected {
  caret-color: transparent;
}
.PlaygroundEditorTheme__tableCellSelected::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: highlight;
  mix-blend-mode: multiply;
  content: '';
  pointer-events: none;
}
.PlaygroundEditorTheme__tableAddColumns {
  position: absolute;
  background-color: #eee;
  height: 100%;
  animation: table-controls 0.2s ease;
  border: 0;
  cursor: pointer;
}
.PlaygroundEditorTheme__tableAddColumns:after {
  background-image: url(../images/icons/plus.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
}
.PlaygroundEditorTheme__tableAddColumns:hover,
.PlaygroundEditorTheme__tableAddRows:hover {
  background-color: #c9dbf0;
}
.PlaygroundEditorTheme__tableAddRows {
  position: absolute;
  width: calc(100% - 25px);
  background-color: #eee;
  animation: table-controls 0.2s ease;
  border: 0;
  cursor: pointer;
}
.PlaygroundEditorTheme__tableAddRows:after {
  background-image: url(../images/icons/plus.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
}
@keyframes table-controls {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.PlaygroundEditorTheme__tableCellResizeRuler {
  display: block;
  position: absolute;
  width: 1px;
  background-color: rgb(60, 132, 244);
  height: 100%;
  top: 0;
}
.PlaygroundEditorTheme__tableCellActionButtonContainer {
  display: block;
  right: 5px;
  top: 6px;
  position: absolute;
  z-index: 4;
  width: 20px;
  height: 20px;
}
.PlaygroundEditorTheme__tableCellActionButton {
  background-color: #eee;
  display: block;
  border: 0;
  border-radius: 20px;
  width: 20px;
  height: 20px;
  color: #222;
  cursor: pointer;
}
.PlaygroundEditorTheme__tableCellActionButton:hover {
  background-color: #ddd;
}
.PlaygroundEditorTheme__characterLimit {
  display: inline;
  background-color: #ffbbbb !important;
}
.PlaygroundEditorTheme__ol1 {
  padding: 0;
  margin: 0;
  list-style-position: inside;
}
.PlaygroundEditorTheme__ol2 {
  padding: 0;
  margin: 0;
  list-style-type: upper-alpha;
  list-style-position: inside;
}
.PlaygroundEditorTheme__ol3 {
  padding: 0;
  margin: 0;
  list-style-type: lower-alpha;
  list-style-position: inside;
}
.PlaygroundEditorTheme__ol4 {
  padding: 0;
  margin: 0;
  list-style-type: upper-roman;
  list-style-position: inside;
}
.PlaygroundEditorTheme__ol5 {
  padding: 0;
  margin: 0;
  list-style-type: lower-roman;
  list-style-position: inside;
}
.PlaygroundEditorTheme__ul {
  padding: 0;
  margin: 0;
  list-style-position: inside;
}
.PlaygroundEditorTheme__listItem {
  margin: 0 32px;
  font-family: var(--listitem-marker-font-family);
  font-size: var(--listitem-marker-font-size);
  background-color: var(--listitem-marker-background-color);
}
.PlaygroundEditorTheme__listItem::marker {
  color: var(--listitem-marker-color);
  background-color: var(--listitem-marker-background-color);
  font-family: var(--listitem-marker-font-family);
  font-size: var(--listitem-marker-font-size);
}
.PlaygroundEditorTheme__listItemChecked,
.PlaygroundEditorTheme__listItemUnchecked {
  position: relative;
  margin-left: 0.5em;
  margin-right: 0.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  list-style-type: none;
  outline: none;
  display: block;
  min-height: 1.5em;
}
.PlaygroundEditorTheme__listItemChecked > *,
.PlaygroundEditorTheme__listItemUnchecked > * {
  margin-left: 0.01em;
}
.PlaygroundEditorTheme__listItemUnchecked:before,
.PlaygroundEditorTheme__listItemChecked:before {
  content: '\200B';
  width: 0.9em;
  height: 0.9em;
  top: 50%;
  left: 0;
  cursor: pointer;
  display: block;
  background-size: cover;
  position: absolute;
  transform: translateY(-50%);
}
.PlaygroundEditorTheme__listItemChecked {
  text-decoration: line-through;
}
.PlaygroundEditorTheme__listItemUnchecked:focus:before,
.PlaygroundEditorTheme__listItemChecked:focus:before {
  box-shadow: 0 0 0 2px #a6cdfe;
  border-radius: 2px;
}
.PlaygroundEditorTheme__listItemUnchecked:before {
  border: 1px solid #999;
  border-radius: 2px;
}
.PlaygroundEditorTheme__listItemChecked:before {
  border: 1px solid rgb(61, 135, 245);
  border-radius: 2px;
  background-color: #3d87f5;
  background-repeat: no-repeat;
}
.PlaygroundEditorTheme__listItemChecked:after {
  content: '';
  cursor: pointer;
  border-color: #fff;
  border-style: solid;
  position: absolute;
  display: block;
  top: 45%;
  width: 0.2em;
  left: 0.35em;
  height: 0.4em;
  transform: translateY(-50%) rotate(45deg);
  border-width: 0 0.1em 0.1em 0;
}
.PlaygroundEditorTheme__nestedListItem {
  list-style-type: none;
}
.PlaygroundEditorTheme__nestedListItem:before,
.PlaygroundEditorTheme__nestedListItem:after {
  display: none;
}
.PlaygroundEditorTheme__tokenComment {
  color: slategray;
}
.PlaygroundEditorTheme__tokenDeleted {
  border-image: linear-gradient(to right, #ffcecb 50%, #ffebe9 50%) fill 0/0/0
    100vw;
}
.PlaygroundEditorTheme__tokenInserted {
  border-image: linear-gradient(to right, #aceebb 50%, #dafbe1 50%) fill 0/0/0
    100vw;
}
.PlaygroundEditorTheme__tokenUnchanged {
  border-image: linear-gradient(to right, #ddd 50%, #f0f2f5 50%) fill 0/0/0
    100vw;
}
.PlaygroundEditorTheme__tokenPunctuation {
  color: #999;
}
.PlaygroundEditorTheme__tokenProperty {
  color: #905;
}
.PlaygroundEditorTheme__tokenSelector {
  color: #690;
}
.PlaygroundEditorTheme__tokenOperator {
  color: #9a6e3a;
}
.PlaygroundEditorTheme__tokenAttr {
  color: #07a;
}
.PlaygroundEditorTheme__tokenVariable {
  color: #e90;
}
.PlaygroundEditorTheme__tokenFunction {
  color: #dd4a68;
}
.PlaygroundEditorTheme__mark {
  background: rgba(255, 212, 0, 0.14);
  border-bottom: 2px solid rgba(255, 212, 0, 0.3);
  padding-bottom: 2px;
}
.PlaygroundEditorTheme__markOverlap {
  background: rgba(255, 212, 0, 0.3);
  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
}
.PlaygroundEditorTheme__mark.selected {
  background: rgba(255, 212, 0, 0.5);
  border-bottom: 2px solid rgba(255, 212, 0, 1);
}
.PlaygroundEditorTheme__markOverlap.selected {
  background: rgba(255, 212, 0, 0.7);
  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
}
.PlaygroundEditorTheme__embedBlock {
  user-select: none;
}
.PlaygroundEditorTheme__embedBlockFocus {
  outline: 2px solid rgb(60, 132, 244);
}
.PlaygroundEditorTheme__layoutContainer {
  display: grid;
  gap: 10px;
  margin: 10px 0;
}
.PlaygroundEditorTheme__layoutItem {
  border: 1px dashed #ddd;
  padding: 8px 16px;
  min-width: 0;
  max-width: 100%;
}
.PlaygroundEditorTheme__autocomplete {
  color: #ccc;
}
.PlaygroundEditorTheme__hr {
  padding: 2px 2px;
  border: none;
  margin: 1em 0;
  cursor: pointer;
}
.PlaygroundEditorTheme__hr:after {
  content: '';
  display: block;
  height: 2px;
  background-color: #ccc;
  line-height: 2px;
}
.PlaygroundEditorTheme__hr.PlaygroundEditorTheme__hrSelected {
  outline: 2px solid rgb(60, 132, 244);
  user-select: none;
}

.PlaygroundEditorTheme__specialText {
  background-color: yellow;
  font-weight: bold;
}

.PlaygroundEditorTheme__contextMenu {
  outline: 0;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}
.PlaygroundEditorTheme__contextMenu button:first-child {
  border-radius: 8px 8px 0px 0px;
}
.PlaygroundEditorTheme__contextMenu button:last-child {
  border-radius: 0px 0px 8px 8px;
}
.PlaygroundEditorTheme__contextMenuItem {
  width: 100%;
  display: block;
}
.PlaygroundEditorTheme__contextMenuItem {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: #fff;
  color: #050505;
  border: 0;
  border-radius: 0px;
  font-size: 15px;
  text-align: left;
  line-height: 20px;
  padding: 8px;
  outline: 0;
  cursor: pointer;
}
.PlaygroundEditorTheme__contextMenuItem.open {
  background: #ddd;
}
.PlaygroundEditorTheme__contextMenuItem:focus,
.PlaygroundEditorTheme__contextMenuItem:not([disabled]):active {
  background: #eee;
}
.PlaygroundEditorTheme__contextMenuItem:disabled {
  background: #fff;
  color: #aaa;
  cursor: not-allowed;
}
/*
** This file is generated from Fluent UI tokens.
** To regenerate the file run: yarn run fluentSass.
** Generate on: 28/06/2023 23:34:58
*/
/*
** Variables for color
*/
/*
** Variables for border
*/
/*
** Variables for font
*/
/*
** Variables for line
*/
/*
** Variables for shadow
*/
/*
** Variables for stroke
*/
/*
** Variables for spacing
*/
/*
** Variables for duration
*/
/*
** Variables for curve
*/
/*
** Custom color variables for SyGPT Application
** These extend the Fluent UI design tokens with additional color palettes
*/
/*
** CSS Custom Properties (CSS Variables)
** These can be overridden at runtime and support theming
*/
:root {
  /* Gray Scale */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-gray-ring-500: #c7c9cd;
  /* Slate Scale */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  /* Zinc Scale */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  /* Neutral Scale */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  /* Stone Scale */
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  /* Lime Scale */
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  /* Green Scale */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-green-ring-500: #c4ede8;
  /* Emerald Scale */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
  /* Teal Scale */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
  /* Cyan Scale */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
  /* Sky Scale */
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
  /* Blue Scale */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  /* Indigo Scale */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
  /* Violet Scale */
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
  /* Purple Scale */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
  /* Fuchsia Scale */
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
  /* Pink Scale */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  /* Rose Scale */
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
  /* Red Scale */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-red-ring-500: #fbd0d0;
  /* Orange Scale */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  /* Amber Scale */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
  /* Yellow Scale */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-yellow-ring-500: #f9ecc1;
  /* White Variants */
  --color-white-100pct: #ffffff;
  --color-white-10pct: #ffffff;
  --color-white-3pct: #ffffff;
  --color-white-5pct: #ffffff;
  --color-white-15pct: #ffffff;
  --color-white-20pct: #ffffff;
  --color-white-30pct: #ffffff;
  --color-white-40pct: #ffffff;
  --color-white-50pct: #ffffff;
  --color-white-60pct: #ffffff;
  --color-white-70pct: #ffffff;
  --color-white-80pct: #ffffff;
  --color-white-90pct: #ffffff;
  --color-white-1pct: #ffffff;
  /* Soft Colors */
  --color-soft-green: #115e59;
  --color-soft-blue: #1e40af;
  --color-soft-red: #991b1b;
  --color-soft-yellow: #854d0e;
  --color-soft-gray: #374151;
  /* Primary Brand Scale */
  --color-primary-50: #fff5f3;
  --color-primary-100: #ffebe6;
  --color-primary-200: #ffd7cc;
  --color-primary-300: #ffc3b3;
  --color-primary-400: #ffaf99;
  --color-primary-500: #ff5730;
  --color-primary-600: #e64a26;
  --color-primary-700: #cc3e1c;
  --color-primary-800: #b33113;
  --color-primary-900: #99250a;
  --color-primary-950: #801a05;
  --color-primary-ring-500: #ffcdc1;
  --color-primary-500-10pct: rgba(255, 87, 48, 0.1);
  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  /* Spacing Scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-17: 68px;
  --spacing-18: 72px;
  --spacing-19: 76px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
  --spacing-4-5: 18px;
  --spacing-5-5: 22px;
  --spacing-6-5: 26px;
  --spacing-7-5: 30px;
  --spacing-8-5: 34px;
  --spacing-9-5: 38px;
  --spacing-10-5: 42px;
  --spacing-11-5: 46px;
  --spacing-12-5: 50px;
  --spacing-13-5: 54px;
  --spacing-14-5: 58px;
  --spacing-15-5: 62px;
  --spacing-16-5: 66px;
  --spacing-17-5: 70px;
  --spacing-18-5: 74px;
  --spacing-19-5: 78px;
}
/*
** SCSS Variables for convenient usage in SCSS files
** These reference the CSS custom properties above
*/
/* Gray Scale */
/* Slate Scale */
/* Zinc Scale */
/* Neutral Scale */
/* Stone Scale */
/* Lime Scale */
/* Green Scale */
/* Emerald Scale */
/* Teal Scale */
/* Cyan Scale */
/* Sky Scale */
/* Blue Scale */
/* Indigo Scale */
/* Violet Scale */
/* Purple Scale */
/* Fuchsia Scale */
/* Pink Scale */
/* Rose Scale */
/* Red Scale */
/* Orange Scale */
/* Amber Scale */
/* Yellow Scale */
/* White Variants */
/* Soft Colors */
/* Primary Brand Scale */
/* Border Radius */
/* Spacing Scale */
/*
** This file is generated from Fluent UI tokens.
** To regenerate the file run: yarn run fluentSass.
** Generate on: 28/06/2023 23:34:58
*/
/*
** Variables for color
*/
/*
** Variables for border
*/
/*
** Variables for font
*/
/*
** Variables for line
*/
/*
** Variables for shadow
*/
/*
** Variables for stroke
*/
/*
** Variables for spacing
*/
/*
** Variables for duration
*/
/*
** Variables for curve
*/
.queryMessage {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: var(--colorNeutralBackground1) !important;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
body[data-theme=dark] .queryMessage {
  background-color: var(--colorNeutralBackground1) !important;
}
@media (max-width: 768px) {
  .queryMessage {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
.queryMessage .inner {
  display: flex;
  flex-direction: row-reverse;
  /* Reduced gap so the pen icon sits closer to the message bubble */
  gap: 0.25rem;
  width: 100%;
  max-width: 900px;
  /* Align items to the start so the actions (pen icon) sit at the top of the bubble */
  align-items: flex-start;
  margin-left: 0.5rem;
  margin-right: 0.25rem;
}
.queryMessage .inner .content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Use a slightly darker neutral background so user bubble appears gray, not white */
  background-color: var(--colorNeutralBackground3);
  border-radius: 8px;
  padding: 12px 20px;
  max-width: 70%;
  margin-left: 0;
}
body[data-theme=dark] .queryMessage .inner .content {
  background-color: var(--color-zinc-800);
}
@media (max-width: 768px) {
  .queryMessage .inner .content {
    max-width: 85%;
    margin-left: 0;
  }
}
.queryMessage .inner .actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* place actions at the top-left of the message bubble */
  align-items: flex-start;
  /* bring actions (pen icon) closer to the bubble */
  margin-right: 0.2rem;
  /* removed negative top margin so the icon remains inside the parent's hit area */
  /* ensure the actions can receive pointer events so clicking the icon works */
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.queryMessage .inner .actions button {
  color: var(--colorNeutralForeground4);
}
.queryMessage .inner:hover .actions, .queryMessage .inner:focus-within .actions {
  opacity: 1;
  pointer-events: auto;
}
.queryMessage .inner {
  /* If the actions node itself is hovered (after being moved), keep it visible */
}
.queryMessage .inner .actions:hover {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 768px) {
  .queryMessage .inner .actions {
    opacity: 1;
    pointer-events: auto;
  }
}
.queryMessage .attachment-warning {
  width: 100%;
  margin-bottom: 0.75rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.queryMessage .attachment-warning [class*=MessageBarBody] {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.queryMessage .edit {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  color: var(--colorNeutralForeground1);
  /* Use a slightly darker neutral for the edit footer so it's visually distinct from pure white */
  background: var(--colorNeutralBackground3);
  /* In dark mode the edit footer should use zinc-800 to match the requested dark strip */
}
body[data-theme=dark] .queryMessage .edit {
  background: var(--color-zinc-800);
}
.queryMessage .edit {
  /* make the primary save button text white for better contrast */
  /* Target the primary button and all its descendant nodes to ensure the label becomes white
     (Fluent UI sometimes wraps content in spans/classes which can override color) */
}
.queryMessage .edit button[appearance=primary],
.queryMessage .edit button.primary,
.queryMessage .edit .ms-Button--primary,
.queryMessage .edit .fui-Button,
.queryMessage .edit [role=button][appearance=primary] {
  color: #ffffff !important;
}
.queryMessage .edit {
  /* Also force any child elements inside the primary button to white */
}
.queryMessage .edit button[appearance=primary] *,
.queryMessage .edit button.primary *,
.queryMessage .edit .ms-Button--primary *,
.queryMessage .edit .fui-Button *,
.queryMessage .edit [role=button][appearance=primary] * {
  color: #ffffff !important;
}
.queryMessage .edit {
  /* Force cancel (secondary) button text color: black for light mode, white for dark mode */
}
.queryMessage .edit button[appearance=secondary],
.queryMessage .edit button.secondary,
.queryMessage .edit .ms-Button--secondary,
.queryMessage .edit .fui-Button,
.queryMessage .edit [role=button][appearance=secondary] {
  color: #111 !important;
}
.queryMessage .edit button[appearance=secondary] *,
.queryMessage .edit button.secondary *,
.queryMessage .edit .ms-Button--secondary *,
.queryMessage .edit .fui-Button *,
.queryMessage .edit [role=button][appearance=secondary] * {
  color: #111 !important;
}
body[data-theme=dark] .queryMessage .edit button[appearance=secondary], body[data-theme=dark] .queryMessage .edit button.secondary, body[data-theme=dark] .queryMessage .edit .ms-Button--secondary, body[data-theme=dark] .queryMessage .edit .fui-Button, body[data-theme=dark] .queryMessage .edit [role=button][appearance=secondary] {
  color: #fff !important;
}
body[data-theme=dark] .queryMessage .edit button[appearance=secondary] *, body[data-theme=dark] .queryMessage .edit button.secondary *, body[data-theme=dark] .queryMessage .edit .ms-Button--secondary *, body[data-theme=dark] .queryMessage .edit .fui-Button *, body[data-theme=dark] .queryMessage .edit [role=button][appearance=secondary] * {
  color: #fff !important;
}
.queryMessage .queryMessageText {
  white-space: pre-wrap;
  /* Make header spacing even smaller for MarkdownPresenter */
}
.queryMessage .queryMessageText h1,
.queryMessage .queryMessageText h2,
.queryMessage .queryMessageText h3,
.queryMessage .queryMessageText h4,
.queryMessage .queryMessageText h5,
.queryMessage .queryMessageText h6 {
  white-space: normal !important;
  margin-top: 0.01em !important;
  margin-bottom: 0.01em !important;
  padding-bottom: 0em !important;
  line-height: 1em !important;
}
.queryMessage .queryMessageText {
  /* Set zero vertical spacing between lines inside bullet points */
}
.queryMessage .queryMessageText ul,
.queryMessage .queryMessageText ol {
  white-space: normal !important;
  margin-top: 0em !important;
  margin-bottom: 0em !important;
  padding-left: 1.5em;
  padding-bottom: 0em !important;
}
.queryMessage .queryMessageText ul li,
.queryMessage .queryMessageText ol li {
  white-space: normal;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0em !important;
}
.queryMessage .queryMessageText ul li:first-child,
.queryMessage .queryMessageText ol li:first-child {
  margin-top: 0 !important;
}
.queryMessage .lexicaleditor {
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  outline: none;
  font-family: var(--DefaultFontFamily);
  font-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.queryMessage .lexicaleditor:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}/*
** Custom color variables for SyGPT Application
** These extend the Fluent UI design tokens with additional color palettes
*/
/*
** CSS Custom Properties (CSS Variables)
** These can be overridden at runtime and support theming
*/
:root {
  /* Gray Scale */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-gray-ring-500: #c7c9cd;
  /* Slate Scale */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  /* Zinc Scale */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  /* Neutral Scale */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  /* Stone Scale */
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  /* Lime Scale */
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  /* Green Scale */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-green-ring-500: #c4ede8;
  /* Emerald Scale */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
  /* Teal Scale */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
  /* Cyan Scale */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
  /* Sky Scale */
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
  /* Blue Scale */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  /* Indigo Scale */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
  /* Violet Scale */
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
  /* Purple Scale */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
  /* Fuchsia Scale */
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
  /* Pink Scale */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  /* Rose Scale */
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
  /* Red Scale */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-red-ring-500: #fbd0d0;
  /* Orange Scale */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  /* Amber Scale */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
  /* Yellow Scale */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-yellow-ring-500: #f9ecc1;
  /* White Variants */
  --color-white-100pct: #ffffff;
  --color-white-10pct: #ffffff;
  --color-white-3pct: #ffffff;
  --color-white-5pct: #ffffff;
  --color-white-15pct: #ffffff;
  --color-white-20pct: #ffffff;
  --color-white-30pct: #ffffff;
  --color-white-40pct: #ffffff;
  --color-white-50pct: #ffffff;
  --color-white-60pct: #ffffff;
  --color-white-70pct: #ffffff;
  --color-white-80pct: #ffffff;
  --color-white-90pct: #ffffff;
  --color-white-1pct: #ffffff;
  /* Soft Colors */
  --color-soft-green: #115e59;
  --color-soft-blue: #1e40af;
  --color-soft-red: #991b1b;
  --color-soft-yellow: #854d0e;
  --color-soft-gray: #374151;
  /* Primary Brand Scale */
  --color-primary-50: #fff5f3;
  --color-primary-100: #ffebe6;
  --color-primary-200: #ffd7cc;
  --color-primary-300: #ffc3b3;
  --color-primary-400: #ffaf99;
  --color-primary-500: #ff5730;
  --color-primary-600: #e64a26;
  --color-primary-700: #cc3e1c;
  --color-primary-800: #b33113;
  --color-primary-900: #99250a;
  --color-primary-950: #801a05;
  --color-primary-ring-500: #ffcdc1;
  --color-primary-500-10pct: rgba(255, 87, 48, 0.1);
  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  /* Spacing Scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-17: 68px;
  --spacing-18: 72px;
  --spacing-19: 76px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
  --spacing-4-5: 18px;
  --spacing-5-5: 22px;
  --spacing-6-5: 26px;
  --spacing-7-5: 30px;
  --spacing-8-5: 34px;
  --spacing-9-5: 38px;
  --spacing-10-5: 42px;
  --spacing-11-5: 46px;
  --spacing-12-5: 50px;
  --spacing-13-5: 54px;
  --spacing-14-5: 58px;
  --spacing-15-5: 62px;
  --spacing-16-5: 66px;
  --spacing-17-5: 70px;
  --spacing-18-5: 74px;
  --spacing-19-5: 78px;
}
/*
** SCSS Variables for convenient usage in SCSS files
** These reference the CSS custom properties above
*/
/* Gray Scale */
/* Slate Scale */
/* Zinc Scale */
/* Neutral Scale */
/* Stone Scale */
/* Lime Scale */
/* Green Scale */
/* Emerald Scale */
/* Teal Scale */
/* Cyan Scale */
/* Sky Scale */
/* Blue Scale */
/* Indigo Scale */
/* Violet Scale */
/* Purple Scale */
/* Fuchsia Scale */
/* Pink Scale */
/* Rose Scale */
/* Red Scale */
/* Orange Scale */
/* Amber Scale */
/* Yellow Scale */
/* White Variants */
/* Soft Colors */
/* Primary Brand Scale */
/* Border Radius */
/* Spacing Scale */
.date-separator {
  display: flex;
  align-items: center;
  margin: 20px 0;
  padding-left: 1rem;
  padding-right: 1rem;
  gap: 12px;
}
.date-separator__line {
  flex: 1;
  height: 1px;
  background-color: var(--color-gray-200);
}
body[data-theme=dark] .date-separator__line {
  background-color: var(--color-zinc-700);
}
.date-separator__text {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-500);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
body[data-theme=dark] .date-separator__text {
  color: var(--color-zinc-400);
}
@media (max-width: 768px) {
  .date-separator {
    margin: 16px 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    gap: 8px;
  }
  .date-separator__text {
    font-size: 11px;
    padding: 3px 6px;
  }
}/*
** This file is generated from Fluent UI tokens.
** To regenerate the file run: yarn run fluentSass.
** Generate on: 28/06/2023 23:34:58
*/
/*
** Variables for color
*/
/*
** Variables for border
*/
/*
** Variables for font
*/
/*
** Variables for line
*/
/*
** Variables for shadow
*/
/*
** Variables for stroke
*/
/*
** Variables for spacing
*/
/*
** Variables for duration
*/
/*
** Variables for curve
*/
/*
** Custom color variables for SyGPT Application
** These extend the Fluent UI design tokens with additional color palettes
*/
/*
** CSS Custom Properties (CSS Variables)
** These can be overridden at runtime and support theming
*/
:root {
  /* Gray Scale */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-gray-ring-500: #c7c9cd;
  /* Slate Scale */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  /* Zinc Scale */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  /* Neutral Scale */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  /* Stone Scale */
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  /* Lime Scale */
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  /* Green Scale */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-green-ring-500: #c4ede8;
  /* Emerald Scale */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
  /* Teal Scale */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
  /* Cyan Scale */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
  /* Sky Scale */
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
  /* Blue Scale */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  /* Indigo Scale */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
  /* Violet Scale */
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
  /* Purple Scale */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
  /* Fuchsia Scale */
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
  /* Pink Scale */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  /* Rose Scale */
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
  /* Red Scale */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-red-ring-500: #fbd0d0;
  /* Orange Scale */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  /* Amber Scale */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
  /* Yellow Scale */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-yellow-ring-500: #f9ecc1;
  /* White Variants */
  --color-white-100pct: #ffffff;
  --color-white-10pct: #ffffff;
  --color-white-3pct: #ffffff;
  --color-white-5pct: #ffffff;
  --color-white-15pct: #ffffff;
  --color-white-20pct: #ffffff;
  --color-white-30pct: #ffffff;
  --color-white-40pct: #ffffff;
  --color-white-50pct: #ffffff;
  --color-white-60pct: #ffffff;
  --color-white-70pct: #ffffff;
  --color-white-80pct: #ffffff;
  --color-white-90pct: #ffffff;
  --color-white-1pct: #ffffff;
  /* Soft Colors */
  --color-soft-green: #115e59;
  --color-soft-blue: #1e40af;
  --color-soft-red: #991b1b;
  --color-soft-yellow: #854d0e;
  --color-soft-gray: #374151;
  /* Primary Brand Scale */
  --color-primary-50: #fff5f3;
  --color-primary-100: #ffebe6;
  --color-primary-200: #ffd7cc;
  --color-primary-300: #ffc3b3;
  --color-primary-400: #ffaf99;
  --color-primary-500: #ff5730;
  --color-primary-600: #e64a26;
  --color-primary-700: #cc3e1c;
  --color-primary-800: #b33113;
  --color-primary-900: #99250a;
  --color-primary-950: #801a05;
  --color-primary-ring-500: #ffcdc1;
  --color-primary-500-10pct: rgba(255, 87, 48, 0.1);
  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  /* Spacing Scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-17: 68px;
  --spacing-18: 72px;
  --spacing-19: 76px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
  --spacing-4-5: 18px;
  --spacing-5-5: 22px;
  --spacing-6-5: 26px;
  --spacing-7-5: 30px;
  --spacing-8-5: 34px;
  --spacing-9-5: 38px;
  --spacing-10-5: 42px;
  --spacing-11-5: 46px;
  --spacing-12-5: 50px;
  --spacing-13-5: 54px;
  --spacing-14-5: 58px;
  --spacing-15-5: 62px;
  --spacing-16-5: 66px;
  --spacing-17-5: 70px;
  --spacing-18-5: 74px;
  --spacing-19-5: 78px;
}
/*
** SCSS Variables for convenient usage in SCSS files
** These reference the CSS custom properties above
*/
/* Gray Scale */
/* Slate Scale */
/* Zinc Scale */
/* Neutral Scale */
/* Stone Scale */
/* Lime Scale */
/* Green Scale */
/* Emerald Scale */
/* Teal Scale */
/* Cyan Scale */
/* Sky Scale */
/* Blue Scale */
/* Indigo Scale */
/* Violet Scale */
/* Purple Scale */
/* Fuchsia Scale */
/* Pink Scale */
/* Rose Scale */
/* Red Scale */
/* Orange Scale */
/* Amber Scale */
/* Yellow Scale */
/* White Variants */
/* Soft Colors */
/* Primary Brand Scale */
/* Border Radius */
/* Spacing Scale */
.promptList {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  height: 0px;
  align-items: center;
  background-color: white !important;
  position: relative;
}
body[data-theme=dark] .promptList {
  background-color: var(--color-zinc-900) !important;
}
@media (max-width: 768px) {
  .promptList {
    margin: 0;
    padding: 0;
  }
}
.promptList .conversationTitleHeader {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 40px 16px 40px;
  background-color: white;
  border-bottom: 1px solid var(--colorNeutralStroke2);
}
body[data-theme=dark] .promptList .conversationTitleHeader {
  background-color: var(--color-zinc-900) !important;
  border-bottom-color: var(--color-zinc-800) !important;
}
@media (max-width: 768px) {
  .promptList .conversationTitleHeader {
    padding: 16px 20px 12px 20px;
  }
}
.promptList .conversationTitleHeader .conversationTitle {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--colorNeutralForeground1);
  margin: 0;
  margin-left: -120px;
  text-align: left;
  max-width: 900px;
  width: 100%;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .promptList .conversationTitleHeader .conversationTitle {
    font-size: 1rem;
    margin-left: -60px;
  }
}
.promptList > div {
  width: 100%;
  max-width: 800px;
  /* Keep the same horizontal padding as DateSeparator so children align to the date bar */
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (max-width: 768px) {
  .promptList > div {
    width: 95%;
    max-width: 95%;
    padding-left: 0;
    padding-right: 0;
  }
}/*
** This file is generated from Fluent UI tokens.
** To regenerate the file run: yarn run fluentSass.
** Generate on: 28/06/2023 23:34:58
*/
/*
** Variables for color
*/
/*
** Variables for border
*/
/*
** Variables for font
*/
/*
** Variables for line
*/
/*
** Variables for shadow
*/
/*
** Variables for stroke
*/
/*
** Variables for spacing
*/
/*
** Variables for duration
*/
/*
** Variables for curve
*/
/*
** Custom color variables for SyGPT Application
** These extend the Fluent UI design tokens with additional color palettes
*/
/*
** CSS Custom Properties (CSS Variables)
** These can be overridden at runtime and support theming
*/
:root {
  /* Gray Scale */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-gray-ring-500: #c7c9cd;
  /* Slate Scale */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  /* Zinc Scale */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  /* Neutral Scale */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  /* Stone Scale */
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  /* Lime Scale */
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  /* Green Scale */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-green-ring-500: #c4ede8;
  /* Emerald Scale */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
  /* Teal Scale */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
  /* Cyan Scale */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
  /* Sky Scale */
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
  /* Blue Scale */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  /* Indigo Scale */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
  /* Violet Scale */
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
  /* Purple Scale */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
  /* Fuchsia Scale */
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
  /* Pink Scale */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  /* Rose Scale */
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
  /* Red Scale */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-red-ring-500: #fbd0d0;
  /* Orange Scale */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  /* Amber Scale */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
  /* Yellow Scale */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-yellow-ring-500: #f9ecc1;
  /* White Variants */
  --color-white-100pct: #ffffff;
  --color-white-10pct: #ffffff;
  --color-white-3pct: #ffffff;
  --color-white-5pct: #ffffff;
  --color-white-15pct: #ffffff;
  --color-white-20pct: #ffffff;
  --color-white-30pct: #ffffff;
  --color-white-40pct: #ffffff;
  --color-white-50pct: #ffffff;
  --color-white-60pct: #ffffff;
  --color-white-70pct: #ffffff;
  --color-white-80pct: #ffffff;
  --color-white-90pct: #ffffff;
  --color-white-1pct: #ffffff;
  /* Soft Colors */
  --color-soft-green: #115e59;
  --color-soft-blue: #1e40af;
  --color-soft-red: #991b1b;
  --color-soft-yellow: #854d0e;
  --color-soft-gray: #374151;
  /* Primary Brand Scale */
  --color-primary-50: #fff5f3;
  --color-primary-100: #ffebe6;
  --color-primary-200: #ffd7cc;
  --color-primary-300: #ffc3b3;
  --color-primary-400: #ffaf99;
  --color-primary-500: #ff5730;
  --color-primary-600: #e64a26;
  --color-primary-700: #cc3e1c;
  --color-primary-800: #b33113;
  --color-primary-900: #99250a;
  --color-primary-950: #801a05;
  --color-primary-ring-500: #ffcdc1;
  --color-primary-500-10pct: rgba(255, 87, 48, 0.1);
  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  /* Spacing Scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-17: 68px;
  --spacing-18: 72px;
  --spacing-19: 76px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
  --spacing-4-5: 18px;
  --spacing-5-5: 22px;
  --spacing-6-5: 26px;
  --spacing-7-5: 30px;
  --spacing-8-5: 34px;
  --spacing-9-5: 38px;
  --spacing-10-5: 42px;
  --spacing-11-5: 46px;
  --spacing-12-5: 50px;
  --spacing-13-5: 54px;
  --spacing-14-5: 58px;
  --spacing-15-5: 62px;
  --spacing-16-5: 66px;
  --spacing-17-5: 70px;
  --spacing-18-5: 74px;
  --spacing-19-5: 78px;
}
/*
** SCSS Variables for convenient usage in SCSS files
** These reference the CSS custom properties above
*/
/* Gray Scale */
/* Slate Scale */
/* Zinc Scale */
/* Neutral Scale */
/* Stone Scale */
/* Lime Scale */
/* Green Scale */
/* Emerald Scale */
/* Teal Scale */
/* Cyan Scale */
/* Sky Scale */
/* Blue Scale */
/* Indigo Scale */
/* Violet Scale */
/* Purple Scale */
/* Fuchsia Scale */
/* Pink Scale */
/* Rose Scale */
/* Red Scale */
/* Orange Scale */
/* Amber Scale */
/* Yellow Scale */
/* White Variants */
/* Soft Colors */
/* Primary Brand Scale */
/* Border Radius */
/* Spacing Scale */
.attachment-button-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.attachment-btn {
  min-width: auto;
  padding: 0;
}
/* Ensure hover state matches the upload icon button */
.attachment-btn:hover,
.attachment-button-row .ms-Button:hover .ms-Button-flexContainer,
.attachment-button-row .ms-Button:hover {
  background: transparent !important;
  color: inherit !important;
}
/* Icon button base to match upload icon background for the magic button only */
.attachment-btn {
  background: var(--components/button/soft/dark/bg-color, var(--color-gray-100)) !important;
  border-radius: var(--components/button/border-radius, 8px) !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Keep icon size consistent */
.attachment-button-row .ms-Button .ms-Button-flexContainer .ms-Icon,
.attachment-btn .ms-Icon {
  font-size: 16px !important;
}
/* wrapper that provides the rounded background like the upload button */
/* icon-bg intentionally omitted to avoid overriding upload button default styling *//*
** This file is generated from Fluent UI tokens.
** To regenerate the file run: yarn run fluentSass.
** Generate on: 28/06/2023 23:34:58
*/
/*
** Variables for color
*/
/*
** Variables for border
*/
/*
** Variables for font
*/
/*
** Variables for line
*/
/*
** Variables for shadow
*/
/*
** Variables for stroke
*/
/*
** Variables for spacing
*/
/*
** Variables for duration
*/
/*
** Variables for curve
*/
/*
** Custom color variables for SyGPT Application
** These extend the Fluent UI design tokens with additional color palettes
*/
/*
** CSS Custom Properties (CSS Variables)
** These can be overridden at runtime and support theming
*/
:root {
  /* Gray Scale */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-gray-ring-500: #c7c9cd;
  /* Slate Scale */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  /* Zinc Scale */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  /* Neutral Scale */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  /* Stone Scale */
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  /* Lime Scale */
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  /* Green Scale */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-green-ring-500: #c4ede8;
  /* Emerald Scale */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
  /* Teal Scale */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
  /* Cyan Scale */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
  /* Sky Scale */
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
  /* Blue Scale */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  /* Indigo Scale */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
  /* Violet Scale */
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
  /* Purple Scale */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
  /* Fuchsia Scale */
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
  /* Pink Scale */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  /* Rose Scale */
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
  /* Red Scale */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-red-ring-500: #fbd0d0;
  /* Orange Scale */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  /* Amber Scale */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
  /* Yellow Scale */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-yellow-ring-500: #f9ecc1;
  /* White Variants */
  --color-white-100pct: #ffffff;
  --color-white-10pct: #ffffff;
  --color-white-3pct: #ffffff;
  --color-white-5pct: #ffffff;
  --color-white-15pct: #ffffff;
  --color-white-20pct: #ffffff;
  --color-white-30pct: #ffffff;
  --color-white-40pct: #ffffff;
  --color-white-50pct: #ffffff;
  --color-white-60pct: #ffffff;
  --color-white-70pct: #ffffff;
  --color-white-80pct: #ffffff;
  --color-white-90pct: #ffffff;
  --color-white-1pct: #ffffff;
  /* Soft Colors */
  --color-soft-green: #115e59;
  --color-soft-blue: #1e40af;
  --color-soft-red: #991b1b;
  --color-soft-yellow: #854d0e;
  --color-soft-gray: #374151;
  /* Primary Brand Scale */
  --color-primary-50: #fff5f3;
  --color-primary-100: #ffebe6;
  --color-primary-200: #ffd7cc;
  --color-primary-300: #ffc3b3;
  --color-primary-400: #ffaf99;
  --color-primary-500: #ff5730;
  --color-primary-600: #e64a26;
  --color-primary-700: #cc3e1c;
  --color-primary-800: #b33113;
  --color-primary-900: #99250a;
  --color-primary-950: #801a05;
  --color-primary-ring-500: #ffcdc1;
  --color-primary-500-10pct: rgba(255, 87, 48, 0.1);
  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  /* Spacing Scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-17: 68px;
  --spacing-18: 72px;
  --spacing-19: 76px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
  --spacing-4-5: 18px;
  --spacing-5-5: 22px;
  --spacing-6-5: 26px;
  --spacing-7-5: 30px;
  --spacing-8-5: 34px;
  --spacing-9-5: 38px;
  --spacing-10-5: 42px;
  --spacing-11-5: 46px;
  --spacing-12-5: 50px;
  --spacing-13-5: 54px;
  --spacing-14-5: 58px;
  --spacing-15-5: 62px;
  --spacing-16-5: 66px;
  --spacing-17-5: 70px;
  --spacing-18-5: 74px;
  --spacing-19-5: 78px;
}
/*
** SCSS Variables for convenient usage in SCSS files
** These reference the CSS custom properties above
*/
/* Gray Scale */
/* Slate Scale */
/* Zinc Scale */
/* Neutral Scale */
/* Stone Scale */
/* Lime Scale */
/* Green Scale */
/* Emerald Scale */
/* Teal Scale */
/* Cyan Scale */
/* Sky Scale */
/* Blue Scale */
/* Indigo Scale */
/* Violet Scale */
/* Purple Scale */
/* Fuchsia Scale */
/* Pink Scale */
/* Rose Scale */
/* Red Scale */
/* Orange Scale */
/* Amber Scale */
/* Yellow Scale */
/* White Variants */
/* Soft Colors */
/* Primary Brand Scale */
/* Border Radius */
/* Spacing Scale */
.fui-MenuButton {
  background-color: var(--colorNeutralBackground3);
  border: none;
  border-radius: 8px;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  color: var(--colorNeutralForeground1);
  transition: background 0.2s;
}
.fui-MenuButton:active, .fui-MenuButton:focus-visible {
  background-color: var(--colorNeutralBackground3Hover);
}
html[data-theme=dark] .improve-prompt-btn.fui-MenuButton {
  background-color: #000 !important;
}/*
** Custom color variables for SyGPT Application
** These extend the Fluent UI design tokens with additional color palettes
*/
/*
** CSS Custom Properties (CSS Variables)
** These can be overridden at runtime and support theming
*/
:root {
  /* Gray Scale */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-gray-ring-500: #c7c9cd;
  /* Slate Scale */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  /* Zinc Scale */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  /* Neutral Scale */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  /* Stone Scale */
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  /* Lime Scale */
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  /* Green Scale */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-green-ring-500: #c4ede8;
  /* Emerald Scale */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
  /* Teal Scale */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
  /* Cyan Scale */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
  /* Sky Scale */
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
  /* Blue Scale */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  /* Indigo Scale */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
  /* Violet Scale */
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
  /* Purple Scale */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
  /* Fuchsia Scale */
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
  /* Pink Scale */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  /* Rose Scale */
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
  /* Red Scale */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-red-ring-500: #fbd0d0;
  /* Orange Scale */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  /* Amber Scale */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
  /* Yellow Scale */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-yellow-ring-500: #f9ecc1;
  /* White Variants */
  --color-white-100pct: #ffffff;
  --color-white-10pct: #ffffff;
  --color-white-3pct: #ffffff;
  --color-white-5pct: #ffffff;
  --color-white-15pct: #ffffff;
  --color-white-20pct: #ffffff;
  --color-white-30pct: #ffffff;
  --color-white-40pct: #ffffff;
  --color-white-50pct: #ffffff;
  --color-white-60pct: #ffffff;
  --color-white-70pct: #ffffff;
  --color-white-80pct: #ffffff;
  --color-white-90pct: #ffffff;
  --color-white-1pct: #ffffff;
  /* Soft Colors */
  --color-soft-green: #115e59;
  --color-soft-blue: #1e40af;
  --color-soft-red: #991b1b;
  --color-soft-yellow: #854d0e;
  --color-soft-gray: #374151;
  /* Primary Brand Scale */
  --color-primary-50: #fff5f3;
  --color-primary-100: #ffebe6;
  --color-primary-200: #ffd7cc;
  --color-primary-300: #ffc3b3;
  --color-primary-400: #ffaf99;
  --color-primary-500: #ff5730;
  --color-primary-600: #e64a26;
  --color-primary-700: #cc3e1c;
  --color-primary-800: #b33113;
  --color-primary-900: #99250a;
  --color-primary-950: #801a05;
  --color-primary-ring-500: #ffcdc1;
  --color-primary-500-10pct: rgba(255, 87, 48, 0.1);
  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  /* Spacing Scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-17: 68px;
  --spacing-18: 72px;
  --spacing-19: 76px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
  --spacing-4-5: 18px;
  --spacing-5-5: 22px;
  --spacing-6-5: 26px;
  --spacing-7-5: 30px;
  --spacing-8-5: 34px;
  --spacing-9-5: 38px;
  --spacing-10-5: 42px;
  --spacing-11-5: 46px;
  --spacing-12-5: 50px;
  --spacing-13-5: 54px;
  --spacing-14-5: 58px;
  --spacing-15-5: 62px;
  --spacing-16-5: 66px;
  --spacing-17-5: 70px;
  --spacing-18-5: 74px;
  --spacing-19-5: 78px;
}
/*
** SCSS Variables for convenient usage in SCSS files
** These reference the CSS custom properties above
*/
/* Gray Scale */
/* Slate Scale */
/* Zinc Scale */
/* Neutral Scale */
/* Stone Scale */
/* Lime Scale */
/* Green Scale */
/* Emerald Scale */
/* Teal Scale */
/* Cyan Scale */
/* Sky Scale */
/* Blue Scale */
/* Indigo Scale */
/* Violet Scale */
/* Purple Scale */
/* Fuchsia Scale */
/* Pink Scale */
/* Rose Scale */
/* Red Scale */
/* Orange Scale */
/* Amber Scale */
/* Yellow Scale */
/* White Variants */
/* Soft Colors */
/* Primary Brand Scale */
/* Border Radius */
/* Spacing Scale */
/* Menu popover styling to match Figma */
.sy-model-menu-popover {
  /* larger radius for a softer look */
  border-radius: 12px;
  padding: 6px;
  background: var(--color-white-100pct);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
  min-width: 200px;
  /* Ensure default text inherits the darker ghost button color */
  color: var(--color-gray-800) !important;
  overflow: hidden; /* make sure children don't overflow rounded corners */
}
.sy-model-menu-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sy-model-menu-item {
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Match SyButton ghost text color for stronger contrast */
  color: var(--color-gray-800) !important;
  font-size: 14px;
}
.sy-model-menu-item:hover {
  background-color: var(--color-gray-100);
  cursor: pointer;
}
.sy-model-menu-item[aria-checked=true],
.sy-model-menu-item.sy-selected {
  background-color: transparent !important;
  color: inherit !important;
}
.sy-model-menu-item .sy-model-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
  color: inherit; /* ensure label uses the menu item color */
}
.sy-model-menu-item .sy-model-item-check {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  color: inherit; /* check icon should match text color */
}
/* Dark theme adjustments */
body[data-theme=dark] .sy-model-trigger {
  background-color: var(--color-zinc-800) !important;
  color: var(--color-white-100pct) !important;
  /* Keep trigger background and text stable on hover in dark/night mode */
}
body[data-theme=dark] .sy-model-trigger:hover:not(:disabled) {
  background-color: var(--color-zinc-800) !important; /* same as non-hover to avoid visual shift */
}
body[data-theme=dark] .sy-model-menu-popover {
  background: var(--color-zinc-800) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
body[data-theme=dark] .sy-model-menu-item {
  background-color: transparent !important;
  color: var(--color-white-100pct) !important;
}
body[data-theme=dark] .sy-model-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
body[data-theme=dark] .sy-model-menu-item[aria-checked=true],
body[data-theme=dark] .sy-model-menu-item.sy-selected {
  color: var(--color-white-100pct) !important;
}
body[data-theme=dark] .fui-MenuPopover__popover {
  background: var(--color-zinc-800) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
body[data-theme=dark] .fui-MenuList {
  background: var(--color-zinc-800) !important;
  border-radius: inherit !important;
}
/* Global overrides for Fluent UI popover/list to ensure rounded corners in light theme as well */
.fui-MenuPopover__popover,
.sy-model-menu-popover {
  border-radius: 12px !important;
  overflow: hidden;
}
.fui-MenuList,
.sy-model-menu-list {
  border-radius: inherit;
}
.sy-model-trigger,
.sy-model-menu-item,
.sy-model-menu-item .sy-model-item-label {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 14px !important;
  line-height: 20px;
  font-weight: 400;
  border: none !important;
}
body[data-theme=dark] .sy-model-menu-item .sy-model-item-label {
  border: none !important;
}
/* Ensure the trigger label displays correctly and doesn't get hidden by icon wrappers */
.sy-model-trigger .sy-model-trigger-label {
  display: inline-block;
  max-width: 160px; /* leave room for chevron icon */
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
  font-size: 14px;
  color: var(--color-gray-900, #111827);
}
.sy-model-trigger .fui-Button__icon {
  margin-left: 4px; /* ensure spacing between label and chevron */
}
.sy-model-trigger .sy-model-trigger-label {
  color: var(--color-gray-900) !important;
}
body[data-theme=dark] .sy-model-trigger .sy-model-trigger-label {
  color: var(--color-zinc-300) !important;
}
.sy-model-trigger .fui-Button__icon svg,
.sy-model-trigger .fui-Button__icon svg path {
  color: black !important;
}
.sy-model-trigger {
  margin-right: 12px; /* space between model select and mic button */
}
body[data-theme=dark] .sy-model-trigger .fui-Button__icon svg,
body[data-theme=dark] .sy-model-trigger .fui-Button__icon svg path {
  color: white !important;
}
/* Light-theme concise override: target the Fluent button rendered with sy-model-trigger
   Use a very specific selector to override .sy-button-outline-plus:active backgrounds. */
body:not([data-theme=dark]) button.sy-button-outline-plus.sy-model-trigger:active,
body:not([data-theme=dark]) button.sy-button-outline-plus.sy-model-trigger[aria-expanded=true],
body:not([data-theme=dark]) button.sy-button-outline-plus.sy-model-trigger:focus {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}/*
** This file is generated from Fluent UI tokens.
** To regenerate the file run: yarn run fluentSass.
** Generate on: 28/06/2023 23:34:58
*/
/*
** Variables for color
*/
/*
** Variables for border
*/
/*
** Variables for font
*/
/*
** Variables for line
*/
/*
** Variables for shadow
*/
/*
** Variables for stroke
*/
/*
** Variables for spacing
*/
/*
** Variables for duration
*/
/*
** Variables for curve
*/
.pluginsContainer {
  margin: 0px 5px;
}
/*
** Custom color variables for SyGPT Application
** These extend the Fluent UI design tokens with additional color palettes
*/
/*
** CSS Custom Properties (CSS Variables)
** These can be overridden at runtime and support theming
*/
:root {
  /* Gray Scale */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-gray-ring-500: #c7c9cd;
  /* Slate Scale */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  /* Zinc Scale */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  /* Neutral Scale */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  /* Stone Scale */
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  /* Lime Scale */
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  /* Green Scale */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-green-ring-500: #c4ede8;
  /* Emerald Scale */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
  /* Teal Scale */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
  /* Cyan Scale */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
  /* Sky Scale */
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
  /* Blue Scale */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  /* Indigo Scale */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
  /* Violet Scale */
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
  /* Purple Scale */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
  /* Fuchsia Scale */
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
  /* Pink Scale */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  /* Rose Scale */
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
  /* Red Scale */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-red-ring-500: #fbd0d0;
  /* Orange Scale */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  /* Amber Scale */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
  /* Yellow Scale */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-yellow-ring-500: #f9ecc1;
  /* White Variants */
  --color-white-100pct: #ffffff;
  --color-white-10pct: #ffffff;
  --color-white-3pct: #ffffff;
  --color-white-5pct: #ffffff;
  --color-white-15pct: #ffffff;
  --color-white-20pct: #ffffff;
  --color-white-30pct: #ffffff;
  --color-white-40pct: #ffffff;
  --color-white-50pct: #ffffff;
  --color-white-60pct: #ffffff;
  --color-white-70pct: #ffffff;
  --color-white-80pct: #ffffff;
  --color-white-90pct: #ffffff;
  --color-white-1pct: #ffffff;
  /* Soft Colors */
  --color-soft-green: #115e59;
  --color-soft-blue: #1e40af;
  --color-soft-red: #991b1b;
  --color-soft-yellow: #854d0e;
  --color-soft-gray: #374151;
  /* Primary Brand Scale */
  --color-primary-50: #fff5f3;
  --color-primary-100: #ffebe6;
  --color-primary-200: #ffd7cc;
  --color-primary-300: #ffc3b3;
  --color-primary-400: #ffaf99;
  --color-primary-500: #ff5730;
  --color-primary-600: #e64a26;
  --color-primary-700: #cc3e1c;
  --color-primary-800: #b33113;
  --color-primary-900: #99250a;
  --color-primary-950: #801a05;
  --color-primary-ring-500: #ffcdc1;
  --color-primary-500-10pct: rgba(255, 87, 48, 0.1);
  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  /* Spacing Scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-17: 68px;
  --spacing-18: 72px;
  --spacing-19: 76px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
  --spacing-4-5: 18px;
  --spacing-5-5: 22px;
  --spacing-6-5: 26px;
  --spacing-7-5: 30px;
  --spacing-8-5: 34px;
  --spacing-9-5: 38px;
  --spacing-10-5: 42px;
  --spacing-11-5: 46px;
  --spacing-12-5: 50px;
  --spacing-13-5: 54px;
  --spacing-14-5: 58px;
  --spacing-15-5: 62px;
  --spacing-16-5: 66px;
  --spacing-17-5: 70px;
  --spacing-18-5: 74px;
  --spacing-19-5: 78px;
}
/*
** SCSS Variables for convenient usage in SCSS files
** These reference the CSS custom properties above
*/
/* Gray Scale */
/* Slate Scale */
/* Zinc Scale */
/* Neutral Scale */
/* Stone Scale */
/* Lime Scale */
/* Green Scale */
/* Emerald Scale */
/* Teal Scale */
/* Cyan Scale */
/* Sky Scale */
/* Blue Scale */
/* Indigo Scale */
/* Violet Scale */
/* Purple Scale */
/* Fuchsia Scale */
/* Pink Scale */
/* Rose Scale */
/* Red Scale */
/* Orange Scale */
/* Amber Scale */
/* Yellow Scale */
/* White Variants */
/* Soft Colors */
/* Primary Brand Scale */
/* Border Radius */
/* Spacing Scale */
.sy-lang-btn-arrow {
  color: var(--color-primary-500);
}
:root .sy-lang-btn-arrow {
  color: var(--color-primary-500);
}
.fui-FluentProvider--colorScheme-dark .sy-lang-btn-arrow,
body[data-theme=dark] .sy-lang-btn-arrow {
  color: var(--color-zinc-400) !important;
}
.sy-lang-btn-border .sy-lang-btn-label {
  color: var(--color-primary-500);
}
:root .sy-lang-btn-border .sy-lang-btn-label {
  color: var(--color-primary-500);
}
.fui-FluentProvider--colorScheme-dark .sy-lang-btn-border .sy-lang-btn-label,
body[data-theme=dark] .sy-lang-btn-border .sy-lang-btn-label {
  color: var(--color-zinc-400) !important;
}
/* Apply orange outline styling to the conversation SplitButton */
.conversation-btn.fui-SplitButton .fui-SplitButton__primaryActionButton {
  color: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}
.conversation-btn.fui-SplitButton .fui-SplitButton__primaryActionButton:hover:not(:disabled) {
  color: var(--color-primary-600) !important;
  border-color: var(--color-primary-600) !important;
  background-color: transparent !important;
}
.conversation-btn.fui-SplitButton .fui-SplitButton__primaryActionButton:active:not(:disabled) {
  color: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
  background-color: rgba(255, 87, 48, 0.1) !important;
}
.conversation-btn.fui-SplitButton .fui-SplitButton__menuButton {
  color: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}
.conversation-btn.fui-SplitButton .fui-SplitButton__menuButton:hover:not(:disabled) {
  color: var(--color-primary-600) !important;
  border-color: var(--color-primary-600) !important;
  background-color: transparent !important;
}
.conversation-btn.fui-SplitButton .fui-SplitButton__menuButton:active:not(:disabled) {
  color: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
  background-color: rgba(255, 87, 48, 0.1) !important;
}
/* Dark mode for conversation SplitButton */
.fui-FluentProvider--colorScheme-dark .conversation-btn.fui-SplitButton .fui-SplitButton__primaryActionButton,
body[data-theme=dark] .conversation-btn.fui-SplitButton .fui-SplitButton__primaryActionButton {
  color: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}
.fui-FluentProvider--colorScheme-dark .conversation-btn.fui-SplitButton .fui-SplitButton__menuButton,
body[data-theme=dark] .conversation-btn.fui-SplitButton .fui-SplitButton__menuButton {
  color: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}
/* Orange border for language selection button (jour) et gris (nuit) */
.sy-lang-btn-border {
  border-color: var(--color-zinc-400) !important;
}
:root .sy-lang-btn-border {
  /* Mode jour (light) : orange */
  border-color: var(--color-primary-500) !important;
}
.fui-FluentProvider--colorScheme-dark .sy-lang-btn-border,
body[data-theme=dark] .sy-lang-btn-border {
  /* Mode nuit (dark) : zinc */
  border-color: var(--color-zinc-400) !important;
}
.sy-mic-btn-border {
  border-color: var(--color-zinc-400) !important;
}
/* Force mic button border gray in dark mode, override outline button orange */
body[data-theme=dark] .sy-mic-btn-border.sy-button-outline-plus.fui-Button,
.fui-FluentProvider--colorScheme-dark .sy-mic-btn-border.sy-button-outline-plus.fui-Button {
  border-color: var(--color-zinc-400) !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Supprime toute règle orange héritée en mode dark */
/* FORCE la couleur du contour micro en mode dark, écrase tout héritage */
body[data-theme=dark] .sy-mic-btn-border,
.fui-FluentProvider--colorScheme-dark .sy-mic-btn-border {
  border-color: var(--color-zinc-400) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.fui-FluentProvider--colorScheme-dark .sy-mic-btn-border,
body[data-theme=dark] .sy-mic-btn-border {
  /* Mode nuit (dark) : gris identique à l'icône micro, sans orange */
  border-color: var(--color-zinc-400) !important;
  background: transparent !important;
}
.sy-mic-btn-icon {
  color: var(--color-zinc-600) !important;
}
.sy-mic-btn-border svg {
  min-width: 20px !important;
  min-height: 20px !important;
}
.sy-send-btn-border svg {
  min-width: 20px !important;
  min-height: 20px !important;
}
:root .sy-mic-btn-icon {
  color: var(--color-primary-500) !important;
}
.fui-FluentProvider--colorScheme-dark .sy-mic-btn-icon,
body[data-theme=dark] .sy-mic-btn-icon {
  color: var(--color-zinc-400) !important;
}
:root .sy-send-btn-border {
  /* Mode jour (light) : orange */
  margin-left: 12px;
  border: 0px !important;
}
.sy-send-btn-icon {
  color: var(--color-zinc-400) !important;
}
:root .sy-send-btn-icon {
  color: var(--color-primary-500) !important;
}
.fui-FluentProvider--colorScheme-dark .sy-send-btn-icon,
body[data-theme=dark] .sy-send-btn-icon {
  color: var(--color-zinc-400) !important;
}
@media (min-width: 1024px) {
  .conversation-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .conversation-btn .fui-SplitButton__menuButton {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 40px; /* or match your icon button height */
    display: flex;
    align-items: center;
  }
  .conversation-btn .fui-SplitButton__menuButton .fui-Text {
    line-height: 1.2;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
}/*
** This file is generated from Fluent UI tokens.
** To regenerate the file run: yarn run fluentSass.
** Generate on: 28/06/2023 23:34:58
*/
/*
** Variables for color
*/
/*
** Variables for border
*/
/*
** Variables for font
*/
/*
** Variables for line
*/
/*
** Variables for shadow
*/
/*
** Variables for stroke
*/
/*
** Variables for spacing
*/
/*
** Variables for duration
*/
/*
** Variables for curve
*/
/*
** Custom color variables for SyGPT Application
** These extend the Fluent UI design tokens with additional color palettes
*/
/*
** CSS Custom Properties (CSS Variables)
** These can be overridden at runtime and support theming
*/
:root {
  /* Gray Scale */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-gray-ring-500: #c7c9cd;
  /* Slate Scale */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  /* Zinc Scale */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  /* Neutral Scale */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  /* Stone Scale */
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  /* Lime Scale */
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  /* Green Scale */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-green-ring-500: #c4ede8;
  /* Emerald Scale */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
  /* Teal Scale */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
  /* Cyan Scale */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
  /* Sky Scale */
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
  /* Blue Scale */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  /* Indigo Scale */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
  /* Violet Scale */
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
  /* Purple Scale */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
  /* Fuchsia Scale */
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
  /* Pink Scale */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  /* Rose Scale */
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
  /* Red Scale */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-red-ring-500: #fbd0d0;
  /* Orange Scale */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  /* Amber Scale */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
  /* Yellow Scale */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-yellow-ring-500: #f9ecc1;
  /* White Variants */
  --color-white-100pct: #ffffff;
  --color-white-10pct: #ffffff;
  --color-white-3pct: #ffffff;
  --color-white-5pct: #ffffff;
  --color-white-15pct: #ffffff;
  --color-white-20pct: #ffffff;
  --color-white-30pct: #ffffff;
  --color-white-40pct: #ffffff;
  --color-white-50pct: #ffffff;
  --color-white-60pct: #ffffff;
  --color-white-70pct: #ffffff;
  --color-white-80pct: #ffffff;
  --color-white-90pct: #ffffff;
  --color-white-1pct: #ffffff;
  /* Soft Colors */
  --color-soft-green: #115e59;
  --color-soft-blue: #1e40af;
  --color-soft-red: #991b1b;
  --color-soft-yellow: #854d0e;
  --color-soft-gray: #374151;
  /* Primary Brand Scale */
  --color-primary-50: #fff5f3;
  --color-primary-100: #ffebe6;
  --color-primary-200: #ffd7cc;
  --color-primary-300: #ffc3b3;
  --color-primary-400: #ffaf99;
  --color-primary-500: #ff5730;
  --color-primary-600: #e64a26;
  --color-primary-700: #cc3e1c;
  --color-primary-800: #b33113;
  --color-primary-900: #99250a;
  --color-primary-950: #801a05;
  --color-primary-ring-500: #ffcdc1;
  --color-primary-500-10pct: rgba(255, 87, 48, 0.1);
  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  /* Spacing Scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-17: 68px;
  --spacing-18: 72px;
  --spacing-19: 76px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
  --spacing-4-5: 18px;
  --spacing-5-5: 22px;
  --spacing-6-5: 26px;
  --spacing-7-5: 30px;
  --spacing-8-5: 34px;
  --spacing-9-5: 38px;
  --spacing-10-5: 42px;
  --spacing-11-5: 46px;
  --spacing-12-5: 50px;
  --spacing-13-5: 54px;
  --spacing-14-5: 58px;
  --spacing-15-5: 62px;
  --spacing-16-5: 66px;
  --spacing-17-5: 70px;
  --spacing-18-5: 74px;
  --spacing-19-5: 78px;
}
/*
** SCSS Variables for convenient usage in SCSS files
** These reference the CSS custom properties above
*/
/* Gray Scale */
/* Slate Scale */
/* Zinc Scale */
/* Neutral Scale */
/* Stone Scale */
/* Lime Scale */
/* Green Scale */
/* Emerald Scale */
/* Teal Scale */
/* Cyan Scale */
/* Sky Scale */
/* Blue Scale */
/* Indigo Scale */
/* Violet Scale */
/* Purple Scale */
/* Fuchsia Scale */
/* Pink Scale */
/* Rose Scale */
/* Red Scale */
/* Orange Scale */
/* Amber Scale */
/* Yellow Scale */
/* White Variants */
/* Soft Colors */
/* Primary Brand Scale */
/* Border Radius */
/* Spacing Scale */
body[data-theme=dark] .feature-popup-buttons {
  background: #232326 !important;
}
.userQuery {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  /* small visual gap between messages and input - tightened to remove large gap */
  margin-top: 0px !important;
  margin-bottom: 0 !important;
}
@media (max-width: 768px) {
  .userQuery {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}
.userQuery .input-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-grow: 1;
  max-width: 960px;
  width: 100%;
}
@media (max-width: 768px) {
  .userQuery .input-container {
    min-height: 76px; /* padding (18+18) + editor 40px = ~76px to show 2 lines */
    /* allow the input-box to clamp using inline max-height and scroll internally when overflowing */
    overflow: hidden;
    max-width: 95%;
  }
}
@media (max-width: 480px) {
  .userQuery .input-container {
    margin-bottom: 0px !important;
  }
}
.userQuery .input-box {
  display: flex;
  flex-direction: column;
  background: var(--colorNeutralBackground1);
  border: 1px solid var(--color-gray-200);
  border-radius: 13px;
  /* reduce right padding so editor can reach closer to the action buttons */
  padding: 18px 20px 16px 20px;
  /* Make the input box auto-size but keep a minimum height that matches ~2 lines of text
      When attachments are present the attachments container will expand below while the editor stays 2 lines */
  box-sizing: border-box;
  overflow-y: auto;
  min-height: 150px; /* reduced to bring prompt box closer */
  margin-top: 0 !important;
  position: relative;
  transition: all 0.2s ease;
  overflow: visible;
}
body[data-theme=dark] .userQuery .input-box {
  background: var(--color-zinc-800);
  border: 1px solid var(--color-zinc-700); /* enforce requested border color in dark mode */
}
.userQuery .input-box {
  /* iPhone 16 Pro portrait (narrower) - use 342px width */
}
@media (min-width: 390px) and (max-width: 399px) {
  .userQuery .input-box {
    width: 342px !important;
    max-width: 342px !important;
    padding: 10px 16px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
.userQuery .input-box {
  /* iPhone 16 Pro Max portrait (wider) - use 382px width */
}
@media (min-width: 400px) and (max-width: 480px) {
  .userQuery .input-box {
    width: 382px !important;
    max-width: 382px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
.userQuery .input-box.dragging-over {
  outline: 2px dashed var(--colorBrandStroke1);
  background-color: rgba(0, 120, 212, 0.05);
}
.userQuery .input-box .content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 32px; /* adds horizontal breathing room so buttons don't touch text */
  overflow-y: auto;
  flex-grow: 1;
  position: relative;
}
.userQuery .input-box .content .drop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 100;
  pointer-events: none;
}
.userQuery .input-box .content .drop-message {
  font-size: 16px;
  font-weight: 500;
  color: var(--colorBrandForeground1);
  padding: 12px 20px;
  border-radius: 4px;
  background-color: rgba(0, 120, 212, 0.1);
  border: 1px solid var(--colorBrandStroke1);
}
.userQuery .input-box .content .lexicaleditor {
  flex-grow: 1;
  /* Let the contenteditable grow; the parent `.input-box` will handle scrolling when capped */
  overflow-y: visible;
  overflow-x: hidden;
  max-height: none;
  resize: none;
  outline: none;
  font-family: var(--DefaultFontFamily);
  font-size: 14px;
  line-height: 20px;
  border: transparent;
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
}
body[data-theme=dark] .userQuery .input-box .content .lexicaleditor {
  background-color: var(--color-zinc-800);
  /* Use page/description color so typed text matches response text in dark mode */
  color: var(--section-description-color, #FFFFFF);
}
.userQuery .input-box .content .lexicaleditor::after {
  border-bottom: 0px solid transparent !important;
  transform: none !important;
  transition-property: none !important;
}
.userQuery .input-box .content .lexicaleditor .lexical-editor-container {
  width: 100%;
  min-width: 0; /* allow flex children to shrink/grow correctly */
}
.userQuery .input-box .content .lexicaleditor .lexical-content-editable {
  border: transparent;
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  min-height: 20px;
  padding: var(--spacing-0);
  font-size: var(--font-size-base);
  font-family: var(--font-family-body);
  line-height: 0.5;
  height: auto;
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}
body[data-theme=dark] .userQuery .input-box .content .lexicaleditor .lexical-content-editable {
  background-color: var(--color-zinc-800);
  /* Use page/description color so typed text matches response text in dark mode */
  color: var(--section-description-color, #FFFFFF);
}
.userQuery .input-box .content .lexicaleditor .lexical-content-editable {
  max-height: none; /* parent controls the cap */
  padding: 0;
  width: 100%;
  min-width: 0; /* ensure contenteditable can use full width inside flex */
  overflow: visible;
}
.userQuery .input-box .content .lexicaleditor {
  /* Visually hide scrollbars but keep scrolling functional */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.userQuery .input-box .content .lexicaleditor::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* Chrome/Safari/Opera */
}
.userQuery .input-box .content .lexicaleditor .lexical-content-editable:focus {
  border: transparent;
  box-shadow: none;
}
.userQuery .input-box .content .lexicaleditor .lexical-placeholder {
  color: var(--color-gray-400);
  font-family: var(--font-family-body);
  font-size: 1rem;
  line-height: 1.5;
  top: 0;
  left: 0;
}
body[data-theme=dark] .userQuery .input-box .content .lexicaleditor .lexical-placeholder {
  color: var(--color-gray-500);
}
.userQuery .input-box .content .attachmentsContainer {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  /* When a single file is attached, show it on one line without scroll. If multiple, allow wrapping up to 2 lines. */
  max-height: 5rem; /* typically one or two tag rows */
  min-height: 2.5rem;
  flex-wrap: wrap;
  /* Allow vertical scrolling only if many attachments; prevent horizontal scrolling */
  overflow-y: auto;
  overflow-x: hidden;
  /* For single-file display prefer truncation with ellipsis to avoid wrapping into many lines */
}
.userQuery .input-box .content .attachmentsContainer .fui-InteractionTag__primary,
.userQuery .input-box .content .attachmentsContainer .fui-InteractionTag__content,
.userQuery .input-box .content .attachmentsContainer .fui-InteractionTag__text,
.userQuery .input-box .content .attachmentsContainer InteractionTagPrimary,
.userQuery .input-box .content .attachmentsContainer InteractionTagSecondary {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100%;
}
.userQuery .input-box .content .attachmentsContainer {
  /* InteractionTag elements are inline-flex by default; ensure they don't force parent widen */
}
.userQuery .input-box .content .attachmentsContainer > * {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0; /* allow shrinking */
}
.userQuery .input-box .content .warning {
  white-space: initial;
}
.userQuery .input-box .button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 0px;
  overflow: visible;
}
.userQuery .input-box .button-row .button-group-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.userQuery .input-box .button-row .button-group-left .feature-popup-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap; /* prevent vertical stacking */
  background: var(--components-button-soft-dark-bg-color, #f3f4f6);
  border-radius: 8px;
  padding: 0;
}
.userQuery .input-box .button-row .button-group-left {
  /* Stronger rules to prevent popup internals or parent styles from forcing vertical layout */
}
.userQuery .input-box .button-row .button-group-left > .feature-popup-buttons,
.userQuery .input-box .button-row .button-group-left .feature-popup-buttons {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
.userQuery .input-box .button-row .button-group-left .feature-popup-buttons > * {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  margin-right: 8px;
}
.userQuery .input-box .button-row .button-group-left .feature-popup-buttons > *:last-child {
  margin-right: 0;
}
.userQuery .input-box .button-row .button-group-left .pluginsContainer {
  margin: 0;
}
.userQuery .input-box .button-row .button-group-left .pluginsContainer button {
  background-color: var(--colorNeutralBackground3);
  border: none;
  border-radius: 8px;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colorNeutralForeground1);
}
.userQuery .input-box .button-row .button-group-left .pluginsContainer button:hover {
  background-color: var(--colorNeutralBackground3Hover);
}
.userQuery .input-box .button-row .button-group-left button[class*=MenuButton] {
  background-color: var(--colorNeutralBackground3);
  border: none;
  border-radius: 8px;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  color: var(--colorNeutralForeground1);
}
.userQuery .input-box .button-row .button-group-left button[class*=MenuButton]:hover {
  background-color: var(--colorNeutralBackground3Hover);
}
.userQuery .input-box .button-row .button-group-right {
  display: flex;
  align-items: center;
  gap: 12px; /* ensure 12px spacing between model selector and mic/send buttons */
  margin-left: auto;
}
.userQuery .input-box .button-row .button-group-right > div:not(.conversation-btn) button {
  width: auto !important;
  height: auto !important;
  min-width: auto !important;
  padding: 5px 10px !important;
  border-radius: 4px !important;
}
.userQuery .input-box .button-row .button-group-right .conversation-btn button,
.userQuery .input-box .button-row .button-group-right > div button {
  border-radius: 8px;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
}
.userQuery .input-box .button-row .button-group-right .conversation-btn button.fui-SplitButton__primaryActionButton,
.userQuery .input-box .button-row .button-group-right > div button.fui-SplitButton__primaryActionButton {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.userQuery .input-box .button-row .button-group-right .conversation-btn button.fui-SplitButton__menuButton,
.userQuery .input-box .button-row .button-group-right > div button.fui-SplitButton__menuButton {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  height: 38px;
  min-height: 38px;
  padding: 0 8px;
}
/* Logo Syensqo centré et responsive */
.welcome-logo {
  width: 135px;
  height: 44px;
  max-width: 60vw;
  display: block;
  margin: 18px auto 8px auto;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 70px;
  margin-bottom: 20px;
  gap: 0;
}
@media (max-width: 768px) {
  .container {
    padding-top: 50px;
    gap: 0;
    width: 95%;
    max-width: 95%;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  .container > * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

.welcome-title {
  font-size: 30px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  font-weight: 800;
  color: var(--color-gray-900);
  margin: 0; /* remove default h1 margins so vertical centering works */
}
@media (max-width: 768px) {
  .welcome-title {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
}
.welcome-title {
  /* iPhone classic / narrow mobiles (e.g. devices ~390-399px) - slightly larger title */
}
@media (min-width: 390px) and (max-width: 480px) {
  .welcome-title {
    font-size: 1.5rem !important;
  }
}

/* Inline row for logo and title */
.welcome-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.welcome-gpt-row {
  display: contents;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.welcome-gpt-icon {
  width: 30px;
  height: 30px;
  /* DarkModeIcon component handles theme-based filtering automatically */
}

.welcome-gpt-title {
  font-size: 1.5rem;
  margin: 1rem 0 0 0;
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.25;
}
@media (max-width: 768px) {
  .welcome-gpt-title {
    font-size: 1.25rem;
    line-height: 1.25;
  }
}

.welcome-gpt-description {
  text-align: center;
  font-size: 1rem;
  margin: 1rem 0 0 0;
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-gray-500);
}
@media (max-width: 768px) {
  .welcome-gpt-description {
    font-size: 0.875rem;
    line-height: 1.25;
  }
}

.inline-logo {
  display: inline-block;
  width: 32px;
  height: 48px;
  margin: 0;
  object-fit: contain;
  align-self: center;
  vertical-align: middle;
}

.inline-title {
  display: flex;
  align-items: center;
  text-align: left;
  vertical-align: middle;
  margin-bottom: 0;
  gap: var(--spacing-2);
  font-weight: 800;
}

/* Ensure LargeTitle inside welcome-row doesn't keep its negative bottom margin */
.welcome-row .welcome-title {
  margin-bottom: 0 !important;
  line-height: 1.1;
}

body[data-theme=dark] .welcome-title,
body[data-theme=dark] .inline-title,
body[data-theme=dark] .welcome-gpt-title {
  color: var(--color-white-100pct) !important;
}/*
** Custom color variables for SyGPT Application
** These extend the Fluent UI design tokens with additional color palettes
*/
/*
** CSS Custom Properties (CSS Variables)
** These can be overridden at runtime and support theming
*/
:root {
  /* Gray Scale */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-gray-ring-500: #c7c9cd;
  /* Slate Scale */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  /* Zinc Scale */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  /* Neutral Scale */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  /* Stone Scale */
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  /* Lime Scale */
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  /* Green Scale */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-green-ring-500: #c4ede8;
  /* Emerald Scale */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
  /* Teal Scale */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
  /* Cyan Scale */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
  /* Sky Scale */
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
  /* Blue Scale */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  /* Indigo Scale */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
  /* Violet Scale */
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
  /* Purple Scale */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
  /* Fuchsia Scale */
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
  /* Pink Scale */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  /* Rose Scale */
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
  /* Red Scale */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-red-ring-500: #fbd0d0;
  /* Orange Scale */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  /* Amber Scale */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
  /* Yellow Scale */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-yellow-ring-500: #f9ecc1;
  /* White Variants */
  --color-white-100pct: #ffffff;
  --color-white-10pct: #ffffff;
  --color-white-3pct: #ffffff;
  --color-white-5pct: #ffffff;
  --color-white-15pct: #ffffff;
  --color-white-20pct: #ffffff;
  --color-white-30pct: #ffffff;
  --color-white-40pct: #ffffff;
  --color-white-50pct: #ffffff;
  --color-white-60pct: #ffffff;
  --color-white-70pct: #ffffff;
  --color-white-80pct: #ffffff;
  --color-white-90pct: #ffffff;
  --color-white-1pct: #ffffff;
  /* Soft Colors */
  --color-soft-green: #115e59;
  --color-soft-blue: #1e40af;
  --color-soft-red: #991b1b;
  --color-soft-yellow: #854d0e;
  --color-soft-gray: #374151;
  /* Primary Brand Scale */
  --color-primary-50: #fff5f3;
  --color-primary-100: #ffebe6;
  --color-primary-200: #ffd7cc;
  --color-primary-300: #ffc3b3;
  --color-primary-400: #ffaf99;
  --color-primary-500: #ff5730;
  --color-primary-600: #e64a26;
  --color-primary-700: #cc3e1c;
  --color-primary-800: #b33113;
  --color-primary-900: #99250a;
  --color-primary-950: #801a05;
  --color-primary-ring-500: #ffcdc1;
  --color-primary-500-10pct: rgba(255, 87, 48, 0.1);
  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  /* Spacing Scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-17: 68px;
  --spacing-18: 72px;
  --spacing-19: 76px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
  --spacing-4-5: 18px;
  --spacing-5-5: 22px;
  --spacing-6-5: 26px;
  --spacing-7-5: 30px;
  --spacing-8-5: 34px;
  --spacing-9-5: 38px;
  --spacing-10-5: 42px;
  --spacing-11-5: 46px;
  --spacing-12-5: 50px;
  --spacing-13-5: 54px;
  --spacing-14-5: 58px;
  --spacing-15-5: 62px;
  --spacing-16-5: 66px;
  --spacing-17-5: 70px;
  --spacing-18-5: 74px;
  --spacing-19-5: 78px;
}
/*
** SCSS Variables for convenient usage in SCSS files
** These reference the CSS custom properties above
*/
/* Gray Scale */
/* Slate Scale */
/* Zinc Scale */
/* Neutral Scale */
/* Stone Scale */
/* Lime Scale */
/* Green Scale */
/* Emerald Scale */
/* Teal Scale */
/* Cyan Scale */
/* Sky Scale */
/* Blue Scale */
/* Indigo Scale */
/* Violet Scale */
/* Purple Scale */
/* Fuchsia Scale */
/* Pink Scale */
/* Rose Scale */
/* Red Scale */
/* Orange Scale */
/* Amber Scale */
/* Yellow Scale */
/* White Variants */
/* Soft Colors */
/* Primary Brand Scale */
/* Border Radius */
/* Spacing Scale */
.gpt-message-bar {
  max-width: 800px;
}
@media (max-width: 768px) {
  .gpt-message-bar {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
}
.gpt-message-bar__body {
  display: flex;
  flex-direction: row;
  padding: var(--spacing-3) var(--spacing-3);
  gap: 10px;
}
@media (max-width: 768px) {
  .gpt-message-bar__body {
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-3) var(--spacing-2);
    flex-wrap: wrap;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}
.gpt-message-bar__title {
  align-content: center;
}
@media (max-width: 768px) {
  .gpt-message-bar__title {
    flex-shrink: 0;
  }
}
@media (max-width: 768px) {
  .gpt-message-bar__markdown {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}/*
** Custom color variables for SyGPT Application
** These extend the Fluent UI design tokens with additional color palettes
*/
/*
** CSS Custom Properties (CSS Variables)
** These can be overridden at runtime and support theming
*/
:root {
  /* Gray Scale */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-gray-ring-500: #c7c9cd;
  /* Slate Scale */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  /* Zinc Scale */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  /* Neutral Scale */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  /* Stone Scale */
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  /* Lime Scale */
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  /* Green Scale */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-green-ring-500: #c4ede8;
  /* Emerald Scale */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
  /* Teal Scale */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
  /* Cyan Scale */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
  /* Sky Scale */
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
  /* Blue Scale */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  /* Indigo Scale */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
  /* Violet Scale */
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
  /* Purple Scale */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
  /* Fuchsia Scale */
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
  /* Pink Scale */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  /* Rose Scale */
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
  /* Red Scale */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-red-ring-500: #fbd0d0;
  /* Orange Scale */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  /* Amber Scale */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
  /* Yellow Scale */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-yellow-ring-500: #f9ecc1;
  /* White Variants */
  --color-white-100pct: #ffffff;
  --color-white-10pct: #ffffff;
  --color-white-3pct: #ffffff;
  --color-white-5pct: #ffffff;
  --color-white-15pct: #ffffff;
  --color-white-20pct: #ffffff;
  --color-white-30pct: #ffffff;
  --color-white-40pct: #ffffff;
  --color-white-50pct: #ffffff;
  --color-white-60pct: #ffffff;
  --color-white-70pct: #ffffff;
  --color-white-80pct: #ffffff;
  --color-white-90pct: #ffffff;
  --color-white-1pct: #ffffff;
  /* Soft Colors */
  --color-soft-green: #115e59;
  --color-soft-blue: #1e40af;
  --color-soft-red: #991b1b;
  --color-soft-yellow: #854d0e;
  --color-soft-gray: #374151;
  /* Primary Brand Scale */
  --color-primary-50: #fff5f3;
  --color-primary-100: #ffebe6;
  --color-primary-200: #ffd7cc;
  --color-primary-300: #ffc3b3;
  --color-primary-400: #ffaf99;
  --color-primary-500: #ff5730;
  --color-primary-600: #e64a26;
  --color-primary-700: #cc3e1c;
  --color-primary-800: #b33113;
  --color-primary-900: #99250a;
  --color-primary-950: #801a05;
  --color-primary-ring-500: #ffcdc1;
  --color-primary-500-10pct: rgba(255, 87, 48, 0.1);
  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  /* Spacing Scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-17: 68px;
  --spacing-18: 72px;
  --spacing-19: 76px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
  --spacing-4-5: 18px;
  --spacing-5-5: 22px;
  --spacing-6-5: 26px;
  --spacing-7-5: 30px;
  --spacing-8-5: 34px;
  --spacing-9-5: 38px;
  --spacing-10-5: 42px;
  --spacing-11-5: 46px;
  --spacing-12-5: 50px;
  --spacing-13-5: 54px;
  --spacing-14-5: 58px;
  --spacing-15-5: 62px;
  --spacing-16-5: 66px;
  --spacing-17-5: 70px;
  --spacing-18-5: 74px;
  --spacing-19-5: 78px;
}
/*
** SCSS Variables for convenient usage in SCSS files
** These reference the CSS custom properties above
*/
/* Gray Scale */
/* Slate Scale */
/* Zinc Scale */
/* Neutral Scale */
/* Stone Scale */
/* Lime Scale */
/* Green Scale */
/* Emerald Scale */
/* Teal Scale */
/* Cyan Scale */
/* Sky Scale */
/* Blue Scale */
/* Indigo Scale */
/* Violet Scale */
/* Purple Scale */
/* Fuchsia Scale */
/* Pink Scale */
/* Rose Scale */
/* Red Scale */
/* Orange Scale */
/* Amber Scale */
/* Yellow Scale */
/* White Variants */
/* Soft Colors */
/* Primary Brand Scale */
/* Border Radius */
/* Spacing Scale */
.conversation-context-menu {
  /* Position comes from CSS variables set by the component */
  position: fixed;
  top: var(--menu-top, 0px);
  left: var(--menu-left, 0px);
  min-width: 220px;
  background-color: var(--color-white-100pct);
  border-radius: var(--radius-xl);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
  padding: var(--spacing-3) 0;
  display: flex;
  flex-direction: column;
  z-index: 9999;
}
/* Dark mode: use zinc-800 background and white text for the context menu */
body[data-theme=dark] .conversation-context-menu,
.fui-FluentProvider--colorScheme-dark .conversation-context-menu {
  background-color: var(--color-zinc-800) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.conversation-context-menu__item {
  padding: var(--spacing-2) var(--spacing-6);
  cursor: pointer;
  color: var(--color-gray-800);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}
.conversation-context-menu__item:hover {
  background-color: var(--color-gray-100);
}
.conversation-context-menu__item:active {
  background-color: var(--color-gray-200);
}
.conversation-context-menu__item--delete {
  color: var(--color-red-500);
}
/* Dark mode item colors */
body[data-theme=dark] .conversation-context-menu__item,
.fui-FluentProvider--colorScheme-dark .conversation-context-menu__item {
  background-color: transparent !important;
  color: var(--color-white-100pct);
}
body[data-theme=dark] .conversation-context-menu__item:hover,
.fui-FluentProvider--colorScheme-dark .conversation-context-menu__item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
body[data-theme=dark] .conversation-context-menu__item:active,
.fui-FluentProvider--colorScheme-dark .conversation-context-menu__item:active {
  background-color: rgba(255, 255, 255, 0.15) !important;
}
body[data-theme=dark] .conversation-context-menu__item--delete,
.fui-FluentProvider--colorScheme-dark .conversation-context-menu__item--delete {
  color: var(--color-red-400);
}@keyframes react-loading-skeleton {
    100% {
        transform: translateX(100%);
    }
}

.react-loading-skeleton {
    --base-color: #ebebeb;
    --highlight-color: #f5f5f5;
    --animation-duration: 1.5s;
    --animation-direction: normal;
    --pseudo-element-display: block; /* Enable animation */

    background-color: var(--base-color);

    width: 100%;
    border-radius: 0.25rem;
    display: inline-flex;
    line-height: 1;

    position: relative;
    overflow: hidden;
    z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
}

.react-loading-skeleton::after {
    content: ' ';
    display: var(--pseudo-element-display);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(
        90deg,
        var(--base-color),
        var(--highlight-color),
        var(--base-color)
    );
    transform: translateX(-100%);

    animation-name: react-loading-skeleton;
    animation-direction: var(--animation-direction);
    animation-duration: var(--animation-duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* Centralized skeleton styling for both light and dark themes */

:root {
  --skeleton-base-light: #e9e9e9;
  --skeleton-highlight-light: #f5f5f5;
  --skeleton-base-dark: rgba(255,255,255,0.06);
  --skeleton-highlight-dark: rgba(255,255,255,0.08);
}

/* Default skeleton tuning */

.react-loading-skeleton {
  border-radius: 6px;
}

/* Light theme: use slightly warm greys */

body[data-theme="light"] .react-loading-skeleton {
  background-color: var(--skeleton-base-light) !important;
  background-image: linear-gradient(90deg, var(--skeleton-base-light) 0%, var(--skeleton-highlight-light) 50%, var(--skeleton-base-light) 100%) !important;
}

/* Dark theme: low-contrast white shimmer */

/* Stronger override: apply the dark gradient to the skeleton element and its pseudo-elements
   to prevent any library defaults or other rules from producing pale/white bands. */

body[data-theme="dark"] .react-loading-skeleton,
body[data-theme="dark"] .react-loading-skeleton::after,
body[data-theme="dark"] .react-loading-skeleton::before,
body[data-theme="dark"] .react-loading-skeleton * {
  background-color: #2b2b2b !important;
  background-image: linear-gradient(90deg, #2b2b2b 0%, #646464 50%, #3a3a3a 100%) !important;
  background-repeat: no-repeat !important;
  border-color: transparent !important;
  color: transparent !important;
}

/* Small helper class for skeleton rows used in menus */

.skeleton-row {
  height: 40px;
  width: 100%;
  border-radius: 6px;
}

/* Narrower variant */

.skeleton-row-short {
  height: 40px;
  width: 70%;
}

/* Utility spacing */

.mb-12 { margin-bottom: 12px !important; }

.mb-16 { margin-bottom: 16px !important; }

.mb-24 { margin-bottom: 24px !important; }

.pt-6 { padding-top: 6px !important; }

/* Width helpers */

.w-100p { width: 100% !important; }

.w-80p { width: 80% !important; }

.w-70p { width: 70% !important; }

.w-60p { width: 60% !important; }

.w-40p { width: 40% !important; }

.w-30p { width: 30% !important; }

/* Height helpers */

.h-72 { height: 72px !important; }

.h-120 { height: 120px !important; }

.h-160 { height: 160px !important; }

/* Specific skeleton sizes used in AppMenuContent - readable, CSS-safe names */

.skeleton-253x32 { width: 253px !important; height: 32px !important; border-radius: 8px !important; display: block !important; }

.skeleton-253x83 { width: 253px !important; height: 83px !important; border-radius: 8px !important; display: block !important; }

/* Small square button skeleton */

.skeleton-btn { width: 36px !important; height: 36px !important; border-radius: 8px !important; }

/* Header-specific skeleton helpers */

.skeleton-rect-36 { width: 36px !important; height: 36px !important; border-radius: 8px !important; display: inline-block; }

.ml-auto { margin-left: auto !important; }

.w-160 { width: 160px !important; }

.h-18 { height: 18px !important; }

/* Brand/header title skeleton exact size */

.skeleton-brand { width: 147px !important; height: 37px !important; border-radius: 8px !important; display: inline-block; }

/* Global safeguard: ensure header skeletons are always visible on mobile
   in case component-level styles try to hide them. */

@media (max-width: 768px) {
  .header-view__left__logoAndAppName .skeleton-rect-36,
  .header-view__left__logoAndAppName .skeleton-brand,
  .header-view__left__infoAppGroup .skeleton-rect-36,
  .header-view__left__infoAppGroup .skeleton-brand {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: var(--skeleton-base-light) !important;
  }
  body[data-theme="dark"] .header-view__left__logoAndAppName .skeleton-rect-36,
  body[data-theme="dark"] .header-view__left__logoAndAppName .skeleton-brand {
    background-color: var(--skeleton-base-dark) !important;
  }
}

/* Settings page skeletons */

.settings-skeleton-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 120px;
  gap: 20px;
}

.settings-skeleton-card {
  width: 100%;
  max-width: 920px;
  border-radius: 12px;
  display: block;
}

.settings-skeleton-card.h-460 { height: 460px !important; }

.settings-skeleton-card.h-220 { height: 220px !important; }

/* Responsive adjustments */

@media (max-width: 768px) {
  .settings-skeleton-container { padding: 20px 8px; }
  .settings-skeleton-card { border-radius: 10px; }
}

/* Utility helpers for skeleton placement */

.settings-skeleton-center { width: 100%; display: flex; justify-content: center; }

.settings-skeleton-stack { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }


.openai-logo-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.openai-logo-container.small {
  max-width: 50px;
  max-height: 32px;
}
.openai-logo-container.medium {
  max-width: 160px;
  max-height: 80px;
}
.openai-logo-container .openai-logo-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}
@media (max-width: 480px) {
  .openai-logo-container.small {
    max-width: 44px;
    max-height: 28px;
  }
  .openai-logo-container.medium {
    max-width: 120px;
    max-height: 60px;
  }
}.ellipsisText {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex; /* use flex to properly center text and preserve font metrics */
  align-items: center;
  padding: 0;
  margin: 0;
}
.ellipsisText .ellipsisText__content,
.ellipsisText span {
  display: inline-block; /* allow margin-left animation without affecting layout */
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  /* Typography from figma design */
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  letter-spacing: 0.07px;
}
.ellipsisText.hover .ellipsisText__content,
.ellipsisText.hover span {
  animation: var(--EllipsisTextTime) slideleft linear infinite;
  -webkit-animation: var(--EllipsisTextTime) slideleft linear infinite;
}

/* Dark mode styling for EllipsisText within menu items */
body[data-theme=dark] .gptName .ellipsisText .ellipsisText__content,
body[data-theme=dark] .gptName .ellipsisText span,
body[data-theme=dark] .chatTitle .ellipsisText .ellipsisText__content,
body[data-theme=dark] .chatTitle .ellipsisText span {
  color: var(--color-zinc-300) !important;
}

@-webkit-keyframes slideleft {
  0% {
    margin-left: 0px;
  }
  10% {
    margin-left: 0px;
  }
  80% {
    margin-left: var(--EllipsisTextShift);
  }
  95% {
    margin-left: var(--EllipsisTextShift);
  }
  100% {
    margin-left: 0px;
  }
}
@keyframes slideleft {
  0% {
    margin-left: 0px;
  }
  10% {
    margin-left: 0px;
  }
  75% {
    margin-left: var(--EllipsisTextShift);
  }
  95% {
    margin-left: var(--EllipsisTextShift);
  }
  100% {
    margin-left: 0px;
  }
}/*
** This file is generated from Fluent UI tokens.
** To regenerate the file run: yarn run fluentSass.
** Generate on: 28/06/2023 23:34:58
*/
/*
** Variables for color
*/
/*
** Variables for border
*/
/*
** Variables for font
*/
/*
** Variables for line
*/
/*
** Variables for shadow
*/
/*
** Variables for stroke
*/
/*
** Variables for spacing
*/
/*
** Variables for duration
*/
/*
** Variables for curve
*/
/*
** Custom color variables for SyGPT Application
** These extend the Fluent UI design tokens with additional color palettes
*/
/*
** CSS Custom Properties (CSS Variables)
** These can be overridden at runtime and support theming
*/
:root {
  /* Gray Scale */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-gray-ring-500: #c7c9cd;
  /* Slate Scale */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  /* Zinc Scale */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  /* Neutral Scale */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  /* Stone Scale */
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  /* Lime Scale */
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  /* Green Scale */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-green-ring-500: #c4ede8;
  /* Emerald Scale */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
  /* Teal Scale */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
  /* Cyan Scale */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
  /* Sky Scale */
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
  /* Blue Scale */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  /* Indigo Scale */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
  /* Violet Scale */
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
  /* Purple Scale */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
  /* Fuchsia Scale */
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
  /* Pink Scale */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  /* Rose Scale */
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
  /* Red Scale */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-red-ring-500: #fbd0d0;
  /* Orange Scale */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  /* Amber Scale */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
  /* Yellow Scale */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-yellow-ring-500: #f9ecc1;
  /* White Variants */
  --color-white-100pct: #ffffff;
  --color-white-10pct: #ffffff;
  --color-white-3pct: #ffffff;
  --color-white-5pct: #ffffff;
  --color-white-15pct: #ffffff;
  --color-white-20pct: #ffffff;
  --color-white-30pct: #ffffff;
  --color-white-40pct: #ffffff;
  --color-white-50pct: #ffffff;
  --color-white-60pct: #ffffff;
  --color-white-70pct: #ffffff;
  --color-white-80pct: #ffffff;
  --color-white-90pct: #ffffff;
  --color-white-1pct: #ffffff;
  /* Soft Colors */
  --color-soft-green: #115e59;
  --color-soft-blue: #1e40af;
  --color-soft-red: #991b1b;
  --color-soft-yellow: #854d0e;
  --color-soft-gray: #374151;
  /* Primary Brand Scale */
  --color-primary-50: #fff5f3;
  --color-primary-100: #ffebe6;
  --color-primary-200: #ffd7cc;
  --color-primary-300: #ffc3b3;
  --color-primary-400: #ffaf99;
  --color-primary-500: #ff5730;
  --color-primary-600: #e64a26;
  --color-primary-700: #cc3e1c;
  --color-primary-800: #b33113;
  --color-primary-900: #99250a;
  --color-primary-950: #801a05;
  --color-primary-ring-500: #ffcdc1;
  --color-primary-500-10pct: rgba(255, 87, 48, 0.1);
  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  /* Spacing Scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-17: 68px;
  --spacing-18: 72px;
  --spacing-19: 76px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
  --spacing-4-5: 18px;
  --spacing-5-5: 22px;
  --spacing-6-5: 26px;
  --spacing-7-5: 30px;
  --spacing-8-5: 34px;
  --spacing-9-5: 38px;
  --spacing-10-5: 42px;
  --spacing-11-5: 46px;
  --spacing-12-5: 50px;
  --spacing-13-5: 54px;
  --spacing-14-5: 58px;
  --spacing-15-5: 62px;
  --spacing-16-5: 66px;
  --spacing-17-5: 70px;
  --spacing-18-5: 74px;
  --spacing-19-5: 78px;
}
/*
** SCSS Variables for convenient usage in SCSS files
** These reference the CSS custom properties above
*/
/* Gray Scale */
/* Slate Scale */
/* Zinc Scale */
/* Neutral Scale */
/* Stone Scale */
/* Lime Scale */
/* Green Scale */
/* Emerald Scale */
/* Teal Scale */
/* Cyan Scale */
/* Sky Scale */
/* Blue Scale */
/* Indigo Scale */
/* Violet Scale */
/* Purple Scale */
/* Fuchsia Scale */
/* Pink Scale */
/* Rose Scale */
/* Red Scale */
/* Orange Scale */
/* Amber Scale */
/* Yellow Scale */
/* White Variants */
/* Soft Colors */
/* Primary Brand Scale */
/* Border Radius */
/* Spacing Scale */
/* Bouton version sans padding ni largeur minimale */
.version-btn {
  padding: 0 !important;
  min-width: 0 !important;
}
.header-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  background-color: var(--colorNeutralBackground1);
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 768px) {
  .header-view {
    height: 52px;
    padding: 0 16px;
  }
}
.header-view {
  /* Ensure skeletons in header are visible and sized same on mobile */
}
@media (max-width: 768px) {
  .header-view .skeleton-rect-36 {
    display: inline-block !important;
    width: 36px !important;
    height: 36px !important;
  }
  .header-view .skeleton-brand {
    display: inline-block !important;
    width: 147px !important;
    height: 37px !important;
  }
}
.header-view__badge {
  background-color: var(--color-gray-100) !important;
  color: black !important;
  height: 28px !important;
  border-radius: 5px !important;
}
.header-view__badgeEnvironment {
  background-color: var(--color-gray-100) !important;
  color: black !important;
  height: 28px !important;
  border-radius: 5px !important;
  cursor: default !important;
}
.header-view__left {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  flex: 0 0 auto;
  /* Base/Bold */
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.08px;
}
@media (max-width: 1024px) {
  .header-view__left {
    gap: 16px;
  }
}
.header-view__left__infoAppGroup {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 10px;
}
.header-view__left__logoAndAppName {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 10px;
  cursor: pointer;
}
.header-view__right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: fit-content;
  flex: 0 0 auto;
}
.header-view__profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 0;
  flex-shrink: 0;
  height: 36px;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
  width: auto;
}
.header-view__profile__menu {
  width: 200px;
}
.header-view__profile .fui-MenuButton__menuIcon {
  display: none !important;
}
.header-view__profile:hover {
  background-color: var(--colorNeutralBackground2Hover);
}
.header-view .newChatIcon {
  color: var(--color-primary-500);
}
.header-view .header-view__profile {
  border-radius: 8px;
  height: 38px;
  border-color: var(--color-zinc-200);
}
.fui-FluentProvider:not(.fui-FluentProvider--colorScheme-dark) .header-view {
  background-color: transparent;
  border-bottom-color: var(--colorNeutralStroke2);
}
.fui-FluentProvider--colorScheme-dark .header-view .header-view__badge, body[data-theme=dark] .header-view .header-view__badge {
  background-color: var(--color-zinc-800) !important;
  color: white !important;
}
.fui-FluentProvider--colorScheme-dark .header-view .themeButton.fui-Button, body[data-theme=dark] .header-view .themeButton.fui-Button {
  background-color: var(--color-zinc-800) !important;
  border: none !important;
}
.fui-FluentProvider--colorScheme-dark .header-view .header-view__profile, body[data-theme=dark] .header-view .header-view__profile {
  background-color: var(--color-zinc-800) !important;
  border: none !important;
}
.fui-FluentProvider--colorScheme-dark .header-view .header-view__profile:hover, body[data-theme=dark] .header-view .header-view__profile:hover {
  background-color: var(--color-zinc-700) !important;
}
.fui-FluentProvider--colorScheme-dark .header-view .newChatIcon, body[data-theme=dark] .header-view .newChatIcon {
  color: var(--color-gray-100);
}
.logOutMenuItem span {
  color: var(--colorPaletteRedForeground1) !important;
}.menu-persona-centered {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.menu-persona-centered .fui-Persona {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.menu-persona-centered .fui-Avatar {
  margin: 0 !important;
}/*
** This file is generated from Fluent UI tokens.
** To regenerate the file run: yarn run fluentSass.
** Generate on: 28/06/2023 23:34:58
*/
/*
** Variables for color
*/
/*
** Variables for border
*/
/*
** Variables for font
*/
/*
** Variables for line
*/
/*
** Variables for shadow
*/
/*
** Variables for stroke
*/
/*
** Variables for spacing
*/
/*
** Variables for duration
*/
/*
** Variables for curve
*/
/*
** Custom color variables for SyGPT Application
** These extend the Fluent UI design tokens with additional color palettes
*/
/*
** CSS Custom Properties (CSS Variables)
** These can be overridden at runtime and support theming
*/
:root {
  /* Gray Scale */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-gray-ring-500: #c7c9cd;
  /* Slate Scale */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  /* Zinc Scale */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  /* Neutral Scale */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  /* Stone Scale */
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
  /* Lime Scale */
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  /* Green Scale */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-green-ring-500: #c4ede8;
  /* Emerald Scale */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
  /* Teal Scale */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
  /* Cyan Scale */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
  /* Sky Scale */
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
  /* Blue Scale */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  /* Indigo Scale */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
  /* Violet Scale */
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
  /* Purple Scale */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
  /* Fuchsia Scale */
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
  /* Pink Scale */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  /* Rose Scale */
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
  /* Red Scale */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-red-ring-500: #fbd0d0;
  /* Orange Scale */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  /* Amber Scale */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
  /* Yellow Scale */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-yellow-ring-500: #f9ecc1;
  /* White Variants */
  --color-white-100pct: #ffffff;
  --color-white-10pct: #ffffff;
  --color-white-3pct: #ffffff;
  --color-white-5pct: #ffffff;
  --color-white-15pct: #ffffff;
  --color-white-20pct: #ffffff;
  --color-white-30pct: #ffffff;
  --color-white-40pct: #ffffff;
  --color-white-50pct: #ffffff;
  --color-white-60pct: #ffffff;
  --color-white-70pct: #ffffff;
  --color-white-80pct: #ffffff;
  --color-white-90pct: #ffffff;
  --color-white-1pct: #ffffff;
  /* Soft Colors */
  --color-soft-green: #115e59;
  --color-soft-blue: #1e40af;
  --color-soft-red: #991b1b;
  --color-soft-yellow: #854d0e;
  --color-soft-gray: #374151;
  /* Primary Brand Scale */
  --color-primary-50: #fff5f3;
  --color-primary-100: #ffebe6;
  --color-primary-200: #ffd7cc;
  --color-primary-300: #ffc3b3;
  --color-primary-400: #ffaf99;
  --color-primary-500: #ff5730;
  --color-primary-600: #e64a26;
  --color-primary-700: #cc3e1c;
  --color-primary-800: #b33113;
  --color-primary-900: #99250a;
  --color-primary-950: #801a05;
  --color-primary-ring-500: #ffcdc1;
  --color-primary-500-10pct: rgba(255, 87, 48, 0.1);
  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  /* Spacing Scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-17: 68px;
  --spacing-18: 72px;
  --spacing-19: 76px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
  --spacing-4-5: 18px;
  --spacing-5-5: 22px;
  --spacing-6-5: 26px;
  --spacing-7-5: 30px;
  --spacing-8-5: 34px;
  --spacing-9-5: 38px;
  --spacing-10-5: 42px;
  --spacing-11-5: 46px;
  --spacing-12-5: 50px;
  --spacing-13-5: 54px;
  --spacing-14-5: 58px;
  --spacing-15-5: 62px;
  --spacing-16-5: 66px;
  --spacing-17-5: 70px;
  --spacing-18-5: 74px;
  --spacing-19-5: 78px;
}
/*
** SCSS Variables for convenient usage in SCSS files
** These reference the CSS custom properties above
*/
/* Gray Scale */
/* Slate Scale */
/* Zinc Scale */
/* Neutral Scale */
/* Stone Scale */
/* Lime Scale */
/* Green Scale */
/* Emerald Scale */
/* Teal Scale */
/* Cyan Scale */
/* Sky Scale */
/* Blue Scale */
/* Indigo Scale */
/* Violet Scale */
/* Purple Scale */
/* Fuchsia Scale */
/* Pink Scale */
/* Rose Scale */
/* Red Scale */
/* Orange Scale */
/* Amber Scale */
/* Yellow Scale */
/* White Variants */
/* Soft Colors */
/* Primary Brand Scale */
/* Border Radius */
/* Spacing Scale */
.header-view-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 69px;
  padding: 0 24px;
  background-color: var(--colorNeutralBackground1);
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 1000;
}
@media (max-width: 768px) {
  .header-view-mobile {
    height: 69px;
    padding: 0 16px;
  }
}
.header-view-mobile {
  /* Force logo/info group to remain visible in mobile header (prevent other mobile rules from hiding it) */
}
@media (max-width: 768px) {
  .header-view-mobile .header-view__left__infoAppGroup,
  .header-view-mobile .header-view__left__logoAndAppName {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .header-view-mobile {
    /* Ensure any skeleton placeholders inside header are visible */
  }
  .header-view-mobile .skeleton-rect-36,
  .header-view-mobile .skeleton-brand {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
.header-view-mobile__left {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  flex: 0 0 auto;
  /* Base/Bold */
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.08px;
}
@media (max-width: 1024px) {
  .header-view-mobile__left {
    gap: 16px;
  }
}
.header-view-mobile__center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.header-view-mobile__right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: fit-content;
  flex: 0 0 auto;
}
.header-view-mobile__profile {
  display: flex !important;
  align-items: center !important;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 38px !important;
  width: 38px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  flex-shrink: 0;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
  justify-content: center !important;
  border-radius: 8px !important;
}
.header-view-mobile__profile__menu {
  width: 200px;
}
.header-view-mobile__profile .fui-MenuButton__menuIcon {
  display: none !important;
}
.header-view-mobile__profile > * {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.header-view-mobile__profile:hover {
  background-color: var(--colorNeutralBackground2Hover);
}
.header-view-mobile .newChatIcon {
  color: var(--color-primary-500);
}
.header-view-mobile .header-view__profile {
  border-radius: 8px;
  height: 38px;
  width: 38px;
  min-width: 38px;
  border-color: var(--color-zinc-200);
}
.fui-FluentProvider:not(.fui-FluentProvider--colorScheme-dark) .header-view-mobile {
  background-color: transparent;
  border-bottom-color: var(--colorNeutralStroke2);
}
.fui-FluentProvider--colorScheme-dark .header-view-mobile .header-view__badge, body[data-theme=dark] .header-view-mobile .header-view__badge {
  background-color: var(--color-zinc-800) !important;
  color: white !important;
}
.fui-FluentProvider--colorScheme-dark .header-view-mobile .themeButton.fui-Button, body[data-theme=dark] .header-view-mobile .themeButton.fui-Button {
  background-color: var(--color-zinc-800) !important;
  border: none !important;
}
.fui-FluentProvider--colorScheme-dark .header-view-mobile .header-view__profile, body[data-theme=dark] .header-view-mobile .header-view__profile {
  background-color: var(--color-zinc-800) !important;
  border: none !important;
}
.fui-FluentProvider--colorScheme-dark .header-view-mobile .header-view__profile:hover, body[data-theme=dark] .header-view-mobile .header-view__profile:hover {
  background-color: var(--color-zinc-700) !important;
}
.fui-FluentProvider--colorScheme-dark .header-view-mobile .newChatIcon, body[data-theme=dark] .header-view-mobile .newChatIcon {
  color: var(--color-gray-100);
}
.header-view-mobile .syensqo-logo {
  width: 20px;
  height: 32px;
}
.header-view-mobile__profile-popover {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  max-height: 50vh !important;
  margin: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15) !important;
  animation: slideUpFromBottom 0.4s ease-out forwards !important;
  transform-origin: bottom !important;
  overflow: visible !important;
  transform: translateY(0) !important;
}
.header-view-mobile__profile-popover .fui-MenuList {
  width: 100% !important;
  padding: 16px 16px 24px 16px !important;
  box-sizing: border-box !important;
  min-height: fit-content !important;
}
.header-view-mobile__profile-popover .logOutMenuItem {
  color: var(--colorPaletteRedForeground1) !important;
}
.header-view-mobile__profile-popover > div {
  height: auto !important;
  max-height: none !important;
}
@keyframes slideUpFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}.survey-dialog-surface {
    max-width: 480px;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
    padding: 0;
    background-color: var(--colorNeutralBackground1);
}

.survey-dialog-body {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.survey-dialog-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 8px 16px;
}

.survey-dialog-title-text {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: var(--colorNeutralForeground1);
}

.survey-dialog-content {
    padding: 0 16px 16px 16px;
}

.survey-dialog-message-text {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 8px;
    color: var(--colorNeutralForeground2);
}

.survey-dialog-warning-text {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700 !important;
    color: var(--colorNeutralForeground1);
}

.survey-dialog-survey-name {
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.survey-dialog-actions {
    padding: 8px 16px 16px 16px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    white-space: nowrap;
}

.survey-dialog-icon-green {
    color: var(--color-green-500);
    flex-shrink: 0;
}

.survey-dialog-icon-gray {
    color: var(--color-gray-500);
    flex-shrink: 0;
}

.survey-dialog-warning-amber {
    color: var(--color-amber-700);
}
/* Global header styles for reuse across forms and components */
.header-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 12px;
    box-sizing: border-box;
    overflow: visible;
}

.full-bleed-header {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0px;
    bottom: 0px;
    background: var(--header-bg);
    z-index: 0;
}

.header-inner {
    position: relative;
    z-index: 1;
    padding: 0px 24px;
    box-sizing: border-box;
    overflow: visible;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    /* removed extra gap */
    margin-top: 0;
    /* removed extra gap */
    position: relative;
    z-index: 2;
}

.header-top-row {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.title-and-badge-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.title {
    font-weight: bold !important;
    font-size: 20px !important;
    color: var(--colorNeutralForeground1, #18181B);
}/* SurveyForm Component Styles */

/* Border colors - light mode by default */
:root {
    --survey-card-border: var(--color-gray-200);
}

/* Border colors - dark mode */
body[data-theme="dark"] {
    --survey-card-border: var(--color-zinc-700);
}

/* Apply borders to survey cards */
.survey-form-card {
    border: 1px solid var(--survey-card-border);
    transition: box-shadow 0.2s ease;
}

.survey-form-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.survey-form-answers-container {
    border: 1px solid var(--survey-card-border);
}

.survey-form-question-input input {
    font-size: 0.75rem;
}

.survey-form-answer-input input {
    font-size: 0.75rem;
}

.survey-form-answer-row {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 0px;
    border-radius: 3px;
}

.survey-form-answers-title {
    font-size: 0.75rem;
    margin-bottom: 8px;
    display: block;
}

.survey-form-question-number {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    padding: 4px 6px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 6px;
}

.survey-form-expand-collapse-btn {
    font-size: 0.75rem;
}

.survey-form-question-content {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.survey-form-question-label-wrapper {
    flex: 1;
    min-width: 0;
}

/* Switch color override for required question */
.survey-form-required-switch input[type="checkbox"]:checked ~ .fui-Switch__indicator {
    background-color: var(--color-primary-500) !important;
}

.survey-form-required-switch input[type="checkbox"]:checked:hover ~ .fui-Switch__indicator {
    background-color: var(--color-primary-600) !important;
}

.survey-form-required-switch input[type="checkbox"]:checked ~ * {
    background-color: var(--color-primary-500) !important;
}

.survey-form-required-switch input[type="checkbox"]:checked:hover ~ * {
    background-color: var(--color-primary-600) !important;
}/*
** This file is generated from Fluent UI tokens.
** To regenerate the file run: yarn run fluentSass.
** Generate on: 28/06/2023 23:34:58
*/
/*
** Variables for color
*/
/*
** Variables for border
*/
/*
** Variables for font
*/
/*
** Variables for line
*/
/*
** Variables for shadow
*/
/*
** Variables for stroke
*/
/*
** Variables for spacing
*/
/*
** Variables for duration
*/
/*
** Variables for curve
*/
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 8px var(--colorPaletteRoyalBlueBackground2);
  border-radius: var(--borderRadiusXLarge);
}
::-webkit-scrollbar-thumb {
  border-radius: var(--borderRadiusXLarge);
  -webkit-box-shadow: inset 0 0 4px var(--colorPaletteBlueForeground2);
}/* Global switch overrides to use blue when ON.
   Targets the switch root via role="switch" and common internal class names used by various Fluent versions.
   Uses a CSS variable --app-switch-blue to allow easy tuning.
*/
:root {
  /* Prefer Fluent token if available, otherwise fall back to the requested hex */
  --app-switch-blue: var(--colorPaletteBlueForeground2, #2563EB);
  --app-switch-blue-hover: var(--colorPaletteBlueForeground1, #1D4ED8);
}

/* Root switch when checked */
/* Target the actual classes used by @fluentui/react-switch (see lib-commonjs useSwitchStyles.styles)
   The input is visually hidden and when checked it uses the sibling .fui-Switch__indicator for the track.
*/

/* Checked track */
.fui-Switch__input:enabled:checked ~ .fui-Switch__indicator {
  background-color: var(--app-switch-blue) !important;
  color: var(--colorNeutralForegroundInverted) !important;
  border-color: transparent !important;
}

/* Hover/active states */
.fui-Switch__input:enabled:checked:hover ~ .fui-Switch__indicator {
  background-color: var(--app-switch-blue-hover) !important;
  border-color: transparent !important;
}

/* Disabled checked state keep neutral background */
.fui-Switch__input:disabled:checked ~ .fui-Switch__indicator {
  background-color: var(--colorNeutralBackgroundDisabled) !important;
}

/* Fallback: target role-based switches too */
[role="switch"][aria-checked="true"] .fui-Switch__indicator {
  background-color: var(--app-switch-blue) !important;
}


/* Use Inter as the primary site font and apply site-wide typography defaults */
@keyframes react-loading-skeleton {
    100% {
        transform: translateX(100%);
    }
}
.react-loading-skeleton {
    --base-color: #ebebeb;
    --highlight-color: #f5f5f5;
    --animation-duration: 1.5s;
    --animation-direction: normal;
    --pseudo-element-display: block; /* Enable animation */

    background-color: var(--base-color);

    width: 100%;
    border-radius: 0.25rem;
    display: inline-flex;
    line-height: 1;

    position: relative;
    overflow: hidden;
    z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
}
.react-loading-skeleton::after {
    content: ' ';
    display: var(--pseudo-element-display);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(
        90deg,
        var(--base-color),
        var(--highlight-color),
        var(--base-color)
    );
    transform: translateX(-100%);

    animation-name: react-loading-skeleton;
    animation-direction: var(--animation-direction);
    animation-duration: var(--animation-duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
/* Centralized skeleton styling for both light and dark themes */
:root {
  --skeleton-base-light: #e9e9e9;
  --skeleton-highlight-light: #f5f5f5;
  --skeleton-base-dark: rgba(255,255,255,0.06);
  --skeleton-highlight-dark: rgba(255,255,255,0.08);
}
/* Default skeleton tuning */
.react-loading-skeleton {
  border-radius: 6px;
}
/* Light theme: use slightly warm greys */
body[data-theme="light"] .react-loading-skeleton {
  background-color: var(--skeleton-base-light) !important;
  background-image: linear-gradient(90deg, var(--skeleton-base-light) 0%, var(--skeleton-highlight-light) 50%, var(--skeleton-base-light) 100%) !important;
}
/* Dark theme: low-contrast white shimmer */
/* Stronger override: apply the dark gradient to the skeleton element and its pseudo-elements
   to prevent any library defaults or other rules from producing pale/white bands. */
body[data-theme="dark"] .react-loading-skeleton,
body[data-theme="dark"] .react-loading-skeleton::after,
body[data-theme="dark"] .react-loading-skeleton::before,
body[data-theme="dark"] .react-loading-skeleton * {
  background-color: #2b2b2b !important;
  background-image: linear-gradient(90deg, #2b2b2b 0%, #646464 50%, #3a3a3a 100%) !important;
  background-repeat: no-repeat !important;
  border-color: transparent !important;
  color: transparent !important;
}
/* Small helper class for skeleton rows used in menus */
.skeleton-row {
  height: 40px;
  width: 100%;
  border-radius: 6px;
}
/* Narrower variant */
.skeleton-row-short {
  height: 40px;
  width: 70%;
}
/* Utility spacing */
.mb-12 { margin-bottom: 12px !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-24 { margin-bottom: 24px !important; }
.pt-6 { padding-top: 6px !important; }
/* Width helpers */
.w-100p { width: 100% !important; }
.w-80p { width: 80% !important; }
.w-70p { width: 70% !important; }
.w-60p { width: 60% !important; }
.w-40p { width: 40% !important; }
.w-30p { width: 30% !important; }
/* Height helpers */
.h-72 { height: 72px !important; }
.h-120 { height: 120px !important; }
.h-160 { height: 160px !important; }
/* Specific skeleton sizes used in AppMenuContent - readable, CSS-safe names */
.skeleton-253x32 { width: 253px !important; height: 32px !important; border-radius: 8px !important; display: block !important; }
.skeleton-253x83 { width: 253px !important; height: 83px !important; border-radius: 8px !important; display: block !important; }
/* Small square button skeleton */
.skeleton-btn { width: 36px !important; height: 36px !important; border-radius: 8px !important; }
/* Header-specific skeleton helpers */
.skeleton-rect-36 { width: 36px !important; height: 36px !important; border-radius: 8px !important; display: inline-block; }
.ml-auto { margin-left: auto !important; }
.w-160 { width: 160px !important; }
.h-18 { height: 18px !important; }
/* Brand/header title skeleton exact size */
.skeleton-brand { width: 147px !important; height: 37px !important; border-radius: 8px !important; display: inline-block; }
/* Global safeguard: ensure header skeletons are always visible on mobile
   in case component-level styles try to hide them. */
@media (max-width: 768px) {
  .header-view__left__logoAndAppName .skeleton-rect-36,
  .header-view__left__logoAndAppName .skeleton-brand,
  .header-view__left__infoAppGroup .skeleton-rect-36,
  .header-view__left__infoAppGroup .skeleton-brand {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: var(--skeleton-base-light) !important;
  }
  body[data-theme="dark"] .header-view__left__logoAndAppName .skeleton-rect-36,
  body[data-theme="dark"] .header-view__left__logoAndAppName .skeleton-brand {
    background-color: var(--skeleton-base-dark) !important;
  }
}
/* Settings page skeletons */
.settings-skeleton-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 120px;
  gap: 20px;
}
.settings-skeleton-card {
  width: 100%;
  max-width: 920px;
  border-radius: 12px;
  display: block;
}
.settings-skeleton-card.h-460 { height: 460px !important; }
.settings-skeleton-card.h-220 { height: 220px !important; }
/* Responsive adjustments */
@media (max-width: 768px) {
  .settings-skeleton-container { padding: 20px 8px; }
  .settings-skeleton-card { border-radius: 10px; }
}
/* Utility helpers for skeleton placement */
.settings-skeleton-center { width: 100%; display: flex; justify-content: center; }
.settings-skeleton-stack { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
:root {
  /* Global survey/border background used by components */
  --border-bg: #FAFAFA;
  /* Header background (defaults to white) */
  --header-bg: #FFFFFF;
  /* Card border (visible in light mode) */
  --card-border: 1px solid var(--colorNeutralStroke1, #E5E5E5);
  /* Section description color */
  --section-description-color: #000000;
  /* Settings title color: black in light mode */
  --settings-title-color: #000000;
  /* Heading and label text color */
  --heading-text-color: #111827;
  /* Global left margin used across the site for consistent spacing */
  --menu-inner-left-margin: 7px;
  /* Menu button hover background */
  --menu-button-hover-bg: var(--color-slate-100);
  /* Neutral 400 token (matches --color-neutral-400 = #A3A3A3) */
  --color-neutral-400: #A3A3A3;
  /* Gray 500 token for mid-tone text */
  --color-gray-500: #6B7280;
}
/* Dark mode overrides: reuse header variable for page and border backgrounds */
body[data-theme="dark"] {
  --header-bg: #18181B;
  /* make border/body use the same dark background to keep visuals consistent */
  --border-bg: var(--header-bg);
  /* Card border hidden in dark mode */
  --card-border: none;
  --section-description-color: #FFFFFF;
  /* Settings title color: white in dark mode */
  --settings-title-color: #FFFFFF;
  /* Heading and label text color: light in dark mode */
  --heading-text-color: #F9FAFB;
  /* Menu button hover background in dark mode */
  --menu-button-hover-bg: #3D3D3D;
  /* Dark mode neutral 400 — slightly lighter for contrast on dark backgrounds */
  --color-neutral-400: #9CA3AF;
  background-color: var(--header-bg);
  color: #FFFFFF;
  /* Dark mode gray 500 slightly lighter for readability */
  --color-gray-500: #9CA3AF;
}
/* Skeleton visuals are centralized in ./styles/skeletons.css */
/* Dark mode text colors for menu items */
body[data-theme="dark"] .gptName,
body[data-theme="dark"] .chatTitle {
  color: var(--color-zinc-300) !important;
}
/* Additional specificity for nested elements */
body[data-theme="dark"] .gptName *,
body[data-theme="dark"] .chatTitle * {
  color: inherit !important;
}
body {
  margin: 0;
  /* Primary font + fallback stack */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  /* Match the snippet: semibold weight and 14px base size */
  font-weight: 600; /* semibold */
  font-size: 14px;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Ensure native form controls inherit the site typography defaults */
input,
textarea,
button,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  /* Default tokens for form controls — components can rely on these */
  --form-font-weight: 500; /* medium */
  --form-font-size: 15px;
  --form-letter-spacing: 0.075px;
  /* Use the page/card background variable so form controls match dark mode */
  --form-background: var(--border-bg);
  --form-placeholder-color: #6b7280;
  background-color: var(--form-background);
  font-weight: var(--form-font-weight);
  font-size: var(--form-font-size);
  letter-spacing: var(--form-letter-spacing);
}
/* Placeholder color for inputs and textareas */
input::placeholder,
textarea::placeholder {
  color: var(--form-placeholder-color);
}
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
/* Custom tooltip styling for model cutoff date (Figma design) */
/* Design reference: https://www.figma.com/design/E1dmELqOSfSkzBjEI1baPF/Syensqo-Design?node-id=1753-127165 */
/* Tooltip content box */
div[role="tooltip"],
.fui-Tooltip__content {
  background-color: #000000 !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  border: none !important;
  text-align: center !important;
}
/* Arrow/beak pointing to the icon */
div[data-popper-arrow],
.fui-Arrow,
.fui-Tooltip__arrow {
  background-color: #000000 !important;
}
div[data-popper-arrow]::before,
div[data-popper-arrow]::after,
.fui-Arrow::before,
.fui-Arrow::after {
  background-color: #000000 !important;
  border-color: #000000 !important;
}
/* Arrow SVG if it exists */
div[data-popper-arrow] svg,
.fui-Arrow svg,
.fui-Tooltip__arrow svg {
  fill: #000000 !important;
}
/* Global settings title styling */
.settingsTitle {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.09px;
  margin-left: -4px;
  padding-top: 13px;
  padding-bottom: 13px;
  color: var(--settings-title-color) !important;
  display: flex;
  align-items: center;
}
[data-theme="dark"] .settingsTitle {
  color: #ffffff !important;
}
/* Global title section styling */
.titleSection {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--header-bg);
}
.titleSection-content {
  display: flex;
  align-items: center;
  gap: 10px;
}
.titleSection-content-indented {
  margin-left: 23px;
}
.titleSection-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-right: 20px;
}
.titleSection-userIcon {
  margin-left: 23px;
  color: var(--colorNeutralForeground2);
}
/* Global button margin right */
.button-margin-right {
  margin-right: 20px !important;
}
.button-margin-right.compact-survey-button {
  font-size: 13px !important;
  padding: 6px 12px !important;
  font-weight: 500 !important;
}
.menuSectionLabel,
.menuSectionLabel.fui-Label,
.menuSectionLabel > * {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.025em;
  color: #1A1A1A !important;
  opacity: 1;
  margin-left: var(--menu-inner-left-margin);
  text-transform: uppercase;
}
/* Dark mode for menuSectionLabel */
body[data-theme="dark"] .menuSectionLabel,
body[data-theme="dark"] .menuSectionLabel.fui-Label,
body[data-theme="dark"] .menuSectionLabel > *,
.fui-FluentProvider--colorScheme-dark .menuSectionLabel,
.fui-FluentProvider--colorScheme-dark .menuSectionLabel.fui-Label,
.fui-FluentProvider--colorScheme-dark .menuSectionLabel > * {
  color: var(--color-zinc-300) !important;
}
/* Global small divider used in menu bottom zones */
.menuSmallDivider,
.menuSmallDividerIn {
  flex-grow: 0;
  height: 1.5rem;
}
/* Variant that lives "in" the menu and should align with inner menu spacing */
.menuSmallDividerIn {
  margin-left: var(--menu-inner-left-margin);
}
/* Global chevron base used by menu chevrons */
.sy-chevron-base {
  color: #6B7280;
  transition: transform 120ms ease;
  display: block;
}
/* Reusable section label layout when paired with a chevron */
.sectionLabelWithChevron {
  display: flex;
  align-items: center;
  gap: 0;
  padding-left: 1px;
  padding-top: 10px;
}