/* =============================================================
   ARNDLY LIVE — Public live-chat page (/Agent3d)
   Loaded by Views/Shared/_AgentLayout.cshtml; agent3d.css layers the 3D-specific
   rules on top. (Named for the retired Simli /agent page it was written for.)
   Builds on arndly-tokens.css + console.css so the page matches the
   admin console (forest green / orange, Sora / Hanken). Adds only the
   chat-specific layout: avatar stage, dual visualizers, transcript,
   and input row. Header-less, full-viewport.
   ============================================================= */

.agent-body {
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
    color: var(--fg1);
    font-family: var(--font-body);
}

/* ---------- Two-pane stage ---------- */
.agent-stage {
    display: grid;
    grid-template-columns: minmax(320px, 46%) 1fr;
    height: 100vh;
    width: 100%;
}

/* ---------- Left: avatar visual ---------- */
.agent-visual {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, var(--green-700), #06281a 80%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.agent-visual-face,
.agent-visual-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* video sits above the static face; hidden until a remote track is attached */
.agent-visual-video { display: none; background: #06281a; }
.agent-visual-video.is-live { display: block; }

.agent-visual-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 40% 32%, #ffe0bb, #ffa500 44%, #0a5a35 120%);
}

.agent-visual-placeholder .seed {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 140px;
    color: rgba(255, 255, 255, 0.94);
}

.agent-visual-name {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 2;
}

.agent-visual-name .chip {
    background: rgba(0, 25, 14, 0.5);
    color: #f4faf6;
    border-color: transparent;
    backdrop-filter: blur(6px);
}

.agent-visual-name .chip i { color: var(--orange-400); }

/* ---------- Right: panel ---------- */
.agent-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    padding: 22px 24px;
    gap: 16px;
    background: var(--bg);
    box-sizing: border-box;
}

/* Row 1 — dual visualizers + mic controls */
.agent-viz-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: 14px;
    flex: none;
}

.agent-viz-row .agent-mic-group { flex: none; align-self: center; }

.agent-viz {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elev);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.agent-viz-icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#viz-agent .agent-viz-icon { background: var(--green-50); color: var(--green-600); }
#viz-user .agent-viz-icon { background: var(--orange-100); color: var(--orange-700); }
.agent-viz-icon i { width: 18px; height: 18px; }

.agent-viz-canvas {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 40px;
    display: block;
}

/* Connection status banner */
.agent-status {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: none;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fg2);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: var(--neutral-100);
    border: 1px solid var(--border);
}

.agent-status.is-ready { background: var(--success-bg); color: var(--success); border-color: transparent; }
.agent-status.is-error { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.agent-status.is-hidden { display: none; }
.agent-status .spinner-border { width: 15px; height: 15px; border-width: 2px; }

/* Row 2 — transcript */
.agent-transcript {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elev);
    box-shadow: var(--shadow-sm);
}

.agent-transcript::-webkit-scrollbar { width: 10px; }
.agent-transcript::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: 999px;
    border: 3px solid var(--bg-elev);
}

