/* ============================================================
   Hero split-screen demo  ·  css/hero-split-demo.css
   Driven by js/hero-split-demo.js.

   Layout: a single framed stage split into two panels.
     LEFT  — live call transcript (CallSwitch One). Lines type in;
             key phrases highlight.
     RIGHT — the tools Askpilot updates: an iamproperty CRM record,
             a task, and an email — each fills in sequence.
   An absolutely-positioned SVG overlay (.hsd-connectors) draws a
   gradient line from a highlighted phrase to the tool it lands in.

   Design tokens mirror css/hero-animation.css so this reads native:
     accent #6583FF / #4c6cff, success #10b981, text #0f172a,
     muted #6b7280, borders #e5e7eb / #eef0f4, card radius 12–16px.
   ============================================================ */

:root {
    --hsd-accent: #6583FF;
    --hsd-accent-deep: #4c6cff;
    --hsd-ink: #0f172a;
    --hsd-muted: #6b7280;
    --hsd-line: #eef0f4;
    --hsd-border: #e5e7eb;
    --hsd-ok: #10b981;
    --hsd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --hsd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------- Frame + split ----------------
   The frame is just a positioning context + grid track holder now — it has
   NO card chrome of its own. Each panel (.hsd-left / .hsd-right) is a fully
   self-contained card with its own border + shadow, separated by a gap. The
   connector overlay spans the gap so the line still draws across. */
.hsd-frame {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}
@media (min-width: 880px) {
    .hsd-frame {
        /* Left (transcript) narrower than the right (app viewport). */
        grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
        gap: 28px;
    }
}

/* Connector overlay sits above both panels but never blocks layout. */
.hsd-connectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
}
.hsd-connectors path {
    fill: none;
    stroke: url(#hsd-line-grad);
    stroke-width: 2;
    stroke-linecap: round;
    /* Each path is drawn by animating stroke-dashoffset from JS. */
}
.hsd-connectors .hsd-pulse-dot {
    fill: var(--hsd-accent);
}

/* On stacked mobile the connector still draws — vertically, from the bottom
   of the transcript card down into the tools card (geometry handled in JS).
   The SVG overlay spans the whole frame so the vertical run is visible. */

/* ---------------- Panels (each a standalone card) ---------------- */
.hsd-left,
.hsd-right {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid var(--hsd-border);
    box-shadow: 0 24px 64px -30px rgba(15, 23, 42, 0.22), 0 1px 2px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    z-index: 1;
}

/* ---------------- Left: transcript ---------------- */
.hsd-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--hsd-line);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--hsd-muted);
}
.hsd-live-dot {
    width: 8px; height: 8px;
    border-radius: 9999px;
    background: var(--hsd-ok);
    flex: 0 0 auto;
    animation: hsdLivePulse 1.4s ease-in-out infinite;
}
.hsd-frame.is-ended .hsd-live-dot { background: #9ca3af; animation: none; }
.hsd-panel-head-label { flex: 0 0 auto; }
.hsd-via-logo { height: 13px; margin-left: auto; opacity: 0.9; }

.hsd-caller {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--hsd-line);
}
.hsd-caller-avatar {
    width: 36px; height: 36px;
    flex: 0 0 auto;
    border-radius: 9999px;
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: 0.01em;
    transition: background 0.45s var(--hsd-ease);
}
/* Unknown caller: neutral grey avatar with a person glyph until we capture a name. */
.hsd-caller-avatar.is-unknown {
    background: #e5e7eb;
    color: #9ca3af;
}
.hsd-caller-avatar.is-unknown svg { width: 18px; height: 18px; }
.hsd-caller-name { transition: color 0.3s var(--hsd-ease); }
.hsd-caller-info { min-width: 0; flex: 1 1 auto; }
.hsd-caller-name { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--hsd-ink); }
.hsd-caller-meta { margin: 0; font-size: 11.5px; color: var(--hsd-muted); }
.hsd-caller-timer {
    flex: 0 0 auto;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--hsd-muted);
    font-weight: 500;
}

