/*
 * CARD-BACK-CHAT.CSS — Chat zone
 *
 * NEUTRALIZED 2026-07-17: the legacy outfit "body-mapping" (tops/bottoms/dress/
 * accessories tints on the panel, bubbles, and legwear on the input) is removed.
 * Panel + input are flat card-base/grey; bubbles fall back to chat-input.css role
 * defaults (user = hair, asst = eyes), matching the card-front chat. Add
 * intentional outfit colour back surgically later. (Dormant lighting/slot-11 also
 * removed earlier the same day.)
 */

/* ═══════════════════════════════════════════════════════════════════
   CHAT AREA — Image (left) + Conversation (right)
   ═══════════════════════════════════════════════════════════════════ */

.card-chat-area {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════════
   IMAGE THUMBNAIL — Left column
   ═══════════════════════════════════════════════════════════════════ */

.card-chat-image {
    flex: 0 0 35%;
    max-width: 40%;
    border-radius: 6px;
    overflow: hidden;
    background: var(--card-base);
    border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.card-chat-image .module-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.card-chat-image .module-image:hover {
    opacity: 0.9;
}

.card-chat-image .module-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.2);
    width: 100%;
    height: 100%;
}

.card-chat-image .placeholder-icon {
    font-size: 2rem;
    opacity: 0.5;
}


/* ═══════════════════════════════════════════════════════════════════
   CONVERSATION PANEL — Right column, scrollable
     (Legacy outfit body-map removed 2026-07-17 — flat card-base now.)
   ═══════════════════════════════════════════════════════════════════ */

.card-tab-panel {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
    /* NEUTRALIZED 2026-07-17: legacy outfit body-map (accessories/dress/tops/
       bottoms gradient layers) removed -> flat card-base. Add intentional outfit
       colour back surgically later. */
    background: var(--card-base);
    transition: border-color 0.3s ease, background 0.3s ease;
}

.card-chat-conversation {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.card-chat-conversation:empty::before {
    content: 'Flip to chat...';
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    font-size: 0.85rem;
    align-self: center;
    margin-top: 2rem;
}

/* Bubble shape, narration formula, and palette defaults all live in
   chat-input.css. Card back uses the body-mapping palette: panel splits
   tops (slot-3) on top / bottoms (slot-4) on bottom, and the bubbles
   echo that — assistant lives at the top of the column so it leans
   tops, user lives at the bottom so it leans bottoms. Slightly larger
   than the form chat to fit the card-back layout. */
.card-chat-conversation .chat-msg {
    padding: 0.55rem 0.7rem;
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 90%;
}

.card-chat-conversation {
    /* NEUTRALIZED: dropped outfit bg/accent/border overrides (bottoms/tops/
       accessories). Bubbles now fall back to chat-input.css role defaults
       (user = hair, asst = eyes), harmonising with the card-front chat. */
    --chat-user-color: rgba(255, 255, 255, 0.9);
    --chat-asst-color: rgba(255, 255, 255, 0.9);
}

.card-chat-conversation .chat-msg--changes {
    margin-top: 0.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

/* Per-bubble action row — sibling immediately AFTER each chat-msg in
   the conversation flex column, NOT inside the bubble. Inside-bubble
   pushed bubble height up which looked off on short messages. Outside
   keeps the bubble compact and lets the row be subtle. */
.card-chat-conversation .chat-msg-actions {
    display: flex;
    gap: 0.3rem;
    margin: 0.15rem 0.3rem 0.4rem;
    opacity: 0.85;
    transition: opacity 0.12s;
}
.card-chat-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-chat-conversation .chat-msg-actions:has(.chat-msg-action.is-playing) { opacity: 1; }
/* Match the bubble's alignment so actions sit under the same edge */
.card-chat-conversation .chat-msg-actions--user { align-self: flex-end; }
.card-chat-conversation .chat-msg-actions--assistant { align-self: flex-start; }
.card-chat-conversation .chat-msg-action {
    width: 1.4em;
    height: 1.4em;
    padding: 0;
    border-radius: 50%;
    /* Lighter default — both speaker and delete share this base.
       Hover and is-playing layer on top with stronger color. */
    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-chat-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-chat-conversation .chat-msg-action[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}
.card-chat-conversation .chat-msg-action svg {
    width: 0.8em;
    height: 0.8em;
}
/* is-playing: most vivid state, distinct from hover so the button
   visibly stays "on" when mouse moves away. Brighter color, fuller
   border, soft glow. Wins over :hover via source-order. */
.card-chat-conversation .chat-msg-action.is-playing,
.card-chat-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-chat-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. While the
   request is in flight, spin the icon. */
@keyframes chat-msg-regen-spin {
    to { transform: rotate(360deg); }
}
.card-chat-conversation .chat-msg-regen.is-regenerating svg {
    animation: chat-msg-regen-spin 1s linear infinite;
}

.card-chat-conversation::-webkit-scrollbar {
    width: 4px;
}

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

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

/* ═══════════════════════════════════════════════════════════════════
   CHAT INPUT ROW — Message input + send button
   Leggings (slot-7).  (Legacy lighting/slot-11 tint removed.)
   ═══════════════════════════════════════════════════════════════════ */

.card-input-row {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.card-input-row--chat {
    padding: 4px 0 0;
}

/* Messenger-style row — same recipe as .chat-form-input on the form
   page (TTS orb / pill / send orb), themed with leggings (slot-7) for
   card-back body-mapping. The pill itself carries the recessed bevel,
   so the container is a plain flex row with no background. */
.card-input-chat {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 6px;
    align-items: center;
}

.card-input-chat .chat-message-input {
    flex: 1;
    /* Inward bevel — matches .chat-page-input on the form */
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    color: var(--primary);
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    min-height: 36px;
    outline: none;
    min-width: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.card-input-chat .chat-message-input::placeholder {
    color: var(--primary);
}

.card-input-chat .chat-message-input:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.card-input-chat .chat-message-input:focus {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        0 0 0 2px rgba(255, 255, 255, 0.12);
}

/* Inline TTS to the left of the pill — circular orb sized to match. */
.card-input-chat .chat-inline-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
}

.card-input-chat .chat-send-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,
        color-mix(in srgb, white 8%, var(--card-base)) 0%,
        color-mix(in srgb, white 4%, var(--card-base)) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: var(--ui-text-strong);
    cursor: pointer;
    transition: all 0.15s ease;
}

.card-input-chat .chat-send-btn svg {
    width: 14px;
    height: 14px;
}

.card-input-chat .chat-send-btn:hover {
    background: linear-gradient(180deg,
        color-mix(in srgb, white 14%, var(--card-base)) 0%,
        color-mix(in srgb, white 8%, var(--card-base)) 100%);
    color: var(--ui-text-strong);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
}

.card-input-chat .chat-send-btn.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Elevation: shrink + fade the send orb when the input is empty so
   it animates in when the user starts typing. Sibling combinator
   works because send sits AFTER the input in the DOM. */
.card-input-chat .chat-message-input:placeholder-shown ~ .chat-send-btn {
    transform: scale(0.55);
    opacity: 0.25;
    pointer-events: none;
}