/*
 * AI Infrastructure Intelligence — Chrome v2
 *
 * Page-level chrome (top nav, tab strip, context row, footer status bar).
 * Visible only when `body.ui-v2` is set. The v1 chrome remains in the DOM
 * and is hidden via the rule at the bottom of this file when v2 is active.
 *
 * Authority: docs/ui-review/UI-CHROME-BEFORE-AFTER.md
 * Tokens: tokens.css
 */

/* ============================================================ */
/*  Show / hide v1 vs v2 chrome based on body flag              */
/* ============================================================ */

body:not(.ui-v2) .chrome,
body:not(.ui-v2) .chrome-status {
  display: none !important;
}

body.ui-v2 > header.top-bar {
  display: none !important;
}

/* ============================================================ */
/*  Body layout when v2 chrome is active                        */
/* ============================================================ */

body.ui-v2 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.ui-v2 > main.workbench,
body.ui-v2 > main.hidden {
  flex: 1 0 auto;
}

/* ============================================================ */
/*  Skip link                                                   */
/* ============================================================ */

.skip-link {
  background: var(--color-ink-800);
  color: var(--color-surface);
  font: var(--fw-medium) var(--type-body-md-size) / 1 var(--font-sans);
  left: var(--space-3);
  padding: var(--space-3) var(--space-4);
  position: absolute;
  top: var(--space-3);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--motion-snap);
  z-index: var(--z-overlay);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ============================================================ */
/*  ROW 1 — primary nav                                         */
/* ============================================================ */

.chrome {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line-200);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.chrome-nav {
  align-items: center;
  display: grid;
  gap: var(--space-7);
  grid-template-columns: auto 1fr auto auto;
  /* PE-CRITIQUE follow-up: BROWSE / ANALYZE / REFERENCE eyebrow labels
   * are flex-column children below their tab buttons. Without bottom
   * padding here, the eyebrow row spilled past the header's
   * border-bottom and got visually crossed by the next section's top
   * edge (Internal Server Error banner, page section title, etc.).
   * Adding padding-bottom keeps the eyebrows inside the header zone
   * with the border-bottom landing below them. */
  min-height: 72px;
  padding: 0 var(--space-6) var(--space-3);
}

/* Brand mark ------------------------------------------------------ */

.chrome-brand {
  align-items: center;
  color: var(--color-steel-600);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: var(--type-overline-size);
  font-weight: var(--fw-medium);
  gap: var(--space-3);
  letter-spacing: var(--ls-overline);
  line-height: var(--type-overline-lh);
  text-decoration: none;
  text-transform: uppercase;
}

.chrome-brand:hover {
  color: var(--color-ink-800);
}

.chrome-brand-mark {
  color: var(--color-brand-600);
  flex: none;
}

.chrome-brand-text {
  white-space: nowrap;
}

/* Tab groups ------------------------------------------------------ */

.chrome-tabs {
  align-items: end;
  display: flex;
  gap: var(--space-7);
  justify-self: start;
  padding: var(--space-3) 0 0;
}

.chrome-tab-group {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  /* PE-CRITIQUE UI follow-up: the active-tab ::after underline sits at
   * `bottom: -13px` below the button. The old gap (--space-1, ~4px)
   * meant the underline overlapped the BROWSE / ANALYZE / REFERENCE
   * eyebrow label below it. Widening the gap pushes the eyebrow row
   * fully below the underline so the two don't collide. */
  gap: var(--space-3);
  position: relative;
}

.chrome-tab-group-buttons {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.chrome-tab-group-label {
  color: var(--color-steel-400);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-overline);
  line-height: 1;
  padding: 0 var(--space-3) var(--space-2);
  text-transform: uppercase;
}

/* Tab buttons ----------------------------------------------------- */

.chrome-tab {
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-steel-600);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  padding: var(--space-3) var(--space-4);
  position: relative;
  transition: background-color var(--dur-fast) var(--motion-snap),
              color var(--dur-fast) var(--motion-snap);
  white-space: nowrap;
}

.chrome-tab:hover {
  background: var(--color-hover-overlay);
  color: var(--color-ink-800);
}

.chrome-tab:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.chrome-tab.is-active {
  background: var(--color-brand-100);
  color: var(--color-ink-800);
}

