/*
 * CARD-FRONT-CHAT.CSS — Full conversation overlay on card fronts
 *
 * Bottom half of card, transparent gradient fading to center.
 * Scrollable conversation + input inside decorative borders.
 * Hidden on non-centered cards.
 */

/* ═══════════════════════════════════════════════════════════════════
   OVERLAY CONTAINER — bottom half, inside card padding
   ═══════════════════════════════════════════════════════════════════ */

.card-front-chat-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    display: flex;
    flex-direction: column;
    /* Pin the input row to the bottom of the overlay regardless of
       whether the conversation/elements pane is showing — peek mode
       hides both panes, and without flex-end the lone input row would
       float to the top of the overlay (mid-card). */
    justify-content: flex-end;
    z-index: 5;
    border-radius: 0 0 10px 10px;
    background: transparent;
    pointer-events: none;
}

/* Re-enable pointer events on interactive children */
.card-front-conversation,
.card-front-chat-input-row {
    pointer-events: auto;
}

/* Hidden on non-centered cards. Chat input row is always on for the
   centered card — it's the persistent control surface. The
   .card-front-elements-toggle inside that row flips the conversation
   pane (.visible class on .card-front-conversation). */
.strip-card:not(.centered) .card-front-chat-overlay {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   CONVERSATION — scrollable, bottom-aligned, fades at top edge
   ═══════════════════════════════════════════════════════════════════ */

.card-front-conversation {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.5rem 0.6rem;
    flex-direction: column;
    gap: 0.3rem;
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%);
}

.card-front-conversation.visible {
    display: flex;
}

/* Spacer pushes messages to bottom without breaking scroll */
.card-front-conversation::before {
    content: '';
    flex: 1;
}

/* Scrollbar */
.card-front-conversation::-webkit-scrollbar {
    width: 4px;
}

.card-front-conversation::-webkit-scrollbar-track {
    background: transparent;
}

.card-front-conversation::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.card-front-conversation {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* Bubble shape, narration formula, and palette defaults all live in
   chat-input.css. Card front uses the same hair/eyes mapping as the
   form-page chat, but with darker bubbles since they sit on top of
   the card image (overlay legibility). Lighting is mixed into the
   text color too — the card image already has a lit/dark dynamic. */
.card-front-conversation {
    /* Neutral grey fill (not the slot colour) so the text is legible on ANY
       character — these bubbles sit over the card image, so they run a touch
       darker than the form-page defaults. Only the border keeps a faint
       hair/eyes hint. */
    --chat-user-bg: color-mix(in srgb, white 4%, rgba(0, 0, 0, 0.74));
    --chat-user-border: color-mix(in srgb, var(--primary) 22%, rgba(255, 255, 255, 0.16));
    --chat-user-color: rgba(255, 255, 255, 0.95);
    --chat-asst-bg: color-mix(in srgb, white 9%, rgba(0, 0, 0, 0.74));
    --chat-asst-border: color-mix(in srgb, var(--secondary) 22%, rgba(255, 255, 255, 0.16));
    --chat-asst-color: rgba(255, 255, 255, 0.95);
}

/* Same speech/narration collision as form chat — assistant accent is
   eyes, so flip narration to hair to keep them visually distinct. */
.card-front-conversation .chat-msg--assistant {
    --chat-narration-tint: var(--primary);
}

/* Per-bubble action row — sibling AFTER each chat-msg in the
   conversation flex column, NOT inside the bubble. Subtler footprint
   than the back-chat variant for the overlay. */
.card-front-conversation .chat-msg-actions {
    display: flex;
    gap: 0.25rem;
    margin: 0.12rem 0.3rem 0.35rem;
    opacity: 0.85;
    transition: opacity 0.12s;
}
.card-front-conversation .chat-msg-actions:hover { opacity: 1; }
/* A playing message keeps its row at full opacity so the lit speaker
   reads even when the mouse is elsewhere. */
.card-front-conversation .chat-msg-actions:has(.chat-msg-action.is-playing) { opacity: 1; }
.card-front-conversation .chat-msg-actions--user { align-self: flex-end; }
.card-front-conversation .chat-msg-actions--assistant { align-self: flex-start; }
.card-front-conversation .chat-msg-action {
    width: 1.35em;
    height: 1.35em;
    padding: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--secondary) 16%, transparent);
    color: color-mix(in srgb, var(--secondary) 55%, rgba(255, 255, 255, 0.9));
    border: 1px solid color-mix(in srgb, var(--secondary) 45%, transparent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.card-front-conversation .chat-msg-action:hover {
    background: color-mix(in srgb, var(--secondary) 28%, transparent);
    color: color-mix(in srgb, var(--secondary) 75%, white);
    border-color: color-mix(in srgb, var(--secondary) 65%, transparent);
}
.card-front-conversation .chat-msg-action[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}
.card-front-conversation .chat-msg-action svg {
    width: 0.78em;
    height: 0.78em;
}
.card-front-conversation .chat-msg-action.is-playing,
.card-front-conversation .chat-msg-action.is-playing:hover {
    color: var(--secondary);
    background: color-mix(in srgb, var(--secondary) 38%, transparent);
    border-color: color-mix(in srgb, var(--secondary) 90%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--secondary) 45%, transparent);
}

