/* Agent3d experiment — styles layered on agent.css.
   The left .agent-visual pane hosts a TalkingHead WebGL canvas instead of a
   Simli <video>. Make the mount fill the pane so TalkingHead sizes its renderer
   to the full area; the brand gradient from .agent-visual shows through behind
   the transparent 3D scene. */
.agent-visual-3d {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.agent-visual-3d canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Waiting-room count on the queue twin-card. The card reuses the shared .agent-lobby-*
   classes; only the live position count is bespoke — a prominent brand-green number. */
.agent-queue-count {
    margin: 2px 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--brand, #004225);
}

/* Session time-limit heads-up. Floats over the 3D render area (its parent .agent-visual is
   position:relative): horizontally centred, 1/4 up from the bottom, above the WebGL canvas
   (z-index 1) and the name chip (z-index 2). Hidden until the agent's countdown signals
   arrive; escalates colour 60 → 30 → 10. */
.agent-time-notice {
    position: absolute;
    left: 50%;
    bottom: 25%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 14.5px; /* match the chat-history message text (.agent-msg-bubble) */
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    pointer-events: none; /* purely informational — don't block camera-orbit drags on the canvas */
}

.agent-time-notice svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.agent-time-notice.is-info   { background: var(--success-bg); color: var(--success); }
.agent-time-notice.is-warn   { background: var(--warning-bg); color: var(--warning); }
.agent-time-notice.is-urgent { background: var(--danger-bg);  color: var(--danger); }

/* The longest string ("About 1 minute left in this session.") is wider than the pane on a
   ≤360px phone, and `white-space: nowrap` above makes it overflow rather than wrap. Allow
   wrapping and cap the width on narrow screens. `bottom` is deliberately NOT changed — the
   pill stays exactly where it sits today. */
@media (max-width: 860px) {
    .agent-time-notice {
        white-space: normal;
        max-width: min(88%, 320px);
        text-align: center;
        font-size: 13px;
    }
}

/* ---------- Bot protection: reCAPTCHA v2 checkbox on the lobby card ---------- */
/* grecaptcha.render() injects a <div> holding a fixed 304x78 iframe into #agent-captcha.
   The lobby card (.agent-lobby-card, max-width 440px, 28px side padding) leaves ~384px of
   content width, so the widget fits on desktop but overflows a narrow phone. Scale the
   injected child (not the mount, so flex centering survives) and shrink the reserved height
   to match so no gap opens under it. */
.agent-captcha {
    display: flex;
    justify-content: center;
    min-height: 78px;
    margin-top: 4px;
}

@media (max-width: 400px) {
    .agent-captcha { min-height: 66px; }
    .agent-captcha > div { transform: scale(0.85); transform-origin: center top; }
}

@media (max-width: 350px) {
    .agent-captcha { min-height: 56px; }
    .agent-captcha > div { transform: scale(0.72); transform-origin: center top; }
}

/* ---------- Microphone recovery instructions on the lobby card ---------- */
/* Pairs with the one-line #agent-lobby-error above it: that one is red and says what broke,
   this is a calm amber block carrying the fix. Left-aligned and full-width inside the otherwise
   centre-aligned .agent-lobby-card (same idea as .agent-lobby-meta, block rather than pill),
   because an OS settings path reads badly ragged-centred over three lines. */
.agent-mic-help {
    display: flex;
    align-self: stretch;
    gap: 10px;
    text-align: left;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fg2);
    background: var(--warning-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    padding: 10px 12px;
}

.agent-mic-help i,
.agent-mic-help svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--warning);
}

/* MUST be restated. The rule above is an author `display: flex`, and ANY author display
   declaration beats the UA stylesheet's `[hidden] { display: none }` — so the panel would render
   even while hidden. (#agent-lobby-error escapes this only because .field-error sets no display.) */
.agent-mic-help[hidden] { display: none; }

/* The extra panel can push the lobby card past the viewport. .agent-body is height:100vh /
   overflow:hidden above 860px and .agent-lobby centres its child with align-items:center — and a
   centred flex child that overflows is clipped at BOTH ends, leaving the top unreachable. Auto
   block margins centre the card when there is room and clamp it to the top when there is not.
   Scoped to #agent-lobby so the queue twin card is untouched. */
#agent-lobby {
    overflow-y: auto;
    align-items: flex-start;
}

#agent-lobby > .agent-lobby-card { margin-block: auto; }