/*
 * themes/protocol.css
 *
 * "Protocol"-style professional docs theme (clean whitespace, sticky right
 * TOC, indigo accent, Inter type). Select with `theme.name: "protocol"` in
 * gendoc.yml. See GCS Docs Theme.dc.html in the design project for the
 * source mockup this preset implements.
 *
 * Requires the `toc.integrate` feature to be OFF in mkdocs.yml theme.features
 * so Material renders the classic secondary sidebar (right-hand "On this
 * page" rail) instead of merging TOC into the left nav.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --gnus-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --gnus-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --gnus-header-height: 56px;
}

/* Material bumps html{font-size} to 137.5% at >=1220px and 150% at >=1600px
   (its responsive type scale). Every rem value in this file compounds with
   that, so text reads oversized on wide screens. Pin the root back to 100%
   so 1rem stays a fixed 16px regardless of viewport. */
@media screen and (min-width: 76.25em) {
  html { font-size: 100% !important; }
}
@media screen and (min-width: 100em) {
  html { font-size: 100% !important; }
}

/* ── Light mode palette ───────────────────────────────────────────────────── */
[data-md-color-scheme="default"] {
  --md-default-bg-color:               #ffffff;
  --md-default-fg-color:               #0f172a;
  --md-default-fg-color--light:        #475569;
  --md-default-fg-color--lighter:      #94a3b8;
  --md-default-fg-color--lightest:     #e5e7eb;

  --md-primary-fg-color:               #ffffff;
  --md-primary-fg-color--light:        #ffffff;
  --md-primary-fg-color--dark:         #f4f4f6;
  --md-primary-bg-color:               #0f172a;
  --md-primary-bg-color--light:        #475569;

  --md-accent-fg-color:                #4f46e5;
  --md-accent-fg-color--transparent:   rgba(79, 70, 229, .1);

  --md-typeset-a-color:                #4f46e5;

  --md-code-bg-color:                  #f8fafc;
  --md-code-fg-color:                  #0f172a;

  --md-footer-fg-color:                #475569;
  --md-footer-fg-color--light:         #94a3b8;
  --md-footer-fg-color--lighter:       #cbd5e1;
  --md-footer-bg-color:                #fafafa;
  --md-footer-bg-color--dark:          #f4f4f6;

  --gnus-callout-bg:                   #eff6ff;
  --gnus-callout-border:               #bfdbfe;
  --gnus-callout-fg:                   #1e3a8a;
  --gnus-callout-icon:                 #3b82f6;
  --gnus-code-block-bg:                #1e293b;
  --gnus-search-bg:                    #f4f4f6;
}

/* ── Dark mode palette ────────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:               #0b0d12;
  --md-default-fg-color:                hsla(210, 20%, 96%, 1);
  --md-default-fg-color--light:         #cbd5e1;
  --md-default-fg-color--lighter:       #71798a;
  --md-default-fg-color--lightest:      #232733;

  --md-primary-fg-color:               #12141c;
  --md-primary-fg-color--light:        #12141c;
  --md-primary-fg-color--dark:         #05060a;
  --md-primary-bg-color:               #f1f5f9;
  --md-primary-bg-color--light:        #cbd5e1;

  --md-accent-fg-color:                #818cf8;
  --md-accent-fg-color--transparent:   rgba(129, 140, 248, .12);

  --md-typeset-a-color:                #818cf8;

  --md-code-bg-color:                  #161922;
  --md-code-fg-color:                  #e2e8f0;

  --md-typeset-color:                  hsla(210, 20%, 90%, 1);

  --md-footer-fg-color:                #cbd5e1;
  --md-footer-fg-color--light:         #94a3b8;
  --md-footer-fg-color--lighter:       #71798a;
  --md-footer-bg-color:                #12141c;
  --md-footer-bg-color--dark:          #05060a;

  --gnus-callout-bg:                   #111a2e;
  --gnus-callout-border:               #1e3a5f;
  --gnus-callout-fg:                   #bfdbfe;
  --gnus-callout-icon:                 #60a5fa;
  --gnus-code-block-bg:                #05070a;
  --gnus-search-bg:                    #161922;
}

[data-md-color-scheme="slate"] .md-typeset,
[data-md-color-scheme="slate"] .md-typeset p,
[data-md-color-scheme="slate"] .md-typeset li,
[data-md-color-scheme="slate"] .md-typeset td,
[data-md-color-scheme="slate"] .md-typeset th { color: var(--md-typeset-color); }

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 { color: #f1f5f9; }

/* ── Typography ───────────────────────────────────────────────────────────── */
body, .md-typeset, .md-header, .md-nav, .md-search__input, .md-tabs {
  font-family: var(--gnus-font-sans) !important;
}
.md-typeset code, .md-typeset pre, .md-typeset kbd, .md-typeset__scrollwrap {
  font-family: var(--gnus-font-mono) !important;
}
.md-content .md-typeset h1 { font-weight: 800 !important; letter-spacing: -.02em !important; font-size: 38px !important; line-height: 1.15 !important; }
.md-content .md-typeset h2 { font-weight: 700 !important; letter-spacing: -.01em !important; font-size: 24px !important; }
.md-content .md-typeset h3 { font-weight: 700 !important; font-size: 17px !important; }
.md-content .md-typeset h4,
.md-content .md-typeset h5,
.md-content .md-typeset h6 { font-weight: 700 !important; font-size: 15px !important; }
/* Protocol's denser type scale, matched px-for-px to the mockup
   (GCS Docs Theme.dc.html). Material's own bundled stylesheet sets
   competing sizes on these same selectors and — depending on build/load
   order — can win ties against a plain override, which is why sizes kept
   silently reverting. !important on every rule in this block guarantees
   ours always wins regardless of load order. Line-height is set on every
   typeset element (not just p/li/td/th) so headings, blockquotes, and dl
   lists don't fall back to Material's tighter default. */
