.chat-menu-toggle {
  position: relative;
  /* inline-flex, not flex — this must always hug its own content width
     (both labels + their padding) for the indicator/clip-path position math
     in chat-menu-toggle.js to be correct. A block-level flex container
     stretches to fill whatever parent it's placed in unless that parent
     happens to shrink-wrap it (e.g. flex with align-items:flex-start),
     which isn't guaranteed at every real call site. */
  display: inline-flex;
  border-radius: 100px;
  border: 1px solid var(--border-modal-box);
  background: var(--background-modal-box);
  /* Real fetched effect (node 434:10466, "chat menu"): a named "hero glass"
     style — Effect(type: GLASS, radius: 42) — not the generic --glass-blur
     token (radius 100) first used here; --topnav-hero-glass-blur is this
     project's existing token for that same named effect. */
  backdrop-filter: var(--topnav-hero-glass-blur);
  -webkit-backdrop-filter: var(--topnav-hero-glass-blur);
}

/* Docked state (js/app.js's scroll listener, inside openChatSettings):
   left/top are computed there from the real rendered back button so this
   lines up with it exactly. Escapes .chat-settings-screen__menu-mount (and
   the scroll area) without collapsing that box's own reserved space — see
   its own comment in css/chat-settings-screen.css. */
.chat-menu-toggle--docked {
  position: fixed;
  z-index: 2;
}

/* Docked state (js/app.js's scroll listener, inside openChatSettings):
   left/top are computed there from the real rendered back button so this
   lines up with it exactly. Escapes .chat-settings-screen__menu-mount (and
   the scroll area) without collapsing that box's own reserved space, so
   the list keeps scrolling underneath it undisturbed — see its own comment
   in css/chat-settings-screen.css. */
.chat-menu-toggle--docked {
  position: fixed;
  z-index: 2;
}

.chat-menu-toggle__indicator {
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: -1px;
  border-radius: 100px;
  /* No border here — the track's own border (var(--border-modal-box)
     above) is the only outline this control shows; the indicator painting
     on top of it, with no border of its own, is what avoids a visible
     double-border seam at the boundary between active/inactive. */
  background: linear-gradient(180deg, var(--surface-filter-chip-from), var(--surface-filter-chip-to));
  /* Explicit 500ms ease-out per instruction — a deliberate one-off, not
     var(--transition-standard)'s 300ms, so it stays in lockstep with
     .chat-menu-toggle__labels--active's own clip-path transition below. */
  transition: transform 500ms ease-out, width 500ms ease-out;
}

.chat-menu-toggle__indicator--no-transition {
  transition: none;
}

.chat-menu-toggle__labels {
  display: flex;
  color: var(--text-primary);
}

.chat-menu-toggle__label {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  border: none;
  background: none;
  cursor: pointer;
  padding: 8px 12px 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  color: inherit;
}

/* The decorative dark-text duplicate — always sits exactly on top of the
   real (light) labels, revealed only where clip-path currently overlaps
   the indicator (see js/components/chat-menu-toggle.js). pointer-events:
   none so every click still lands on the real buttons underneath. */
.chat-menu-toggle__labels--active {
  position: absolute;
  inset: 0;
  /* Must outrank the base row's own buttons (z-index:1 each) as a whole,
     not rely on DOM order among individually z-indexed descendants — both
     rows' buttons share the same .chat-menu-toggle__label z-index:1, so
     without this the base (light) button was winning the paint order and
     hiding the clipped dark text underneath it entirely, regardless of
     clip-path being geometrically correct. */
  z-index: 2;
  pointer-events: none;
  color: var(--text-filter-chip);
  transition: clip-path 500ms ease-out;
}

.chat-menu-toggle__labels--active .chat-menu-toggle__label {
  cursor: default;
}

.chat-menu-toggle__labels--no-transition {
  transition: none;
}