/* ─────────────────────────────────────────────────────────────────────────
 *  App-specific component classes for the AI playground chrome.
 *
 *  The shared design system lives in `theme.css` (Tailwind v4 + design tokens
 *  + generic primitives like `.btn`, `.card`, `.input`). This file adds the
 *  few component classes that are specific to THIS app's layout — the tab
 *  bar, chat transcript, and message bubbles — which are reused across every
 *  tab in `src/tabs/`.
 *
 *  For NEW UI, prefer Tailwind utilities + the `theme.css` primitives. Only
 *  add a class here when the same component markup repeats across tabs.
 * ───────────────────────────────────────────────────────────────────────── */

@layer components {
  .app-shell {
    display: grid;
    grid-template-rows: auto auto 1fr;
    min-height: 100vh;
    max-width: 48rem;
    margin: 0 auto;
    padding: 1.5rem;
    gap: 1rem;
  }

  .header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
  }
  .header h1 {
    font-size: 1.375rem;
    flex: 1;
  }
  .eyebrow {
    margin: 0;
    letter-spacing: 0.12em;
    font-size: 0.6875rem;
    color: var(--color-muted);
  }

  .tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-border);
  }
  .tab {
    background: transparent;
    border: none;
    color: var(--color-muted);
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem 0.5rem 0 0;
    cursor: pointer;
    font: inherit;
  }
  .tab.active {
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    color: var(--color-fg);
  }

  .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .tab-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
  }

  .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr));
    gap: 0.75rem;
  }
  .image-grid img {
    width: 100%;
    border-radius: 0.625rem;
    background: color-mix(in srgb, var(--color-muted) 10%, transparent);
  }
  audio,
  video {
    width: 100%;
    border-radius: 0.625rem;
  }

  .upload {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border: 1px dashed var(--color-border);
    border-radius: 0.625rem;
    cursor: pointer;
  }

  .transcript {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app);
    min-height: 17.5rem;
  }
  .message {
    display: flex;
    flex-direction: column;
    padding: 0.625rem 0.875rem;
    border-radius: 0.625rem;
    background: color-mix(in srgb, var(--color-muted) 8%, transparent);
  }
  .message-user {
    align-self: flex-end;
    background: color-mix(in srgb, var(--color-accent) 25%, transparent);
  }
  .message-assistant {
    align-self: flex-start;
  }
  .message .who {
    font-size: 0.6875rem;
    color: var(--color-muted);
    letter-spacing: 0.08em;
  }
  .message .body {
    margin: 0.25rem 0 0;
    white-space: pre-wrap;
    line-height: 1.5;
  }
  .message.pending .body {
    color: var(--color-muted);
  }

  .empty {
    margin: auto;
    color: var(--color-muted);
  }

  .error {
    margin: 0;
    padding: 0.625rem 0.875rem;
    background: color-mix(in srgb, var(--color-danger) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-danger) 40%, transparent);
    color: var(--color-danger);
    border-radius: 0.625rem;
  }

  .composer {
    display: flex;
    gap: 0.5rem;
  }
  .composer input,
  .stack-form textarea {
    flex: 1;
    padding: 0.625rem 0.75rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 0.625rem;
    color: inherit;
    font: inherit;
  }
  .stack-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .stack-form textarea {
    min-height: 8.75rem;
    resize: vertical;
  }
  .composer button,
  .stack-form button {
    padding: 0.625rem 1rem;
    background: var(--color-accent);
    border: none;
    border-radius: 0.625rem;
    color: var(--color-accent-fg);
    cursor: pointer;
    font: inherit;
  }
  .composer button:disabled,
  .stack-form button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .ghost {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-fg);
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font: inherit;
  }
  .ghost:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .structured-result {
    padding: 0.75rem 0.875rem;
    background: color-mix(in srgb, #22c55e 12%, transparent);
    border: 1px solid color-mix(in srgb, #22c55e 35%, transparent);
    border-radius: 0.625rem;
  }
}