.rich-editor { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.rich-editor:focus-within { border-color: rgba(8, 170, 229, .68); box-shadow: 0 0 0 3px rgba(8, 170, 229, .1); }
.rich-editor-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); background: #f7fafb; }
.rich-editor-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; margin-left: auto; }
.rich-editor-tool { min-height: 30px; padding: 5px 9px; border: 1px solid transparent; border-radius: 8px; color: var(--ink); background: transparent; font: inherit; font-size: 9px; font-weight: 750; cursor: pointer; }
.rich-editor-tool:hover { border-color: var(--line); background: #fff; }
.rich-editor-tool[data-command="bold"] { font-weight: 900; }
.rich-editor-tool[data-command="italic"] { font-style: italic; }
.rich-editor-tool[data-command="underline"] { text-decoration: underline; }
.rich-editor-tool[data-recording="true"] { color: #b42318; background: #fff0ee; }
.rich-editor-surface { min-height: 120px; max-height: 300px; overflow: auto; padding: 12px; color: #20343e; font-size: 10px; line-height: 1.55; outline: 0; }
.rich-editor-surface:empty::before { color: var(--muted-soft); content: attr(data-placeholder); pointer-events: none; }
.rich-editor-surface p { margin: 0 0 7px; }
.rich-editor-surface ul, .rich-editor-surface ol { margin: 0 0 7px; padding-left: 22px; }
.rich-editor-attachments { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 8px 8px; }
.rich-editor-attachments:empty { display: none; }
.rich-editor-attachment { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 8px; border: 1px solid #cce8f5; border-radius: 999px; color: #245267; background: #eefaff; font-size: 8px; }
.rich-editor-attachment button { width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: inherit; background: rgba(255, 255, 255, .85); cursor: pointer; }
@media (max-width: 620px) { .rich-editor-surface { min-height: 150px; font-size: 16px; } .rich-editor-tool { min-height: 36px; } }