import { style } from '@vanilla-extract/css';
import { color, config, toRem } from 'folds';

// Settings-window shell (room / space settings) — the self-styled Vojo card
// vocabulary (AiChatPrivacy / LogoutDialog): own surface, 16px radius,
// hairline border, deep shadow. Replaces the stock folds `Modal` whose flat
// square-ish chrome read as the old cinny dialog. The card only provides
// the shell; the content inside (PageRoot nav + page) paints its own panel
// tones.
export const Card = style({
  width: `calc(100vw - 2 * ${config.space.S400})`,
  maxWidth: toRem(860),
  height: '85vh',
  maxHeight: toRem(700),
  display: 'flex',
  flexDirection: 'column',
  minHeight: 0,
  overflow: 'hidden',
  backgroundColor: color.Background.Container,
  borderRadius: toRem(16),
  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
  boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5)',
  '@media': {
    // Narrow viewports: the window goes (near) full-screen — the rounded
    // floating card needs breathing room it doesn't have on a phone.
    // `--vojo-safe-top` is reset to 0 INSIDE the card (the TSX), so the
    // status-bar clearance comes straight from env() here — the card is
    // genuinely top-of-screen in this branch.
    'screen and (max-width: 600px)': {
      width: '100vw',
      maxWidth: '100vw',
      height: '100dvh',
      maxHeight: '100dvh',
      borderRadius: 0,
      border: 'none',
      paddingTop: 'env(safe-area-inset-top, 0px)',
    },
  },
});

// Single-pane variant (room settings): no nav column, so the two-pane
// width reads as a stretched empty form. 560px ≈ the page pane's share of
// the wide layout (860 minus the ~300px nav). The media override keeps the
// phone branch full-screen — this class is emitted after `Card`, so its
// base maxWidth would otherwise beat Card's `100vw` media rule in the
// cascade.
export const CardNarrow = style({
  maxWidth: toRem(560),
  '@media': {
    'screen and (max-width: 600px)': {
      maxWidth: '100vw',
    },
  },
});