/* Agent Chat Component Styles */

.thinking-dots {
    display: flex;
    gap: 4px;
}

.thinking-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--mud-palette-primary);
    animation: thinking 1.4s infinite ease-in-out both;
}

.thinking-dots span:nth-child(1) { 
    animation-delay: -0.32s; 
}

.thinking-dots span:nth-child(2) { 
    animation-delay: -0.16s; 
}

@keyframes thinking {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

.sparkle-thinking {
    animation: sparkle-pulse 1.5s ease-in-out infinite;
}

@keyframes sparkle-pulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
    }
}

.typing-indicator {
    width: 2px;
    height: 14px;
    background-color: var(--mud-palette-primary);
    animation: blink 1s infinite;
    display: inline-block;
    margin-left: 2px;
}

@keyframes blink {
    0%, 50% { 
        opacity: 1; 
    }
    51%, 100% { 
        opacity: 0; 
    }
}

@keyframes float {
    0%, 100% { 
        transform: rotate(-45deg) translateY(0px); 
    }
    50% { 
        transform: rotate(-45deg) translateY(-10px); 
    }
}

@keyframes pulse {
    0%, 100% { 
        opacity: 0.3; 
        transform: translate(-50%, -50%) scale(1); 
    }
    50% { 
        opacity: 0.5; 
        transform: translate(-50%, -50%) scale(1.1); 
    }
}

.markdown-content h1, 
.markdown-content h2, 
.markdown-content h3 {
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.markdown-content p {
    margin-bottom: 0.5em;
}

.markdown-content ul, 
.markdown-content ol {
    margin-bottom: 0.5em;
    padding-left: 1.5em;
}

.markdown-content code {
    background-color: rgba(0,0,0,0.1);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}

.markdown-content pre {
    background-color: rgba(0,0,0,0.1);
    padding: 1em;
    border-radius: 5px;
    overflow-x: auto;
    margin: 0.5em 0;
}

.border-bottom {
    border-bottom: 1px solid rgba(0,0,0,0.12);
}

.border-top {
    border-top: 1px solid rgba(0,0,0,0.12);
}

/* Remove scrollbar from AI Co-Pilot modal - use more specific selector */
.mud-dialog .mud-dialog-content {
    overflow: hidden !important;
    overflow-y: hidden !important;
}

/* Ensure the grid content within the modal can scroll properly where needed */
.mud-dialog .mud-dialog-content .mud-grid-item .mud-paper[style*="overflow-y: auto"] {
    overflow-y: auto !important;
}