/* wwwroot/css/chat/ai-media.css - AI Image & Video generation styles */

/* ============================================
   SHARED LAYOUT VARIABLES
   Both preview and final use these exact same dimensions
   ============================================ */
:root {
    --ai-img-max: 900px;
    --ai-img-margin: 4px 0;
    --ai-img-radius: 10px;
    --ai-skeleton-bg: linear-gradient(135deg, 
        var(--rz-base-200, #1a1a2e) 0%, 
        var(--rz-base-300, #16213e) 100%);
}

/* ============================================
   SHARED BASE STYLES - Exact same for preview and final
   This ensures NO layout shift during transition
   ============================================ */
.ai-preview-wrap,
figure.ai-final {
    display: block;
    position: relative;
    width: 100%;
    max-width: var(--ai-img-max);
    margin: var(--ai-img-margin);
    border-radius: var(--ai-img-radius);
    box-sizing: border-box;
    aspect-ratio: var(--img-ratio, 3/2);
    background: var(--ai-skeleton-bg);
    overflow: hidden;
}

/* ============================================
   PREVIEW - Hidden by default, shown when .ai-live
   ============================================ */
.ai-preview-wrap {
    display: none;
    z-index: 5;
}

.ai-preview-wrap.ai-live {
    display: block !important;
}

/* ai-prune hides completely (after final loaded) */
.ai-preview-wrap.ai-prune,
.ai-prune {
    display: none !important;
}

/* Evita parpadeo del <img> efímero */
img.ai-preview {
    display: none !important;
}

/* Scanning animation - elegant sweep effect */
.ai-preview-wrap.scanning::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(99, 102, 241, 0.1) 25%,
        rgba(139, 92, 246, 0.15) 50%,
        rgba(99, 102, 241, 0.1) 75%,
        transparent 100%
    );
    animation: ai-scan 2s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
}

/* Pulsing border glow during generation */
.ai-preview-wrap.scanning::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    background: linear-gradient(45deg, 
        rgba(99, 102, 241, 0.4), 
        rgba(139, 92, 246, 0.4), 
        rgba(236, 72, 153, 0.4),
        rgba(99, 102, 241, 0.4));
    background-size: 300% 300%;
    animation: ai-border-glow 3s ease infinite;
    z-index: -1;
    filter: blur(4px);
}

@keyframes ai-scan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes ai-border-glow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Progress bar at bottom */
.ai-preview-wrap .ai-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

/* Status indicator */
.ai-preview-wrap .ai-status {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-preview-wrap .ai-status .spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ai-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

/* Logo/icon in center during generation */
.ai-preview-wrap .ai-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    opacity: 0.7;
    z-index: 3;
    animation: ai-pulse 2s ease-in-out infinite;
}

@keyframes ai-pulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.05); }
}

/* Frame images (for streaming preview) */
.ai-preview-wrap > img.ai-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ai-preview-wrap > img.ai-frame.ai-reveal {
    opacity: 1;
}

/* Hidden ephemeral preview images */
img.ai-preview {
    display: none !important;
}


/* ============================================
   FINAL GENERATED IMAGE/VIDEO
   Base styles are shared with .ai-preview-wrap above.
   These are ONLY the additional/override styles for final.
   ============================================ */

/* Allow actionbar to overflow, ensure relative positioning */
figure.ai-final {
    overflow: visible;
    position: relative;
}

/* When ready: remove skeleton background */
figure.ai-final.ai-ready {
    background: transparent !important;
}

/* Image positioning - absolute when we have aspect-ratio, static otherwise */
figure.ai-final .ai-thumb {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ai-img-radius, 10px);
    object-fit: contain;
    cursor: pointer;
    /* CRITICAL: Both opacity AND visibility hidden until ready */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* When figure has aspect-ratio (inline style --img-ratio), use absolute positioning */
