/* ========================================
   Ellis Native Federation Styles
   Direct Web Component Integration
   ======================================== */

/* Base styles for Native Federation container */
.ellis-native-federation-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: transparent;
    overflow: hidden;
}

/* ========================================
   CDK Overlay Customization
   ======================================== */

/* Extend CDK overlay positioning for Ellis chatbot module */
.cdk-overlay-connected-position-bounding-box {
    left: 150px !important;
}

/* Ellis web component when loaded via Native Federation */
.ellis-native-federation-container ai-digital-assistant-root {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    display: block !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important; /* Prevent internal content overflow */
    box-sizing: border-box !important;
}

/* Ensure Shadow DOM content is properly styled */
.ellis-native-federation-container ai-digital-assistant-root::part(container) {
    width: 100%;
    height: 100%;
    max-height: 100%;
    background: transparent;
    overflow: hidden;
    box-sizing: border-box;
}

/* Additional constraints for Ellis component internal structure */
.ellis-native-federation-container ai-digital-assistant-root * {
    box-sizing: border-box !important;
}

/* Force Ellis content to fit within container */
.ellis-native-federation-container ai-digital-assistant-root > * {
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Specific constraints for Ellis chat interface elements */
.ellis-native-federation-container ai-digital-assistant-root [class*="chat"],
.ellis-native-federation-container ai-digital-assistant-root [class*="conversation"],
.ellis-native-federation-container ai-digital-assistant-root [class*="messages"],
.ellis-native-federation-container ai-digital-assistant-root [class*="dialog"] {
    max-height: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Ensure Ellis input area stays within bounds */
.ellis-native-federation-container ai-digital-assistant-root [class*="input"],
.ellis-native-federation-container ai-digital-assistant-root [class*="textarea"],
.ellis-native-federation-container ai-digital-assistant-root form {
    position: relative !important;
    bottom: auto !important;
    max-width: 100% !important;
}

/* Override any conflicting styles from the host application */
.ellis-native-federation-container * {
    box-sizing: border-box !important;
}

/* ========================================
   Native Federation Loading States
   ======================================== */

.ellis-native-federation-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: #f9fafb;
    font-family: 'Calibre-R', Arial, sans-serif;
}

.ellis-native-federation-loading .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #003F2D;
    border-radius: 50%;
    animation: native-federation-spin 1s linear infinite;
    margin-bottom: 12px;
}

.ellis-native-federation-loading .loading-text {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

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

/* ========================================
   Native Federation Error States
   ======================================== */

.ellis-native-federation-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: #f9fafb;
    text-align: center;
    padding: 20px;
    font-family: 'Calibre-R', Arial, sans-serif;
}

.ellis-native-federation-error .error-icon {
    color: #dc2626;
    margin-bottom: 12px;
}

.ellis-native-federation-error .error-message {
    color: #374151;
    font-size: 14px;
    margin: 0 0 16px 0;
    line-height: 1.4;
}

.ellis-native-federation-error .fallback-message {
    color: #6b7280;
    font-size: 13px;
    margin: 0;
    font-style: italic;
}

/* ========================================
   Direct Component Integration Fixes
   ======================================== */

/* Fix potential CSS conflicts with host application */
.ellis-native-federation-container ai-digital-assistant-root {
    /* Reset any inherited styles that might interfere */
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    
    /* Ensure proper isolation */
    contain: layout style paint !important;
    
    /* Prevent host styles from bleeding in */
    all: initial !important;
    
    /* Re-establish essential properties */
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

/* Ensure Ellis buttons and interactive elements work properly */
.ellis-native-federation-container ai-digital-assistant-root button,
.ellis-native-federation-container ai-digital-assistant-root [role="button"],
.ellis-native-federation-container ai-digital-assistant-root .clickable,
.ellis-native-federation-container ai-digital-assistant-root .suggested-prompt {
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: none !important;
    touch-action: manipulation !important;
}

/* Enhanced button interactions for Native Federation */
.ellis-native-federation-container ai-digital-assistant-root button:hover,
.ellis-native-federation-container ai-digital-assistant-root [role="button"]:hover,
.ellis-native-federation-container ai-digital-assistant-root .suggested-prompt:hover {
    opacity: 0.9 !important;
    transition: opacity 0.2s ease !important;
}

.ellis-native-federation-container ai-digital-assistant-root button:active,
.ellis-native-federation-container ai-digital-assistant-root [role="button"]:active,
.ellis-native-federation-container ai-digital-assistant-root .suggested-prompt:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
}

