/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 35px;
  --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;
}

: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: #f8f8f7;
  --accent-2: #f4f3f2;
  --accent-3: #eaeae8;
  --accent-4: #e3e2df;
  --accent-5: #dbdad7;
  --accent-6: #d3d2ce;
  --accent-7: #c8c7c2;
  --accent-8: #b5b3ad;
  --accent-9: #22211d;
  --accent-10: #373632;
  --accent-11: #5d5c57;
  --accent-12: #22211d;

  --accent-a1: #7b7b3b04;
  --accent-a2: #50341809;
  --accent-a3: #24240913;
  --accent-a4: #281f041c;
  --accent-a5: #1f180324;
  --accent-a6: #1e18012d;
  --accent-a7: #1f1a043a;
  --accent-a8: #1b14014f;
  --accent-a9: #070601e2;
  --accent-a10: #060500cc;
  --accent-a11: #0b0902a7;
  --accent-a12: #070601e2;

  --accent-contrast: #fff;
  --accent-surface: #f3f1f0cc;
  --accent-indicator: #22211d;
  --accent-track: #22211d;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(97.8% 0.001 95.37);
      --accent-2: oklch(96.5% 0.0015 95.37);
      --accent-3: oklch(93.7% 0.0023 95.37);
      --accent-4: oklch(91.2% 0.0035 95.37);
      --accent-5: oklch(88.9% 0.0041 95.37);
      --accent-6: oklch(86.3% 0.0053 95.37);
      --accent-7: oklch(82.9% 0.0067 95.37);
      --accent-8: oklch(76.7% 0.009 95.37);
      --accent-9: oklch(24.7% 0.0075 95.37);
      --accent-10: oklch(33.4% 0.0075 95.37);
      --accent-11: oklch(47.5% 0.0081 95.37);
      --accent-12: oklch(24.5% 0.0075 95.37);

      --accent-a1: color(display-p3 0.3294 0.3294 0 / 0.012);
      --accent-a2: color(display-p3 0.2471 0.1255 0 / 0.032);
      --accent-a3: color(display-p3 0.1098 0.1098 0 / 0.072);
      --accent-a4: color(display-p3 0.149 0.1098 0 / 0.108);
      --accent-a5: color(display-p3 0.1137 0.0863 0 / 0.14);
      --accent-a6: color(display-p3 0.1137 0.0902 0 / 0.176);
      --accent-a7: color(display-p3 0.1059 0.0902 0 / 0.224);
      --accent-a8: color(display-p3 0.0941 0.0667 0 / 0.304);
      --accent-a9: color(display-p3 0.0235 0.0196 0 / 0.884);
      --accent-a10: color(display-p3 0.0235 0.0196 0 / 0.8);
      --accent-a11: color(display-p3 0.0353 0.0314 0 / 0.652);
      --accent-a12: color(display-p3 0.0235 0.0196 0 / 0.884);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9529 0.9451 0.9412 / 0.8);
      --accent-indicator: oklch(24.7% 0.0075 95.37);
      --accent-track: oklch(24.7% 0.0075 95.37);
    }
  }
}


