/**
 * Confluent Common Styles - Standalone CSS Export
 * 
 * This file contains all common styles from the frontend-vault repository
 * that can be used in external projects.
 * 
 * Usage:
 * 1. Import this CSS file in your project
 * 2. Use CSS variables: var(--color-purple-60)
 * 3. Use utility classes: .cf-centered, .cf-fieldset, etc.
 * 
 * Based on Confluent's Axon Design System and Core package
 */

/* ============================================================================
   CSS CUSTOM PROPERTIES (Variables)
   ============================================================================ */

:root {
  /* ===== BASE COLORS ===== */

  /* Neutral Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-neutral-100: #131316;
  --color-neutral-90: #222127;
  --color-neutral-80: #35343d;
  --color-neutral-70: #4a4955;
  --color-neutral-60: #656374;
  --color-neutral-50: #838093;
  --color-neutral-40: #a09fad;
  --color-neutral-30: #bebdc7;
  --color-neutral-20: #d9d8de;
  --color-neutral-10: #f5f4f4;

  /* Purple Colors */
  --color-purple-100: #140f38;
  --color-purple-90: #201371;
  --color-purple-80: #332494;
  --color-purple-70: #4933d7;
  --color-purple-60: #6047ff;
  --color-purple-50: #806cff;
  --color-purple-40: #9e8fff;
  --color-purple-30: #bdb3ff;
  --color-purple-20: #d7d1ff;
  --color-purple-10: #f2f0ff;

  /* Blue Colors */
  --color-blue-100: #02152e;
  --color-blue-90: #062756;
  --color-blue-80: #0e3c7c;
  --color-blue-70: #0f55b8;
  --color-blue-60: #176ee8;
  --color-blue-50: #3e8cf9;
  --color-blue-40: #71a8f4;
  --color-blue-30: #9dc4fb;
  --color-blue-20: #c3dcfd;
  --color-blue-10: #ebf3ff;

  /* Teal Colors */
  --color-teal-100: #001a1c;
  --color-teal-90: #003438;
  --color-teal-80: #054d52;
  --color-teal-70: #006066;
  --color-teal-60: #02838d;
  --color-teal-50: #0ea4af;
  --color-teal-40: #30cbd5;
  --color-teal-30: #67dde4;
  --color-teal-20: #a8ebf0;
  --color-teal-10: #dffafc;

  /* Green Colors */
  --color-green-100: #041b10;
  --color-green-90: #07361f;
  --color-green-80: #04522d;
  --color-green-70: #056637;
  --color-green-60: #107f49;
  --color-green-50: #1f9e60;
  --color-green-40: #42bd82;
  --color-green-30: #67e0a5;
  --color-green-20: #9cf4c9;
  --color-green-10: #dbfaeb;

  /* Yellow Colors */
  --color-yellow-100: #1e1601;
  --color-yellow-90: #322501;
  --color-yellow-80: #4c3801;
  --color-yellow-70: #654b01;
  --color-yellow-60: #8f6900;
  --color-yellow-50: #b28300;
  --color-yellow-40: #e5a800;
  --color-yellow-30: #f4bf2f;
  --color-yellow-20: #f9da86;
  --color-yellow-10: #f9f0d7;

  /* Orange Colors */
  --color-orange-100: #1e0f01;
  --color-orange-90: #402103;
  --color-orange-80: #5b2e01;
  --color-orange-70: #753b00;
  --color-orange-60: #9e4f00;
  --color-orange-50: #c26100;
  --color-orange-40: #ff8000;
  --color-orange-30: #ffa852;
  --color-orange-20: #ffcd9b;
  --color-orange-10: #ffefdf;

  /* Red Colors */
  --color-red-100: #2a0e10;
  --color-red-90: #5b1518;
  --color-red-80: #772227;
  --color-red-70: #952d32;
  --color-red-60: #c43b42;
  --color-red-50: #d75057;
  --color-red-40: #f07a80;
  --color-red-30: #f5a3a7;
  --color-red-20: #f9cdcf;
  --color-red-10: #fdf0f0;

  /* Magenta Colors */
  --color-magenta-100: #30081e;
  --color-magenta-90: #670a3d;
  --color-magenta-80: #861352;
  --color-magenta-70: #a91968;
  --color-magenta-60: #db2187;
  --color-magenta-50: #ed3b9d;
  --color-magenta-40: #ff6bbc;
  --color-magenta-30: #ff99d1;
  --color-magenta-20: #ffc7e6;
  --color-magenta-10: #ffeef7;

  /* ===== SEMANTIC COLOR TOKENS (Light Theme) ===== */

  /* Backgrounds */
  --cf-background: var(--color-neutral-10);
  --cf-background-loading: var(--color-purple-10);
  --cf-background-hover: rgba(242, 240, 255, 0.6);
  --cf-background-selected: rgba(245, 244, 244, 0.6);
  --cf-background-highlight: var(--color-purple-10);
  --cf-search-highlight: var(--color-yellow-20);
  --cf-primary-snow: #fafafa;

  /* Surfaces */
  --cf-surface-01: var(--color-white);
  --cf-surface-01-hover: rgba(245, 244, 244, 0.6);
  --cf-surface-02: var(--color-neutral-10);
  --cf-surface-02-hover: rgba(217, 216, 222, 0.6);

  /* Illustrations */
  --illustration_gradient_background_01: var(--color-neutral-20);

  /* Fields */
  --cf-field-on-bg: var(--color-white);
  --cf-field-on-surface-01: var(--color-neutral-10);
  --cf-field-on-surface-02: var(--color-white);

  /* Borders */
  --cf-border-subtle: var(--color-neutral-20);
  --cf-border-strong: var(--color-neutral-50);
  --cf-border-strong-disabled: var(--color-neutral-20);
  --cf-border-interactive: var(--color-purple-60);

  /* Text */
  --cf-text-primary: var(--color-neutral-100);
  --cf-text-secondary: var(--color-neutral-70);
  --cf-text-helper: var(--color-neutral-60);
  --cf-text-disabled: var(--color-neutral-40);
  --cf-text-on-color: var(--color-white);

  /* Links */
  --cf-link-primary: var(--color-purple-70);
  --cf-link-primary-hover: var(--color-purple-60);

  /* Buttons */
  --cf-button-primary: var(--color-purple-60);
  --cf-button-primary-hover: #5338ff;
  --cf-button-primary-active: var(--color-purple-70);
  --cf-button-disabled: var(--color-neutral-30);

  /* Interactive */
  --cf-interactive: var(--color-purple-70);
  --cf-interactive-hover: var(--color-purple-60);
  --cf-interactive-input: var(--color-purple-60);
  --cf-interactive-input-hover: #5338ff;

  /* Support/Status Colors */
  --cf-support-success: var(--color-green-60);
  --cf-support-warning: var(--color-yellow-60);
  --cf-support-failure: var(--color-red-60);
  --cf-support-info: var(--color-blue-60);

  /* Icons */
  --cf-icon-primary: var(--color-neutral-100);
  --cf-icon-secondary: var(--color-neutral-70);
  --cf-icon-disabled: var(--color-neutral-40);
  --cf-icon-on-color: var(--color-white);
  --cf-icon-interactive: var(--color-purple-70);

  /* ===== SPACING ===== */
  --cf-space-02: 0.125rem; /* 2px */
  --cf-space-04: 0.25rem; /* 4px */
  --cf-space-08: 0.5rem; /* 8px */
  --cf-space-16: 1rem; /* 16px */
  --cf-space-24: 1.5rem; /* 24px */
  --cf-space-32: 2rem; /* 32px */
  --cf-space-40: 2.5rem; /* 40px */
  --cf-space-48: 3rem; /* 48px */
  --cf-space-64: 4rem; /* 64px */
  --cf-space-80: 5rem; /* 80px */
  --cf-space-96: 6rem; /* 96px */
  --cf-space-128: 128px; /* 96px */
  --cf-space-160: 10rem; /* 160px */

  /* ===== BORDER RADIUS ===== */
  --cf-radius-sm: 0.25rem; /* 4px */
  --cf-radius-md: 0.5rem; /* 8px */
  --cf-radius-all: 9999px; /* Fully rounded */

  /* ===== ELEVATIONS / SHADOWS ===== */
  --cf-elevation-00: none;
  --cf-elevation-01: 0px 4px 8px rgba(19, 19, 22, 0.08);
  --cf-elevation-02: 0px 6px 16px rgba(19, 19, 22, 0.12);
  --cf-elevation-03: 0px 8px 20px rgba(19, 19, 22, 0.16);
  --cf-elevation-04: 0px 16px 32px rgba(19, 19, 22, 0.2);

  /* ===== LAYOUT CONSTANTS ===== */
  --cf-main-content-margin: 32px;
  --cf-main-content-max-width: 1400px;
  --cf-narrow-content-max-width: 1104px;
  --cf-main-content-min-width: 805px;
  --cf-content-no-sidebar-width: 1504px;
  --cf-content-width: 568px;
  --cf-outer-sidebar-width: 96px;
  --cf-topbar-crumbs: 32px;
  --cf-settings-card-width: 640px;
  --cf-sidebar-width: 240px;
  --cf-collapsed-sidebar-width: 24px;
  --cf-sidebar-animate-duration: 400ms;
  --cf-form-max-width: 520px;
  --cf-form-supermax-width: 720px;
  --cf-topbar-height: 56px;
  --cf-mini-banner-height: 28px;
  --cf-large-banner-height: 68px;
  --cf-topbar-navigator-max-width: 640px;
  --cf-preview-banner-height: 62px;
  --cf-bottombar-height: 87px;

  /* ===== TABLE WIDTHS ===== */
  --cf-table-width-xs: 158px;
  --cf-table-width-s: 236px;
  --cf-table-width-m: 281px;
  --cf-table-width-l: 440px;
  --cf-table-width-xl: 630px;
  --cf-table-width-xxl: 675px;
  --cf-table-width-full: 911px;

  /* ===== TYPOGRAPHY ===== */
  --cf-font-family:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --cf-font-family-heading: Poppins, 'Inter', sans-serif;
  --cf-font-family-mono:
    'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  /* ===== Z-INDEX ===== */
  --cf-z-index-popover: 5000;
}

