@php
    $name = isset($name) ? $name : 'content';
    $label = isset($label) ? $label : 'Conteúdo';
    $value = isset($value) ? $value : '{"type":"doc","content":[]}';
    $required = isset($required) ? $required : false;
    $assetsOnly = isset($assets_only) ? $assets_only : false;
@endphp

@if(!$assetsOnly)
<div class="mb-3 content-rich-editor-wrapper" id="wrapper-{{ $name }}" data-name="{{ $name }}">
    <label for="input-{{ $name }}" id="label-{{ $name }}" class="form-label fw-bold">
        {{ $label }} {!! $required ? '<span class="text-danger" aria-hidden="true">*</span><span class="visually-hidden">Obrigatório</span>' : '' !!}
    </label>
    
    <!-- Componente Vue/Tiptap V2 -->
    <input type="hidden" name="{{ $name }}" id="input-{{ $name }}" value="{{ old($name, $value ?? '') }}">
    
    <div class="content-rich-editor-main">
        <section aria-labelledby="label-{{ $name }}" class="content-rich-editor-container border rounded bg-white">
                
               <!-- Toolbar Word-like: 2 linhas, 1 dropdown consolidado -->
                <header class="content-rich-toolbar bg-light border-bottom" id="toolbar-{{ $name }}">

                    <!-- Linha 1: Fonte + Títulos + Listas + Link + Inserir + Fullscreen -->
                    <div class="content-rich-toolbar-row d-flex align-items-center gap-1 flex-wrap" style="padding: 4px 8px;">

                        <!-- Formatações de Fonte -->
                        <div class="btn-group btn-group-sm flex-nowrap" role="group" aria-label="Estilo de texto">
                            <button type="button" class="btn btn-outline-secondary" data-command="bold" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Negrito — Ctrl+B" aria-label="Negrito">
                                <i class="bi bi-type-bold" aria-hidden="true"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" data-command="italic" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Itálico — Ctrl+I" aria-label="Itálico">
                                <i class="bi bi-type-italic" aria-hidden="true"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" data-command="underline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Sublinhado — Ctrl+U" aria-label="Sublinhado">
                                <i class="bi bi-type-underline" aria-hidden="true"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" data-command="strike" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Tachado — Riscado" aria-label="Tachado">
                                <i class="bi bi-type-strikethrough" aria-hidden="true"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" data-command="highlight" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Marca-Texto — Realça com cor" aria-label="Marca-Texto">
                                <i class="bi bi-highlighter" aria-hidden="true"></i>
                            </button>
                        </div>

                        <span class="border-start mx-1" style="height: 20px; display: inline-block;"></span>

                        <!-- Títulos e Texto (botões simples com tooltip) -->
                        <div class="btn-group btn-group-sm flex-nowrap" role="group" aria-label="Títulos e Texto">
                            <button type="button" class="btn btn-outline-secondary" data-command="h2" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Título Principal (H2) — Seções principais" aria-label="Título Principal H2">
                                <i class="bi bi-type-h2" aria-hidden="true"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" data-command="h3" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Título Secundário (H3) — Subseções" aria-label="Título Secundário H3">
                                <i class="bi bi-type-h3" aria-hidden="true"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" data-command="h4" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Título Terciário (H4) — Tópicos internos" aria-label="Título Terciário H4">
                                <i class="bi bi-type-h4" aria-hidden="true"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" data-command="paragraph" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Texto Padrão — Parágrafo normal" aria-label="Texto Padrão">
                                <i class="bi bi-text-paragraph" aria-hidden="true"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" data-command="blockquote" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Citação — Trecho destacado" aria-label="Citação">
                                <i class="bi bi-quote" aria-hidden="true"></i>
                            </button>
                        </div>

                        <span class="border-start mx-1" style="height: 20px; display: inline-block;"></span>

                        <!-- Listas -->
                        <div class="btn-group btn-group-sm flex-nowrap" role="group" aria-label="Listas">
                            <button type="button" class="btn btn-outline-secondary" data-command="bulletList" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Lista com Marcadores — Itens com pontos" aria-label="Lista com Marcadores">
                                <i class="bi bi-list-ul" aria-hidden="true"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" data-command="orderedList" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Lista Numerada — Itens com números" aria-label="Lista Numerada">
                                <i class="bi bi-list-ol" aria-hidden="true"></i>
                            </button>
                        </div>

                        <span class="border-start mx-1" style="height: 20px; display: inline-block;"></span>

                        <!-- Link inline -->
                        <div class="btn-group btn-group-sm flex-nowrap" role="group" aria-label="Link">
                            <button type="button" class="btn btn-outline-secondary text-success" data-command="insertLink" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Inserir Link" aria-label="Inserir Link">
                                <i class="bi bi-link" aria-hidden="true"></i>
                            </button>
                        </div>

                        <span class="border-start mx-1" style="height: 20px; display: inline-block;"></span>

                        <!-- Inserir (dropdown consolidado: mídia + estrutura + tabela + blocos) -->
                        <div class="btn-group btn-group-sm flex-nowrap" role="group" aria-label="Inserir Elementos">
                            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Inserir Elementos">
                                <i class="bi bi-plus-circle" aria-hidden="true"></i> <span class="d-none d-md-inline">Inserir</span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-insert">
                                <li><h6 class="dropdown-header">Mídia</h6></li>
                                <li><a href="#" class="dropdown-item" data-command="contentRichMedia"><i class="bi bi-image text-primary" style="width: 20px;"></i> Imagem / PDF</a></li>
                                <li><a href="#" class="dropdown-item" data-command="insertYoutube"><i class="bi bi-youtube text-danger" style="width: 20px;"></i> Vídeo do YouTube</a></li>
                                <li><a href="#" class="dropdown-item" data-command="contentRichIframe"><i class="bi bi-window-sidebar text-info" style="width: 20px;"></i> Card / Iframe</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><h6 class="dropdown-header">Estrutura</h6></li>
                                <li><a href="#" class="dropdown-item" data-command="horizontalRule"><i class="bi bi-dash" style="width: 20px;"></i> Linha Horizontal</a></li>
                                <li><a href="#" class="dropdown-item" data-command="insertColumns"><i class="bi bi-columns" style="width: 20px;"></i> Dividir em Colunas</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><h6 class="dropdown-header">Tabela</h6></li>
                                <li><a href="#" class="dropdown-item" data-command="insertTable">Inserir Nova Tabela</a></li>
                                <li><a href="#" class="dropdown-item" data-command="addColumnBefore">Adicionar Coluna Antes</a></li>
                                <li><a href="#" class="dropdown-item" data-command="addColumnAfter">Adicionar Coluna Depois</a></li>
                                <li><a href="#" class="dropdown-item" data-command="deleteColumn">Remover Coluna</a></li>
                                <li><a href="#" class="dropdown-item" data-command="addRowBefore">Adicionar Linha Antes</a></li>
                                <li><a href="#" class="dropdown-item" data-command="addRowAfter">Adicionar Linha Depois</a></li>
                                <li><a href="#" class="dropdown-item" data-command="deleteRow">Remover Linha</a></li>
                                <li><a href="#" class="dropdown-item text-danger" data-command="deleteTable">Remover Tabela</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><h6 class="dropdown-header">Blocos Especiais</h6></li>
                                <li><a href="#" class="dropdown-item" data-command="insertFaq"><i class="bi bi-question-circle text-danger" style="width: 20px;"></i> Sanfona (FAQ)</a></li>
                                <li><a href="#" class="dropdown-item" data-command="insertCta"><i class="bi bi-hand-index-thumb text-danger" style="width: 20px;"></i> Botão de Destaque</a></li>
                                <li><a href="#" class="dropdown-item" data-command="insertSteps"><i class="bi bi-list-task text-danger" style="width: 20px;"></i> Passo-a-Passo</a></li>
                                <li><a href="#" class="dropdown-item" data-command="insertCards"><i class="bi bi-grid-3x3-gap text-danger" style="width: 20px;"></i> Grade de Cards</a></li>
                                <li><a href="#" class="dropdown-item" data-command="insertCarousel"><i class="bi bi-sliders text-danger" style="width: 20px;"></i> Carrossel de Slides</a></li>
                                <li><a href="#" class="dropdown-item" data-command="insertInteractiveTable"><i class="bi bi-table text-danger" style="width: 20px;"></i> Tabela Interativa e Filtrável</a></li>
                                <li><a href="#" class="dropdown-item" data-command="insertCommandLine"><i class="bi bi-link-45deg text-danger" style="width: 20px;"></i> Barra de Ações Rápidas</a></li>
                                <li><a href="#" class="dropdown-item text-danger" data-command="insertHtmlFree"><i class="bi bi-code me-2"></i> HTML Livre</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a href="#" class="dropdown-item text-danger" data-command="outdated"><i class="bi bi-slash-circle me-2"></i> Marcar Texto Defasado</a></li>
                            </ul>
                        </div>

                        <span class="border-start mx-1" style="height: 20px; display: inline-block;"></span>

                        <!-- Controles do Editor -->
                        <div class="btn-group btn-group-sm flex-nowrap" role="group" aria-label="Visualização">
                            <button type="button" class="btn btn-outline-secondary" data-command="fullscreen" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Tela Cheia — Expande o editor" aria-label="Tela Cheia">
                                <i class="bi bi-arrows-fullscreen" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Linha 2: Alinhamento + Recuo + Link Portal + Defasado -->
                    <div class="content-rich-toolbar-row d-flex align-items-center gap-1 flex-wrap" style="padding: 2px 8px; border-top: 1px solid #e9ecef; background-color: #f4f4f4;">

                        <!-- Alinhamento -->
                        <div class="btn-group btn-group-sm flex-nowrap" role="group" aria-label="Alinhamento">
                            <button type="button" class="btn btn-outline-secondary" data-command="alignLeft" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Alinhar à Esquerda" aria-label="Alinhar à Esquerda">
                                <i class="bi bi-text-left" aria-hidden="true"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" data-command="alignCenter" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Centralizar" aria-label="Centralizar">
                                <i class="bi bi-text-center" aria-hidden="true"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" data-command="alignRight" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Alinhar à Direita" aria-label="Alinhar à Direita">
                                <i class="bi bi-text-right" aria-hidden="true"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" data-command="alignJustify" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Justificar — Alinha nas duas margens" aria-label="Justificar">
                                <i class="bi bi-text-paragraph" aria-hidden="true"></i>
                            </button>
                        </div>

                        <span class="border-start mx-1" style="height: 20px; display: inline-block;"></span>

                        <!-- Recuo -->
                        <div class="btn-group btn-group-sm flex-nowrap" role="group" aria-label="Recuo">
                            <button type="button" class="btn btn-outline-secondary" data-command="outdent" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Diminuir Recuo" aria-label="Diminuir Recuo">
                                <i class="bi bi-text-indent-left" aria-hidden="true"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" data-command="indent" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Aumentar Recuo" aria-label="Aumentar Recuo">
                                <i class="bi bi-text-indent-right" aria-hidden="true"></i>
                            </button>
                        </div>

                        <span class="border-start mx-1" style="height: 20px; display: inline-block;"></span>

                        <!-- Link para Conteúdo do Portal -->
                        <div class="btn-group btn-group-sm flex-nowrap" role="group" aria-label="Link Portal">
                            <button type="button" class="btn btn-outline-secondary" data-command="contentRichLink" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Link para Conteúdo do Portal" aria-label="Link para Conteúdo do Portal">
                                <i class="bi bi-share" aria-hidden="true"></i>
                            </button>
                        </div>

                        <span class="border-start mx-1" style="height: 20px; display: inline-block;"></span>

                        <!-- Defasado -->
                        <div class="btn-group btn-group-sm flex-nowrap" role="group" aria-label="Texto Defasado">
                            <button type="button" class="btn btn-outline-secondary" data-command="outdated" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay='{"show":300,"hide":0}' title="Texto Defasado — Marca como descontinuado" aria-label="Marcar Texto Defasado">
                                <i class="bi bi-slash-circle" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>
                </header>

                <!-- 2ª Linha: Toolbar Acessória de Mídia (Surge dinamicamente abaixo da 1ª linha) -->
                <div class="js-contextual-media-toolbar d-none" style="padding: 8px; border-bottom: 1px solid #d2d6de; background-color: #f4f4f4; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;">
                    <span class="small text-muted me-2 fw-bold"><i class="bi bi-image-fill"></i> Opções de Mídia:</span>
                    
                    <!-- Botões específicos de Imagem -->
                    <div class="btn-group btn-group-sm" role="group" data-media-type="image">
                        <button type="button" class="btn btn-info text-white" data-command="mediaRotate" title="Girar Imagem"><i class="bi bi-arrow-clockwise"></i> Girar</button>
                        <button type="button" class="btn btn-outline-secondary" data-command="mediaSizeUp" title="Aumentar"><i class="bi bi-zoom-in"></i> Aumentar</button>
                        <button type="button" class="btn btn-outline-secondary" data-command="mediaSizeDown" title="Reduzir"><i class="bi bi-zoom-out"></i> Reduzir</button>
                    </div>

                    <!-- Botões de Alinhamento (Imagens e PDFs) -->
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-outline-secondary" data-command="mediaAlignLeft" title="Alinhar à Esquerda"><i class="bi bi-align-left"></i> Esquerda</button>
                        <button type="button" class="btn btn-outline-secondary" data-command="mediaAlignCenter" title="Centralizar"><i class="bi bi-align-center"></i> Centro</button>
                        <button type="button" class="btn btn-outline-secondary" data-command="mediaAlignRight" title="Alinhar à Direita"><i class="bi bi-align-right"></i> Direita</button>
                    </div>
                </div>

                <!-- Área de Edição -->
                <div class="editor-element" id="editor-{{ $name }}" style="padding: 15px; background: #fafafa;"></div>
        </section>
    </div>