/* Delete button — same default as speaker (slot-2 eyes); red-tinted
   hover as the destructive cue. */
.card-front-conversation .chat-msg-delete:hover {
    background: color-mix(in srgb, var(--danger) 30%, transparent);
    color: color-mix(in srgb, var(--danger) 70%, white);
    border-color: color-mix(in srgb, var(--danger) 60%, transparent);
}

/* Regenerate button — same default + hover as speaker. Spin the icon
   while the request is in flight. */
@keyframes chat-msg-regen-spin {
    to { transform: rotate(360deg); }
}
.card-front-conversation .chat-msg-regen.is-regenerating svg {
    animation: chat-msg-regen-spin 1s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   INPUT ROW — inside decorative border at bottom
   ═══════════════════════════════════════════════════════════════════ */

/* Messenger-style row — TTS orb / pill / send orb. Same recipe as the
   form chat and the card-back row. The dark blurred tray stays so the
   pill stays legible against the underlying image; the pill itself
   carries the recessed bevel. Slot-1 (hair) is the local accent. */
.card-front-chat-input-row {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    padding: 4px 6px 6px;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 0 0 10px 10px;
}

/* Collapsed row — the elements-toggle has hidden the conversation
   pane. Drop the tray (background, blur, rounded corners) and hide
   every child except the toggle button itself. Padding is kept so
   the button stays at its exact original bottom-left position
   (otherwise the lost padding would shift it 6px left, 4px up). */
.card-front-chat-input-row.collapsed {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.card-front-chat-input-row.collapsed > *:not(.card-front-elements-toggle) {
    display: none;
}

/* Wrap holds the pill + (when typing) the send orb. Bevel lives on
   the inner .card-front-chat-pill so the icon and TTS can sit
   absolutely positioned inside it. */
.card-front-chat-input-wrap {
    flex: 1;
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

/* Pill — visual capsule containing chat icon (left), input field,
   TTS button (right). */
.card-front-chat-pill {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    min-height: 36px;
    min-width: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-front-chat-pill:focus-within {
    background: rgba(0, 0, 0, 0.55);
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.45),
        0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
}

.card-front-chat-input-icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.5);
    /* Click target — toggles compact mode (hides aspect/lock to free
       horizontal room for the pill in narrow / comic-strip layouts).
       Clicks elsewhere in the pill still focus the input. */
    cursor: pointer;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}


.card-front-chat-input-icon svg {
    width: 100%;
    height: 100%;
    /* Clicks on the SVG should bubble to the icon span, not get
       swallowed by individual paths. */
    pointer-events: none;
}

/* Compact mode — hide aspect + lock to free room for the pill. The
   chat icon toggles compact, the elements button exits it. The
   top-right generate orb stays — it's the streaming/progress indicator
   while the model talks back. */
.card-front-chat-input-row.compact .card-front-aspect,
.card-front-chat-input-row.compact .card-front-lock {
    display: none;
}

.card-front-chat-input-row .chat-message-input,
.card-front-chat-input-row .chat-message-input:hover,
.card-front-chat-input-row .chat-message-input:focus {
    flex: 1;
    background: transparent;
    border: none;
    /* Suppress the inherited focus glow from .chat-message-input:focus
       in chat-input.css — the pill's :focus-within carries the glow now. */
    box-shadow: none;
    color: #fff;
    /* Left padding for the chat icon, right padding for the inline TTS. */
    padding: 0.4rem 2.6rem 0.4rem 2.2rem;
    font-size: 0.85rem;
    min-height: 36px;
    outline: none;
    min-width: 0;
}

.card-front-chat-input-row .chat-message-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* Send button pinned to the right edge of the pill — same slot the
   audio button used to occupy (sized to nest inside the 36px pill).
   Hidden until the user types so the pill reads as a clean input. */
.card-front-chat-pill .chat-send-btn {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    z-index: 2;
}
.card-front-chat-pill:has(.card-front-chat-input:placeholder-shown) .chat-send-btn {
    display: none;
}

/* All inline orbs in the row sit at 30×30 — only the elements-toggle
   stays larger (36) since it carries the conic ring + glow. .chat-send-btn
   is no longer a row sibling (it lives inside the pill now), so it isn't
   listed here. */
.card-front-chat-input-row .chat-inline-btn,
.card-front-chat-input-row .deck-orb {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
}

.card-front-chat-input-row .chat-inline-btn svg,
.card-front-chat-input-row .deck-orb svg {
    width: 18px;
    height: 18px;
}

/* Bump emoji icons (aspect uses 🖥️/⬛/📱) so they aren't tiny in the
   30px button. The lock used to be an emoji too — now it's an SVG so
   it picks up the deck-orb svg sizing above. */
.card-front-chat-input-row .deck-orb .orb-icon {
    font-size: 16px;
}

/* Aspect + Lock pick up the same chat-deck-btn skin as TTS — subtle
   border, dark gradient fill, dimmed icon — so the row reads as one
   palette. The colored data-ratio variants on aspect (which would
   have shown an outfit-accent glow) are flattened to the shared skin. */
.card-front-chat-input-row .deck-orb--aspect,
.card-front-chat-input-row .deck-orb--aspect[data-ratio="portrait"],
.card-front-chat-input-row .deck-orb--aspect[data-ratio="landscape"],
.card-front-chat-input-row .deck-orb--aspect[data-ratio="square"],
.card-front-chat-input-row .deck-orb--lock {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(0, 0, 0, 0.1) 100%),
        var(--card-base);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: none;
}

