/**
 * Image Loading States
 * Visual feedback for image generation
 */

/* Loading Indicator */
.image-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: 200px;
    background: var(--color-bg-secondary, var(--color-bg-primary));
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border, #333);

.image-loading-spinner {
    width: calc(var(--spacing-2xl) * 1.25);
    height: calc(var(--spacing-2xl) * 1.25);
    border: 3px solid var(--color-border, #333);
    border-top-color: var(--color-primary, var(--color-success));
    border-radius: var(--radius-full);
    animation: image-spin 1s linear infinite;
    margin-bottom: 1rem;

@keyframes image-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }

.image-loading-text {
    color: var(--color-text-secondary, var(--color-text-secondary));
    font-size: 0.875rem;
    font-style: italic;
    text-align: center;

.image-loading-progress {
    width: 200px;
    height: var(--spacing-sm);
    background: var(--color-bg-primary, #0a0a0f);
    border-radius: var(--radius-xs);
    overflow: hidden;
    margin-top: 1rem;

.image-loading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary, var(--color-success)), var(--color-secondary, #0088ff));
    border-radius: var(--radius-xs);
    animation: image-progress 2s ease-in-out infinite;

@keyframes image-progress {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }

/* Error State */
.image-error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: 200px;
    background: var(--color-bg-secondary, var(--color-bg-primary));
    border-radius: var(--radius-md);
    border: 1px solid var(--color-danger, var(--color-error));

.image-error-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;

.image-error-text {
    color: var(--color-text-secondary, var(--color-text-secondary));
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: 1rem;

.image-retry-btn {
    padding: 0.5rem 1rem;
    background: var(--color-primary, var(--color-success));
    color: var(--color-bg-primary, #0a0a0f);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;

.image-retry-btn:hover {
    background: var(--color-primary-hover, #00cc6f);
    transform: translateY(-1px);

/* Success State */
.image-success-indicator {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-success, var(--color-success));
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0 0 0 var(--radius-md);
    font-size: 0.75rem;
    font-weight: bold;
    z-index: 10;
    animation: image-success-fade 3s ease-out forwards;

@keyframes image-success-fade {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }

/* Inline Loading in Cards */
.avatar-loading-inline,
.npc-portrait-loading {
    position: relative;

.avatar-loading-inline::after,
.npc-portrait-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--spacing-lg) * 1.25);
    height: calc(var(--spacing-lg) * 1.25);
    margin: -var(--spacing-sm) 0 0 -var(--spacing-sm);
    border: 2px solid rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.3);
    border-top-color: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.8);
    border-radius: var(--radius-full);
    animation: avatar-spin 0.8s linear infinite;
    z-index: 5;

/* Skeleton Loading */
.image-skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-secondary, var(--color-bg-primary)) 0%,
        var(--color-bg-primary, #0a0a0f) 50%,
        var(--color-bg-secondary, var(--color-bg-primary)) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }

}}}}}}}}}}}}}}}}}}