/* ============================================================
   Capability panel: "Book appointments" (#cap-book).
   Human-in-the-loop SPLIT flow (mirrors the Send-messages demo):
     LEFT  — a RECEIVED email asking to book a viewing (reuses the
             Log-data email skin: hsd-mail-* / hsd-panel-head).
     RIGHT — a stage that switches between an ASK/CONFIRM popup (reuses
             the unc-* / hiw-btn approval vocabulary) and a CALENDAR
             (the cb-* day view) where the event drops into the 2 PM slot.
   Driven by js/cap-book.js. Gated by an IntersectionObserver; restarts
   on tab click via the cshow:restart event.
   ============================================================ */
.cap-book {
    --cb-accent: #4c6cff;
    --cb-ok: #10b981;
    --cb-ok-deep: #047857;
    --cb-ink: #1f2937;
    --cb-muted: #6b7280;
    --cb-border: #d1d5db;
    --cb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --cb-ease-out: cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* The split frame reuses .hsd-frame / .hsd-left / .hsd-right (loaded from
   hero-split-demo-v2.css). Align the card border to the showcase's. */
.cap-book .hsd-left,
.cap-book .hsd-right { --hsd-border: var(--cb-border); }

/* connector overlay — a blue line flies from the detected email phrase to
   the right box as it opens (fireConnector, pointed at #cb-connectors). */
#cb-connectors path {
    fill: none;
    stroke: url(#cb-line-grad);
    stroke-width: 2;
    stroke-linecap: round;
}
#cb-connectors .cb-pulse-dot { fill: var(--cb-accent); }
/* The persistent grey connector line (.hsd-frame::after, from
   hero-split-demo-v2.css) bridges the two cards on desktop — matching the
   Send-messages demo — and the animated blue arrow above rides over it during
   the sequence. On MOBILE the cards stack and the left card grows past the
   line's fixed 320px offset, so suppress it there only. */
@media (max-width: 879px) {
    .cap-book .hsd-frame::after { display: none !important; }
}

/* ---- right side: flatten the inherited .hsd-right card ----
   The right side's TWO scenes each provide their own frame: the ask scene
   is a faded DESKTOP (.cb-desk, its own border/shadow) and the calendar is
   a .cb-card. So the inherited .hsd-right card chrome (border, shadow, white
   fill) must be stripped, otherwise we render a frame-inside-a-frame (the
   "duplicated background/border" bug). Mirrors #unc-demo .hsd-right. */
.cap-book .hsd-right {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    transition: opacity 0.45s var(--cb-ease), transform 0.5s var(--cb-ease-out);
}
/* the right side appears AFTER the email (mirrors Send-messages): hidden to
   start, pops in (fade + scale). With no card chrome, only opacity+transform
   animate. */
.cap-book .hsd-right.is-empty {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    pointer-events: none;
}

/* ---- heights ----
   Mobile: left email auto-grows; the right stage (which holds the faded
   DESKTOP backdrop with the ask popup floating over it) must be TALL enough
   to contain the whole popup, or the popup overflows above/below the desk.
   Desktop (>=880px): lock both to one height so the row reads as a pair. */
.cap-book .hsd-left  { height: auto; min-height: 320px; }
.cap-book .hsd-right { height: 520px; }   /* fits the ask popup on mobile */
@media (min-width: 880px) {
    .cap-book .hsd-left,
    .cap-book .hsd-right { height: 480px; min-height: 0; }
}

/* ===================== LEFT: received email ===================== */
.cap-book .cb-mail { overflow: hidden; }
/* the email body appears whole (it's received), with the same soft fade+lift
   reveal the Log-data email uses when its channel skin comes in. It starts
   hidden and reveals via .is-shown (set by the sequencer just after start). */
#cb-mail-body {
    white-space: normal;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s var(--cb-ease), transform 0.5s var(--cb-ease-out);
}
#cb-mail-body.is-shown { opacity: 1; transform: none; }

/* ===================== RIGHT: stage (ask popup <-> calendar) ===================== */
/* transparent — each scene (faded desktop / calendar card) carries its own
   frame + background, so the stage adds no chrome of its own. */
.cb-stage {
    position: relative;
    overflow: visible;
    background: transparent;
    display: flex;
    flex-direction: column;
}
.cb-scene {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(5%);
    transition: opacity 0.4s var(--cb-ease), transform 0.5s var(--cb-ease-out);
    pointer-events: none;
}
.cb-scene.is-active { position: relative; flex: 1 1 auto; opacity: 1; transform: none; pointer-events: auto; }
.cb-scene.is-past { opacity: 0; transform: translateX(-4%); }

/* ---- SCENE A: ask / confirm popup over a faded desktop ----
   The popup floats OVER a faded desktop backdrop (the reused unc-desk /
   hiw-wf / hiw-dock mockup), exactly like the "Ask when unsure" demo —
   so it reads as a real notification Askpilot raised over the screen,
   not a card on an empty surface. The desk fills the scene; the popup is
   absolutely centred above it. */
.cb-scene-ask {
    display: block;
    padding: 0;
    background: transparent;      /* the desk below is the only frame */
}
/* the desk backdrop fills the scene AND is the only framed surface (its own
   border + radius + shadow, like the uncertain-demo desktop). */
.cb-desk.unc-desk {
    position: absolute;
    inset: 0;
    margin: 0;
    min-height: 0;
    border: 1px solid var(--cb-border);
    border-radius: 16px;
    box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.18), 0 1px 2px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}