/* Dim icon color to match the chat-deck-btn family — orb-icon defaults
   to bold white which made lock + aspect emoji jump out next to TTS's
   muted SVG. */
.card-front-chat-input-row .deck-orb .orb-icon {
    color: rgba(255, 255, 255, 0.5);
    filter: none;
}

/* Aspect rect swap — show only the rect matching the current ratio.
   Visual state is driven by data-ratio so the JS click handler doesn't
   need to stomp innerHTML. */
.card-front-chat-input-row .deck-orb--aspect .ratio-portrait,
.card-front-chat-input-row .deck-orb--aspect .ratio-landscape,
.card-front-chat-input-row .deck-orb--aspect .ratio-square {
    display: none;
}
.card-front-chat-input-row .deck-orb--aspect[data-ratio="portrait"] .ratio-portrait,
.card-front-chat-input-row .deck-orb--aspect[data-ratio="landscape"] .ratio-landscape,
.card-front-chat-input-row .deck-orb--aspect[data-ratio="square"] .ratio-square {
    display: inline;
}

/* Lock shackle swap — closed shackle visible only when .locked. */
.card-front-chat-input-row .deck-orb--lock .lock-shackle-closed {
    display: none;
}
.card-front-chat-input-row .deck-orb--lock.locked .lock-shackle-closed {
    display: inline;
}
.card-front-chat-input-row .deck-orb--lock.locked .lock-shackle-open {
    display: none;
}