.agent-msg { display: flex; flex-direction: column; max-width: 82%; }
.agent-msg .agent-msg-who {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--fg3);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.agent-msg .agent-msg-bubble {
    padding: 9px 13px;
    border-radius: var(--radius-md);
    font-size: 14.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.agent-msg.from-agent { align-self: flex-start; align-items: flex-start; }
.agent-msg.from-agent .agent-msg-bubble {
    background: var(--green-50);
    color: var(--fg1);
    border-bottom-left-radius: 4px;
}

.agent-msg.from-user { align-self: flex-end; align-items: flex-end; }
.agent-msg.from-user .agent-msg-bubble {
    background: var(--green-600);
    color: #f4faf6;
    border-bottom-right-radius: 4px;
}

.agent-msg.is-interim .agent-msg-bubble { opacity: 0.6; }

.agent-transcript-empty {
    margin: auto;
    text-align: center;
    color: var(--fg3);
    font-size: 13.5px;
}

/* Row 3 — input */
.agent-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.agent-input-row .arndly-input { flex: 1; min-width: 0; }
.agent-input-row .agent-send { flex: none; padding: 11px 16px; }
.agent-input-row .agent-send i { width: 18px; height: 18px; }

.agent-input-row .agent-end { flex: none; padding: 11px 16px; }
.agent-input-row .agent-end i { width: 17px; height: 17px; }

.agent-mic-group { flex: none; }
.agent-mic i { width: 18px; height: 18px; }
.agent-mic .mic-off { display: none; }
.agent-mic.is-muted { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.agent-mic.is-muted .mic-on { display: none; }
.agent-mic.is-muted .mic-off { display: inline-flex; }
.agent-mic-menu-item.active { color: var(--green-700); font-weight: 600; }

/* ---------- Lobby (shown before the chat starts) ---------- */
.agent-lobby {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.agent-lobby-card {
    max-width: 440px;
    width: 100%;
    text-align: center;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.agent-lobby-avatar {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 40% 32%, #ffe0bb, #ffa500 44%, #0a5a35 120%);
}

.agent-lobby-avatar img { width: 100%; height: 100%; object-fit: cover; }
.agent-lobby-avatar .seed { font-family: var(--font-display); font-weight: 700; font-size: 46px; color: rgba(255, 255, 255, 0.94); }
.agent-lobby-avatar.voice { background: linear-gradient(145deg, var(--green-500), var(--green-800)); }
.agent-lobby-avatar.voice i,
.agent-lobby-avatar.voice svg { width: 44px; height: 44px; color: #ffffff; stroke: #ffffff; }

.agent-lobby-title { font-size: 24px; font-weight: 700; margin: 4px 0 0; color: var(--fg1); }
.agent-lobby-text { font-size: 14.5px; line-height: 1.55; color: var(--fg2); margin: 0; }

/* Session-length heads-up chip on the lobby card. */
.agent-lobby-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--fg2);
    background: var(--surface2, rgba(0, 0, 0, .04));
    border-radius: 999px;
    padding: 8px 14px;
    text-align: left;
}
.agent-lobby-meta i { width: 16px; height: 16px; flex: 0 0 auto; color: var(--brand-green, currentColor); }

.agent-start-btn { margin-top: 6px; padding: 12px 22px; font-size: 16px; }
.agent-start-btn i { width: 18px; height: 18px; }

.agent-lobby-card .field-error { margin-top: 2px; }

/* ---------- Language picker (public lobby / queue / Unavailable) ----------
   Must be fixed: .agent-body is height:100vh; overflow:hidden and .agent-lobby is a
   full-height centred flex container, so nothing static can sit in a corner. z-index
   clears the page maximum of 3 (.agent-time-notice in agent3d.css).
   agent3d.js hides this once the chat stage opens — switching language is a page
   navigation, which mid-call would drop the LiveKit room. */
.agent-lang {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 20;
}

.agent-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 13.5px;
    background: var(--surface1, #ffffff);
    box-shadow: var(--shadow-1, 0 1px 3px rgba(0, 0, 0, .12));
}

.agent-lang-toggle i,
.agent-lang-toggle svg { width: 16px; height: 16px; flex: 0 0 auto; }

.agent-lang .dropdown-menu { min-width: 190px; }

@media (max-width: 480px) {
    .agent-lang { top: 10px; right: 10px; }
    /* Drop the language name on very narrow screens — the icon plus the menu carry it. */
    .agent-lang-toggle > span:not(.visually-hidden) { display: none; }
}

/* ---------- Centered single-message screen (Unavailable) ---------- */
.agent-message-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.agent-message-screen .empty-state { max-width: 460px; }

/* ---------- Responsive: stack on narrow screens ----------
   The stage is a strict one-viewport, non-scrolling shell: the transcript is the only
   scroller. This used to be `.agent-body { overflow: auto }` + `.agent-panel { min-height:
   62vh }`, which overflowed twice over — 38vh + 62vh = 100vh of content inside a 100dvh box
   (on iOS `vh` measures the viewport with the URL bar RETRACTED, `dvh` measures it as shown),
   and the 62vh floor overrode the `1fr` track so the transcript could never shrink. The input
   row and End button were pushed below the fold and needed a scroll to reach. */
@media (max-width: 860px) {
    .agent-body { overflow: hidden; height: 100dvh; }

    .agent-stage {
        grid-template-columns: 1fr;
        /* The avatar row keeps its CURRENT 38vh whenever there is room — deliberately `vh`,
           not `dvh`, so the 3D render area is the exact pixel height it has always been. The
           min() bites only on a landscape phone, where 38vh would leave the panel less than
           the ~260px it needs (viz row + input row + padding/gaps + ~2 message bubbles).
           minmax(0, …) on BOTH tracks: without it a track cannot shrink below its content and
           the panel overflows again.

           Do NOT drive these heights from visualViewport. Shrinking the shell when the iOS
           keyboard opens moves the content up while iOS is panning down to find the focused
           input; the panned window then lands below the shortened body and the guest sees a
           blank white page while typing (shipped once, reverted). A constant 100dvh keeps the
           body spanning the whole layout viewport, so iOS pans within real content instead —
           the avatar scrolls off the top and the input row rides above the keyboard. */
        grid-template-rows:
            minmax(0, min(38vh, 100dvh - 260px))
            minmax(0, 1fr);
        height: 100dvh;
    }

    /* height:100% (not auto) gives the flex column a DEFINITE height — that is what lets
       .agent-transcript's flex:1 + min-height:0 actually shrink. min-height:0 clears the
       base rule and the old 62vh floor. */
    .agent-panel { height: 100%; min-height: 0; padding: 12px 14px; gap: 10px; }

    /* Mic controls share the waveform row (they used to drop to their own line). Reclaiming
       that row is where the space for the input row actually comes from. */
    .agent-viz-row { grid-template-columns: 1fr 1fr auto; gap: 8px; }
    .agent-viz-row .agent-mic-group { grid-column: auto; justify-self: auto; }

    /* Slim the wave boxes so both plus the mic group fit ~360px of content width. drawBars()
       scales every bar off canvas.height and fitCanvas() re-reads clientHeight on resize, so
       the shorter canvas needs no JS change. */
    .agent-viz { padding: 6px 8px; gap: 6px; }
    .agent-viz-icon { width: 26px; height: 26px; }
    .agent-viz-icon i { width: 15px; height: 15px; }
    .agent-viz-canvas { height: 26px; }

    .agent-transcript { padding: 12px; }
    .agent-visual-placeholder .seed { font-size: 92px; }
}

/* Below ~420px the two waves are too cramped to also carry an icon; the fill colour already
   distinguishes agent (green) from guest (orange). */
@media (max-width: 420px) {
    .agent-viz-icon { display: none; }
    .agent-viz { padding: 6px; }
}