/* Global styles - GPI Color Scheme */
html, body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* GPI Color Variables */
:root {
    --gpi-emerald: #10b981;
    --gpi-cyan: #06b6d4;
    --gpi-blue: #3b82f6;
    --gpi-slate-900: #0f172a;
    --gpi-slate-800: #1e293b;
    --gpi-slate-700: #334155;
    --gpi-slate-600: #475569;
    --gpi-slate-500: #64748b;
    --gpi-slate-400: #94a3b8;
    --gpi-slate-300: #cbd5e1;
    --gpi-slate-200: #e2e8f0;
    --gpi-slate-100: #f1f5f9;
    --gpi-slate-50: #f8fafc;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk3NUw5OS45ODMgMjkzLjcxN0M5OS4yMDE1IDI5NC40OTggOTguMDQxNCAyOTQuOTgzIDk2Ljc1ODcgMjk0Ljk4M0gyNTEuNzY2QzI1MC40ODMgMjk0Ljk4MyAyNDkuMzIzIDI5NC40OTggMjQ4LjU0MiAyOTMuNzE3TDgxLjQ3MzEgNTIuNzk3NUM4MC42NzUzIDUyLjAwODMgODAuMTc4MSA1MC45MTIxIDgwLjE3ODEgNDkuNjI5MUM4MC4xNzgxIDQ4LjM0NjIgODAuNjc1MyA0Ny4yNSA4MS40NzMxIDQ2LjQ2ODhMMjYzLjE1MiA1MS45Nzg5QzI2My44MjggNTEuNDgzNyAyNjQuNzE3IDUxIDI2NS4xMjQgNTFIMjYzLjUwNloiIGZpbGw9IiNGRjYyNjIiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* Chat container */
.chat-container {
    display: flex;
    flex-direction: column;
}

/* Message styling - Updated for GPI colors */
.message-user {
    background-color: rgba(16, 185, 129, 0.1) !important; /* Light emerald */
}

.message-assistant {
    background-color: rgba(6, 182, 212, 0.1) !important; /* Light cyan */
}

.message-system {
    background-color: rgba(59, 130, 246, 0.05) !important; /* Light blue */
}

.message-error {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

/* Markdown content styling - Updated for GPI colors */
.markdown-content {
    line-height: 1.6;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--gpi-emerald);
}

.markdown-content h1 { font-size: 2em; }
.markdown-content h2 { font-size: 1.5em; }
.markdown-content h3 { font-size: 1.25em; }

.markdown-content p {
    margin-bottom: 1rem;
}

.markdown-content code {
    background-color: rgba(16, 185, 129, 0.1);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
}

.markdown-content pre {
    background-color: var(--gpi-slate-900);
    color: var(--gpi-slate-100);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1rem 0;
}

.markdown-content pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
}

.markdown-content ul,
.markdown-content ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.markdown-content li {
    margin-bottom: 0.5rem;
}

.markdown-content blockquote {
    border-left: 4px solid var(--gpi-emerald);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--gpi-slate-500);
    font-style: italic;
}

.markdown-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
}

.markdown-content table th,
.markdown-content table td {
    border: 1px solid var(--gpi-slate-200);
    padding: 0.5rem;
    text-align: left;
}

.markdown-content table th {
    background-color: rgba(16, 185, 129, 0.1);
    font-weight: 600;
}

.markdown-content a {
    color: var(--gpi-emerald);
    text-decoration: none;
}

.markdown-content a:hover {
    text-decoration: underline;
}

.markdown-content hr {
    border: none;
    border-top: 2px solid var(--gpi-slate-200);
    margin: 1.5rem 0;
}

/* Scrollbar styling for chat - Updated for GPI colors */
.overflow-y-auto::-webkit-scrollbar {
    width: 8px;
}

.overflow-y-auto::-webkit-scrollbar-track {
    background: var(--gpi-slate-100);
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    background: var(--gpi-emerald);
    border-radius: 4px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: var(--gpi-cyan);
}

/* Loading indicator */
.loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* ===========================================
   Chat Bubble Animations (iMessage-style)
   =========================================== */

/* Slide-in animation for chat bubbles */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* Subtle pulse animation for tool call spinner display */
@keyframes pulse-subtle {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }
    50% {
        opacity: 0.9;
        box-shadow: 0 2px 8px rgba(16,185,129,0.25);
    }
}

