/* 
 * Shared Markdown Content Styling
 * 
 * Usage: Add the class "markdown-content" to any container that displays markdown-converted HTML
 * 
 * Example:
 * <div class="markdown-content">
 *     @((MarkupString)MarkdownService.ToHtml(content))
 * </div>
 * 
 * This provides consistent styling for:
 * - Headings (h1-h6) with proper hierarchy and borders
 * - Lists (ul/ol) with proper indentation and bullet points
 * - Tables with alternating row colors and borders
 * - Code blocks and inline code with background colors
 * - Blockquotes with left border styling
 * - Links with hover effects
 * - Responsive design for mobile devices
 * - Dark theme support
 */
.markdown-content {
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
    font-family: var(--mud-typography-default-family);
    font-size: var(--mud-typography-body1-size);
}

/* Force proper list styling even if global CSS resets interfere */
.markdown-content ul,
.markdown-content ol {
    display: block !important;
}

.markdown-content li {
    display: list-item !important;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    font-family: var(--mud-typography-default-family);
}

.markdown-content h1 {
    font-size: 1.5rem;
    border-bottom: 2px solid var(--mud-palette-divider);
    padding-bottom: 0.3rem;
}

.markdown-content h2 {
    font-size: 1.3rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    padding-bottom: 0.2rem;
}

.markdown-content h3 {
    font-size: 1.1rem;
}

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

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

.markdown-content ul {
    list-style-type: disc;
    list-style-position: outside;
}

.markdown-content ol {
    list-style-type: decimal;
    list-style-position: outside;
}

.markdown-content ul ul {
    list-style-type: circle;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.markdown-content ul ul ul {
    list-style-type: square;
}

.markdown-content li {
    margin-bottom: 0.25rem;
    padding-left: 0.25rem;
}

.markdown-content blockquote {
    border-left: 4px solid var(--mud-palette-primary);
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    background-color: var(--mud-palette-background-grey);
    font-style: italic;
    border-radius: 4px;
}

.markdown-content code {
    background-color: var(--mud-palette-background-grey);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
}

.markdown-content pre {
    background-color: var(--mud-palette-background-grey);
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1rem 0;
    border: 1px solid var(--mud-palette-divider);
}

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

.markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-divider);
}

.markdown-content th,
.markdown-content td {
    border: 1px solid var(--mud-palette-divider);
    padding: 0.75rem;
    text-align: left;
}

