/* Rendering for the rich-text body of a platform user message (AlertMessage.BodyHtml).
   ---------------------------------------------------------------------------------------------
   Scoped to .am-body, which AlertMessageBody emits, so the two reader surfaces (the Dex bubble in
   MainLayout and the composer's live preview) cannot drift apart.

   This is the alert-message twin of .rn-body in release-note-media.css and is a deliberate copy
   rather than a shared class: the same authored HTML has to read inside a ~320px bubble here and
   at full dialog width there, so the two need different type scale, image caps and margins. The
   RichTextField editor's own styles are scoped to .rtf-editor and do NOT reach out here. */

.am-body {
    font-size: 0.9rem;
    line-height: 1.45;
    /* A pasted wide table or long code line must scroll itself, never the bubble. */
    overflow-x: auto;
}

.am-body img {
    max-width: 100%;
    /* Tighter than .rn-body's 420px: the bubble is a glance, not a read, and an unbounded
       screenshot would push the action button off the bottom. */
    max-height: 240px;
    width: auto;
    height: auto;
    border-radius: 6px;
    margin: 6px 0;
}

.am-body a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.am-body table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 6px 0;
}

.am-body table td {
    vertical-align: top;
    padding: 3px 6px;
}

.am-body ul,
.am-body ol {
    padding-left: 24px;
    margin: 6px 0;
}

.am-body li {
    margin: 2px 0;
}

.am-body h1,
.am-body h2,
.am-body h3 {
    margin: 6px 0 4px 0;
    font-size: 1rem;
    line-height: 1.3;
}

.am-body p {
    margin: 4px 0;
}

.am-body p:first-child {
    margin-top: 0;
}

.am-body blockquote {
    border-left: 3px solid var(--mud-palette-lines-default);
    padding-left: 10px;
    margin: 6px 0;
    color: var(--mud-palette-text-secondary);
}

/* Composer preview: the same body read at dialog width rather than in the bubble, so the image
   cap relaxes. Applied alongside .am-body by RegisterAlertMessageModal. */
.am-body-preview {
    font-size: 0.875rem;
}

.am-body-preview img {
    max-height: 420px;
}

/* Answer form inside the bubble (AlertMessageQuestions).
   ---------------------------------------------------------------------------------------------
   The bubble only gets its own scrollbar when the author sets BubbleHeight, so the question list
   caps and scrolls itself. Without this, a message with several questions grows past the viewport
   on every message where the height was left blank -- which is most of them. */

.fab-alert-message-questions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.fab-alert-question-list {
    max-height: 320px;
    overflow-y: auto;
}

.fab-alert-question + .fab-alert-question {
    margin-top: 12px;
}

.fab-alert-question-text {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 6px;
}

/* Sticks below the scrolling list rather than inside it, so Submit is always reachable. */
.fab-alert-question-actions {
    display: flex;
    align-items: center;
    margin-top: 12px;
}