style.css

/* Use Inter font */
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
    html { font-family: 'Inter var', sans-serif; }
}

/* --- Base Futuristic Theme --- */
body {
    /* background-color: #0f172a; */ /* slate-900 - Old background */
    background-color: #02040a; /* Deepest space blue/black */
    background-image: radial-gradient(ellipse at center, 
        #1a2035 0%,  /* Inner glow - dark indigo */
        #0f172a 40%, /* Mid-tone slate/blue */
        #02040a 75%  /* Fading to deep space */
    );
    background-attachment: fixed; /* Keeps the gradient fixed during scroll */
    color: #cbd5e1; /* slate-300 */
    overflow: hidden; /* Prevent body scroll, manage scrolling in sections */
    min-height: 100vh; /* Ensure gradient covers full viewport height */
}

/* --- Layout Heights --- */
:root {
    --history-panel-expanded-height: 12rem; /* 192px */
    --history-panel-collapsed-height: 0rem; /* Can be 0 or a small value for a visible collapsed bar */
    --history-panel-toggle-button-height: 2.5rem; /* Height of the toggle button area */
    --history-panel-current-height: var(--history-panel-collapsed-height); /* Initial state: collapsed */
}

#main-content { 
    height: calc(100vh - var(--history-panel-current-height) - var(--history-panel-toggle-button-height));
    overflow-y: auto;
    width: 100%; 
    margin-left: 0; 
    transition: height 0.3s ease-in-out;
}

/* Hide scrollbar for specific elements */
#history-panel::-webkit-scrollbar { display: none; } 
#history-panel { -ms-overflow-style: none; scrollbar-width: none; }


/* Custom scrollbar for main content */
#main-content::-webkit-scrollbar { width: 8px; }
#main-content::-webkit-scrollbar-track { background: rgba(51, 65, 85, 0.5); border-radius: 10px; }
#main-content::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; }
#main-content::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* History Panel Scrollbar */
#history-panel::-webkit-scrollbar { height: 6px; background-color: rgba(30, 41, 59, 0.5); }
#history-panel::-webkit-scrollbar-thumb { background-color: #475569; border-radius: 3px; }
#history-panel::-webkit-scrollbar-thumb:hover { background-color: #64748b; }
#history-panel { scrollbar-width: thin; scrollbar-color: #475569 rgba(30, 41, 59, 0.5); }

/* Code output styling in config modal */
#code-output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem; /* mb-2 */
}
#copy-code-button {
    background-color: #334155; /* slate-700 */
    color: #94a3b8; /* slate-400 */
    padding: 0.25rem 0.75rem; /* py-1 px-3 */
    font-size: 0.75rem; /* text-xs */
    border-radius: 0.375rem; /* rounded-md */
    transition: background-color 0.2s, color 0.2s;
    line-height: 1; /* Ensure icon is vertically centered */
}
#copy-code-button:hover {
    background-color: #475569; /* slate-600 */
    color: #cbd5e1; /* slate-300 */
}
 #copy-code-button.copied {
    background-color: #059669; /* emerald-600 */
    color: white;
}

#export-code-button {
    background-color: #334155; /* slate-700 */
    color: #94a3b8; /* slate-400 */
    padding: 0.25rem 0.75rem; /* py-1 px-3 */
    font-size: 0.75rem; /* text-xs */
    border-radius: 0.375rem; /* rounded-md */
    transition: background-color 0.2s, color 0.2s, opacity 0.2s;
    line-height: 1; /* Ensure icon is vertically centered */
}
#export-code-button:hover:not(:disabled) {
    background-color: #475569; /* slate-600 */
    color: #cbd5e1; /* slate-300 */
}
#export-code-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#code-output-container { 
    margin-top: 0.25rem; 
    height: 300px; 
    overflow-y: auto; 
    background-color: #020617; 
    border: 1px solid #334155; 
    border-radius: 0.375rem; 
    padding: 1rem; 
    scrollbar-width: thin;
    scrollbar-color: #475569 rgba(30, 41, 59, 0.5);
}
#code-output-container::-webkit-scrollbar {
    width: 6px; display: block;
}
#code-output-container::-webkit-scrollbar-track {
    background: rgba(51, 65, 85, 0.3); border-radius: 3px;
}
#code-output-container::-webkit-scrollbar-thumb {
    background: #475569; border-radius: 3px;
}
#code-output-container::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