.light, :root {
  --grayscale-1: #fcfcfc;
  --grayscale-2: #f9f9f9;
  --grayscale-3: #f0f0f0;
  --grayscale-4: #e8e8e8;
  --grayscale-5: #e0e0e0;
  --grayscale-6: #d9d9d9;
  --grayscale-7: #cecece;
  --grayscale-8: #bbbbbb;
  --grayscale-9: #8d8d8d;
  --grayscale-10: #838383;
  --grayscale-11: #646464;
  --grayscale-12: #202020;

  --grayscale-a1: #00000003;
  --grayscale-a2: #00000006;
  --grayscale-a3: #0000000f;
  --grayscale-a4: #00000017;
  --grayscale-a5: #0000001f;
  --grayscale-a6: #00000026;
  --grayscale-a7: #00000031;
  --grayscale-a8: #00000044;
  --grayscale-a9: #00000072;
  --grayscale-a10: #0000007c;
  --grayscale-a11: #0000009b;
  --grayscale-a12: #000000df;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8d8d8d;
  --grayscale-track: #8d8d8d;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.988 0.988 0.988);
      --grayscale-2: color(display-p3 0.975 0.975 0.975);
      --grayscale-3: color(display-p3 0.939 0.939 0.939);
      --grayscale-4: color(display-p3 0.908 0.908 0.908);
      --grayscale-5: color(display-p3 0.88 0.88 0.88);
      --grayscale-6: color(display-p3 0.849 0.849 0.849);
      --grayscale-7: color(display-p3 0.807 0.807 0.807);
      --grayscale-8: color(display-p3 0.732 0.732 0.732);
      --grayscale-9: color(display-p3 0.553 0.553 0.553);
      --grayscale-10: color(display-p3 0.512 0.512 0.512);
      --grayscale-11: color(display-p3 0.392 0.392 0.392);
      --grayscale-12: color(display-p3 0.125 0.125 0.125);

      --grayscale-a1: #00000003;
      --grayscale-a2: #00000006;
      --grayscale-a3: #0000000f;
      --grayscale-a4: #00000017;
      --grayscale-a5: #0000001f;
      --grayscale-a6: #00000026;
      --grayscale-a7: #00000031;
      --grayscale-a8: #00000044;
      --grayscale-a9: #00000072;
      --grayscale-a10: #0000007c;
      --grayscale-a11: #0000009b;
      --grayscale-a12: #000000df;

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


.dark {
  --accent-1: #201c16;
  --accent-2: #272118;
  --accent-3: #372813;
  --accent-4: #462d00;
  --accent-5: #533400;
  --accent-6: #613e00;
  --accent-7: #744d01;
  --accent-8: #8c6323;
  --accent-9: #f1d3aa;
  --accent-10: #e7c9a0;
  --accent-11: #e1b576;
  --accent-12: #fee0b6;

  --accent-a1: #c81c0003;
  --accent-a2: #ef90020b;
  --accent-a3: #fa86001d;
  --accent-a4: #fc7b002e;
  --accent-a5: #fc81003d;
  --accent-a6: #ff8e004c;
  --accent-a7: #fe9c0062;
  --accent-a8: #ffad2d7d;
  --accent-a9: #fedeb4f0;
  --accent-a10: #ffdeb0e4;
  --accent-a11: #ffcc85dd;
  --accent-a12: #ffe1b7fe;

  --accent-contrast: #2d1f09;
  --accent-surface: #30261880;
  --accent-indicator: #f1d3aa;
  --accent-track: #f1d3aa;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(22.8% 0.0117 75.42);
      --accent-2: oklch(25.1% 0.0181 75.42);
      --accent-3: oklch(29% 0.0403 75.42);
      --accent-4: oklch(31.9% 0.0676 75.42);
      --accent-5: oklch(35.2% 0.0801 75.42);
      --accent-6: oklch(39.5% 0.0861 75.42);
      --accent-7: oklch(45.3% 0.0951 75.42);
      --accent-8: oklch(53.1% 0.0951 75.42);
      --accent-9: oklch(88.2% 0.0634 75.42);
      --accent-10: oklch(85.1% 0.0634 75.42);
      --accent-11: oklch(79.8% 0.0951 75.42);
      --accent-12: oklch(92.1% 0.0634 75.42);

      --accent-a1: color(display-p3 0.902 0.1137 0 / 0.005);
      --accent-a2: color(display-p3 0.9922 0.6549 0.102 / 0.036);
      --accent-a3: color(display-p3 0.9961 0.6078 0 / 0.103);
      --accent-a4: color(display-p3 1 0.549 0 / 0.16);
      --accent-a5: color(display-p3 1 0.5608 0 / 0.218);
      --accent-a6: color(display-p3 1 0.6235 0 / 0.276);
      --accent-a7: color(display-p3 1 0.6745 0.0784 / 0.356);
      --accent-a8: color(display-p3 1 0.7294 0.2863 / 0.463);
      --accent-a9: color(display-p3 0.9961 0.898 0.7412 / 0.916);
      --accent-a10: color(display-p3 1 0.8902 0.7294 / 0.872);
      --accent-a11: color(display-p3 1 0.8353 0.5765 / 0.836);
      --accent-a12: color(display-p3 1 0.902 0.749 / 0.974);

      --accent-contrast: #2d1f09;
      --accent-surface: color(display-p3 0.1804 0.149 0.0941 / 0.5);
      --accent-indicator: oklch(88.2% 0.0634 75.42);
      --accent-track: oklch(88.2% 0.0634 75.42);
    }
  }
}


