/* ============================================================
   Capability panel: "Transcribe & summarize" (#cap-transcribe).
   The foundational capture step — a SPLIT flow like Log-data, but the
   destination is the RAW output of the call, not extracted fields:
     LEFT  — a live call transcript streams in, then the call ends
             (reuses the Log-data call skin: hsd-left / hsd-panel-head /
             hsd-caller / hsd-turn, loaded from hero-split-demo-v2.css).
     RIGHT — an Askpilot "Call summary" card that shows a Transcribing…
             state, writes a clean summary (key points + outcome), then
             attaches the full transcript to the record with a "Logged"
             badge.
   Driven by js/cap-transcribe.js. Gated by an IntersectionObserver;
   restarts on tab click via the cshow:restart event.
   ============================================================ */
.cap-transcribe {
    --cx-accent: #4c6cff;
    --cx-ok: #10b981;
    --cx-ok-deep: #047857;
    --cx-ink: #1f2937;
    --cx-muted: #6b7280;
    --cx-border: #d1d5db;
    --cx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --cx-ease-out: cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* Align the reused split frame border to the showcase's. */
.cap-transcribe .hsd-left,
.cap-transcribe .hsd-right { --hsd-border: var(--cx-border); }

/* The persistent grey connector line (.hsd-frame::after, from
   hero-split-demo-v2.css) bridges the two cards on desktop so the pair reads
   as connected — matching the Send-messages demo. This demo has no animated
   arrow (the "flow" is the card building on the right after the call ends), so
   the static line is the only connector. On MOBILE the cards stack and the
   left card grows past the line's fixed offset, so suppress it there only. */
@media (max-width: 879px) {
    .cap-transcribe .hsd-frame::after { display: none !important; }
}

/* the live-dot greys out when the call ends. hero-split-demo-v2.css keys this
   off .hsd-frame.is-ended; here the JS toggles the dot directly. */
.cap-transcribe .hsd-live-dot.is-ended { background: #9ca3af; animation: none; }

/* ---- heights ----
   Mobile: the left transcript auto-grows; the right card is tall enough to
   hold the summary + attachment. Desktop (>=880px): lock both so the row
   reads as a matched pair. */
.cap-transcribe .hsd-left  { height: auto; min-height: 340px; }
.cap-transcribe .hsd-right {
    height: auto; min-height: 340px;
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
    overflow: visible;
    display: flex; flex-direction: column;
}
@media (min-width: 880px) {
    .cap-transcribe .hsd-left,
    .cap-transcribe .hsd-right { height: 480px; min-height: 0; }
}

/* ===================== RIGHT: the Askpilot summary card ===================== */
.cx-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    background: #fff;
    border: 1px solid var(--cx-border);
    border-radius: 16px;
    /* its own frame + shadow so it reads as a paired card, not a merged blob
       (matches the tightened shadow used across the split demos). */
    box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.18), 0 1px 2px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

/* ---- card header ---- */
.cx-head {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; border-bottom: 1px solid #f3f4f6;
    flex: 0 0 auto;
}
.cx-head-ico {
    width: 30px; height: 30px; flex: none;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(76, 108, 255, 0.1); color: var(--cx-accent);
}
.cx-head-ico img { width: 18px; height: 18px; }
.cx-head-ico svg { width: 17px; height: 17px; }
.cx-head-title {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 13.5px; font-weight: 600; color: var(--cx-ink);
    font-variant-numeric: tabular-nums;
}
/* the small call glyph sitting inline before the phone number */
.cx-head-call-ico { width: 15px; height: 15px; flex: none; color: var(--cx-ink); }
.cx-head-sub { font-size: 11.5px; color: var(--cx-muted); font-variant-numeric: tabular-nums; }

/* ---- card body ---- */
.cx-body { position: relative; flex: 1 1 auto; padding: 16px; display: flex; flex-direction: column; }

/* Listening… state: shown by DEFAULT while the call is in progress (before the
   card is transcribing/summarized). Reuses the Log-data idle "listening" mark +
   waveform (styled in hero-split-demo-v2.css); we only lay it out + label here.
   Hidden the moment transcription starts. */
.cx-listening {
    flex: 1 1 auto;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
}
/* bigger breathing room between the Askpilot mark and the waveform, and
   between the waveform and the title (scoped here so the shared idle styles
   elsewhere are untouched). */
.cx-listening .hsd-idle-mark { margin-bottom: 22px; }
.cx-listening .hsd-idle-title { margin-top: 18px; }
.cx-card.is-transcribing .cx-listening,
.cx-card.is-summarized  .cx-listening { display: none; }

/* Transcribing… state: a faint shimmer bar + label, shown while the card is
   .is-transcribing (before the summary writes). Hidden once summarized. */
.cx-transcribing {
    display: none;
    align-items: center; gap: 10px;
    color: var(--cx-muted); font-size: 13px;
}
.cx-card.is-transcribing .cx-transcribing { display: flex; }
.cx-card.is-summarized .cx-transcribing { display: none; }
.cx-transcribing-dots { display: inline-flex; gap: 3px; }
.cx-transcribing-dots i {
    width: 5px; height: 5px; border-radius: 50%; background: var(--cx-accent);
    opacity: 0.35; animation: cx-blink 1.1s infinite ease-in-out;
}
.cx-transcribing-dots i:nth-child(2) { animation-delay: 0.18s; }
.cx-transcribing-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes cx-blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* the summary block — hidden until the card is .is-summarized */
.cx-summary-wrap { display: none; flex: 1 1 auto; flex-direction: column; }
.cx-card.is-summarized .cx-summary-wrap { display: flex; }

.cx-summary-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: #9ca3af; margin-bottom: 10px;
}
.cx-summary { display: flex; flex-direction: column; gap: 8px; }