#code-output { 
    font-family: monospace;
    color: #94a3b8; 
    white-space: pre-wrap;
    word-wrap: break-word;
}
#code-output code.language-html {
    font-size: 9pt;
    color: #e2e8f0; 
}

/* Preview frame styling */
.preview-frame {
    width: 100%; height: 100%; flex-grow: 1; border: none;
    background-color: #ffffff; 
}
.preview-loader {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(15, 23, 42, 0.7); 
    display: flex; align-items: center; justify-content: center; z-index: 10;
}

/* Spinner */
.spinner {
    width: 2rem; height: 2rem;
    border: 4px solid rgba(71, 85, 105, 0.3); 
    border-left-color: #22d3ee; /* cyan-400 */
    border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Refinement loading */
#refinement-loading-indicator {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background-color: rgba(15, 23, 42, 0.85); 
    backdrop-filter: blur(5px); color: #e2e8f0; 
    padding: 1rem 1.5rem; border-radius: 0.5rem; 
    z-index: 1000; display: none; align-items: center; gap: 0.75rem;
    border: 1px solid #334155; box-shadow: 0 0 20px rgba(34, 211, 238, 0.2);
}
#refinement-loading-indicator svg { color: #22d3ee; }

/* Slider value */
#interval-value, #num-variations-value { font-weight: 600; color: #22d3ee; }

/* Config Button (replaces sidebar toggle) */
#top-left-controls {
    position: fixed; top: 1rem; left: 1rem; z-index: 60; 
    display: flex;
    gap: 0.5rem; /* Space between buttons */
}

#config-button, #new-button, #show-prompt-modal-button {
    background-color: rgba(51, 65, 85, 0.7); 
    backdrop-filter: blur(5px); border-radius: 9999px; padding: 0.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3); cursor: pointer;
    border: 1px solid #475569; 
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
    display: flex; /* Center icon */
    align-items: center;
    justify-content: center;
}
#config-button:hover, #new-button:hover, #show-prompt-modal-button:hover {
    background-color: rgba(71, 85, 105, 0.8); 
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.2);
}
#config-button svg, #new-button svg, #show-prompt-modal-button svg {
    width: 1.25rem; height: 1.25rem; color: #94a3b8; transition: color 0.2s;
}
#config-button:hover svg, #new-button:hover svg, #show-prompt-modal-button:hover svg {
    color: #22d3ee; 
}


/* Full Screen Overlay */
#fullscreen-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: rgba(15, 23, 42, 0.95); 
    backdrop-filter: blur(8px); z-index: 900; display: flex; flex-direction: column;
    padding: 1rem; box-sizing: border-box; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#fullscreen-overlay.visible { opacity: 1; visibility: visible; }
#fullscreen-iframe {
    flex-grow: 1; width: 100%; height: 100%; border: 1px solid #334155; 
    border-radius: 0.5rem; background-color: white; 
    margin-top: 3rem; /* Add space for top buttons */
}
#exit-fullscreen-btn {
    position: absolute; top: 1.5rem; right: 1.5rem; z-index: 955; /* Above nav buttons */
    background-color: #ef4444; color: white;
}
#exit-fullscreen-btn:hover { background-color: #dc2626; }

/* Fullscreen History Navigation Buttons */
#fullscreen-history-nav {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 950; /* Below exit button, above iframe */
    display: none; /* Hidden by default */
    gap: 1rem;
}
#fullscreen-history-nav.visible {
     display: flex; /* Show when needed */
}
#fullscreen-history-nav button {
    background-color: rgba(51, 65, 85, 0.8); /* slate-700/80 */
    color: #cbd5e1; /* slate-300 */
    border: 1px solid #64748b; /* slate-500 */
    padding: 0.5rem 1rem; /* py-2 px-4 */
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
 #fullscreen-history-nav button:hover:not(:disabled) {
    background-color: rgba(71, 85, 105, 0.9); /* slate-600/90 */
    border-color: #94a3b8; /* slate-400 */
    color: #fff;
}
 #fullscreen-history-nav button:disabled {
    background-color: rgba(51, 65, 85, 0.5);
    border-color: #475569; /* slate-600 */
    color: #64748b; /* slate-500 */
    cursor: not-allowed;
    opacity: 0.6;
}


body.fullscreen-active #top-left-controls { opacity: 0; pointer-events: none; }
body.fullscreen-active #main-content { overflow: hidden; }
body.fullscreen-active #history-panel { display: none; } 