/* ===== DARK THEME - System Preference (CSS only, no JS needed) ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    /* Backgrounds */
    --cf-background: var(--color-neutral-100);
    --cf-background-loading: var(--color-purple-100);
    --cf-surface-01: var(--color-neutral-90);
    --cf-surface-01-hover: rgba(53, 52, 61, 0.6);
    --cf-surface-02: var(--color-neutral-100);

    /* Borders */
    --cf-border-subtle: var(--color-neutral-80);
    --cf-border-strong: var(--color-neutral-60);

    /* Text */
    --cf-text-primary: var(--color-neutral-10);
    --cf-text-secondary: var(--color-neutral-30);
    --cf-text-helper: var(--color-neutral-40);
    --cf-text-disabled: var(--color-neutral-60);

    /* Links */
    --cf-link-primary: var(--color-purple-30);
    --cf-link-primary-hover: var(--color-purple-20);

    /* Interactive */
    --cf-interactive-input: #9585ff;

    /* Elevations */
    --cf-elevation-01: 0px 4px 8px rgba(0, 0, 0, 0.4);
    --cf-elevation-02: 0px 6px 16px rgba(0, 0, 0, 0.4);
    --cf-elevation-03: 0px 8px 20px rgba(0, 0, 0, 0.4);
    --cf-elevation-04: 0px 16px 32px rgba(0, 0, 0, 0.4);
  }
}

/* ===== DARK THEME - Manual Override via data-theme attribute ===== */
[data-theme='dark'] {
  /* Backgrounds */
  --cf-background: var(--color-neutral-100);
  --cf-background-loading: var(--color-purple-100);
  --cf-surface-01: var(--color-neutral-90);
  --cf-surface-01-hover: rgba(53, 52, 61, 0.6);
  --cf-surface-02: var(--color-neutral-100);

  /* Illustrations */
  --illustration_gradient_background_01: var(--color-neutral-70);

  /* Borders */
  --cf-border-subtle: var(--color-neutral-80);
  --cf-border-strong: var(--color-neutral-60);

  /* Text */
  --cf-text-primary: var(--color-neutral-10);
  --cf-text-secondary: var(--color-neutral-30);
  --cf-text-helper: var(--color-neutral-40);
  --cf-text-disabled: var(--color-neutral-60);

  /* Links */
  --cf-link-primary: var(--color-purple-30);
  --cf-link-primary-hover: var(--color-purple-20);

  /* Interactive */
  --cf-interactive-input: #9585ff;

  /* Elevations */
  --cf-elevation-01: 0px 4px 8px rgba(0, 0, 0, 0.4);
  --cf-elevation-02: 0px 6px 16px rgba(0, 0, 0, 0.4);
  --cf-elevation-03: 0px 8px 20px rgba(0, 0, 0, 0.4);
  --cf-elevation-04: 0px 16px 32px rgba(0, 0, 0, 0.4);
}

/* ============================================================================
     GLOBAL / NORMALIZE STYLES
     ============================================================================ */