.chrome-tab.is-active::after {
  background: var(--color-brand-600);
  /* PE-CRITIQUE UI follow-up: pull the active-tab indicator closer to
   * the tab button (was -13px, now -2px) so it visually attaches to the
   * tab instead of floating in the gap where the eyebrow label sits. */
  bottom: -2px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
}

/* Search trigger -------------------------------------------------- */

.chrome-search-trigger {
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-sm);
  color: var(--color-steel-400);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  gap: var(--space-3);
  min-width: 220px;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  text-align: left;
  transition: border-color var(--dur-fast) var(--motion-snap),
              color var(--dur-fast) var(--motion-snap);
}

.chrome-search-trigger:hover {
  border-color: var(--color-line-300);
  color: var(--color-steel-600);
}

.chrome-search-trigger:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.chrome-search-placeholder {
  flex: 1;
}

.chrome-search-shortcut {
  background: var(--color-neutral-bg);
  border-radius: var(--radius-xs);
  color: var(--color-steel-500);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  padding: 2px var(--space-2);
}

/* User cluster ---------------------------------------------------- */

.chrome-user {
  align-items: center;
  display: flex;
  gap: var(--space-3);
}

.chrome-notify {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-steel-500);
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  padding: 0;
  position: relative;
  transition: background-color var(--dur-fast) var(--motion-snap),
              color var(--dur-fast) var(--motion-snap);
  width: 32px;
}

.chrome-notify:hover {
  background: var(--color-hover-overlay);
  color: var(--color-ink-800);
}

.chrome-notify-dot {
  background: var(--color-brand-600);
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  height: 8px;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 8px;
}

.chrome-notify-dot[hidden] {
  display: none;
}

.chrome-avatar {
  align-items: center;
  background: var(--color-brand-100);
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--color-brand-700);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--type-caption-size);
  font-weight: var(--fw-semibold);
  height: 32px;
  justify-content: center;
  letter-spacing: var(--ls-overline);
  padding: 0;
  text-transform: uppercase;
  transition: box-shadow var(--dur-fast) var(--motion-snap);
  width: 32px;
}

.chrome-avatar[hidden] {
  display: none;
}

.chrome-avatar:hover {
  border-color: var(--color-brand-600);
}

.chrome-avatar:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Account panel — anchored popover behind the avatar chip. --------- */

.chrome-user {
  position: relative;
}

.chrome-account-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-3);
  min-width: 224px;
  padding: var(--space-4);
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: var(--z-dropdown);
}

.chrome-account-panel[hidden] {
  display: none;
}

.chrome-account-rows {
  border-bottom: 1px solid var(--color-line-200);
  padding-bottom: var(--space-3);
}