.md-typeset,
.md-typeset p,
.md-typeset li,
.md-typeset td,
.md-typeset th,
.md-typeset blockquote,
.md-typeset dd {
  font-size: 16px !important;
  line-height: 1.75 !important;
}
.md-typeset .md-content__button,
.md-typeset small { font-size: 13px !important; }

/* ── Content column width ─────────────────────────────────────────────────
   Unlike themes/theme.css (old theme, max-width:860px), protocol.css never
   capped the reading column — body text stretched the full width between
   the sidebars, producing very long lines that read as oversized. */
.md-content__inner {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* ── Page gutters (content area only) ─────────────────────────────────────── */
:root {
  --gnus-page-max-width: 1440px;
  --gnus-page-gutter-min: 2rem;
}
.md-main__inner {
  max-width: var(--gnus-page-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.md-sidebar--primary {
  padding-left: var(--gnus-page-gutter-min);
}
.md-sidebar--secondary {
  padding-right: var(--gnus-page-gutter-min);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
/* Mirrors the mockup's header exactly (GCS Docs Theme.dc.html): a plain
   flex row with fixed 24px edge padding — NO max-width cap or auto
   margin-centering. That centering trick was why the header's edges
   visibly drifted relative to the viewport edge on resize, unlike the
   mockup which is always edge-anchored. Three sections: left (logo+title,
   fixed width) / center (search, flexes and caps at 480px) / right
   (toggle+source, fixed width, grouped tightly) — not shoved into one
   right-hand group like before. */
.md-header {
  box-shadow: none;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  color: var(--md-primary-bg-color);
}
.md-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  height: var(--gnus-header-height);
  max-width: none;
  margin: 0;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
.md-header__inner > .md-header__button.md-logo {
  margin-right: 0;
  flex: 0 0 auto;
  padding: 0;
}
.md-header__inner > .md-header__button.md-logo img {
  display: block;
  width: auto;
  height: 30px;
}
/* Material absolutely positions the topic text inside this element, so the
   title needs an explicit flex basis on desktop; intrinsic/auto width can
   collapse to zero even though the text itself is present. */
.md-header__inner > .md-header__title { margin-right: 0; }
/* Right-hand group (palette toggle, repo/source link, Ask AI) stays
   tight and fixed-width, right-aligned — same as the mockup's right
   column — and never grows/shrinks with the window. */
.md-header__inner > .md-header__option,
.md-header__inner > .md-header__source,
.md-header__inner > .md-header__button:not(.md-logo) {
  flex: 0 0 auto;
  margin-left: 0;
}
/* Material renders the palette before search in the DOM. On wide screens,
   take search out of that source-order flow so it remains centered in the
   viewport, while the title has a real width and the controls stay right. */
@media screen and (min-width: 60em) {
  .md-header__inner { position: relative; }
  .md-header__inner > .md-header__title {
    flex: 0 1 260px;
    min-width: 140px;
    max-width: min(260px, calc(50vw - 280px));
    margin-left: 12px;
  }
  .md-header__inner > .md-search {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(480px, 42vw);
    max-width: 480px;
    margin: 0;
    transform: translate(-50%, -50%);
  }
  .md-header__inner > .md-search > .md-search__inner {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .md-header__inner > .md-header__option {
    margin-left: auto;
  }
}
/* Site title should always show (matches the mockup's persistent brand
   name) while the page-specific topic (the second .md-header__topic,
   which Material slides in on scroll) stays hidden — our design has no
   scroll-swap. Targeting the two topics directly (instead of forcing
   opacity/transform on the shared .md-header__title parent) avoids
   breaking Material's own positioning, which stacked both topics on top
   of each other and threw off header height/spacing. */
.md-header__title {
  font-size: 14px;
  font-weight: 700;
  height: var(--gnus-header-height);
  line-height: var(--gnus-header-height);
}
.md-header__ellipsis {
  height: 100%;
}
.md-header__title .md-header__topic:first-child {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 1;
}
.md-header__title .md-header__topic:not(:first-child) {
  opacity: 0 !important;
  transform: translateX(1rem) !important;
  pointer-events: none !important;
}
.md-header__title, .md-header__button, .md-header__topic {
  color: var(--md-primary-bg-color) !important;
}
.md-tabs {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}
.md-path {
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Search pill, Protocol-style */
.md-search__input {
  height: 38px;
  background-color: var(--gnus-search-bg);
  border-radius: 8px;
  font-size: 14px;
}
.md-search__input::placeholder {
  color: var(--md-default-fg-color--lighter);
}
.md-search__form {
  height: 38px;
  border-radius: 8px;
}

/* Keep Material's focus state from widening/repositioning the search inner
   panel, and keep the result surface within the same box. Document heading
   rules are intentionally scoped above so indexed h1/h2 text cannot become
   oversized here. */
@media screen and (min-width: 60em) {
  /* The centered protocol search is a self-contained dropdown. Material's
     default full-page overlay otherwise leaves a dark veil behind the menu
     after the result list ends. */
  .md-search__overlay {
    display: none !important;
  }
  .md-search__inner {
    width: 100% !important;
  }
  html body .md-header .md-search .md-search__output {
    left: 0;
    right: 0;
    width: 100% !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--gnus-header-height)) !important;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: var(--md-default-bg-color);
    box-shadow: none;
  }
  html body .md-header .md-search .md-search__scrollwrap {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--gnus-header-height));
    overflow-y: auto !important;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    background: transparent !important;
  }
}
/* The search input is required in Material's generated markup, so :valid is
   a reliable CSS-only signal that a query actually exists. Do not paint an
   empty dropdown merely because the input received focus. */
.md-search__inner:not(:has(.md-search__input:valid)) .md-search__output {
  display: none !important;
}
.md-search-result,
.md-search-result__list {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: var(--md-default-bg-color);
}
.md-search-result__meta {
  margin: 0;
  padding: 8px 16px;
  background: var(--gnus-search-bg);
  font-size: 12px;
  line-height: 1.35;
}
.md-search-result__article.md-typeset {
  position: relative;
  padding: 12px 16px 12px 40px;
  font-size: 13px !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}
.md-search-result__article.md-typeset h1,
.md-search-result__article.md-typeset h2,
.md-search-result__article.md-typeset h3,
.md-search-result__article.md-typeset h4,
.md-search-result__article.md-typeset h5,
.md-search-result__article.md-typeset h6,
.md-search-result__article .md-search-result__link {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}
.md-search-result__article.md-typeset p {
  margin: 6px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
/* Search previews are rendered outside the document content column, so the
   normal code-token palette does not reach them. Reapply the same dark-code
   palette locally without changing code blocks in the document itself. */
.md-search-result__article.md-typeset .highlight,
.md-search-result__article.md-typeset pre,
.md-search-result__article.md-typeset pre > code {
  --md-code-hl-color:             #60a5fa33;
  --md-code-hl-number-color:      #f0abfc;
  --md-code-hl-special-color:     #f472b6;
  --md-code-hl-function-color:    #7dd3fc;
  --md-code-hl-constant-color:    #c4b5fd;
  --md-code-hl-keyword-color:     #93c5fd;
  --md-code-hl-string-color:      #86efac;
  --md-code-hl-name-color:        #e2e8f0;
  --md-code-hl-operator-color:    #f1f5f9;
  --md-code-hl-punctuation-color: #cbd5e1;
  --md-code-hl-comment-color:     #94a3b8;
  --md-code-hl-generic-color:     #fca5a5;
  --md-code-hl-variable-color:    #fcd34d;
}
.md-search-result__article.md-typeset pre > code,
.md-search-result__article.md-typeset .highlight,
.md-search-result__article.md-typeset .highlight pre,
.md-search-result__article.md-typeset .highlight code {
  background: var(--gnus-code-block-bg);
  color: var(--md-code-hl-name-color);
}
.md-search-result__article .c,
.md-search-result__article .ch,
.md-search-result__article .cm,
.md-search-result__article .c1,
.md-search-result__article .cs { color: var(--md-code-hl-comment-color); }
.md-search-result__article .k,
.md-search-result__article .kc,
.md-search-result__article .kd,
.md-search-result__article .kn,
.md-search-result__article .kp,
.md-search-result__article .kr,
.md-search-result__article .kt { color: var(--md-code-hl-keyword-color); }
.md-search-result__article .s,
.md-search-result__article .sa,
.md-search-result__article .sb,
.md-search-result__article .sc,
.md-search-result__article .sd,
.md-search-result__article .s2,
.md-search-result__article .se,
.md-search-result__article .sh,
.md-search-result__article .si,
.md-search-result__article .sx,
.md-search-result__article .sr,
.md-search-result__article .s1,
.md-search-result__article .ss { color: var(--md-code-hl-string-color); }
.md-search-result__article .nf,
.md-search-result__article .fm { color: var(--md-code-hl-function-color); }
.md-search-result__article .nc,
.md-search-result__article .nn { color: var(--md-code-hl-constant-color); }
.md-search-result__article .m,
.md-search-result__article .mi,
.md-search-result__article .mf,
.md-search-result__article .mh,
.md-search-result__article .mo { color: var(--md-code-hl-number-color); }
.md-search-result__article .o,
.md-search-result__article .ow { color: var(--md-code-hl-operator-color); }
.md-search-result__article .p { color: var(--md-code-hl-punctuation-color); }
.md-search-result__article .cp { color: var(--md-code-hl-special-color); }

/* Light/dark palette toggle — left in Material's default unstyled state
   (no border/bg, generic icon color) instead of matching the mockup's
   boxed 34x34 button. */
.md-header__option {
  display: flex;
  align-items: center;
}
.md-header__option .md-header__button.md-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lightest);
  background-color: var(--gnus-search-bg);
  color: var(--md-default-fg-color--light) !important;
}
/* Replace Material's generic palette glyphs with the protocol theme's
   explicit sun/moon icons. The labels remain controlled by Material's radio
   state, so only the currently available action is shown. */
.md-header__option label[for="__palette_0"]::before,
.md-header__option label[for="__palette_1"]::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.md-header__option label[for="__palette_0"]::before {
  background-color: #facc15;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
}
.md-header__option label[for="__palette_1"]::before {
  background-color: #94a3b8;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}
.md-header__option label[for="__palette_0"] svg,
.md-header__option label[for="__palette_1"] svg {
  display: none !important;
}

/* ── Left nav ─────────────────────────────────────────────────────────────── */
.md-nav__title {
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--lighter);
}
.md-nav__link {
  border-radius: 7px;
  padding: .3rem .5rem;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--md-default-fg-color--light);
}
.md-nav__link:hover {
  color: var(--md-accent-fg-color);
}
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--md-accent-fg-color) !important;
  font-weight: 600;
  background: var(--md-accent-fg-color--transparent);
}

