/**
 * 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's
     glass is 50px tall, 24px in from the bottom on desktop (16px on phones),
     so its footprint is 74px; 124px leaves a row's height of slack above it.
     Re-checked for the vibe menu port (2026-09-26). See #1771. */
  --vibes-switch-clearance: 124px;

  /* The height the platform's floating controls occupy above the bottom edge,
     home indicator included: where an app's FIXED bottom bar (a tab bar, a
     nav, a save bar) sits so every one of its taps reaches the app (#4488).
     `bottom: var(--vibes-controls-inset, 0px)`. The scroll strip above moves
     normal-flow content only; a fixed element needs this offset itself.
     Derived from the clearance rather than restated: the switch's 74px
     footprint is the strip less its 50px of slack, so every place that drops
     the strip (embeds, short or hidden embed escapes) drops this to the bare
     safe-area inset with it, and the tall embed escape pill keeps it. */
  --vibes-controls-inset: max(
    var(--vibes-safe-bottom, env(safe-area-inset-bottom, 0px)),
    calc(var(--vibes-switch-clearance) - 50px + env(safe-area-inset-bottom, 0px))
  );
}

/* 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.375) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.375) 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.275) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.275) 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);
}