.chrome-account-identity {
  color: var(--color-ink-800);
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

.chrome-account-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.chrome-account-meta > div {
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.chrome-account-meta dt {
  color: var(--color-steel-500);
  font-size: var(--type-caption-size);
}

.chrome-account-meta dd {
  color: var(--color-ink-800);
  font-size: var(--type-caption-size);
  margin: 0;
}

.chrome-account-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.chrome-account-action {
  background: transparent;
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-sm);
  color: var(--color-ink-800);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  transition: background-color var(--dur-fast) var(--motion-snap);
  width: 100%;
}

.chrome-account-action:hover {
  background: var(--color-hover-overlay);
}

.chrome-account-action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.chrome-account-action-primary {
  background: var(--color-brand-600);
  border-color: var(--color-brand-600);
  color: var(--color-surface);
}

.chrome-account-action-primary:hover {
  background: var(--color-brand-700);
}

.chrome-account-team-note {
  color: var(--color-steel-500);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  margin: 0;
}

.chrome-account-team-note a {
  color: var(--color-brand-600);
}

/* ============================================================ */
/*  ROW 2 — context strip                                       */
/* ============================================================ */

.chrome-context {
  align-items: center;
  background: var(--color-paper-tint);
  border-bottom: 1px solid var(--color-line-200);
  display: flex;
  gap: var(--space-5);
  justify-content: space-between;
  min-height: 40px;
  padding: var(--space-3) var(--space-6);
}

.chrome-context[hidden] {
  display: none;
}

.chrome-breadcrumb {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  gap: var(--space-3);
  min-width: 0;
}

.chrome-crumb {
  color: var(--color-steel-600);
  text-decoration: none;
}

.chrome-crumb:hover {
  color: var(--color-ink-800);
  text-decoration: underline;
}

.chrome-crumb-current {
  color: var(--color-ink-800);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chrome-crumb-sep {
  color: var(--color-steel-300);
  user-select: none;
}

.chrome-meta-strip {
  align-items: center;
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.chrome-meta-strip li {
  align-items: baseline;
  color: var(--color-steel-600);
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  gap: var(--space-2);
  position: relative;
}

.chrome-meta-strip li + li::before {
  color: var(--color-steel-300);
  content: "·";
  left: calc(-1 * var(--space-3));
  position: absolute;
}

.chrome-meta-label {
  color: var(--color-steel-400);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
}

.chrome-meta-value {
  color: var(--color-ink-800);
  font-weight: var(--fw-semibold);
}

/* ============================================================ */
/*  Footer status bar                                           */
/* ============================================================ */

.chrome-status {
  align-items: center;
  background: var(--color-paper-tint);
  border-top: 1px solid var(--color-line-200);
  color: var(--color-steel-400);
  display: flex;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--type-overline-size);
  gap: var(--space-5);
  justify-content: space-between;
  letter-spacing: var(--ls-overline);
  min-height: 28px;
  padding: 0 var(--space-6);
  text-transform: uppercase;
}

.chrome-status-facts {
  align-items: center;
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.chrome-status-facts li {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

.chrome-status-dot {
  background: var(--color-steel-400);
  border-radius: 50%;
  display: inline-block;
  flex: none;
  height: 8px;
  width: 8px;
}

.chrome-status-dot.is-ok {
  background: var(--color-positive-text);
}

.chrome-status-dot.is-warn {
  background: var(--color-warn-text);
}

.chrome-status-dot.is-error {
  background: var(--color-risk-text);
}

.chrome-status-actions {
  align-items: center;
  display: flex;
  gap: var(--space-5);
}

.chrome-status-button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-steel-500);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--type-overline-size);
  letter-spacing: var(--ls-overline);
  min-height: 22px;
  padding: var(--space-1) var(--space-3);
  text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--motion-snap),
              color var(--dur-fast) var(--motion-snap);
}

.chrome-status-button:hover {
  background: var(--color-hover-overlay);
  color: var(--color-ink-800);
}

.chrome-status-button:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.chrome-status-version {
  color: var(--color-steel-300);
}

/* ============================================================ */
/*  Responsive                                                  */
/* ============================================================ */

@media (max-width: 1280px) {
  .chrome-nav {
    grid-template-columns: auto 1fr auto;
    padding: 0 var(--space-5);
  }

  .chrome-user {
    display: none;
  }
}

@media (max-width: 960px) {
  .chrome-nav {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 52px;
    padding: 0 var(--space-4);
  }

  .chrome-tabs {
    gap: var(--space-5);
    min-width: 0;
    overflow-x: auto;
    width: 100%;
  }

  .chrome-tab-group-label {
    display: none;
  }

  .chrome-tab-group-buttons {
    gap: 0;
  }

  .chrome-search-trigger {
    display: none;
  }

  .chrome-context {
    padding: var(--space-2) var(--space-4);
  }

  .chrome-meta-strip {
    display: none;
  }

  .chrome-status {
    flex-wrap: wrap;
    min-height: auto;
    padding: var(--space-2) var(--space-4);
  }
}

@media (max-width: 640px) {
  .chrome-brand-text {
    display: none;
  }

  .chrome-tab {
    padding: var(--space-3) var(--space-3);
  }
}

/*
 * Mobile IA — viewport <= 720px.
 *
 * The desktop workbench is a 2-column grid (list + detail rail) at 360px+
 * each. That doesn't fit a phone, so we stack everything vertically and
 * re-introduce the chrome search trigger (the only UI affordance for the
 * command palette on touch devices since ⌘K isn't available).
 */

@media (max-width: 720px) {
  /* Show the search trigger again — touch users have no keyboard shortcut */
  body.ui-v2 .chrome-search-trigger {
    display: inline-flex;
    padding: var(--space-2) var(--space-3);
  }

  body.ui-v2 .chrome-search-trigger .chrome-search-placeholder {
    display: none;
  }

  /* Cheatsheet not useful on touch — but leave reachable for tablets */
  .shortcuts-cheatsheet-window {
    max-height: 90vh;
  }

  /* Command palette window leaves less margin on small screens */
  .command-palette {
    padding-top: 8vh;
  }

  .command-palette-window {
    max-height: 80vh;
  }
}

