/* =====================================================================
   app-mock.css — the two Sahyaan phone mockups.
   Loaded AFTER styles.css (same-specificity wins; app-mock owns the
   finer look). Contents: bezel/screen gloss, status-bar glyphs, the
   in-app type scale with max(9px, …) floors, screen rhythm, then the
   app compositions — brand lockup, week sparkline, donut tile, initials
   faces, tab icons, split waveform, promise badge — and the cramped-
   shell folds. Layout containers (.app-phones / .app-stage) and row
   grid placement stay in styles.css.
   ===================================================================== */

/* ---- 1 · Device shell -------------------------------------------------
   Graphite body, very soft screen reflection, layered drop shadow. */

.app-phone {
  padding: 5px 7px;
  border-radius: 3rem;
  /* graphite barrel: light catches the upper-left shoulder */
  background: linear-gradient(163deg, #2c3540 0%, #1f2630 46%, #1a2029 100%);
  /* edge highlight + dark rim inside; two soft ground shadows below */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    inset 0 -1px 2px rgba(0, 0, 0, 0.38),
    0 4px 10px rgba(29, 47, 55, 0.10),
    0 18px 34px rgba(29, 47, 55, 0.16);
}

.app-island {
  /* the Dynamic Island gets a machined top edge */
  background:
    radial-gradient(120% 90% at 42% 22%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 58%),
    linear-gradient(172deg, #303b47 0%, #171d24 82%);
}

.app-screen {
  border-radius: 2.45rem;
  /* screens glow slightly against the darker frame */
  box-shadow: inset 0 0 0 1px rgba(9, 14, 18, 0.4);
}

/* one diagonal gloss: a bright pulse hugging the top-left corner plus a
   faint secondary streak along the same axis. Soft-light would need
   blend support on white text, so the gradients stay ~≤9% alpha —
   invisible on the white status bar and on white text, and far too
   weak to touch contrast on the coloured chips (checked in screenshots). */
.app-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(127deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.09) 6.5%,
      rgba(255, 255, 255, 0) 11.5%,
      rgba(255, 255, 255, 0) 62.5%,
      rgba(255, 255, 255, 0.07) 63.5%,
      rgba(255, 255, 255, 0.05) 86%,
      rgba(255, 255, 255, 0) 89%);
}

/* ---- 2 · Status bar: real glyphs -------------------------------------
   The right span's "●●● ▰" text is collapsed to 0px; signal / wifi /
   battery are painted as data-URI SVGs on the .app-status bar itself,
   right-anchored with insets that echo its own 20px/13px padding so they
   track the time's edge. em here follows .app-status's (non-zero) font —
   the free glyph canvas keeps this rule presentation-only. */

.app-status {
  --app-status-ink: #17222b;
  --app-glyph-cellular: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11'%3E%3Crect x='0' y='6.5' width='3' height='4.5' rx='0.9' fill='%2317222b'/%3E%3Crect x='4.66' y='4.4' width='3' height='6.6' rx='0.9' fill='%2317222b'/%3E%3Crect x='9.33' y='2.2' width='3' height='8.8' rx='0.9' fill='%2317222b'/%3E%3Crect x='14' y='0' width='3' height='11' rx='0.9' fill='%2317222b'/%3E%3C/svg%3E");
  --app-glyph-wifi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11.5'%3E%3Cpath d='M8 10.7 6.5 8.9a2.4 2.4 0 0 1 3 0Z' fill='%2317222b'/%3E%3Cpath d='M4.44 6.68a5.6 5.6 0 0 1 7.12 0' fill='none' stroke='%2317222b' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M2 3.72a9.7 9.7 0 0 1 12 0' fill='none' stroke='%2317222b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --app-glyph-battery: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 12'%3E%3Crect x='0.4' y='0.4' width='21.2' height='11.2' rx='3.2' fill='none' stroke='%2317222b' stroke-opacity='0.4' stroke-width='0.9'/%3E%3Crect x='2' y='2' width='15.5' height='8' rx='2' fill='%2317222b'/%3E%3Cpath d='M23.2 4.1v3.8a2.1 2.1 0 0 0 0-3.8Z' fill='%2317222b' fill-opacity='0.4'/%3E%3C/svg%3E");
  background-image: var(--app-glyph-cellular), var(--app-glyph-wifi), var(--app-glyph-battery);
  background-repeat: no-repeat;
  /* cellular · wifi · battery, right to left: 20px inset mirrors the
     time's padding; mid gaps one 0.45em unit */
  background-position:
    right calc(20px + (1.85em + 0.45em + 1.2em + 0.45em)) top 12px,
    right calc(20px + 1.85em + 0.45em) top 12.5px,
    right 20px top 13px;
  background-size:
    1.45em 0.9em,
    1.2em 0.85em,
    1.85em 0.85em;
}

