/* ============================================================
   Capability panel: "Send messages" (#cap-send).
   SPLIT layout (mirrors the Log-data demo via .hsd-frame / .hsd-left /
   .hsd-right): LEFT is the CRM activity timeline (the record building
   up); RIGHT is ONE message box that composes + sends the email, then
   switches to WhatsApp after no reply. Blue connector arrows fly from
   each sent message into the matching timeline event as it logs
   (js/cap-send.js, using a copy of fireConnector pointed at #cs-connectors).

   Left structure:  .hsd-left.cs-card > .cs-head + .cs-body > ol.cs-feed >
                    li.cs-ev[data-step] { .cs-ev-marker + .cs-ev-body }.
   Right structure: .hsd-right.cs-stage > .cs-scene[data-scene] (email|wa),
                    only .is-active shown (cross-fade, mirror of screen switch).
   ============================================================ */
.cap-send {
    --cs-accent: #4c6cff;
    --cs-accent-deep: #3552cc;
    --cs-ok: #10b981;
    --cs-ok-deep: #047857;
    --cs-wa: #25d366;
    --cs-wa-deep: #128c45;
    --cs-ink: #1f2937;
    --cs-muted: #6b7280;
    --cs-faint: #9ca3af;
    --cs-border: #e5e7eb;
    --cs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --cs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    margin: 0 auto;
    max-width: 1180px;
}

/* The split frame reuses .hsd-frame / .hsd-left / .hsd-right (loaded from
   hero-split-demo-v2.css) for the responsive grid + card chrome. We only
   add the per-side internals + the connector gradient here. */
