/* Shared "AI" pages styling (MudBlazor-based)
   Keep non-invasive: only applies inside `.ai-page` wrapper.
*/

.ai-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ai-page .ai-hero {
    border-radius: 12px;
    overflow: hidden;
}

.ai-page .ai-hero__content {
    padding: 16px;
}

.ai-page .ai-hero__title {
    font-weight: 700;
}

.ai-page .ai-hero__subtitle {
    opacity: .8;
}

.ai-page .ai-section {
    border-radius: 12px;
}

.ai-page .ai-help {
    border-radius: 12px;
}

.ai-page .ai-help .mud-list-item {
    padding-top: 4px;
    padding-bottom: 4px;
}

.ai-page .ai-kpi-card {
    border-radius: 16px;
}

/* Chat */
.ai-page .chat-container {
    border-radius: 12px;
    overflow: hidden;
}

.ai-page .messages-container {
    scroll-behavior: smooth;
}

.ai-page .message-bubble {
    max-width: 80%;
    border-radius: 16px;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.ai-page .message-bubble:hover {
    transform: translateY(-1px);
}

.ai-page .user-bubble {
    border-bottom-right-radius: 6px;
}

.ai-page .ai-bubble {
    border-bottom-left-radius: 6px;
}

.ai-page .error-message .message-bubble {
    border-left: 3px solid var(--mud-palette-error);
}

.ai-page .markdown-content pre {
    background: var(--mud-palette-background-grey);
    padding: 14px;
    border-radius: 10px;
    overflow-x: auto;
    margin: 12px 0;
    border: 1px solid var(--mud-palette-lines-default);
}

.ai-page .markdown-content code {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.92em;
}

.ai-page .markdown-content code:not(pre code) {
    background: var(--mud-palette-background-grey);
    padding: 2px 6px;
    border-radius: 6px;
}

.ai-page .input-area {
    backdrop-filter: blur(10px);
}

@media (max-width: 600px) {
    .ai-page .message-bubble { max-width: 92%; }
}