/* ════════════════════════════════════════════════════════════════
   Podcast Dock — tenant-themed "Now Playing" surface.
   Bottom-left (chat widget owns bottom-right).
   Uses CSS custom props --pc-brand / --pc-accent set inline from
   ViewData, so every tenant ships its own palette with zero new CSS.
   ════════════════════════════════════════════════════════════════ */

.pc-dock {
    --pc-ink: #0b1220;
    --pc-paper: #ffffff;
    --pc-mist: rgba(15, 23, 42, 0.06);
    --pc-shadow: 0 18px 48px rgba(2, 6, 23, 0.22), 0 4px 12px rgba(2, 6, 23, 0.08);
    --pc-radius: 16px;
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 9500;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--pc-ink);
    max-width: calc(100vw - 48px);
}

.pc-dock[hidden],
.pc-dock.is-dismissed { display: none; }

/* ─── State-based visibility ────────────────────────────────────
   States:
     idle       -> pill (default surface)
     loading    -> card (loading next track)
     playing    -> card (transport visible)
     paused     -> card
     chip       -> chip (minimised; user explicitly hid the pill/card)
   The chip is a 44 x 44 circular icon that always offers a way back —
   no surface is ever "lost" from the user's view.
   ──────────────────────────────────────────────────────────────── */
.pc-dock-pill { display: none; }
.pc-dock-card { display: none; }
.pc-dock-chip { display: none; }

.pc-dock[data-state="idle"]    .pc-dock-pill { display: flex; }
.pc-dock[data-state="loading"] .pc-dock-card { display: block; }
.pc-dock[data-state="playing"] .pc-dock-card { display: block; }
.pc-dock[data-state="paused"]  .pc-dock-card { display: block; }
.pc-dock[data-state="chip"]    .pc-dock-chip { display: inline-flex; }

.pc-dock-pill {
    /* display is controlled by the state-visibility cascade above —
       must NOT be redeclared here, otherwise it overrides the hide rule
       and the pill renders simultaneously with card/chip. */
    width: 384px;
    max-width: calc(100vw - 48px);
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 12px;
    background: var(--pc-paper);
    border-radius: 999px;
    box-shadow: var(--pc-shadow);
    border: 1px solid rgba(15, 23, 42, 0.08);
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms;
    backdrop-filter: blur(8px);
}

.pc-dock-pill:hover { transform: translateY(-1px); box-shadow: 0 22px 52px rgba(2, 6, 23, 0.26), 0 6px 14px rgba(2, 6, 23, 0.1); }

.pc-dock-pill-art {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pc-brand), color-mix(in srgb, var(--pc-brand) 70%, #000));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(2, 6, 23, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    overflow: hidden;
}
.pc-dock-pill-art {
    position: relative;
}
.pc-dock-pill-art img[data-pc-pill-logo] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.92;
}
/* Cover sits ON TOP of the logo when present, edge-to-edge inside the
   rounded square. Logo stays as a graceful fallback while the cover loads. */
.pc-dock-pill-art img[data-pc-pill-cover] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}
.pc-dock-pill-art img[data-pc-pill-cover][hidden] { display: none; }
.pc-dock-pill-art img[data-pc-pill-cover]:not([hidden]) ~ img[data-pc-pill-logo] {
    visibility: hidden;
}

.pc-dock-pill-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-dock-pill-eyebrow {
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: color-mix(in srgb, var(--pc-brand) 75%, #475569);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-dock-pill-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pc-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.pc-dock-btn {
    appearance: none;
    border: none;
    background: var(--pc-mist);
    color: var(--pc-ink);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 140ms, background-color 140ms, color 140ms;
    position: relative;
    flex-shrink: 0;
}
.pc-dock-btn svg { width: 18px; height: 18px; fill: currentColor; }
.pc-dock-btn:hover:not(:disabled) { background: rgba(15, 23, 42, 0.1); }
.pc-dock-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pc-dock-btn:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 3px; }

.pc-dock-btn-primary {
    background: var(--pc-accent);
    color: #fff;
    width: 44px; height: 44px;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--pc-accent) 55%, transparent);
    position: relative;
}
.pc-dock-btn-primary::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc-accent) 55%, transparent);
    animation: pc-dock-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