/* Box-sizing reset */
html {
  box-sizing: border-box;
  height: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Body defaults */
body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background: var(--cf-surface-01);
  color: var(--cf-text-primary);
  font-family: var(--cf-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  height: 100%;
  margin: 0;
}

/* Dark theme body overrides */
[data-theme='dark'] body {
}

/* Homepage: pure white/black background instead of the near-white/near-black
   neutral tokens used elsewhere. */
:root:not([data-theme='dark']) body.is-index-page {
  --cf-background: var(--color-white);
}

[data-theme='dark'] body.is-index-page {
  --cf-background: var(--color-black);
}

/* Homepage light mode: sun icon needs to stay visible against the header
   background, unlike every other page where it uses the default link color. */
:root:not([data-theme='dark']) body.is-index-page .cf-theme-icon-light {
  color: var(--color-neutral-10);
}

/* Link defaults */
a {
  color: var(--cf-link-primary);
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: var(--cf-link-primary-hover);
}

/* Heading defaults */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--cf-text-primary);
}

/* Strong/Bold */
b,
strong {
  font-weight: 600;
}

/* Code defaults */
code,
kbd,
pre,
samp {
  font-family: var(--cf-font-family-mono);
  font-size: 1em;
}

/* Button defaults */
button {
  font: inherit;
  margin: 0;
  cursor: pointer;
}

/* Input defaults */
input,
textarea,
select {
  font: inherit;
  margin: 0;
}

/* Table defaults */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/* ============================================================================
     UTILITY CLASSES - LAYOUT
     ============================================================================ */

/* Centered content */
.cf-centered {
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 100%;
}

.cf-centered-content {
  margin: auto 208px;
  /* width: var(--cf-content-no-sidebar-width); */
}

@media (max-width: 992px) {
  .cf-centered-content {
    width: 100%;
    margin: 0 32px;
  }
}

/* Sticky positioning */
.cf-sticky {
  position: sticky;
  z-index: 1000;
  top: 0;
}

.cf-sticky-inner {
  position: relative;
  display: flex;
}

/* Flex layouts */
.cf-flex {
  display: flex;
}

.cf-flex-column {
  display: flex;
  flex-direction: column;
}

.cf-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cf-flex-space-between {
  justify-content: space-between;
}

.cf-flex-align-end {
  align-items: end;
}

/* ============================================================================
     UTILITY CLASSES - GRID
     ============================================================================ */

/* Grid containers */
.cf-grid {
  display: grid;
}

