@layer components {
  /* Desktop view switcher -- project-scoped Editor/Chat navigation.
   *
   * Mirrors the mobile tab bar's Editor/Chat items but renders as a
   * horizontal tab strip inside the main content area on desktop.
   * Hidden on mobile where the bottom tab bar handles view switching.
   */
  .view-switcher {
    display: none;
  }

  @media (min-width: 800px) {
    .view-switcher {
      align-items: stretch;
      border-block-end: var(--border);
      display: flex;
      gap: var(--inline-space);
      padding-inline: var(--inline-space);
    }

    .view-switcher__tab {
      align-items: center;
      border-block-end: 2px solid transparent;
      color: var(--color-ink-muted);
      display: inline-flex;
      font-size: var(--text-small);
      font-weight: 500;
      gap: 0.4em;
      margin-block-end: -1px;
      padding-block: var(--block-space-half);
      padding-inline: var(--inline-space-half);
      text-decoration: none;
      transition: color var(--transition-fast), border-color var(--transition-fast);
    }

    .view-switcher__tab:hover {
      color: var(--color-ink);
    }

    .view-switcher__tab--active {
      border-block-end-color: var(--color-link);
      color: var(--color-link);
    }

    .view-switcher__icon {
      block-size: 1rem;
      fill: none;
      inline-size: 1rem;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2;
    }
  }
}