.pc-dock-btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--pc-accent) 85%, #000); }
.pc-dock-btn-primary .pc-dock-ico-pause { display: none; }
.pc-dock[data-state="playing"] .pc-dock-btn-primary .pc-dock-ico-play { display: none; }
.pc-dock[data-state="playing"] .pc-dock-btn-primary .pc-dock-ico-pause { display: block; }

@keyframes pc-dock-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc-accent) 55%, transparent); }
    70%  { box-shadow: 0 0 0 14px color-mix(in srgb, var(--pc-accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc-accent) 0%, transparent); }
}

.pc-dock-btn-num {
    position: absolute;
    right: 4px; bottom: 3px;
    font-size: 8px;
    font-weight: 700;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    color: currentColor;
    opacity: 0.72;
    pointer-events: none;
}

.pc-dock-pill-play { width: 40px; height: 40px; }
.pc-dock-pill-play svg { width: 18px; height: 18px; }

.pc-dock-pill-link {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--pc-ink);
    border-radius: 50%;
    transition: background-color 140ms;
    flex-shrink: 0;
    text-decoration: none;
}
.pc-dock-pill-link svg { width: 17px; height: 17px; fill: currentColor; opacity: 0.7; }
.pc-dock-pill-link:hover { background: var(--pc-mist); }
.pc-dock-pill-link:hover svg { opacity: 1; }

.pc-dock-close {
    appearance: none; background: transparent; border: none;
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #94a3b8; cursor: pointer; flex-shrink: 0;
    transition: background-color 140ms, color 140ms;
}
.pc-dock-close svg { width: 14px; height: 14px; fill: currentColor; }
.pc-dock-close:hover { background: var(--pc-mist); color: var(--pc-ink); }