.hsd-transcript-scroll {
    flex: 1 1 auto;
    /* hidden (not auto) so the user can't scroll/swipe the content by hand — the
       JS auto-scroll still works via scrollTop, which overflow:hidden permits.
       touch-action: pan-y lets a vertical swipe that starts here still scroll the
       PAGE (so the box doesn't trap the gesture on mobile). */
    overflow-y: hidden;
    touch-action: pan-y;
    padding: 16px 14px 22px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 8px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 8px), transparent 100%);
}
.hsd-transcript-scroll::-webkit-scrollbar { display: none; }
.hsd-transcript {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* A transcript turn: speaker label + text. */
.hsd-turn {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s var(--hsd-ease), transform 0.5s var(--hsd-ease);
}
.hsd-turn.is-on { opacity: 1; transform: none; }
.hsd-turn-speaker {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--hsd-muted);
    margin-bottom: 3px;
}
.hsd-turn.is-agent .hsd-turn-speaker { color: var(--hsd-accent-deep); }
.hsd-turn-text {
    font-size: 14px;
    line-height: 1.6;
    color: #1f2937;
}
/* streaming caret */
.hsd-turn-text.is-streaming::after {
    content: '';
    display: inline-block;
    width: 2px; height: 1.05em;
    margin-left: 1px;
    vertical-align: -0.18em;
    background: var(--hsd-accent);
    animation: hsdCaret 1s steps(2, start) infinite;
}

/* Highlighted key phrase inside a transcript line. */
.hsd-hl {
    position: relative;
    border-radius: 5px;
    padding: 1px 4px;
    margin: 0 -1px;
    color: #0f172a;
    background: transparent;
    box-shadow: 0 0 0 0 rgba(101, 131, 255, 0);
    transition: background 0.45s var(--hsd-ease), color 0.45s var(--hsd-ease), box-shadow 0.45s var(--hsd-ease);
}
.hsd-hl.is-lit {
    background: rgba(101, 131, 255, 0.16);
    color: #2f3ea8;
    box-shadow: 0 0 0 1px rgba(101, 131, 255, 0.22);
}
/* a brief "sending" flash when its data flies to the tool */
.hsd-hl.is-firing {
    background: rgba(101, 131, 255, 0.28);
    box-shadow: 0 0 0 2px rgba(101, 131, 255, 0.3);
}

/* ============================================================
   RIGHT: app viewport — three full screens that slide in turn.
   .hsd-right is the device frame; .hsd-screens is the stage;
   each .hsd-screen is one full app (CRM / board / email),
   absolutely stacked and slid via transform. Only .is-active is
   on-screen; screens that have played get .is-past (slid left),
   screens not yet reached sit to the right (default).
   ============================================================ */
.hsd-screens {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    background: #f1f3f7;
}
.hsd-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.62s var(--hsd-ease-out), opacity 0.4s ease;
    will-change: transform;
}
.hsd-screen.is-active { transform: translateX(0); opacity: 1; }
.hsd-screen.is-past   { transform: translateX(-6%); opacity: 0; }
/* brief glow each time data lands in the active screen */
.hsd-screen.is-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px rgba(101, 131, 255, 0.45);
    opacity: 0;
    animation: hsdGlow 0.62s var(--hsd-ease);
}
@keyframes hsdGlow {
    0%   { opacity: 0; }
    35%  { opacity: 1; }
    100% { opacity: 0; }
}