.dark {
  --grayscale-1: #111110;
  --grayscale-2: #191918;
  --grayscale-3: #222221;
  --grayscale-4: #2a2a28;
  --grayscale-5: #31312e;
  --grayscale-6: #3b3a37;
  --grayscale-7: #494844;
  --grayscale-8: #62605b;
  --grayscale-9: #6f6d66;
  --grayscale-10: #7c7b74;
  --grayscale-11: #b5b3ad;
  --grayscale-12: #eeeeec;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f4f4f309;
  --grayscale-a3: #f6f6f513;
  --grayscale-a4: #fefef31b;
  --grayscale-a5: #fbfbeb23;
  --grayscale-a6: #fffaed2d;
  --grayscale-a7: #fffbed3c;
  --grayscale-a8: #fff9eb57;
  --grayscale-a9: #fffae965;
  --grayscale-a10: #fffdee73;
  --grayscale-a11: #fffcf4b0;
  --grayscale-a12: #fffffded;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.063);
      --grayscale-2: color(display-p3 0.098 0.098 0.094);
      --grayscale-3: color(display-p3 0.135 0.135 0.129);
      --grayscale-4: color(display-p3 0.164 0.163 0.156);
      --grayscale-5: color(display-p3 0.193 0.192 0.183);
      --grayscale-6: color(display-p3 0.23 0.229 0.217);
      --grayscale-7: color(display-p3 0.285 0.282 0.267);
      --grayscale-8: color(display-p3 0.384 0.378 0.357);
      --grayscale-9: color(display-p3 0.434 0.428 0.403);
      --grayscale-10: color(display-p3 0.487 0.481 0.456);
      --grayscale-11: color(display-p3 0.707 0.703 0.68);
      --grayscale-12: color(display-p3 0.933 0.933 0.926);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f4f4f309;
      --grayscale-a3: #f6f6f513;
      --grayscale-a4: #fefef31b;
      --grayscale-a5: #fbfbeb23;
      --grayscale-a6: #fffaed2d;
      --grayscale-a7: #fffbed3c;
      --grayscale-a8: #fff9eb57;
      --grayscale-a9: #fffae965;
      --grayscale-a10: #fffdee73;
      --grayscale-a11: #fffcf4b0;
      --grayscale-a12: #fffffded;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.434 0.428 0.403);
      --grayscale-track: color(display-p3 0.434 0.428 0.403);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(34, 33, 29, 1);
  --background: rgba(250, 250, 250, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fafafa;
}

.dark {
  color-scheme: dark;
  --accent: rgba(241, 211, 170, 1);
  --background: rgba(30, 28, 25, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #1e1c19;
}

:root {
    --announcement-link-color: #fffbe6;
}


/* Dark mode  for link styling */
html.dark #fern-announcement a.fern-mdx-link,
body.dark #fern-announcement a.fern-mdx-link {
  color: #476352;
}

/* Hover in dark mode — turns black */
html.dark #fern-announcement a.fern-mdx-link:hover,
body.dark #fern-announcement a.fern-mdx-link:hover {
  color: #000000;
}
html.dark #fern-announcement a.fern-mdx-link:focus-visible,
body.dark #fern-announcement a.fern-mdx-link:focus-visible {
  color: #000000;
}

/* Hover in dark mode — turns black */
html.light #fern-announcement a.fern-mdx-link:hover,
body.light #fern-announcement a.fern-mdx-link:hover {
  color: #6b957d;
}
html.light #fern-announcement a.fern-mdx-link:focus-visible,
body.light #fern-announcement a.fern-mdx-link:focus-visible {
  color: #6b957d;
}

#fern-announcement {
    padding: 0.9rem
}

#fern-announcement p {
    font-weight: 500;
    font-size: 16px;
}

.announcement-link {
    color: var(--announcement-link-color);
    font-size: 14px;
}

.announcement-link svg{
    display: none !important;
}
.fern-header-content .fern-button {
    border-radius: 99999px;
    padding: 0.5rem 1rem;
}

.fern-product-selector {
    transform: translateY(2px);
    border-radius: 8px;
    border: 1px solid var(--border);
    --tw-leading:var(--leading-tight);
    line-height:var(--leading-tight);
    --tw-font-weight:var(--font-weight-bold);
    color:var(--grayscale-a12);
    font-weight:var(--font-weight-bold);
    font-size: 16px;
  }

  .fern-mdx-link svg.external-link-icon {
    color: currentColor;
    display: none !important;
    height: calc(var(--spacing)*3.5);
    margin-left: calc(var(--spacing)*.5);
    opacity: .7;
    width: calc(var(--spacing)*3.5);
}