.markdown-content th {
    background-color: var(--mud-palette-background-grey);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.markdown-content tr:nth-child(even) {
    background-color: rgba(var(--mud-palette-background-grey-rgb), 0.3);
}

.markdown-content strong {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.markdown-content em {
    font-style: italic;
}

.markdown-content a {
    color: var(--mud-palette-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.markdown-content a:hover {
    text-decoration: underline;
    color: var(--mud-palette-primary-darken);
}

.aura-mermaid-block {
    width: 100%;
    box-sizing: border-box;
    margin: 1rem 0;
    padding: 0.85rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 72%, transparent);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
}

/* AI-Nachrichten schrumpfen normalerweise auf ihre intrinsische Inhaltsbreite. Enthält die
   Antwort ein Diagramm, darf die Bubble die gesamte verfügbare Chatbreite für die Grafik nutzen. */
.assistant-message:has(.aura-mermaid-block) > .chat-message-alignment,
.assistant-message:has(.aura-mermaid-block) .chat-bubble-with-controls {
    width: 100%;
}

.aura-mermaid-toolbar {
    display: flex;
    gap: 0.45rem;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.aura-mermaid-action {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 999px;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.aura-mermaid-action:hover {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-primary);
}

.aura-mermaid-viewer {
    min-width: 0;
}

.aura-mermaid-canvas {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 45%, transparent);
    border-radius: 9px;
    background: #FCFCFD;
    cursor: zoom-in;
    isolation: isolate;
}

.aura-mermaid-canvas:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.aura-mermaid-canvas.aura-mermaid-canvas-pannable {
    cursor: grab;
}

.aura-mermaid-canvas.aura-mermaid-canvas-dragging {
    cursor: grabbing;
    user-select: none;
}

.aura-mermaid-canvas.aura-mermaid-canvas-zoomed {
    max-height: min(70vh, 760px);
    touch-action: none;
}

.aura-mermaid-canvas svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
}

.aura-mermaid-loading,
.aura-mermaid-error {
    padding: 0.9rem 1rem;
    border-radius: 8px;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    font-size: 0.88rem;
}

.aura-mermaid-canvas-error .aura-mermaid-error {
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
    color: var(--mud-palette-error);
}

.aura-mermaid-error-detail {
    max-height: 12rem;
    margin: 0.65rem 0;
    padding: 0.55rem 0.65rem;
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 28%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-background) 88%, transparent);
    color: var(--mud-palette-text-primary);
    font: 0.78rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.aura-mermaid-repair {
    padding: 0.38rem 0.7rem;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font: inherit;
    cursor: pointer;
}

.aura-mermaid-repair:hover {
    filter: brightness(0.96);
}

.aura-mermaid-status {
    margin-top: 0.5rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
}

.aura-mermaid-status-error {
    color: var(--mud-palette-error);
}

.aura-mermaid-export {
    margin-top: 0.75rem;
}

.aura-mermaid-export summary {
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
}

/*
 * Nutzergeschriebenes Markdown in einer BEARBEITUNGS-Umgebung: das Rich-Chat-Eingabefeld
 * (contenteditable) und die Vorschau im Vorlagen-Editor. Bewusst NICHT ".markdown-content" —
 * dort tragen h1/h2 Trennlinien und die Grundschrift ist body1; beides passt nicht in ein
 * Eingabefeld.
 *
 * Warum global und nicht im Scoped-CSS der Komponente: das Eingabefeld befüllt sein DOM per
 * JavaScript (chatInputHelper.js), die erzeugten Kinder tragen also kein Blazor-Scope-Attribut.
 * Eine globale Klasse greift dort direkter als "::deep" — und dieselbe Klasse lässt die
 * Vorschau im Vorlagen-Editor garantiert gleich aussehen wie das Eingabefeld später.
 * Wer hier etwas ändert, ändert damit beide Orte. Genau das ist der Zweck: die Regeln lagen
 * vorher nur im Eingabefeld, Überschriften fehlten dort komplett und fielen auf die
 * Browser-Defaults zurück (h1 = 2em = 1,75rem bei 0,875rem Fließtext).
 *
 * Grundschrift und feldspezifische Regeln (Platzhalter, max-height, eingefügte Bilder) bleiben
 * in ChatInputComponent.razor.css.
 */
.user-markdown-content > :first-child {
    margin-top: 0;
}

.user-markdown-content > :last-child {
    margin-bottom: 0;
}

.user-markdown-content h1,
.user-markdown-content h2,
.user-markdown-content h3 {
    margin: 0.9rem 0 0.35rem;
    font-weight: 650;
    line-height: 1.25;
}

.user-markdown-content h1 {
    font-size: 1.35rem;
}

.user-markdown-content h2 {
    font-size: 1.15rem;
}

.user-markdown-content h3 {
    font-size: 1rem;
}

/* h4 bis h6 bleiben auf Fließtextniveau und unterscheiden sich über Gewicht, Versalien und
   Abstand. Über die Größe geht nicht: die Browser-Defaults setzen h5 auf 0,83em und h6 auf
   0,67em, eine tiefere Gliederungsebene würde also KLEINER statt nur leiser — dieselbe
   Entscheidung wie in der Artefakt-Vorschau (ChatComponent.razor.css). */
.user-markdown-content h4,
.user-markdown-content h5,
.user-markdown-content h6 {
    margin: 0.8rem 0 0.3rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
}

.user-markdown-content h5,
.user-markdown-content h6 {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.user-markdown-content p {
    margin: 0 0 0.5rem;
}

.user-markdown-content ul,
.user-markdown-content ol {
    margin: 0.35rem 0;
    padding-left: 1.5rem;
}

.user-markdown-content li {
    margin: 0.15rem 0;
}

.user-markdown-content blockquote {
    margin: 0.5rem 0;
    padding-left: 0.75rem;
    border-left: 3px solid var(--mud-palette-lines-default);
}

.user-markdown-content table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0.5rem 0;
}

.user-markdown-content th,
.user-markdown-content td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.4rem 0.5rem;
    min-width: 72px;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.user-markdown-content th {
    background: var(--mud-palette-background-grey);
    font-weight: 600;
}

/* hr, pre, code und a sind im Sanitizer des Eingabefelds erlaubt (chatInputHelper.js) und waren
   wie die Überschriften ungestylt: pre landete auf der Monospace-Standardgröße des Browsers,
   hr auf dessen Rändern. */
.user-markdown-content hr {
    margin: 0.75rem 0;
    border: none;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.user-markdown-content pre {
    margin: 0.5rem 0;
    padding: 0.5rem 0.65rem;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    overflow-x: auto;
}

.user-markdown-content code {
    font-family: var(--mud-typography-default-family), monospace;
    font-size: 0.85em;
}

.user-markdown-content pre code {
    font-size: inherit;
    background: none;
    padding: 0;
}

.user-markdown-content :not(pre) > code {
    padding: 0.1rem 0.3rem;
    background: var(--mud-palette-background-grey);
    border-radius: 4px;
}

.user-markdown-content a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .user-markdown-content h1 {
        font-size: 1.2rem;
    }

    .user-markdown-content h2 {
        font-size: 1.05rem;
    }

    .user-markdown-content h3,
    .user-markdown-content h4,
    .user-markdown-content h5,
    .user-markdown-content h6 {
        font-size: 0.9375rem;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .markdown-content {
        font-size: 0.9rem;
    }
    
    .markdown-content h1 {
        font-size: 1.3rem;
    }
    
    .markdown-content h2 {
        font-size: 1.1rem;
    }
    
    .markdown-content h3 {
        font-size: 1rem;
    }
    
    .markdown-content ul,
    .markdown-content ol {
        padding-left: 1.5rem;
    }
    
    .markdown-content table {
        font-size: 0.8rem;
    }
    
    .markdown-content th,
    .markdown-content td {
        padding: 0.5rem;
    }
    
    .markdown-content pre {
        padding: 0.75rem;
        font-size: 0.8rem;
    }

    .aura-mermaid-block {
        padding: 0.75rem;
    }

    .aura-mermaid-canvas.aura-mermaid-canvas-zoomed {
        max-height: 58vh;
    }
}

.mud-dark-theme .aura-mermaid-canvas {
    background: #15161A;
}

.mud-dark-theme .markdown-content blockquote {
    background-color: rgba(255, 255, 255, 0.05);
}

.mud-dark-theme .markdown-content code {
    background-color: rgba(255, 255, 255, 0.1);
}

.mud-dark-theme .markdown-content pre {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .aura-mermaid-action {
        transition: none;
    }
} 

/* --------------------------------------------------------------------------------------
   Unteilbare Datenwerte in Tabellenzellen.

   Bewusst OHNE .markdown-content-Präfix, anders als der Rest dieser Datei: Das Span wird vom
   MarkdownService an ALLEN Render-Orten erzeugt, und die Chat-Bubbles sind kein
   .markdown-content-Container. Eine Regel im Scoped-CSS der Komponenten wäre dreifach zu pflegen
   (Chat, Artefakt-Vorschau, Dokumentbetrachter) und würde beim vierten Render-Ort still fehlen.
   Diese Datei ist global eingebunden (App.razor).

   Zwei Erzeuger, weil die Render-Wege sich unterscheiden: ProtectDataTokensInTableCells für
   vollständige Dokumente mit echten <td>-Tags (Artefakt-Vorschau, Dokumentbetrachter) und
   ProtectDataTokensInCellHtml für einzeln gerenderte Zellen (Chat — dort setzt Razor das <td>).

   Warum es die Regel überhaupt braucht: Die Zellen tragen overflow-wrap: anywhere, damit breite
   Tabellen in die Spaltenbreite passen statt seitlich zu scrollen. Das bricht aber an beliebiger
   Stelle — auch "14.06.2026" nach "202" mit der "6" auf der nächsten Zeile. hyphens: auto ist
   dagegen kein Mittel, Silbentrennung greift bei Ziffernfolgen nicht.
   -------------------------------------------------------------------------------------- */
.nowrap-token {
    white-space: nowrap;
}