/**
 * Additional Animation Fixes
 * Ensures all product animations display correctly across all viewports
 */

/* Ensure all animation interfaces stay within the viewport */
.operator-interface,
.chat-interface,
.agent-interface,
.navigator-interface,
.board-interface,
.studio-interface,
.app-interface {
    /* Force interfaces to stay in place */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    
    /* Size constraints with !important to override any conflicting styles */
    width: 90% !important;
    max-width: 90% !important;
    height: auto !important;
    max-height: 90% !important;
    
    /* Handle overflow gracefully */
    overflow: auto !important;
    
    /* Ensure content is contained */
    box-sizing: border-box !important;
    
    /* Make sure they're on top */
    z-index: 10 !important;
    
    /* Ensure animations stay contained */
    margin: 0 auto !important;
}

/* Fix for specific animation containers that might be offset */
.chat-interface .message-list,
.operator-interface .command-container,
.agent-interface .task-list,
.board-interface .board-items {
    max-height: 200px !important;
    overflow-y: auto !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Fix for specific elements that might overflow */
.chat-bubble, 
.command-line, 
.status-item, 
.result-item, 
.content-item, 
.tool-item,
.notification,
.app-icon,
.progress-bar {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
}

/* Make animation-container elements properly positioned */
.animation-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Fix for animation backgrounds to ensure they don't overflow */
.animation-background,
.holographic-grid,
.code-editor-bg,
.network-bg,
.browser-bg,
.board-bg,
.studio-bg,
.app-bg {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
}

/* Responsive behavior for different screen sizes */
@media (max-width: 992px) {
    .operator-interface,
    .chat-interface,
    .agent-interface,
    .navigator-interface,
    .board-interface,
    .studio-interface,
    .app-interface {
        width: 90% !important;
        max-width: 90% !important;
        font-size: 0.95em !important;
    }
}

@media (max-width: 768px) {
    .operator-interface,
    .chat-interface,
    .agent-interface,
    .navigator-interface,
    .board-interface,
    .studio-interface,
    .app-interface {
        width: 92% !important;
        max-width: 92% !important;
        font-size: 0.9em !important;
    }
    
    .animated-placeholder {
        min-height: 220px !important;
    }
}

@media (max-width: 576px) {
    .operator-interface,
    .chat-interface,
    .agent-interface,
    .navigator-interface,
    .board-interface,
    .studio-interface,
    .app-interface {
        width: 95% !important;
        max-width: 95% !important;
        font-size: 0.85em !important;
        max-height: 95% !important;
    }
    
    .animated-placeholder {
        min-height: 200px !important;
    }
}

/* Add forced visibility to ensure elements appear */
.animated-placeholder[data-product] {
    visibility: visible !important;
}

/* Fix for Safari and iOS specific issues */
@supports (-webkit-touch-callout: none) {
    .operator-interface,
    .chat-interface,
    .agent-interface,
    .navigator-interface,
    .board-interface,
    .studio-interface,
    .app-interface {
        -webkit-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
    }
}