/* ── Right TOC rail ───────────────────────────────────────────────────────── */
.md-sidebar--secondary .md-nav__title {
  color: var(--md-default-fg-color--lighter);
}
.md-sidebar--secondary .md-nav__link {
  font-size: 13px !important;
  border-left: 2px solid var(--md-default-fg-color--lightest);
  border-radius: 0;
  /* gap between rule and text — at shallow nesting Material's own indent is
     ~0, so a small padding here made the rule sit flush against the glyphs */
  padding-left: 1rem;
  margin-left: 2px;
}
.md-sidebar--secondary .md-nav__link--active {
  border-left-color: var(--md-accent-fg-color);
  background: none;
}

/* ── Admonitions / callouts ───────────────────────────────────────────────── */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--gnus-callout-border);
  background-color: var(--gnus-callout-bg);
  border-radius: 10px;
  border-left: 1px solid var(--gnus-callout-border);
  box-shadow: none;
  font-size: 14.5px !important;
}
.md-typeset .admonition-title,
.md-typeset summary {
  background-color: transparent;
  color: var(--gnus-callout-fg);
  font-weight: 600;
}
.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--gnus-callout-icon);
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.md-typeset table:not([class]) {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  font-size: 14.5px !important;
  overflow: hidden;
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  background-color: var(--gnus-search-bg);
  font-weight: 600;
}
.md-typeset table:not([class]) tr:hover {
  background-color: var(--md-accent-fg-color--transparent);
}