/* Perspective Grid Styles (for 4 variations) */
#perspective-viewport {
    flex-grow: 1; min-height: 0; display: flex;
    justify-content: center;
    padding: 0.5rem;
    perspective: 1500px;
    overflow: hidden;
}
#preview-grid-wrapper { 
    display: grid; 
    width: 98%; max-width: 1200px; 
    height: 95%;
    transition: transform 0.5s ease-out;
}
#preview-grid-wrapper.grid-mode {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr); gap: 1.5rem; 
    transform-style: preserve-3d;
    transform: rotateX(10deg) rotateY(0deg) scale(0.95);
}
 #preview-grid-wrapper.single-mode {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr; gap: 0;
    transform: none; 
    width: 100%; height: 100%; max-width: none; aspect-ratio: unset;
}


.preview-item-perspective { 
    background-color: rgba(51, 65, 85, 0.6); 
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-radius: 0.75rem; 
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 5px rgba(34, 211, 238, 0.1);
    display: flex; flex-direction: column; overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid #475569; 
    height: 100%; /* Added to fill grid cell height */
}
.preview-item-perspective:hover:not(.selected) {
    transform: translateY(-8px) scale(1.03) translateZ(5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4), 0 0 15px rgba(34, 211, 238, 0.2);
    border-color: #64748b; 
}
.preview-item-perspective.selected { 
    border-color: #22d3ee; 
    transform: scale(1.06) translateZ(20px); 
    box-shadow: 0 15px 40px rgba(34, 211, 238, 0.3), 0 0 25px rgba(34, 211, 238, 0.4), inset 0 0 10px rgba(34, 211, 238, 0.2);
    z-index: 5;
}
.preview-header {
    padding: 0.6rem 1rem; border-bottom: 1px solid #475569; 
    display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0; background-color: rgba(71, 85, 105, 0.5);
}
.preview-header-title {
    font-size: 0.9rem; font-weight: 600; color: #e2e8f0; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.preview-header-buttons { display: flex; align-items: center; gap: 0.5rem; }
.preview-header-buttons button, .preview-header-buttons .fullscreen-btn {
    padding: 0.25rem 0.5rem; border-radius: 0.375rem; 
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.preview-header-buttons .fullscreen-btn { color: #94a3b8; }
.preview-header-buttons .fullscreen-btn:hover:not(:disabled) {
    color: #22d3ee; background-color: rgba(51, 65, 85, 0.7);
}
.preview-header-buttons .fullscreen-btn:disabled { color: #475569; cursor: not-allowed; }
.preview-body {
    position: relative; flex-grow: 1; min-height: 0;
    display: flex; overflow: hidden; 
}

.single-preview-item {
    width: 100%; height: 100%;
    background-color: rgba(30, 41, 59, 0.5); 
    border: 1px solid #334155;
    border-radius: 0.5rem;
    display: flex; flex-direction: column; overflow: hidden;
}


/* Futuristic input/select styles */
.futuristic-input, .futuristic-select {
    background-color: rgba(30, 41, 59, 0.8); border: 1px solid #475569; 
    color: #e2e8f0; border-radius: 0.375rem; 
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
    transition: border-color 0.2s, box-shadow 0.2s;
    padding: 0.5rem 0.75rem; 
}
.futuristic-input::placeholder { color: #64748b; }
.futuristic-input:focus, .futuristic-select:focus {
    outline: none; border-color: #22d3ee; 
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.3), inset 0 1px 2px rgba(0,0,0,0.2);
}
.futuristic-select {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 0.5rem center;
     background-size: 1.2em 1.2em;
     padding-right: 2.5rem; 
}


/* Futuristic button styles */
.futuristic-button {
    background-color: #0e7490; color: #f0f9ff; 
    font-weight: 500; border-radius: 0.375rem; 
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 0 0 0 rgba(34, 211, 238, 0.0);
}
.futuristic-button:hover:not(:disabled) {
    background-color: #0891b2; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.3), 0 0 10px 2px rgba(34, 211, 238, 0.3);
    transform: translateY(-1px);
}
.futuristic-button:active:not(:disabled) {
    transform: translateY(0px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 0 5px 1px rgba(34, 211, 238, 0.2);
}
.futuristic-button:disabled {
    background-color: #334155; color: #64748b; 
    cursor: not-allowed; opacity: 0.7;
}
.futuristic-button.selected-state { 
     background-color: #059669; 
}
.futuristic-button.selected-state:hover:not(:disabled) {
    background-color: #047857; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.3), 0 0 10px 2px rgba(16, 185, 129, 0.3);
}


/* Range slider styling */
input[type="range"].futuristic-slider {
    -webkit-appearance: none; appearance: none; width: 100%; height: 8px;
    background: #334155; border-radius: 5px; outline: none;
    opacity: 0.9; transition: opacity .2s;
}
input[type="range"].futuristic-slider:hover { opacity: 1; }
input[type="range"].futuristic-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
    background: #22d3ee; border-radius: 50%; cursor: pointer;
    border: 2px solid #0f172a; box-shadow: 0 0 5px rgba(34, 211, 238, 0.5);
}
input[type="range"].futuristic-slider::-moz-range-thumb {
    width: 18px; height: 18px; background: #22d3ee; 
    border-radius: 50%; cursor: pointer; border: 2px solid #0f172a; 
    box-shadow: 0 0 5px rgba(34, 211, 238, 0.5);
}

/* --- History Panel (Bottom) --- */
#history-panel-controls {
    height: var(--history-panel-toggle-button-height);
    display: flex;
    align-items: center;
    justify-content: center; /* Center the group */
    gap: 1rem; /* Space between nav arrows and toggle */
    background-color: rgba(15, 23, 42, 0.9); /* Match history panel bg */
    border-top: 1px solid #334155; /* Match history panel border */
    position: relative; /* For potential absolute positioning of button if needed or pseudo-elements */
    z-index: 51; /* Above history panel content, below modals */
}

#history-toggle-button {
    background-color: rgba(51, 65, 85, 0.7); /* slate-700 with alpha */
    border: 1px solid #475569; /* slate-600 */
    border-radius: 9999px; /* pill shape */
    padding: 0.375rem; /* py-1.5 px-1.5 (adjust based on icon size) */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8; /* slate-400 for icon */
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#history-toggle-button:hover {
    background-color: rgba(71, 85, 105, 0.8);
    color: #cbd5e1; /* slate-300 */
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.2);
}

#history-toggle-button svg {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
}

