/* ============================================================================
   VoltaAI Mobile — app-preview (scoped)
   Renders the VoltaAI mobile app mockups as a decorative showcase on the
   gateway's /apps landing page.

   Source of truth: C:\GitClones\VoltaAI\VoltaAI-Mobile-Modern\visuals\assets\kit.css
   (via the VoltaServices services/ai.html port). This is a NAMESPACED subset:
   every rule is scoped under `.app-preview .device` so it can never collide with
   foundation.css / components.css, and the aggressive reset is confined to inside
   the device frames only. Loaded ONLY on apps.html.

   The outer `.app-preview` layout borrows `--space-*` tokens when present, but
   carries pixel fallbacks so it lays out correctly even though the gateway's
   foundation.css does not define those tokens.
   ============================================================================ */

/* ---- Showcase layout (uses the site's own spacing tokens when available) - */
.app-preview {
    --ap-w: 390px;
    --ap-h: 844px;
    --ap-scale: 0.8;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-2xl, 48px);
    margin-top: var(--space-3xl, 80px);
}
.app-preview__phone {
    width: calc(var(--ap-w) * var(--ap-scale));
    height: calc(var(--ap-h) * var(--ap-scale));
    flex: 0 0 auto;
}
.app-preview__phone .device {
    transform: scale(var(--ap-scale));
    transform-origin: top left;
}
/* Phones only ever shrink as the viewport narrows (monotonic). flex-wrap
   handles how many sit per row: 3-up on desktop, 2-up on tablet, 1-up on mobile. */
@media (max-width: 1180px) { .app-preview { --ap-scale: 0.7; gap: var(--space-xl, 32px); } }
@media (max-width: 600px)  { .app-preview { --ap-scale: 0.6; gap: var(--space-lg, 24px); } }

/* ---- Tokens: light "marketing" surface is the device default ----------- */
.app-preview .device {
    --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', ui-monospace, monospace;

    --t-xs: 11px; --t-sm: 13px; --t-base: 15px; --t-md: 17px; --t-lg: 21px;
    --t-h6: 24px; --t-h5: 30px; --t-h4: 38px; --t-h3: 48px;

    --lh-tight: 1.08; --lh-snug: 1.25; --lh-base: 1.55;
    --tracking-tight: -0.03em; --tracking-mono: 0.02em; --tracking-eyebrow: 0.12em;

    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
    --s-8: 32px; --s-10: 40px; --s-12: 48px;

    --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-pill: 999px;

    /* paper + ink (light) */
    --paper-0: #FFFFFF; --paper-50: #FAFAFA; --paper-100: #F4F4F5;
    --paper-200: #E4E4E7; --paper-300: #D4D4D8;
    --ink-900: #0A0A0A; --ink-700: #27272A; --ink-500: #52525B;
    --ink-400: #71717A; --ink-300: #A1A1AA;
    --signal: #15803D; --signal-soft: #DCFCE7; --signal-strong: #166534;
    --warn: #B45309; --danger: #B91C1C; --info: #1D4ED8;
    --ring: rgba(21,128,61,0.45);
    --hairline: #E4E4E7; --hairline-strong: #D4D4D8;
    --shadow-float: 0 12px 40px -8px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
}

/* ---- Tokens: dark "product" surface ------------------------------------ */
.app-preview .device[data-surface="product"] {
    --paper-0: #0A0A0A; --paper-50: #0F0F0F; --paper-100: #161616;
    --paper-200: #1F1F1F; --paper-300: #2A2A2A;
    --ink-900: #FAFAFA; --ink-700: #E4E4E7; --ink-500: #A1A1AA;
    --ink-400: #71717A; --ink-300: #52525B;
    --signal: #22C55E; --signal-soft: rgba(34,197,94,0.10); --signal-strong: #16A34A;
    --warn: #F59E0B; --danger: #F87171; --info: #60A5FA;
    --ring: rgba(34,197,94,0.5);
    --hairline: #2A2A2A; --hairline-strong: #3A3A3A;
    --shadow-float: 0 12px 40px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}

/* Reset confined to inside the device frames only */
.app-preview .device *,
.app-preview .device *::before,
.app-preview .device *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Anti-leak guard: re-assert inheritance on <p> so any global
   `p { color; line-height }` cannot bleed into chat bubbles. */
.app-preview .device p { color: inherit; line-height: inherit; }

/* Lucide-style icon base */
.app-preview .device .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ============================================================================
   Device frame (390 x 844, iPhone-class)
   ============================================================================ */
