/*
 * Markdown from automations (App\Support\SafeMarkdown wraps it in
 * .safe-markdown), shown inside Filament's .fi-prose on the run page, in run
 * messages and in the publisher's "Test webhook" preview. Registered with
 * FilamentAsset, so it ships on the apex site and inside the panel.
 *
 * .fi-prose lives in the `utilities` cascade layer; these rules are unlayered,
 * so they win without extra specificity.
 */

/* Inline code: a light chip instead of .fi-prose's literal backticks. The
   chip is tinted from the text colour, so it suits every output box colour. */
.safe-markdown code::before,
.safe-markdown code::after {
    content: none;
}

.safe-markdown :not(pre) > code {
    padding: 0.125em 0.375em;
    border-radius: 0.25rem;
    background-color: color-mix(in oklab, currentColor 10%, transparent);
    font-size: 0.875em;
}

/* Code blocks (App\Support\Markdown\CodeBlockRenderer, and the same markup
   from resources/js/markdown-renderer.js): a bar with the language and the
   Wrap / Copy buttons on top of the code, with the paragraph gap around
   (instead of 2.5rem below) and normal line spacing (.fi-prose uses 2). The
   bar's labels come from CSS so the Markdown's plain-text version carries
   no "Copy". */
.safe-markdown .safe-markdown-code {
    margin-block: 1rem;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: var(--prose-pre-bg, color-mix(in oklab, currentColor 6%, transparent));
}

.safe-markdown .safe-markdown-code-bar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.375rem 0.25rem 1rem;
    border-bottom: 1px solid color-mix(in oklab, currentColor 10%, transparent);
    font-size: 0.75rem;
    line-height: 1rem;
}

/* .fi-prose spaces every sibling 1rem apart. */
.safe-markdown .safe-markdown-code > *,
.safe-markdown .safe-markdown-code-bar > * {
    margin: 0;
}

.safe-markdown .safe-markdown-code-lang {
    min-width: 0;
    margin-inline-end: auto;
    overflow: hidden;
    font-family: var(--font-mono, ui-monospace, monospace);
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.7;
}

.safe-markdown .safe-markdown-code-lang::before {
    content: attr(data-language);
}

.safe-markdown .safe-markdown-code > pre {
    border-radius: 0;
    background-color: transparent;
    overflow-x: auto;
}

.safe-markdown pre code {
    line-height: 1.6;
}

/* Wrap (on by default): long lines wrap instead of scrolling sideways. */
.safe-markdown .safe-markdown-code[data-wrapped] pre code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The buttons: Wrap and Copy on code blocks, Copy under a whole answer
   (.safe-markdown-answer-actions, outside .safe-markdown). Run by
   resources/js/markdown.js. */
.safe-markdown-copy,
.safe-markdown-wrap {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    color: inherit;
    font: inherit;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    opacity: 0.75;
}

.safe-markdown-copy:hover,
.safe-markdown-copy:focus-visible,
.safe-markdown-wrap:hover,
.safe-markdown-wrap:focus-visible,
.safe-markdown-wrap[aria-pressed='true'] {
    opacity: 1;
    background-color: color-mix(in oklab, currentColor 10%, transparent);
}

.safe-markdown-copy::before,
.safe-markdown-wrap::before {
    content: '';
    width: 0.875rem;
    height: 0.875rem;
    background-color: currentColor;
}

/* Heroicons' square-2-stack, then check once copied; bars-3-bottom-left for Wrap. */
.safe-markdown-copy::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.safe-markdown-copy[data-copied]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E");
}

.safe-markdown-wrap::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.safe-markdown-copy::after {
    content: 'Copy';
}

/* Under a whole answer. */
.safe-markdown-copy[data-copy-markdown]::after {
    content: 'Copy all';
}

.safe-markdown-copy[data-copied]::after {
    content: 'Copied';
}

.safe-markdown-wrap::after {
    content: 'Wrap';
}

.safe-markdown-answer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
}

/* Mermaid diagrams (browser only): drawn above their code, which is hidden;
   Copy still copies the diagram's source. */
.safe-markdown .safe-markdown-code[data-diagram] > pre,
.safe-markdown .safe-markdown-code[data-diagram] .safe-markdown-wrap {
    display: none;
}

.safe-markdown .safe-markdown-diagram {
    display: flex;
    justify-content: center;
    padding: 1rem;
    overflow-x: auto;
}

.safe-markdown .safe-markdown-diagram svg {
    max-width: 100%;
    height: auto;
}

/* Maths (KaTeX, browser only): a wide display formula scrolls sideways. */
.safe-markdown .katex-display {
    margin-block: 1rem;
    padding-block: 0.25rem;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Task lists: a checkbox instead of the bullet. */
.safe-markdown .contains-task-list {
    padding-inline-start: 0.25rem;
    list-style: none;
}

.safe-markdown .task-list-item > * {
    margin-top: 0;
}

.safe-markdown .task-list-item-checkbox {
    margin-inline-end: 0.5rem;
    vertical-align: -0.125em;
}

/* Footnotes. */
.safe-markdown .footnotes {
    font-size: 0.875em;
    opacity: 0.85;
}

.safe-markdown .footnotes-sep {
    margin-block: 1.5rem 0.75rem;
}

/* Media (App\Support\Markdown\MarkdownMedia). Images from this site and its
   file storage show; any other image is a link to it, with a picture icon. */
.safe-markdown img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
}