/* ── Code blocks ──────────────────────────────────────────────────────────── */
/* Fenced code blocks always sit on --gnus-code-block-bg (a fixed dark navy
   in both color schemes) — force a light fg here so light mode isn't stuck
   with dark-on-dark (--md-code-fg-color is dark in light mode). */
/* Code block bg is hard-pinned to a dark navy in both color schemes (see
   below), but Material's syntax-token colors (--md-code-hl-*) are scheme-
   dependent and tuned dark-on-light for the default/light scheme — against
   our always-dark bg those tokens were unreadable. Pin the token palette to
   its dark-mode-friendly values regardless of active scheme. */
.md-typeset .highlight {
  --md-code-hl-color:            #60a5fa33;
  --md-code-hl-number-color:     #f0abfc;
  --md-code-hl-special-color:    #f472b6;
  --md-code-hl-function-color:   #7dd3fc;
  --md-code-hl-constant-color:   #c4b5fd;
  --md-code-hl-keyword-color:    #93c5fd;
  --md-code-hl-string-color:     #86efac;
  --md-code-hl-name-color:       #e2e8f0;
  --md-code-hl-operator-color:   #f1f5f9;
  --md-code-hl-punctuation-color:#cbd5e1;
  --md-code-hl-comment-color:    #94a3b8;
  --md-code-hl-generic-color:    #fca5a5;
  --md-code-hl-variable-color:   #fcd34d;
}
.md-typeset pre > code,
.md-typeset .highlight,
.md-typeset .highlight pre,
.md-typeset .highlight code {
  background-color: var(--gnus-code-block-bg);
  color: #e2e8f0;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  border-radius: 10px;
}
.md-typeset code {
  background-color: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  font-size: 13px !important;
  border-radius: 4px;
}

