/*fern-site-stylesheet*/:root {
  --header-height: 80px;
  --header-height-real: 80px;
  --mobile-header-height-real: 64px;
  --content-width: 880px;
  --sidebar-width: 300px;
  --page-width: 100vw;
  --logo-height: 22px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

@media not all and (min-width: 48rem) {
  :root { --header-height: var(--mobile-header-height-real); }
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #fafefd;
  --accent-2: #f3fbf9;
  --accent-3: #dff8f3;
  --accent-4: #ccf3eb;
  --accent-5: #b7ebe1;
  --accent-6: #a1ded3;
  --accent-7: #83cdc0;
  --accent-8: #54b9a9;
  --accent-9: #12a594;
  --accent-10: #009888;
  --accent-11: #008071;
  --accent-12: #0f3d36;

  --accent-a1: #00cc9905;
  --accent-a2: #00aa800c;
  --accent-a3: #00c8a020;
  --accent-a4: #00c39b33;
  --accent-a5: #00b99548;
  --accent-a6: #00a6885e;
  --accent-a7: #00997e7c;
  --accent-a8: #00977fab;
  --accent-a9: #009e8ced;
  --accent-a10: #009888;
  --accent-a11: #008071;
  --accent-a12: #003129f0;

  --accent-contrast: #fff;
  --accent-surface: #f0faf8cc;
  --accent-indicator: #12a594;
  --accent-track: #12a594;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0047 182);
      --accent-2: oklch(98.1% 0.009 182);
      --accent-3: oklch(96.1% 0.027 182);
      --accent-4: oklch(93.5% 0.0419 182);
      --accent-5: oklch(90% 0.0542 182);
      --accent-6: oklch(85.6% 0.0643 182);
      --accent-7: oklch(79.7% 0.0764 182);
      --accent-8: oklch(72.1% 0.0973 182);
      --accent-9: oklch(64.9% 0.1136 182);
      --accent-10: oklch(60.9% 0.1097 182);
      --accent-11: oklch(53% 0.1136 182);
      --accent-12: oklch(32.7% 0.0505 182);

      --accent-a1: color(display-p3 0.0235 0.7569 0.5137 / 0.016);
      --accent-a2: color(display-p3 0.0196 0.6471 0.4667 / 0.044);
      --accent-a3: color(display-p3 0.0039 0.7059 0.5569 / 0.106);
      --accent-a4: color(display-p3 0.0039 0.702 0.5373 / 0.169);
      --accent-a5: color(display-p3 0.0039 0.6588 0.5098 / 0.24);
      --accent-a6: color(display-p3 0.0039 0.5686 0.4588 / 0.318);
      --accent-a7: color(display-p3 0.0039 0.5176 0.4118 / 0.42);
      --accent-a8: color(display-p3 0 0.502 0.4039 / 0.565);
      --accent-a9: color(display-p3 0 0.4863 0.4039 / 0.702);
      --accent-a10: color(display-p3 0 0.4431 0.3686 / 0.738);
      --accent-a11: color(display-p3 0 0.3569 0.2902 / 0.785);
      --accent-a12: color(display-p3 0 0.1373 0.1098 / 0.887);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9451 0.9804 0.9725 / 0.8);
      --accent-indicator: oklch(64.9% 0.1136 182);
      --accent-track: oklch(64.9% 0.1136 182);
    }
  }
}