/* --- shared app chrome --- */
.hsd-app-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--hsd-line);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.hsd-app-id {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hsd-ink);
    flex: 0 0 auto;
}
.hsd-app-id img { width: 18px; height: 18px; display: block; object-fit: contain; }
.hsd-app-breadcrumb {
    font-size: 11.5px;
    color: var(--hsd-muted);
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hsd-app-breadcrumb strong { color: #374151; font-weight: 600; }
.hsd-app-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--hsd-ok);
    background: rgba(16, 185, 129, 0.12);
    border-radius: 9999px;
    padding: 3px 9px 3px 7px;
    flex: 0 0 auto;
    opacity: 0;
    transform: scale(0.82);
    transition: opacity 0.34s var(--hsd-ease), transform 0.34s var(--hsd-ease);
}
.hsd-app-badge svg { width: 11px; height: 11px; }
.hsd-app-badge.is-on { opacity: 1; transform: none; }
.hsd-app-body {
    flex: 1 1 auto;
    /* hidden (not auto): tall content (e.g. the board) is scrolled ONLY by the
       JS auto-scroll (programmatic scrollTop works under overflow:hidden); the
       user cannot scroll/swipe it by hand. touch-action: pan-y lets a vertical
       swipe that starts here still scroll the PAGE, so the box never traps the
       gesture on mobile. */
    overflow: hidden;
    padding: 16px;
    scrollbar-width: none;
    scroll-behavior: smooth;
    touch-action: pan-y;
}
.hsd-app-body::-webkit-scrollbar { display: none; }

/* --- Trello board logo glyph (two little bars) --- */
.hsd-board-logo {
    width: 18px; height: 18px;
    border-radius: 4px;
    background: #1d6ff2;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
}
.hsd-board-logo span {
    display: block;
    width: 5px;
    border-radius: 1.5px;
    background: #fff;
}
.hsd-board-logo span:first-child { height: 100%; }
.hsd-board-logo span:last-child { height: 60%; align-self: flex-start; }

/* ============================================================
   SCREEN 0 — Askpilot standing by (placeholder)
   ============================================================ */
.hsd-screen-idle {
    background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
}
.hsd-idle {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 24px;
}
.hsd-idle-mark {
    position: relative;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
}
.hsd-idle-mark img { width: 34px; height: 34px; display: block; position: relative; z-index: 2; }
.hsd-idle-pulse {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    border: 1.5px solid rgba(101, 131, 255, 0.4);
    animation: hsdIdlePulse 2.2s ease-out infinite;
}
.hsd-idle-pulse-2 { animation-delay: 1.1s; }
@keyframes hsdIdlePulse {
    0%   { transform: scale(0.7); opacity: 0.7; }
    100% { transform: scale(1.7); opacity: 0; }
}
.hsd-idle-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 26px;
}
.hsd-idle-wave span {
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, #6583FF, #4c6cff);
    animation: hsdIdleBar 1.1s ease-in-out infinite;
}
.hsd-idle-wave span:nth-child(odd)  { animation-delay: 0.15s; }
.hsd-idle-wave span:nth-child(3n)   { animation-delay: 0.3s; }
.hsd-idle-wave span:nth-child(4n)   { animation-delay: 0.45s; }
.hsd-idle-wave span:nth-child(5n)   { animation-delay: 0.6s; }
@keyframes hsdIdleBar {
    0%, 100% { height: 6px; opacity: 0.5; }
    50%      { height: 22px; opacity: 1; }
}
.hsd-idle-title { font-size: 15px; font-weight: 600; color: var(--hsd-ink); margin: 4px 0 0; }
.hsd-idle-sub { font-size: 12.5px; color: var(--hsd-muted); margin: 0; max-width: 240px; }

/* ============================================================
   SCREEN 1 — iamproperty CRM
   ============================================================ */
