/**
 * Vibe document styles - linked from the served vibe HTML.
 *
 * Three things, all of them about the document the app mounts into: the
 * `--vibes-*` design-system variables (source of truth: colors.css in
 * vibes.diy/pkg/app/styles/), the pre-paint grid surface, and the clearance
 * strip the app scrolls above.
 *
 * It does NOT style the Vibes switch. That switch renders in the WRAPPER,
 * outside this document — `PillPortal.tsx` portals `VibesSwitch` from
 * `@vibes.diy/base` and fixes it over the iframe — which is exactly why the
 * clearance below has to be reserved here and cannot be measured from inside.
 * A second, SSR'd switch and settings panel used to live in this file and in
 * `api/pkg/react/components/vibes-control.tsx`; nothing mounted it, and both
 * were deleted in #5854.
 */

/* ============================================
   CSS VARIABLES - Full design system colors
   Source: colors.css (vibes.diy/pkg/app/styles/colors.css)
   ============================================ */

:root {
  /* Primary Palette */
  --vibes-blue: #3b82f6;
  --vibes-violet: #7c3aed;
  --vibes-red: #ef4444;
  --vibes-yellow: #eab308;
  --vibes-gray: #6b7280;
  --vibes-green: #51cf66;

  /* Neon/Phosphorescent colors for dark mode */
  --vibes-purple-neon: #c084fc;
  --vibes-pink-neon: #f472b6;
  --vibes-orange-neon: #fb923c;
  --vibes-cyan-neon: #22d3ee;

  /* Neutrals */
  --vibes-black: #000000;
  /* One step below near-black: the dark-mode field fill, which has to sit
     UNDER the dark card (near-black) without reaching flat black. */
  --vibes-ink-deep: #141414;
  --vibes-near-black: #1a1a1a;
  --vibes-gray-mid: #555555;
  --vibes-gray-pale: #e5e5e5;
  --vibes-white: #ffffff;
  --vibes-cream: #fffff0;

  /* Button colors */
  --vibes-button-bg: var(--vibes-cream);
  --vibes-button-text: var(--vibes-near-black);
  --vibes-button-border: var(--vibes-near-black);
  --vibes-button-icon-bg: #2a2a2a;
  --vibes-button-icon-fill: var(--vibes-white);

  /* Button variant colors - Light mode */
  --vibes-variant-blue: var(--vibes-blue);
  --vibes-variant-red: var(--vibes-red);
  --vibes-variant-yellow: var(--vibes-yellow);
  --vibes-variant-gray: var(--vibes-gray);

  /* Card colors */
  --vibes-card-bg: var(--vibes-gray-pale);
  --vibes-card-bg-transparent: #14141433;
  --vibes-card-text: var(--vibes-near-black);
  --vibes-card-border: var(--vibes-near-black);
  /* Field fill — deliberately NOT the card's own grey. Anything you type into
     (the vibe card's composer, and the suggestion chips that feed it) wears
     this so a field reads as a different kind of surface from the card it sits
     on. Light: white against the pale grey card. Dark: below the card's
     near-black, so the field still recedes when the card is the dark one. */
  --vibes-field-bg: var(--vibes-white);

  /* Shadow */
  --vibes-shadow-color: var(--vibes-near-black);

  /* Clearance reserved below app content so the app can always be scrolled
     clear of the fixed vibes switch in the bottom-right corner. The switch is
     80px tall with a 20px inset (~100px footprint); we reserve a little more so
     the last row of content can be pulled up above the switch. See #1771. */
  --vibes-switch-clearance: 124px;
}

