/* markdown.css -- styling for renderMarkdown() output across every surface that
   now renders GFM. Scoped to the container classes so it never bleeds into
   non-markdown chrome. Token-based, so both themes are correct automatically.

   Note on DM messages: the persistent/reload path wraps narrative in
   .message-content (covered below), but the live-streamed DM turn writes the
   rendered HTML straight into the bare .message.game-style.dm bubble. Both
   containers are listed in every group so a streamed turn is styled identically
   to its reloaded form. */

/* =============================================================================
   PARAGRAPHS -- keep one-line messages compact; add a small gap between blocks.
   ============================================================================= */
.message-content p,
.message.game-style.user p,
.message.game-style.dm p,
.script-message p,
.quest-summary p,
.backstory-text p,
.location-summary p,
.lore-desc p,
.story-thread-desc p,
.entity-summary p,
.bible-detail-summary p {
    margin: 0 0 0.5em;
}

.message-content p:last-child,
.message.game-style.user p:last-child,
.message.game-style.dm p:last-child,
.script-message p:last-child,
.quest-summary p:last-child,
.backstory-text p:last-child,
.location-summary p:last-child,
.lore-desc p:last-child,
.story-thread-desc p:last-child,
.entity-summary p:last-child,
.bible-detail-summary p:last-child {
    margin-bottom: 0;
}

/* User messages prefix the text with an inline prompt arrow (the '>' span), and
   OOC messages add an inline "OOC" tag after it. marked wraps the message in a
   block <p>, which would drop the text onto the line below the prefix. Render
   the paragraph that immediately follows the prompt (or the OOC tag) inline so
   the prefix and the message share one line; any later blocks (a second
   paragraph, a list) still break normally. */
.message.game-style.user > .msg-prompt + p,
.message.game-style.user > .ooc-tag + p,
.script-message.user > .user-prompt + p {
    display: inline;
}

/* =============================================================================
   LISTS -- indent so bullets/numbers are visible.
   ============================================================================= */
.message-content ul,
.message-content ol,
.message.game-style.user ul,
.message.game-style.user ol,
.message.game-style.dm ul,
.message.game-style.dm ol,
.script-message ul,
.script-message ol,
.quest-summary ul,
.quest-summary ol,
.backstory-text ul,
.backstory-text ol,
.location-summary ul,
.location-summary ol,
.lore-desc ul,
.lore-desc ol,
.story-thread-desc ul,
.story-thread-desc ol,
.entity-summary ul,
.entity-summary ol,
.bible-detail-summary ul,
.bible-detail-summary ol {
    margin: 0.4em 0;
    padding-left: 1.6em;
}

.message-content li,
.message.game-style.user li,
.message.game-style.dm li,
.script-message li,
.quest-summary li,
.backstory-text li,
.location-summary li,
.lore-desc li,
.story-thread-desc li,
.entity-summary li,
.bible-detail-summary li {
    margin-bottom: 0.2em;
}

/* =============================================================================
   BLOCKQUOTE -- left border, dim text.
   ============================================================================= */
.message-content blockquote,
.message.game-style.user blockquote,
.message.game-style.dm blockquote,
.script-message blockquote,
.quest-summary blockquote,
.backstory-text blockquote,
.location-summary blockquote,
.lore-desc blockquote,
.story-thread-desc blockquote,
.entity-summary blockquote,
.bible-detail-summary blockquote {
    border-left: 3px solid var(--border);
    color: var(--text-dim);
    margin: 0.5em 0;
    padding: 0.2em 0.8em;
}

/* =============================================================================
   CODE -- monospace, square corners. Inline vs block (pre > code).
   ============================================================================= */
.message-content code,
.message.game-style.user code,
.message.game-style.dm code,
.script-message code,
.quest-summary code,
.backstory-text code,
.location-summary code,
.lore-desc code,
.story-thread-desc code,
.entity-summary code,
.bible-detail-summary code {
    font-family: var(--font-ui, 'Courier New', monospace);
    font-size: 0.9em;
}

.message-content pre,
.message.game-style.user pre,
.message.game-style.dm pre,
.script-message pre,
.quest-summary pre,
.backstory-text pre,
.location-summary pre,
.lore-desc pre,
.story-thread-desc pre,
.entity-summary pre,
.bible-detail-summary pre {
    background: var(--canvas-panel);
    border: 1px solid var(--border);
    margin: 0.5em 0;
    overflow-x: auto;
    padding: 0.6em 0.8em;
}

/* A <code> inside <pre> would apply the inline 0.9em a second time on top of
   pre's own sizing; reset it so block code stays at the pre font size. */