.hsd-crm-record {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--hsd-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 16px;
}
.hsd-crm-applicant { display: flex; align-items: center; gap: 11px; }
.hsd-crm-applicant-avatar {
    width: 38px; height: 38px;
    flex: 0 0 auto;
    border-radius: 9999px;
    background: linear-gradient(135deg, #6583FF 0%, #4c6cff 100%);
    color: #fff;
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.45s var(--hsd-ease);
}
.hsd-crm-applicant-avatar.is-unknown {
    background: #e5e7eb;
    color: #9ca3af;
}
.hsd-crm-applicant-avatar.is-unknown svg { width: 19px; height: 19px; }
.hsd-crm-applicant-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.hsd-crm-applicant-name { font-size: 15px; font-weight: 600; color: var(--hsd-ink); }
.hsd-crm-applicant-tag {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--hsd-accent-deep);
}
.hsd-crm-status {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
    border-radius: 9999px;
    padding: 3px 10px;
}
.hsd-crm-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    padding-top: 14px;
    border-top: 1px solid var(--hsd-line);
}
.hsd-crm-field {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
    border-radius: 7px;
    margin: -4px -6px;
    padding: 4px 6px;
    transition: background 0.5s var(--hsd-ease);
}
/* email runs the full width of the record */
.hsd-crm-field-wide { grid-column: 1 / -1; }
/* the field briefly highlights when its value lands (target of the connector) */
.hsd-crm-field.is-target { background: rgba(101, 131, 255, 0.10); }
.hsd-crm-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #9ca3af;
}
.hsd-crm-value {
    font-size: 13.5px;
    color: #374151;
    padding-left: 10px;
    border-left: 2px solid #e5e7eb;
    min-height: 19px;
    transition: border-color 0.4s var(--hsd-ease), border-width 0.3s var(--hsd-ease);
}
.hsd-crm-value.is-filled {
    border-left: 3px solid var(--hsd-accent);
    padding-left: 9px;
}
.hsd-crm-value .hsd-pop { display: inline-block; animation: hsdPop 0.42s var(--hsd-ease-out); }
.hsd-crm-note {
    display: flex; flex-direction: column; gap: 3px;
    padding-top: 12px;
    border-top: 1px solid var(--hsd-line);
}
.hsd-crm-note-label {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
    text-transform: uppercase; color: #9ca3af;
}
.hsd-crm-note-text { font-size: 12.5px; color: var(--hsd-muted); }

/* Transcript attachment — sits below the record card; Askpilot reveals it
   once the call data is logged. Starts faded + down, slides in on .is-on. */
.hsd-crm-attachment {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--hsd-border);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s var(--hsd-ease), transform 0.5s var(--hsd-ease), border-color 0.4s var(--hsd-ease);
}
.hsd-crm-attachment.is-on {
    opacity: 1;
    transform: none;
    border-color: rgba(101, 131, 255, 0.4);
}
.hsd-crm-attachment-ico {
    width: 34px; height: 34px;
    flex: 0 0 auto;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--hsd-accent-deep);
    background: rgba(101, 131, 255, 0.12);
}
.hsd-crm-attachment-ico svg { width: 17px; height: 17px; }
.hsd-crm-attachment-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.hsd-crm-attachment-title { font-size: 13px; font-weight: 600; color: var(--hsd-ink); }
.hsd-crm-attachment-meta { font-size: 11.5px; color: var(--hsd-muted); }
.hsd-crm-attachment-badge {
    width: 20px; height: 20px;
    flex: 0 0 auto;
    border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    background: var(--hsd-ok);
}
.hsd-crm-attachment-badge svg { width: 11px; height: 11px; }

/* ============================================================
   SCREEN 2 — Trello-style board
   ============================================================ */
.hsd-board-body { padding: 14px; background: #f1f3f7; }
.hsd-board-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    align-items: start;   /* columns size to their own content, not stretched equal */
    min-height: 100%;     /* fill the box, but grow + let the body scroll if cards overflow */
}
/* Mobile: only 2 columns fit comfortably — show To do + In progress, hide Done. */
@media (max-width: 879px) {
    .hsd-board-cols { grid-template-columns: repeat(2, 1fr); }
    .hsd-board-col-done { display: none; }
}
.hsd-board-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #e9ecf2;
    border-radius: 10px;
    padding: 9px 8px;
    align-content: flex-start;
}
.hsd-board-col-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; font-weight: 700; color: #44506a;
    padding: 0 2px 2px;
}
.hsd-board-count {
    font-size: 10px; font-weight: 600; color: #6b7280;
    background: #d7dce6; border-radius: 9999px; padding: 1px 7px;
}
.hsd-board-card {
    display: flex; flex-direction: column; gap: 3px;
    background: #fff;
    border-radius: 7px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    padding: 8px 9px;
}
.hsd-board-card-title { font-size: 12px; font-weight: 600; color: var(--hsd-ink); }
.hsd-board-card-meta { font-size: 10.5px; color: var(--hsd-muted); }
/* the new card Askpilot drops in */
.hsd-board-card.is-new {
    border-color: rgba(101, 131, 255, 0.55);
    box-shadow: 0 10px 24px -12px rgba(101, 131, 255, 0.55), 0 1px 2px rgba(15, 23, 42, 0.06);
    animation: hsdCardDrop 0.5s var(--hsd-ease-out);
}
.hsd-board-card.is-new .hsd-board-card-title { color: var(--hsd-accent-deep); }
.hsd-board-card-tag {
    display: inline-flex; align-items: center; gap: 4px;
    align-self: flex-start;
    margin-top: 2px;
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--hsd-accent-deep);
    background: rgba(101, 131, 255, 0.12);
    border-radius: 9999px; padding: 1px 7px;
}