/* ─── Expanded card ─────────────────────────────────────────── */
.pc-dock-card {
    width: 456px;
    max-width: calc(100vw - 48px);
    padding: 16px 18px 14px;
    background: var(--pc-paper);
    border-radius: var(--pc-radius);
    box-shadow: var(--pc-shadow);
    border: 1px solid rgba(15, 23, 42, 0.08);
    animation: pc-dock-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pc-dock-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pc-dock-card-head {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.pc-dock-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
    color: color-mix(in srgb, var(--pc-accent) 85%, #000);
}
.pc-dock-pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--pc-accent);
    box-shadow: 0 0 0 0 var(--pc-accent);
    animation: pc-dock-ping 1.6s ease-out infinite;
}
@keyframes pc-dock-ping {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc-accent) 70%, transparent); }
    70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--pc-accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc-accent) 0%, transparent); }
}
.pc-dock-browse {
    margin-left: auto;
    font-size: 11.5px; font-weight: 600;
    color: var(--pc-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 140ms, color 140ms;
    white-space: nowrap;
}
.pc-dock-browse:hover { border-bottom-color: var(--pc-accent); color: color-mix(in srgb, var(--pc-accent) 85%, #000); }
.pc-dock-collapse {
    appearance: none; background: transparent; border: none;
    width: 26px; height: 26px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #64748b; cursor: pointer;
    transition: background-color 140ms, color 140ms;
}
.pc-dock-collapse svg { width: 16px; height: 16px; fill: currentColor; }
.pc-dock-collapse:hover { background: var(--pc-mist); color: var(--pc-ink); }

.pc-dock-card-body {
    display: flex; gap: 14px; margin-bottom: 14px;
}
.pc-dock-art {
    width: 64px; height: 64px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--pc-brand), color-mix(in srgb, var(--pc-brand) 60%, #000));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px rgba(2, 6, 23, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    overflow: hidden; text-decoration: none;
}
/* Same pattern as the pill: cover img sits ABSOLUTELY on top of the
   gradient + microphone SVG, edge-to-edge inside the rounded 64x64 square.
   When the cover paints, the SVG fallback hides via the sibling rule.
   `position: relative` on the inner span establishes the containing block. */
.pc-dock-art-inner { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pc-dock-art-inner svg[data-pc-art-fallback] { width: 28px; height: 28px; fill: rgba(255, 255, 255, 0.9); }
.pc-dock-art-inner img[data-pc-art-img] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}
.pc-dock-art-inner img[data-pc-art-img][hidden] { display: none; }
.pc-dock-art-inner img[data-pc-art-img]:not([hidden]) ~ svg[data-pc-art-fallback] { visibility: hidden; }
.pc-dock-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pc-dock-eyebrow {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--pc-brand);
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 140ms;
}
.pc-dock-eyebrow:hover { color: var(--pc-accent); }
.pc-dock-title {
    font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3;
    color: var(--pc-ink); text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color 140ms;
}
.pc-dock-title:hover { color: var(--pc-accent); }
.pc-dock-byline { font-size: 11.5px; color: #64748b; font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pc-dock-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; }

.pc-dock-seek {
    position: relative;
    height: 6px; border-radius: 999px;
    background: rgba(15, 23, 42, 0.09);
    cursor: pointer; overflow: visible;
    transition: height 140ms;
    margin-bottom: 10px;
}
.pc-dock-seek:hover { height: 8px; }
.pc-dock-seek-fill {
    position: absolute; inset: 0 auto 0 0;
    width: 0%;
    background: linear-gradient(90deg, var(--pc-brand), var(--pc-accent));
    border-radius: 999px;
}
.pc-dock-seek-thumb {
    position: absolute; top: 50%;
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.25), 0 0 0 2px var(--pc-accent);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 140ms;
    pointer-events: none;
    left: 0;
}
.pc-dock-seek:hover .pc-dock-seek-thumb,
.pc-dock-seek:focus-visible .pc-dock-seek-thumb,
.pc-dock-seek[data-pc-scrubbing="1"] .pc-dock-seek-thumb { transform: translate(-50%, -50%) scale(1); }
.pc-dock-seek[data-pc-scrubbing="1"] { height: 9px; }
.pc-dock-seek[aria-disabled="true"] { cursor: progress; opacity: 0.65; }
.pc-dock-seek[aria-disabled="true"] .pc-dock-seek-thumb { display: none; }

.pc-dock-foot {
    display: flex; align-items: center; gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.pc-dock-time {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: #475569;
    flex-shrink: 0;
}
.pc-dock-speed {
    appearance: none;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: var(--pc-paper);
    color: var(--pc-ink);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 11px; font-weight: 600;
    cursor: pointer;
    outline: none;
}
.pc-dock-speed:hover { border-color: var(--pc-accent); }

.pc-dock-cta {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 2px;
    padding: 7px 12px;
    background: var(--pc-accent);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: -0.005em;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--pc-accent) 35%, transparent);
    transition: transform 140ms, box-shadow 140ms, background-color 140ms;
}
.pc-dock-cta:hover {
    background: color-mix(in srgb, var(--pc-accent) 85%, #000);
    transform: translateY(-1px);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--pc-accent) 40%, transparent);
}
.pc-dock-cta svg { width: 12px; height: 12px; fill: currentColor; }