.message-content pre code,
.message.game-style.user pre code,
.message.game-style.dm pre code,
.script-message pre code,
.quest-summary pre code,
.backstory-text pre code,
.location-summary pre code,
.lore-desc pre code,
.story-thread-desc pre code,
.entity-summary pre code,
.bible-detail-summary pre code {
    font-size: 1em;
}

/* =============================================================================
   TABLES -- collapsed borders, token-colored lines.
   ============================================================================= */
.message-content table,
.message.game-style.user table,
.message.game-style.dm table,
.script-message table,
.quest-summary table,
.backstory-text table,
.location-summary table,
.lore-desc table,
.story-thread-desc table,
.entity-summary table,
.bible-detail-summary table {
    border-collapse: collapse;
    margin: 0.5em 0;
}

.message-content th,
.message-content td,
.message.game-style.user th,
.message.game-style.user td,
.message.game-style.dm th,
.message.game-style.dm td,
.script-message th,
.script-message td,
.quest-summary th,
.quest-summary td,
.backstory-text th,
.backstory-text td,
.location-summary th,
.location-summary td,
.lore-desc th,
.lore-desc td,
.story-thread-desc th,
.story-thread-desc td,
.entity-summary th,
.entity-summary td,
.bible-detail-summary th,
.bible-detail-summary td {
    border: 1px solid var(--border);
    padding: 0.3em 0.6em;
    text-align: left;
}

.message-content th,
.message.game-style.user th,
.message.game-style.dm th,
.script-message th,
.quest-summary th,
.backstory-text th,
.location-summary th,
.lore-desc th,
.story-thread-desc th,
.entity-summary th,
.bible-detail-summary th {
    color: var(--text-dim);
}

/* =============================================================================
   LINKS -- amber accent, underlined.
   ============================================================================= */
.message-content a,
.message.game-style.user a,
.message.game-style.dm a,
.script-message a,
.quest-summary a,
.backstory-text a,
.location-summary a,
.lore-desc a,
.story-thread-desc a,
.entity-summary a,
.bible-detail-summary a {
    color: var(--accent);
    text-decoration: underline;
}

/* =============================================================================
   HEADINGS -- slight spacing above, dim color for hierarchy.
   ============================================================================= */
.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6,
.message.game-style.user h1,
.message.game-style.user h2,
.message.game-style.user h3,
.message.game-style.user h4,
.message.game-style.user h5,
.message.game-style.user h6,
.message.game-style.dm h1,
.message.game-style.dm h2,
.message.game-style.dm h3,
.message.game-style.dm h4,
.message.game-style.dm h5,
.message.game-style.dm h6,
.script-message h1,
.script-message h2,
.script-message h3,
.script-message h4,
.script-message h5,
.script-message h6,
.quest-summary h1,
.quest-summary h2,
.quest-summary h3,
.quest-summary h4,
.quest-summary h5,
.quest-summary h6,
.backstory-text h1,
.backstory-text h2,
.backstory-text h3,
.backstory-text h4,
.backstory-text h5,
.backstory-text h6,
.location-summary h1,
.location-summary h2,
.location-summary h3,
.location-summary h4,
.location-summary h5,
.location-summary h6,
.lore-desc h1,
.lore-desc h2,
.lore-desc h3,
.lore-desc h4,
.lore-desc h5,
.lore-desc h6,
.story-thread-desc h1,
.story-thread-desc h2,
.story-thread-desc h3,
.story-thread-desc h4,
.story-thread-desc h5,
.story-thread-desc h6,
.entity-summary h1,
.entity-summary h2,
.entity-summary h3,
.entity-summary h4,
.entity-summary h5,
.entity-summary h6,
.bible-detail-summary h1,
.bible-detail-summary h2,
.bible-detail-summary h3,
.bible-detail-summary h4,
.bible-detail-summary h5,
.bible-detail-summary h6 {
    margin: 0.75em 0 0.3em;
}

/* =============================================================================
   HORIZONTAL RULE -- token border color.
   ============================================================================= */
.message-content hr,
.message.game-style.user hr,
.message.game-style.dm hr,
.script-message hr,
.quest-summary hr,
.backstory-text hr,
.location-summary hr,
.lore-desc hr,
.story-thread-desc hr,
.entity-summary hr,
.bible-detail-summary hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0.75em 0;
}

/* =============================================================================
   TASK-LIST CHECKBOXES -- small right margin.
   ============================================================================= */
.message-content input[type="checkbox"],
.message.game-style.user input[type="checkbox"],
.message.game-style.dm input[type="checkbox"],
.script-message input[type="checkbox"],
.quest-summary input[type="checkbox"],
.backstory-text input[type="checkbox"],
.location-summary input[type="checkbox"],
.lore-desc input[type="checkbox"],
.story-thread-desc input[type="checkbox"],
.entity-summary input[type="checkbox"],
.bible-detail-summary input[type="checkbox"] {
    margin-right: 0.4em;
}