/* ============================================================
   SCREEN — Outlook Calendar (day view)
   ============================================================ */
.hsd-app-bar-cal .hsd-app-id { color: #0a5ad6; }
.hsd-cal-body { padding: 0; }
.hsd-cal-day {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.hsd-cal-row {
    display: flex;
    align-items: stretch;
    flex: 1 1 0;
    min-height: 0;
    border-bottom: 1px solid var(--hsd-line);
}
.hsd-cal-row:last-child { border-bottom: 0; }
.hsd-cal-time {
    flex: 0 0 auto;
    width: 56px;
    padding: 6px 10px 0 14px;
    font-size: 10.5px;
    font-weight: 600;
    color: #9ca3af;
    text-align: right;
    border-right: 1px solid var(--hsd-line);
}
.hsd-cal-slot {
    flex: 1 1 auto;
    position: relative;
    padding: 4px 12px;
    min-width: 0;
}
/* an existing (greyed) event for realism */
.hsd-cal-existing {
    display: block;
    font-size: 11.5px;
    color: #6b7280;
    background: #eef0f4;
    border-left: 3px solid #c4cad6;
    border-radius: 5px;
    padding: 4px 8px;
}
/* the viewing event Askpilot books */
.hsd-cal-event {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(10, 90, 214, 0.10);
    border-left: 3px solid #0a5ad6;
    border-radius: 6px;
    padding: 6px 9px;
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    animation: hsdCalAppear 0.5s var(--hsd-ease-out) forwards;
}
.hsd-cal-event-title { font-size: 12px; font-weight: 600; color: #0a3a8f; }
.hsd-cal-event-meta { font-size: 10.5px; color: #3b6fc4; }
@keyframes hsdCalAppear {
    0%   { opacity: 0; transform: translateY(6px) scale(0.98); }
    100% { opacity: 1; transform: none; }
}

/* ============================================================
   SCREEN 3 — Outlook compose
   ============================================================ */
.hsd-app-bar-email .hsd-app-id { color: #0a5ad6; }
.hsd-email-body-wrap {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.hsd-email-fields {
    flex: 0 0 auto;
    padding: 4px 16px;
}
.hsd-email-row {
    display: flex; gap: 10px; align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid var(--hsd-line);
}
.hsd-email-key {
    flex: 0 0 auto;
    width: 52px;
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
}
.hsd-email-val { color: #374151; min-width: 0; font-size: 13px; }
.hsd-email-message {
    flex: 1 1 auto;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.6;
    color: #374151;
    overflow: hidden;
}
.hsd-email-message.is-streaming::after {
    content: '';
    display: inline-block;
    width: 2px; height: 1.05em;
    margin-left: 1px;
    vertical-align: -0.18em;
    background: #0a5ad6;
    animation: hsdCaret 1s steps(2, start) infinite;
}
.hsd-email-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-top: 1px solid var(--hsd-line);
    background: #fafbfc;
}
.hsd-email-send {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    cursor: default;
    background: #0a5ad6;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 7px;
    padding: 7px 16px;
    position: relative;
    transition: transform 0.12s ease, background 0.3s var(--hsd-ease);
}
.hsd-email-send svg { width: 14px; height: 14px; }
.hsd-email-send-default { display: inline-flex; align-items: center; gap: 7px; }
.hsd-email-send-done { display: none; align-items: center; gap: 6px; }
.hsd-email-send.is-pressed { transform: scale(0.95); background: #0848aa; }
.hsd-email-send.is-sent { background: var(--hsd-ok); }
.hsd-email-send.is-sent .hsd-email-send-default { display: none; }
.hsd-email-send.is-sent .hsd-email-send-done { display: inline-flex; }
.hsd-email-tools { display: inline-flex; gap: 5px; }
.hsd-email-tools span {
    width: 24px; height: 24px;
    border-radius: 6px;
    background: #eef0f4;
}

/* ---------------- Keyframes ---------------- */
@keyframes hsdLivePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
@keyframes hsdCaret { to { opacity: 0; } }
@keyframes hsdPop {
    0%   { opacity: 0; transform: translateY(4px); }
    60%  { opacity: 1; transform: translateY(-1px); }
    100% { opacity: 1; transform: none; }
}
@keyframes hsdCardDrop {
    0%   { opacity: 0; transform: translateY(-10px) scale(0.96); }
    60%  { opacity: 1; transform: translateY(2px) scale(1.01); }
    100% { opacity: 1; transform: none; }
}

/* ---------------- Heights ---------------- */
/* Stacked (mobile): each panel gets a sensible fixed height. The right
   panel now holds full app screens, so give it a bit more room. */
.hsd-left  { height: 320px; }
.hsd-right { height: 400px; }
@media (min-width: 880px) {
    /* Side-by-side: lock both panels to the same height so the connector
       geometry is stable and the two cards read as a matched pair. */
    .hsd-left, .hsd-right { height: 500px; }
}
@media (min-width: 1180px) {
    .hsd-left, .hsd-right { height: 540px; }
}

/* ---------------- Static connector between the two boxes ----------------
   A short accent line bridges the gap so the two cards read as one connected
   unit. Vertical when stacked (mobile), horizontal when side-by-side (desktop).
   This is separate from the animated SVG connector, which draws transiently
   during the sequence and fades out. */

/* Mobile: vertical line in the 16px gap between the stacked cards. */
@media (max-width: 879px) {
    .hsd-frame::after {
        content: '';
        position: absolute;
        left: 50%;
        top: var(--hsd-top-h, 320px);
        height: 16px;
        width: 2px;
        transform: translateX(-50%);
        background: var(--hsd-border);
        border-radius: 2px;
        z-index: 0;
    }
}

/* Desktop: horizontal line that spans the FULL gap, edge-to-edge — from the
   right edge of the left box to the left edge of the right box, so the two
   cards read as physically connected. The left column is 0.62fr of the
   (100% − 28px gap) track space, so its right edge sits at
   calc(0.62/1.62 * (100% − 28px)). The line starts there and is exactly the
   gap width (28px) wide. A 1px overlap each side guarantees it touches. */
@media (min-width: 880px) {
    .hsd-frame::after {
        content: '';
        position: absolute;
        top: 50%;
        left: calc((100% - 28px) * 0.382716 - 1px); /* 0.62 / 1.62 */
        width: 30px;                                 /* 28px gap + 1px overlap each side */
        height: 2px;
        transform: translateY(-50%);
        background: var(--hsd-border);
        border-radius: 2px;
        z-index: 0;
    }
}

/* ---------------- Reduced motion ----------------
   No sliding/typing. The static snapshot (built in JS) shows the EMAIL
   screen as the final, most complete state; transitions are disabled. */
@media (prefers-reduced-motion: reduce) {
    .hsd-turn { opacity: 1; transform: none; transition: none; }
    .hsd-screen { transition: none; }
    .hsd-screen.is-active { transform: translateX(0); opacity: 1; }
    .hsd-live-dot { animation: none; }
    .hsd-turn-text.is-streaming::after,
    .hsd-email-message.is-streaming::after { display: none; }
    .hsd-crm-value .hsd-pop { animation: none; }
    .hsd-board-card.is-new { animation: none; }
    .hsd-app-badge { opacity: 1; transform: none; }
    .hsd-idle-pulse, .hsd-idle-wave span { animation: none; }
    .hsd-connectors { display: none; }
}