.app-preview .device {
    position: relative;
    width: 390px; height: 844px;
    border-radius: 48px;
    background: var(--paper-50);
    padding: 12px;
    box-shadow: 0 0 0 12px #1a1a1a, 0 0 0 13px #2e2e2e, 0 30px 60px -20px rgba(0,0,0,0.8);
    overflow: hidden;
}
.app-preview .device .vp {
    width: 100%; height: 100%;
    position: relative;
    border-radius: 38px;
    background: var(--paper-50);
    color: var(--ink-900);
    font-family: var(--font-sans);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.app-preview .device .island {
    position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
    width: 120px; height: 34px; background: #000; border-radius: 20px; z-index: 40;
}
.app-preview .device .statusbar {
    position: relative; z-index: 30; flex: 0 0 auto;
    height: 54px; padding: 16px 28px 0;
    display: flex; align-items: center; justify-content: space-between;
    font: 600 14px var(--font-sans); color: var(--ink-900);
}
.app-preview .device .statusbar .sb-ico { display: inline-flex; gap: 6px; align-items: center; opacity: 0.9; }
.app-preview .device .statusbar svg { width: 17px; height: 17px; }
.app-preview .device .homebar { flex: 0 0 auto; height: 26px; display: flex; align-items: center; justify-content: center; }
.app-preview .device .homebar::after { content: ''; width: 134px; height: 5px; border-radius: 3px; background: var(--ink-900); opacity: 0.85; }

/* scrollable body region */
.app-preview .device .body { flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.app-preview .device .scroll { flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.app-preview .device .pad { padding: 0 var(--s-5); }

/* ============================================================================
   Primitives
   ============================================================================ */
.app-preview .device .eyebrow { font: 500 var(--t-xs)/1 var(--font-mono); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-500); }
.app-preview .device .mono { font-family: var(--font-mono); }
.app-preview .device .tabular { font-variant-numeric: tabular-nums; }
.app-preview .device .muted { color: var(--ink-500); }
.app-preview .device .center { text-align: center; }
.app-preview .device .grow { flex: 1; }
.app-preview .device .row { display: flex; align-items: center; gap: 10px; }
.app-preview .device .mt2 { margin-top: 8px; }
.app-preview .device .mt3 { margin-top: 12px; }
.app-preview .device .mt4 { margin-top: 16px; }
.app-preview .device .mt5 { margin-top: 20px; }
.app-preview .device .mt6 { margin-top: 24px; }
.app-preview .device .mt8 { margin-top: 32px; }

/* top bar */
.app-preview .device .topbar {
    flex: 0 0 auto; height: 52px; padding: 0 var(--s-3) 0 var(--s-2);
    display: flex; align-items: center; gap: var(--s-2);
    border-bottom: 1px solid var(--hairline);
}
.app-preview .device .topbar .title { font: 600 var(--t-md) var(--font-sans); letter-spacing: -0.01em; }
.app-preview .device .topbar .sub { font: 500 var(--t-xs) var(--font-mono); color: var(--ink-500); letter-spacing: 0.04em; }
.app-preview .device .topbar .spacer { flex: 1; }
.app-preview .device .icon-btn {
    width: 40px; height: 40px; border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-700); background: transparent; border: none;
}
.app-preview .device .icon-btn svg { width: 20px; height: 20px; stroke-width: 1.5; }

/* buttons — primary = solid ink (white on dark), NO green */
.app-preview .device .btn { font: 500 var(--t-base) var(--font-sans); border-radius: var(--r-md); min-height: 44px; padding: 0 18px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: default; transition: none; }
.app-preview .device .btn-primary { background: var(--ink-900); color: var(--paper-0); }
.app-preview .device .btn-secondary { background: transparent; color: var(--ink-900); border-color: var(--hairline-strong); }
.app-preview .device .btn-ghost { background: transparent; color: var(--ink-700); min-height: 36px; padding: 0 8px; }
.app-preview .device .btn-block { width: 100%; }

/* eyebrow chips / quick prompts */
.app-preview .device .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.app-preview .device .chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--hairline); border-radius: var(--r-md); font: 500 var(--t-sm) var(--font-sans); color: var(--ink-700); background: transparent; }
.app-preview .device .chip svg { width: 15px; height: 15px; stroke-width: 1.5; color: var(--ink-500); }

/* ============================================================================
   Chat
   ============================================================================ */
.app-preview .device .greeting { font: 600 var(--t-h5)/1.12 var(--font-sans); letter-spacing: var(--tracking-tight); }
.app-preview .device .greeting .sub { display: block; font: 400 var(--t-md)/1.5 var(--font-sans); color: var(--ink-500); letter-spacing: 0; margin-top: 10px; }

