/* ==========================================================================
   Inline Block Editor v1.0.0 — Plugin CSS
   Isolated styling for the block editor UI, toolbar, separators, and menus.
   All classes are prefixed with .ibe- to prevent host CSS collisions.
   Customise via CSS custom properties on .ibe-container.
   ========================================================================== */

/* ── CSS Custom Properties (Theme Tokens) ─────────────────────────────── */
.ibe-container,
.ibe-modal-overlay,
.ibe-toast {
    --ibe-toolbar-bg: #0f172a;
    --ibe-toolbar-border: rgba(255, 255, 255, 0.1);
    --ibe-toolbar-text: #f8fafc;
    --ibe-toolbar-text-dim: #cbd5e1;
    --ibe-toolbar-text-muted: #94a3b8;
    --ibe-toolbar-btn-hover: rgba(255, 255, 255, 0.15);
    --ibe-accent: #3b82f6;
    --ibe-accent-hover: #2563eb;
    --ibe-accent-glow: rgba(59, 130, 246, 0.4);
    --ibe-danger: #ef4444;
    --ibe-danger-glow: rgba(239, 68, 68, 0.4);
    --ibe-ghost-bg: #eff6ff;
    --ibe-separator-color: #3b82f6;
    --ibe-block-outline: rgba(59, 130, 246, 0.3);
    --ibe-block-outline-hover: rgba(59, 130, 246, 0.6);
    --ibe-block-outline-active: #3b82f6;
    /* Was a hardcoded #fff — in dark mode this forced a white "page" behind
       the block being edited, while its text kept the site's light-on-dark
       --text-primary color, making the content unreadable. Following the
       site's own background keeps text contrast correct in every theme. */
    --ibe-block-bg-editing: var(--bg-primary, #fff);
    --ibe-toast-bg: #0f172a;
    --ibe-modal-bg: #0f172a;
    --ibe-input-bg: #1e293b;
    --ibe-input-border: rgba(255, 255, 255, 0.15);
    --ibe-code-bg: #1e293b;
    --ibe-code-bg-dark: #0f172a;
    --ibe-font-mono: 'Fira Code', 'Courier New', Courier, monospace;
}

/* ── Editor Container State ───────────────────────────────────────────── */
.ibe-container.is-edit-mode {
    position: relative;
}

/* ── Block Base ───────────────────────────────────────────────────────── */
.ibe-container.is-edit-mode .ibe-block {
    position: relative;
    outline: 2px dashed var(--ibe-block-outline);
    outline-offset: 5px;
    border: none;
    box-shadow: none;
    border-radius: 4px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ibe-container.is-edit-mode .ibe-block:hover {
    background: rgba(59, 130, 246, 0.02);
    outline-color: var(--ibe-block-outline-hover);
}

.ibe-container.is-edit-mode .ibe-block.is-editing {
    background: var(--ibe-block-bg-editing);
    outline: 2px solid var(--ibe-block-outline-active);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    z-index: 2000 !important;
}

.ibe-block .ibe-block-content {
    outline: none;
    width: 100%;
}

/* ── Block Alignment ──────────────────────────────────────────────────── */
.ibe-block.block-align-left {
    margin-right: auto;
    text-align: left;
}
.ibe-block.block-align-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.ibe-block.block-align-right {
    margin-left: auto;
    text-align: right;
}

/* ── Floating Toolbar ─────────────────────────────────────────────────── */
.ibe-toolbar {
    position: absolute;
    top: -46px;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    background: var(--ibe-toolbar-bg);
    padding: 6px 10px;
    border-radius: 8px;
    display: none;
    gap: 4px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    z-index: 2150;
    border: 1px solid var(--ibe-toolbar-border);
    align-items: center;
    color: var(--ibe-toolbar-text);
    flex-wrap: nowrap;
}

.ibe-block.is-editing .ibe-toolbar {
    display: flex;
    animation: ibeFadeInDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ibe-toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Toolbar Divider (replaces inline style divs) ─────────────────────── */
.ibe-toolbar-divider {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: var(--ibe-toolbar-border);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── Drag Handle / Grip ───────────────────────────────────────────────── */
.ibe-block-grip {
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ibe-toolbar-text-muted);
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.ibe-block-grip:hover {
    background: var(--ibe-toolbar-btn-hover);
    color: var(--ibe-toolbar-text);
}

.ibe-block-grip svg,
.ibe-block-grip i {
    width: 14px;
    height: 14px;
}

/* ── Toolbar Buttons ──────────────────────────────────────────────────── */
.ibe-toolbar-btn {
    background: transparent;
    border: none;
    color: var(--ibe-toolbar-text-dim);
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.ibe-toolbar-btn:hover {
    background: var(--ibe-toolbar-btn-hover);
    color: #ffffff;
}

.ibe-toolbar-btn.active {
    background: var(--ibe-accent);
    color: white;
}

.ibe-toolbar-btn svg,
.ibe-toolbar-btn i {
    width: 14px;
    height: 14px;
}

/* ── Color Picker Wrapper ─────────────────────────────────────────────── */
.ibe-color-picker-wrap {
    position: relative;
    overflow: hidden;
}

.ibe-color-picker-wrap i {
    pointer-events: none;
    position: absolute;
    width: 14px;
    height: 14px;
}

.ibe-color-picker {
    opacity: 0;
    width: 150%;
    height: 150%;
    position: absolute;
    left: -25%;
    top: -25%;
    cursor: pointer;
}

/* ── Toolbar Inputs & Selects ─────────────────────────────────────────── */
.ibe-toolbar-input {
    background: var(--ibe-input-bg);
    border: 1px solid var(--ibe-input-border);
    color: white;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    outline: none;
    transition: border 0.2s;
}

.ibe-toolbar-input:focus {
    border-color: var(--ibe-accent);
}

.ibe-toolbar-select {
    cursor: pointer;
    font-weight: 600;
}

/* ── Block Separators ─────────────────────────────────────────────────── */
.ibe-separator {
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    opacity: 0;
    transition: all 0.2s ease;
    cursor: pointer;
}

.ibe-separator.is-top {
    position: relative;
    width: 100%;
    bottom: auto;
    margin: -15px 0;
}

.ibe-container.is-edit-mode .ibe-block .ibe-separator {
    bottom: -31px;
}

.ibe-block.is-editing > .ibe-separator,
.ibe-block.is-editing + .ibe-separator,
.ibe-separator:hover,
.ibe-separator.active {
    opacity: 1;
}

.ibe-separator.active {
    z-index: 2500;
}

.ibe-separator::before {
    content: '';
    position: absolute;
    left: 40px;
    right: 40px;
    height: 1px;
    background: var(--ibe-separator-color);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.ibe-separator:hover::before,
.ibe-separator.active::before {
    opacity: 0.5;
    left: 0;
    right: 0;
    height: 2px;
}

/* ── Add Block Button ─────────────────────────────────────────────────── */
.ibe-add-btn-small {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ibe-toolbar-bg);
    color: var(--ibe-toolbar-text-dim);
    border: 1px solid var(--ibe-input-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 2;
    position: relative;
    opacity: 0;
    transform: scale(0.8);
}

.ibe-add-btn-small svg,
.ibe-add-btn-small i { width: 14px; height: 14px; }

.ibe-separator:hover .ibe-add-btn-small {
    background: var(--ibe-accent);
    color: white;
    border-color: var(--ibe-accent);
    transform: scale(1.1) rotate(90deg);
    opacity: 1;
    box-shadow: 0 4px 10px var(--ibe-accent-glow);
}

.ibe-separator.active .ibe-add-btn-small {
    background: var(--ibe-danger);
    color: white;
    border-color: var(--ibe-danger);
    transform: scale(1.1) rotate(45deg);
    opacity: 1;
    box-shadow: 0 4px 10px var(--ibe-danger-glow);
}

/* ── Insertion Menu ───────────────────────────────────────────────────── */
.ibe-insertion-menu {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: var(--ibe-toolbar-bg);
    border: 1px solid var(--ibe-toolbar-border);
    border-radius: 12px;
    padding: 12px;
    width: 320px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 2600;
}

.ibe-insertion-menu.active {
    display: block;
    animation: ibeFadeInUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ibe-insertion-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.ibe-insertion-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    color: var(--ibe-toolbar-text-dim);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 11px;
    text-align: center;
}

.ibe-insertion-item:hover {
    background: var(--ibe-accent);
    color: white;
    transform: translateY(-2px);
}

.ibe-insertion-item svg,
.ibe-insertion-item i {
    width: 20px;
    height: 20px;
    margin-bottom: 6px;
}

/* ── Alert Boxes ──────────────────────────────────────────────────────────
   Colors come from fixed semantic theme variables (--info-*, --success-*,
   --warning-*, --danger-*) rather than fixed light-mode hex values or the
   site's --accent-* tokens. --accent-green/--accent-blue are repurposed
   per color-scheme (e.g. the "burgundy" theme's --accent-green is red), so
   a "success" notice tied to --accent-green would stop being green there —
   these dedicated tokens keep info blue, success green, warning amber, and
   danger red in every theme and in both light and dark mode. Falls back to
   reasonable defaults if a variable isn't defined (e.g. this stylesheet
   loaded without the site theme). */
.ibe-block[data-type="alert"] .alert-box {
    display: flex;
    gap: 12px;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
}
.ibe-block[data-type="alert"] .alert-box.info {
    background: var(--info-bg, #eff6ff);
    border-color: var(--info-border, #dbeafe);
    color: var(--info-color, #1e40af);
}
.ibe-block[data-type="alert"] .alert-box.success {
    background: var(--success-bg, #f0fdf4);
    border-color: var(--success-border, #dcfce7);
    color: var(--success-color, #166534);
}
.ibe-block[data-type="alert"] .alert-box.warning {
    background: var(--warning-bg, #fffbeb);
    border-color: var(--warning-border, #fef3c7);
    color: var(--warning-color, #92400e);
}
.ibe-block[data-type="alert"] .alert-box.danger {
    background: var(--danger-bg, #fef2f2);
    border-color: var(--danger-border, #fee2e2);
    color: var(--danger-color, #991b1b);
}

.ibe-block[data-type="alert"] .alert-txt {
    outline: none;
    flex: 1;
}

/* ── Custom HTML Block ────────────────────────────────────────────────── */
.ibe-block[data-type="html"] .custom-html-block {
    width: 100%;
}

.ibe-block[data-type="html"] .html-editor-raw {
    width: 100%;
    /* Was 3rem (~48px) — barely two lines, so the raw HTML editor opened
       looking cramped. resize:vertical is still there for the user to grow
       it further. */
    min-height: 12rem;
    background: var(--ibe-input-bg);
    color: var(--ibe-toolbar-text-dim);
    font-family: var(--ibe-font-mono);
    font-size: 0.9rem;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--ibe-input-border);
    margin-top: 0;
    resize: vertical;
}

/* ── Block HTML View Textarea ─────────────────────────────────────────── */
.ibe-html-textarea {
    width: 100%;
    /* Was 3rem — see .html-editor-raw above; same fix for the "Toggle HTML
       View" textarea shown for any block type. */
    min-height: 12rem;
    background: var(--ibe-input-bg);
    color: var(--ibe-toolbar-text-dim);
    font-family: var(--ibe-font-mono);
    font-size: 0.9rem;
    padding: 8px;
    border: 1px solid var(--ibe-input-border);
    border-radius: 6px;
    margin-top: 0;
    resize: vertical;
    outline: none;
}

.ibe-html-textarea:focus {
    border-color: var(--ibe-accent);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* ── Sortable Ghost ───────────────────────────────────────────────────── */
.ibe-sortable-ghost {
    opacity: 0.4;
    outline: 2px solid var(--ibe-accent) !important;
    background: var(--ibe-ghost-bg) !important;
}

/* ── Toast Notifications ──────────────────────────────────────────────── */
.ibe-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--ibe-toast-bg, #0f172a);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    z-index: 99999;
    font-size: 0.9rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.ibe-toast.ibe-toast-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ── Animations ───────────────────────────────────────────────────────── */
@keyframes ibeFadeInDown {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes ibeFadeInUp {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Toolbar Dropdowns (click-toggled) ────────────────────────────────────
   Previously these opened on :hover only, which made them unreachable on
   touch devices and invisible to keyboard users. They are now driven by an
   .is-open class that JS toggles on click and on Arrow keys.
   ────────────────────────────────────────────────────────────────────── */
.ibe-dropdown {
    position: relative;
    display: inline-flex;
    width: 28px;
    height: 28px;
}

.ibe-dropdown.is-open {
    z-index: 2200;
}

.ibe-dropdown-menu {
    display: none;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ibe-toolbar-bg);
    border: 1px solid var(--ibe-toolbar-border);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    padding: 4px;
    z-index: 2300;
}

.ibe-dropdown.is-open .ibe-dropdown-menu {
    display: flex;
    animation: ibeFadeInDown 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Flip toward the viewport when the menu would overflow the right edge */
.ibe-dropdown-menu.ibe-menu-flip-left {
    left: auto;
    right: 0;
    transform: none;
}

.ibe-dropdown-menu .ibe-toolbar-btn {
    width: 100%;
    min-width: 28px;
}

.ibe-danger-btn {
    color: var(--ibe-danger);
}

.ibe-danger-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

/* Disabled move buttons at the document's ends */
.ibe-toolbar-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Visible Keyboard Focus ───────────────────────────────────────────────
   Every interactive control needs a focus ring; previously none of the
   toolbar controls showed one.
   ────────────────────────────────────────────────────────────────────── */
.ibe-toolbar-btn:focus-visible,
.ibe-add-btn-small:focus-visible,
.ibe-insertion-item:focus-visible,
.ibe-slash-item:focus-visible,
.ibe-block-grip:focus-visible,
.ibe-modal-close:focus-visible,
.ibe-btn:focus-visible,
.ibe-form-input:focus-visible,
.ibe-form-select:focus-visible,
.ibe-toolbar-input:focus-visible {
    outline: 2px solid var(--ibe-accent);
    outline-offset: 2px;
}

/* Screen-reader-only labels for controls that only show an icon */
.ibe-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Hidden in Preview / Not Edit Mode ────────────────────────────────── */
.ibe-container:not(.is-edit-mode) .ibe-separator,
.ibe-container:not(.is-edit-mode) .ibe-toolbar,
.ibe-container:not(.is-edit-mode) .ibe-block-grip,
.ibe-container:not(.is-edit-mode) .add-block-separator,
.ibe-container:not(.is-edit-mode) .block-toolbar {
    display: none !important;
}

/* ── Code Block ───────────────────────────────────────────────────────── */
.ibe-code-block {
    position: relative;
    width: 100%;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
}

.ibe-code-block pre {
    margin: 0;
    padding: 0 16px;
    background: var(--ibe-code-bg);
    border-radius: 8px;
    overflow-x: auto;
}

.ibe-code-block code {
    font-family: var(--ibe-font-mono);
    font-size: 0.9rem;
    line-height: 1.5;
}

.ibe-code-textarea {
    width: 100%;
    /* Was 3rem — same cramped-default issue as the HTML editors above. */
    min-height: 12rem;
    background: var(--ibe-code-bg-dark);
    color: #e2e8f0;
    font-family: var(--ibe-font-mono);
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 12px 16px;
    border: 1px solid var(--ibe-input-border);
    border-radius: 8px;
    resize: vertical;
    outline: none;
}

.ibe-code-textarea:focus {
    border-color: var(--ibe-accent);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* ── Table Block ──────────────────────────────────────────────────────── */
.ibe-table-wrapper {
    margin: 0;
    width: 100%;
    overflow-x: auto;
}

.ibe-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.95rem;
}

.ibe-table th,
.ibe-table td {
    padding: 10px 14px;
    outline: none;
    min-width: 80px;
    transition: background-color 0.2s;
}

.ibe-container.is-edit-mode .ibe-table th:focus,
.ibe-container.is-edit-mode .ibe-table td:focus {
    background: rgba(59, 130, 246, 0.05);
    box-shadow: inset 0 0 0 1px var(--ibe-accent);
}

/* Bordered Table Style */
.ibe-table-wrapper.bordered .ibe-table th,
.ibe-table-wrapper.bordered .ibe-table td {
    border: 1px solid var(--border-color, #e2e8f0);
}

.ibe-table-wrapper.bordered .ibe-table th {
    background: var(--bg-surface-hover, #f8fafc);
    font-weight: 600;
}

/* Striped Rows Style */
.ibe-table-wrapper.striped .ibe-table tbody tr:nth-of-type(odd) {
    background-color: var(--bg-striped, rgba(0, 0, 0, 0.02));
}

/* Header style for non-bordered tables */
.ibe-table-wrapper:not(.bordered) .ibe-table th {
    border-bottom: 2px solid var(--border-color, #e2e8f0);
    font-weight: 600;
}

.ibe-table-wrapper:not(.bordered) .ibe-table td {
    border-bottom: 1px solid var(--border-color, #f1f5f9);
}

/* ── Horizontal Rule Block ────────────────────────────────────────────── */
.ibe-block[data-type="hr"] {
    min-height: auto;
}
.ibe-block[data-type="hr"] .ibe-block-content {
    padding: 1rem 0;
}
.ibe-container.is-edit-mode .ibe-block[data-type="hr"] .ibe-block-content {
    cursor: pointer;
}
.ibe-block[data-type="hr"] hr.ibe-hr {
    border: 0;
    height: 2px;
    background: var(--border-color, #e2e8f0);
    margin: 0 auto;
    padding: 0;
    transition: all 0.2s ease;
}

/* HR Styles */
.ibe-block[data-type="hr"] hr.ibe-hr.ibe-hr-solid {
    height: 2px;
    background: var(--border-color, #e2e8f0);
    border: 0;
}
.ibe-block[data-type="hr"] hr.ibe-hr.ibe-hr-dashed {
    height: 0;
    border-top: 2px dashed var(--border-color, #e2e8f0);
    background: transparent;
}
.ibe-block[data-type="hr"] hr.ibe-hr.ibe-hr-dotted {
    height: 0;
    border-top: 2px dotted var(--border-color, #e2e8f0);
    background: transparent;
}
.ibe-block[data-type="hr"] hr.ibe-hr.ibe-hr-double {
    height: 4px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: transparent;
}

/* HR Widths */
.ibe-block[data-type="hr"] hr.ibe-hr.ibe-hr-full { width: 100%; }
.ibe-block[data-type="hr"] hr.ibe-hr.ibe-hr-medium { width: 50%; }
.ibe-block[data-type="hr"] hr.ibe-hr.ibe-hr-short { width: 25%; }

/* ── Image Block ──────────────────────────────────────────────────────── */
.ibe-block[data-type="image"] .article-image {
    position: relative;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

.ibe-block[data-type="image"] .article-image img {
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.ibe-img-zoom-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ibe-block[data-type="image"]:hover .ibe-img-zoom-btn {
    opacity: 1;
    transform: scale(1);
}

.ibe-img-zoom-btn:hover {
    background: var(--ibe-accent);
    color: white;
    border-color: var(--ibe-accent);
    box-shadow: 0 4px 12px var(--ibe-accent-glow);
}

.ibe-img-zoom-btn svg,
.ibe-img-zoom-btn i {
    width: 16px;
    height: 16px;
}

/* Edit mode: no zoom-in cursor on images */
.ibe-container.is-edit-mode .ibe-block[data-type="image"] .article-image img {
    cursor: default !important;
}

/* Visitor cursor behaviour */
.article-image:not([data-zoom="false"]) img {
    cursor: zoom-in;
}
.article-image[data-zoom="false"] img {
    cursor: default !important;
}
.article-image a img {
    cursor: pointer !important;
}

/* ── Modal Overlay ────────────────────────────────────────────────────── */
.ibe-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.ibe-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.ibe-modal {
    background: var(--ibe-modal-bg);
    border: 1px solid var(--ibe-input-border);
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    color: var(--ibe-toolbar-text);
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ibe-modal-overlay.active .ibe-modal {
    transform: translateY(0);
}

.ibe-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ibe-toolbar-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ibe-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.ibe-modal-close {
    background: transparent;
    border: none;
    color: var(--ibe-toolbar-text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s;
}

.ibe-modal-close:hover {
    background: var(--ibe-toolbar-btn-hover);
    color: #ffffff;
}

.ibe-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ibe-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ibe-form-group label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ibe-toolbar-text-muted);
    text-align: left !important;
}

.ibe-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ibe-form-input,
.ibe-form-select {
    background: var(--ibe-input-bg);
    border: 1px solid var(--ibe-input-border);
    border-radius: 6px;
    color: var(--ibe-toolbar-text);
    padding: 8px 12px;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.2s;
    width: 100%;
}

.ibe-form-input:focus,
.ibe-form-select:focus {
    border-color: var(--ibe-accent);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.ibe-form-input.ibe-border-color {
    padding: 4px;
    height: 38px;
    cursor: pointer;
}

.ibe-border-preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 4px;
}

.ibe-border-preview-box {
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    color: var(--ibe-toolbar-text-dim);
    transition: all 0.2s;
    background: rgba(0, 0, 0, 0.25);
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ibe-form-checkboxes {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
}

.ibe-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--ibe-toolbar-text-dim);
}

.ibe-checkbox-label input {
    cursor: pointer;
    accent-color: var(--ibe-accent);
}

.ibe-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--ibe-toolbar-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: rgba(255, 255, 255, 0.02);
}

/* ── Modal Buttons ────────────────────────────────────────────────────── */
.ibe-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.ibe-btn-ghost {
    background: transparent;
    color: var(--ibe-toolbar-text-dim);
    box-shadow: none;
}

.ibe-btn-ghost:hover {
    background: var(--ibe-toolbar-btn-hover);
    color: #ffffff;
    transform: translateY(-1px);
}

.ibe-btn-ghost:active {
    transform: translateY(0);
}

.ibe-btn-primary {
    background: var(--ibe-accent);
    color: #ffffff;
}

.ibe-btn-primary:hover {
    background: var(--ibe-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--ibe-accent-glow);
}

.ibe-btn-primary:active {
    transform: translateY(0);
}

/* ── Responsive: Toolbar Mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
    .ibe-toolbar {
        max-width: calc(100vw - 20px);
        left: 10px;
        right: 10px;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
    }

    .ibe-block.is-editing .ibe-toolbar {
        animation: ibeFadeInDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .ibe-insertion-menu {
        width: calc(100vw - 40px);
        max-width: 320px;
    }

    .ibe-modal {
        max-width: calc(100vw - 20px);
        margin: 0 10px;
    }

    .ibe-form-row {
        grid-template-columns: 1fr;
    }
}

/* ── Print Styles ─────────────────────────────────────────────────────── */
@media print {
    .no-print,
    .ibe-toolbar,
    .ibe-separator,
    .ibe-img-zoom-btn,
    .ibe-add-btn-small,
    .ibe-insertion-menu,
    .ibe-code-textarea,
    .ibe-html-textarea,
    .html-editor-raw,
    .ibe-toast,
    .ibe-modal-overlay {
        display: none !important;
    }

    .ibe-container .ibe-block {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
    }
}

/* Video Block Styling */
.article-video {
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    border: var(--border-width, 2px) solid var(--border-color, #e2e8f0);
    box-shadow: var(--shadow-offset, 4px 4px 0 #000);
    background: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Disable pointer events on iframe in edit mode so clicking block selects it */
.ibe-container.is-edit-mode .video-container iframe {
    pointer-events: none;
}

/* Article Media Captions (Image & Video) */
.article-image figcaption,
.article-video figcaption,
.ibe-block[data-type="image"] figcaption,
.ibe-block[data-type="video"] figcaption {
    margin-top: 0.85rem;
    font-family: 'Inter', sans-serif;
    font-size: var(--font-sm, 0.875rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-secondary, #64748b);
    text-align: center !important;
    font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.1 — Toolbar flipping, slash menu, placeholders, drag & drop,
   equal-height media rows, and responsive behaviour.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Toolbar: flip below the block when it would clip off the top ─────── */
.ibe-toolbar.ibe-toolbar-below {
    top: auto;
    bottom: -46px;
}

.ibe-block.is-editing .ibe-toolbar.ibe-toolbar-below {
    animation: ibeFadeInUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* When the toolbar sits below, its dropdowns must open upward */
.ibe-toolbar-below .ibe-dropdown-menu {
    top: auto;
    bottom: calc(100% + 6px);
}

/* Insertion menu flipped below its separator */
.ibe-insertion-menu.ibe-menu-below {
    bottom: auto;
    top: 35px;
}

/* ── Insertion Menu Items as Buttons ──────────────────────────────────── */
.ibe-insertion-item {
    border: none;
    font-family: inherit;
    width: 100%;
}

/* ── Slash Command Menu ───────────────────────────────────────────────── */
.ibe-slash-menu {
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 232px;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    background: var(--ibe-toolbar-bg, #0f172a);
    border: 1px solid var(--ibe-toolbar-border, rgba(255, 255, 255, 0.1));
    border-radius: 10px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    z-index: 3000;
    scrollbar-width: thin;
}

.ibe-slash-menu.is-open {
    display: flex;
    animation: ibeFadeInUp 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.ibe-slash-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--ibe-toolbar-text-dim, #cbd5e1);
    font-size: 0.85rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.ibe-slash-item:hover,
.ibe-slash-item.is-active {
    background: var(--ibe-accent, #3b82f6);
    color: #ffffff;
}

.ibe-slash-item svg,
.ibe-slash-item i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ibe-slash-label {
    flex: 1;
}

/* ── Empty-Block Placeholders ─────────────────────────────────────────────
   Rendered via CSS so the placeholder is never saved as real content.
   ────────────────────────────────────────────────────────────────────── */
.ibe-container.is-edit-mode .ibe-block-content.ibe-is-empty {
    position: relative;
    min-height: 1.6em;
}

/* The placeholder text lives on .ibe-block-content via data-placeholder and
   is painted as a single absolutely-positioned pseudo-element, so it never
   affects layout or the caret position. */
.ibe-container.is-edit-mode .ibe-block-content.ibe-is-empty::before {
    content: attr(data-placeholder);
    position: absolute;
    top: 0;
    left: 0;
    color: var(--ibe-toolbar-text-muted, #94a3b8);
    opacity: 0.65;
    pointer-events: none;
    font-style: italic;
    user-select: none;
}

/* Placeholders are authoring aids — never show them to readers */
.ibe-container:not(.is-edit-mode) .ibe-block-content.ibe-is-empty::before {
    content: none;
}

/* ── Drag & Drop Image Upload ─────────────────────────────────────────── */
.ibe-container.ibe-drag-over {
    outline: 2px dashed var(--ibe-accent, #3b82f6);
    outline-offset: 8px;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.04);
}

.ibe-block.ibe-uploading {
    position: relative;
    opacity: 0.65;
}

.ibe-block.ibe-uploading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: var(--ibe-accent, #3b82f6);
    border-radius: 50%;
    animation: ibeSpin 0.7s linear infinite;
    z-index: 10;
}

@keyframes ibeSpin {
    to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════════════════
   EQUAL-HEIGHT MEDIA ROWS
   Image blocks placed side by side (1/3 + 1/3 + 1/3, 1/2 + 1/2, …) stretch
   to a common height and crop to fill, so a row of images always reads as a
   single tidy band regardless of the source aspect ratios.
   ══════════════════════════════════════════════════════════════════════ */

/* The row container must stretch its items rather than top-align them.
   `align-items: flex-start` on the host would collapse each block to its
   own content height and produce a ragged row. */
.ibe-container,
.article-rich-text,
#editor-container {
    align-items: stretch !important;
}

/* A media block becomes a column so its figure can absorb the spare height */
.ibe-block[data-type="image"],
.ibe-block[data-type="video"] {
    display: flex;
    flex-direction: column;
}

.ibe-block[data-type="image"] > .ibe-block-content,
.ibe-block[data-type="video"] > .ibe-block-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.ibe-block[data-type="image"] .article-image {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* The image itself fills the remaining height and crops rather than
   stretching. Captions stay pinned beneath at their natural height. */
.ibe-block[data-type="image"] .article-image img {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
}

.ibe-block[data-type="image"] .article-image figcaption,
.ibe-block[data-type="video"] figcaption {
    flex: 0 0 auto;
}

/* A wrapping anchor must not break the flex chain */
.ibe-block[data-type="image"] .article-image > a {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.ibe-block[data-type="image"] .article-image > a > img {
    flex: 1 1 auto;
    min-height: 0;
}

/* A custom height/ratio/percentage from Image Settings sets the img's own
   `style` (see _applyImageSettings), so it's always present as "height: …"
   whenever the user has picked a size — including ratio/percentage, which
   also sets height:auto alongside aspect-ratio. Without this, the block
   itself was still `flex: 1 1 auto` and got stretched by align-items:stretch
   on the row (see "EQUAL-HEIGHT MEDIA ROWS" above) to match a taller
   sibling, so a smaller ratio/percentage/height had no visible effect once
   the block sat next to something taller, and the caption ended up pinned
   to the bottom of that stretched block instead of sitting right under the
   now-smaller image. Exempting the block from the row stretch and letting
   its containers shrink-to-fit fixes both. */
.ibe-block[data-type="image"]:has(img[style*="height"]),
.ibe-block[data-type="image"]:has(img[style*="aspect-ratio"]) {
    align-self: flex-start;
}

.ibe-block[data-type="image"]:has(img[style*="height"]) > .ibe-block-content,
.ibe-block[data-type="image"]:has(img[style*="aspect-ratio"]) > .ibe-block-content,
.ibe-block[data-type="image"]:has(img[style*="height"]) .article-image,
.ibe-block[data-type="image"]:has(img[style*="aspect-ratio"]) .article-image,
.ibe-block[data-type="image"]:has(img[style*="height"]) .article-image > a,
.ibe-block[data-type="image"]:has(img[style*="aspect-ratio"]) .article-image > a {
    flex: 0 0 auto;
}

/* Full-width images keep their natural proportions — cropping only makes
   sense when blocks are actually sharing a row. */
.ibe-block[data-type="image"].col-12 .article-image img {
    object-fit: contain;
    flex: 0 0 auto;
    height: auto;
}

/* An explicit height/aspect-ratio from Image Settings always wins — including
   over the 180px floor below, which would otherwise silently override any
   smaller height a user typed into Image Settings. */
.ibe-block[data-type="image"] .article-image img[style*="aspect-ratio"],
.ibe-block[data-type="image"] .article-image img[style*="height"] {
    flex: 0 0 auto;
    /* !important because this shares specificity with the floor rule below
       (:not(.col-12) counts the same as a class) — without it, source order
       alone decides the winner and a later edit could silently break this. */
    min-height: 0 !important;
}

/* Give side-by-side images a sensible floor so short rows still look even */
.ibe-block[data-type="image"]:not(.col-12) .article-image img {
    min-height: 180px;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tablet ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ibe-toolbar {
        max-width: min(96vw, 720px);
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 6px;
    }

    .ibe-block[data-type="image"]:not(.col-12) .article-image img {
        min-height: 150px;
    }
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Anchor the toolbar to the block rather than the viewport; the old
       rule combined `left/right` with `width: fit-content`, which conflict. */
    .ibe-toolbar {
        left: 0;
        right: 0;
        width: auto;
        max-width: 100%;
        transform: none;
        padding: 6px;
        gap: 2px;
    }

    @keyframes ibeFadeInDown {
        from { opacity: 0; transform: translateY(-10px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .ibe-toolbar-btn {
        width: 32px;
        height: 32px;
    }

    .ibe-toolbar-divider {
        display: none;
    }

    .ibe-insertion-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ibe-slash-menu {
        min-width: 200px;
        max-width: calc(100vw - 24px);
    }

    /* Single column on phones: images return to natural proportions
       because nothing is sharing the row any more. */
    .ibe-block[data-type="image"] .article-image img {
        object-fit: contain;
        flex: 0 0 auto;
        height: auto;
        min-height: 0;
    }

    .ibe-block[data-type="image"],
    .ibe-block[data-type="video"] {
        display: block;
    }

    .ibe-modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }

    .ibe-modal-footer {
        flex-direction: column-reverse;
    }

    .ibe-modal-footer .ibe-btn {
        width: 100%;
        padding: 12px 16px;
    }
}

/* ── Touch devices: reveal affordances that rely on hover ─────────────── */
@media (hover: none) {
    .ibe-separator {
        opacity: 1;
    }

    .ibe-add-btn-small {
        opacity: 0.8;
        transform: scale(1);
    }

    .ibe-img-zoom-btn {
        opacity: 1;
        transform: scale(1);
    }

    /* Comfortable tap targets (WCAG 2.5.8 minimum is 24px) */
    .ibe-toolbar-btn,
    .ibe-add-btn-small {
        min-width: 32px;
        min-height: 32px;
    }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ibe-container *,
    .ibe-modal-overlay *,
    .ibe-slash-menu * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Print ────────────────────────────────────────────────────────────── */
@media print {
    .ibe-slash-menu,
    .ibe-dropdown-menu {
        display: none !important;
    }

    /* Keep image rows intact across page breaks */
    .ibe-block[data-type="image"],
    .ibe-block[data-type="video"] {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}