/* Dark mode - neon variant colors */
@media (prefers-color-scheme: dark) {
  :root {
    /* Button base colors — dark-aware. Without these overrides anything
       wearing them stays cream (#fffff0) with a near-black border that
       vanishes against the dark card. Mirrors semantic.dark.button.*DarkAware
       in vibes.diy/base/theme/tokens.ts so a vibe's buttons match the React
       VibesButton in dark mode. See #vibe-button-dark-mode. */
    --vibes-button-bg: #2a2a2a;
    --vibes-button-text: #e0e0e0;
    --vibes-button-border: var(--vibes-gray-mid);

    /* Button icon colors swap */
    --vibes-button-icon-bg: var(--vibes-white);
    --vibes-button-icon-fill: #2a2a2a;

    /* Card colors */
    --vibes-card-bg: var(--vibes-near-black);
    --vibes-card-text: var(--vibes-white);
    --vibes-card-border: var(--vibes-gray-mid);
    --vibes-field-bg: var(--vibes-ink-deep);

    /* Button variant colors - Dark mode (neon/phosphorescent) */
    --vibes-variant-blue: var(--vibes-purple-neon);
    --vibes-variant-red: var(--vibes-pink-neon);
    --vibes-variant-yellow: var(--vibes-orange-neon);
    --vibes-variant-gray: var(--vibes-cyan-neon);
  }
}

/* ============================================
   VIBE APP SURFACE
   The vibe document's own backdrop: the platform gray grid (jchris,
   2026-07-04, post-#3211). This is what shows in the beat before the app
   paints — and behind any app that never paints its own background. It used
   to be a solid near-white/near-black ("the grid means platform fallback,
   never behind a live app"), but the solid surface is exactly what read as a
   BROKEN BLACK SCREEN in dark mode: theme CSS vars aren't defined until the
   client boots, so a `bg-[var(--background)]` app renders transparent over
   the near-black body. The grid is the platform's loading texture — it says
   "vibes is bringing your app" in both color schemes, and the app's own
   painted background fully covers it the moment the vars land.

   `.grid-background` is the legacy body class this replaced. It is kept in the
   selector ONLY for the rollout window: versioned vibe HTML is cached up to a
   day (`rootHtmlCacheControl: public, max-age=86400`), so a pre-deploy document
   still carrying `<body class="grid-background">` would otherwise fetch this
   newer stylesheet and render unstyled until its HTML cache expires. No
   live element uses the plain class anymore, so styling it is a harmless alias.
   NOTE: the base `background-color` values below (#d4d4d4 / #2a2a2a) are also
   inlined into the vibe document `<head>` as critical first-paint CSS
   (`FirstPaintSurface` in api/svc/intern/components/vibe-page.tsx) so the
   surface paints grey immediately on a cold cache instead of flashing white
   before this externally linked sheet loads. Keep the two in sync.
   ============================================ */
.vibe-app-surface,
.grid-background {
  background-color: #d4d4d4;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 40px 40px;
}

@media (prefers-color-scheme: dark) {
  .vibe-app-surface,
  .grid-background {
    background-color: #2a2a2a;
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.55) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.55) 1px, transparent 1px);
  }
}

/* ============================================
   GRID/APP MUTUAL EXCLUSION (#3723)
   The grid above is a PRE-PAINT loading texture, not a permanent backdrop.
   Once the app commits its first real frame the runtime stamps
   `data-vibe-painted` on the body (mount-vibes.ts signalFirstPaint), and we
   drop the grid to a solid fill. Without this the grid tiles forever behind
   any app that never paints its own opaque, full-viewport background — a
   transparent/partial-background app — and grid-behind-a-live-app reads as
   "still loading / broken", the exact wrong signal once the app is
   interactive. The fill is the app's own theme `--background` (defined by the
   time it paints), falling back to the grid's neutral surface per color scheme
   so the dark-mode black-screen fix above never returns.
   ============================================ */
.vibe-app-surface[data-vibe-painted] {
  background-color: var(--background, #d4d4d4);
  background-image: none;
}

@media (prefers-color-scheme: dark) {
  .vibe-app-surface[data-vibe-painted] {
    background-color: var(--background, #2a2a2a);
  }
}

/* Switch clearance: keep a scrollable strip below the app so its bottom
   content can always be pulled up above the fixed switch overlay (#1771).
   The switch is in the wrapper, not in this document, so its footprint cannot
   be measured from here — the strip is reserved rather than computed.
   Apps that intentionally pin content to the bottom will sit above this strip;
   that trade-off is accepted for now. */
.vibe-app-container {
  padding-bottom: var(--vibes-switch-clearance);
}