#history-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--history-panel-current-height); /* Use CSS variable */
    background-color: rgba(15, 23, 42, 0.9); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* border-top: 1px solid #334155; Removed as controls has it now */ 
    padding: 1rem 2rem; /* Add more horizontal padding for fan effect */
    z-index: 50; 
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    align-items: center; 
    /* gap: 1rem; Remove fixed gap, overlaps will be handled by transforms */
    transition: height 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 1;
    perspective: 1000px; /* Add perspective for 3D transforms */
}

#history-panel.history-collapsed {
    /* height is controlled by --history-panel-current-height via JS */
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden; /* Ensure content is clipped during collapse */
}

/* Hide thumbnails when panel is collapsed to prevent interaction/layout issues */
#history-panel.history-collapsed .history-thumbnail-item,
#history-panel.history-collapsed #history-panel-placeholder {
    display: none;
}

.history-thumbnail-item {
    position: relative; /* Keep for z-index */
    flex-shrink: 0; 
    width: 10rem; 
    height: 7.5rem; 
    background-color: rgba(51, 65, 85, 0.5); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid #475569; 
    border-radius: 0.5rem; 
    box-shadow: 0 6px 18px rgba(0,0,0,0.35), 
                        inset 0 0 8px rgba(34, 211, 238, 0.15),
                        0 0 2px rgba(34,211,238,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* transform-style: preserve-3d; Remove this */
    /* transform: perspective(600px) rotateY(-8deg) rotateX(3deg) translateZ(-15px); Remove static transform */
    transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1), 
                        box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                        border-color 0.3s ease,
                        z-index 0.7s ease; /* Add z-index transition */
    /* Add margin to handle potential overlap calculations if needed, maybe negative */
    margin-left: -30px; /* Example: Pull items closer together */ 
}

/* Pull first item back to the left */
.history-thumbnail-item:first-child {
    margin-left: 0;
}