/* ============================================================ */
/*  Command palette overlay (⌘K)                                 */
/* ============================================================ */

/*
 * Pinned to the viewport so it overlays everything including the rail and
 * footer. The scrim is its own absolutely-positioned layer to keep the
 * window above it without z-index gymnastics inside the window itself.
 */

.command-palette {
  align-items: flex-start;
  display: flex;
  inset: 0;
  justify-content: center;
  padding-top: 14vh;
  position: fixed;
  z-index: 100;
}

.command-palette[hidden] {
  display: none;
}

.command-palette-scrim {
  background: var(--color-scrim);
  inset: 0;
  position: absolute;
}

.command-palette-window {
  background: var(--color-surface);
  border: 1px solid var(--color-line-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-3);
  display: flex;
  flex-direction: column;
  max-height: min(560px, 70vh);
  max-width: 640px;
  position: relative;
  width: calc(100% - var(--space-6));
}

.command-palette-input-row {
  align-items: center;
  border-bottom: 1px solid var(--color-line-200);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}

.command-palette-icon {
  color: var(--color-steel-400);
  flex: none;
  font-size: 16px;
  line-height: 1;
}

.command-palette-input {
  background: transparent;
  border: 0;
  color: var(--color-ink-800);
  flex: 1;
  font-family: var(--font-sans);
  font-size: var(--type-body-lg-size, 16px);
  line-height: 1.2;
  outline: none;
  padding: 0;
}

.command-palette-input::placeholder {
  color: var(--color-steel-400);
}

.command-palette-hint {
  background: var(--color-neutral-bg);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-sm);
  color: var(--color-steel-500);
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  padding: 2px 6px;
}

.command-palette-results {
  flex: 1;
  list-style: none;
  margin: 0;
  overflow-y: auto;
  padding: var(--space-2) 0;
}

.command-palette-result {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--space-3) var(--space-5);
  transition: background-color var(--dur-fast) var(--motion-snap);
}

.command-palette-result.is-active {
  background: var(--color-brand-100, var(--color-hover-overlay));
}

