/* demos.css — scoped styles for the /demos page (recorded call players + hero).
   Reuses design tokens from styles.css (:root). Do NOT edit styles.css/script.js
   from here — keep every selector prefixed .demo-* / .demos-* so nothing bleeds
   into other pages. The player itself is a self-contained dark "call console"
   embedded inside the light .agent-card (hardcoded dark palette on purpose). */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.demos-hero {
    padding: 1rem 0 0.5rem;
    text-align: center;
}

.demos-hero-title {
    font-size: var(--fs-3xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    max-width: 720px;
    margin: 0 auto 0.85rem;
}

.demos-hero-sub {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto;
}

/* ── Tighten the top: #main-content already reserves 136px of top padding to
   clear the fixed header, so the hero's own big top padding was redundant
   (double spacing). Shrink the flex gap between the hero and the recordings
   section, and pull the two header blocks close instead of stacking two
   tall, heavily-padded ones. Scoped here — demos.css only loads on /demos,
   so these overrides of the shared #main-content / .demo-section /
   .section-header don't affect any other page. */
#main-content {
    gap: 1.5rem;
}

.demo-section {
    padding-top: 1.5rem;
}

.section-header {
    margin-bottom: 2rem;
}

/* ── Demo grid — 2x2 on desktop instead of the shared 3-up layout ───────
   .live-agents-grid in styles.css is hardcoded repeat(3, 1fr), which would
   orphan our 4th card at 1/3 width. Override with a modifier class scoped
   to this page only (demos.css is not loaded on the homepage). The shared
   ≤992px media query in styles.css still collapses .live-agents-grid to
   1fr — this rule only applies above that breakpoint so mobile/tablet
   stacking is untouched. */
@media (min-width: 993px) {
    .live-agents-grid.demos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Dark "call console" player ──────────────────────────────────────── */
.demo-player {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    background: linear-gradient(180deg, #0c1428, #0a1120);
    border: 1px solid #1e2f56;
    border-radius: 14px;
    padding: 0.9rem 0.95rem 0.8rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.demo-console {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.demo-play {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(180deg, #2f8fff, #1667c8);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(47, 143, 255, 0.4), 0 8px 22px -8px rgba(47, 143, 255, 0.7);
    transition: transform 0.12s ease, box-shadow 0.2s ease;
}

.demo-play:hover:not(:disabled) {
    transform: translateY(-1px);
}

.demo-play:active:not(:disabled) {
    transform: scale(0.97);
}

.demo-play:focus-visible {
    outline: 2px solid #bcd8ff;
    outline-offset: 3px;
}

.demo-play:disabled {
    background: #24324f;
    color: #6f82a8;
    cursor: not-allowed;
    box-shadow: none;
}

.demo-icon {
    width: 18px;
    height: 18px;
}

.demo-icon-play {
    margin-left: 2px;
}

.demo-icon-pause {
    display: none;
}

.demo-player.is-playing .demo-icon-play {
    display: none;
}

.demo-player.is-playing .demo-icon-pause {
    display: block;
}

.demo-wave {
    flex: 1;
    min-width: 0;
    height: 52px;
    display: block;
}

.demo-track {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.demo-progress {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 5px;
    border-radius: var(--radius-pill);
    background: #1a2748;
    cursor: pointer;
    overflow: hidden;
}

.demo-progress:focus-visible {
    outline: 2px solid #2f8fff;
    outline-offset: 3px;
}

.demo-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2f8fff, #38e0c8);
    border-radius: var(--radius-pill);
}

.demo-time {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: #8ea3c4;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Live transcript feed ────────────────────────────────────────────── */
.demo-transcript {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.6rem 0.35rem 0.2rem;
    margin-top: 0.1rem;
    border-top: 1px solid #182645;
    scrollbar-width: thin;
    scrollbar-color: #2a3c66 transparent;
}

.demo-transcript:empty {
    display: none;
}

.demo-transcript-hint {
    margin: 0;
    padding: 0.35rem 0;
    font-size: 0.8rem;
    color: #5f739b;
    text-align: center;
}

.demo-transcript::-webkit-scrollbar {
    width: 6px;
}

.demo-transcript::-webkit-scrollbar-thumb {
    background: #2a3c66;
    border-radius: 3px;
}

.demo-turn {
    display: none;
    gap: 0.5rem;
    max-width: 92%;
}

.demo-turn.is-in {
    display: flex;
    animation: demo-rise 0.4s ease both;
}

@keyframes demo-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.demo-turn.agent {
    align-self: flex-start;
}

.demo-turn.caller {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.demo-turn-tag {
    flex-shrink: 0;
    margin-top: 0.85rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #5f739b;
}

.demo-bubble {
    padding: 0.5rem 0.7rem;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.demo-turn.agent .demo-bubble {
    background: rgba(47, 143, 255, 0.12);
    border: 1px solid rgba(47, 143, 255, 0.28);
    border-top-left-radius: 4px;
    color: #dbe8ff;
}

.demo-turn.caller .demo-bubble {
    background: #141c30;
    border: 1px solid #24324f;
    border-top-right-radius: 4px;
    color: #c7d2e6;
}

.demo-turn.is-active .demo-bubble {
    box-shadow: 0 0 0 1px #38e0c8, 0 0 20px -6px rgba(56, 224, 200, 0.5);
}

.demo-tool {
    align-self: center;
    display: none;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: #a9f5d6;
    background: #0d2a22;
    border: 1px solid #1c5442;
    border-radius: var(--radius-pill);
    padding: 0.32rem 0.7rem;
}

.demo-tool.is-in {
    display: inline-flex;
    animation: demo-rise 0.35s ease both;
}

.demo-tool-spin {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid rgba(169, 245, 214, 0.3);
    border-top-color: #a9f5d6;
    animation: demo-spin 0.7s linear infinite;
    flex-shrink: 0;
}

.demo-tool.is-done .demo-tool-spin {
    display: none;
}

.demo-tool-check {
    display: none;
    color: #39d98a;
}

.demo-tool.is-done .demo-tool-check {
    display: inline;
}

.demo-tool.is-done {
    color: #7ff0c4;
}

.demo-tool b {
    font-weight: 600;
    color: #d6fff0;
}

@keyframes demo-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Missing-recording state ─────────────────────────────────────────── */
.demo-player.is-unavailable .demo-console,
.demo-player.is-unavailable .demo-track,
.demo-player.is-unavailable .demo-transcript {
    display: none;
}

.demo-player.is-unavailable .demo-unavailable {
    display: block;
}

.demo-player.is-unavailable {
    opacity: 0.85;
}

.demo-unavailable {
    margin: 0;
    font-size: 0.85rem;
    color: #8ea3c4;
}

@media (prefers-reduced-motion: reduce) {
    .demo-turn.is-in,
    .demo-tool.is-in {
        animation: none;
    }
    .demo-tool-spin {
        animation: none;
    }
}

/* ── Placeholder "coming soon" call CTA (retained; unused now all 4 cards
   have a live number, but harmless if a future card ships without one) ─── */
.btn-call-agent.is-soon {
    cursor: default;
    opacity: 0.55;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-call-agent.is-soon:hover {
    background: #ffffff;
    color: var(--text-primary);
    box-shadow: none;
}