/* ════════════════════════════════════════════════════════════════════
   Shared reveal-preview phone — the canonical "what recipients see"
   device mock.
   ════════════════════════════════════════════════════════════════════
   This is the SAME visual the Insights portal renders in the campaign
   wizard's Step 2 ("Digital reveal") preview. It mirrors scan.html's
   canonical skeleton: brand mark → greeting → rule → sender → 9:16
   video → optional message → 3-tap reaction. Brand-token driven
   (--brand-paper / --brand-primary / --brand-accent / --brand-font-display)
   so it themes to any tenant; defaults to the Modern-minimal preset
   (white surface, deep-cyan accent, Inter) — the May 2026 default reveal
   theme.

   NOTE: clients/campaigns/new.html currently carries an inline copy of
   this component under the `.cl-wizard-rail-preview*` class names (the
   JS-rendered LIVE wizard preview). That inline copy is the source these
   rules were lifted from; migrate the wizard to this shared file in a
   follow-up so the two can never drift. Until then, any visual change
   here must be mirrored there.
   ════════════════════════════════════════════════════════════════════ */

.sn-reveal-preview {
  box-sizing: border-box;
  aspect-ratio: 71.6 / 147.6;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  background: var(--brand-paper, #FFFFFF);
  color: var(--brand-primary, #0A2540);
  border: 10px solid #1A1A1A;
  border-radius: 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--brand-font-display, 'Inter', system-ui, sans-serif);
  padding: 40px 16px 18px;
  gap: 6px;
  position: relative;
  box-shadow: 0 8px 24px rgba(10, 37, 64, 0.14), 0 1px 4px rgba(10, 37, 64, 0.06);
}
/* Dynamic Island — iPhone pill near the top edge; the 40px content
   padding-top clears it so the brand mark never tucks under. */
.sn-reveal-preview::before {
  content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 66px; height: 20px; background: #1A1A1A; border-radius: 999px; z-index: 1;
}
/* Mobile-browser address bar — recipients open the reveal in their browser
   at the brand's own subdomain, so showing yourbrand.thesweetnote.com makes
   the "brand-owned moment" concrete. Pure chrome above the reveal content. */
.sn-reveal-preview-url {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%; margin-bottom: 3px; padding: 4px 8px;
  background: color-mix(in srgb, var(--brand-primary, #0A2540) 6%, transparent);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 7px; letter-spacing: 0.01em; line-height: 1;
  color: color-mix(in srgb, var(--brand-primary, #0A2540) 55%, transparent);
  white-space: nowrap; overflow: hidden;
}
.sn-reveal-preview-url b { font-weight: 700; color: var(--brand-primary, #0A2540); }
.sn-reveal-preview-url svg { flex: none; opacity: 0.7; }
/* Brand mark (position 1) */
.sn-reveal-preview-logo { margin: 2px 0 7px; display: flex; justify-content: center; }
.sn-reveal-preview-logo img { max-height: 30px; max-width: 80%; width: auto; object-fit: contain; }
/* No logo → brand name in the brand display font (exactly as scan.html
   renders position 1 when brand.logoUrl is absent). */
.sn-reveal-preview-logo.is-wordmark {
  font-size: 13px; font-weight: 600; line-height: 1.15; text-align: center;
  color: var(--brand-primary, #0A2540);
}
/* Greeting (position 2) — the hero line, proportioned to a half-scale phone. */
.sn-reveal-preview-greet {
  font-style: italic; font-size: 15px; line-height: 1.25; text-align: center;
  max-width: 100%; overflow-wrap: break-word;
}
.sn-reveal-preview-rule { width: 32px; height: 1px; background: var(--brand-accent, #0891B2); }
/* Sender attribution (position 3) */
.sn-reveal-preview-from {
  font-family: 'Inter', system-ui, sans-serif; font-size: 8.5px;
  letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7;
}
/* Recipient video (position 4) — genuine 9:16 vertical, the format
   record.html enforces. Height-driven so the portrait ratio holds. */
.sn-reveal-preview-video {
  aspect-ratio: 9 / 16; height: 150px; width: auto; flex: none;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  margin-top: 9px;
}
.sn-reveal-preview-video::before { content: '\25B6'; font-size: 16px; opacity: 0.4; }
.sn-reveal-preview-video.is-ready { background: var(--brand-accent, #0891B2); }
.sn-reveal-preview-video.is-ready::before { color: #FFFFFF; opacity: 0.95; }
/* Message slot (position 5) — real copy or a ghost placeholder so the
   optional slot is visible; scan.html hides an empty inscription. */
.sn-reveal-preview-msg {
  font-size: 10px; line-height: 1.45; text-align: center; padding: 0 4px;
  color: inherit; opacity: 0.85;
}
.sn-reveal-preview-msg.is-placeholder {
  font-style: italic; opacity: 0.4; padding: 6px;
  border: 1px dashed color-mix(in srgb, var(--brand-primary, #0A2540) 30%, transparent);
  border-radius: 6px;
}
/* 3-tap reaction (position 7) — three buttons, icon over label, mirroring
   scan.html's reaction block. Always present, never suppressed. */
/* Required Action CTA (canonical reveal slot 6) — every real reveal renders one,
   so the preview must too, or it understates what scan.html actually shows. Sits
   between the message and the 3-tap reaction. Deep accent (AA-safe with white text),
   mirroring the scan.html .scan-action-cta fix; falls back to --brand-accent-dark. */
.sn-reveal-preview-cta {
  width: 100%; margin-top: 9px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--brand-accent-dark, #075F73); color: #FFFFFF;
  font-family: 'Inter', system-ui, sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.sn-reveal-preview-react { display: flex; gap: 4px; width: 100%; margin-top: 9px; }
.sn-reveal-preview-react-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 2px;
  border: 1px solid color-mix(in srgb, var(--brand-accent, #0891B2) 32%, transparent);
  border-radius: 7px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 6.5px; font-weight: 600;
  line-height: 1.15; text-align: center; color: var(--brand-primary, #0A2540);
}
.sn-reveal-preview-react-btn svg { width: 13px; height: 13px; color: var(--brand-accent, #0891B2); }
/* Platform footer (canonical reveal position 9) — the small "Powered by
   SweetNote" line every recipient sees on the real reveal. margin-top:auto
   floats it to the foot of the phone, just like scan.html. */
.sn-reveal-preview-foot {
  margin-top: auto;
  padding-top: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.45;
}