.light, :root {
  --grayscale-1: #fbfdfc;
  --grayscale-2: #f7f9f8;
  --grayscale-3: #eef1f0;
  --grayscale-4: #e6e9e8;
  --grayscale-5: #dfe2e0;
  --grayscale-6: #d7dad9;
  --grayscale-7: #cbcfcd;
  --grayscale-8: #b8bcba;
  --grayscale-9: #868e8b;
  --grayscale-10: #7c8481;
  --grayscale-11: #5f6563;
  --grayscale-12: #1a211e;

  --grayscale-a1: #00804004;
  --grayscale-a2: #00402008;
  --grayscale-a3: #002d1e11;
  --grayscale-a4: #001f1519;
  --grayscale-a5: #00180820;
  --grayscale-a6: #00140d28;
  --grayscale-a7: #00140a34;
  --grayscale-a8: #000f0847;
  --grayscale-a9: #00110b79;
  --grayscale-a10: #00100a83;
  --grayscale-a11: #000a07a0;
  --grayscale-a12: #000805e5;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #868e8b;
  --grayscale-track: #868e8b;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.986 0.992 0.988);
      --grayscale-2: color(display-p3 0.97 0.977 0.974);
      --grayscale-3: color(display-p3 0.935 0.944 0.94);
      --grayscale-4: color(display-p3 0.904 0.913 0.909);
      --grayscale-5: color(display-p3 0.875 0.885 0.88);
      --grayscale-6: color(display-p3 0.844 0.854 0.849);
      --grayscale-7: color(display-p3 0.8 0.811 0.806);
      --grayscale-8: color(display-p3 0.725 0.738 0.732);
      --grayscale-9: color(display-p3 0.531 0.556 0.546);
      --grayscale-10: color(display-p3 0.492 0.515 0.506);
      --grayscale-11: color(display-p3 0.377 0.395 0.389);
      --grayscale-12: color(display-p3 0.107 0.129 0.118);

      --grayscale-a1: #00804004;
      --grayscale-a2: #00402008;
      --grayscale-a3: #002d1e11;
      --grayscale-a4: #001f1519;
      --grayscale-a5: #00180820;
      --grayscale-a6: #00140d28;
      --grayscale-a7: #00140a34;
      --grayscale-a8: #000f0847;
      --grayscale-a9: #00110b79;
      --grayscale-a10: #00100a83;
      --grayscale-a11: #000a07a0;
      --grayscale-a12: #000805e5;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.531 0.556 0.546);
      --grayscale-track: color(display-p3 0.531 0.556 0.546);
    }
  }
}


.dark {
  --accent-1: #09100f;
  --accent-2: #101c19;
  --accent-3: #0e2d28;
  --accent-4: #043b34;
  --accent-5: #0b4840;
  --accent-6: #16574e;
  --accent-7: #1e695f;
  --accent-8: #217f72;
  --accent-9: #12a594;
  --accent-10: #009888;
  --accent-11: #55d2c0;
  --accent-12: #aaf0e3;

  --accent-a1: #00b80003;
  --accent-a2: #31fc790f;
  --accent-a3: #0ffeb521;
  --accent-a4: #00fec330;
  --accent-a5: #02fccd3e;
  --accent-a6: #28fdd44e;
  --accent-a7: #38fddb61;
  --accent-a8: #37ffdd78;
  --accent-a9: #15ffe1a0;
  --accent-a10: #00fede93;
  --accent-a11: #65fee7d0;
  --accent-a12: #b4fef0f0;

  --accent-contrast: #fff;
  --accent-surface: #122a1f80;
  --accent-indicator: #12a594;
  --accent-track: #12a594;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(16.6% 0.0123 182);
      --accent-2: oklch(21.3% 0.0169 182);
      --accent-3: oklch(27.2% 0.0378 182);
      --accent-4: oklch(31.6% 0.0546 182);
      --accent-5: oklch(36.2% 0.0601 182);
      --accent-6: oklch(41.3% 0.0654 182);
      --accent-7: oklch(47.3% 0.074 182);
      --accent-8: oklch(53.9% 0.0867 182);
      --accent-9: oklch(64.9% 0.1136 182);
      --accent-10: oklch(60.9% 0.1136 182);
      --accent-11: oklch(78.9% 0.1136 182);
      --accent-12: oklch(90.5% 0.0722 182);

      --accent-a1: color(display-p3 0 0.9294 0 / 0.009);
      --accent-a2: color(display-p3 0.3882 0.9882 0.4745 / 0.059);
      --accent-a3: color(display-p3 0.3059 0.9961 0.7333 / 0.125);
      --accent-a4: color(display-p3 0.251 1 0.7804 / 0.183);
      --accent-a5: color(display-p3 0.3529 1 0.8196 / 0.237);
      --accent-a6: color(display-p3 0.4235 1 0.851 / 0.299);
      --accent-a7: color(display-p3 0.4706 1 0.8824 / 0.37);
      --accent-a8: color(display-p3 0.4706 0.9961 0.8863 / 0.461);
      --accent-a9: color(display-p3 0.451 1 0.8941 / 0.619);
      --accent-a10: color(display-p3 0.4235 1 0.8902 / 0.565);
      --accent-a11: color(display-p3 0.5725 1 0.9216 / 0.801);
      --accent-a12: color(display-p3 0.7765 1 0.9529 / 0.93);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.0941 0.1569 0.1255 / 0.5);
      --accent-indicator: oklch(64.9% 0.1136 182);
      --accent-track: oklch(64.9% 0.1136 182);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #696e77;
  --grayscale-track: #696e77;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.415 0.431 0.463);
      --grayscale-track: color(display-p3 0.415 0.431 0.463);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(18, 165, 148, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: rgba(255, 255, 255, 1);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(18, 165, 148, 1);
  --background: rgba(14, 14, 19, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: rgba(14, 14, 19, 1);
  --card-background: initial;
  --theme-color: #0e0e13;
}

.fern-header .fern-button.filled .fa-icon {
  height: 10px !important;
  width: 10px !important;
}

.fern-header * {
  font-weight: 500;
}

/* Badge/Pill Styles */
.vapi-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}

