.rich-editor-wrapper {
    border: 1px solid #e6eaf5;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

    .rich-editor-wrapper .rich-editor-toolbar {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 2px;
        padding: 2px;
        border-bottom: 1px solid #e6eaf5;
        background: #f8faff;
        flex-wrap: wrap;
        min-width: min-content;
        min-height: min-content;
        position: relative;
    }

        .rich-editor-wrapper .rich-editor-toolbar > button {
            width: 24px;
            height: 24px;
            border: none;
            background: transparent;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.15s ease;
            font-size: 12px;
            color: #475467;
        }

            .rich-editor-wrapper .rich-editor-toolbar > button:hover {
                background: #e9eefc;
                color: #1E5EFF;
            }

        .rich-editor-wrapper .rich-editor-toolbar .rich-editor-link-popover {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 4px;
            padding: 4px;
            background: #fff;
            border: 1px solid #dcdcdc;
            border-radius: 10px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
            z-index: 20;
            width: fit-content;
            min-width: 90px;
            max-width: min(500px, 100%);
        }

            .rich-editor-wrapper .rich-editor-toolbar .rich-editor-link-popover input {
                flex: 1;
                width: 320px;
                max-width: 100%;
            }

    .rich-editor-wrapper .rich-editor-content {
        min-height: 28px;
        min-width: 90px;
        padding: 5px 10px;
        outline: none;
        font-size: 12px;
        line-height: 1.5;
        color: #101828;
    }

        .rich-editor-wrapper .rich-editor-content:empty:before {
            content: attr(data-placeholder);
            color: #98a2b3;
        }

        .rich-editor-wrapper .rich-editor-content ul {
            padding-left: 18px;
        }

        .rich-editor-wrapper .rich-editor-content b,
        .rich-editor-wrapper .rich-editor-content strong {
            font-weight: 600;
        }

        .rich-editor-wrapper .rich-editor-content i,
        .rich-editor-wrapper .rich-editor-content em {
            font-style: italic;
        }

.rich-editor-wrapper.toolbar-left {
    display: flex;
}

    .rich-editor-wrapper.toolbar-left .rich-editor-toolbar {
        flex-direction: column;
        border-bottom: none;
        border-right: 1px solid #e6eaf5;
    }

    .rich-editor-wrapper.toolbar-left .rich-editor-content {
        flex: 1;
        min-width: 72px;
    }