/* Demo-only additions on top of the real product stylesheet.
   Nothing in here overrides Cips' actual component styling — it only
   (a) makes .phone fill this iframe edge-to-edge instead of sitting as a
   380x800 desktop mockup, since the outer landing page already draws its
   own device bezel around this iframe, and (b) adds the small preview
   badge + tap-feedback affordance that only exist in this demo context. */

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  overscroll-behavior: none;
}

.phone {
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.notch { display: none !important; }

.preview-badge {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: 14px;
  z-index: 40;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px 9px;
  pointer-events: none;
}

[data-demo-noop] { cursor: pointer; }
.demo-pulse { transform: scale(0.97); transition: transform 0.12s var(--ease-spring, ease); }

/* Faux dropdown menus — these reproduce the fact that several buttons in
   the real app (settings gear, Finance "more" fab, notification bells,
   history icons) open a small menu on tap. We show that same menu here so
   the preview *feels* accurate, but every item inside is intentionally
   inert (data-demo-noop): nothing in this sandbox is wired to real
   sub-screens, so items give tap feedback only and never navigate. */
.demo-menu-anchor { position: relative; display: inline-flex; }
.demo-menu-panel {
  position: absolute;
  min-width: 178px;
  max-width: calc(100vw - 32px);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  transition: opacity .16s ease, transform .16s cubic-bezier(.34,1.56,.64,1), visibility .16s;
  z-index: 60;
}
.demo-menu-panel.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.demo-menu-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted); padding: 6px 10px 4px;
}
.demo-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px; border-radius: 10px;
  font-size: 12.5px; font-weight: 500; color: var(--text-primary);
  cursor: pointer; white-space: nowrap; transition: background-color .12s ease;
}
.demo-menu-item:active { background: var(--surface-2); transform: scale(0.98); }

.demo-menu-panel-orb { top: calc(100% + 8px); right: -6px; }
.demo-menu-panel-finance { top: calc(100% + 10px); right: 0; }
.demo-menu-panel-religion { top: calc(100% + 8px); right: 0; }
.demo-menu-panel-health { top: 56px; right: 14px; }

/* Inert-but-real controls (readonly inputs, disabled affordances) shouldn't
   look disabled — they should look exactly like the live app, just not
   wired to a backend that doesn't exist in this sandbox. */
.ap-quick-input[readonly] { opacity: 1; cursor: default; }

/* Keep the SALDO stat card visually level with HABIT/IBADAH/KESEHATAN next
   to it. A full rupiah figure is naturally longer than "7/9"-style values,
   so left at the shared 15px size it wraps and makes this one card taller
   than its siblings — sizing it down slightly keeps all four cards the
   same height. */
.ap-c-financial .ap-stat-value { font-size: 12.5px; letter-spacing: -0.2px; white-space: nowrap; }