/* Locked state — slot-2 tint + glow so the lock state is obvious at a
   glance even before reading the shackle. */
.card-front-chat-input-row .deck-orb--lock.locked {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--secondary) 22%, rgba(255, 255, 255, 0.06)) 0%,
            color-mix(in srgb, var(--secondary) 12%, rgba(0, 0, 0, 0.1)) 100%),
        var(--card-base);
    border-color: color-mix(in srgb, var(--secondary) 45%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--secondary) 30%, transparent);
}

.card-front-chat-input-row .deck-orb--lock.locked .orb-icon {
    color: var(--ui-text-strong, rgba(255, 255, 255, 0.85));
}

.card-front-chat-input-row .chat-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary) 40%, rgba(0, 0, 0, 0.4));
    border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.15s ease;
}

.card-front-chat-input-row .chat-send-btn:hover {
    background: color-mix(in srgb, var(--primary) 55%, rgba(0, 0, 0, 0.3));
    color: #fff;
}

/* Hide send orb until the user types one character. */
.card-front-chat-input-row:has(.chat-message-input:placeholder-shown) .chat-send-btn {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   FRONT ORBS — visible only when their parent overlay is active
   ═══════════════════════════════════════════════════════════════════ */

/* Reset orb — top-left corner. Wears the .chat-deck-btn skin like
   the reset on the form-page chat fieldset (gradient + subtle border
   + hover icon spin). Fixed 32px with a chunky ↻ glyph filling most
   of the orb — doesn't shrink with --card-zoom; the chat row's 30px
   inline orbs are the visual floor for the row's controls. */
.card-front-reset {
    display: none;
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 6;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.card-front-reset .chat-deck-btn-icon {
    font-size: 22px;
    line-height: 1;
    font-weight: 200;
}

/* Reset shows ONLY when the conversation pane is visible. Hidden
   in peek mode (clean image, chat bar still showing). */
.strip-card.centered:has(.card-front-conversation.visible) .card-front-reset {
    display: flex;
}

/* Suppress the .chat-deck-btn :hover brighten/glow on the card-front
   version — the icon-spin from .chat-deck-btn--reset:hover .chat-deck-btn-icon
   is still there for that "give it a flick" feedback, but the color
   doesn't go bold and the background/border stay calm. */
.card-front-reset:hover {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(0, 0, 0, 0.1) 100%),
        var(--card-base);
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: none;
}

/* Elements toggle sits at the bottom-left of the chat input row.
   Overrides the floating top/right anchor from generate-button.css so
   the button reads as an inline orb sibling of aspect/lock. position:
   relative is essential — the ::before ring uses inset: 0, so the
   button must be its own containing block or the ring escapes to the
   nearest positioned ancestor (the card) and renders as a card-width
   oval. */
.card-front-chat-input-row .card-front-elements-toggle {
    display: flex;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.card-front-chat-input-row .card-front-elements-toggle::after {
    inset: 3px;
}

.card-front-chat-input-row .card-front-elements-toggle .toggle-icon {
    font-size: 0.8rem;
}

/* Aspect + Lock orbs live inline in the chat input row. Sized to
   match the row, with the spinning ring suppressed. */
.card-front-chat-input-row .card-front-aspect,
.card-front-chat-input-row .card-front-lock {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.card-front-chat-input-row .card-front-aspect .orb-icon,
.card-front-chat-input-row .card-front-lock .orb-icon {
    font-size: 14px;
}

.card-front-chat-input-row .deck-orb::before {
    display: none;
}