.vapi-badge-assistant {
  background-color: #E6F7F4;
  color: #0F766E;
  border: 1px solid #A7F3D0;
}

.vapi-badge-workflow {
  background-color: #EEF2FF;
  color: #4338CA;
  border: 1px solid #C7D2FE;
}

/* Optional: Squad badge (reuse assistant palette for now) */
.vapi-badge-squad {
  background-color: #EEF2FF;
  color: #4338CA;
  border: 1px solid #C7D2FE;
}

/* Alpha badge - purple to match dashboard */
.vapi-badge-alpha {
  background-color: rgba(168, 85, 247, 0.2) !important;
  color: #A78BFA !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
}

/* Dark mode adjustments */
:is(.dark) .vapi-badge-assistant {
  background-color: #134E4A;
  color: #99F6E4;
  border: 1px solid #14B8A6;
}

:is(.dark) .vapi-badge-workflow {
  background-color: #312E81;
  color: #C7D2FE;
  border: 1px solid #6366F1;
}

:is(.dark) .vapi-badge-squad {
  background-color: #312E81;
  color: #C7D2FE;
  border: 1px solid #6366F1;
}

:is(.dark) .vapi-badge-alpha {
  background-color: rgba(168, 85, 247, 0.2) !important;
  color: #C4B5FD !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
}

/* Override Fern's pre-release availability badge to show "Alpha" with purple styling */
.fern-docs-badge[title="Pre-release"] {
  background-color: rgba(168, 85, 247, 0.2) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  font-size: 0 !important;
  position: relative !important;
  min-width: 52px !important;
  min-height: 24px !important;
  display: inline-flex !important;
}

.fern-docs-badge[title="Pre-release"]::after {
  content: "Alpha";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #A78BFA;
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
}

:is(.dark) .fern-docs-badge[title="Pre-release"] {
  background-color: rgba(168, 85, 247, 0.2) !important;
  color: #C4B5FD !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
}

/* for a grid of videos */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  padding: 16px 0;
  width: 100%;
}

.video-grid .ed-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  height: 100%;
  min-height: 360px;
}

.video-grid .ed-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.video-grid .ed-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); outline: none;
}

.video-grid .card-img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  padding: 24px;
  background: white;
  border-radius: 12px 12px 0 0;
}

.video-grid .card-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.video-grid .card-content h3 {
  margin: 0 0 12px 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.video-grid .card-content p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

@media (max-width: 768px) {

  .video-grid {
    grid-template-columns: 1fr;
  }

  .video-grid .ed-card {
    min-height: 320px;
  }

}

.card-img {
  height: 200px;
  object-fit: contain;
  margin: auto;
  background: white;
  /*TODO: change color as per theme*/
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  text-align: center;
}

.card-content>h3 {
  margin: 16px 0 8px 0;
  font-size: 1.5em;
  text-align: center;
}

.card-content>p {
  font-size: 1em;
  text-align: center;
}

.video-embed-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.video-embed-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#\/api-reference\/webhooks\/server-message\#request h3+div:first-of-type>div:first-of-type {
  display: none;
}

#\/api-reference\/webhooks\/server-message\#request h3+div:first-of-type:before {
  content: "Vapi will make a request to your server with the following object:";
  font-size: 0.875rem;
}

:is(.light) #\/api-reference\/webhooks\/server-message\#request h3+div:first-of-type:before {
  color: #0008059f;
}

:is(.dark) #\/api-reference\/webhooks\/server-message\#request h3+div:first-of-type:before {
  color: #f6f5ffb6;
}

