/* Native app preview. All typography and controls remain live HTML/SVG.
   Container-relative sizing follows the existing 433 × 882 phone frame. */
.xp-phone-interface {
  --app-ink: #20211f;
  --app-muted: #6b6c67;
  --app-line: #e3e3dd;
  --app-surface: #ffffff;
  --app-amber: #efb24b;
  --app-control-radius: 3.2cqi;
  position: absolute;
  left: 4.907621%;
  top: 2.182540%;
  width: 89.953811%;
  height: 95.634921%;
  display: flex;
  flex-direction: column;
  padding: 4.1cqi 5.2% 7.2cqi;
  overflow: hidden;
  border-radius: 14.31% / 6.61%;
  background: #f6f5f2;
  color: var(--app-ink);
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, Arial, sans-serif;
  font-size: 4.1cqi;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.02em;
  -webkit-font-smoothing: antialiased;
}
.xp-phone-interface *, .xp-phone-interface *::before, .xp-phone-interface *::after { box-sizing: border-box; }
.xp-phone-interface [hidden] { display: none !important; }
.xp-phone-interface button { font-family: inherit; transition: background-color 140ms ease, border-color 140ms ease; }
.xp-phone-interface button:focus-visible { outline: 2px solid #775017; outline-offset: -3px; }
.xp-phone-interface h3:focus { outline: none; }
.xp-phone-interface .icon { width: 5.2cqi; height: 5.2cqi; stroke-width: 1.65; }
.xp-phone-status { display: flex; flex: none; align-items: center; justify-content: space-between; height: 5cqi; padding: 0 2.2cqi; }
.xp-phone-time { font-size: 3.8cqi; font-weight: 600; font-variant-numeric: tabular-nums; }
.xp-phone-indicators { display: flex; align-items: center; gap: 1.2cqi; }
.xp-phone-signal { width: 4.3cqi; height: 3.1cqi; }
.xp-phone-wifi { width: 4.4cqi; height: 3.4cqi; }
.xp-phone-battery { width: 6.5cqi; height: 3.4cqi; }

.xp-phone-brand { display: flex; flex: none; align-items: center; gap: 2cqi; min-height: 9cqi; margin-top: 6.5cqi; }
.xp-brand-lockup { display: block; width: 50cqi; height: auto; flex: none; }
.xp-profile { display: block; width: 9cqi; height: 9cqi; flex: none; margin-left: auto; border: 1px solid #0000000d; border-radius: 50%; background: #e7e6df; object-fit: cover; }

.xp-phone-content { flex: 1; min-height: 0; margin-top: 5.4cqi; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cccac2 transparent; }
.xp-screen { display: flex; flex-direction: column; min-height: 100%; padding: 0 1px 1px; }
.xp-screen > * { flex-shrink: 0; }
.xp-date { margin: 0 0 2.6cqi; font-size: 3.3cqi; color: var(--app-muted); }
.xp-screen-title { margin: 0; color: var(--app-ink); font-size: 7.3cqi; font-weight: 500; line-height: 1.15; letter-spacing: -.035em; }
.xp-home-title { font-size: 7.7cqi; font-weight: 400; line-height: 1.17; }

.xp-composer { display: flex; align-items: center; gap: 2.8cqi; width: 100%; min-height: 44px; margin-top: 6.2cqi; padding: 4cqi 3.5cqi; border: 1px solid #deddd6; border-radius: var(--app-control-radius); background: #efeee9; color: #41433d; text-align: left; }
.xp-composer span { font-size: 3.7cqi; }
.xp-composer .xp-forward { width: 4.5cqi; height: 4.5cqi; margin-left: auto; }
.xp-composer:hover { background: #e8e7e1; border-color: #c2c2b9; }
.xp-composer:active { background: #deddd6; }
.xp-section-label { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5cqi; margin: 7cqi 0 3cqi; }
.xp-section-label h4 { margin: 0; font-size: 3.75cqi; font-weight: 500; }
.xp-section-label > span { color: var(--app-muted); font-size: 3cqi; white-space: nowrap; }
.xp-home-list { display: grid; gap: 2.4cqi; padding: 0; margin: 0; list-style: none; }
.xp-home-row { display: flex; align-items: center; gap: 3cqi; width: 100%; min-height: 17.5cqi; padding: 3.2cqi 3cqi; text-align: left; background: var(--app-surface); border: 1px solid #e9e8e2; border-radius: var(--app-control-radius); }
.xp-home-row:hover { background: #fcfcfa; border-color: #cacbc2; }
.xp-home-row:active { background: #eeede8; }
.xp-row-icon { width: 8.6cqi; height: 8.6cqi; flex: none; display: grid; place-items: center; background: #f2f2ed; border-radius: 50%; color: #505249; }
.xp-row-icon .icon { width: 4.6cqi; height: 4.6cqi; }
.xp-row-copy { min-width: 0; }
.xp-row-copy strong { display: block; font-size: 3.9cqi; font-weight: 500; line-height: 1.35; }
.xp-row-copy > span { display: block; margin-top: 1.2cqi; font-size: 3.15cqi; color: var(--app-muted); line-height: 1.4; }
.xp-phone-interface .xp-chevron { width: 3.8cqi; height: 3.8cqi; margin-left: auto; color: #72756b; }
.xp-home-note { color: var(--app-muted); font-size: 3.15cqi; text-align: center; margin: auto 0 0; padding-top: 6cqi; }

.xp-capture-controls { display: flex; align-items: center; justify-content: space-between; gap: 1.6cqi; }
.xp-capture-controls button { display: flex; align-items: center; justify-content: center; gap: 1.5cqi; min-height: 44px; width: 24cqi; flex: none; padding: 2cqi 2cqi; border: 1px solid #e3e2db; border-radius: var(--app-control-radius); background: #eeede8; color: var(--app-ink); font-size: 3.6cqi; font-weight: 500; }
.xp-capture-controls button:hover { background: #e0e1d9; }
.xp-capture-controls button:active { background: #d8d9d1; }
.xp-capture-controls .icon { width: 3.8cqi; height: 3.8cqi; }
.xp-capture-controls .xp-play-symbol { display: none; }
.xp-capture-controls button[aria-pressed="true"] .xp-pause-symbol { display: none; }
.xp-capture-controls button[aria-pressed="true"] .xp-play-symbol { display: block; }
.xp-stop-symbol { width: 2.8cqi; height: 2.8cqi; background: currentColor; border-radius: .5cqi; }
.xp-capture-time { font-size: 4cqi; font-weight: 500; font-variant-numeric: tabular-nums; }
.xp-capture-title { display: flex; align-items: center; gap: 2.3cqi; margin-top: 5cqi; font-size: 5.65cqi; letter-spacing: -.03em; }
.xp-recording-dot { display: block; width: 1.8cqi; height: 1.8cqi; flex: none; border-radius: 50%; background: #d18a20; }
.xp-waveform { display: block; width: 100%; height: 10.5cqi; margin-top: 3cqi; color: #dc972e; }
.xp-waveform.is-paused { color: #a4a59b; }
.xp-recording-state { margin: 1cqi 0 3.5cqi; font-size: 2.9cqi; color: var(--app-muted); text-align: center; }
.xp-transcript-card { padding: 3.8cqi; border: 1px solid #e7e6df; background: var(--app-surface); border-radius: 4.2cqi; }
.xp-transcript-label { margin: 0 0 2.6cqi; font-size: 3cqi; color: var(--app-muted); }
.xp-transcript-card blockquote { padding: 0; margin: 0; font-size: 4.45cqi; line-height: 1.46; letter-spacing: -.025em; }
.xp-context-chips { display: flex; flex-wrap: wrap; gap: 1.25cqi; list-style: none; padding: 0; margin: 3.5cqi 0 0; }
.xp-context-chips li { padding: 1.25cqi 2.3cqi; border-radius: 999px; background: #f0f0eb; color: #585b52; font-size: 2.95cqi; }
.xp-ready-summary { display: flex; align-items: center; gap: 2.8cqi; margin: 4cqi 0; padding-inline: .8cqi; }
.xp-ready-summary .icon { color: #5d6353; }
.xp-ready-summary strong { display: block; font-size: 3.8cqi; font-weight: 500; }
.xp-ready-summary div > span { display: block; margin-top: 1cqi; font-size: 3.1cqi; color: var(--app-muted); }
.xp-primary-button { display: flex; align-items: center; justify-content: center; gap: 2cqi; width: 100%; min-height: 44px; padding: 3.3cqi 4cqi; border: 1px solid #21190b0a; border-radius: var(--app-control-radius); background: var(--app-amber); color: #21190b; font-size: 4cqi; font-weight: 500; line-height: 1.3; }
.xp-primary-button:hover { background: #e7a638; }
.xp-primary-button:active { background: #dc9b2e; }
.xp-primary-button .icon { width: 4.2cqi; height: 4.2cqi; }
.xp-primary-button .xp-chevron { color: inherit; margin-left: 0; }
.xp-review-button { margin-top: auto; }

.xp-actions-intro { margin: 2.4cqi 0 5cqi; color: var(--app-muted); font-size: 3.4cqi; line-height: 1.5; }
.xp-action-list { padding: 0 3.7cqi; margin: 0; list-style: none; border: 1px solid #e6e5de; border-radius: 4.5cqi; background: var(--app-surface); }
.xp-action-row { display: flex; align-items: center; gap: 3cqi; min-height: 18cqi; padding: 3.8cqi 0; }
.xp-action-row + .xp-action-row { border-top: 1px solid #eeede7; }
.xp-action-icon { display: grid; place-items: center; flex: none; width: 5cqi; height: 6cqi; color: #3a3d35; }
.xp-action-icon .icon { width: 5cqi; height: 5cqi; }
.xp-action-copy { flex: 1; min-width: 0; }
.xp-action-row p { margin: 0; font-size: 4.1cqi; line-height: 1.3; font-weight: 500; }
.xp-action-copy > span { display: block; color: var(--app-muted); margin-top: 1.4cqi; font-size: 3.1cqi; line-height: 1.4; }
.xp-action-status { display: block; position: relative; flex: none; width: 4.2cqi; height: 4.2cqi; overflow: hidden; font-size: 0; border: 1px solid #b7b9ad; border-radius: 50%; background: #fff; }
.xp-action-status::after { content: ""; position: absolute; top: 24%; left: 23%; width: 49%; height: 28%; border-left: 1px solid #717965; border-bottom: 1px solid #717965; transform: rotate(-45deg); }
.xp-action-status[data-approved="true"] { background: #edf0e8; border-color: #7e8c6a; }
.xp-rules-note { display: flex; align-items: center; gap: 2cqi; margin: 4cqi 0; color: #676d5f; font-size: 3.3cqi; }
.xp-rules-note .icon { width: 4cqi; height: 4cqi; }
.xp-approval-area { margin-top: auto; padding-top: 2cqi; }
.xp-demo-result { display: flex; align-items: center; justify-content: center; gap: 2cqi; color: #536443; font-size: 3.5cqi; margin-bottom: 2.5cqi; }
.xp-demo-result .icon { width: 4cqi; height: 4cqi; }
.xp-replay-button { display: block; min-height: 44px; width: 100%; padding: 2.8cqi; background: #eeede8; border: 1px solid #d5d5cd; color: var(--app-ink); border-radius: var(--app-control-radius); font-size: 3.8cqi; font-weight: 500; }
.xp-replay-button:hover { background: #dde2d1; }
.xp-replay-button:active { background: #d5d9cd; }
.xp-demo-status { margin: 2.4cqi 0 0; color: var(--app-muted); font-size: 2.95cqi; line-height: 1.4; text-align: center; }

.xp-tab-bar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); flex: none; gap: 3cqi; margin-top: 4.4cqi; padding-top: 2.3cqi; border-top: 1px solid #dfdfd7; }
.xp-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqi; min-height: 44px; padding: .8cqi; color: #6b6d63; border-radius: 2cqi; }
.xp-tab span { font-size: 2.8cqi; }
.xp-tab[aria-current="page"] { color: #1e2417; }
.xp-tab[aria-current="page"] .icon { stroke-width: 2; }
.xp-tab:hover { color: #262c20; background: #ebebe5; }
.xp-tab:active { background: #e0e1d9; }
.xp-home-indicator { position: absolute; bottom: 2.8cqi; left: 35%; width: 30%; height: 1cqi; border-radius: 999px; background: #282b24; }

@media (prefers-reduced-motion: reduce) {
  .xp-phone-interface button { transition: none; }
}