@push('styles')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css">
@endpush

<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">

            {{-- Flash Messages --}}
            @if (session()->has('message'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('message') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif

            @if (session()->has('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif

            {{-- ── Top Action Bar ───────────────────────────────────────────── --}}
            <div class="mb-3 d-flex align-items-center gap-2">

                {{-- Add More --}}
                @if(($role_id == 1) || in_array(23, $permissions))
                @if(!$formMode && !$viewMode)
                <button wire:click="openCreateForm" class="btn btn-primary">
                    <i class="fa-solid fa-plus me-1"></i> Add More
                </button>
                @endif
                @endif

                {{-- My Drafts Toggle Button --}}
                @php
                    $draftCount = \App\Models\CryptoNewsDraft::count();
                @endphp

                @if($draftCount > 0)
                <button type="button"
                        class="btn btn-warning position-relative"
                        x-data
                        @click="$dispatch('toggle-drafts')">
                    <i class="fa fa-file-pen me-1"></i>
                    My Drafts
                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
                          style="font-size:10px">
                        {{ $draftCount }}
                    </span>
                </button>
                @endif

                <a href="{{  URL::to('/admin/crypto-news-import') }}" title="Import JSON" class="btn btn-primary">
                Import JSON
            </a>

            <div class="d-flex align-items-center gap-2">
                 <a class="btn btn-primary float-left mx-1" href="{{ route('crypto-news.ai-generate-form') }}">Ai Generate</a>
            </div>
            <button type="button" wire:click="exportNews" class="btn btn-success">
                Export News
            </button>
            </div>


            {{-- ══════════════════════════════════════════════════════════════ --}}
            {{-- ── DRAFT PANEL (slide toggle, no delete) ──────────────────── --}}
            {{-- ══════════════════════════════════════════════════════════════ --}}
            @php
                $allDrafts = \App\Models\CryptoNewsDraft::latest()
                    ->get();
            @endphp

            @if($allDrafts->isNotEmpty())
            <div x-data="{ open: false }"
                 @toggle-drafts.window="open = !open"
                 x-show="open"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 transform -translate-y-1"
                 x-transition:enter-end="opacity-100 transform translate-y-0"
                 x-transition:leave="transition ease-in duration-150"
                 x-transition:leave-start="opacity-100 transform translate-y-0"
                 x-transition:leave-end="opacity-0 transform -translate-y-1"
                 class="card mb-4 border-warning shadow-sm"
                 style="display:none">

                {{-- Panel Header --}}
                <div class="card-header bg-warning bg-opacity-10 d-flex justify-content-between align-items-center py-3">
                    <div class="d-flex align-items-center gap-2">
                        <i class="fa fa-file-pen text-warning fa-lg"></i>
                        <h5 class="mb-0 fw-semibold text-warning">My Saved Drafts</h5>
                        <span class="badge bg-warning text-dark">{{ $allDrafts->count() }}</span>
                    </div>
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary"
                            @click="open = false">
                        <i class="fa fa-xmark me-1"></i> Close
                    </button>
                </div>

                {{-- Panel Body --}}
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:50px" class="text-center">#</th>
                                    <th>Title / Alias</th>
                                    <th style="width:170px">Focus Keyword</th>
                                    <th style="width:130px">News Type</th>
                                    <th style="width:80px" class="text-center">Status</th>
                                    <th style="width:180px">Last Saved</th>
                                    <th style="width:110px" class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($allDrafts as $i => $draft)
                                <tr>
                                    <td class="text-center text-muted">{{ $i + 1 }}</td>

                                    <td>
                                        <div class="fw-medium text-truncate" style="max-width:340px"
                                             title="{{ $draft->title }}">
                                            {{ $draft->title ?: '<span class="text-muted fst-italic">No title yet</span>' }}
                                        </div>
                                        @if($draft->alias)
                                        <small class="text-muted">/{{ $draft->alias }}</small>
                                        @endif
                                    </td>

                                    <td>
                                        <span class="text-truncate d-inline-block" style="max-width:160px"
                                              title="{{ $draft->focus_keyword }}">
                                            {{ $draft->focus_keyword ?: '—' }}
                                        </span>
                                    </td>

                                    <td>
                                        @switch($draft->is_gabbar)
                                            @case(1) <span class="badge bg-success">News</span> @break
                                            @case(2) <span class="badge bg-info text-dark">Press Release</span> @break
                                            @case(3) <span class="badge bg-warning text-dark">Sponsored</span> @break
                                            @case(4) <span class="badge bg-primary">Guest News</span> @break
                                            @case(5) <span class="badge bg-secondary">Blog</span> @break
                                            @case(6) <span class="badge bg-success">Crypto News</span> @break
                                            @default  <span class="badge bg-light text-dark border">—</span>
                                        @endswitch
                                    </td>

                                    <td class="text-center">
                                        @if($draft->status)
                                        <span class="badge bg-success">Active</span>
                                        @else
                                        <span class="badge bg-secondary">Pending</span>
                                        @endif
                                    </td>

                                    <td>
                                        <div class="small" title="{{ $draft->updated_at }}">
                                            {{ $draft->updated_at->diffForHumans() }}
                                        </div>
                                        <small class="text-muted">
                                            {{ $draft->updated_at->format('d M Y, h:i A') }}
                                        </small>
                                    </td>

                                    <td class="text-center">
                                        {{-- Resume: close panel, open form, load fields --}}
                                        <button type="button"
                                                class="btn btn-sm btn-warning"
                                                title="Resume this draft"
                                                @click="open = false"
                                                wire:click="resumeDraftFromList({{ $draft->id }})">
                                            <i class="fa fa-play me-1"></i> Resume
                                        </button>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- Panel Footer --}}
                <div class="card-footer text-muted small bg-warning bg-opacity-10 py-2">
                    <i class="fa fa-info-circle me-1"></i>
                    Showing <strong>{{ $allDrafts->count() }}</strong>
                    saved {{ \Illuminate\Support\Str::plural('draft', $allDrafts->count()) }} for your account.
                    Drafts are removed automatically once you publish the news.
                </div>

            </div>
            @endif
            {{-- ── END DRAFT PANEL ─────────────────────────────────────────── --}}

            {{-- ── Form Section ─────────────────────────────────────────────── --}}
            @if($formMode)
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ $updateMode ? 'Edit News' : 'Add News' }}</h5>
                    <button wire:click="resetFields" class="btn btn-sm btn-secondary">
                        <i class="fa-solid fa-xmark"></i> Close
                    </button>
                </div>
                <div class="card-body">

                    {{-- ── Draft Status Bar (create mode only) ──────────────── --}}
                    @if(!$updateMode)
                    <div x-data="newsDraftManager()"
                         x-init="startTimer()"
                         @on-draft-saved.window="onSaved($event.detail.savedAt)"
                         @on-draft-discarded.window="onDiscarded()"
                         @prompt-draft-restore.window="promptRestore($event.detail)"
                         class="d-flex align-items-center gap-3 mb-4 px-3 py-2 bg-light rounded border">

                        <span x-show="saving" class="text-muted small">
                            <i class="fa fa-spinner fa-spin me-1"></i> Saving draft...
                        </span>

                        <span x-show="!saving && savedAt" class="text-success small">
                            <i class="fa fa-check-circle me-1"></i>
                            Draft saved at <strong x-text="savedAt"></strong>
                        </span>

                        <span x-show="!saving && !savedAt" class="text-muted small">
                            <i class="fa fa-clock me-1"></i> Auto-saves every 2 minutes
                        </span>

                        @if($draftId)
                        <button type="button"
                                class="btn btn-sm btn-outline-danger ms-auto"
                                wire:click="discardDraft"
                                onclick="return confirm('Discard this draft? All unsaved data will be lost.')">
                            <i class="fa fa-trash me-1"></i> Discard Draft
                        </button>
                        @endif
                    </div>
                    @endif
                    {{-- ── End Draft Status Bar ─────────────────────────────── --}}

                    <form wire:submit.prevent="{{ $updateMode ? 'update' : 'save' }}" enctype="multipart/form-data">
                        <div class="row gy-3">
                            @include('livewire.admin.partials.crypto-news-form')
                        </div>
                    </form>
                </div>
            </div>
            @endif

            {{-- ── View Section ─────────────────────────────────────────────── --}}
            @if($viewMode && $cryptoToView)
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Crypto News Details</h5>
                    <button wire:click="$set('viewMode', false)" class="btn btn-sm btn-secondary">
                        <i class="fa-solid fa-xmark"></i> Close
                    </button>
                </div>
                <div class="card-body">
                    @include('livewire.admin.partials.crypto-news-view')
                </div>
            </div>
            @endif

            {{-- ── News Table ───────────────────────────────────────────────── --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">All News</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3 g-2">
                        <div class="col-md-3">
                            <input type="text" wire:model.debounce.500ms="search" class="form-control" placeholder="Search by title...">
                        </div>

                        <!-- Month filter -->
                        <div class="col-md-3">
                            <select wire:model="month" class="form-control">
                                <option value="">All Months</option>
                                @for($m=1; $m<=12; $m++)
                                    <option value="{{ $m }}">{{ date('F', mktime(0, 0, 0, $m, 1)) }}</option>
                                    @endfor
                            </select>
                        </div>

                        <!-- Created By -->
                        <div class="col-md-3">
                            <select class="form-control" wire:model="created_by">
                                <option value="">All Authors</option>
                                @foreach($authors as $author)
                                <option value="{{ $author->id }}">{{ $author->dispaly_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Is SEO Check -->
                        <div class="col-md-3">
                            <select wire:model="is_seo_check" class="form-control">
                                <option value="">All SEO Check Status</option>
                                <option value="1">Checked</option>
                                <option value="0">Not Checked</option>
                            </select>
                        </div>
                       
                        <div class="col-md-3">
                            <input type="text" 
                                placeholder="Select start Publish Date"
                                onfocus="this.type='date'" 
                                onblur="if(!this.value)this.type='text'"
                                class="form-control"
                                wire:model="startDatePublish">
                        </div>
                        <div class="col-md-3">
                            <input type="text" 
                                placeholder="Select End Publish Date"
                                onfocus="this.type='date'" 
                                onblur="if(!this.value)this.type='text'"
                                class="form-control"
                                wire:model="endDatePublish">
                        </div>
                        <div class="col-md-3">
                            <input type="text" 
                                placeholder="Select Start Created Date"
                                onfocus="this.type='date'" 
                                onblur="if(!this.value)this.type='text'"
                                class="form-control" wire:model.lazy="startDateCreated">
                        </div>
                        <div class="col-md-3">
                            <input type="text" 
                                placeholder="Select End  Created Date"
                                onfocus="this.type='date'" 
                                onblur="if(!this.value)this.type='text'"
                                class="form-control" wire:model.lazy="endDateCreated" >
                        </div>
                        <!-- News Type -->
                        <div class="col-md-3">
                            <select wire:model="is_gabbar" class="form-control">
                                <option value="">All News Types</option>
                                <option value="1">News</option>
                                <option value="2">Press Release</option>
                                <option value="3">Draft</option>
                            </select>
                        </div>

                        <!-- Action Buttons -->
                        <div class="col-md-1">
                            <button type="button" class="btn btn-primary me-1" wire:click="applySearch" title="Apply Filters">
                                <i class="fa-solid fa-magnifying-glass"></i>
                            </button>

                            <button type="button" class="btn btn-secondary" wire:click="resetFilters" title="Reset Filters">
                                <i class="fa-solid fa-arrows-rotate"></i>
                            </button>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <!-- <th style="width: 50px;">SR No.</th> -->
                                    <th style="width: 80px;">Image</th>
                                    <th style="width: 120px;">Title</th>
                                    <th style="width: 120px;">Author</th>
                                    <th style="width: 150px;">Uploaded At</th>
                                    <th style="width: 150px;">Published At</th>
                                    <th style="width: 120px;">News Type</th>
                                    <th style="width: 80px;">SEO Check</th>
                                    <th style="width: 150px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($cryptos as $index => $crypto)
                                <tr>
                                    {{--<td>{{ $cryptos->firstItem() + $index }}</td>--}}
                                    <td>
                                        @if($crypto->image)
                                        <img src="{{ $crypto->image }}" alt="{{ $crypto->img_alt_title }}"  class="img-thumbnail" width="50" height="50" style="width: 50px; height: 50px; object-fit: cover;">
                                        @else
                                        <span class="text-muted">No Image</span>
                                        @endif
                                    </td>
                                    @php
                                            $baseUrl = env('WEB_URL');

                                            // Current time
                                            $now = \Carbon\Carbon::now();

                                            // Published time
                                            $publishedAt = $crypto->published_at
                                                ? \Carbon\Carbon::parse($crypto->published_at)
                                                : null;

                                            // Preview condition
                                            $isPreview = ($crypto->is_seo_check == 0)
                                                || ($publishedAt && $publishedAt->gt($now));

                                            $preview = $isPreview ? '?preview=draft' : '';

                                            // Final URL
                                            $url = $baseUrl . '/' . $crypto->alias . $preview;
                                        @endphp
                                            <td>
                                                <div class="text-truncate" style="max-width: 300px;">
                                                    <a class="text-decoration-none news-title"
                                                    href="{{ $url }}"
                                                    target="_blank"
                                                    title="{{ $crypto->title }}">
                                                        {{ $crypto->title }}
                                                    </a>
                                                </div>
                                            </td>
                                    <td>{{ $crypto->postAuthor?->dispaly_name ?? ($crypto->author_name ?? "N/A")  }}</td>
                                    <td>{{ $crypto->created_at ? $crypto->created_at->format('d M Y h:i A') : 'N/A' }}</td>
                                    <td>{{ $crypto->publishedAt ? date('d M Y h:i A', $crypto->publishedAt) : 'N/A' }}</td>
                                    <td>
                                        @switch($crypto->is_gabbar)
                                            @case(1) <span class="badge bg-success">News</span> @break
                                            @case(2) <span class="badge bg-info text-dark">Press Release</span> @break
                                            @case(3) <span class="badge bg-warning text-dark">Sponsored</span> @break
                                            @case(4) <span class="badge bg-primary">Guest News</span> @break
                                            @case(5) <span class="badge bg-secondary">Blog</span> @break
                                            @case(6) <span class="badge bg-success">Crypto News</span> @break
                                            @default  <span class="badge bg-dark">Draft</span>
                                        @endswitch
                                    </td>
                                    <td class="text-center">
                                        @if($crypto->is_seo_check)
                                        <span class="badge bg-success">Yes</span>
                                        @else
                                        <span class="badge bg-danger">No</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            @if(($role_id == 1) || in_array(24, $permissions))
                                            <button wire:click="view({{ $crypto->id }})" class="btn btn-info" title="View">
                                                <i class="fa-solid fa-eye"></i>
                                            </button>
                                            @endif

                                            @if(($role_id == 1) || in_array(25, $permissions))
                                            <button wire:click="edit({{ $crypto->id }})" class="btn btn-warning" title="Edit">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </button>
                                            @endif
                                            @if(($role_id == 1) || in_array(27, $permissions))
                                            <button class="btn btn-dark" wire:click="confirmActive({{$crypto->id}}, 'CryptoNewsModel')">
                                                @if ($crypto->is_active == 1)
                                                    <i class="fa-solid fa-check"></i>
                                                @else
                                                    <i class="fa-solid fa-times"></i>
                                                @endif

                                            </button>
                                            @endif
                                            @if(($role_id == 1) || in_array(26, $permissions))
                                            <button class="btn btn-danger"
                                                wire:click="confirmDelete({{ $crypto->id }}, 'CryptoNewsModel')"
                                                title="Delete">
                                                <i class="fa-solid fa-trash-can"></i>
                                            </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="9" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="fa-solid fa-inbox fa-3x mb-3 d-block"></i>
                                            No records found
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3">
                        {{ $cryptos->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>
<script src="https://cdn.ckeditor.com/4.22.1/full/ckeditor.js"></script>

<script>
// ─────────────────────────────────────────────────────────────────────────────
// AUTO-DRAFT MANAGER (Alpine — attached to the status bar inside the form)
// ─────────────────────────────────────────────────────────────────────────────
function newsDraftManager() {
    return {
        saving:   false,
        savedAt:  @js($draftSavedAt),
        interval: null,

        startTimer() {
            this.interval = setInterval(() => this.triggerSave(), 25_000);
        },

        triggerSave() {
            this.saving = true;
            Livewire.dispatch('triggerDraftSave');
            setTimeout(() => { this.saving = false; }, 200);
        },

        onSaved(savedAt) {
            this.saving  = false;
            this.savedAt = savedAt;
        },

        onDiscarded() {
            this.saving  = false;
            this.savedAt = null;
            clearInterval(this.interval);
        },

        promptRestore(detail) {
            const msg = `You have an unsaved draft from ${detail.savedAt}.\n\nResume it?`;
            if (confirm(msg)) {
                $wire.resumeDraft(detail.draftId);
            } else {
                $wire.discardDraft();
            }
        },

        destroy() { clearInterval(this.interval); }
    };
}

// ─────────────────────────────────────────────────────────────────────────────
// CKEDITOR
// ─────────────────────────────────────────────────────────────────────────────
function seoEditor() {
    return {
        editor: null,

        init() { this.$nextTick(() => this.initEditor()); },

        initEditor(content = null) {
            if (CKEDITOR.instances['description']) {
                CKEDITOR.instances['description'].destroy(true);
            }

            const csrfToken = document
                .querySelector('meta[name="csrf-token"]')
                .getAttribute('content');

            this.editor = CKEDITOR.replace('description', {
                extraPlugins: 'sourcearea,font,justify,colorbutton,panelbutton,floatpanel,uploadimage',
                removePlugins: 'easyimage,cloudservices',
                toolbar: [
                    { name: 'document',    items: ['Source','Preview','Print'] },
                    { name: 'clipboard',   items: ['Cut','Copy','Paste','Undo','Redo'] },
                    { name: 'basicstyles', items: ['Bold','Italic','Underline','Strike','RemoveFormat'] },
                    { name: 'paragraph',   items: ['NumberedList','BulletedList','JustifyLeft','JustifyCenter','JustifyRight'] },
                    { name: 'links',       items: ['Link','Unlink'] },
                    { name: 'insert',      items: ['Image','Table','HorizontalRule'] },
                    { name: 'styles',      items: ['Format','Font','FontSize'] },
                    { name: 'colors',      items: ['TextColor','BGColor'] },
                    { name: 'tools',       items: ['Maximize'] }
                ],
                filebrowserUploadUrl:     '/admin/upload-description-image?_token=' + csrfToken,
                filebrowserUploadMethod:  'form',
                uploadUrl:                '/admin/upload-description-image?_token=' + csrfToken,
                fileTools_requestHeaders: { 'X-CSRF-TOKEN': csrfToken },
                height:         400,
                allowedContent: true,
                contentsCss:    ['https://cdn.ckeditor.com/4.22.1/full/contents.css'],
                linkShowTargetTab: true,
                linkAllowedDomains: [],
            });

            this.editor.on('instanceReady', () => {
                let value = content ?? @this.get('description') ?? '';
                this.editor.setData(value);
            });

            this.editor.on('change', () => { @this.set('description', this.editor.getData()); });
            this.editor.on('blur',   () => { @this.set('description', this.editor.getData()); });

            this.editor.on('fileUploadRequest', function (evt) {
                var fileLoader = evt.data.fileLoader;
                var formData   = new FormData();
                fileLoader.xhr.open('POST', '/admin/upload-description-image', true);
                formData.append('_token', csrfToken);
                formData.append('upload', fileLoader.file, fileLoader.fileName);
                fileLoader.xhr.send(formData);
                evt.stop();
            });

            this.editor.on('fileUploadResponse', function (evt) {
                evt.stop();
                var response = JSON.parse(evt.data.fileLoader.xhr.responseText);
                if (response.uploaded) {
                    evt.data.url = response.url;
                } else {
                    evt.data.message = 'Upload failed';
                    evt.cancel();
                }
            });

            if (this.$refs.editor) {
                this.$refs.editor.loadContent = (data) => this.initEditor(data);
            }
        },

        loadContent(data) {
            if (this.editor) {
                this.editor.setData(data || '');
            } else {
                this.initEditor(data);
            }
        }
    };
}

CKEDITOR.on('dialogDefinition', function (ev) {
    if (ev.data.name === 'link') {
        var urlField = ev.data.definition.getContents('info').get('url');
        urlField.validate = function () {
            var url = this.getValue();
            const disallowedDomains = [
                'google.com', 'www.google.com',
                'local.cryptopresale.com',
            ];
            try {
                if (!/^https?:\/\//i.test(url)) url = 'http://' + url;
                if (disallowedDomains.includes(new URL(url).hostname)) {
                    alert('This domain is not allowed for interlinking.');
                    return false;
                }
            } catch (e) {
                alert('Invalid URL');
                return false;
            }
            return true;
        };
    }
});

CKEDITOR.on('dialogDefinition', function (ev) {
    if (ev.data.name === 'image') {
        var urlField = ev.data.definition.getContents('info').get('txtUrl');
        CKEDITOR.on('fileUploadResponse', function (evt) {
            try {
                var res = JSON.parse(evt.data.fileLoader.xhr.responseText);
                if (res.uploaded && res.url) {
                    urlField.default = res.url;
                    var dialog = CKEDITOR.dialog.getCurrent();
                    if (dialog) dialog.setValueOf('info', 'txtUrl', res.url);
                }
            } catch (e) {}
        });
    }
});

window.addEventListener('load-editor', event => {
    if (window.Alpine && window.Alpine.store('editor')) {
        window.Alpine.store('editor').loadContent(event.detail);
    }
});
</script>

<style>
    .cke_editable { line-height: 1.6; padding: 10px; }
    .cke_editable p { margin: 0 0 1em 0; }
    .cke_editable img { max-width: 100%; height: auto; }
    .cke_editable h1,.cke_editable h2,.cke_editable h3,
    .cke_editable h4,.cke_editable h5,.cke_editable h6 {
        margin-top: 0.5em; margin-bottom: 0.5em; line-height: 1.3;
    }
    .cke_chrome { border: 1px solid #d1d5db !important; border-radius: 0.375rem; }
    .cke_source { font-family: 'Courier New', Courier, monospace; font-size: 14px; }
</style>
@endpush