/* ─── Ask Pepper — AI Chief-of-Staff chat section ─────────────────────────────
   Scoped under #ask-pepper / .ask-pepper. Reuses the global design tokens from
   style.css (--cta-primary, --bg-off-black, --radius-*, --space-*, fonts) and the
   standby/talking video-avatar crossfade pattern used by the boardroom slider. */

.ask-pepper {
    position: relative;
    padding: var(--space-4xl) 0;
    overflow: hidden;
    background: var(--bg-ink);
}

/* soft brand glow behind the avatar, echoing the hero radial */
.ask-pepper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 760px;
    max-width: 120%;
    height: 420px;
    background: radial-gradient(circle, rgba(126, 123, 255, 0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.ask-pepper .container {
    position: relative;
    z-index: 1;
    max-width: 820px;
}

/* ── Intro (avatar + headline + sub) ───────────────────────────────────────── */
.ask-pepper-intro {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.ask-pepper-avatar {
    position: relative;
    width: 112px;
    height: 112px;
    margin: 0 auto var(--space-lg);
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(126, 123, 255, 0.4);
    box-shadow: 0 8px 32px rgba(126, 123, 255, 0.25);
    background: var(--bg-off-black);
}

.ask-pepper-avatar .video-container {
    position: absolute;
    inset: 0;
}

.ask-pepper-avatar .av-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}

.ask-pepper-avatar .video-standby {
    z-index: 1;
    opacity: 1;
}

.ask-pepper-avatar .video-talking {
    z-index: 2;
    opacity: 0;
}

/* while Pepper is streaming, .is-speaking crossfades to the talking loop */
.ask-pepper-avatar.is-speaking .video-talking {
    opacity: 1;
}

/* live status dot */
.ask-pepper-status {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--success);
    border: 3px solid var(--bg-ink);
    z-index: 3;
}

.ask-pepper-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(36px, 6vw, 64px);
    line-height: 1.05;
    margin-bottom: var(--space-md);
}

.ask-pepper-sub {
    color: var(--text-faded);
    font-size: 18px;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto;
}

/* ── Input pill ────────────────────────────────────────────────────────────── */
.ask-pepper-form {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    max-width: 620px;
    margin: 0 auto;
    padding: 8px 8px 8px 22px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.ask-pepper-form:focus-within {
    border-color: rgba(126, 123, 255, 0.6);
    box-shadow: 0 0 0 4px rgba(126, 123, 255, 0.12);
}

.ask-pepper-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-snow);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.45;
    padding: 12px 0;
    /* multi-line textarea: auto-grows in JS, caps + scrolls here */
    display: block;
    resize: none;
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.ask-pepper-input::-webkit-scrollbar { width: 8px; }
.ask-pepper-input::-webkit-scrollbar-track { background: transparent; }
.ask-pepper-input::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.ask-pepper-input::placeholder {
    color: var(--text-faded);
}

