/* Styling for the shared rich-text editor (wwwroot/js/rich-text-editor.js).
   The script wraps any <textarea class="rich-text-source"> with a toolbar and a
   contentEditable surface; these rules give that markup a usable appearance. */

.rich-text-wrapper {
    border: 1px solid var(--line, #d7d2c4);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.rich-text-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: #f7f5ef;
    border-bottom: 1px solid var(--line, #d7d2c4);
}

.rich-text-toolbar-group {
    display: inline-flex;
    gap: 2px;
    padding-right: 6px;
    margin-right: 4px;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.rich-text-button {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #33414d;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.rich-text-button:hover { background: #e8e3d6; }
.rich-text-button:focus-visible { outline: 2px solid var(--navy, #1d3b53); outline-offset: 1px; }
.rich-text-button.is-active { background: var(--navy, #1d3b53); color: #fff; }

.rich-text-editor {
    min-height: 140px;
    padding: 12px 14px;
    outline: none;
    line-height: 1.5;
    color: var(--ink, #11202d);
}
.rich-text-editor:focus { background: #fffefb; }
.rich-text-editor p { margin: 0 0 0.6rem; }
.rich-text-editor h2 { font-size: 1.25rem; margin: 0.4rem 0 0.6rem; }
.rich-text-editor ul, .rich-text-editor ol { margin: 0 0 0.6rem 1.4rem; }

/* Rich text rendered OUTSIDE the editor — e.g. an assignment question shown to
   a student or on the review screen. Trims the trailing paragraph gap so a
   one-line question does not sit in a block of dead space. */
.question-text > :last-child { margin-bottom: 0; }
.question-text ul, .question-text ol { margin: 0 0 0.6rem 1.4rem; }

/* Compact variant (toolbar: 'compact'), for short prose fields such as
   assignment question text, where the default 140px surface would dwarf the
   rest of the card. */
.rich-text-wrapper.is-compact .rich-text-toolbar { padding: 3px 5px; gap: 2px; }
.rich-text-wrapper.is-compact .rich-text-button { min-width: 26px; height: 26px; padding: 0 6px; font-size: 13px; }
.rich-text-wrapper.is-compact .rich-text-editor { min-height: 4.25rem; padding: 8px 10px; }
.rich-text-wrapper.is-compact .rich-text-editor p:last-child { margin-bottom: 0; }

/* Source-view toggle: when active, show the raw-HTML textarea, hide the editor. */
.rich-text-wrapper .visually-hidden-editor-source {
    display: none;
    width: 100%;
    border: 0;
    border-top: 1px solid var(--line, #d7d2c4);
    padding: 12px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    min-height: 160px;
    resize: vertical;
}
.rich-text-wrapper.is-source-mode .rich-text-editor { display: none; }
.rich-text-wrapper.is-source-mode .visually-hidden-editor-source { display: block; }

/* Inline images inserted via the picker. */
.rich-text-editor .rich-figure,
.message-body .rich-figure { margin: 0.5rem 0; }
.rich-figure img { max-width: 100%; height: auto; display: block; }
.rich-align-left { margin-right: auto; }
.rich-align-center { margin-left: auto; margin-right: auto; }
.rich-align-right { margin-left: auto; }
figure.is-image-selected { outline: 2px solid var(--gold, #c9a14a); outline-offset: 2px; }

/* Rendered message/announcement bodies (Html.Raw of sanitized content). */
.message-body { line-height: 1.5; }
.message-body p:last-child { margin-bottom: 0; }
.message-body img { max-width: 100%; height: auto; }

/* Floating image toolbar + image picker modal (used only when an image is
   inserted). Minimal styling so they're usable if invoked. */
.rich-image-toolbar,
.image-picker-overlay { display: none; }
.rich-image-toolbar.is-open { display: flex; gap: 8px; align-items: center; position: fixed; z-index: 1080;
    background: #fff; border: 1px solid var(--line, #d7d2c4); border-radius: 8px; padding: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.image-picker-overlay.is-open { display: flex; position: fixed; inset: 0; z-index: 1090;
    align-items: center; justify-content: center; background: rgba(0,0,0,.45); }
.image-picker-dialog { background: #fff; border-radius: 10px; max-width: 900px; width: 92vw; max-height: 88vh;
    overflow: auto; padding: 16px; }
.image-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.image-picker-card { border: 1px solid var(--line, #d7d2c4); border-radius: 8px; background: #fff; padding: 6px; cursor: pointer; }
.image-picker-card.is-active { outline: 2px solid var(--navy, #1d3b53); }
.image-picker-card img { width: 100%; height: 90px; object-fit: cover; border-radius: 4px; }
.rich-size-button, .rich-align-button { border: 1px solid var(--line, #d7d2c4); background: #fff; border-radius: 6px; padding: 4px 8px; cursor: pointer; }
.rich-size-button.is-active, .rich-align-button.is-active { background: var(--navy, #1d3b53); color: #fff; }