figure.ai-final[style*="--img-ratio"] .ai-thumb {
    position: absolute;
    inset: 0;
    height: 100%;
}

/* Show image once figure is ready */
figure.ai-final.ai-ready .ai-thumb {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

figure.ai-final:hover .ai-thumb {
    transform: scale(1.02);
}

figure.ai-final video.ai-thumb {
    cursor: default;
}

figure.ai-final video.ai-thumb:hover {
    transform: none;
}
/* Caption below image */
figure.ai-final figcaption {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--rz-text-secondary-color, #94a3b8);
    font-style: italic;
    text-align: center;
    background: var(--rz-base-100, #0f172a);
}


/* ============================================
   ACTION BAR (Download, Zoom, etc.)
   ============================================ */

.ai-actionbar {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
    /* Hide completely until image is ready */
    visibility: hidden;
}

/* Only show actionbar on ready figures */
figure.ai-final.ai-ready .ai-actionbar {
    visibility: visible;
}

figure.ai-final.ai-ready:hover .ai-actionbar {
    opacity: 1;
    transform: translateY(0);
}

.ai-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-btn:hover {
    background: rgba(99, 102, 241, 0.8);
    transform: scale(1.05);
}

.ai-btn svg {
    width: 18px;
    height: 18px;
}


/* ============================================
   LIGHTBOX VIEWER
   ============================================ */

#ai-viewer {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: ai-fade-in 0.2s ease;
}

@keyframes ai-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

#ai-viewer.open {
    display: flex;
}

#ai-viewer img,
#ai-viewer video {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#ai-viewer.loading img,
#ai-viewer.loading video {
    opacity: 0;
    transform: scale(0.95);
}

#ai-viewer .vspinner {
    position: absolute;
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ai-spin 0.8s linear infinite;
    display: none;
}

#ai-viewer.loading .vspinner {
    display: block;
}

#ai-viewer .vbar {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
}

#ai-viewer .vbtn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

#ai-viewer .vbtn:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.05);
}

#ai-viewer .vbtn svg {
    width: 22px;
    height: 22px;
}

body.ai-lock {
    overflow: hidden;
}


/* ============================================
   VIDEO-SPECIFIC STYLES
   ============================================ */

.ai-video-wrap {
    --img-ratio: 16/9;
}

.ai-video-wrap.portrait {
    --img-ratio: 9/16;
    max-width: 400px;
}

/* Video controls overlay hint */
figure.ai-final.video::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 5;
}

figure.ai-final.video::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateX(2px);
    border: 12px solid transparent;
    border-left: 20px solid white;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 6;
}

figure.ai-final.video:hover::before,
figure.ai-final.video:hover::after {
    opacity: 0.8;
}


/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 640px) {
    .ai-preview-wrap,
    figure.ai-final {
        border-radius: 8px;
        max-width: 100%;
    }
    
    .ai-actionbar {
        opacity: 1;
        transform: translateY(0);
    }
    
    .ai-btn {
        width: 32px;
        height: 32px;
    }
    
    .ai-preview-wrap .ai-status {
        font-size: 12px;
        bottom: 12px;
        left: 12px;
    }
    
    #ai-viewer .vbtn {
        width: 40px;
        height: 40px;
    }
    
    .ai-video-progress {
        max-width: 100%;
    }
}


/* ============================================
   VIDEO GENERATION PROGRESS SKELETON
   ============================================ */