/* ── Buttons / pagination-style footer nav ───────────────────────────────── */
.md-footer-nav__link {
  border-radius: 8px;
}

/* ── Ask AI Drawer theme variables ────────────────────────────────────────── */
:root {
  --ask-accent: #4f46e5;
  --ask-drawer-bg: #fff;
  --ask-drawer-fg: #0f172a;
  --ask-drawer-border: #e5e7eb;
  --ask-msg-bg: #f8fafc;
  --ask-msg-border: #e5e7eb;
  --ask-code-bg: #f1f5f9;
  --ask-input-bg: #fff;
  --ask-input-border: #e5e7eb;
  --ask-thinking-bg: #f8fafc;
  --ask-session-bg: #fafafa;
  --ask-session-border: #e5e7eb;
  --ask-session-item-border: #eef1f5;
  --ask-session-active: #eef2ff;
  --ask-session-hover: #f4f4f6;
  --ask-muted-fg: #64748b;
  --ask-danger: #dc2626;

  --ask-dark-bg: #12141c;
  --ask-dark-fg: #e2e8f0;
  --ask-dark-border: #232733;
  --ask-dark-msg-bg: #161922;
  --ask-dark-session-bg: #0b0d12;
  --ask-dark-session-item-border: #1e2230;
  --ask-dark-muted-fg: #94a3b8;
}