/* Grid columns - predefined layouts */
.cf-grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.cf-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cf-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cf-grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cf-grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.cf-grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.cf-grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Auto-fit columns with min-width */
.cf-grid-auto-fit-sm {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.cf-grid-auto-fit-md {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.cf-grid-auto-fit-lg {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Auto-fill columns with min-width */
.cf-grid-auto-fill-sm {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.cf-grid-auto-fill-md {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.cf-grid-auto-fill-lg {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Grid rows */
.cf-grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}
.cf-grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.cf-grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.cf-grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}
.cf-grid-rows-5 {
  grid-template-rows: repeat(5, minmax(0, 1fr));
}
.cf-grid-rows-6 {
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

/* Grid gap utilities */
.cf-gap-0 {
  gap: 0;
}
.cf-gap-2 {
  gap: var(--cf-space-02);
}
.cf-gap-4 {
  gap: var(--cf-space-04);
}
.cf-gap-8 {
  gap: var(--cf-space-08);
}
.cf-gap-16 {
  gap: var(--cf-space-16);
}
.cf-gap-24 {
  gap: var(--cf-space-24);
}
.cf-gap-32 {
  gap: var(--cf-space-32);
}
.cf-gap-40 {
  gap: var(--cf-space-40);
}
.cf-gap-48 {
  gap: var(--cf-space-48);
}

/* Column gap */
.cf-gap-x-8 {
  column-gap: var(--cf-space-08);
}
.cf-gap-x-16 {
  column-gap: var(--cf-space-16);
}
.cf-gap-x-24 {
  column-gap: var(--cf-space-24);
}
.cf-gap-x-32 {
  column-gap: var(--cf-space-32);
}

/* Row gap */
.cf-gap-y-8 {
  row-gap: var(--cf-space-08);
}
.cf-gap-y-16 {
  row-gap: var(--cf-space-16);
}
.cf-gap-y-24 {
  row-gap: var(--cf-space-24);
}
.cf-gap-y-32 {
  row-gap: var(--cf-space-32);
}

/* Grid auto-flow */
.cf-grid-flow-row {
  grid-auto-flow: row;
}
.cf-grid-flow-col {
  grid-auto-flow: column;
}
.cf-grid-flow-dense {
  grid-auto-flow: dense;
}
.cf-grid-flow-row-dense {
  grid-auto-flow: row dense;
}
.cf-grid-flow-col-dense {
  grid-auto-flow: column dense;
}

/* Grid column span */
.cf-col-span-1 {
  grid-column: span 1 / span 1;
}
.cf-col-span-2 {
  grid-column: span 2 / span 2;
}
.cf-col-span-3 {
  grid-column: span 3 / span 3;
}
.cf-col-span-4 {
  grid-column: span 4 / span 4;
}
.cf-col-span-5 {
  grid-column: span 5 / span 5;
}
.cf-col-span-6 {
  grid-column: span 6 / span 6;
}
.cf-col-span-12 {
  grid-column: span 12 / span 12;
}
.cf-col-span-full {
  grid-column: 1 / -1;
}

/* Grid row span */
.cf-row-span-1 {
  grid-row: span 1 / span 1;
}
.cf-row-span-2 {
  grid-row: span 2 / span 2;
}
.cf-row-span-3 {
  grid-row: span 3 / span 3;
}
.cf-row-span-4 {
  grid-row: span 4 / span 4;
}
.cf-row-span-5 {
  grid-row: span 5 / span 5;
}
.cf-row-span-6 {
  grid-row: span 6 / span 6;
}
.cf-row-span-full {
  grid-row: 1 / -1;
}

/* Grid column start/end */
.cf-col-start-1 {
  grid-column-start: 1;
}
.cf-col-start-2 {
  grid-column-start: 2;
}
.cf-col-start-3 {
  grid-column-start: 3;
}
.cf-col-start-auto {
  grid-column-start: auto;
}

.cf-col-end-1 {
  grid-column-end: 1;
}
.cf-col-end-2 {
  grid-column-end: 2;
}
.cf-col-end-3 {
  grid-column-end: 3;
}
.cf-col-end-auto {
  grid-column-end: auto;
}

/* Grid row start/end */
.cf-row-start-1 {
  grid-row-start: 1;
}
.cf-row-start-2 {
  grid-row-start: 2;
}
.cf-row-start-3 {
  grid-row-start: 3;
}
.cf-row-start-auto {
  grid-row-start: auto;
}

.cf-row-end-1 {
  grid-row-end: 1;
}
.cf-row-end-2 {
  grid-row-end: 2;
}
.cf-row-end-3 {
  grid-row-end: 3;
}
.cf-row-end-auto {
  grid-row-end: auto;
}

/* Grid item alignment */
.cf-justify-self-auto {
  justify-self: auto;
}
.cf-justify-self-start {
  justify-self: start;
}
.cf-justify-self-end {
  justify-self: end;
}
.cf-justify-self-center {
  justify-self: center;
}
.cf-justify-self-stretch {
  justify-self: stretch;
}

.cf-align-self-auto {
  align-self: auto;
}
.cf-align-self-start {
  align-self: start;
}
.cf-align-self-end {
  align-self: end;
}
.cf-align-self-center {
  align-self: center;
}
.cf-align-self-stretch {
  align-self: stretch;
}

/* Grid container alignment */
.cf-justify-items-start {
  justify-items: start;
}
.cf-justify-items-end {
  justify-items: end;
}
.cf-justify-items-center {
  justify-items: center;
}
.cf-justify-items-stretch {
  justify-items: stretch;
}

.cf-align-items-start {
  align-items: start;
}
.cf-align-items-end {
  align-items: end;
}
.cf-align-items-center {
  align-items: center;
}
.cf-align-items-stretch {
  align-items: stretch;
}

.cf-justify-content-start {
  justify-content: start;
}
.cf-justify-content-end {
  justify-content: end;
}
.cf-justify-content-center {
  justify-content: center;
}
.cf-justify-content-between {
  justify-content: space-between;
}
.cf-justify-content-around {
  justify-content: space-around;
}
.cf-justify-content-evenly {
  justify-content: space-evenly;
}

.cf-align-content-start {
  align-content: start;
}
.cf-align-content-end {
  align-content: end;
}
.cf-align-content-center {
  align-content: center;
}
.cf-align-content-between {
  align-content: space-between;
}
.cf-align-content-around {
  align-content: space-around;
}
.cf-align-content-evenly {
  align-content: space-evenly;
}

/* ============================================================================
     UTILITY CLASSES - FORM ELEMENTS
     ============================================================================ */

/* Fieldsets */
.cf-fieldset {
  max-width: var(--cf-form-max-width);
  padding: 0;
  align-content: flex-start;
  align-items: flex-start;
  border: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin-bottom: 32px;
}

.cf-fieldset-small {
  max-width: var(--cf-form-max-width);
  padding: 0;
  align-content: flex-start;
  align-items: flex-start;
  border: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin-bottom: 16px;
}

.cf-field-wrapper {
  margin-bottom: 32px;
  flex: 1;
}

.cf-full-field {
  flex-basis: 100% !important;
}

/* Form rows */
.cf-form-row {
  display: flex;
}

.cf-form-row > * {
  flex: 1;
}

.cf-form-row > *:not(:first-child) {
  margin-left: 32px;
}

/* ============================================================================
     UTILITY CLASSES - SECTIONS & HEADERS
     ============================================================================ */

.cf-section {
  margin-bottom: 30px;
}

.cf-section-header {
  border-bottom: 2px solid var(--cf-border-subtle);
  margin-bottom: 10px;
  padding: 10px 0;
  text-transform: uppercase;
}

.cf-small-section-header {
  font-size: 14px;
  font-weight: 500;
  color: var(--cf-text-primary);
  margin-bottom: 3px;
}

.cf-large-field-header {
  width: 100%;
  margin-bottom: 26px;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.15px;
  color: var(--cf-text-primary);
}

/* ============================================================================
     UTILITY CLASSES - TOOLBAR
     ============================================================================ */

.cf-toolbar {
  display: flex;
  align-items: center;
  margin: 0;
}

.cf-toolbar-left {
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  margin: 0;
  max-width: 100%;
}

.cf-toolbar-item {
  display: flex;
  max-width: 100%;
}

.cf-toolbar-item:not(:first-child) {
  margin-left: 12px;
}

/* ============================================================================
     UTILITY CLASSES - CARDS & PANELS
     ============================================================================ */

.cf-card {
  background-color: var(--cf-surface-01);
  border-radius: var(--cf-radius-md);
  border: solid 1px var(--cf-border-subtle);
  padding: 20px 24px;
}

.cf-rounded-panel {
  background-color: var(--cf-surface-01);
  border-radius: var(--cf-radius-sm);
  box-shadow: var(--cf-elevation-01);
  padding: 16px;
}

.cf-info-card {
  background-color: var(--cf-surface-01);
  border-radius: var(--cf-radius-md);
  border: solid 1px var(--cf-border-subtle);
  margin-bottom: 24px;
  padding: 20px 24px;
}

.cf-expandable-table-wrapper {
  border-radius: var(--cf-radius-sm);
  border: solid 1px var(--cf-border-subtle);
  background-color: var(--cf-surface-01);
  padding: 18px 24px;
}

/* ============================================================================
     UTILITY CLASSES - CODE & TEXT
     ============================================================================ */

.cf-code-box {
  font-family: var(--cf-font-family-mono);
  font-size: 12px;
  line-height: 18px;
  color: var(--cf-text-primary);
  position: relative;
  padding: 12px 16px 10px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  max-width: 870px;
  background: var(--cf-surface-01);
  border-radius: var(--cf-radius-sm);
}

.cf-truncated-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.cf-warning-text {
  margin: 0;
  padding: 10px 16px;
  border-radius: var(--cf-radius-sm);
  background: var(--color-yellow-10);
  color: var(--cf-text-primary);
}

/* ============================================================================
     UTILITY CLASSES - TYPOGRAPHY
     ============================================================================ */

/* Headings */
.cf-h1 {
  font-weight: 200;
  font-size: 48px;
  line-height: 56px;
  color: var(--cf-text-primary);
  margin: 0;
  letter-spacing: -2px;
}

.cf-h2 {
  font-weight: bold;
  font-size: 32px;
  line-height: 40px;
  color: var(--cf-text-primary);
  margin: 0;
  letter-spacing: -1px;
}

.cf-h3 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: var(--cf-text-primary);
  letter-spacing: -1px;
}

.cf-h4 {
  margin: 0;
  color: var(--cf-text-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.5px;
}

.cf-h5 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--cf-text-helper);
  letter-spacing: -0.5px;
}

/* Body text */
.cf-body {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.25px;
  color: var(--cf-text-primary);
}

.cf-body-small {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.25px;
  color: var(--cf-text-primary);
}

.cf-strong {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.1px;
  color: var(--cf-text-primary);
}

.cf-code {
  font-family: var(--cf-font-family-mono);
  font-size: 12px;
  line-height: 18px;
  color: var(--cf-text-primary);
}

.cf-tiny {
  font-weight: 500;
  font-size: 10px;
  line-height: 18px;
  letter-spacing: 0.65px;
  color: var(--cf-text-primary);
}

/* ============================================================================
     UTILITY CLASSES - BUTTONS
     ============================================================================ */

.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: none;
  border-radius: var(--cf-radius-sm);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  cursor: pointer;
  transition: all 0.2s;
}

.cf-btn-primary,
.cf-btn-primary:visited {
  background-color: var(--cf-button-primary);
  color: var(--cf-text-on-color);
}

.cf-btn-primary:hover,
.cf-btn-primary:visited:hover {
  background-color: var(--cf-button-primary-hover);
  color: var(--cf-text-on-color);
}

.cf-btn-primary:active,
.cf-btn-primary:visited:active {
  background-color: var(--cf-button-primary-active);
  color: var(--cf-text-on-color);
}

.cf-btn-secondary {
  background-color: transparent;
  color: var(--cf-interactive);
  border: 1px solid var(--cf-border-strong);
}

.cf-btn-secondary:hover {
  background-color: var(--cf-background-hover);
}

.cf-btn:disabled {
  background-color: var(--cf-button-disabled);
  color: var(--cf-text-disabled);
  cursor: not-allowed;
}

/* ============================================================================
     UTILITY CLASSES - SPACING
     ============================================================================ */

/* Margin utilities */
.cf-m-0 {
  margin: 0;
}
.cf-m-2 {
  margin: var(--cf-space-02);
}
.cf-m-4 {
  margin: var(--cf-space-04);
}
.cf-m-8 {
  margin: var(--cf-space-08);
}
.cf-m-16 {
  margin: var(--cf-space-16);
}
.cf-m-24 {
  margin: var(--cf-space-24);
}
.cf-m-32 {
  margin: var(--cf-space-32);
}

.cf-mt-0 {
  margin-top: 0;
}
.cf-mt-8 {
  margin-top: var(--cf-space-08);
}
.cf-mt-16 {
  margin-top: var(--cf-space-16);
}
.cf-mt-24 {
  margin-top: var(--cf-space-24);
}
.cf-mt-32 {
  margin-top: var(--cf-space-32);
}

.cf-mb-0 {
  margin-bottom: 0;
}
.cf-mb-8 {
  margin-bottom: var(--cf-space-08);
}
.cf-mb-16 {
  margin-bottom: var(--cf-space-16);
}
.cf-mb-24 {
  margin-bottom: var(--cf-space-24);
}
.cf-mb-32 {
  margin-bottom: var(--cf-space-32);
}

.cf-ml-8 {
  margin-left: var(--cf-space-08);
}
.cf-ml-16 {
  margin-left: var(--cf-space-16);
}
.cf-ml-24 {
  margin-left: var(--cf-space-24);
}

.cf-mr-8 {
  margin-right: var(--cf-space-08);
}
.cf-mr-16 {
  margin-right: var(--cf-space-16);
}
.cf-mr-24 {
  margin-right: var(--cf-space-24);
}

/* Padding utilities */
.cf-p-0 {
  padding: 0;
}
.cf-p-8 {
  padding: var(--cf-space-08);
}
.cf-p-16 {
  padding: var(--cf-space-16);
}
.cf-p-24 {
  padding: var(--cf-space-24);
}
.cf-p-32 {
  padding: var(--cf-space-32);
}

/* ============================================================================
     UTILITY CLASSES - BORDERS & DIVIDERS
     ============================================================================ */

.cf-border-subtle {
  border: 1px solid var(--cf-border-subtle);
}

.cf-border-strong {
  border: 1px solid var(--cf-border-strong);
}

.cf-border-top {
  border-top: 1px solid var(--cf-border-subtle);
}

.cf-border-bottom {
  border-bottom: 1px solid var(--cf-border-subtle);
}

.cf-hr {
  height: 2px;
  border: none;
  border-top: solid 1px var(--cf-border-subtle);
  margin: 16px 0;
}

/* Accent borders (thicker colored borders for highlights) */
.cf-accent-left {
  border-left: 4px solid var(--cf-interactive);
}
.cf-accent-left-8 {
  border-left: 8px solid var(--cf-interactive);
}

.cf-accent-right {
  border-right: 4px solid var(--cf-interactive);
}

.cf-accent-top {
  border-top: 4px solid var(--cf-interactive);
}

.cf-accent-bottom {
  border-bottom: 4px solid var(--cf-interactive);
}

/* Accent border colors */
.cf-accent-primary {
  border-left-color: var(--color-purple-60);
}

.cf-accent-blue {
  border-left-color: var(--color-blue-60);
}

.cf-accent-teal {
  border-left-color: var(--color-teal-60);
}

.cf-accent-green {
  border-left-color: var(--color-green-60);
}

.cf-accent-yellow {
  border-left-color: var(--color-yellow-60);
}

.cf-accent-orange {
  border-left-color: var(--color-orange-60);
}

.cf-accent-red {
  border-left-color: var(--color-red-60);
}

.cf-accent-magenta {
  border-left-color: var(--color-magenta-60);
}

.cf-accent-neutral {
  border-left-color: var(--color-neutral-60);
}

/* Callout boxes with left accent */
.cf-callout {
  background-color: var(--cf-surface-01);
  border: 1px solid var(--cf-border-subtle);
  border-left: 4px solid var(--cf-interactive);
  border-radius: var(--cf-radius-sm);
  padding: var(--cf-space-24);
}

.cf-callout-primary {
  border-left-color: var(--color-purple-60);
  background-color: var(--cf-surface-01);
}

.cf-callout-info {
  border-left-color: var(--color-blue-60);
  background-color: var(--color-blue-10);
}

.cf-callout-success {
  border-left-color: var(--color-green-60);
  background-color: var(--color-green-10);
}

.cf-callout-warning {
  border-left-color: var(--color-yellow-60);
  background-color: var(--color-yellow-10);
}

.cf-callout-error {
  border-left-color: var(--color-red-60);
  background-color: var(--color-red-10);
}

/* ============================================================================
     UTILITY CLASSES - STATUS & SUPPORT
     ============================================================================ */

.cf-status-success {
  color: var(--cf-support-success);
}

.cf-status-warning {
  color: var(--cf-support-warning);
}

.cf-status-failure {
  color: var(--cf-support-failure);
}

.cf-status-info {
  color: var(--cf-support-info);
}

/* Status badges */
.cf-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--cf-radius-all);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.cf-badge-success {
  background-color: var(--color-green-10);
  color: var(--color-green-70);
}

.cf-badge-warning {
  background-color: var(--color-yellow-10);
  color: var(--color-yellow-70);
}

.cf-badge-failure {
  background-color: var(--color-red-10);
  color: var(--color-red-70);
}

.cf-badge-info {
  background-color: var(--color-blue-10);
  color: var(--color-blue-70);
}

.cf-badge-neutral {
  background-color: var(--color-neutral-10);
  color: var(--color-neutral-70);
}

/* ============================================================================
     UTILITY CLASSES - INPUT FIELDS
     ============================================================================ */

/* Input with icon wrapper */
.cf-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Input with left icon */
.cf-input-with-icon {
  padding-left: 40px;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--cf-border-strong);
  background: transparent;
  color: var(--cf-text-primary);
  font-family: var(--cf-font-family);
  font-size: 14px;
  line-height: 22px;
  padding-top: 12px;
  padding-bottom: 12px;
  outline: none;
  transition: border-color 0.2s;
}