.ai-video-progress {
    width: 100%;
    max-width: var(--img-max, 800px);
    margin: 4px auto;
    position: relative;
    box-sizing: border-box;
    aspect-ratio: var(--img-ratio, 16/9);
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg, 
        var(--rz-base-200, #1a1a2e) 0%, 
        var(--rz-base-300, #16213e) 50%,
        var(--rz-base-200, #1a1a2e) 100%);
    background-size: 200% 200%;
    animation: ai-video-bg-pulse 3s ease-in-out infinite;
}

.ai-video-progress.portrait {
    max-width: 400px;
}

@keyframes ai-video-bg-pulse {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Pulsing border glow */
.ai-video-progress::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    background: linear-gradient(45deg, 
        rgba(99, 102, 241, 0.3), 
        rgba(139, 92, 246, 0.3), 
        rgba(236, 72, 153, 0.3),
        rgba(99, 102, 241, 0.3));
    background-size: 300% 300%;
    animation: ai-border-glow 3s ease infinite;
    z-index: -1;
    filter: blur(4px);
}

/* Scanning line animation */
.ai-video-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(139, 92, 246, 0.1) 45%,
        rgba(139, 92, 246, 0.2) 50%,
        rgba(139, 92, 246, 0.1) 55%,
        transparent 100%
    );
    animation: ai-video-scan 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ai-video-scan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.ai-video-skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    padding: 20px;
}

.ai-video-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(139, 92, 246, 0.2);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: ai-spin 0.9s linear infinite;
}

.ai-video-status {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.025em;
}

.ai-video-elapsed {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, monospace;
}


/* ============================================
   CHAT MESSAGE INTEGRATION
   ============================================ */

.chat-message .generated-image {
    margin: 4px 0;
}

.chat-message .generated-image img,
.chat-message .generated-video video {
    max-width: 100%;
    border-radius: 12px;
    cursor: pointer;
}

.chat-message .revised-prompt {
    font-size: 12px;
    color: var(--rz-text-secondary-color, #64748b);
    margin-top: 6px;
    font-style: italic;
}


/* ============================================
   ERROR STATE
   ============================================ */

.ai-preview-wrap.error {
    border: 2px solid rgba(239, 68, 68, 0.5);
}

.ai-preview-wrap.error::before {
    display: none;
}

.ai-preview-wrap.error .ai-status {
    color: #fca5a5;
}

.ai-preview-wrap.error .spinner {
    display: none;
}

.ai-preview-wrap.error .ai-status::before {
    content: '⚠️';
    margin-right: 6px;
}


/* ============================================
   PRUNE - Hide skeleton when final arrives
   ============================================ */

.ai-prune {
    display: none !important;
    max-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Also remove the hidden containers after generation */
.ai-preview-wrap[style*="display:none"],
.ai-preview-wrap[style*="display: none"] {
    display: none !important;
}


/* ============================================
   MODEL MARKDOWN CONTAINER
   ============================================ */

/* Default wrapper - normal flow */
.md-wrapper {
    display: contents; /* No layout impact */
}

/* Grid wrapper - image and preview overlap in same cell */
.md-image-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Single row - both elements overlap */
}

/* Both elements go to row 1, column 1 - overlap each other */
.md-image-grid > .ai-image-container {
    grid-column: 1;
    grid-row: 1;
    z-index: 1; /* Final starts below preview */
}

/* When final is ready, bring it to front */
.md-image-grid > .ai-image-container:has(.ai-ready) {
    z-index: 3; /* Above preview */
}

.md-image-grid > .model-md {
    grid-column: 1;
    grid-row: 1;
    z-index: 2; /* Preview on top until final is ready */
    /* Align to top-left so preview matches image position */
    align-self: start;
    justify-self: start;
}

/* Hide empty model-md when it only contains hidden preview */
.md-image-grid > .model-md:empty,
.md-image-grid > .model-md:has(.ai-prune):not(:has(:not(.ai-prune))) {
    display: none;
}

.model-md {
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Prevent the parent container (pre-wrap) from exaggerating whitespace */
    white-space: normal;
}

/* Headings: smaller + tighter spacing (corporate, readable) */
.model-md h1,
.model-md h2,
.model-md h3,
.model-md h4,
.model-md h5,
.model-md h6 {
    margin: 0.85em 0 0.35em;
    line-height: 1.25;
    font-weight: 700;
}

.model-md h1 { font-size: 1.15em; }
.model-md h2 { font-size: 1.08em; }
.model-md h3 { font-size: 1.02em; }
.model-md h4 { font-size: 1.00em; }
.model-md h5 { font-size: 0.96em; }
.model-md h6 { font-size: 0.94em; }

.model-md > :first-child { margin-top: 0; }

.model-md p { margin: 0 0 0.6em; }
.model-md p:last-child { margin-bottom: 0; }

.model-md ul,
.model-md ol {
    margin: 0.35em 0 0.6em;
    padding-left: 1.25em;
}

.model-md li { margin: 0.1em 0; }
.model-md li:last-child { margin-bottom: 0; }

.model-md li p { margin: 0.25em 0; }

/* Tables with proper borders using theme variables */
.model-md table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75em 0;
    font-size: 0.95em;
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.model-md th,
.model-md td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid var(--rz-border-color);
}

