/* ── Typography ──────────────────────────────────────────── */

:root {
  --font-family-sans: "Geist", sans-serif;
}

body,
button,
input,
select,
textarea,
main[data-pagefind-body] .typography {
  font-family: var(--font-family-sans);
}


/* ── Header redesign ─────────────────────────────────────── */

/* Logo area: icon (32×32) + "Gemini Developer Platform" text injected after */
header a > div.flex.items-center {
  gap: 8px;
}

header a > div.flex.items-center img {
  border-radius: 6px;
}

header a > div.flex.items-center::after {
  content: "Gemini Developer Platform";
  font-family: var(--font-family-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--content-primary, #010304);
  white-space: nowrap;
}

.dark header a > div.flex.items-center::after {
  color: var(--content-primary, #ffffff);
}

/* On small screens the injected wordmark crowds the search field — show the
   logo icon only. */
@media (max-width: 640px) {
  header a > div.flex.items-center::after {
    display: none;
  }
}

/* Remove the border between the top bar and the nav bar.
   Both rows use Tailwind's inset-shadow (compiled to box-shadow).
   Clear all, then restore the bottom border only on the nav row. */
header[data-pagefind-ignore="all"] > div {
  box-shadow: none !important;
}
header[data-pagefind-ignore="all"] > div:last-of-type {
  border-bottom: 1px solid var(--list-border-enabled, #e6e6e6);
}
.dark header[data-pagefind-ignore="all"] > div:last-of-type {
  border-bottom: 1px solid var(--list-border-enabled, #e6cece14);
}

/* Search bar — pill shape, grey fill */
header button.rounded-lg {
  border-radius: 9999px !important;
  background: rgba(102, 121, 149, 0.08) !important;
  box-shadow: none !important;
  height: 36px !important;
  border: 1px solid rgba(102, 121, 149, 0.08) !important;
  min-width: 0;
}

/* Fixed pill width only on desktop. On mobile keep Zudoku's w-full so the
   search shrinks with the header instead of forcing a 200px min that, with
   the logo + nav, pushes the header past the viewport. */
@media (min-width: 1024px) {
  header button.rounded-lg {
    width: clamp(200px, 40vw, 600px) !important;
  }
}

/* Header bar must shrink to the viewport, not grow to its content. */
header,
header > div,
header .max-w-screen-2xl {
  min-width: 0;
}

.dark header button.rounded-lg {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Top nav tab links */
header nav a {
  font-family: var(--font-family-sans) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: 0px !important;
  font-weight: 400 !important;
  color: var(--content-secondary, rgba(1, 3, 4, 0.65)) !important;
  transition: color 0.15s ease-in-out !important;
}

header nav a:hover {
  color: var(--content-primary, rgba(1, 3, 4, 0.95)) !important;
}

/* Active tab — SemiBold */
header nav a.text-foreground,
header nav a[data-state="active"],
header nav a[aria-current="page"] {
  font-weight: 600 !important;
  color: var(--content-primary, rgba(1, 3, 4, 0.95)) !important;
}

/* Inactive tab — content/secondary */
header nav a.text-foreground\/75,
header nav a:not(.text-foreground):not([data-state="active"]):not([aria-current="page"]) {
  color: var(--content-secondary, rgba(1, 3, 4, 0.65)) !important;
}

.dark header nav a {
  color: rgba(255, 255, 255, 0.65) !important;
}

.dark header nav a:hover {
  color: #ffffff !important;
}

.dark header nav a.text-foreground,
.dark header nav a[data-state="active"],
.dark header nav a[aria-current="page"] {
  font-weight: 600 !important;
  color: #ffffff !important;
}

.dark header nav a.text-foreground\/75,
.dark header nav a:not(.text-foreground):not([data-state="active"]):not([aria-current="page"]) {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* ── Responsive Header & Mobile Navigation ───────────────── */

/* Ensure desktop top nav tabs list never wraps and scrolls cleanly on smaller desktop screens */
header nav ul {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

header nav ul::-webkit-scrollbar {
  display: none !important;
}

/* Mobile hamburger trigger button styling */
header button[aria-label="Open navigation menu"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  color: var(--content-primary, #010304) !important;
  background: transparent !important;
  transition: background-color 0.15s ease !important;
}

header button[aria-label="Open navigation menu"]:hover {
  background: rgba(1, 3, 4, 0.06) !important;
}

.dark header button[aria-label="Open navigation menu"] {
  color: #ffffff !important;
}

.dark header button[aria-label="Open navigation menu"]:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Mobile Navigation Drawer / Drawer Content */
div[data-slot="drawer-content"],
[role="dialog"] {
  font-family: var(--font-family-sans) !important;
}

/* Drawer navigation links */
div[data-slot="drawer-content"] a,
[role="dialog"] a {
  font-family: var(--font-family-sans) !important;
  border-radius: 8px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

div[data-slot="drawer-content"] a:hover,
[role="dialog"] a:hover {
  background: rgba(1, 3, 4, 0.05) !important;
  color: var(--content-primary, #010304) !important;
}

.dark div[data-slot="drawer-content"] a:hover,
.dark [role="dialog"] a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

/* Active navigation item in mobile drawer */
div[data-slot="drawer-content"] a[aria-current="page"],
[role="dialog"] a[aria-current="page"] {
  font-weight: 600 !important;
  color: var(--brand-text, #2ea8bb) !important;
  background: rgba(38, 221, 249, 0.08) !important;
}

.dark div[data-slot="drawer-content"] a[aria-current="page"],
.dark [role="dialog"] a[aria-current="page"] {
  color: var(--brand-text, #f74d00) !important;
  background: rgba(247, 77, 0, 0.12) !important;
}

/* ─────────────────────────────────────────────────────────── */

/* Keep the sidebar's sticky containment: it must stop tracking the viewport
   once its grid container (the [side-nav | content] row above the footer)
   ends, so it scrolls away with the page instead of floating over the
   footer. `position: fixed` detaches the sidebar from that container
   entirely, so on short pages with a long nav list (e.g. Accounts > Roles &
   permissions) the fixed-height nav column kept rendering at full viewport
   height for the whole page scroll and painted over the footer below it.
   `position: sticky` (Zudoku's own default) already releases at the
   container's bottom edge, and the grid's own `mx-auto` already centers the
   sidebar, so no extra viewport-relative left offset is needed here. */
@media (min-width: 1024px) {
  .grid.max-w-screen-2xl > [data-pagefind-ignore="all"] {
    position: sticky !important;
    top: var(--header-height) !important;
    width: var(--side-nav-width);
  }
}

/* Sidebar navigation item spacing & vertical flow fix:
   Ensure sidebar links, sub-lists, sub-headings, and badges remain in document
   flow with relative positioning and auto container heights to prevent overlapping. */
[data-pagefind-ignore="all"] nav ul,
[data-pagefind-ignore="all"] nav li,
[data-pagefind-ignore="all"] nav a,
[data-pagefind-ignore="all"] nav div {
  position: relative;
  height: auto;
  min-height: fit-content;
}

[data-pagefind-ignore="all"] nav a {
  display: flex;
  align-items: center;
  min-height: 32px;
  margin-block: 1px;
}

/* Override Zudoku's hardcoded lg:px-8 (32px) left padding on the main content
   area to match the design's 40px content offset. */
@media (min-width: 1024px) {
  main[data-pagefind-body] {
    padding-left: var(--spacing-4x-large, 40px);
  }
}

/* ── Content rails ──────────────────────────────────────────
   Documents keep a readable article column plus their ToC. The landing page
   gets a full canvas for its hero and a separate centered content rail. */
:root {
  --document-content-width: 1080px;
  --document-toc-width: 260px;
  --document-layout-width: calc(
    var(--document-content-width) + var(--document-toc-width) + 32px
  );
  --landing-content-width: 1080px;
  --landing-hero-content-width: 960px;
  --landing-gutter: var(--spacing-large, 16px);
}

@media (min-width: 1280px) {
  main[data-pagefind-body] .typography {
    max-width: var(--document-content-width);
  }

  main[data-pagefind-body] > [data-pagefind-filter="section:markdown"] {
    margin-inline: auto;
    max-width: var(--document-layout-width);
  }

  main[data-pagefind-body]
    > [data-pagefind-filter="section:markdown"]:not(:has([data-gdp-layout])):not(:has(aside)) {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--document-content-width);
  }

  main[data-pagefind-body]
    > [data-pagefind-filter="section:markdown"]:not(:has([data-gdp-layout])):not(:has(aside))
    > .hidden.xl\:block {
    display: none;
  }

  main[data-pagefind-body]:has([data-gdp-layout="landing"])
    > [data-pagefind-filter="section:markdown"] {
    display: block;
    max-width: none;
  }

  main[data-pagefind-body]:has([data-gdp-layout="landing"]) .typography {
    max-width: none;
  }
}

main[data-pagefind-body]:has([data-gdp-layout="landing"]) {
  padding-inline: 0;
}

.landing-page {
  min-width: 0;
}

.page-section {
  margin-inline: auto;
  padding-block: var(--spacing-6x-large, 64px);
  width: 100%;
}

.page-section--document {
  max-width: var(--document-content-width);
}

.page-section--landing {
  max-width: var(--landing-content-width);
  width: calc(100% - (var(--landing-gutter) * 2));
}

.page-section--bordered {
  border-bottom: 1px solid var(--list-border-enabled, #485e7d1f);
}

.page-frame {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5x-large, 48px);
  max-width: var(--document-content-width);
  padding: var(--spacing-6x-large, 64px) var(--spacing-4x-large, 40px);
  width: 100%;
}

.page-hero {
  overflow: hidden;
  position: relative;
}

.page-hero__background {
  inset: 0;
}

.page-hero__content {
  margin-inline: auto;
}

.page-hero--landing {
  border-bottom: 1px solid var(--list-border-enabled, #485e7d1f);
  padding-block: var(--spacing-6x-large, 64px);
}

.page-hero--landing .page-hero__content {
  width: calc(100% - (var(--landing-gutter) * 2));
}

.page-hero--document {
  border-bottom: 1px solid var(--list-border-enabled, #485e7d1f);
  margin-inline: calc(var(--spacing-large, 16px) * -1);
  padding: 56px var(--spacing-large, 16px);
}

.page-hero--document .page-hero__background {
  inset: 0;
}

.page-hero--document .page-hero__content {
  margin-inline: 0;
}

@media (min-width: 1024px) {
  :root {
    --landing-gutter: var(--spacing-4x-large, 40px);
  }

  .page-hero--landing {
    padding-block: var(--spacing-7x-large, 80px);
  }

  .page-hero--document {
    margin-left: calc(var(--spacing-3x-large, 32px) * -1);
    margin-right: -100vw;
    padding-left: var(--spacing-3x-large, 32px);
    padding-right: 100vw;
  }
}

/* ── Mobile responsiveness ───────────────────────────────────
   The content column (.typography) is a grid child with default
   min-width: auto, so it refuses to shrink below its widest descendant
   (a long code line, a 135-col terminal, a fixed-width panel). That pushes
   the whole column past the viewport and main clips it, so the page can't
   scroll. min-width: 0 lets the column shrink to the viewport; wide children
   then scroll inside their own overflow-auto boxes instead of forcing width. */
main[data-pagefind-body] .typography {
  min-width: 0;
}

/* The layout grid and main column default to min-width: auto, so they grow to
   fit their widest content instead of clamping to the viewport cell. Combined
   with the hero's -mx-4 negative margins (which make the hero parent-width+32),
   this creates a feedback loop that inflates the column past the viewport.
   min-width: 0 makes their width:100% / grid cell authoritative. */
.grid.max-w-screen-2xl,
main[data-pagefind-body] {
  min-width: 0;
}

/* Never let a wide descendant exceed the content column. Code blocks and the
   terminal player scroll internally. */
main[data-pagefind-body] .typography :is(pre, .shiki-wrapper) {
  max-width: 100%;
}

/* Markdown tables have no scroll wrapper, so a long unbreakable cell widens the
   whole page on mobile. Make the table itself scroll horizontally instead. */
@media (max-width: 1023px) {
  main[data-pagefind-body] .typography table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
}
main[data-pagefind-body] .typography .asciinema-player,
main[data-pagefind-body] .typography .ap-player {
  max-width: 100%;
}

/* BuildWithAPIs: the list + 400px detail panel sit in a flex row that can't
   fit narrow screens. Stack to a column and let each part take full width. */
@media (max-width: 1023px) {
  .build-apis-split {
    flex-direction: column !important;
  }
  .build-apis-split > * {
    width: 100% !important;
    border-left: none !important;
  }
}

/* New component-based pages manage their own top padding — zero the wrapper's. */
main[data-pagefind-body] .typography:has([data-gdp-page], [data-gdp-layout]) {
  padding-top: 0;
}

/* Hide Zudoku's auto-rendered page header only when the page content supplies
   its own H1. Standard MDX pages keep the frontmatter title visible. */
main[data-pagefind-body] .typography > header:has(~ h1, ~ * h1) {
  display: none;
}

/* Prevent layout shift caused by Zudoku's useSuspenseQuery in Main.tsx.
   During the Suspense fallback, <main> has col-span-full (full width).
   After nav data loads, the nav renders and <main> shifts to the right column.
   We prevent this by stopping <main data-pagefind-body> from ever spanning
   all columns on lg screens, so the layout is stable from first paint. */
@media (min-width: 1024px) {
  main[data-pagefind-body] {
    grid-column: 2;
  }

}

/* Hubble spacing tokens & brand tokens */
:root {
  --spacing-none: 0px;
  --spacing-x-small: 4px;
  --spacing-small: 8px;
  --spacing-medium: 12px;
  --spacing-large: 16px;
  --spacing-x-large: 20px;
  --spacing-2x-large: 24px;
  --spacing-3x-large: 32px;
  --spacing-4x-large: 40px;
  --spacing-5x-large: 48px;
  --spacing-6x-large: 64px;
  --spacing-7x-large: 80px;
  --spacing-8x-large: 96px;

  --brand-button-bg: #26ddf9;
  --brand-button-fg: #010304;
  --brand-accent: #26ddf9;
  --brand-text: #2ea8bb;
  --content-primary: #010304;
  --content-disabled: #0610184d;
  --status-default-content-positive: #0e8535;
  --status-default-background-positive: #0e853514;
  --status-default-content-neutral: #676868;
  --status-default-background-neutral: rgba(103, 104, 104, 0.08);
  --background-secondary: rgba(1, 3, 4, 0.04);
  --list-border-enabled: #e6e6e6;
  --card-background-outlined-enabled: #ffffff;
  --card-border-outlined-enabled: #66799533;
}

.dark .hero-gradient {
  background: radial-gradient(
    ellipse 140% 175% at 95% 95%,
    rgba(247, 77, 0, 0.58) 0%,
    rgba(247, 77, 0, 0.3) 37%,
    transparent 67%
  ) !important;
}

.dark {
  --card-background-filled: #edd5d51a;
  --background-secondary: #ffffff1a;
  --list-border-enabled: #e6cece14;
  --status-default-content-positive: #00ff9a;
  --status-default-background-positive: #00ff9a14;
  --status-default-content-neutral: #ebe1dd;
  --status-default-background-neutral: #ebe1dd1a;
  --brand-button-bg: #f74d00;
  --brand-button-fg: #ffffff;
  --brand-accent: #f74d00;
  --brand-text: #f74d00;
  --content-primary: #ffffff;
  --content-secondary: #faf1eb99;
  --content-disabled: #91a1ba80;
  --action-content-secondary-neutral-enabled: #ffffff;
  --card-background-outlined-enabled: #edd5d50f;
  --card-border-outlined-enabled: #adc7ee29;
}

.text-alert-danger,
.text-alert-danger a {
  color: #fff;
}

/* Link callout (no icon). Info-blue in light mode (orange reads as a
   warning on white). Mars brand accent kept for dark mode where the warm
   hue works alongside the existing dark theme. */
.exchange-link-callout {
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-left: 4px solid #2563eb;
  background: rgba(37, 99, 235, 0.06);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 20px 0;
}

.dark .exchange-link-callout {
  border: 1px solid rgba(247, 77, 0, 0.55);
  border-left: 4px solid #f74d00;
  background: rgba(247, 77, 0, 0.08);
}

.exchange-link-callout p {
  margin: 0;
}

.exchange-link-callout p + p {
  margin-top: 10px;
}

.section-icon svg {
  border-radius: 0;
  min-width: 24px;
  min-height: 24px;
  width: 24px;
  height: 24px;
  fill: currentColor;
  margin: 0 12px 0 0 !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  align-self: center !important;
}

.section-info,
[role="alert"] {
  color: #fff !important;
  background-color: #0084d1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 14px 18px !important;
  border-radius: 8px !important;
  margin: 20px 0 !important;
  gap: 0 !important;
}

.section-info a,
[role="alert"] a {
  color: #fff !important;
  text-decoration: underline !important;
}

.section-info p,
.section-info span,
[role="alert"] p,
[role="alert"] span {
  color: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  align-self: center !important;
}

.doc-table {
  p {
    margin: 0;
  }
}

table {
  table-layout: auto;
  width: 100%;
}

td:first-child,
th:first-child {
  width: auto;
  white-space: nowrap;
}

/* Custom scrollbar for code blocks */
.code-block-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.code-block-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.code-block-scroll::-webkit-scrollbar-thumb {
  background: #cccdcd;
  border-radius: 12px;
}

.code-block-scroll::-webkit-scrollbar-thumb:hover {
  background: #b0b1b1;
}

.dark .code-block-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

.dark .code-block-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Code block background */
pre:not(.bg-foreground\/10),
.dark\:\!bg-foreground\/10:where(.dark, .dark *) {
  background-color: hsl(var(--muted)) !important;
}

.dark pre:not(.bg-foreground\/10),
.dark .dark\:\!bg-foreground\/10 {
  background-color: #edd5d51a !important;
}

.dark pre + div.flex.items-center.justify-between.px-4,
.dark div.flex.items-center.justify-between.px-4:has(+ pre) {
  background-color: #edd5d51a !important;
}

/* OpenAPI description field paragraph */
.text-card-foreground p {
  color: hsl(var(--muted-foreground));
}

/* Playground / Example Response monospace text */
.font-mono {
  color: hsl(var(--foreground));
}

/* Playground response panel background */
.min-w-0.p-4.py-8.bg-muted\/50 {
  background: hsl(var(--muted) / 0.5);
}

/* Playground test button */
button.text-primary-foreground {
  color: hsl(var(--primary-foreground));
  font-weight: 500;
}

/* Playground test button hover */
button.text-primary-foreground:hover {
  background-color: hsl(var(--primary) / 0.85);
}

footer p.text-muted-foreground {
  white-space: pre-line;
  font-size: 12px;
}

.footer-legal {
  display: grid;
  align-items: center;
  gap: var(--spacing-2x-large, 24px);
  grid-template-columns: 1fr;
  text-align: center;
  width: 100%;
}

.footer-legal__column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-small, 8px);
  min-width: 0;
}

.footer-legal__copyright {
  font-size: 12px;
  line-height: 18px;
  margin: 0;
}

.footer-legal__link {
  align-items: center;
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  padding: 0 12px;
  text-decoration: none;
}

.footer-legal a.footer-legal__link {
  display: inline-flex;
}

.footer-legal__link:hover {
  color: hsl(var(--foreground));
}

.footer-legal__link:focus-visible {
  border-radius: 2px;
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .footer-legal {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: left;
  }

  .footer-legal__column--resources {
    align-items: flex-start;
  }

  .footer-legal__column--brand {
    align-items: center;
    text-align: center;
  }

  .footer-legal__column--notice {
    align-items: flex-end;
    text-align: right;
  }
}

.legal-notice-modal {
  background: transparent;
  border: 0;
  color: #010304;
  margin: auto;
  max-height: min(88vh, 720px);
  max-width: 680px;
  overflow: visible;
  padding: 0;
  width: min(calc(100vw - 32px), 680px);
}

.legal-notice-modal::backdrop {
  background: rgb(1 3 4 / 0.64);
}

.legal-notice-modal__dialog {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  box-shadow: 0 24px 72px rgb(1 3 4 / 0.28);
  color: #010304;
  max-height: min(88vh, 720px);
  overflow: auto;
  padding: var(--spacing-2x-large, 24px);
  width: 100%;
}

.legal-notice-modal__header {
  align-items: flex-start;
  display: flex;
  gap: var(--spacing-large, 16px);
  justify-content: space-between;
}

.legal-notice-modal__header h2 {
  color: #010304;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  margin: 0;
}

.legal-notice-modal__close {
  align-items: center;
  appearance: none;
  background: rgba(1, 3, 4, 0.06);
  border: 1px solid transparent;
  border-radius: 9999px;
  color: #010304;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  height: 32px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 32px;
}

.legal-notice-modal__close:hover {
  background: rgba(1, 3, 4, 0.1);
  border-color: #d7d7d7;
}

.legal-notice-modal__close:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
}

.legal-notice-modal__body {
  color: #3f4648;
  display: grid;
  gap: var(--spacing-medium, 12px);
  margin-top: var(--spacing-large, 16px);
}

.legal-notice-modal__body p,
.legal-notice-modal__body li {
  font-size: 14px;
  line-height: 22px;
}

.legal-notice-modal__body p {
  margin: 0;
}

.legal-notice-modal__body ul {
  display: grid;
  gap: var(--spacing-small, 8px);
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.legal-notice-modal__body li {
  padding-left: var(--spacing-large, 16px);
  position: relative;
}

.legal-notice-modal__body li::before {
  background: #010304;
  border-radius: 9999px;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  top: 0.75em;
  transform: translateY(-50%);
  width: 5px;
}

.legal-notice-modal__body li + li {
  margin-top: 0;
}

/* WebSocket Interactive Page Styles */

.ws-interactive-page {
  background: hsl(var(--background));
  min-height: 100vh;
}

.method-card {
  transition: box-shadow 0.2s ease;
}

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

.json-editor {
  font-family:
    "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.5;
}

.json-editor:focus {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.stream-viewer {
  background: hsl(var(--background));
}

.stream-message {
  transition: background-color 0.2s ease;
}

.stream-message:hover {
  background: hsl(var(--muted) / 0.5);
}

.auth-header-manager input:focus {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Scrollbar styles for content areas */
.overflow-y-auto::-webkit-scrollbar {
  width: 10px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: hsl(var(--background));
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: hsl(var(--muted));
  border-radius: 5px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* Animation for connection status indicator */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .ws-method-sidebar {
    width: 100%;
    max-height: 40vh;
    border-right: none;
    border-bottom: 1px solid hsl(var(--border));
  }

  .method-card {
    grid-template-columns: 1fr;
  }

  .method-card .grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* Stream message highlight fade animation */
@keyframes highlight-fade {
  0% {
    background-color: rgb(34 197 94 / 0.2);
    border-color: rgb(34 197 94);
  }
  100% {
    background-color: hsl(var(--background));
    border-color: hsl(var(--border));
  }
}

/* Shiki dual-theme: show light tokens in light mode, dark tokens in dark mode */
.shiki-wrapper .shiki,
.shiki-wrapper .shiki span {
  color: var(--shiki-light) !important;
  background-color: transparent !important;
}

.dark .shiki-wrapper .shiki,
.dark .shiki-wrapper .shiki span {
  color: var(--shiki-dark) !important;
}

/* Override Zudoku's global --shiki-light-bg / --shiki-dark-bg root variables
   inside our code blocks so the <pre> doesn't pick up the theme's white/dark bg */
.shiki-wrapper {
  --shiki-light-bg: transparent;
  --shiki-dark-bg: transparent;
}

.shiki-wrapper pre,
.shiki-wrapper .shiki {
  background-color: transparent !important;
  margin: 0;
  padding: 0 !important;
  font-family: monospace;
  font-size: 0.75rem;
  line-height: 1.75;
}