.cf-input-with-icon:focus {
  border-bottom-color: var(--cf-border-interactive);
}

.cf-input-with-icon::placeholder {
  color: var(--cf-link-primary);
  opacity: 1;
}

/* Icon positioning inside input */
.cf-input-icon-left {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cf-link-primary);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cf-input-icon-right {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cf-text-helper);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Underline/bottom-border only input */
.cf-input-underline {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--cf-border-strong);
  background: transparent;
  color: var(--cf-text-primary);
  font-family: var(--cf-font-family);
  font-size: 14px;
  line-height: 22px;
  padding: 12px 0;
  outline: none;
  transition: border-color 0.2s;
}

.cf-input-underline:focus {
  border-bottom-color: var(--cf-border-interactive);
}

.cf-input-underline::placeholder {
  color: var(--cf-text-helper);
}

/* Search input variant */
.cf-search-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--cf-border-strong);
  background-color: var(--cf-background);
  color: var(--cf-text-primary);
  font-family: var(--cf-font-family);
  font-size: 16px;
  line-height: 24px;
  outline: none;
  transition: all 0.2s;
}

.cf-search-input:focus {
  border-bottom-color: var(--cf-border-interactive);
  background: var(--cf-surface-01);
}

.cf-search-input::placeholder {
  color: var(--cf-link-primary);
  opacity: 1;
}