.model-md th {
    background: var(--rz-base-200);
    font-weight: 600;
    color: var(--rz-text-color);
}

.model-md td {
    background: transparent;
}

.model-md pre,
.model-md code,
.model-md .codebox {
    max-width: 100%;
    overflow: auto;
}

.model-md code:not(.codebox code) {
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}


/* ============================================
   CODEBOX - Code block with toolbar
   ============================================ */

.codebox {
    background: #0b0f14;
    border: 1px solid #1e293b;
    border-radius: 12px;
    overflow: hidden;
    margin: 12px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    --code-accent: #334155;
}

.codebox[data-lang="python"] { --code-accent: #3572A5; }
.codebox[data-lang="sql"] { --code-accent: #b65c00; }
.codebox[data-lang="csharp"] { --code-accent: #178600; }
.codebox[data-lang="cpp"] { --code-accent: #00599C; }
.codebox[data-lang="java"] { --code-accent: #b07219; }
.codebox[data-lang="terraform"] { --code-accent: #623CE4; }
.codebox[data-lang="javascript"] { --code-accent: #f1e05a; }
.codebox[data-lang="typescript"] { --code-accent: #2b7489; }
.codebox[data-lang="yaml"] { --code-accent: #cb171e; }
.codebox[data-lang="json"] { --code-accent: #292929; }
.codebox[data-lang="bash"] { --code-accent: #4EAA25; }
.codebox[data-lang="powershell"] { --code-accent: #012456; }
.codebox[data-lang="html"] { --code-accent: #e34c26; }
.codebox[data-lang="css"] { --code-accent: #563d7c; }
.codebox[data-lang="plaintext"] { --code-accent: #334155; }

.codebox__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: #0f172a;
    border-bottom: 1px solid #1e293b;
    color: #e2e8f0;
    font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    border-left: 4px solid var(--code-accent);
}

.codebox__lang {
    opacity: .75;
    user-select: none;
}

.codebox__lang::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 8px;
    background: var(--code-accent);
}

.codebox__copy {
    appearance: none;
    border: 1px solid #334155;
    background: #111827;
    color: #e5e7eb;
    border-radius: 8px;
    font-size: 12px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.codebox__copy:hover {
    background: #0b1220;
    border-color: var(--code-accent);
}

.codebox__copy:active {
    transform: translateY(1px);
}

.codebox pre {
    background: transparent !important;
    color: #e5e7eb;
    margin: 0;
    padding: 12px 14px;
    overflow: auto;
    font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    tab-size: 2;
}

/* Plain code during streaming (no toolbar) */
.code-skin {
    background: #0b0f14;
    border-radius: 12px;
    border: 1px solid #1e293b;
    margin: 12px 0;
}

.code-skin pre {
    padding: 12px 14px;
    margin: 0;
    overflow: auto;
    font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #e5e7eb;
}

.code-skin code {
    background: transparent !important;
    padding: 0 !important;
}

/* User text styling */
.user-text {
    margin: 0;
    line-height: 1.5;
}