.command-palette-result-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.command-palette-result-title {
  color: var(--color-ink-800);
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-palette-result-meta {
  color: var(--color-steel-500);
  font-family: var(--font-sans);
  font-size: var(--type-caption-size);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-palette-result-id {
  color: var(--color-steel-400);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-palette-empty {
  color: var(--color-steel-500);
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  padding: var(--space-5);
  text-align: center;
}

.command-palette-footer {
  border-top: 1px solid var(--color-line-200);
  color: var(--color-steel-500);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: var(--type-caption-size);
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
}

.command-palette-footer kbd {
  background: var(--color-neutral-bg);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  margin-right: var(--space-1);
  padding: 1px 5px;
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ============================================================ */
/*  Shortcuts cheat sheet overlay (`?`)                          */
/* ============================================================ */

/*
 * Same overlay chassis as the command palette: fixed-position dialog with
 * a separate scrim layer. Body uses a 3-section grouped layout so adding
 * new shortcut sections later is just markup.
 */

.shortcuts-cheatsheet {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: var(--space-6);
  position: fixed;
  z-index: 100;
}

.shortcuts-cheatsheet[hidden] {
  display: none;
}

.shortcuts-cheatsheet-scrim {
  background: var(--color-scrim);
  inset: 0;
  position: absolute;
}

.shortcuts-cheatsheet-window {
  background: var(--color-surface);
  border: 1px solid var(--color-line-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-3);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  max-width: 540px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.shortcuts-cheatsheet-header {
  align-items: center;
  border-bottom: 1px solid var(--color-line-200);
  display: flex;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
}

.shortcuts-cheatsheet-header h2 {
  color: var(--color-ink-800);
  font-family: var(--font-sans);
  font-size: var(--type-title-sm-size);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.shortcuts-cheatsheet-close {
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-steel-500);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  padding: 4px 10px;
}

.shortcuts-cheatsheet-close:hover {
  background: var(--color-hover-overlay);
  color: var(--color-ink-700);
}

.shortcuts-cheatsheet-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow-y: auto;
  padding: var(--space-5);
}

.shortcuts-cheatsheet-group h3 {
  color: var(--color-steel-500);
  font-family: var(--font-mono);
  font-size: var(--type-overline-size);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-overline);
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
}

.shortcuts-cheatsheet-group dl {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.shortcuts-cheatsheet-group dl > div {
  align-items: center;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
}

.shortcuts-cheatsheet-group dt {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}

.shortcuts-cheatsheet-group dd {
  color: var(--color-ink-700);
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  margin: 0;
}

.shortcuts-cheatsheet-group kbd {
  background: var(--color-neutral-bg);
  border: 1px solid var(--color-line-300);
  border-radius: var(--radius-sm);
  color: var(--color-ink-700);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  padding: 3px 6px;
}

body:not(.ui-v2) .shortcuts-cheatsheet {
  display: none !important;
}

/* Legacy chrome — palette is a v2 feature, hide it otherwise */
body:not(.ui-v2) .command-palette {
  display: none !important;
}

/* ============================================================ */
/*  Hosted-mode sign-in overlay                                 */
/*                                                              */
/*  Not a v2-only feature: the auth gate applies to both chrome */
/*  builds, so this is unscoped. Follows the command-palette /  */
/*  cheatsheet modal idiom (fixed scrim + centered window on    */
/*  the shared tokens).                                         */
/* ============================================================ */

.api-key-overlay {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: var(--space-6);
  position: fixed;
  z-index: var(--z-modal);
}

.api-key-overlay[hidden] {
  display: none;
}

.api-key-overlay-scrim {
  background: var(--color-scrim);
  inset: 0;
  position: absolute;
}

.api-key-overlay-window {
  background: var(--color-paper);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 380px;
  padding: var(--space-7);
  position: relative;
  width: 100%;
}

.api-key-overlay-title {
  color: var(--color-ink-800);
  font-family: var(--font-sans);
  font-size: var(--type-title-md-size);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.api-key-overlay-label {
  color: var(--color-ink-800);
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  font-weight: var(--fw-medium);
}

.api-key-overlay-input {
  background: var(--color-surface);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-sm);
  color: var(--color-ink-800);
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  padding: var(--space-3) var(--space-4);
  width: 100%;
}

.api-key-overlay-input:focus {
  border-color: var(--color-brand-600);
  box-shadow: var(--focus-ring);
  outline: none;
}

.api-key-overlay-error {
  color: var(--color-risk-text);
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  margin: 0;
}

.api-key-overlay-submit {
  background: var(--color-brand-600);
  border: 1px solid var(--color-brand-600);
  border-radius: var(--radius-sm);
  color: var(--color-surface);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  font-weight: var(--fw-medium);
  min-height: 34px;
  padding: var(--space-3) var(--space-4);
}

.api-key-overlay-submit:hover {
  background: var(--color-brand-700);
  border-color: var(--color-brand-700);
}

.api-key-overlay-hint {
  color: var(--color-steel-500);
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  margin: 0;
}

.api-key-overlay-hint a,
.api-key-overlay-freetier-body a {
  color: var(--color-steel-600);
}

/* ============================================================ */
/*  H4 — account sign-in additions on the key-only overlay      */
/* ============================================================ */
/*
 * The overlay window now hosts two mutually-exclusive bodies (sign-in /
 * free-tier). The window itself is a plain relative container; each body is the
 * flex column that lays the controls out.
 */

.api-key-overlay-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.api-key-overlay-body[hidden] {
  display: none;
}

.api-key-overlay-lede,
.api-key-overlay-freetier-body {
  color: var(--color-steel-600);
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  margin: 0;
}

/* Google button: neutral surface, 1px line, medium weight, no logo asset. */
.api-key-google-button {
  background: var(--color-surface);
  border: 1px solid var(--color-line-300);
  border-radius: var(--radius-sm);
  color: var(--color-ink-800);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  font-weight: var(--fw-medium);
  min-height: 34px;
  padding: var(--space-3) var(--space-4);
  transition: background-color var(--dur-fast) var(--motion-smooth),
    border-color var(--dur-fast) var(--motion-smooth);
  width: 100%;
}

.api-key-google-button:hover {
  background: var(--color-neutral-bg);
  border-color: var(--color-steel-400);
}

/* Dividers. The quiet variant leads the API-key fallback. */
.api-key-overlay-divider {
  align-items: center;
  color: var(--color-steel-400);
  display: flex;
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  gap: var(--space-3);
}

.api-key-overlay-divider::before,
.api-key-overlay-divider::after {
  background: var(--color-line-200);
  content: "";
  flex: 1;
  height: 1px;
}

.api-key-overlay-divider-quiet {
  font-size: var(--type-caption-size);
  margin-top: var(--space-2);
  opacity: 0.9;
}

/* Email form + the key form share the input styling (.api-key-overlay-input). */
.api-key-email-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.api-key-form {
  display: flex;
  gap: var(--space-2);
  margin: 0;
}

.api-key-form .api-key-overlay-input {
  flex: 1;
}

.api-key-email-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.api-key-email-actions .api-key-overlay-submit {
  flex: 1;
}

/* Secondary (neutral) action: Create account, Use key, free-tier Sign out. */
.api-key-overlay-secondary {
  background: var(--color-surface);
  border: 1px solid var(--color-line-300);
  border-radius: var(--radius-sm);
  color: var(--color-ink-800);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  font-weight: var(--fw-medium);
  min-height: 34px;
  padding: var(--space-3) var(--space-4);
  transition: background-color var(--dur-fast) var(--motion-smooth),
    border-color var(--dur-fast) var(--motion-smooth);
}

.api-key-email-actions .api-key-overlay-secondary {
  flex: 1;
}

.api-key-overlay-secondary:hover {
  background: var(--color-neutral-bg);
  border-color: var(--color-steel-400);
}

.api-key-freetier-email,
.api-key-signout-identity {
  font-weight: var(--fw-medium);
}

/* Chrome identity strip: quiet email/label text next to the Sign out button.
   Empty by default so it collapses to nothing in auth-off mode. */
.api-key-signout-identity {
  color: var(--color-steel-500);
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-key-signout-identity:empty {
  display: none;
}

/* Quiet escape link on the sign-in overlay: dismisses the wall into the
   limited free view. Text-link styling (no button chrome) so it reads as the
   quiet, secondary path — the primary CTA is still signing in. */
.api-key-overlay-continue-free {
  align-self: center;
  background: none;
  border: none;
  color: var(--color-steel-600);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.api-key-overlay-continue-free:hover {
  color: var(--color-brand-600);
}

/* ============================================================ */
/*  Free view — banner + locked-panel states                    */
/* ============================================================ */
/*
 * Free view is the limited, tier-shaped workbench a hosted-mode free/anonymous
 * caller lands in. The banner is a quiet, brand-toned strip at the very top of
 * the document (inserted above the sticky chrome); the locked panels replace
 * Pro-only tabs and detail sub-panels with a compact upgrade prompt.
 */

.free-view-banner {
  background: var(--color-brand-50);
  border-bottom: 1px solid var(--color-brand-100);
  color: var(--color-ink-800);
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  padding: var(--space-2) var(--space-6);
  text-align: center;
}

.free-view-banner-link {
  color: var(--color-brand-700);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.free-view-banner-link:hover {
  color: var(--color-brand-600);
}

/* Locked panel: shown for Pro-only tabs and withheld detail sub-panels. Neutral
   card on the paper surface, matching the overlay window's calm register. */
.free-view-locked {
  align-items: center;
  background: var(--color-paper);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-6) auto;
  max-width: 420px;
  padding: var(--space-7);
  text-align: center;
}

.free-view-locked-title {
  color: var(--color-ink-800);
  font-family: var(--font-sans);
  font-size: var(--type-title-sm-size);
  font-weight: var(--fw-semibold);
}

.free-view-locked-body {
  color: var(--color-steel-600);
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  margin: 0;
}

.free-view-locked-actions {
  display: flex;
  gap: var(--space-3);
}

.free-view-locked-signin,
.free-view-locked-plans {
  color: var(--color-brand-600);
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.free-view-locked-signin:hover,
.free-view-locked-plans:hover {
  color: var(--color-brand-700);
}

/* When a locked panel leads the project detail, keep it flush with the panel
   rhythm rather than the centred full-tab margin. */
.free-view-locked-panel .free-view-locked {
  margin: var(--space-3) 0;
  max-width: none;
}