.pc-dock-live {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── Dark-mode awareness (if tenant palette is dark) ──────────── */
@media (prefers-color-scheme: dark) {
    .pc-dock {
        --pc-ink: #f8fafc;
        --pc-paper: #0b1220;
        --pc-mist: rgba(248, 250, 252, 0.08);
    }
    .pc-dock-pill, .pc-dock-card { border-color: rgba(248, 250, 252, 0.08); }
    .pc-dock-pill-title { color: #f8fafc; }
    .pc-dock-time { color: #cbd5e1; }
    .pc-dock-byline { color: #94a3b8; }
    .pc-dock-speed { background: #0b1220; color: #f8fafc; border-color: rgba(248, 250, 252, 0.18); }
}

/* ─── Motion preferences ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pc-dock-btn-primary::after,
    .pc-dock-pulse { animation: none; }
    .pc-dock-card { animation: none; }
}

/* ─── Chip (minimised) ────────────────────────────────────────
   Tiny circular surface that lets the user re-open the player
   from any visitor-facing page without ever losing access to it.
   ──────────────────────────────────────────────────────────── */
.pc-dock-chip {
    /* display is controlled by the state-visibility cascade above —
       must NOT be redeclared here. */
    appearance: none; border: none; cursor: pointer;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pc-brand), color-mix(in srgb, var(--pc-brand) 60%, #000));
    color: #fff;
    align-items: center; justify-content: center;
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.28), 0 2px 6px rgba(2, 6, 23, 0.12);
    position: relative;
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms;
    animation: pc-dock-chip-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-dock-chip:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 16px 36px rgba(2, 6, 23, 0.34), 0 4px 10px rgba(2, 6, 23, 0.16);
}
.pc-dock-chip:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 4px; }
.pc-dock-chip svg { width: 22px; height: 22px; fill: currentColor; opacity: 0.95; position: relative; z-index: 1; }

.pc-dock-chip-pulse {
    position: absolute; inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--pc-accent);
    opacity: 0;
    animation: pc-dock-chip-ping 2.6s ease-out infinite;
    pointer-events: none;
}
@keyframes pc-dock-chip-in {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes pc-dock-chip-ping {
    0%   { opacity: 0.55; transform: scale(0.85); }
    70%  { opacity: 0;    transform: scale(1.4); }
    100% { opacity: 0;    transform: scale(1.4); }
}

/* ─── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .pc-dock { left: 12px; right: 80px; bottom: 12px; }
    .pc-dock-pill { width: auto; max-width: none; }
    .pc-dock-card { width: auto; max-width: none; }
    .pc-dock-pill-link { display: none; }
    .pc-dock-cta span { display: none; }
    .pc-dock[data-state="chip"] { right: auto; }
    .pc-dock-chip { width: 44px; height: 44px; }
    .pc-dock-chip svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .pc-dock-chip-pulse { animation: none; }
    .pc-dock-chip { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   Synced transcript strip (YouTube-style auto-captions)
   ────────────────────────────────────────────────────────────────
   Lives inside .pc-dock-card, beneath the meta block. Premium glass
   surface so it reads on every tenant brand colour: deep navy frost
   with a saturated tenant-accent underline that fills as each
   sentence plays. Hidden by default until the JS module has cues.
   ════════════════════════════════════════════════════════════════ */
.pc-dock-caption {
    position: relative;
    margin: 10px 18px 0;
    padding: 6px 0 10px;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    overflow: hidden;
    color: var(--pc-ink);
}

.pc-dock-caption[hidden] { display: none; }

/* The active sentence. Source Serif Pro is already loaded by the podcast
   hub head partial — we lean on it here for editorial weight without
   shipping another font. Falls back to the system serif stack so the
   strip never renders unstyled even if the page didn't preload Source
   Serif Pro. */
.pc-dock-caption-line {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: inherit;
    font-size: 10px;
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: 0;
    color: color-mix(in srgb, var(--pc-ink) 70%, transparent);
    word-break: break-word;
    min-height: 1.55em;
}

/* Each new sentence rises in with a soft fade-up. Re-triggered from the
   JS by toggling the `is-fresh` class. */
.pc-dock-caption-line.is-fresh {
    animation: pc-cap-rise 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes pc-cap-rise {
    0%   { opacity: 0;   transform: translateY(6px); filter: blur(2px); }
    60%  { opacity: 0.9;                           filter: blur(0); }
    100% { opacity: 1;   transform: translateY(0);   filter: blur(0); }
}

/* Per-sentence progress underline. Sits flush at the bottom edge of the
   card, bleeding into the curvature so it reads like a single-piece
   instrument rather than a separate widget. */
.pc-dock-caption-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1.5px;
    width: 0%;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--pc-accent) 60%, transparent),
        var(--pc-accent));
    border-radius: 1px;
    transition: width 220ms linear;
}

/* CC toggle button — same chrome as the other transport buttons but
   with a tenant-accent fill when captions are ON, mirroring how
   YouTube paints its CC button. */
.pc-dock-btn-cc { position: relative; }
.pc-dock-btn-cc.is-on {
    background: color-mix(in srgb, var(--pc-accent) 14%, transparent);
    color: var(--pc-accent);
}
.pc-dock-btn-cc.is-on::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--pc-accent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--pc-accent) 70%, transparent);
}

/* Mobile — tighter padding, smaller serif, two-line clamp so the strip
   never crowds the controls. */
@media (max-width: 640px) {
    .pc-dock-caption {
        margin: 12px 14px 0;
        padding: 10px 14px 12px;
    }
    .pc-dock-caption-line {
        font-size: 9.5px;
        line-height: 1.5;
        -webkit-line-clamp: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pc-dock-caption-line.is-fresh { animation: none; }
    .pc-dock-caption-progress { transition: none; }
}