/* Tool call display styling */
.tool-call-display {
    animation: fadeInUp 0.2s ease-out, pulse-subtle 2s ease-in-out infinite 0.2s;
}

/* Chat bubble base styles */
.chat-bubble {
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: both;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* User messages slide in from right */
.justify-end .chat-bubble {
    animation-name: slideInRight;
}

/* AI/assistant messages slide in from left */
.justify-start .chat-bubble {
    animation-name: slideInLeft;
}

/* Tool/system messages fade in from center */
.justify-center .chat-bubble {
    animation-name: fadeInUp;
    animation-duration: 0.2s;
}

/* Subtle hover effect on bubbles */
.chat-bubble:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

/* Typing indicator animation for tool messages */
.justify-center .chat-bubble {
    animation: fadeInUp 0.2s ease-out, pulse 2s ease-in-out infinite 0.2s;
}

/* Export actions slide-in animation */
.export-actions {
    animation: fadeInUp 0.15s ease-out;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.export-actions:hover {
    opacity: 1;
}

/* Smooth scrolling for chat container */
.overflow-y-auto {
    scroll-behavior: smooth;
}

/* Message content fade-in for streaming */
.message-content {
    animation: fadeInUp 0.15s ease-out;
}

/* GPI Gradient text utility */
.gpi-gradient-text {
    background: linear-gradient(135deg, var(--gpi-emerald), var(--gpi-cyan), var(--gpi-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* GPI Gradient background utility */
.gpi-gradient-bg {
    background: linear-gradient(135deg, var(--gpi-emerald), var(--gpi-cyan));
}

/* ===========================================
   GPI Button Styles - Gradient Default
   =========================================== */

/* Primary filled buttons get the gradient */
.mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(135deg, var(--gpi-emerald), var(--gpi-cyan)) !important;
    color: var(--gpi-slate-900) !important;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
    transition: all 0.3s ease;
}

.mud-button-filled.mud-button-filled-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
}

.mud-button-filled.mud-button-filled-primary:active {
    transform: translateY(0);
}

/* Secondary filled buttons */
.mud-button-filled.mud-button-filled-secondary {
    background: linear-gradient(135deg, var(--gpi-cyan), var(--gpi-blue)) !important;
    color: white !important;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3);
    transition: all 0.3s ease;
}

.mud-button-filled.mud-button-filled-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(6, 182, 212, 0.4);
}

/* Tertiary filled buttons */
.mud-button-filled.mud-button-filled-tertiary {
    background: linear-gradient(135deg, var(--gpi-blue), #8b5cf6) !important;
    color: white !important;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

.mud-button-filled.mud-button-filled-tertiary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4);
}

/* Outlined buttons with gradient border effect */
.mud-button-outlined.mud-button-outlined-primary {
    border: 2px solid var(--gpi-emerald) !important;
    color: var(--gpi-emerald) !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.mud-button-outlined.mud-button-outlined-primary:hover {
    background: linear-gradient(135deg, var(--gpi-emerald), var(--gpi-cyan)) !important;
    color: var(--gpi-slate-900) !important;
    border-color: transparent !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
}

/* Text buttons */
.mud-button-text.mud-button-text-primary {
    color: var(--gpi-emerald) !important;
    font-weight: 600;
    transition: all 0.2s ease;
}

.mud-button-text.mud-button-text-primary:hover {
    background: rgba(16, 185, 129, 0.1) !important;
}

/* Fab buttons */
.mud-fab-primary {
    background: linear-gradient(135deg, var(--gpi-emerald), var(--gpi-cyan)) !important;
    color: var(--gpi-slate-900) !important;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
    transition: all 0.3s ease;
}

.mud-fab-primary:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
}

/* Icon buttons with primary color */
.mud-icon-button-primary {
    color: var(--gpi-emerald) !important;
    transition: all 0.2s ease;
}

.mud-icon-button-primary:hover {
    background: rgba(16, 185, 129, 0.1) !important;
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chat-container {
        height: calc(100vh - 100px) !important;
    }

    .markdown-content {
        font-size: 0.9rem;
    }

    /* Faster animations on mobile */
    .chat-bubble {
        animation-duration: 0.2s;
    }
}