.safe-markdown .safe-markdown-image-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.safe-markdown .safe-markdown-image-link::before {
    content: '';
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Players for a bare video link: a 16:9 box. A video file waits for Play
   (preload="none"); YouTube shows a Play box that resources/js/markdown.js
   swaps for the youtube-nocookie.com player on click. */
.safe-markdown .safe-markdown-video {
    margin-block: 1rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    background-color: #000;
}

.safe-markdown .safe-markdown-video > video,
.safe-markdown .safe-markdown-video > iframe {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
}

.safe-markdown .safe-markdown-youtube > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1rem;
    color: #fff;
    font-size: 0.75rem;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    background: linear-gradient(160deg, #1f2937, #000);
}

.safe-markdown .safe-markdown-youtube > a::before {
    content: '';
    width: 4rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: #ff0033 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5.14v13.72a1 1 0 0 0 1.52.85l10.8-6.86a1 1 0 0 0 0-1.7L9.52 4.29A1 1 0 0 0 8 5.14Z'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
}

.safe-markdown .safe-markdown-youtube > a:hover::before,
.safe-markdown .safe-markdown-youtube > a:focus-visible::before {
    filter: brightness(1.15);
}

/* Tables scroll sideways inside their own box rather than being clipped by
   the output box on narrow screens. */
.safe-markdown .safe-markdown-table {
    margin-block: 2em;
    overflow-x: auto;
}

.safe-markdown .safe-markdown-table > table {
    margin-block: 0;
}

.safe-markdown > :first-child {
    margin-top: 0;
}

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

/* Syntax colours for highlight.php's hljs-* tokens (GitHub's palette). */
.safe-markdown .hljs-comment,
.safe-markdown .hljs-quote {
    color: #6e7781;
    font-style: italic;
}

.safe-markdown .hljs-keyword,
.safe-markdown .hljs-selector-tag,
.safe-markdown .hljs-doctag {
    color: #cf222e;
}

.safe-markdown .hljs-string,
.safe-markdown .hljs-regexp {
    color: #0a3069;
}

.safe-markdown .hljs-number,
.safe-markdown .hljs-literal,
.safe-markdown .hljs-symbol,
.safe-markdown .hljs-bullet,
.safe-markdown .hljs-attr,
.safe-markdown .hljs-attribute,
.safe-markdown .hljs-meta,
.safe-markdown .hljs-link,
.safe-markdown .hljs-selector-attr,
.safe-markdown .hljs-selector-pseudo {
    color: #0550ae;
}

.safe-markdown .hljs-title,
.safe-markdown .hljs-section {
    color: #8250df;
}

.safe-markdown .hljs-built_in,
.safe-markdown .hljs-type,
.safe-markdown .hljs-variable,
.safe-markdown .hljs-template-variable {
    color: #953800;
}

.safe-markdown .hljs-name,
.safe-markdown .hljs-selector-id,
.safe-markdown .hljs-selector-class {
    color: #116329;
}

.safe-markdown .hljs-addition {
    color: #116329;
    background-color: #dafbe1;
}

.safe-markdown .hljs-deletion {
    color: #82071e;
    background-color: #ffebe9;
}

.safe-markdown .hljs-emphasis {
    font-style: italic;
}

.safe-markdown .hljs-strong {
    font-weight: 600;
}

/* The panel's dark mode (the apex site is light only). */
.dark .safe-markdown .hljs-comment,
.dark .safe-markdown .hljs-quote {
    color: #8b949e;
}

.dark .safe-markdown .hljs-keyword,
.dark .safe-markdown .hljs-selector-tag,
.dark .safe-markdown .hljs-doctag {
    color: #ff7b72;
}

.dark .safe-markdown .hljs-string,
.dark .safe-markdown .hljs-regexp {
    color: #a5d6ff;
}

.dark .safe-markdown .hljs-number,
.dark .safe-markdown .hljs-literal,
.dark .safe-markdown .hljs-symbol,
.dark .safe-markdown .hljs-bullet,
.dark .safe-markdown .hljs-attr,
.dark .safe-markdown .hljs-attribute,
.dark .safe-markdown .hljs-meta,
.dark .safe-markdown .hljs-link,
.dark .safe-markdown .hljs-selector-attr,
.dark .safe-markdown .hljs-selector-pseudo {
    color: #79c0ff;
}

.dark .safe-markdown .hljs-title,
.dark .safe-markdown .hljs-section {
    color: #d2a8ff;
}

.dark .safe-markdown .hljs-built_in,
.dark .safe-markdown .hljs-type,
.dark .safe-markdown .hljs-variable,
.dark .safe-markdown .hljs-template-variable {
    color: #ffa657;
}

.dark .safe-markdown .hljs-name,
.dark .safe-markdown .hljs-selector-id,
.dark .safe-markdown .hljs-selector-class {
    color: #7ee787;
}

.dark .safe-markdown .hljs-addition {
    color: #aff5b4;
    background-color: #033a16;
}

.dark .safe-markdown .hljs-deletion {
    color: #ffdcd7;
    background-color: #67060c;
}