.app-preview .device .thread { display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-5) var(--s-5) var(--s-4); overflow: hidden; }
.app-preview .device .msg { display: flex; gap: var(--s-3); }
.app-preview .device .avatar { flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--r-sm); font: 600 11px var(--font-mono); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.app-preview .device .avatar.user { background: var(--paper-200); color: var(--ink-900); border: 1px solid var(--hairline); }
.app-preview .device .avatar.ai { background: var(--ink-900); color: var(--paper-0); }
.app-preview .device .mcontent { flex: 1; min-width: 0; }
.app-preview .device .mhead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font: 400 var(--t-xs)/1.4 var(--font-mono); color: var(--ink-500); letter-spacing: 0.04em; text-transform: lowercase; }
.app-preview .device .mauthor { color: var(--ink-700); font-weight: 500; }
.app-preview .device .mauthor::after { content: '·'; color: var(--ink-300); margin-left: 8px; }
.app-preview .device .mtime { color: var(--ink-400); }
.app-preview .device .mmeta { color: var(--ink-400); margin-left: auto; font-variant-numeric: tabular-nums; }
.app-preview .device .mmeta::before { content: '·'; color: var(--ink-300); margin-right: 8px; }
.app-preview .device .mbody { font: 400 16px/26px var(--font-sans); color: var(--ink-900); }
.app-preview .device .mbody p { margin: 0 0 12px; }
.app-preview .device .mbody p:last-child { margin-bottom: 0; }

/* image message */
.app-preview .device .imgmsg { margin: 6px 0 4px; }
.app-preview .device .imgmsg .frame { width: 100%; aspect-ratio: 1/1; border-radius: var(--r-lg); border: 1px solid var(--hairline); overflow: hidden; background: var(--paper-100); position: relative; }
.app-preview .device .imgmsg .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-preview .device .imgmsg .imgmeta { display: flex; gap: 14px; margin-top: 8px; font: 400 var(--t-xs) var(--font-mono); color: var(--ink-400); font-variant-numeric: tabular-nums; }
.app-preview .device .shimmer { width: 100%; aspect-ratio: 1/1; border-radius: var(--r-lg); border: 1px solid var(--hairline); background: linear-gradient(100deg, var(--paper-100) 30%, var(--paper-200) 50%, var(--paper-100) 70%); background-size: 200% 100%; animation: ap-sh 1.4s linear infinite; display: flex; align-items: flex-end; padding: 14px; }
.app-preview .device .shimmer .lbl { font: 400 var(--t-xs) var(--font-mono); color: var(--ink-500); letter-spacing: 0.04em; }
@keyframes ap-sh { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* input bar */
.app-preview .device .inputbar { flex: 0 0 auto; padding: var(--s-3) var(--s-4) var(--s-2); border-top: 1px solid var(--hairline); background: var(--paper-50); }
.app-preview .device .field { border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); background: var(--paper-0); padding: var(--s-3) var(--s-3) var(--s-2); }
.app-preview .device .field .text { font: 400 16px var(--font-sans); color: var(--ink-900); min-height: 24px; }
.app-preview .device .field .text.ph { color: var(--ink-300); }
.app-preview .device .input-row { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.app-preview .device .model-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); font: 500 var(--t-xs) var(--font-mono); color: var(--ink-700); }
.app-preview .device .model-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.app-preview .device .model-pill svg { width: 13px; height: 13px; color: var(--ink-500); }
.app-preview .device .input-row .spacer { flex: 1; }
.app-preview .device .tool-btn { width: 36px; height: 36px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-500); background: transparent; border: none; }
.app-preview .device .tool-btn svg { width: 19px; height: 19px; stroke-width: 1.5; }
.app-preview .device .send-btn { width: 38px; height: 38px; border-radius: var(--r-md); background: var(--ink-900); color: var(--paper-0); display: inline-flex; align-items: center; justify-content: center; border: none; }
.app-preview .device .send-btn svg { width: 18px; height: 18px; }
.app-preview .device .hint { margin-top: var(--s-2); text-align: center; font: 400 var(--t-xs) var(--font-mono); color: var(--ink-400); letter-spacing: 0.03em; }

/* ============================================================================
   Spec block (auth) + forms
   ============================================================================ */
.app-preview .device .specblock { border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); }
.app-preview .device .spec-row { display: flex; justify-content: space-between; gap: var(--s-4); padding: 9px 0; border-bottom: 1px solid var(--hairline); font-family: var(--font-mono); font-size: var(--t-sm); }
.app-preview .device .spec-row:last-child { border-bottom: none; }
.app-preview .device .spec-label { color: var(--ink-500); font-size: var(--t-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.app-preview .device .spec-val { color: var(--ink-900); font-variant-numeric: tabular-nums; text-align: right; }
.app-preview .device .spec-val .ok { color: var(--signal); }

.app-preview .device .label { font: 500 var(--t-sm) var(--font-sans); color: var(--ink-700); margin-bottom: 6px; display: block; }
.app-preview .device .input { width: 100%; min-height: 48px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--paper-0); padding: 0 14px; font: 400 16px var(--font-sans); color: var(--ink-900); display: flex; align-items: center; }
.app-preview .device .input.ph { color: var(--ink-300); }

/* ============================================================================
   Self-sufficient reduced-motion guard
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .app-preview .device .shimmer { animation: none; }
}