.history-thumbnail-item:hover {
    /* transform: perspective(600px) rotateY(-3deg) rotateX(1deg) translateZ(0px) scale(1.08); */ /* Remove old hover transform */
    transform: translateY(-15px) scale(1.15) rotate(0deg); /* Bring up, scale, and un-rotate on hover */
    box-shadow: 0 15px 40px rgba(0,0,0,0.5), 
                        inset 0 0 12px rgba(34, 211, 238, 0.25),
                        0 0 15px rgba(34,211,238,0.4);
    border-color: #22d3ee; 
    z-index: 100; /* Ensure hovered item is on top */
}
.history-thumbnail-item.active-history-item {
    border-color: #22d3ee; 
    /* transform: perspective(600px) rotateY(-4deg) rotateX(2deg) translateZ(0px) scale(1.06); */ /* Remove old active transform */
    box-shadow: 0 10px 30px rgba(34, 211, 238, 0.3), 
                        inset 0 0 15px rgba(34, 211, 238, 0.3),
                        0 0 10px rgba(34,211,238,0.4);
    /* Active item might need slightly different base transform/z-index set by JS */
    z-index: 50; /* Ensure active is above others but below hover */
}
.history-thumbnail-preview-container {
    width: 100%;
    height: calc(100% - 2rem); 
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #334155;
    cursor: pointer; 
}
.history-thumbnail-preview { 
    width: 400%; 
    height: 400%;
    transform: scale(0.25); 
    transform-origin: 0 0;
    border: none;
    pointer-events: none; 
    background-color: #fff; 
}
.history-thumbnail-title {
    font-size: 0.65rem; 
    color: #cbd5e1; 
    padding: 0.25rem 0.5rem; 
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25rem; 
    cursor: pointer; 
}
.history-thumbnail-fullscreen-btn {
    position: absolute;
    top: 0.25rem; 
    right: 0.25rem; 
    padding: 0.15rem; 
    border-radius: 0.25rem; 
    background-color: rgba(30, 41, 59, 0.6); 
    color: #94a3b8; 
    opacity: 0; 
    transition: opacity 0.2s ease-in-out, background-color 0.2s, color 0.2s;
    z-index: 15; 
    cursor: pointer;
}
.history-thumbnail-item:hover .history-thumbnail-fullscreen-btn {
    opacity: 1; 
}
.history-thumbnail-fullscreen-btn:hover {
     background-color: rgba(51, 65, 85, 0.8); 
     color: #e2e8f0; 
}
.history-thumbnail-fullscreen-btn svg {
    width: 0.75rem; 
    height: 0.75rem; 
}

#history-panel-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: #64748b; 
    font-size: 0.875rem; 
}

/* --- Modal Animation Effects --- */
@keyframes fadeInDistort {
    from {
        opacity: 0;
        transform: scale(0.9) skewY(3deg);
    }
    to {
        opacity: 1;
        transform: scale(1) skewY(0deg);
    }
}

@keyframes fadeOutDistort {
    from {
        opacity: 1;
        transform: scale(1) skewY(0deg);
    }
    to {
        opacity: 0;
        transform: scale(0.95) skewY(-2deg);
    }
}

.modal-anim-fade-in {
    animation: fadeInDistort 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.modal-anim-fade-out {
    animation: fadeOutDistort 0.3s cubic-bezier(0.75, 0.2, 0.75, 0.2) forwards;
}


/* --- Modals (Prompt & Config) --- */
.modal-overlay { /* Common class for overlays */
    position: fixed;
    inset: 0; 
    background-color: rgba(15, 23, 42, 0.8); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000; 
    display: none; 
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0; /* Start transparent for animation */
}
.modal-overlay.visible {
    display: flex;
    opacity: 1;
}
.modal-content { /* Common class for content box */
    background-color: #1e293b; 
    padding: 1.5rem 2rem; 
    border-radius: 0.75rem; 
    border: 1px solid #334155; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    width: 100%;
    max-width: 42rem; 
    display: flex;
    flex-direction: column;
    gap: 1rem; 
}
#modal-user-prompt { /* Specific to prompt modal */
    min-height: 100px; 
    resize: vertical; 
}
.modal-button-secondary {
     background-color: #334155; 
     color: #cbd5e1; 
     border: 1px solid #475569; 
}
.modal-button-secondary:hover:not(:disabled) {
     background-color: #475569; 
     border-color: #64748b; 
     color: #fff;
}

