.safe-rich-editor {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden;
}

.safe-rich-editor:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.safe-rich-editor__toolbar {
    display: flex;
    gap: 4px;
    padding: 6px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-sunken, var(--surface));
    overflow-x: auto;
}

.safe-rich-editor__tool {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    color: var(--text);
    border: 0;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
}

.safe-rich-editor__tool:hover,
.safe-rich-editor__tool[aria-pressed="true"] {
    color: var(--primary);
    background: var(--primary-soft, rgba(145, 71, 255, .12));
}

.safe-rich-editor__tool:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 1px;
}

.safe-rich-editor__tool .material-symbols-outlined { font-size: 21px; }
.safe-rich-editor__tool--text { font-weight: 800; }

.safe-rich-editor .safe-rich-editor__input {
    display: block;
    width: 100%;
    min-height: 220px;
    margin: 0;
    padding: 16px;
    color: var(--text);
    border: 0;
    border-radius: 0;
    outline: 0;
    background: var(--surface);
    resize: vertical;
    line-height: 1.65;
}

.safe-rich-editor .safe-rich-editor__input[hidden] { display: none; }
.safe-rich-editor--compact .safe-rich-editor__input { min-height: 150px; }

.safe-rich-editor__preview {
    min-height: 220px;
    padding: 16px;
}

.safe-rich-editor--compact .safe-rich-editor__preview { min-height: 150px; }
.safe-rich-editor__preview[hidden] { display: none; }

.safe-rich-content { overflow-wrap: anywhere; line-height: 1.68; }
.safe-rich-content > :first-child { margin-top: 0; }
.safe-rich-content > :last-child { margin-bottom: 0; }
.safe-rich-content p { white-space: pre-wrap; }
.safe-rich-content h3,
.safe-rich-content h4 { margin: 1.35em 0 .55em; color: var(--text); line-height: 1.3; }
.safe-rich-content ul,
.safe-rich-content ol { padding-left: 1.5em; }
.safe-rich-content blockquote {
    margin: 1em 0;
    padding: .75em 1em;
    color: var(--text-sec);
    border-left: 4px solid var(--primary);
    background: var(--surface-sunken, var(--surface));
}

@media (max-width: 560px) {
    .safe-rich-editor__tool {
        flex-basis: 42px;
        width: 42px;
        min-width: 42px;
        height: 42px;
    }
}