/* PHYSIO SAMOS — admin console: the formatted-text editor (PSA.RichText, admin-richtext.jsx).
   The frame is admin.css's .compose / .compose__tools / .tool / .compose__foot; this file adds the
   writing surface, images, bubbles and the toolbar's extra states. Tokens only, so both themes follow.
   Load order in index.html: vendor/prosemirror/prosemirror.css, vendor/prosemirror/gapcursor.css,
   then this file. */

.rt { position: relative; }

.rt-mount .ProseMirror { padding: 22px 30px 48px; min-height: 360px; outline: none; max-width: none; }
@media (max-width: 900px) {
  .rt-mount .ProseMirror { padding: 16px 16px 40px; min-height: 260px; }
}
.rt .ProseMirror .is-empty::before { content: attr(data-placeholder); color: var(--muted); float: left; height: 0; pointer-events: none; }
.rt .ProseMirror a { cursor: text; text-decoration: underline; text-underline-offset: 2px; }

.rt .pm-figure { position: relative; margin: 1.2em 0; }
.rt .pm-figure img { width: 100%; height: auto; border-radius: 12px; display: block; }
.rt .pm-figure figcaption:empty { display: none; }
.rt .pm-figure.is-missing-alt img { outline: 2px dashed color-mix(in srgb, var(--danger) 70%, transparent); outline-offset: 3px; }

.rt .ProseMirror-selectednode { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 12px; }
.rt hr.ProseMirror-selectednode { outline-offset: 6px; }
.rt .ProseMirror-gapcursor:after { border-top-color: var(--ink); }
.rt-dropcursor { background: var(--focus); }

/* The toolbar never hides a control (owner, 2026-09-18). It used to be one nowrap row that scrolled
   sideways with the scrollbar hidden, so at the console's own minimum window (1200x700) it needed
   540px in a 515px editor column: undo and redo sat outside it, invisible and unreachable by mouse,
   and the three separators had already been squeezed to nothing. Now the tools keep their size, the
   separators cannot shrink, the buttons step down to 30px where the column is narrow, and a row that
   still would not fit wraps instead of scrolling. */
.rt-tools { flex-wrap: wrap; overflow-x: visible; }
.rt-tools .sep { flex: none; }
@media (max-width: 1330px) {
  .rt-tools .tool { width: 30px; height: 30px; }
  .rt-tools .sep { margin: 0 3px; }
}
.rt-block { margin-right: 4px; flex: none; }
.rt-tools .tool { flex: none; }
.tool[aria-pressed="true"] { background: var(--press); color: var(--ink); }

.rt-loading { display: flex; align-items: center; min-height: 200px; padding: 22px 30px; }

.rt-bubble {
  position: absolute; z-index: 12; display: flex; align-items: center; gap: 4px;
  max-width: min(520px, calc(100% - 16px)); padding: 4px 4px 4px 12px;
  border: 1px solid var(--hairline); border-radius: var(--r); background: var(--paper);
  box-shadow: var(--shadow-float); font-size: 13.5px;
}
.rt-bubble__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); margin-right: 6px; }
.rt-bubble .btn { flex: none; }

.rt-hint { color: var(--ink-3); }
@media (max-width: 560px) { .rt-hint { display: none; } }

.rt-notices { display: grid; gap: 8px; margin-top: 12px; }
.rt-notices .notice > div { flex: 1; min-width: 0; }

.rt-img-preview { display: block; max-height: 240px; max-width: 100%; width: auto; height: auto; border-radius: 10px; margin-bottom: 14px; }

@media (pointer: coarse) {
  .rt .tool { width: 44px; height: 44px; }
  .rt-bubble .btn { min-height: 44px; }
}