/*
 * Blog (M5 Community): the read-side rich-text container (.gtx-prose) and the
 * write-side WYSIWYG editor (.gtx-editor). Tokens only (theme-aware); no colours are
 * hard-coded so both light and dark themes are honoured.
 *
 * .gtx-prose renders the sanitised post body (BlogSanitizer allowlist: headings h2/h3,
 * p, lists, blockquote, pre/code, inline emphasis, links, relative <img>). Anything
 * outside the allowlist can never reach the DOM, so these rules only need to style the
 * allowed set.
 */

.gtx-prose {
    line-height: 1.7;
    color: var(--gtx-text);
    overflow-wrap: anywhere;
}

.gtx-prose > :first-child {
    margin-top: 0;
}

.gtx-prose > :last-child {
    margin-bottom: 0;
}

.gtx-prose p {
    margin: 0 0 var(--gtx-s4);
}

.gtx-prose h2 {
    font-size: 1.4rem;
    line-height: 1.3;
    margin: var(--gtx-s6) 0 var(--gtx-s3);
}

.gtx-prose h3 {
    font-size: 1.15rem;
    line-height: 1.3;
    margin: var(--gtx-s5) 0 var(--gtx-s2);
}

.gtx-prose ul,
.gtx-prose ol {
    margin: 0 0 var(--gtx-s4);
    padding-left: 1.5rem;
}

.gtx-prose li {
    margin: 0.2rem 0;
}

.gtx-prose blockquote {
    margin: 0 0 var(--gtx-s4);
    padding: var(--gtx-s2) var(--gtx-s4);
    border-left: 3px solid var(--gtx-accent);
    color: var(--gtx-text-dim);
    background: var(--gtx-surface-2, var(--gtx-surface));
    border-radius: 0 var(--gtx-r-s) var(--gtx-r-s) 0;
}

.gtx-prose pre {
    margin: 0 0 var(--gtx-s4);
    padding: var(--gtx-s3);
    overflow-x: auto;
    background: var(--gtx-surface-2, var(--gtx-surface));
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-s);
}

.gtx-prose code {
    font-family: var(--gtx-font-mono, ui-monospace, monospace);
    font-size: 0.9em;
}

.gtx-prose :not(pre) > code {
    padding: 0.1em 0.35em;
    background: var(--gtx-surface-2, var(--gtx-surface));
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-s);
}

.gtx-prose a {
    color: var(--gtx-accent);
    text-decoration: underline;
}

.gtx-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--gtx-r-s);
    margin: var(--gtx-s2) 0;
}

/* --- WYSIWYG editor ----------------------------------------------------- */

.gtx-editor {
    position: relative;
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-m);
    background: var(--gtx-surface);
}

.gtx-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: var(--gtx-s2);
    border-bottom: 1px solid var(--gtx-line);
    background: var(--gtx-surface-2, var(--gtx-surface));
    border-radius: var(--gtx-r-m) var(--gtx-r-m) 0 0;
}

.gtx-editor__btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--gtx-r-s);
    background: transparent;
    color: var(--gtx-text);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.gtx-editor__btn:hover {
    background: var(--gtx-surface-hover);
}

.gtx-editor__btn:focus-visible {
    outline: 2px solid var(--gtx-accent);
    outline-offset: 1px;
}

.gtx-editor__sep {
    width: 1px;
    align-self: stretch;
    margin: 0 var(--gtx-s1);
    background: var(--gtx-line);
}

.gtx-editor__area {
    min-height: 18rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--gtx-s4);
    outline: none;
}

.gtx-editor__area:empty::before {
    content: attr(data-placeholder);
    color: var(--gtx-text-dim);
    pointer-events: none;
}

.gtx-editor.is-focused {
    border-color: var(--gtx-accent);
}

/* Editor-scoped picker panels — reuse the .gtx-picker__* inner classes, but keep the
 * container in normal flow (the chat's .gtx-picker is absolutely positioned). */
.gtx-editor__panel {
    max-height: 280px;
    display: flex;
    flex-direction: column;
    padding: var(--gtx-s3);
    border-top: 1px solid var(--gtx-line);
    background: var(--gtx-surface-2, var(--gtx-surface));
}