.ask-pepper-send {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: var(--cta-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, transform 0.25s ease;
}

.ask-pepper-send:hover {
    background: var(--cta-hover);
    transform: translateY(-1px);
}

.ask-pepper-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.ask-pepper-send svg {
    width: 20px;
    height: 20px;
}

/* ── Suggestion chips ──────────────────────────────────────────────────────── */
.ask-pepper-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.ask-pepper-chip {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--cta-primary);
    background: rgba(126, 123, 255, 0.1);
    border: 1px solid rgba(126, 123, 255, 0.3);
    border-radius: 100px;
    padding: 10px 18px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ask-pepper-chip:hover {
    background: rgba(126, 123, 255, 0.2);
    border-color: rgba(126, 123, 255, 0.6);
    transform: translateY(-1px);
}

/* ── Capped state (daily budget reached) ───────────────────────────────────── */
.ask-pepper-capped {
    max-width: 560px;
    margin: var(--space-xl) auto 0;
    text-align: center;
}

.ask-pepper-capped[hidden] { display: none; }

.ask-pepper-capped-msg {
    color: var(--text-faded);
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.ask-pepper-capped-cta {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Chat thread ───────────────────────────────────────────────────────────── */
.ask-pepper-thread {
    margin-top: var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.ask-pepper-thread[hidden] {
    display: none;
}

.message-row {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.message-row.user {
    justify-content: flex-end;
}

.message-row .chat-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(126, 123, 255, 0.4);
}

.message {
    max-width: 88%;
    border-radius: var(--radius-card);
    padding: 16px 20px;
    font-size: 16px;
    line-height: 1.6;
}

.message-user {
    background: var(--cta-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.message-assistant {
    background: var(--bg-off-black);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-snow);
    border-bottom-left-radius: 4px;
    flex: 1;
    min-width: 0;
}

.message-system {
    background: transparent;
    color: var(--text-faded);
    font-size: 14px;
    text-align: center;
    width: 100%;
    max-width: 100%;
}

/* Markdown prose inside an assistant message */
.pepper-prose > *:first-child { margin-top: 0; }
.pepper-prose > *:last-child { margin-bottom: 0; }
.pepper-prose p { margin: 0 0 12px; }
.pepper-prose ul,
.pepper-prose ol { margin: 0 0 12px; padding-left: 22px; }
.pepper-prose li { margin-bottom: 6px; }
.pepper-prose strong { color: #fff; font-weight: 600; }
.pepper-prose a { color: var(--cta-primary); text-decoration: underline; }
.pepper-prose code {
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 14px;
}

/* the streaming tail placeholder (incomplete directive held back) */
.pepper-pending {
    display: inline-block;
    color: var(--text-faded);
    animation: pepperBlink 1.2s ease-in-out infinite;
}

@keyframes pepperBlink {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.7; }
}

/* typing indicator */
.typing-indicator {
    display: inline-flex;
    gap: 5px;
    padding: 4px 2px;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-faded);
    animation: pepperTyping 1.2s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }

@keyframes pepperTyping {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* ── Artifact cards ────────────────────────────────────────────────────────── */
.pepper-artifact {
    margin: 14px 0 4px;
}

.pp-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: var(--space-lg);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.pp-card:hover {
    border-color: rgba(126, 123, 255, 0.4);
    transform: translateY(-2px);
}

.pp-card-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cta-primary);
    margin-bottom: 8px;
}

.pp-card-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px;
}

.pp-card-summary {
    font-size: 15px;
    color: var(--text-faded);
    line-height: 1.55;
    margin: 0 0 var(--space-md);
}

/* case-study metric row */
.pp-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin: 0 0 var(--space-md);
}

.pp-metric-value {
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 700;
    color: var(--cta-primary);
    line-height: 1.1;
}

.pp-metric-label {
    font-size: 12px;
    color: var(--text-faded);
    margin-top: 2px;
}

.pp-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cta-primary);
    text-decoration: none;
}

.pp-card-cta:hover { color: var(--cta-hover); }
.pp-card-cta::after { content: "→"; transition: transform 0.2s ease; }
.pp-card-cta:hover::after { transform: translateX(3px); }

/* product/profile compact card with thumb */
.pp-card-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.pp-card-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
    background: var(--bg-off-black);
}

.pp-card-row .pp-card-body { flex: 1; min-width: 0; }
.pp-card-row .pp-card-title { font-size: 17px; margin-bottom: 4px; }
.pp-card-row .pp-card-summary { margin-bottom: 8px; font-size: 14px; }

/* ── Calculator artifact ───────────────────────────────────────────────────── */
.pp-calc .pp-calc-controls {
    display: grid;
    gap: var(--space-md);
    margin: var(--space-md) 0;
}

.pp-calc-field label {
    display: block;
    font-size: 13px;
    color: var(--text-faded);
    margin-bottom: 6px;
}

.pp-calc-field .pp-calc-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.pp-calc-field input[type="range"] {
    flex: 1;
    accent-color: var(--cta-primary);
}