/* API Playground — hide example selector dropdown and "Clear form" button
   on endpoints with no request fields. Scope is via :has() on the empty
   .fern-explorer-endpoint-form wrapper Fern emits when the request has
   no params. If Fern renames these classes, dump the rendered DOM and update. */
.fern-explorer-form:has(.fern-explorer-endpoint-form:empty) .fern-explorer-example-selector,
.fern-explorer-form:has(.fern-explorer-endpoint-form:empty) .fern-explorer-clear-form-button {
    display: none !important;
}

/* Narrow UI-detail screenshots (sidebar/menu crops). Fern's Frame spans the
   full content column by default, which leaves a wide empty box around a small
   image. Wrap the Frame in this class to make it hug the screenshot instead,
   centered in the column. */
.narrow-frame {
    max-width: 360px;
    margin-inline: auto;
}

/* Hide Fern's "Report incorrect code" flag that renders on every code block.
   Fern's CodeBlock component bakes this in with no docs.yml toggle, and
   layout.hide-feedback (already set) does not suppress it. We target the
   aria-label rather than the bare .fern-feedback-button class so the page-level
   feedback controls are unaffected. If Fern renames this, re-dump the rendered
   DOM and update the selector. */
.fern-feedback-button[aria-label="Report incorrect code"] {
    display: none !important;
}

/* -- API Reference variant switcher (Production / Sandbox) ------------------
   Fern places the switcher at the top of the sidebar and offers no setting to
   move it, so it is restyled to read as an environment toggle. The selected
   variant is only visible through its icon, so the Sandbox tint keys off the
   flask icon. Keep in step with the variant icon in docs.yml. */
.fern-variant-selector {
    border: 1.5px solid #22211d;
    border-radius: 10px;
    padding: 0.25rem;
    margin-top: 1.4rem;
    margin-bottom: 0.5rem;
    background: #f1ece2;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Caption above the card so it reads as an environment toggle. */
.fern-variant-selector::before {
    content: "Environment";
    position: absolute;
    top: -1.35rem;
    left: 0.15rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grayscale-a11, #6b6b6b);
}

.fern-variant-selector:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}
.fern-variant-selector:focus-visible {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

html.dark .fern-variant-selector,
body.dark .fern-variant-selector {
    border-color: #f1d3aa;
    background: #2a2722;
}

.fern-variant-selector .fern-selection-item-title {
    font-weight: 600;
}

.fern-variant-selector:has(svg[icon="flask"]) {
    background: #fff4dc;
    border-color: #e0a526;
}

html.dark .fern-variant-selector:has(svg[icon="flask"]),
body.dark .fern-variant-selector:has(svg[icon="flask"]) {
    background: #3a2c10;
    border-color: #b9821a;
}

/* Beta pill on the Sandbox variant. Variants don't support `availability`,
   so the badge is drawn here, in the switcher and in its dropdown. */
.fern-selection-item:has(svg[icon="flask"]) .fern-selection-item-title::after,
.fern-variant-selector-dropdown .fern-dropdown-item:has(svg[icon="flask"]) .flex-col > p:first-child::after {
    content: "Beta";
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    border-radius: 9999px;
    border: 1px solid #e0a526;
    color: #8a5a00;
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: middle;
}

html.dark .fern-selection-item:has(svg[icon="flask"]) .fern-selection-item-title::after,
body.dark .fern-selection-item:has(svg[icon="flask"]) .fern-selection-item-title::after,
html.dark .fern-variant-selector-dropdown .fern-dropdown-item:has(svg[icon="flask"]) .flex-col > p:first-child::after,
body.dark .fern-variant-selector-dropdown .fern-dropdown-item:has(svg[icon="flask"]) .flex-col > p:first-child::after {
    border-color: #b9821a;
    color: #f1c56b;
}

/* "New" pill, for the sandbox callout on the production API overview. */
.agora-new-pill {
    display: inline-block;
    margin-right: 0.4rem;
    padding: 0.05rem 0.5rem;
    border-radius: 9999px;
    background: #e0a526;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: 0.1em;
}

/* Back-link from any sandbox page to the Production API. Lives in the shared
   sandbox callout snippet, so it renders once at the top of every sandbox page. */
.agora-env-backlink {
    display: inline-block;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
}
.agora-env-backlink a {
    text-decoration: none;
}
.agora-env-backlink a:hover {
    text-decoration: underline;
}
.agora-env-backlink a:focus-visible {
    text-decoration: underline;
}