</div>
@endif

<!-- Modais Dinâmicos e Scripts Singleton -->
@if (!isset($GLOBALS['lotep_editor_assets_rendered']))
    @php $GLOBALS['lotep_editor_assets_rendered'] = true; @endphp
    
    @include('v2-service-contentricheditor::components.modals.media-modal')
    @include('v2-service-contentricheditor::components.modals.search-modal')

    <!-- Modal Visualizador de PDF -->
    <div class="modal fade" id="modal-lotep-pdf-viewer" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white" style="display: flex; justify-content: space-between; align-items: center;">
                    <h5 class="modal-title fw-bold" id="lotep-pdf-title">Visualizar PDF</h5>
                    <div class="d-flex align-items-center gap-2">
                        <a href="#" id="lotep-pdf-download" target="_blank" class="btn btn-sm btn-success text-white"><i class="bi bi-download"></i> Baixar</a>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fechar"></button>
                    </div>
                </div>
                <div class="modal-body p-0" style="height: 75vh;">
                    <iframe id="lotep-pdf-iframe" src="" style="width: 100%; height: 100%; border: none;"></iframe>
                </div>
            </div>
        </div>
    </div>

    @push('css')
        <style>
            .editor-element {
                background-color: #e4e4e4;
                padding: 30px 15px !important;
                border-bottom-left-radius: 3px;
                border-bottom-right-radius: 3px;
            }
            .content-rich-editor-main .ProseMirror {
                outline: none;
                min-height: 200px;
                background-color: #ffffff;
                padding: 50px 60px;
                box-shadow: 0 4px 10px rgba(0,0,0,0.1);
                max-width: 816px;
                margin: 0 auto;
            }
            /* Toolbar sticky — visível ao rolar a página */
            .content-rich-editor-container > header {
                position: sticky;
                top: 0;
                z-index: 10;
                background-color: #f8f9fa;
            }
            /* Toolbar Word-like: 2 linhas, sem overflow para não clipar dropdowns (flex-wrap) */
            .content-rich-toolbar {
                padding: 0;
            }
            .content-rich-toolbar-row {
                min-width: min-content;
            }
            .content-rich-toolbar .btn-group {
                margin-right: 2px;
                flex-shrink: 0;
            }
            .content-rich-toolbar .btn {
                white-space: nowrap;
            }
            .content-rich-toolbar .btn-group .btn[data-command] {
                min-width: 32px;
                width: 32px;
                height: 32px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0;
                flex-shrink: 0;
            }
            .content-rich-toolbar .dropdown-toggle {
                min-width: auto;
                width: auto;
            }
            .content-rich-toolbar .dropdown-menu {
                max-height: min(65vh, 420px);
                overflow-y: auto;
            }
            .content-rich-toolbar .dropdown-menu-insert {
                min-width: 260px;
                max-width: 320px;
            }
            .content-rich-editor-main .ProseMirror > * + * { margin-top: 0.75em; }
            .content-rich-editor-main .ProseMirror del.content-rich-outdated { color: #888; text-decoration-color: #d9534f; }
            .content-rich-editor-wrapper .is-active { background-color: #e6e6e6; }
            
            /* Estado Selecionado (Imagens e Atom Nodes) */
            .content-rich-editor-main .ProseMirror .ProseMirror-selectednode {
                outline: 3px solid #3c8dbc !important;
                box-shadow: 0 0 10px rgba(60, 141, 188, 0.5) !important;
            }
            .content-rich-editor-main .ProseMirror img.ProseMirror-selectednode {
                outline: 3px solid #3c8dbc !important;
            }
            
            /* Modificadores do Fullscreen — overlay escuro destacando o editor */
            .content-rich-editor-wrapper.is-fullscreen {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 1035;
                background: rgba(0,0,0,0.72);
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 32px 48px;
            }
            .content-rich-editor-wrapper.is-fullscreen .content-rich-editor-main {
                width: 100%;
                max-width: 960px;
                max-height: calc(100vh - 64px);
                display: flex;
                flex-direction: column;
            }
            .content-rich-editor-wrapper.is-fullscreen .content-rich-editor-container {
                display: flex;
                flex-direction: column;
                flex-grow: 1;
                box-shadow: 0 12px 40px rgba(0,0,0,0.5);
                border-radius: 10px;
                overflow: hidden;
                background: #fff;
                border: none !important;
            }
            .content-rich-editor-wrapper.is-fullscreen .content-rich-editor-main .ProseMirror {
                min-height: 100%;
            }
            /* Esconde label e input hidden no fullscreen */
            .content-rich-editor-wrapper.is-fullscreen > label,
            .content-rich-editor-wrapper.is-fullscreen > input[type="hidden"] {
                display: none;
            }
            /* Editor area cresce para ocupar espaço */
            .content-rich-editor-wrapper.is-fullscreen .editor-element {
                flex-grow: 1;
                overflow-y: auto;
            }

            .content-rich-media-preview { padding: 5px; text-align: center; margin: 15px 0; clear: none; }
            .content-rich-media-preview img { max-width: 100%; height: auto; }

            /* Novos Estilos (Citação Clássica) */
            .content-rich-editor-main .ProseMirror blockquote {
                border-left: 4px solid #3c8dbc;
                padding-left: 15px;
                margin-left: 0;
                margin-right: 0;
                color: #555;
                font-style: italic;
                background-color: #f9f9f9;
                padding: 10px 15px;
                border-radius: 0 4px 4px 0;
            }

            /* Estilos das Tabelas Nativas do Tiptap para o Bootstrap */
            .content-rich-editor-main .ProseMirror table {
                width: 100%;
                max-width: 100%;
                margin-bottom: 20px;
                background-color: transparent;
                border-collapse: collapse;
                border-spacing: 0;
            }
            .content-rich-editor-main .ProseMirror table th,
            .content-rich-editor-main .ProseMirror table td {
                border: 1px solid #ddd;
                padding: 8px;
                line-height: 1.42857143;
                vertical-align: top;
            }
            .content-rich-editor-main .ProseMirror table th {
                background-color: #f4f4f4;
                font-weight: bold;
                text-align: left;
            }

            /* Container de Colunas via Flexbox */
            .content-rich-columns-container {
                display: flex;
                flex-wrap: wrap;
                margin-right: -15px;
                margin-left: -15px;
                margin-bottom: 15px;
            }
            .content-rich-column-item {
                position: relative;
                min-height: 1px;
                padding-right: 15px;
                padding-left: 15px;
                flex: 1 1 0;
                min-width: 300px;
            }
            .content-rich-columns-container > .content-rich-column-item:first-child {
                border-right: 1px solid #d2d6de;
            }

            /* Classes utilitárias para alinhamento de imagens */
            .content-rich-media-align-left { float: left; margin: 0 15px 15px 0 !important; }
            .content-rich-media-align-right { float: right; margin: 0 0 15px 15px !important; }
            .content-rich-media-align-center { display: block; margin-left: auto !important; margin-right: auto !important; text-align: center; float: none; }
        </style>
    @endpush

    @push('scripts')
    <script type="module" src="{{ asset('assets/js/content-rich-editor-bundle.js') }}?v=vendor-tiptap"></script>
    @endpush
@endif