/* SPEC-011: chat-header consistency.
 *
 * The injected "Admin" affordance (public/custom.js, SPEC-008) used to render
 * as a bare text-link next to Chainlit's native header buttons (Readme, theme,
 * avatar) — different height, no hover surface, no focus ring (issue #150).
 * Here we style it as a proper *ghost* header button using Chainlit's own
 * shadcn design tokens, so it matches #readme-button in BOTH light and dark.
 * Tokens (HSL triplets, hsl(var(--x))): --foreground, --accent,
 * --accent-foreground, --radius, --ring — set on :root by Chainlit's bundle. */

.aise-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem; /* h-9 — same box as the header's ghost icon buttons */
  margin: 0 0.25rem;
  padding: 0 0.75rem; /* px-3 */
  border-radius: calc(var(--radius) - 2px);
  font-family: inherit;
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: hsl(var(--foreground));
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.aise-header-btn:hover {
  /* Same hover surface shadcn/Chainlit gives its ghost buttons. */
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.aise-header-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--ring));
}

/* Last-resort fixed fallback (custom.js only uses this if Chainlit's header row
 * can't be located): keep the button appearance, add pinned positioning. */
.aise-header-btn--fixed {
  position: fixed;
  top: 0.75rem;
  right: 8.75rem;
  z-index: 9999;
}