/* Standard input (bordered) */
.cf-input {
  width: 100%;
  padding: var(--cf-space-16);
  border: 1px solid var(--cf-border-strong);
  border-radius: var(--cf-radius-sm);
  background: var(--cf-field-on-bg);
  color: var(--cf-text-primary);
  font-family: var(--cf-font-family);
  font-size: 14px;
  line-height: 22px;
  outline: none;
  transition: border-color 0.2s;
}

.cf-input:focus {
  border-color: var(--cf-border-interactive);
}

.cf-input::placeholder {
  color: var(--cf-text-helper);
}

.cf-input:disabled {
  background: var(--cf-background);
  color: var(--cf-text-disabled);
  cursor: not-allowed;
}

/* Textarea */
.cf-textarea {
  width: 100%;
  padding: var(--cf-space-16);
  border: 1px solid var(--cf-border-strong);
  border-radius: var(--cf-radius-sm);
  background: var(--cf-field-on-bg);
  color: var(--cf-text-primary);
  font-family: var(--cf-font-family);
  font-size: 14px;
  line-height: 22px;
  outline: none;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.2s;
}

.cf-textarea:focus {
  border-color: var(--cf-border-interactive);
}

.cf-textarea::placeholder {
  color: var(--cf-text-helper);
}

/* ============================================================================
     UTILITY CLASSES - MISC
     ============================================================================ */

.cf-hide {
  display: none !important;
}

.cf-visible {
  visibility: visible;
}

.cf-invisible {
  visibility: hidden;
}

.cf-overflow-hidden {
  overflow: hidden;
}

.cf-overflow-auto {
  overflow: auto;
}

.cf-text-center {
  text-align: center;
}

.cf-text-left {
  text-align: left;
}

.cf-text-right {
  text-align: right;
}

.cf-cursor-pointer {
  cursor: pointer;
}

.cf-cursor-not-allowed {
  cursor: not-allowed;
}

/* ============================================================================
     SUMMARY TABLE
     ============================================================================ */

.cf-summary-table {
  width: 100%;
  table-layout: fixed;
}

.cf-summary-table tbody tr td {
  padding: 3px 0;
  color: var(--cf-text-secondary);
  white-space: nowrap;
}

.cf-summary-table tbody tr td:first-child {
  color: var(--cf-text-primary);
  vertical-align: top;
  width: 150px;
}

/* ============================================================================
     INFO CARD COMPONENTS
     ============================================================================ */

.cf-info-card-content {
  max-width: var(--cf-form-supermax-width);
}

.cf-info-card-section-title {
  position: relative;
  margin-bottom: 10px;
}

.cf-info-card-subheader {
  margin-top: 26px;
  color: var(--cf-text-primary);
  font-weight: 600;
  line-height: 1.5;
}

.cf-info-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  word-break: break-all;
}

.cf-info-card-grid-auto {
  display: grid;
  grid-template-columns: max-content auto;
  grid-column-gap: 40px;
  word-break: break-all;
}

.cf-info-card-row-title {
  padding: 4px 0;
}

.cf-info-card-row-value {
  color: var(--cf-text-helper);
}

/* ============================================================================
     FULL SCREEN SEARCH COMPONENT
     ============================================================================ */

.full-screen-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--cf-background, #ffffff);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.full-screen-search-overlay.visible {
  opacity: 1;
}

.full-screen-search-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--cf-background, #ffffff);
}

.full-screen-search-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--cf-space-64, 64px) var(--cf-space-32, 32px) var(--cf-space-48, 48px);
  min-height: 40vh;
  background: var(--cf-background, #ffffff);
}