.cx-sum-line {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13px; line-height: 1.5; color: #374151;
    opacity: 0; transform: translateY(6px);
    transition: opacity 0.35s var(--cx-ease), transform 0.4s var(--cx-ease-out);
}
.cx-sum-line.is-in { opacity: 1; transform: none; }
.cx-sum-dot {
    flex: none; width: 6px; height: 6px; margin-top: 6px;
    border-radius: 50%; background: var(--cx-accent);
}
.cx-sum-outcome {
    margin-top: 4px; padding-top: 10px; border-top: 1px solid #f3f4f6;
    font-weight: 600; color: var(--cx-ink);
}

/* ==================== transcript preview box ====================
   A box showing a short peek of the actual call on the left, with a
   "View full transcript" button on the right. Sits at the bottom of the
   card (margin-top:auto), dropping in after the summary + "Logged". */
.cx-attach {
    /* a consistent, deliberate gap below the summary (not floated to the card
       bottom, so the spacing reads the same regardless of card height). */
    margin-top: 20px;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e5e7ef; border-radius: 12px;
    background: #f9fafb;
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.4s var(--cx-ease), transform 0.45s var(--cx-ease-out);
}
.cx-attach.is-in { opacity: 1; transform: none; }

/* ---- left: the transcript peek ---- */
.cx-attach-preview { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cx-attach-preview-head { display: flex; align-items: center; gap: 8px; }
.cx-attach-ico {
    width: 26px; height: 26px; flex: none;
    border-radius: 7px; background: #eef2ff; color: var(--cx-accent);
    display: flex; align-items: center; justify-content: center;
}
.cx-attach-ico svg { width: 15px; height: 15px; }
.cx-attach-title { font-size: 12.5px; font-weight: 600; color: var(--cx-ink); }
/* the one-line transcript snippet (truncated) */
.cx-attach-snippet {
    margin: 0;
    font-size: 12px; line-height: 1.4; color: var(--cx-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-attach-snippet-who { font-weight: 600; color: #4b5563; }

/* ---- right: the "View full transcript" button ---- */
.cx-attach-btn {
    -webkit-appearance: none; appearance: none;
    flex: none; cursor: pointer; font: inherit;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px;
    border: 1px solid #d5dbe8; border-radius: 9px;
    background: #ffffff; color: var(--cx-accent);
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.cx-attach-btn svg { width: 14px; height: 14px; transition: transform 0.2s var(--cx-ease); }
.cx-attach-btn:hover {
    border-color: #b9c2da; background: #f7f8fc;
    box-shadow: 0 2px 8px -4px rgba(15, 23, 42, 0.12);
}
.cx-attach-btn:hover svg { transform: translateX(2px); }
.cx-attach-btn:focus-visible { outline: 2px solid var(--cx-accent); outline-offset: 2px; }

/* on narrow cards, stack the button under the preview */
@media (max-width: 520px) {
    .cx-attach { flex-direction: column; align-items: stretch; gap: 10px; }
    .cx-attach-btn { justify-content: center; }
}

/* ==================== BEAT 2: Street CRM record card ====================
   After the summary, CARD A slides out and CARD B (the Street CRM record)
   slides in, where the call is logged as an activity in the Calls tab.

   ---- the stage: two cards stacked, one visible at a time ---- */
.cx-stage { position: relative; }
.cx-stage .cx-card {
    /* both cards occupy the same box; JS toggles .is-crm on the stage to swap.
       Slow, deliberate cross-slide (0.7s) so the handoff reads clearly. */
    transition: opacity 0.6s var(--cx-ease), transform 0.7s var(--cx-ease-out);
}
/* CARD B (CRM) sits absolutely over CARD A so they share the same footprint.
   Starts further offset + more scaled-down so the slide-in is pronounced. */
.cx-card-crm {
    position: absolute; inset: 0;
    opacity: 0; transform: translateX(9%) scale(0.97);
    pointer-events: none;
}
/* the swap: CARD A slides out to the left + fades; CARD B slides in from the right. */
.cx-stage.is-crm .cx-card-call { opacity: 0; transform: translateX(-7%) scale(0.97); pointer-events: none; }
.cx-stage.is-crm .cx-card-crm  { opacity: 1; transform: none; pointer-events: auto; }

/* ---- part-by-part reveal of Card B's pieces ----
   each .cx-reveal starts hidden + lifted; JS adds .is-in in sequence. */
.cx-reveal {
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.45s var(--cx-ease), transform 0.5s var(--cx-ease-out);
}
.cx-reveal.is-in { opacity: 1; transform: none; }

/* ---- CARD B header: Street logo + record breadcrumb ---- */
.cx-crm-head {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; border-bottom: 1px solid #f3f4f6; flex: 0 0 auto;
}
.cx-crm-src { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--cx-ink); }
.cx-crm-src img { width: 17px; height: 17px; }
.cx-crm-crumb { font-size: 11.5px; color: var(--cx-muted); }
.cx-crm-crumb strong { color: #4b5563; font-weight: 600; }

/* ---- contact identity row ---- */
.cx-crm-contact { display: flex; align-items: center; gap: 11px; padding: 13px 16px 12px; }
.cx-crm-avatar {
    width: 38px; height: 38px; flex: none; border-radius: 9999px;
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 600;
}
.cx-crm-contact-info { display: flex; flex-direction: column; }
.cx-crm-name { font-size: 14px; font-weight: 600; color: var(--cx-ink); }
.cx-crm-sub { font-size: 11.5px; color: var(--cx-muted); }

/* ---- record tabs (Overview / Calls / Journal) ---- */
.cx-crm-tabs { display: flex; gap: 20px; padding: 0 16px; border-bottom: 1px solid #f0f1f5; }
.cx-crm-tab {
    position: relative; padding: 8px 0 10px;
    font-size: 12.5px; font-weight: 600; color: #9ca3af;
    display: inline-flex; align-items: center; gap: 6px;
}
.cx-crm-tab.is-active { color: var(--cx-accent); }
.cx-crm-tab.is-active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--cx-accent); border-radius: 2px 2px 0 0;
}
.cx-crm-tab-count {
    font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 9999px;
    background: #eef2ff; color: var(--cx-accent);
    transition: background 0.3s ease, color 0.3s ease;
}

/* ---- Calls tab body: a real CRM activity feed ----
   Uniform list rows separated by hairline dividers; the newest (just-logged)
   row carries a subtle left accent + faint tint, the rest are plain. */
.cx-crm-body { flex: 1 1 auto; padding: 14px 16px 14px; display: flex; flex-direction: column; overflow: hidden; }
.cx-act {
    display: flex; gap: 12px;
    padding: 13px 0;
    border-top: 1px solid #f0f1f5;
}
.cx-act:first-child { border-top: 0; }
.cx-act-ico {
    width: 34px; height: 34px; flex: none; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: #f3f4f6; color: #9ca3af;
}
.cx-act-ico svg { width: 17px; height: 17px; }
.cx-act-main { flex: 1 1 auto; min-width: 0; }
.cx-act-top { display: flex; align-items: center; gap: 8px; }
.cx-act-title { font-size: 13.5px; font-weight: 600; color: var(--cx-ink); }
.cx-act-time { margin-left: auto; font-size: 11.5px; color: #9ca3af; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-act-summary { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; color: #4b5563; }

/* the "Summary" mini-label before the summary text */
.cx-act-summary-label {
    display: inline-block; margin-right: 6px;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: #9ca3af; vertical-align: 1px;
}

/* ---- the collapsible slot the new call slides into ----
   grid-template-rows animates 0fr -> 1fr, so opening it PUSHES the row below
   down (the "a new activity landed at the top" motion). */
.cx-act-slot {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.7s var(--cx-ease);
}
.cx-act-slot.is-open { grid-template-rows: 1fr; }
.cx-act-slot-inner { overflow: hidden; min-height: 0; }
/* the new row also fades/lifts slightly as the slot opens, so it doesn't
   just "unroll" — it feels like it drops in. */
.cx-act-slot .cx-act-new { opacity: 0; transform: translateY(-6px); transition: opacity 0.55s var(--cx-ease) 0.15s, transform 0.6s var(--cx-ease-out) 0.15s; }
.cx-act-slot.is-open .cx-act-new { opacity: 1; transform: none; }

/* the NEW row: a light tint only — no accent bar. Reads as "highlighted",
   not a floating panel. */
.cx-act-new {
    border-radius: 10px;
    padding: 18px 14px;
    background: rgba(76,108,255,0.05);
    border-top: 0;
}
/* the hairline divider between the new box and the existing call fades in a
   beat AFTER the box lands (JS adds .show-divider on the body), so the two
   don't appear connected instantly. */
.cx-act-slot.is-open + .cx-act { margin-top: 14px; padding-top: 20px; border-top: 1px solid transparent; transition: border-color 0.4s ease; }
.cx-crm-body.show-divider .cx-act-slot.is-open + .cx-act { border-top-color: #f0f1f5; }
.cx-act-new .cx-act-ico { background: rgba(76,108,255,0.12); color: var(--cx-accent); }

/* the status pill: "Logging…" -> "Logged by Askpilot". Both states share one
   spot; .is-done fades the loader out and the confirmation in. */
.cx-act-status { position: relative; display: inline-flex; font-size: 10.5px; font-weight: 600; min-height: 18px; align-items: center; }
.cx-act-status-load,
.cx-act-status-done {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 9999px; white-space: nowrap;
    transition: opacity 0.45s ease;
}
.cx-act-status-load { background: #eef0f4; color: #6b7280; }
.cx-act-status-done { position: absolute; left: 0; top: 0; opacity: 0; background: #ecfdf5; border: 1px solid #a7f3d0; color: var(--cx-ok-deep); }
.cx-act-status-done svg { width: 10px; height: 10px; }
.cx-act-status.is-done .cx-act-status-load { opacity: 0; }
.cx-act-status.is-done .cx-act-status-done { opacity: 1; }
.cx-act-spinner {
    width: 10px; height: 10px; flex: none; border-radius: 50%;
    border: 1.6px solid rgba(107,114,128,0.35); border-top-color: #6b7280;
    animation: cx-spin 0.7s linear infinite;
}
@keyframes cx-spin { to { transform: rotate(360deg); } }

/* the attached transcript chip within the new row */
.cx-act-attach {
    display: inline-flex; align-items: center; gap: 9px;
    margin-top: 11px; padding: 8px 11px;
    border: 1px solid #e5e7ef; border-radius: 9px; background: #fff;
}
.cx-act-attach-ico {
    width: 26px; height: 26px; flex: none; border-radius: 6px;
    background: #eef2ff; color: var(--cx-accent);
    display: flex; align-items: center; justify-content: center;
}
.cx-act-attach-ico svg { width: 13px; height: 13px; }
.cx-act-attach-name { font-size: 12px; font-weight: 600; color: var(--cx-ink); }
.cx-act-attach-meta { margin-left: 2px; font-size: 10.5px; color: var(--cx-muted); }

/* prior calls already on the record — plain rows, slightly muted */
.cx-act-old .cx-act-title { color: #4b5563; }
.cx-act-old .cx-act-summary { color: #6b7280; }

/* ===================== reduced motion ===================== */
@media (prefers-reduced-motion: reduce) {
    .cx-sum-line, .cx-attach, .cx-attach-btn svg,
    .cx-stage .cx-card, .cx-reveal, .cx-act-status-load, .cx-act-status-done,
    .cx-act-slot, .cx-act-slot .cx-act-new { transition: none; }
    .cx-act-spinner { animation: none; }
    .cx-transcribing-dots i { animation: none; opacity: 0.6; }
}