/* === Toolbar === */
.flowtent-rte {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default, #ccc);
    border-radius: 4px;
    background: var(--mud-palette-background, #fff);
    /* Constrain the editor to its container so content can't push it wider. */
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Defeat CSS Grid / flex "blowout" when the rich editor lives inside a
   MudItem, MudPaper, or MudGrid. Without min-width: 0 on the parent,
   grid/flex children default to min-width: auto, which expands the parent
   to fit the editor's intrinsic content width -- defeating max-width: 100%
   on the editor itself. Symptom: toolbar and content overflow the viewport
   on narrow screens.

   We use descendant `:has(.flowtent-rte)` (not direct-child `:has(> ...)`)
   so the rule survives any intermediate wrapper MudBlazor may inject.

   :has() is supported in all modern browsers (Chrome 105+, Safari 15.4+,
   Firefox 121+). For older browsers, add the class `mud-grid-item` parents
   would need a manual `min-width: 0`. */
.mud-grid:has(.flowtent-rte),
.mud-grid-item:has(.flowtent-rte),
.mud-paper:has(.flowtent-rte),
.mud-card:has(.flowtent-rte),
.mud-expansion-panel:has(.flowtent-rte) {
    min-width: 0;
}

.flowtent-rte.is-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.flowtent-rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #eee);
    background: var(--mud-palette-background-grey, #fafafa);
}

.flowtent-rte-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    font-size: 13px;
    cursor: pointer;
    color: var(--mud-palette-text-primary, #222);
}

.flowtent-rte-btn:hover {
    background: var(--mud-palette-action-default-hover, #eee);
    border-color: var(--mud-palette-lines-default, #ddd);
}

.flowtent-rte-btn.is-active {
    background: var(--mud-palette-primary-hover, #c8e6f8);
    border-color: var(--mud-palette-primary, #1976d2);
}

.flowtent-rte-sep {
    width: 1px;
    height: 18px;
    background: var(--mud-palette-lines-default, #ddd);
    margin: 0 4px;
}

.flowtent-rte-select {
    height: 28px;
    border: 1px solid var(--mud-palette-lines-default, #ddd);
    border-radius: 3px;
    background: transparent;
    font-size: 13px;
}

.flowtent-rte-picker {
    position: relative;
    display: inline-flex;
}

.flowtent-rte-color-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* === Editor content area === */
.flowtent-rte-content {
    min-height: 120px;
    padding: 12px;
    overflow-y: auto;
    /* Prevent horizontal overflow from long unbroken words / wide content. */
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.flowtent-rte-content .ProseMirror {
    outline: none;
    min-height: 90px;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Code blocks: wrap instead of forcing horizontal scroll on the whole editor. */
.flowtent-rte-content .ProseMirror pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Lists: aggressive overflow protection.
   ProseMirror renders lists as <ul>/<ol> with <li><p>...</p></li>.
   The default `word-wrap: break-word` on .ProseMirror only triggers on
   *would-otherwise-overflow* words — it does not break URLs aggressively
   enough when nested inside an <li><p> chain. We force `overflow-wrap:
   anywhere` so the browser breaks at ANY character, including mid-URL,
   to keep list rows from pushing the editor wider than its container. */
.flowtent-rte-content .ProseMirror ul,
.flowtent-rte-content .ProseMirror ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
    max-width: 100%;
    box-sizing: border-box;
}

.flowtent-rte-content .ProseMirror li,
.flowtent-rte-content .ProseMirror li > p,
.flowtent-rte-content .ProseMirror p,
.flowtent-rte-content .ProseMirror h1,
.flowtent-rte-content .ProseMirror h2,
.flowtent-rte-content .ProseMirror h3,
.flowtent-rte-content .ProseMirror blockquote {
    max-width: 100%;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Nested lists keep modest indent so deep nesting doesn't bloat width. */
.flowtent-rte-content .ProseMirror li > ul,
.flowtent-rte-content .ProseMirror li > ol {
    padding-left: 1.5em;
    margin: 0;
}

/* Tables can also force width since cells don't wrap by default. */
.flowtent-rte-content .ProseMirror table {
    max-width: 100%;
    table-layout: fixed;
    width: 100%;
    box-sizing: border-box;
}

.flowtent-rte-content .ProseMirror table td,
.flowtent-rte-content .ProseMirror table th {
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.flowtent-rte-content .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: var(--mud-palette-text-secondary, #888);
    pointer-events: none;
    float: left;
    height: 0;
}

/* === Character counter === */
.flowtent-rte-counter {
    padding: 4px 12px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #888);
    text-align: right;
    border-top: 1px solid var(--mud-palette-lines-default, #eee);
}

.flowtent-rte-counter.over-limit {
    color: var(--mud-palette-error, #d32f2f);
    font-weight: 500;
}

/* === Mention popup === */
.flowtent-rte-mention-popup {
    background: var(--mud-palette-background, #fff);
    border: 1px solid var(--mud-palette-lines-default, #ddd);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    min-width: 160px;
    max-width: 240px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 10000;
}

.flowtent-rte-mention-item {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
}

.flowtent-rte-mention-item:hover,
.flowtent-rte-mention-item.active {
    background: var(--mud-palette-primary-hover, #e3f2fd);
}

/* === Read-side display === */
.rich-text-display p { margin: 0 0 0.75em 0; }
.rich-text-display p:last-child { margin-bottom: 0; }

.rich-text-display h1,
.rich-text-display h2,
.rich-text-display h3 {
    margin: 0.75em 0 0.5em 0;
    font-weight: 600;
}

.rich-text-display ul,
.rich-text-display ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.rich-text-display blockquote {
    margin: 0.5em 0;
    padding-left: 12px;
    border-left: 3px solid var(--mud-palette-lines-default, #ddd);
    color: var(--mud-palette-text-secondary, #666);
}

.rich-text-display code {
    background: var(--mud-palette-background-grey, #f5f5f5);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: "Courier New", monospace;
    font-size: 0.9em;
}

.rich-text-display table {
    border-collapse: collapse;
    margin: 0.5em 0;
}

.rich-text-display th,
.rich-text-display td {
    border: 1px solid var(--mud-palette-lines-default, #ddd);
    padding: 4px 8px;
}

.rich-text-display th {
    background: var(--mud-palette-background-grey, #fafafa);
    font-weight: 600;
}

.rich-text-display a {
    color: var(--mud-palette-primary, #1976d2);
    text-decoration: underline;
}

.rich-text-display .mention {
    background: var(--mud-palette-primary-hover, #e3f2fd);
    color: var(--mud-palette-primary, #1976d2);
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 500;
}

/* Tighter spacing inside comment thread */
.rich-text-display.comment-body p { margin: 0 0 0.4em 0; }

.rich-text-display.comment-body h1,
.rich-text-display.comment-body h2,
.rich-text-display.comment-body h3 {
    font-size: 1em;
    margin: 0.3em 0;
}