.pp-calc-field .pp-calc-num {
    flex: 0 0 auto;
    min-width: 92px;
    text-align: right;
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.pp-calc-result {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.pp-calc-headline {
    font-family: var(--font-head);
    font-size: 40px;
    font-weight: 700;
    color: var(--cta-primary);
    line-height: 1.05;
}

.pp-calc-headline-label {
    font-size: 13px;
    color: var(--text-faded);
    margin-top: 4px;
}

.pp-calc-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.pp-calc-step-value { font-size: 18px; font-weight: 600; color: #fff; }
.pp-calc-step-label { font-size: 11px; color: var(--text-faded); }

.pp-disclaimer {
    font-size: 11px;
    font-style: italic;
    color: var(--text-faded);
    opacity: 0.8;
    margin-top: var(--space-md);
    line-height: 1.3;
}

.pp-calc .pp-card-cta { margin-top: var(--space-md); }

/* ── Full-screen chat mode ────────────────────────────────────────────────────
   Activated by JS (.is-fullscreen on the section) after the first message. The
   section becomes a fixed overlay: header (intro) + scrolling bubbles on top, the
   composer (input) pinned to the bottom, plus a close control. */
.ask-pepper-close {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 10000;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 12px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-snow);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.ask-pepper-close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}

.ask-pepper-close svg {
    width: 16px;
    height: 16px;
}

.ask-pepper.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 0;
    background: var(--bg-ink);
    display: flex;
    flex-direction: column;
    animation: askPepperFsIn 0.28s ease both;
}

/* keep a subtle glow at the top of the overlay */
.ask-pepper.is-fullscreen::before {
    height: 280px;
    opacity: 0.6;
}

.ask-pepper.is-fullscreen .ask-pepper-close {
    display: inline-flex;
}

/* The container is now full-width and is itself the flex column, so the scroll
   area can span the whole viewport (scrollbar hugs the far-right edge). Chat
   content is re-centred on the inner elements. */
.ask-pepper.is-fullscreen .container {
    max-width: none;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ask-pepper.is-fullscreen .ask-pepper-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 76px 0 12px;
    /* slim, subtle scrollbar at the far-right of the screen (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* slim, subtle scrollbar (WebKit/Chromium) — 4px visible thumb, transparent track */
.ask-pepper.is-fullscreen .ask-pepper-scroll::-webkit-scrollbar { width: 10px; }
.ask-pepper.is-fullscreen .ask-pepper-scroll::-webkit-scrollbar-track { background: transparent; }
.ask-pepper.is-fullscreen .ask-pepper-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
.ask-pepper.is-fullscreen .ask-pepper-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
    background-clip: padding-box;
}

/* re-centre the chat content within the full-width scroll area + composer */
.ask-pepper.is-fullscreen .ask-pepper-intro,
.ask-pepper.is-fullscreen .ask-pepper-thread {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

/* compact header in full-screen */
.ask-pepper.is-fullscreen .ask-pepper-intro { margin-bottom: var(--space-xl); }
.ask-pepper.is-fullscreen .ask-pepper-avatar { width: 84px; height: 84px; }
.ask-pepper.is-fullscreen .ask-pepper-title { font-size: clamp(28px, 4.5vw, 44px); margin-bottom: 10px; }
.ask-pepper.is-fullscreen .ask-pepper-sub { font-size: 16px; }
.ask-pepper.is-fullscreen .ask-pepper-thread { margin-top: 0; }

/* composer pinned to the bottom — full-width bar, input re-centred inside */
.ask-pepper.is-fullscreen .ask-pepper-composer {
    flex: 0 0 auto;
    padding: 12px var(--space-lg) calc(16px + env(safe-area-inset-bottom));
    background: var(--bg-ink);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ask-pepper.is-fullscreen .ask-pepper-chips { display: none; }

@keyframes askPepperFsIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* lock the page behind the overlay */
body.ask-pepper-open { overflow: hidden; }

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ask-pepper { padding: var(--space-3xl) 0; }
    .ask-pepper-sub { font-size: 16px; }
    .ask-pepper-form { margin-inline: 8px; }
    .message { max-width: 100%; font-size: 15px; }
    .message-row .chat-avatar { width: 30px; height: 30px; }
    .pp-metrics { gap: var(--space-md); }
    .pp-calc-headline { font-size: 32px; }

    /* full-screen mode on small screens */
    .ask-pepper.is-fullscreen .ask-pepper-intro,
    .ask-pepper.is-fullscreen .ask-pepper-thread { padding-left: var(--space-md); padding-right: var(--space-md); }
    .ask-pepper.is-fullscreen .ask-pepper-composer { padding-left: var(--space-md); padding-right: var(--space-md); }
    .ask-pepper.is-fullscreen .ask-pepper-scroll { padding-top: 60px; }
    .ask-pepper.is-fullscreen .ask-pepper-avatar { width: 64px; height: 64px; }
    .ask-pepper.is-fullscreen .ask-pepper-sub { font-size: 15px; }
    .ask-pepper.is-fullscreen .ask-pepper-form { margin-inline: 0; }
    .ask-pepper-close { top: 12px; right: 12px; padding: 8px 14px 8px 10px; }
}

/* ── Turnstile bot gate ──────────────────────────────────────────────────────
   Invisible for real visitors (interaction-only mode). Only takes space + shows a
   challenge when Cloudflare decides one is needed; centred under the input. */
.ask-pepper-turnstile { display: flex; justify-content: center; }
.ask-pepper-turnstile:empty { display: none; }
/* The managed widget is ~0-height while invisible, so the row collapses on its own;
   a visible challenge (rare) renders at Turnstile's own size, centred under the input. */

/* ── Mobile robustness: never let chat content overflow a narrow screen ─────── */
.pepper-prose,
.pp-card-title,
.pp-card-summary { overflow-wrap: anywhere; }
.pp-card { min-width: 0; }
.pp-calc-field input[type="range"] { min-width: 0; }

/* ── Reduced motion: freeze avatar to poster, kill shimmer/pulse ───────────── */
@media (prefers-reduced-motion: reduce) {
    .ask-pepper-avatar .av-video { display: none; }
    .ask-pepper-avatar { background-size: cover; background-position: center; }
    .pepper-pending,
    .typing-indicator span { animation: none; }
    .ask-pepper-chip:hover,
    .ask-pepper-send:hover,
    .pp-card:hover { transform: none; }
    .ask-pepper-avatar .card-video { transition: none; }
    .ask-pepper.is-fullscreen { animation: none; }
}