/* of-rich-text-field.css — the stylesheet for the shared OF composer surface
   built by shared/of-rich-text-field.js.

   The editor renders OnlyFans' own formatting classes inline, so a chatter sees
   bold as bold and blue as blue instead of raw HTML. Class names mirror OF's
   editor vocabulary exactly (m-editor-fs__*, m-editor-fc__*), and the stored
   value is whatever shared/of-rich-text.js sanitizes it to.

   Written against the --fl-* Fleet tokens, which every page that mounts this
   field already supplies (page-management.css / the Fleet shell). Nothing here
   defines a token of its own: a host page's theme must win, and both the light
   and dark themes come out of the token set rather than out of this file.

   The .mm-* prefix is historical — this markup was born in the Mass Messages
   composer — and is kept deliberately. It is the class vocabulary the shared
   factory emits, so it is now a contract between this file and that file
   rather than a claim about which page is mounting it. */

.mm-rte-toolbar { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 3px; padding: 6px 8px; background: var(--fl-inset); border: 1px solid var(--fl-border); border-bottom: none; border-radius: 8px 8px 0 0; }
.mm-rte-sep { width: 1px; align-self: stretch; margin: 2px 5px; background: var(--fl-border); }
.mm-rte-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; padding: 0 6px; background: none; border: 1px solid transparent; border-radius: 6px; color: var(--text); font-size: .9rem; cursor: pointer; }
.mm-rte-btn:hover { background: var(--fl-surface2); border-color: var(--fl-border); }
.mm-rte-btn:focus-visible { outline: 2px solid var(--fl-blue); outline-offset: 1px; }
.mm-rte-btn.is-active { background: var(--fl-blue-soft); border-color: var(--fl-blue); color: var(--fl-blue-strong); }
.mm-rte-size { width: auto; min-width: 96px; padding: 5px 8px; font-size: .8rem; background: var(--fl-surface2); border: 1px solid var(--fl-border); border-radius: 6px; color: var(--text); }
.mm-sw { display: block; width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.mm-sw-default { background: var(--text); }
.mm-sw-gray { background: #8a96a3; }
.mm-sw-blue1 { background: #00aff0; }
.mm-sw-blue2 { background: #0091ea; }
.mm-rte { min-height: 148px; max-height: 420px; overflow-y: auto; padding: 10px 12px; background: var(--fl-inset); border: 1px solid var(--fl-border); border-radius: 0 0 8px 8px; color: var(--text); font-size: .95rem; line-height: 1.55; overflow-wrap: anywhere; }
.mm-rte:focus { outline: none; border-color: var(--fl-blue); box-shadow: 0 0 0 3px var(--focus-ring); }
.mm-rte p { margin: 0 0 .55em; }
.mm-rte p:last-child { margin-bottom: 0; }
.mm-rte a { color: var(--fl-blue-strong); }
/* Emoji quick row + picker: the top-10 one-click inserts sit inline in the
   toolbar; the "more" button opens a floating curated palette. The palette is
   absolutely positioned against .mm-rte-toolbar's own stacking context, which
   is why the toolbar carries position: relative above. */
.mm-rte-emoji-row { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.mm-rte-btn.mm-rte-emoji { font-size: 1.05rem; }
.mm-emoji-palette { position: absolute; top: 100%; left: 0; z-index: 40; margin-top: 4px; width: min(340px, 90vw); max-height: 320px; overflow-y: auto; padding: 10px; background: var(--fl-surface2); border: 1px solid var(--fl-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
.mm-emoji-category + .mm-emoji-category { margin-top: 8px; }
.mm-emoji-category-label { margin: 0 0 4px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.mm-emoji-grid { display: flex; flex-wrap: wrap; gap: 2px; }
.mm-emoji-option { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: none; border: 1px solid transparent; border-radius: 6px; font-size: 1.05rem; cursor: pointer; }
.mm-emoji-option:hover { background: var(--fl-inset); border-color: var(--fl-border); }
.mm-emoji-option:focus-visible { outline: 2px solid var(--fl-blue); outline-offset: 1px; }
/* The compact variant the factory applies by default: shorter than a full-page
   composer but otherwise identical. A host that wants the tall surface passes
   compact: false and gets .mm-rte alone. */
.mm-rte-field .mm-rte-compact { min-height: 84px; max-height: 220px; font-size: .9rem; }