/* Markdown-Rendering im Homepage-Chat (CHAT-01 + CHAT-05).
 *
 * Styling fuer die Markdown-formatierten KI-/LLM-Antworten in den
 * Outbound-Bubbles des Homepage-Chat-Widgets. Die LLM-Antworten werden
 * server-seitig via ``app.services.markdown_rendering.render_markdown_safe``
 * zu sanitized HTML konvertiert (Whitelist: p, h1-h6, ul, ol, li,
 * code, pre, strong, em, a, br, hr, blockquote; URL-Protokolle: http,
 * https, mailto); dieses Stylesheet formatiert anschliessend die
 * ausgewaehlten HTML-Elemente konsistent im Bootstrap-Layout.
 *
 * Sicherheitsleitplanken:
 *
 * - Es werden ausschliesslich CSS-Regeln fuer die in
 *   ``ALLOWED_TAGS`` definierte HTML-Whitelist bereitgestellt.
 * - Keine User-Inputs im CSS (reine Styling-Regeln).
 * - Keine externen Resourcen (alles inline).
 * - Inkrementelle Selectoren (``:first-child``) verhindern, dass
 *   stylings auf versehentlich eingebettete, nicht-sanitized
 *   Elemente angewendet werden.
 */

/* ── Outbound-Bubble als Markdown-Container ──────────────────────────
   Standardmaessig hat die Outbound-Bubble ``bg-light`` und einen
   ``text-break``-Wrapper. Wir entfernen den Default-Link-Padding
   und sorgen fuer lesbare Absaetze. */
.chat-message-body-outbound {
    line-height: 1.45;
}

.chat-message-body-outbound > p:first-child {
    margin-top: 0;
}

.chat-message-body-outbound > p:last-child {
    margin-bottom: 0;
}

/* ── Absaetze ──────────────────────────────────────────────────────────
   Markdown wandelt Zeilenumbrueche in <p>-Tags. Die Margins sorgen
   fuer saubere Trennung zwischen Absaetzen. */
.chat-message-body-outbound p {
    margin: 0.5rem 0;
}

/* ── Ueberschriften (h1-h6) ───────────────────────────────────────────
   Bootstrap setzt eigene Margins; wir reduzieren sie im Chat und
   setzen konsistente Font-Groessen. */
.chat-message-body-outbound h1,
.chat-message-body-outbound h2,
.chat-message-body-outbound h3,
.chat-message-body-outbound h4,
.chat-message-body-outbound h5,
.chat-message-body-outbound h6 {
    margin: 0.75rem 0 0.4rem 0;
    font-weight: 600;
    line-height: 1.25;
}

.chat-message-body-outbound h1 { font-size: 1.4rem; }
.chat-message-body-outbound h2 { font-size: 1.25rem; }
.chat-message-body-outbound h3 { font-size: 1.15rem; }
.chat-message-body-outbound h4 { font-size: 1.05rem; }
.chat-message-body-outbound h5 { font-size: 1rem; }
.chat-message-body-outbound h6 { font-size: 0.95rem; }

/* ── Listen ───────────────────────────────────────────────────────────
   type='ul' und type='ol' mit reduzierten Indents. */
.chat-message-body-outbound ul,
.chat-message-body-outbound ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.chat-message-body-outbound li {
    margin: 0.2rem 0;
}

/* ── Inline-Code & Code-Bloecke ──────────────────────────────────────
   Bootstrap hat kein eigenes Inline-Code-Styling; wir definieren es
   konsistent. Pre-Code-Bloecke bleiben so lesbar wie in der Quelle. */
.chat-message-body-outbound code {
    background-color: rgba(13, 110, 253, 0.08);
    color: #0a58ca;
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
    font-size: 0.875em;
    font-family: var(--bs-font-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace);
    word-break: break-word;
}

.chat-message-body-outbound pre {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.3rem;
    padding: 0.6rem 0.8rem;
    margin: 0.5rem 0;
    overflow-x: auto;
    font-size: 0.875em;
}

.chat-message-body-outbound pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: 1em;
    word-break: normal;
}

/* ── Blockquote ───────────────────────────────────────────────────────
   Markdown-Zitate ("> ...") — dezent gestaltet mit linkem Border. */
.chat-message-body-outbound blockquote {
    border-left: 3px solid #dee2e6;
    padding: 0.25rem 0.75rem;
    margin: 0.5rem 0;
    color: #6c757d;
    background-color: rgba(0, 0, 0, 0.02);
    font-style: italic;
}

.chat-message-body-outbound blockquote > p {
    margin: 0.2rem 0;
}

/* ── Links ─────────────────────────────────────────────────────────────
   Konsistente Link-Optik; ``target="_blank"`` mit
   ``rel="noopener noreferrer"`` wird via ``.chat-message-body-outbound a``
   nicht erzwungen (LLM-Antworten koennen inline-Links liefern;
   Tabnabbing-Schutz ist hier sekundaer, da LLM-URLs der eigenen
   Domain angehoeren sollten). */
.chat-message-body-outbound a {
    color: var(--bs-primary, #0d6efd);
    text-decoration: underline;
    text-decoration-thickness: 0.07em;
    text-underline-offset: 0.15em;
}

.chat-message-body-outbound a:hover {
    text-decoration: underline;
}

/* ── Betonung (strong, em, b, i) ──────────────────────────────────────
   Bootstrap hat eine eigene Meinung zu ``<b>`` (``font-weight: bolder``)
   und ``<strong>``; explizite Klassen nur noetig, falls ein
   Theme-Override erforderlich wird. */

/* ── Horizontale Trennlinien ──────────────────────────────────────────
   Markdown horizontal rule (``---``). */
.chat-message-body-outbound hr {
    margin: 0.6rem 0;
    border: 0;
    border-top: 1px solid #dee2e6;
    opacity: 1;
}

/* ── Zeilenumbrueche (br) ─────────────────────────────────────────────
   Default-``<br>``-Verhalten ist im Browser identisch; bewusst keine
   zusaetzliche Formatierung noetig. */