.history-nav-button {
    background-color: transparent; /* Make nav buttons less prominent */
    border: none;
    border-radius: 9999px; 
    padding: 0.375rem; 
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b; /* slate-500 for icon, less prominent */
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.history-nav-button:hover:not(:disabled) {
    background-color: rgba(51, 65, 85, 0.7);
    color: #94a3b8; /* slate-400 */
}

.history-nav-button:disabled {
    color: #334155; /* slate-700 - very faded */
    cursor: not-allowed;
    opacity: 0.5;
}

/* Style for truncated prompt subtitle to indicate clickability */
#main-content-subtitle.prompt-truncated {
    cursor: pointer;
    text-decoration: underline dotted rgba(203, 213, 225, 0.5); /* slate-300 dotted underline */
    transition: text-decoration-color 0.2s ease;
}
#main-content-subtitle.prompt-truncated:hover {
    text-decoration-color: rgba(34, 211, 238, 0.8); /* cyan-400 */
}

/* Ensure prompt display modal text area is styled correctly */
#full-prompt-text {
    scrollbar-width: thin;
    scrollbar-color: #475569 rgba(30, 41, 59, 0.5);
}
#full-prompt-text::-webkit-scrollbar {
    width: 6px;
}
#full-prompt-text::-webkit-scrollbar-track {
    background: rgba(51, 65, 85, 0.3);
    border-radius: 3px;
}
#full-prompt-text::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 3px;
}
#full-prompt-text::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* --- Initial View Specific Styles --- */
@keyframes initialViewAppear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.initial-view-animate {
    animation: initialViewAppear 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

#preview-grid-wrapper.initial-view-active {
    transform: none; /* Override the perspective transform */
    display: flex; /* Allow initial-view-content to center */
    align-items: center;
    justify-content: center;
}

#initial-view-content {
    /* Styles already defined in JS, can add more here if needed */
    /* Example: background-color: rgba(15, 23, 42, 0.5); */ 
    /* padding: 2rem; */
    /* border-radius: 0.5rem; */
    width: 100%; /* Ensure it can take full width if needed by children */
}

#initial-api-key-input {
    /* Using .futuristic-input class */
    background-color: rgba(30, 41, 59, 0.9); /* Slightly more opaque */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(34, 211, 238, 0.1);
}

#initial-api-key-input:focus {
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 3px rgba(34, 211, 238, 0.4), 0 0 10px rgba(34,211,238,0.2); 
}

.example-prompt-button {
    background-image: linear-gradient(to right bottom, rgba(51, 65, 85, 0.8), rgba(41, 55, 75, 0.9));
    color: #e2e8f0; /* slate-200 for better contrast */
    padding: 0.8rem 1.5rem; /* Adjusted padding */
    border-radius: 30px; /* More pronounced pill shape */
    font-size: 0.875rem; 
    font-weight: 500; 
    border: 1px solid rgba(71, 85, 105, 0.7); /* slate-600 with alpha */
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s, transform 0.2s ease-out, box-shadow 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.25), 
                inset 0 1px 1px rgba(255,255,255,0.05); /* Subtle inner highlight */
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.example-prompt-button:hover {
    background-image: linear-gradient(to right bottom, rgba(71, 85, 105, 0.9), rgba(61, 75, 95, 1));
    color: #fff;
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3), 
                0 0 15px rgba(34, 211, 238, 0.2), 
                inset 0 1px 1px rgba(255,255,255,0.08);
    border-color: rgba(100, 116, 139, 0.8); /* slate-500 with alpha */
}

.example-prompt-button:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), 
                inset 0 1px 2px rgba(0,0,0,0.1);
    background-image: linear-gradient(to right bottom, rgba(41, 55, 75, 0.9), rgba(31, 45, 65, 1));
}

/* --- Novita.AI Logo Theming --- */
.novita-logo-container {
    /* Ensures the container behaves as expected for width/height of SVG */
    display: inline-block; /* Or block, depending on layout needs */
    line-height: 0; /* Removes extra space if SVG is display: inline-block */
}

.novita-logo-svg-themed {
    /* General fill for the SVG - this might be overridden by specific fills on paths */
    fill: #4CAF50; /* A standard green color */
}

/* If the above doesn't work because paths have their own fill, try targeting paths. 
   You might need to inspect the SVG structure to get the right selectors if it's complex.
   This is a general attempt to override path fills. Use !important sparingly. */
.novita-logo-svg-themed path,
.novita-logo-svg-themed circle,
.novita-logo-svg-themed rect,
.novita-logo-svg-themed polygon,
.novita-logo-svg-themed g {
    fill: #4CAF50 !important; /* Using !important to try and override inline styles if present */
    /* If there are strokes you want to color too: */
    /* stroke: #388E3C !important; /* A darker green for stroke */
}