.cb-desk .hiw-menubar { border-radius: 16px 16px 0 0; }
/* the popup floats above the desk, centred */
.cb-ask {
    position: absolute;
    top: 50%; left: 50%;
    z-index: 3;
    width: min(340px, 86%);
    background: #fff;
    border: 1px solid #e6e8f0;
    border-radius: 14px;
    box-shadow: 0 36px 70px -26px rgba(17, 24, 39, 0.42), 0 2px 6px -2px rgba(17, 24, 39, 0.12);
    overflow: hidden;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 10px)) scale(0.97);
    transition: opacity 0.4s var(--cb-ease), transform 0.45s var(--cb-ease-out);
}
.cb-scene-ask.is-shown .cb-ask { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* window title bar — mirrors the uncertain-demo popup ("New contact"):
   traffic-lights left, the window title CENTERED, a spacer mirroring the
   lights on the right so the title stays optically centred. */
.cb-ask-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 13px;
    border-bottom: 1px solid #eef0f5;
    background: linear-gradient(180deg, #fbfcfe, #f6f8fc);
}
.cb-ask-bar .hiw-tl { width: 9px; height: 9px; flex: none; }
.cb-ask-title {
    flex: 1 1 auto; text-align: center;
    font-size: 12px; font-weight: 600; color: #475569;
}
.cb-ask-bar-spacer { width: 41px; flex: none; }
.cb-ask-body { padding: 14px 15px 15px; }
/* tighten the reused unc title/message inside this card */
.cb-ask-body .unc-q-title { font-size: 13.5px; font-weight: 700; color: #0f172a; margin: 0 0 5px; line-height: 1.3; }
.cb-ask-need {
    display: inline-block; margin-left: 2px;
    font-size: 10.5px; font-weight: 600; color: var(--cb-accent);
    letter-spacing: 0.01em;
}
.cb-ask-body .unc-msg { font-size: 12px; line-height: 1.5; color: #4b5563; margin: 0 0 12px; }
.cb-ask-body .unc-form { display: flex; flex-direction: column; gap: 8px; }
.cb-ask-body .unc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 13px; }

/* ===================== SCENE B: the calendar ===================== */
.cb-scene-cal {
    padding: 0;
    background: #fff;
}
.cb-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    /* its OWN frame (the .hsd-right chrome is flattened), so it casts a
       per-card shadow like the email — not a merged blob. Matches the
       tightened shadow used across the split demos. */
    border: 1px solid var(--cb-border);
    border-radius: 16px;
    box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.18), 0 1px 2px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}
.cb-head {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; border-bottom: 1px solid #f3f4f6;
    flex: 0 0 auto;
}
.cb-head-ico { width: 30px; height: 30px; flex: none; border: 1px solid #eef0f4; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.cb-head-ico img { width: 17px; height: 17px; }
.cb-head-title { font-size: 13.5px; font-weight: 600; color: var(--cb-ink); }
.cb-head-badge {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 9999px;
    border: 1px solid #a7f3d0; background: #ecfdf5; color: var(--cb-ok-deep);
    opacity: 0; transform: translateY(-4px); transition: opacity 0.4s ease, transform 0.4s ease;
}
.cb-head-badge svg { width: 11px; height: 11px; }
.cap-book .cb-card.is-booked .cb-head-badge { opacity: 1; transform: none; }

.cb-body { padding: 8px 16px 14px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.cb-row { display: flex; align-items: stretch; gap: 12px; padding: 9px 0; border-top: 1px solid #f3f4f6; }
.cb-row:first-child { border-top: 0; }
.cb-time { width: 52px; flex: none; font-size: 12px; font-weight: 600; color: var(--cb-muted); padding-top: 2px; font-variant-numeric: tabular-nums; }
.cb-slot { flex: 1; min-height: 34px; border-radius: 9px; display: flex; flex-direction: column; justify-content: center; padding: 6px 11px; }

/* existing (muted) events */
.cb-slot.is-existing { background: #f3f4f6; }
.cb-slot.is-existing .cb-slot-title { font-size: 12.5px; font-weight: 600; color: #6b7280; }
.cb-slot.is-existing .cb-slot-meta { font-size: 11px; color: #9ca3af; }

/* the open slot that gets booked */
.cb-slot.is-open {
    border: 1.5px dashed #d4d8e0; background: transparent; color: #9ca3af;
    font-size: 12px; align-items: center; flex-direction: row;
    transition: border-color 0.4s ease, background 0.4s ease;
}
.cap-book .cb-card.is-booking .cb-slot.is-open { border-style: solid; border-color: rgba(76,108,255,0.4); }
.cap-book .cb-card.is-booked .cb-slot.is-open { display: none; }

/* the booked event that drops in */
.cb-booked {
    display: none;
    border-radius: 9px; padding: 6px 11px;
    background: rgba(76,108,255,0.08); box-shadow: inset 0 0 0 1.5px rgba(76,108,255,0.35);
    flex-direction: column; justify-content: center;
}
.cap-book .cb-card.is-booked .cb-booked { display: flex; animation: cb-drop 0.5s var(--cb-ease-out); }
.cb-booked-title { font-size: 12.5px; font-weight: 700; color: #3552cc; }
.cb-booked-meta { font-size: 11px; color: #4c6cff; }
@keyframes cb-drop { 0% { opacity: 0; transform: translateY(-8px) scale(0.97); } 100% { opacity: 1; transform: none; } }

/* ===================== responsive ===================== */
@media (max-width: 480px) {
    .cb-ask { max-width: 100%; }
    .cb-scene-ask { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .cb-scene, .cb-ask, .cb-head-badge,
    .cap-book .cb-card.is-booked .cb-booked { transition: none; animation: none; }
}