/* =====================================================================
   EGKits AI Assistant — module-level styles.

   Everything is scoped under either `.ai-page` (full-screen routes) or the
   per-component class. The :root token block below is the single source of
   truth for tints, radii, shadows and the empty-state visual language —
   anywhere a magic px/rgba value used to live, prefer one of these vars.
   ===================================================================== */

:root {
    /* Surface tints — primary blended into the surface at increasing strength.
       Use --ai-tint-xs for whisper-quiet hovers, --ai-tint-lg for the strongest
       "this is active / hero" accent. */
    --ai-tint-xs: color-mix(in srgb, var(--mud-palette-primary) 3%, var(--mud-palette-surface));
    --ai-tint-sm: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
    --ai-tint-md: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    --ai-tint-lg: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));

    /* Corner radius scale. */
    --ai-radius-sm: 8px;
    --ai-radius-md: 12px;
    --ai-radius-lg: 16px;
    --ai-radius-xl: 18px;
    --ai-radius-pill: 999px;

    /* Elevation — three steady steps + a dedicated hero shadow for floating panels. */
    --ai-elevation-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
    --ai-elevation-md: 0 10px 28px rgba(15, 23, 42, 0.10);
    --ai-elevation-lg: 0 14px 36px rgba(15, 23, 42, 0.14);
    --ai-elevation-floating: 0 24px 60px rgba(15, 23, 42, 0.28);

    /* Lines + thin glass borders. */
    --ai-border: 1px solid var(--mud-palette-lines-default);
    --ai-border-dashed: 2px dashed var(--mud-palette-lines-default);

    /* Motion. */
    --ai-motion-fast: 120ms ease;
    --ai-motion-base: 180ms ease;
}

/* =====================================================================
   Shared page primitives
   ===================================================================== */

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

.ai-page .ai-hero {
    border-radius: var(--ai-radius-md);
    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,
.ai-page .ai-help,
.ai-page .chat-container { border-radius: var(--ai-radius-md); overflow: hidden; }

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

.ai-page .ai-kpi-card { border-radius: var(--ai-radius-lg); }

/* Cards/papers that need the standard 1-px divider border + radius. */
.ai-card-bordered {
    border: var(--ai-border);
    border-radius: var(--ai-radius-md);
    height: 100%;
}

/* =====================================================================
   Empty state — used by AIAgentEmptyState.razor.
   ===================================================================== */

.ai-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 24px;
    text-align: center;
    border: var(--ai-border-dashed);
    border-radius: var(--ai-radius-md);
    background: var(--ai-tint-xs);
}

.ai-empty-state__icon {
    font-size: 3.25rem !important;
    opacity: .55;
    margin-bottom: 4px;
}

.ai-empty-state__title    { font-weight: 600; }
.ai-empty-state__caption  { max-width: 480px; }
.ai-empty-state__actions  {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

/* =====================================================================
   Severity card — used by AIAgentSeverityCard (recommendations, gaps,
   proposals, audit findings). Coloured left border + soft tinted background
   keyed off the severity slug.
   ===================================================================== */

.ai-sev-card {
    border: var(--ai-border);
    border-radius: var(--ai-radius-md);
    border-left-width: 4px;
    border-left-style: solid;
    transition: transform var(--ai-motion-base), box-shadow var(--ai-motion-base);
}

.ai-sev-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--ai-elevation-sm);
}

.ai-sev-card--success { border-left-color: var(--mud-palette-success); }
.ai-sev-card--info,
.ai-sev-card--low     { border-left-color: var(--mud-palette-info); }
.ai-sev-card--warning,
.ai-sev-card--medium,
.ai-sev-card--pending { border-left-color: var(--mud-palette-warning); }
.ai-sev-card--error,
.ai-sev-card--high,
.ai-sev-card--rejected { border-left-color: var(--mud-palette-error); }
.ai-sev-card--applied  { border-left-color: var(--mud-palette-success); }
.ai-sev-card--neutral  { border-left-color: var(--mud-palette-divider); }

/* =====================================================================
   Chat-message bubbles (consumed by AiAssistantMessageBubble + .ai-page chat
   shells). Lifted out of AiAssistantDock so the component renders correctly
   wherever it's used.
   ===================================================================== */

.ai-msg {
    display: flex;
    gap: 10px;
    padding: 8px 4px;
}

.ai-msg--user { flex-direction: row-reverse; }

.ai-msg .msg-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    flex-shrink: 0;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.ai-msg--user .msg-avatar {
    color: var(--mud-palette-primary-text);
    background: linear-gradient(135deg,
        var(--mud-palette-primary),
        color-mix(in srgb, var(--mud-palette-primary) 62%, var(--mud-palette-secondary, var(--mud-palette-info))));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mud-palette-primary) 32%, transparent);
}

.ai-msg .msg-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.ai-msg--user .msg-body { align-items: flex-end; }

.ai-msg .msg-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.ai-msg .msg-text {
    border-radius: var(--ai-radius-lg);
    padding: 11px 15px;
    background: var(--mud-palette-surface);
    border: var(--ai-border);
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    box-shadow: var(--ai-elevation-sm);
}

.ai-msg .msg-text--assistant {
    border-bottom-left-radius: 6px;
    background:
        radial-gradient(120% 140% at 0% 0%,
            color-mix(in srgb, var(--mud-palette-primary) 5%, transparent),
            transparent 60%),
        var(--mud-palette-surface);
}

.ai-msg--user .msg-text {
    background: linear-gradient(135deg,
        var(--mud-palette-primary),
        color-mix(in srgb, var(--mud-palette-primary) 78%, var(--mud-palette-secondary, var(--mud-palette-info))));
    color: var(--mud-palette-primary-text);
    border: none;
    border-bottom-right-radius: 6px;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--mud-palette-primary) 26%, transparent);
}

/* Message actions (copy / feedback) stay quiet until the row is hovered. */
.ai-msg .msg-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity var(--ai-motion-base), transform var(--ai-motion-base);
}

.ai-msg:hover .msg-actions,
.ai-msg:focus-within .msg-actions {
    opacity: 1;
    transform: none;
}

@media (hover: none) {
    .ai-msg .msg-actions { opacity: 1; transform: none; }
}

.ai-msg .msg-text :is(p, ul, ol, pre, blockquote):first-child { margin-top: 0; }
.ai-msg .msg-text :is(p, ul, ol, pre, blockquote):last-child  { margin-bottom: 0; }

.ai-msg .msg-text pre {
    background: var(--mud-palette-background-grey);
    border-radius: var(--ai-radius-sm);
    padding: 12px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
}

.ai-msg .msg-text code:not(pre code) {
    background: var(--mud-palette-background-grey);
    padding: 2px 6px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
}

/* =====================================================================
   Legacy .ai-page bubble classes — retained for the older chat shell.
   ===================================================================== */

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

.ai-page .message-bubble {
    max-width: 80%;
    border-radius: var(--ai-radius-lg);
    transition: transform var(--ai-motion-fast), box-shadow var(--ai-motion-fast);
}

.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: var(--ai-border);
}

.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%; }
}