/**
 * UI Resources - Sandbox Iframe Styles
 *
 * Scoped styles for sandboxed iframes containing UI resources.
 * CRITICAL: All selectors MUST be scoped to prevent global pollution.
 *
 * Category: Frontend - CSS
 * Created: 2026-02-09
 */

/* =============================================================================
   Sandboxed Iframe Container (SCOPED)
   ============================================================================= */

.chat-window-container .ui-resource-iframe {
    width: 95%;
    min-height: 220px;
    height: 220px;
    border: none;
    border-radius: 8px;
    background: #ffffff;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    transition: height 0.3s ease;
}

@media (prefers-color-scheme: dark) {
    .chat-window-container .ui-resource-iframe {
        background: #1e1e1e;
    }
}

/* =============================================================================
   Loading State (SCOPED)
   ============================================================================= */

.chat-window-container .ui-resource-iframe.loading {
    opacity: 0.6;
    pointer-events: none;
}

.chat-window-container .ui-resource-iframe.loading::after {
    content: 'Loading visualization...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    border-radius: 4px;
    font-size: 14px;
}

/* =============================================================================
   iframe Security Indicator (SCOPED)
   ============================================================================= */

.chat-window-container .ui-resource-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #4caf50;
    border-radius: 2px 0 0 2px;
    opacity: 0.3;
}

.chat-window-container .ui-resource-wrapper:hover::before {
    opacity: 0.6;
}

/* =============================================================================
   Responsive iframe (SCOPED)
   ============================================================================= */

@media (max-width: 768px) {
    .chat-window-container .ui-resource-iframe {
        min-height: 200px;
    }
}

@media (max-width: 480px) {
    .chat-window-container .ui-resource-iframe {
        min-height: 180px;
    }
}