/* Read-only markdown rendered by AglMarkdownRenderer (comment bubbles, feed entries). */
.agl-markdown {
    --agl-md-gap: 6px;
    --agl-md-rule: var(--pl-neutral-border-color-border-secondary, #DCE0EA);
    --agl-md-link: var(--pl-semantic-link-color-link, #0070B5);
    --agl-md-check-fill: var(--pl-semantic-primary-color-primary, #0070B5);
    --agl-md-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --agl-md-mention-color: var(--pl-semantic-link-color-link, #0070B5);
    --agl-md-mention-bg: var(--pl-semantic-primary-color-primary-bg, #E9FAFD);
    --agl-md-mention-focus: var(--pl-semantic-link-color-link, #0070B5);
    --agl-md-caption: var(--pl-neutral-text-color-text-secondary, #495769);
    overflow-wrap: anywhere;
}

/* Tighter rhythm for the one-line feed entries. */
.agl-markdown--compact {
    --agl-md-gap: 4px;
    max-height: 12em;
    overflow: hidden;
    /* The mask is as tall as the cap, so only an entry that reaches it fades out. */
    mask: linear-gradient(#000 10em, transparent 12em) top / 100% 12em no-repeat;
}

/* White-on-primary surface, e.g. the own comment bubble. */
.agl-markdown--inverted {
    --agl-md-rule: rgba(255, 255, 255, 0.4);
    --agl-md-link: inherit;
    --agl-md-check-fill: #FFFFFF;
    --agl-md-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%230070B5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --agl-md-mention-color: inherit;
    --agl-md-mention-bg: rgba(255, 255, 255, 0.2);
    --agl-md-mention-focus: var(--pl-neutral-text-color-text-light-solid, #FFFFFF);
    --agl-md-caption: inherit;
}

.agl-markdown p,
.agl-markdown ul,
.agl-markdown ol,
.agl-markdown blockquote,
.agl-markdown pre,
.agl-markdown table,
.agl-markdown h1, .agl-markdown h2, .agl-markdown h3,
.agl-markdown h4, .agl-markdown h5, .agl-markdown h6 {
    margin: 0 0 var(--agl-md-gap);
}

.agl-markdown > :first-child { margin-top: 0; }
.agl-markdown > :last-child { margin-bottom: 0; }

.agl-markdown h1, .agl-markdown h2, .agl-markdown h3,
.agl-markdown h4, .agl-markdown h5, .agl-markdown h6 {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: inherit;
    color: inherit;
}

.agl-markdown h1, .agl-markdown h2, .agl-markdown h3 { font-size: 14px; }

.agl-markdown ul, .agl-markdown ol { padding-left: 20px; }
.agl-markdown--compact ul, .agl-markdown--compact ol { padding-left: 18px; }
.agl-markdown li + li { margin-top: 2px; }
/* Loose lists wrap items in <p>; without this their spacing differs from tight lists. */
.agl-markdown li > p { margin: 0; }
.agl-markdown li > ul, .agl-markdown li > ol { margin: 2px 0 0; }

.agl-markdown blockquote {
    padding-left: 8px;
    border-left: 2px solid var(--agl-md-rule);
}

/* Global Bootstrap colours/shrinks pre and code; the surrounding text colour and size must win. */
.agl-markdown pre, .agl-markdown code { color: inherit; font-size: inherit; }
.agl-markdown pre { white-space: pre-wrap; }
/* Fallback for text the markdown parser rejects: shown as typed, with its own line breaks. */
.agl-markdown .agl-markdown__plain { white-space: pre-wrap; }
.agl-markdown code { font-family: monospace; }

/* Block + overflow keeps wide tables inside the bubble instead of stretching it. */
.agl-markdown table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.agl-markdown th, .agl-markdown td {
    padding: 2px 8px;
    border-bottom: 1px solid var(--agl-md-rule);
}

.agl-markdown th:first-child, .agl-markdown td:first-child { padding-left: 0; }
.agl-markdown th { font-weight: 600; border-bottom-width: 2px; }
.agl-markdown tbody tr:last-child td { border-bottom: none; }

.agl-markdown img { max-width: 100%; height: auto; }

/* A block image as the editor shows it: centred, caption below, but at its own size instead of the editor's 100px minimum. */
.agl-markdown figure { margin: 0 0 var(--agl-md-gap); text-align: center; }
.agl-markdown figcaption { font-size: 12px; color: var(--agl-md-caption); }

.agl-markdown a { color: var(--agl-md-link); text-decoration: underline; }

.agl-markdown .contains-task-list { padding-left: 0; list-style: none; }

/* Native disabled checkboxes grey out and vanish on the primary bubble. */
.agl-markdown .task-list-item input[type="checkbox"] {
    appearance: none;
    width: 14px;
    height: 14px;
    margin: 0 6px 0 0;
    border: 1.5px solid currentColor;
    border-radius: 4px;
    background: transparent center / 12px no-repeat;
    vertical-align: -2px;
    opacity: 1;
    cursor: default;
}

.agl-markdown .task-list-item input[type="checkbox"]:checked {
    border-color: var(--agl-md-check-fill);
    background-color: var(--agl-md-check-fill);
    background-image: var(--agl-md-check-mark);
}

.agl-markdown .mention {
    color: var(--agl-md-mention-color);
    background: var(--agl-md-mention-bg);
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 500;
}

/* Clickable only inside a host that opens the member popup (it marks itself with data-mention-clickable). */
[data-mention-clickable] .agl-markdown .mention[data-mention-id] { cursor: pointer; }
[data-mention-clickable] .agl-markdown .mention[data-mention-id]:hover { text-decoration: underline; }
[data-mention-clickable] .agl-markdown .mention[data-mention-id]:focus-visible {
    outline: 2px solid var(--agl-md-mention-focus);
    outline-offset: 1px;
}