div.input.textarea { width: 100%; max-width: 100%; min-width: 0; }
div.input.textarea > label.placeholder { margin: 0; max-width: none; text-align: left; }
div.input.textarea > textarea, .rich-editor {
    box-sizing: border-box; width: 100%; min-height: 130px; padding: 10px;
    font: inherit; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left;
    color: var(--input-color-normal, inherit); background: var(--input-background-normal, #fff);
    border: 1px solid var(--input-border-normal, #aaa); border-radius: 5px;
}
div.input.textarea > textarea { resize: vertical; display: block; }
div.input.textarea > textarea[hidden] { display: none; }
.rich-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 6px; padding: 8px; background: var(--input-background-normal, #fff); border: 1px solid var(--input-border-normal, #aaa); border-bottom: 0; border-radius: 5px 5px 0 0; }
.rich-toolbar button, .rich-toolbar select { box-sizing: border-box; width: auto; min-width: 36px; height: 36px; margin: 0; padding: 0 9px; font: inherit; font-size: 14px; line-height: normal; color: var(--input-color-normal, #222); background: var(--input-background-normal, #fff); border: 1px solid var(--input-border-normal, #aaa); border-radius: 4px; cursor: pointer; }
.rich-toolbar button[aria-pressed="true"] { color: var(--dialog-color-highlight, #2eabff); border-color: currentColor; box-shadow: inset 0 -2px currentColor; }
.rich-toolbar button:focus-visible, .rich-toolbar select:focus-visible { outline: 2px solid var(--dialog-color-highlight, #2eabff); outline-offset: 1px; }
.rich-toolbar .rich-select { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; width: auto; min-width: 0; max-width: 100%; text-align: left; }
.rich-select > span { font-size: 11px; line-height: 1.3; font-weight: normal; }
.rich-toolbar :disabled { opacity: .5; cursor: default; }
.rich-toolbar + .rich-editor { border-radius: 0 0 5px 5px; }
.rich-editor { min-height: 160px; max-height: 450px; overflow-y: auto; }
.rich-editor:focus { outline: 2px solid var(--dialog-color-highlight, #2eabff); outline-offset: -2px; }
.rich-editor p { margin: 0 0 .6em; width: auto; max-width: none; text-align: inherit; font: inherit; }
.rich-editor h2, .rich-editor h3, .rich-editor h4 { display: block; width: auto; margin: .6em 0 .35em; padding: 0; font-family: inherit; line-height: 1.3; font-weight: 700; color: inherit; text-align: inherit; }
.rich-editor h2 { font-size: 1.6em; }
.rich-editor h3 { font-size: 1.3em; }
.rich-editor h4 { font-size: 1.1em; }
.rich-editor blockquote { margin: .6em 0; padding: .25em .8em; border-left: 3px solid var(--input-border-normal, #aaa); }
.rich-editor ul, .rich-editor ol { padding-left: 24px; }
.rich-editor a { text-decoration: underline; }
.rich-editor[contenteditable="false"] { opacity: .65; }
.rich-status { display: block; font-size: 12px; min-height: 18px; }
@media (max-width: 767px) {
    .rich-toolbar button, .rich-toolbar select { min-height: 44px; height: 44px; }
    .rich-toolbar .rich-select { flex: 1 1 95px; }
    .rich-select select { width: 100%; min-width: 0; }
    .rich-editor { min-height: 180px; font-size: 16px; }
}

/* Uniform toolbar targets on desktop and mobile. */
.rich-toolbar button { flex: 0 0 40px; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.rich-toolbar button i { position: static; width: auto; height: auto; margin: 0; padding: 0; font-size: 16px; line-height: 1; pointer-events: none; }
.rich-format-menu { padding: 6px; }
.rich-format-menu button { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; min-height: 40px; margin: 0; padding: 0 12px; border: 0; border-radius: 3px; color: var(--input-color-normal, #222); background: transparent; font: inherit; text-align: left; }
.rich-format-menu button i { position: static; width: 20px; height: auto; line-height: 1; font-size: 16px; }
.rich-format-menu button:hover, .rich-format-menu button[aria-pressed="true"] { background: var(--page-background-normal, #f0f2f5); }
.rich-format-menu button:focus-visible { outline: 2px solid var(--dialog-color-highlight, #2eabff); }

/* Keep the field label, saved-length counter and help together. */
div.input.textarea > .textarea-header { display: flex; align-items: center; gap: 8px; min-height: 30px; text-align: left; }
div.input.textarea .textarea-header > label.placeholder { position: static; display: block; width: auto; min-width: 0; max-width: none; margin: 0; padding: 0 0 0 5px; font-weight: bold; text-align: left; }
.textarea-header > .textarea-count { font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
div.input.textarea .textarea-header > i.tip { position: static; flex: 0 0 30px; margin: 0; padding: 0; text-align: center; }
.rich-toolbar button svg, .rich-format-menu button svg { position: static; flex: 0 0 20px; width: 20px; height: 20px; margin: 0; padding: 0; pointer-events: none; }

.rich-editor img { max-width:100%; height:auto; }
.rich-editor figure[data-youtube] { cursor: pointer; white-space: normal; }
/* Select the video block in the editor; saved page output remains playable. */
.rich-editor figure[data-youtube] iframe { pointer-events: none; }
.rich-editor figure[data-youtube]:hover { outline: 2px solid var(--dialog-color-highlight, #2eabff); }
.rich-image-picker { box-sizing:border-box; padding:14px; width:100%; }
.rich-image-picker label { display:flex; flex-direction:column; width:100%; min-width:0; margin:10px 0; padding:0; text-align:left; font-size:13px; }
.rich-image-picker input:not([type=file]) { box-sizing:border-box; width:100%; min-width:0; height:38px; padding:6px; font-size:16px; }
.rich-image-actions,.rich-image-choices { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.rich-image-picker button { width:auto; min-height:40px; height:auto; padding:8px 12px; font-size:14px; }
.rich-image-picker [role=status] { font-size:12px; overflow-wrap:anywhere; }

/* Shared draft editor stays below contextual pickers (108/109). */
.rich-preview { max-height:4.5em; overflow:hidden; overflow-wrap:anywhere; margin:8px; text-align:left; }
.rich-launch { min-height:44px; padding:8px 16px; }
/* Document workspace follows the body/front-dock boundaries. */
.rich-dialog-overlay { position:fixed; inset:0; z-index:107; background:var(--body-background-normal,#e4e7eb); background:color-mix(in srgb,var(--page-background-normal,#fff) 85%,#000); display:flex; align-items:stretch; justify-content:center; padding:20px; box-sizing:border-box; }
.rich-dialog-panel { box-sizing:border-box; width:100%; max-width:768px; min-width:0; height:100%; overflow:auto; padding:24px; border:1px solid var(--input-border-normal,#aaa); border-radius:0; box-shadow:0 2px 12px #0003; background:var(--page-background-normal,#fff); color:var(--page-color-normal,#222); }
.rich-dialog-panel > h2 { margin:0 0 12px; }
.rich-dialog-panel .rich-editor { min-height:45dvh; max-height:none; overflow-y:visible; background:var(--page-background-normal,#fff); color:var(--page-color-normal,#222); }
.rich-dialog-actions { position:sticky; bottom:-24px; display:flex; justify-content:flex-end; gap:12px; padding:12px 0; background:var(--page-background-normal,#fff); z-index:1; }
.rich-dialog-actions button { min-height:44px; padding:8px 20px; }
body.dock-top .rich-dialog-overlay { top:calc(50px + var(--sync-offset,0px)); }
body.dock-bottom .rich-dialog-overlay { bottom:50px; }
@media(min-width:1024px) {
    body.dock-left .rich-dialog-overlay { left:330px; }
    body.dock-right .rich-dialog-overlay { right:330px; }
    body.dock-left.dock-right .rich-dialog-overlay { right:0; }
}
@media(min-width:1366px) {
    body.dock-left.dock-right .rich-dialog-overlay { right:330px; }
}
@media(max-width:600px) {
    .rich-dialog-overlay { padding:6px; }
    .rich-dialog-panel { padding:12px; }
    .rich-dialog-actions { bottom:-12px; }
}