.app-status > span + span {
  font-size: 0;
  letter-spacing: normal;
}

/* ---- 3 · In-app type scale -------------------------------------------
   title 2.05 · screen-headers 1.7 · body 1 · meta ≈0.85 of body.
   Every small face is floored at 9px so 360px viewports keep rendering
   readable text (matches the clamp floors used by styles.css). */

.app-status { font-weight: 600; font-size: max(9px, 0.85em); letter-spacing: 0.02em; }
.app-brand { font-size: 1.3em; letter-spacing: -0.03em; }
.app-avatar { font-size: max(9px, 0.84em); }
.app-avatar-sage { background: var(--sage); color: #fff; }

.app-home-main h3,
.app-detail-head h3 { font-size: 1.75em; line-height: 1.16; letter-spacing: -0.04em; }

.app-date { margin-top: 0.3em; color: var(--warm-grey); font-size: max(9px, 0.85em); font-weight: 500; }

.app-stats strong { font-size: 1.35em; letter-spacing: -0.02em; color: var(--ink); }
.app-stats span { font-size: max(9px, 0.84em); }

.app-call-list strong small { letter-spacing: 0; }
.app-call-list small { font-size: max(9px, 0.88em); font-weight: 500; }
.app-call-list li > span { font-size: max(9px, 0.88em); }
.app-chip { font-size: max(9px, 0.84em); font-weight: 600; letter-spacing: 0.01em; }

/* tabs: size the spans (styles.css sets 1.5em on the span, so adding a
   font-size on .app-tabs itself would compound it); colour swaps to the
   warm-grey label ink in the composition section below */
.app-tabs span { font-size: 1.5em; }
.app-tabs small { font-size: max(9px, 0.62em); }

.app-back { font-size: 1.05em; font-weight: 600; }
.app-back span { font-size: max(9px, 0.82em); font-weight: 500; }
.app-detail-head p { font-size: max(9px, 0.9em); font-weight: 500; }

.app-recording-head strong { font-size: 1em; }
.app-recording-head span { font-size: max(9px, 0.84em); }
.app-player time { font-size: max(9px, 0.9em); }

.app-bubble p { font-size: max(9px, 0.92em); }

.app-promise span { font-size: max(9px, 0.82em); font-weight: 600; letter-spacing: 0.012em; }
.app-promise strong { font-size: 1.3em; letter-spacing: -0.015em; }
.app-promise small { font-size: max(9px, 0.88em); }

/* ---- 4 · Screen rhythm -------------------------------------------------
   Desktop rhythm only (≥761px): one breathing unit (~11px at the 12px
   em) between hero card → stats → list heading. Below 761px the
   compressed rhythm already lives in styles.css and the stack is
   height-budgeted, so no vertical rule here overrides it. */

@media (min-width: 761px) {
  .app-hero { margin-top: 0.7em; gap: 0.35em; padding: 0.8em 0.95em; }
  .app-stats { margin: 0.8em 0; }
  .app-home-main h4,
  .app-detail-main h4 { font-size: 0.95em; margin: 1em 0 0.7em; }
  .app-call-list li { padding: 0.55em 0; }
  .app-detail-head { padding: 1.1em 0 0.55em; }
  .app-recording { margin-top: 0.9em; padding: 1.05em; }
  .app-promise { margin-top: 1em; padding: 0.95em; }
}

/* chip belt: pure presentation (its shape, not its rows) */
.app-chip { padding: 0.28em 0.72em; }

/* ---- 5 · App compositions ----------------------------------------------
   The pieces that make the screens read as the real app: brand lockup,
   week sparkline, donut tile, initials faces, tab icons, the split
   waveform and the promise badge. Shapes only — placement still lives
   in styles.css, and every type floor holds at max(9px, …). */

/* The app carries the same typographic mark as the site. */
.app-brand { display: inline-flex; align-items: center; }
.app-brand .sahyaan-wordmark { height: 1.4em; }

/* week sparkline: 7 date-value bars, Mon–Sun; today rises, the weekend
   (not reached yet) sits as faint stubs */
.app-bars { display: flex; align-items: flex-end; justify-content: space-between; height: 32px; }
.app-bars b { flex: none; align-self: flex-end; width: 7px; height: calc(var(--v) * 1%); border-radius: 2.5px 2.5px 1px 1px; background: color-mix(in srgb, var(--sage) 35%, transparent); }
.app-bars .app-bar-now { background: var(--sage-deep); }
.app-bars .app-bar-off { opacity: 0.38; }

/* stat tiles */
.app-ic { display: grid; place-items: center; width: 1.35em; height: 1.35em; color: var(--sage-deep); }
.app-ic svg { width: 100%; height: 100%; }
.app-ring { display: block; width: 1.35em; height: 1.35em; border-radius: 50%; background: radial-gradient(closest-side, #fff 60%, transparent 61%), conic-gradient(var(--sage) calc(var(--p) * 1%), #e2e7e4 0); }

/* list + transcript faces */
.app-face { display: grid; place-items: center; border-radius: 99px; font-weight: 700; font-size: max(9px, 0.78em); }
.app-call-list .app-face { grid-column: 1; grid-row: 1 / 3; width: 2.25em; height: 2.25em; align-self: center; justify-self: start; }
.app-avatar-detail { width: 2.5em; height: 2.5em; font-size: max(9px, 0.95em); }
.app-face-ps, .app-face-customer { background: #edf0fa; color: #414f91; }
.app-face-rm { background: #e6f1e9; color: #2f6251; }
.app-face-av { background: #f8edda; color: #8a5411; }

/* status chips carry a word on the roomy desktop screens and shrink to
   their icon dot on phones; only the long detail line shows there */
.app-ci { display: none; }
.app-list-short { display: none; }

/* “Recent calls — See all” */
.app-home-main h4 { display: flex; justify-content: space-between; align-items: baseline; }
.app-seeall { color: var(--sage-deep); font-size: max(9px, 0.75em); font-weight: 700; }

/* tab bar: real glyphs, the active call in a filled sage dot */
.app-tabs { color: var(--warm-grey); }
.app-tabs span { gap: 0.22em; }
.app-ti { display: grid; place-items: center; width: 1.05em; height: 1.05em; }
.app-ti svg { width: 0.62em; height: 0.62em; }
.app-tabs small { font-weight: 500; }
.app-tab-current { color: var(--sage-deep); }
.app-tab-current .app-ti { border-radius: 99px; background: var(--sage-deep); color: #fff; }
.app-tab-current small { font-weight: 700; }

/* player: Recording voice unwound, played part sage, scrubber dot
   at the 42% mark with a halo on the card behind */
.app-wave { background: repeating-linear-gradient(90deg, #d8ddd9 0 2px, transparent 2px 6px); }
.app-wave::before { content: ""; position: absolute; inset: 0 58% 0 0; background: repeating-linear-gradient(90deg, var(--sage) 0 2px, transparent 2px 6px); mask-image: repeating-linear-gradient(105deg, transparent 0 3px, #000 4px 13px, transparent 16px 21px); -webkit-mask-image: repeating-linear-gradient(105deg, transparent 0 3px, #000 4px 13px, transparent 16px 21px); }
.app-wave::after { content: ""; position: absolute; top: 50%; left: 42%; width: 0.58em; height: 0.58em; transform: translate(-50%, -50%); border-radius: 99px; background: var(--sage-deep); box-shadow: 0 0 0 0.14em #f4f5f6, 0 0 0 0.26em rgba(65, 103, 91, 0.2); }

/* transcript: chat rows with speaker dots; bubbles stay in styles.css */
.app-bubble-row { display: flex; align-items: flex-end; gap: 0.5em; margin: 0.5em 0; }
.app-bubble-row .app-bubble { margin: 0; max-width: calc(100% - 2.35em); }
.app-row-customer { justify-content: flex-end; }
.app-mini { display: grid; place-items: center; flex: none; width: 2em; height: 2em; border-radius: 99px; font-size: max(9px, 0.82em); font-weight: 700; }
.app-mini-zara { background: #e6f1e9; }
.app-mini-zara svg { width: 1.05em; height: 1.05em; }
.app-mini-priya { background: #edf0fa; color: #414f91; }

/* promise card: kept = the same sage ✓ badge as the stats tile */
.app-promise .app-promise-badge { grid-column: 1; grid-row: 1; align-self: center; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 99px; background: var(--sage-deep); color: #fff; }
.app-promise .app-promise-badge svg { width: 0.9em; height: 0.9em; }

/* chip belt: pure presentation (its shape, not its rows) */
.app-chip { padding: 0.28em 0.72em; }

/* ---- 6 · Cramped shells ----------------------------------------------
   Below 761px both devices shrink; keep the bezel a hair thinner and the
   screen radius concentric. The phone body's own font-size drops on small
   viewports, so the em/px borderlines here scale with it — the time and
   glyphs stay readable even on 360px screens. */

@media (max-width: 760px) {
  .app-phone { padding: 3px 5px; }
  .app-screen { border-radius: 2.2rem; }
  /* owner-approved folds keep the promise card and all 3 rows visible on
     the short screens: the delta claim, "See all" and Zara's confirm
     bubble step aside; the sparkline, chips and tabs all still render */
  .app-delta, .app-seeall, .app-confirm { display: none; }
  .app-home-main h3, .app-detail-head h3 { font-size: 1.6em; }
  .app-date { margin-top: 0.2em; }
  .app-hero { margin-top: 0.15em; gap: 0.15em; padding: 0.35em 0.65em; }
  .app-hero strong { font-size: 1.6em; }
  .app-bars { height: 22px; }
  .app-bars b { width: 6px; border-radius: 2px 2px 1px 1px; }
  .app-stats { margin: 0.3em 0; }
  .app-stats li { padding: 0.28em 0.5em; }
  .app-home-main h4 { margin: 0.3em 0 0.1em; }
  .app-call-list li { padding: 0.26em 0; }
  .app-phone-home .app-tabs { padding: 0.3em 0.9em 0.45em; }
  .app-call-list strong small { display: none; }
  .app-list-long { display: none; }
  .app-list-short { display: inline; }
  .app-home-main { padding: 0.65em 0.85em 0; }
  .app-call-list .app-face { width: 1.8em; height: 1.8em; }
  .app-chip { display: inline-grid; place-items: center; width: 1.95em; height: 1.95em; padding: 0; }
  .app-chip .app-lab { display: none; }
  .app-ci { display: grid; place-items: center; width: 1.05em; height: 1.05em; }
  .app-ci svg { width: 100%; height: 100%; }
  .app-recording-head { flex-direction: column; align-items: flex-start; gap: 0.05em; }
  .app-avatar-detail { width: 2.2em; height: 2.2em; }
  .app-bubble-row { gap: 0.4em; }
  .app-wave::after { width: 0.55em; height: 0.55em; }
  .app-phone-home .app-screen { padding-bottom: 6px; }
}

/* the greeting is two lines: "Namaste," and the business name whole */
.app-nowrap { white-space: nowrap; }
@media (max-width: 760px) {
  .app-home-main h3 { font-size: 1.4em; }
}