.full-screen-search-title {
  font-size: 48px;
  font-weight: 700;
  color: var(--cf-text-primary, #000);
  margin: 0 0 var(--cf-space-16, 16px) 0;
  text-align: center;
  font-family: var(--cf-font-family, inherit);
}

.full-screen-search-subtitle {
  font-size: 18px;
  color: var(--cf-text-secondary, #666);
  margin: 0 0 var(--cf-space-48, 48px) 0;
  text-align: center;
  font-family: var(--cf-font-family, inherit);
}

.full-screen-search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin-bottom: var(--cf-space-24, 24px);
}

.full-screen-search-icon {
  position: absolute;
  left: 20px;
  color: var(--cf-text-helper, #666);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.full-screen-search-input {
  width: 100%;
  padding: 20px 20px 20px 56px;
  border: 2px solid var(--cf-border-subtle, #e5e5e5);
  border-radius: var(--cf-radius-lg, 12px);
  background: var(--cf-field-on-bg, #ffffff);
  color: var(--cf-text-primary, #000);
  font-family: var(--cf-font-family, inherit);
  font-size: 20px;
  line-height: 28px;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.full-screen-search-input:focus {
  border-color: var(--cf-border-interactive, #0079ff);
}

.full-screen-search-input::placeholder {
  color: var(--cf-text-helper, #666);
}

.full-screen-search-close {
  position: absolute;
  top: var(--cf-space-24, 24px);
  right: var(--cf-space-24, 24px);
  background: none;
  border: none;
  padding: 12px;
  border-radius: var(--cf-radius-md, 8px);
  color: var(--cf-text-helper, #666);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.full-screen-search-close:hover {
  background: var(--cf-surface-02, #f5f5f5);
  color: var(--cf-text-primary, #000);
}

.full-screen-search-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  background: var(--cf-background, #ffffff);
}

.full-screen-search-results {
  width: 100%;
  max-width: 800px;
  padding: 0 var(--cf-space-32, 32px) var(--cf-space-32, 32px);
  min-height: 200px;
}

.search-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  text-align: center;
}

.search-placeholder-icon {
  margin-bottom: var(--cf-space-16, 16px);
}

.search-placeholder-text {
  color: var(--cf-text-helper, #666);
  font-size: 16px;
  margin: 0;
}

.search-result-item {
  padding: var(--cf-space-16, 16px);
  border-bottom: 1px solid var(--cf-border-subtle, #e5e5e5);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.search-result-item:hover {
  background: var(--cf-surface-02, #f5f5f5);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--cf-text-primary, #000);
  margin: 0 0 var(--cf-space-08, 8px) 0;
}

.search-result-snippet {
  font-size: 14px;
  color: var(--cf-text-secondary, #666);
  margin: 0;
  line-height: 1.4;
}

.search-result-url {
  font-size: 12px;
  color: var(--cf-text-helper, #999);
  margin: var(--cf-space-04, 4px) 0 0 0;
}

.search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cf-space-32, 32px);
  color: var(--cf-text-helper, #666);
}

.search-no-results {
  text-align: center;
  padding: var(--cf-space-32, 32px);
  color: var(--cf-text-helper, #666);
}

.search-error {
  text-align: center;
  padding: var(--cf-space-32, 32px);
  color: var(--cf-text-error, #d32f2f);
}

/* Conversation UI Styles */
.conversation-container {
  display: flex;
  flex-direction: column;
  gap: var(--cf-space-24, 24px);
}

.conversation-item {
  display: flex;
  flex-direction: column;
  gap: var(--cf-space-08, 8px);
}

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

.user-message .message-content {
  background: var(--cf-border-interactive, #0079ff);
  color: white;
  padding: var(--cf-space-12, 12px) var(--cf-space-16, 16px);
  border-radius: var(--cf-radius-md, 8px) var(--cf-radius-md, 8px) var(--cf-radius-sm, 4px)
    var(--cf-radius-md, 8px);
  max-width: 80%;
  align-self: flex-end;
}

.ai-response {
  align-items: flex-start;
}

.ai-response .message-content {
  background: var(--cf-surface-02, #f5f5f5);
  color: var(--cf-text-primary, #000);
  padding: var(--cf-space-12, 12px) var(--cf-space-16, 16px);
  border-radius: var(--cf-radius-md, 8px) var(--cf-radius-md, 8px) var(--cf-radius-md, 8px)
    var(--cf-radius-sm, 4px);
  max-width: 90%;
  line-height: 1.5;
}

.message-header {
  font-size: 12px;
  color: var(--cf-text-helper, #666);
  margin-bottom: var(--cf-space-04, 4px);
}

.user-message .message-header {
  text-align: right;
}

.typing-indicator {
  animation: pulse 1.5s ease-in-out infinite;
  color: var(--cf-text-helper, #666);
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.follow-up-container {
  margin-top: var(--cf-space-16, 16px);
  padding-top: var(--cf-space-16, 16px);
  border-top: 1px solid var(--cf-border-subtle, #e5e5e5);
}

.follow-up-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--cf-space-08, 8px);
  background: var(--cf-field-on-bg, #ffffff);
  border: 1px solid var(--cf-border-subtle, #e5e5e5);
  border-radius: var(--cf-radius-md, 8px);
  padding: var(--cf-space-08, 8px);
}

.follow-up-input {
  flex: 1;
  border: none;
  outline: none;
  padding: var(--cf-space-08, 8px);
  font-size: 14px;
  background: transparent;
  color: var(--cf-text-primary, #000);
}

.follow-up-input::placeholder {
  color: var(--cf-text-helper, #666);
}

.follow-up-send {
  background: var(--cf-border-interactive, #0079ff);
  color: white;
  border: none;
  border-radius: var(--cf-radius-sm, 4px);
  padding: var(--cf-space-08, 8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.follow-up-send:hover {
  background: var(--cf-border-interactive-hover, #0056b3);
}

.follow-up-send:disabled {
  background: var(--cf-text-disabled, #ccc);
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .full-screen-search-header {
    padding: var(--cf-space-32, 32px) var(--cf-space-16, 16px) var(--cf-space-24, 24px);
    min-height: 35vh;
  }

  .full-screen-search-title {
    font-size: 32px;
  }

  .full-screen-search-subtitle {
    font-size: 16px;
    margin-bottom: var(--cf-space-32, 32px);
  }

  .full-screen-search-input-wrapper {
    max-width: none;
  }

  .full-screen-search-input {
    font-size: 18px;
    padding: 16px 16px 16px 48px;
  }

  .full-screen-search-icon {
    left: 16px;
  }

  .full-screen-search-results {
    padding: 0 var(--cf-space-16, 16px) var(--cf-space-16, 16px);
  }

  .full-screen-search-close {
    top: var(--cf-space-16, 16px);
    right: var(--cf-space-16, 16px);
  }

  .user-message .message-content,
  .ai-response .message-content {
    max-width: 95%;
  }

  .conversation-container {
    gap: var(--cf-space-16, 16px);
  }
}
/* ============================================================================
     END OF CONFLUENT COMMON STYLES
     ============================================================================ */

/* ============================================================================
     STARLIGHT OVERRIDES
     ============================================================================ */

main > .content-panel:first-child,
.sl-container > h1:first-child {
  padding: 8px 16px;
}

.sl-container {
  margin-inline: unset;
  max-width: unset;
}

/* Hide the _top/Overview link in TOC */
starlight-toc a[href='#_top'] {
  visibility: hidden;
  opacity: 0;
  height: 0;
}

/* TOC active link highlighting on scroll - multi-section like MDN */
starlight-toc a {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  border-left: 2px solid transparent;
  margin-left: -2px;
  color: var(--cf-text-secondary);
}

starlight-toc a[data-visible='true'] {
  color: var(--cf-text-primary);
  font-weight: 600;
  border-left-color: var(--cf-link-primary);
  background-color: var(--cf-background-loading);
  border-radius: 0;
}

/* First visible item - rounded top corners */
starlight-toc a[data-visible='true'][data-visible-first='true'] {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* Last visible item - rounded bottom corners */
starlight-toc a[data-visible='true'][data-visible-last='true'] {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Dark mode TOC overrides */
[data-theme='dark'] starlight-toc a[data-visible='true'] {
}

/* Only unset margin-top for the first h1 on the page */
.sl-markdown-content .sl-heading-wrapper.level-h1:first-of-type {
  margin-top: unset;
}

/* ============================================================================
     SIDEBAR STYLES - Table of Contents Navigation
     Uses existing CF design tokens for consistency
     ============================================================================ */

/* Sidebar container background */
.sidebar-pane,
.sl-sidebar {
  background-color: var(--cf-background);
}

/* Sidebar navigation links */
.sidebar-content a,
.sl-sidebar a {
  display: flex;
  align-items: center;
  padding: var(--cf-space-08) var(--cf-space-16);
  font-size: 14px;
  font-weight: 400;
  color: var(--cf-text-secondary);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
  line-height: 20px;
  text-overflow: ellipsis;
}

.sidebar-content a:hover,
.sl-sidebar a:hover {
  color: var(--cf-text-primary);
  background-color: var(--cf-surface-01-hover);
}

/* Active/current page - purple left border + light purple background */
.sidebar-content a[aria-current='page'],
.sidebar-content a[data-current='true'],
.sl-sidebar a[aria-current='page'] {
  color: var(--cf-text-primary);
  font-weight: 600;
  background-color: var(--cf-background-selected);
  border-left-color: var(--cf-border-interactive);
}

/* Group labels / section headers - normal weight, only active item is bold */
.sidebar-content .group-label,
.sl-sidebar .group-label,
.sl-sidebar .group-label .large,
.sl-sidebar summary .large,
.sl-sidebar summary span,
span.group-label,
span.group-label span.large {
  font-size: 0.875rem;
  font-weight: 400 !important;
  color: var(--cf-text-primary);
}

/* Separator between top-level sections */
.sidebar-content .top-level > li + li,
.sl-sidebar .top-level > li + li {
  border-top: 1px solid var(--cf-border-subtle);
  margin-top: var(--cf-space-08);
  padding-top: var(--cf-space-08);
}

/* Nested list indentation */
.sidebar-content ul ul a,
.sl-sidebar ul ul a {
  padding-left: var(--cf-space-32);
}

.sidebar-content ul ul ul a,
.sl-sidebar ul ul ul a {
  padding-left: var(--cf-space-48);
}

/* Collapsible section styling */
.sidebar-content details summary,
.sl-sidebar details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.sidebar-content details summary::-webkit-details-marker,
.sl-sidebar details summary::-webkit-details-marker {
  display: none;
}

/* ============================================================================
     CARD LAYOUT STYLES - Homepage and Landing Pages
     ============================================================================ */

/* Content sections */
.content-section {
  padding: var(--cf-space-48) 0;
}

.content-section.dark {
  background-color: var(--color-neutral-90);
  color: var(--color-white);
}

.content-section.divider {
  border-top: 1px solid var(--cf-border-subtle);
}

.content-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--cf-space-24);
}

.content-section-title {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: var(--cf-space-24);
  color: var(--cf-text-primary);
}

.content-section.dark .content-section-title {
  color: var(--color-white);
}

.content-section-description {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: var(--cf-space-24);
  max-width: 800px;
}

/* Hero section */
.section-hero {
  position: relative;
  padding: var(--cf-space-64) 0;
  text-align: center;
}

.section-hero .bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.section-hero .content-section-inner {
  position: relative;
  z-index: 1;
}

/* CTA Button */
.cta-button-blue {
  display: inline-block;
  background-color: var(--color-purple-60);
  color: var(--color-white);
  padding: var(--cf-space-12) var(--cf-space-24);
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.cta-button-blue:hover {
  background-color: var(--color-purple-70);
  color: var(--color-white);
}

.cta-button-blue.slim {
  padding: var(--cf-space-08) var(--cf-space-16);
}

/* Card Row - Grid Layout */
.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--cf-space-24);
}

/* Card Base Styles */
.card {
  display: flex;
  flex-direction: column;
  background-color: var(--cf-surface-01);
  border: 1px solid var(--cf-border-subtle);
  border-radius: 8px;
  padding: var(--cf-space-24);
  text-decoration: none;
  color: var(--cf-text-primary);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.card:hover {
  border-color: var(--color-purple-40);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

/* Image Card */
.card.image-card {
  padding: 0;
  overflow: hidden;
}

.card.image-card .card-image-wrapper {
  width: 100%;
  height: 160px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cf-surface-02);
}

.card.image-card .card-image-wrapper.dark {
  background-color: var(--color-neutral-90);
}

.card.image-card .card-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.card.image-card .card-title,
.card.image-card .card-text {
  padding: 0 var(--cf-space-24);
}

.card.image-card .card-title {
  padding-top: var(--cf-space-16);
}

.card.image-card .card-text {
  padding-bottom: var(--cf-space-24);
}

/* Icon Card */
.card.icon-card {
  flex-direction: column;
}

.card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--cf-space-16);
}

/* Card Title */
.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--cf-text-primary);
  margin-bottom: var(--cf-space-08);
}

.card-title.underlined {
  border-bottom: 2px solid transparent;
}

.card:hover .card-title.underlined {
  border-bottom-color: var(--color-purple-60);
}

/* Card Text */
.card-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cf-text-secondary);
  flex-grow: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .card-row {
    grid-template-columns: 1fr;
  }

  .content-section {
    padding: var(--cf-space-32) 0;
  }

  .section-hero {
    padding: var(--cf-space-48) 0;
  }
}