#\/api-reference\/webhooks\/client-message\#request h3+div:first-of-type>div:first-of-type {
  display: none;
}

#\/api-reference\/webhooks\/client-message\#request h3+div:first-of-type:before {
  content: "Vapi will make a request to your server with the following object:";
  font-size: 0.875rem;
}

:is(.light) #\/api-reference\/webhooks\/client-message\#request h3+div:first-of-type:before {
  color: #0008059f;
}

:is(.dark) #\/api-reference\/webhooks\/client-message\#request h3+div:first-of-type:before {
  color: #f6f5ffb6;
}

:is(.dark) #fern-header .fern-mdx-link {
  color: #0008059f;
  text-decoration-color: #0008059f;
}

.clipped-background {
  top: 0 !important;
}

/* HEADER */
.fern-theme-default.fern-container .fern-header,
.fern-theme-default.fern-container .fern-header-tabs {
  background-color: light-dark(#fff, #0e0e13);
}

/* CARD STYLES */
.fern-card {
  border-color: light-dark(#d9d3c2, #27272a);
  background-color: light-dark(#fff, #0e0e13);
}

/* SIDEBAR */
.fern-theme-default.fern-container .fern-sidebar-container {
  background-color: light-dark(#fff, #0e0e13);
  border-right: 1px solid #0e0e13;
}

html.dark button[data-highlighted] .fern-api-property-meta {
  color: var(--accent-contrast) !important;
}

.light .fern-theme-default.fern-container {
  background-color: #fff !important;
}

/* Fix: Make subtitle white on Simulations pages in dark mode */
:is(.dark) [id*="simulations"] .prose-p\:text-\(color\:--grayscale-a11\) :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
  color: var(--grayscale-12) !important;
}

/* Subscribe form on What's New page */
.subscribe-form-row {
  display: flex;
  gap: 0.5rem;
}

.subscribe-form-input {
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  width: 100%;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s ease-in-out;
  color: #1f2937;
  background-color: #fff;
}

.subscribe-form-input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 1px #4f46e5;
}

.subscribe-form-button {
  background-color: #37aa9d;
  color: white;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
}

.subscribe-form-button:hover {
  background-color: #2e8b7d;
  transform: translateY(-1px);
}
.subscribe-form-button:focus-visible {
  background-color: #2e8b7d;
  transform: translateY(-1px); outline: none;
}

.subscribe-form-button:active {
  transform: translateY(0);
}

.subscribe-form-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.subscribe-form-message {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
}

.subscribe-form-message.success {
  color: #065f46;
  background-color: #d1fae5;
}

.subscribe-form-message.error {
  color: #991b1b;
  background-color: #fee2e2;
}

:is(.dark) .subscribe-form-input {
  background-color: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

:is(.dark) .subscribe-form-input::placeholder {
  color: #9ca3af;
}

:is(.dark) .subscribe-form-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 1px #6366f1;
}

:is(.dark) .subscribe-form-button {
  background-color: #94ffd2;
  color: #1f2937;
}

:is(.dark) .subscribe-form-button:hover {
  background-color: #7cd9b0;
}
:is(.dark) .subscribe-form-button:focus-visible {
  background-color: #7cd9b0; outline: none;
}

:is(.dark) .subscribe-form-message.success {
  color: #a7f3d0;
  background-color: #064e3b;
}

:is(.dark) .subscribe-form-message.error {
  color: #fca5a5;
  background-color: #7f1d1d;
}

/* GPT-Live illustrations follow the docs theme and use a compact drawing on phones. */
.gpt-live-illustration {
  max-width: 640px;
  margin: 2rem auto;
}

.gpt-live-illustration img {
  display: none;
  width: 100%;
  height: auto;
  margin: 0;
}

.gpt-live-illustration .gpt-live-art-light {
  display: block;
}

.dark .gpt-live-illustration .gpt-live-art-light {
  display: none;
}

.dark .gpt-live-illustration .gpt-live-art-dark {
  display: block;
}

@media (max-width: 540px) {

  .gpt-live-illustration .gpt-live-art-light,
  .dark .gpt-live-illustration .gpt-live-art-dark {
    display: none;
  }

  .gpt-live-illustration .gpt-live-art-light-compact {
    display: block;
  }

  .dark .gpt-live-illustration .gpt-live-art-light-compact {
    display: none;
  }

  .dark .gpt-live-illustration .gpt-live-art-dark-compact {
    display: block;
  }

}