.cs-connectors-grad { stroke: url(#cs-line-grad); }
#cs-connectors path {
    fill: none;
    stroke: url(#cs-line-grad);
    stroke-width: 2;
    stroke-linecap: round;
}
#cs-connectors .cs-pulse-dot { fill: var(--cs-accent); }

/* On both panels the showcase already applies the darker --cs-border via
   core-showcase.css (.cshow-screen .cap-send { --cs-border:#d1d5db }) and a
   shadow on .cs-card. The hsd-left/right cards read --hsd-border, so keep
   them aligned to our border too. */
.cap-send .hsd-left,
.cap-send .hsd-right { --hsd-border: var(--cs-border); }

/* ---- heights ----
   hero-split-demo-v2.css gives .hsd-left/.hsd-right fixed heights (320px
   mobile, 500/540px desktop) tuned for THAT demo. The timeline can run
   taller than 320px, so on mobile (stacked) let the LEFT card grow to fit
   its events (auto) and clip nothing; give the RIGHT message box its own
   sensible height. Desktop keeps a matched fixed height (set below). */
.cap-send .hsd-left  { height: auto; min-height: 320px; }
.cap-send .hsd-right { height: 360px; }
@media (min-width: 880px) {
    /* side-by-side: lock both to one height so the row reads as a pair */
    .cap-send .hsd-left,
    .cap-send .hsd-right { height: 480px; min-height: 0; }
}

/* ===================== LEFT: activity timeline ===================== */
.cap-send .hsd-left { overflow: hidden; }

/* ---- header: the lead this activity log belongs to ---- */
.cs-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 16px;
    border-bottom: 1px solid #f1f2f6;
    background: linear-gradient(180deg, #fbfcfe, #f7f9fc);
}
.cs-head-ava {
    width: 34px; height: 34px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    background: linear-gradient(140deg, #6583ff, #4c6cff);
    color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.cs-head-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.cs-head-title { font-size: 14px; font-weight: 600; color: var(--cs-ink); line-height: 1.2; }
.cs-head-sub { font-size: 11.5px; color: var(--cs-muted); }
.cs-head-src {
    margin-left: auto; flex: none;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; color: #44506a;
    padding: 4px 9px; border-radius: 9999px;
    background: #fff; border: 1px solid var(--cs-border);
}
.cs-head-src img { width: 13px; height: 13px; }

/* ---- the timeline ---- */
.cs-body { padding: 16px 18px 18px; flex: 1 1 auto; }
.cs-feed {
    list-style: none; margin: 0; padding: 0;
    position: relative;
}
/* vertical spine connecting the markers */
.cs-feed::before {
    content: "";
    position: absolute;
    left: 14px; top: 6px; bottom: 14px;
    width: 2px;
    background: linear-gradient(180deg, #e7e9f1 0%, #eceef4 100%);
    border-radius: 2px;
}

.cs-ev {
    position: relative;
    display: flex;
    gap: 13px;
    padding-bottom: 16px;
    /* hidden until revealed by JS (.is-in) */
    opacity: 0;
    transform: translateY(7px);
    transition: opacity 0.42s ease, transform 0.42s var(--cs-ease-out);
}
.cs-ev:last-child { padding-bottom: 0; }
.cs-ev.is-in { opacity: 1; transform: none; }

/* marker dot, sits over the spine */
.cs-ev-marker {
    position: relative; z-index: 1;
    width: 30px; height: 30px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 0 0 4px #fff;       /* mask the spine behind the marker */
}
.cs-ev-marker svg { width: 15px; height: 15px; }
.cs-ev-marker img { width: 16px; height: 16px; }

.cs-m-lead  { color: var(--cs-accent); border: 1.5px solid #d8defc; background: #f1f4ff; }
.cs-m-email { color: var(--cs-accent); border: 1.5px solid #d8defc; background: #f1f4ff; }
.cs-m-wait  { color: var(--cs-faint); border: 1.5px dashed #d5d8e0; background: #fafbfc; }
.cs-m-wa    { border: 1.5px solid #bdf0d2; background: #effbf3; }
.cs-m-wa.cs-m-wa-fallback { background: var(--cs-wa); }
.cs-m-reply { color: #fff; background: var(--cs-ok); border: 1.5px solid var(--cs-ok); }

/* event flashes briefly as the arrow lands on it (the "logged" beat) */
.cs-ev.is-target .cs-ev-marker { box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(76,108,255,0.18); }

/* event content */
.cs-ev-body { flex: 1 1 auto; min-width: 0; padding-top: 3px; }
.cs-ev-top { display: flex; align-items: baseline; gap: 8px; }
.cs-ev-title { font-size: 13.5px; font-weight: 600; color: var(--cs-ink); }
.cs-ev-time { margin-left: auto; flex: none; font-size: 11px; color: var(--cs-faint); font-variant-numeric: tabular-nums; }
.cs-ev-sub { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--cs-muted); }

/* muted "waited / no reply" row reads as a pause, not an action */
.cs-ev-wait { padding-bottom: 14px; }
.cs-ev-wait-text { color: var(--cs-faint); font-style: italic; }

/* the reply payoff bubble */
.cs-ev-reply-msg {
    margin: 6px 0 0;
    display: inline-block;
    font-size: 12.5px; line-height: 1.45; color: #0f5132;
    padding: 7px 11px;
    background: #effbf3; border: 1px solid #bdf0d2;
    border-radius: 10px 10px 10px 3px;
}

/* ===================== RIGHT: message box ===================== */
/* The right card appears only when there's a message to show. Between
   messages it's empty (.is-empty on .hsd-right): the whole card fades +
   scales away so the right side is quiet and the left timeline carries
   the story. A message pops IN (scale + lift), composes + sends, then
   pops OUT before the next beat. The card chrome (border/shadow/bg) lives
   on .hsd-right, so the empty state is driven there. */
.cap-send .hsd-right {
    transition: opacity 0.45s var(--cs-ease),
                transform 0.5s var(--cs-ease-out),
                box-shadow 0.45s var(--cs-ease),
                border-color 0.45s var(--cs-ease);
}
.cap-send .hsd-right.is-empty {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    box-shadow: none;
    border-color: transparent;
    pointer-events: none;
}
.cs-stage {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    background: #fff;
    display: flex;            /* so the active scene can stretch to full height */
    flex-direction: column;
}
.cs-scene {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(5%);
    transition: opacity 0.4s var(--cs-ease), transform 0.5s var(--cs-ease-out);
    pointer-events: none;
}
/* the active scene fills the stage so its body can grow and the footer
   (email toolbar / wa input) pins to the bottom via margin-top:auto */
.cs-scene.is-active { position: relative; flex: 1 1 auto; opacity: 1; transform: none; }
.cs-scene.is-past { opacity: 0; transform: translateX(-4%); }

/* top bar shared by both scenes */
.cs-msg-bar {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 15px;
    border-bottom: 1px solid #eef0f5;
    background: linear-gradient(180deg, #fbfcfe, #f7f9fc);
}
.cs-msg-app { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--cs-ink); }
.cs-msg-app img { width: 16px; height: 16px; }
.cs-msg-tag {
    margin-left: auto; font-size: 11px; font-weight: 600; color: var(--cs-accent-deep);
    padding: 3px 9px; border-radius: 9999px; background: #eef2ff; border: 1px solid #dbe2ff;
}

/* ---- email scene ---- */
.cs-mail { display: flex; flex-direction: column; flex: 1 1 auto; padding: 4px 16px 16px; }
.cs-mail-row {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 2px; border-bottom: 1px solid #f1f2f6;
    font-size: 13.5px; min-height: 20px;
}
.cs-mail-key { flex: none; width: 56px; color: var(--cs-muted); font-weight: 500; }
.cs-mail-val { color: var(--cs-ink); min-width: 0; }
.cs-mail-val.is-typing::after {
    content: ""; display: inline-block; width: 1.5px; height: 14px;
    background: var(--cs-accent); margin-left: 1px; vertical-align: -2px;
    animation: csCaret 0.9s steps(1) infinite;
}
.cs-mail-body {
    margin-top: 13px;
    font-size: 13.5px; line-height: 1.6; color: #374151;
    white-space: pre-wrap; min-height: 64px;
}
.cs-mail-body.is-typing::after {
    content: ""; display: inline-block; width: 1.5px; height: 15px;
    background: var(--cs-accent); margin-left: 1px; vertical-align: -2px;
    animation: csCaret 0.9s steps(1) infinite;
}
@keyframes csCaret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* margin-top:auto pins the footer (Drafted by / Send) to the BOTTOM of the
   email card, like a real client toolbar, instead of floating mid-card. */
.cs-mail-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; }
.cs-mail-meta { font-size: 12px; color: var(--cs-faint); }
.cs-send-btn {
    margin-left: auto; appearance: none; cursor: default; border: 0;
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 13px; font-weight: 600; color: #fff;
    padding: 8px 16px; border-radius: 9px;
    background: var(--cs-accent);
    box-shadow: 0 8px 18px -8px rgba(76,108,255,0.7);
    transition: transform 0.18s var(--cs-ease), background 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}
.cs-send-btn svg { width: 14px; height: 14px; }
.cs-send-label, .cs-send-done { display: inline-flex; align-items: center; gap: 6px; }
.cs-send-done { display: none; }
.cs-send-btn.is-pressed { transform: scale(0.94); }
.cs-send-btn.is-sent { background: var(--cs-ok); box-shadow: 0 8px 18px -8px rgba(16,185,129,0.7); }
.cs-send-btn.is-sent .cs-send-label { display: none; }
.cs-send-btn.is-sent .cs-send-done { display: inline-flex; }

/* ---- whatsapp scene ----
   The WhatsApp UI reuses the Log-data demo's hsd-wa-* classes (header,
   contact row, chat-pattern scroll, bubbles) from hero-split-demo-v2.css
   so it matches pixel-for-pixel. Only the typing indicator below is local. */
/* typing "…" indicator — a hsd-wa-bubble (incoming shape) with animated dots */
.hsd-wa-bubble.is-typing-bubble {
    color: transparent;
    min-width: 38px;
}
.hsd-wa-bubble.is-typing-bubble::after {
    content: "..."; color: #9aa4ad; letter-spacing: 2px;
    animation: csWaDots 1.1s steps(3) infinite;
}
@keyframes csWaDots { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } }

/* ===================== responsive ===================== */
@media (max-width: 879px) {
    /* stacked: give each panel a sensible fixed-ish height like the
       Log-data demo (.hsd-frame goes 1-col automatically). */
    .cap-send .hsd-left  { min-height: 0; }
    .cap-send .hsd-right { height: 320px; }
}
@media (min-width: 880px) {
    /* side-by-side: lock both panels to the SAME height as the other tabs
       (540px) so every capability's boxes match. */
    .cap-send .hsd-left, .cap-send .hsd-right { height: 480px; }
    .cap-send .cs-body { overflow: hidden; }
}

@media (max-width: 480px) {
    .cs-body { padding: 14px 14px 16px; }
    .cs-ev-reply-msg { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-ev, .cs-scene, .hsd-wa-bubble, .cs-send-btn { transition: none; }
    .cs-mail-val.is-typing::after, .cs-mail-body.is-typing::after { animation: none; }
}