/* ========================================
   Shadow DOM Penetration Styles
   ======================================== */

/* These styles will be injected into the Shadow DOM if needed */
.ellis-shadow-dom-styles {
    /* Primary container styles */
    --ellis-primary-color: #003F2D;
    --ellis-background-color: #ffffff;
    --ellis-text-color: #374151;
    --ellis-border-radius: 8px;
    --ellis-font-family: 'Calibre-R', Arial, sans-serif;
    
    /* Interactive element styles */
    --ellis-button-hover: rgba(0, 63, 45, 0.1);
    --ellis-button-active: rgba(0, 63, 45, 0.2);
    --ellis-focus-outline: 2px solid #003F2D;
}

/* ========================================
   Responsive Design for Native Federation
   ======================================== */

@media (max-width: 768px) {
    .ellis-native-federation-container {
        /* Ensure mobile optimization */
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch;
    }
    
    .ellis-native-federation-container ai-digital-assistant-root {
        /* Mobile-specific adjustments */
        min-height: 400px !important;
    }
    
    .ellis-native-federation-loading,
    .ellis-native-federation-error {
        padding: 16px;
    }
    
    .ellis-native-federation-loading .loading-text,
    .ellis-native-federation-error .error-message {
        font-size: 13px;
    }
}

/* ========================================
   Performance Optimizations
   ======================================== */

/* GPU acceleration for smooth animations */
.ellis-native-federation-container {
    will-change: transform;
    transform: translateZ(0);
}

/* Optimize rendering */
.ellis-native-federation-container ai-digital-assistant-root {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   Accessibility Enhancements
   ======================================== */

.ellis-native-federation-container [role="button"]:focus-visible,
.ellis-native-federation-container button:focus-visible {
    outline: var(--ellis-focus-outline, 2px solid #003F2D) !important;
    outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .ellis-native-federation-container {
        border: 1px solid currentColor;
    }
    
    .ellis-native-federation-container ai-digital-assistant-root {
        forced-color-adjust: none;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .ellis-native-federation-loading .loading-spinner {
        animation-duration: 2s;
    }
    
    .ellis-native-federation-container * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ========================================
   Debug Styles (Development Only)
   ======================================== */

.ellis-debug .ellis-native-federation-container {
    border: 2px dashed rgba(0, 255, 0, 0.3);
}

.ellis-debug .ellis-native-federation-container ai-digital-assistant-root {
    outline: 1px dotted rgba(255, 0, 0, 0.3);
}

.ellis-debug .ellis-native-federation-container::before {
    content: "Native Federation Mode";
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 255, 0, 0.8);
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    z-index: 10000;
}

/* ========================================
   Integration with MudBlazor Components
   ======================================== */

/* Ensure compatibility with MudBlazor dialog system */
.mud-dialog-container .ellis-native-federation-container {
    position: relative;
    z-index: auto;
}

/* Prevent conflicts with MudBlazor overlays */
.mud-overlay ~ .ellis-assistant-window .ellis-native-federation-container {
    z-index: 1400; /* MudBlazor overlay z-index + 1 */
}

/* ========================================
   Dynamic CSS Custom Properties
   ======================================== */

/* These can be set dynamically via JavaScript */
.ellis-native-federation-container {
    --ellis-container-width: 100%;
    --ellis-container-height: 100%;
    --ellis-container-background: transparent;
    
    width: var(--ellis-container-width);
    height: var(--ellis-container-height);
    background: var(--ellis-container-background);
}