/* =========================================================================
   "In the meeting" preview — two cards side by side: a live Notes panel and a
   live Transcript. Light/dark via prefers-color-scheme. Scoped to .call-stage.
   Source: "Boswell Call[ Light].html" — the video column + seam ship display:none
   there, so they're dropped (and with them the image-slot dependency). The
   source's word-by-word typing was JS-only (bubbles start opacity:0); to keep a
   full no-JS baseline the transcript is statically visible here. Card text +
   spacing are in cqi/em so each card scales with its own width (container query)
   — no clipped/oversized text when the cards shrink or stack. Keyframe is
   call-prefixed to avoid clashing with hero-demo.css's `blink`.
   ========================================================================= */
.call-stage {
    display: flex;
    gap: var(--s12);
    justify-content: center;
    align-items: stretch;
    margin-top: var(--s8);
}

.call-stage .call {
    position: relative; flex: 1 1 380px; max-width: 462px;
    aspect-ratio: 1 / 1.03;
    border-radius: 30px; overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border-hi);
    box-shadow: var(--call-shadow);
    user-select: none;
    container-type: inline-size;

    /* dark (default) palette */
    --surface: #17110b;
    --surface-elev: #1f1810;
    --border-hi: rgba(255, 240, 220, 0.14);
    --hairline: rgba(255, 240, 220, 0.10);
    --text: #f3e8d4;
    --text-dim: rgba(243, 232, 212, 0.70);
    --text-faint: rgba(243, 232, 212, 0.42);
    --text-ghost: rgba(243, 232, 212, 0.30);
    --accent: #e8b96a;
    --red: #e76f56;
    --me-bg: rgba(232,185,106,0.14);
    --me-bd: rgba(232,185,106,0.42);
    --call-shadow: 0 40px 90px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
}

@media (prefers-color-scheme: light) {
    .call-stage .call {
        --surface: #efebe1;
        --surface-elev: #ffffff;
        --border-hi: rgba(40, 30, 18, 0.15);
        --hairline: rgba(40, 30, 18, 0.13);
        --text: #2a2018;
        --text-dim: rgba(42, 32, 24, 0.72);
        --text-faint: rgba(42, 32, 24, 0.46);
        --text-ghost: rgba(42, 32, 24, 0.36);
        --accent: #b8862a;
        --red: #e76f56;
        --me-bg: rgba(184,134,42,0.13);
        --me-bd: rgba(184,134,42,0.46);
        --call-shadow: 0 40px 90px rgba(70,52,24,0.24), inset 0 1px 0 rgba(255,255,255,0.7);
    }
}

/* notes / transcript panel fills the card */
.call-stage .notes {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; padding: 7.8cqi 10.4cqi 0;
}
.call-stage .n-title { font-family: var(--font-serif); font-size: 7.36cqi; letter-spacing: -0.22cqi; line-height: 1; color: var(--text); }
.call-stage .n-chips { display: flex; align-items: center; gap: 1.7cqi; margin-top: 3.46cqi; }
.call-stage .chip {
    display: inline-flex; align-items: center; gap: 1.52cqi; min-height: 6.49cqi; padding: 0 2.6cqi;
    border-radius: 999px; border: 1px solid var(--hairline);
    font-size: 2.81cqi; color: var(--text-dim);
}
.call-stage .chip svg { width: 3.46cqi; height: 3.46cqi; color: var(--text-faint); }
.call-stage .chip b { color: var(--text); font-weight: 500; }
.call-stage .chip .ld { width: 1.52cqi; height: 1.52cqi; border-radius: 50%; background: var(--red); animation: callBlink 1.6s ease-in-out infinite; }

/* notes list */
.call-stage .n-view { position: relative; flex: 1; min-height: 0; margin-top: 3.9cqi; overflow: hidden; }
.call-stage .n-view::before, .call-stage .n-view::after { content: ""; position: absolute; left: 0; right: 0; height: 6.49cqi; z-index: 2; pointer-events: none; }
.call-stage .n-view::before { top: 0; background: linear-gradient(180deg, var(--surface), transparent); }
.call-stage .n-view::after { bottom: 0; background: linear-gradient(0deg, var(--surface), transparent); }
.call-stage .n-scroll p { margin: 0; font-size: 3.25cqi; line-height: 1.5; }
.call-stage .n-h { font-weight: 600; color: var(--text); margin-top: 1.2em !important; }
.call-stage .n-h:first-child { margin-top: 0 !important; }
.call-stage .n-b { color: var(--text-dim); padding-left: 0.93em; }

/* ask bar */
.call-stage .ask {
    flex-shrink: 0; margin: 3.03cqi 0 5.63cqi;
    display: flex; align-items: center; gap: 2.16cqi; height: 10.39cqi;
    padding: 0 1.3cqi 0 4.33cqi; border-radius: 999px;
    border: 1px solid var(--hairline); background: var(--surface-elev);
}
.call-stage .ask .lbl { flex: 1; font-size: 3.25cqi; color: var(--text-ghost); }
.call-stage .ask .send { width: 8.23cqi; height: 8.23cqi; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.call-stage .ask .send svg { width: 3.68cqi; height: 3.68cqi; color: #1a1208; }

/* transcript bubbles (statically visible — JS typing dropped) */
.call-stage .tx-view { position: relative; flex: 1; min-height: 0; margin-top: 3.9cqi; margin-bottom: 8.23cqi; overflow: hidden; }
.call-stage .tx-view::before, .call-stage .tx-view::after { content: ""; position: absolute; left: 0; right: 0; height: 6.06cqi; z-index: 2; pointer-events: none; }
.call-stage .tx-view::before { top: 0; background: linear-gradient(180deg, var(--surface), transparent); }
.call-stage .tx-view::after { bottom: 0; background: linear-gradient(0deg, var(--surface), transparent); }
.call-stage .tx-scroll { display: flex; flex-direction: column; gap: 2.38cqi; transition: transform 0.28s ease; }
.call-stage .bubble { width: fit-content; max-width: 84%; padding: 2.38cqi 3.25cqi 2.6cqi; border-radius: 3.46cqi; font-size: 3.03cqi; line-height: 1.45; }
.call-stage .bubble.them { align-self: flex-start; background: var(--surface-elev); border: 1px solid var(--hairline); color: var(--text); border-bottom-left-radius: 1.1cqi; }
.call-stage .bubble.me { align-self: flex-end; background: var(--me-bg); border: 1px solid var(--me-bd); color: var(--text); border-bottom-right-radius: 1.1cqi; text-align: right; }

@keyframes callBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) {
    .call-stage .chip .ld { animation: none !important; }
}

/* Stack the two cards on small screens (below the desktop two-up width). */
@media (max-width: 900px) {
    .call-stage { flex-direction: column; align-items: center; }
    .call-stage .call { flex: 0 0 auto; width: 100%; }
}