/* ============================================================================
   TipTap Test Editor - Styles avec Pagination (Pages A4 séparées)
   ============================================================================ */

/* ============================================================================
   Loading State - Prevent FOUC (Flash of Unstyled Content)
   ============================================================================ */

.tiptap-loading {
    opacity: 1 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease-in-out;
}

.tiptap-loading.tiptap-ready {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ============================================================================
   Loader Overlay - Modal-style loader with backdrop blur
   ============================================================================ */

.tiptap-loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ececec;
    transition: opacity 0.3s ease;
    overflow: hidden;
}

[data-theme="dark"] .tiptap-loader-overlay {
    background: #2d2d2d;
}

[data-theme="zkriva"] .tiptap-loader-overlay {
    background: #f5f3ef;
}

[data-theme="lilia"] .tiptap-loader-overlay {
    background: #fef7fa;
}

[data-theme="nature"] .tiptap-loader-overlay {
    background: #e8f5f0;
}

/* Fausse page A4 floutée - même style que .tiptap-editor-container */
.tiptap-loader-fake-page {
    position: absolute;
    top: 2rem; /* Même padding que .tiptap-editor-area */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 794px; /* A4 width at 96dpi */
    min-height: 1122px; /* A4 height at 96dpi */
    background: #ffffff;
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -2px rgba(0, 0, 0, 0.1),
                0 20px 50px -12px rgba(0, 0, 0, 0.15);
    filter: blur(3px);
    opacity: 0.7;
}

[data-theme="dark"] .tiptap-loader-fake-page {
    background: #1e1e1e;
}

[data-theme="zkriva"] .tiptap-loader-fake-page {
    background: #fffdf8;
}

[data-theme="lilia"] .tiptap-loader-fake-page {
    background: #fff;
}

[data-theme="nature"] .tiptap-loader-fake-page {
    background: #fff;
}

/* Lignes skeleton */
.tiptap-loader-fake-line {
    height: 0.9rem;
    margin-bottom: 0.7rem;
    background: #e0e0e0;
    border-radius: 3px;
}

[data-theme="dark"] .tiptap-loader-fake-line {
    background: #3a3a3a;
}

[data-theme="zkriva"] .tiptap-loader-fake-line {
    background: #e8e2d9;
}

[data-theme="lilia"] .tiptap-loader-fake-line {
    background: #f3e4ea;
}

[data-theme="nature"] .tiptap-loader-fake-line {
    background: #d4efe5;
}

.tiptap-loader-box {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 3rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .tiptap-loader-box {
    background: rgba(40, 40, 40, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="zkriva"] .tiptap-loader-box {
    background: rgba(255, 253, 250, 0.95);
    border-color: rgba(210, 180, 145, 0.4);
    box-shadow: 0 8px 32px rgba(120, 100, 80, 0.2);
}

[data-theme="lilia"] .tiptap-loader-box {
    background: rgba(253, 247, 249, 0.95);
    border-color: rgba(212, 114, 156, 0.2);
    box-shadow: 0 8px 32px rgba(61, 39, 50, 0.15);
}

[data-theme="nature"] .tiptap-loader-box {
    background: rgba(247, 254, 249, 0.95);
    border-color: rgba(5, 150, 105, 0.2);
    box-shadow: 0 8px 32px rgba(0, 61, 46, 0.15);
}

.tiptap-loader-spinner {
    position: relative;
    width: 50px;
    height: 50px;
}

.tiptap-loader-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    animation: tiptapSpinnerRotate 1.2s linear infinite;
}

.tiptap-loader-ring:nth-child(1) {
    border-top-color: var(--bs-primary, #f2d123);
    border-right-color: var(--bs-primary, #f2d123);
}

.tiptap-loader-ring:nth-child(2) {
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    border-bottom-color: var(--bs-body-color, #111);
    border-left-color: var(--bs-body-color, #111);
    animation-direction: reverse;
    animation-duration: 0.8s;
}

@keyframes tiptapSpinnerRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.tiptap-loader-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--bs-body-color, #333);
}

.tiptap-loader-status {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
    min-height: 1.2em;
}

/* ============================================================================
   Override main-content padding pour cette page UNIQUEMENT
   Utilise le sélecteur parent pour ne pas affecter les autres pages
   ============================================================================ */

.zkriva-editor-page #main-content,
#main-content:has(.tiptap-editor-wrapper) {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px); /* viewport - topbar */
    overflow: hidden;
}

/* ============================================================================
   Toolbar Container - Style identique à sidebar-top-icons
   ============================================================================ */

.tiptap-toolbar-container {
    position: relative;
    margin: 0;
    padding: 0;
    background: #fff;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    z-index: 100;
    width: 100%;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    max-height: 60px;
    overflow: visible;
}

/* Toolbar collapsed state - Only show toggle button and essential buttons */
.tiptap-toolbar-container.toolbar-collapsed {
    max-height: 40px;
}

.tiptap-toolbar-container.toolbar-collapsed .tiptap-toolbar-group:not(.ms-auto) {
    display: none;
}

.tiptap-toolbar-container.toolbar-collapsed .tiptap-toolbar-group.ms-auto {
    margin-left: auto;
    width: 100%;
    justify-content: flex-end;
}

/* Keep offline badge and toggle button visible when collapsed */
.tiptap-toolbar-container.toolbar-collapsed .tiptap-offline-badge,
.tiptap-toolbar-container.toolbar-collapsed #tiptapToggleToolbarBtn {
    display: inline-flex;
}

/* Hide fullscreen in collapsed mode on mobile for space */
@media (max-width: 576px) {
    .tiptap-toolbar-container.toolbar-collapsed #tiptapFullscreenBtn {
        display: none;
    }
}

.tiptap-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 0.44rem 0.75rem;
    overflow: visible;
    max-width: 100%;
}

.tiptap-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-right: 0.5rem;
    margin-right: 0.5rem;
    border-right: 1px solid #ececec;
}

.tiptap-toolbar-group:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

/* Groupe d'outils poussé à droite */
.tiptap-toolbar-group-end {
    margin-left: auto;
    border-right: none !important;
    padding-right: 0 !important;
    border-left: 1px solid #ececec;
    padding-left: 0.5rem;
    margin-right: 0;
}

html[data-theme="dark"] .tiptap-toolbar-group-end {
    border-left-color: #3a3a3a;
}

/* Séparateur vertical dans la toolbar */
.tiptap-toolbar-sep {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: #e5e7eb;
    margin: 0 6px;
    flex-shrink: 0;
}

html[data-theme="dark"] .tiptap-toolbar-sep {
    background: #3a3a3a;
}

/* Icône Auto-save */
.tiptap-autosave-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 6px;
    color: #005c45;
    opacity: 0.7;
    margin-left: 2px;
    transition: color 0.3s, opacity 0.3s;
}

.tiptap-autosave-icon i {
    animation: autosave-pulse 2.5s ease-in-out infinite;
}

.tiptap-autosave-icon.saving {
    opacity: 1;
}

.tiptap-autosave-icon.saving i {
    animation: autosave-pulse-fast 0.8s ease-in-out infinite;
}

.tiptap-autosave-icon.error {
    color: #ef4444;
    opacity: 0.9;
}

.tiptap-autosave-icon.error i {
    animation: none;
}

@keyframes autosave-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

@keyframes autosave-pulse-fast {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.tiptap-toolbar-spacer {
    flex: 1;
}

.tiptap-toolbar-stats {
    font-size: 0.75rem;
    color: #6b7280;
    gap: 0.5rem;
}

.tiptap-toolbar-stats .sep {
    color: #d1d5db;
}

/* Toolbar Buttons */
.tiptap-tb-btn {
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #374151;
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.tiptap-tb-btn:hover {
    background: rgba(242, 209, 35, 0.15);
    color: #111827;
}

.tiptap-tb-btn.active {
    background: rgba(242, 209, 35, 0.25);
    color: #111827;
}

/* ============================================================================
   Highlight Color Picker
   ============================================================================ */

.tiptap-highlight-wrapper {
    position: relative;
    display: inline-flex;
}

.tiptap-highlight-btn {
    position: relative;
}

.tiptap-highlight-color-indicator {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: transparent;
    transition: background 0.2s;
}

.tiptap-highlight-color-indicator[data-color] {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.tiptap-highlight-picker {
    position: fixed;
    display: none;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 16px;
    z-index: 10000;
    min-width: 180px;
}

.tiptap-highlight-picker.open {
    display: block;
    animation: highlightPickerIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes highlightPickerIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Arrow pointing to button */
.tiptap-highlight-picker-arrow {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ffffff;
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.06));
}

/* Color grid */
.tiptap-highlight-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 32px);
    gap: 10px;
    margin-bottom: 12px;
}

.tiptap-highlight-color-option {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    padding: 0;
}

/* Set colors via data-color attribute */
.tiptap-highlight-color-option[data-color="#fef08a"] { background: #fef08a; }
.tiptap-highlight-color-option[data-color="#fed7aa"] { background: #fed7aa; }
.tiptap-highlight-color-option[data-color="#fecaca"] { background: #fecaca; }
.tiptap-highlight-color-option[data-color="#fbcfe8"] { background: #fbcfe8; }
.tiptap-highlight-color-option[data-color="#e9d5ff"] { background: #e9d5ff; }
.tiptap-highlight-color-option[data-color="#bfdbfe"] { background: #bfdbfe; }
.tiptap-highlight-color-option[data-color="#a8e6cf"] { background: #a8e6cf; }
.tiptap-highlight-color-option[data-color="#e5e7eb"] { background: #e5e7eb; }

/* Shine effect on hover */
.tiptap-highlight-color-option::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%);
    opacity: 0;
    transition: opacity 0.2s;
}

.tiptap-highlight-color-option:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.1);
}

.tiptap-highlight-color-option:hover::before {
    opacity: 1;
}

.tiptap-highlight-color-option:active {
    transform: translateY(-1px) scale(1.05);
}

/* Selected state with checkmark */
.tiptap-highlight-color-option.is-selected {
    border-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(255,255,255,0.5);
    transform: scale(1.05);
}

.tiptap-highlight-color-option.is-selected::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

/* Animation for colors */
.tiptap-highlight-color-option {
    animation: highlightColorFadeIn 0.15s ease-out backwards;
}
.tiptap-highlight-color-option:nth-child(1) { animation-delay: 0.01s; }
.tiptap-highlight-color-option:nth-child(2) { animation-delay: 0.02s; }
.tiptap-highlight-color-option:nth-child(3) { animation-delay: 0.03s; }
.tiptap-highlight-color-option:nth-child(4) { animation-delay: 0.04s; }
.tiptap-highlight-color-option:nth-child(5) { animation-delay: 0.05s; }
.tiptap-highlight-color-option:nth-child(6) { animation-delay: 0.06s; }
.tiptap-highlight-color-option:nth-child(7) { animation-delay: 0.07s; }
.tiptap-highlight-color-option:nth-child(8) { animation-delay: 0.08s; }

@keyframes highlightColorFadeIn {
    from {
        opacity: 0;
        transform: scale(0.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Remove highlight button */
.tiptap-highlight-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.tiptap-highlight-remove:hover {
    background: #fecaca;
    color: #dc2626;
}

/* Heading Dropdown Custom */
.tiptap-heading-dropdown {
    position: relative;
    display: inline-block;
}

.tiptap-heading-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    border: 1px solid #ececec;
    background: #fff;
    color: #374151;
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
    min-width: 120px;
    transition: border-color 0.15s, background 0.15s;
}

.tiptap-heading-trigger:hover {
    background: rgba(242, 209, 35, 0.1);
    border-color: #f2d123;
}

.tiptap-heading-trigger .bi-chevron-down {
    font-size: 0.65rem;
    transition: transform 0.2s;
}

.tiptap-heading-dropdown.open .tiptap-heading-trigger .bi-chevron-down {
    transform: rotate(180deg);
}

.tiptap-heading-current {
    flex: 1;
    text-align: left;
}

.tiptap-heading-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 170px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.tiptap-heading-dropdown.open .tiptap-heading-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tiptap-heading-option {
    padding: 8px 18px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 1em;
    color: #222;
}

.tiptap-heading-option:first-child {
    border-radius: 7px 7px 0 0;
}

.tiptap-heading-option:last-child {
    border-radius: 0 0 7px 7px;
}

.tiptap-heading-option:hover {
    background: #f2d12322;
}

.tiptap-heading-option.active {
    background: rgba(242, 209, 35, 0.25);
    font-weight: 500;
}

/* Tailles réelles des titres dans le menu */
.tiptap-heading-h1 {
    font-size: 1.5rem;
    font-weight: 700;
    padding: 10px 18px;
}

.tiptap-heading-h2 {
    font-size: 1.25rem;
    font-weight: 600;
    padding: 9px 18px;
}

.tiptap-heading-h3 {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 8px 18px;
}

/* ============================================================================
   More Menu (trois points) - Import/Export
   ============================================================================ */

/* Progress bar for import/export */
.tiptap-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tiptap-progress-bar.active {
    opacity: 1;
}

.tiptap-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #f2d123, #fbbf24);
    border-radius: 0 2px 2px 0;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px rgba(242, 209, 35, 0.6);
}

.tiptap-progress-bar.indeterminate .tiptap-progress-fill {
    width: 30%;
    animation: progress-indeterminate 1.2s ease-in-out infinite;
}

@keyframes progress-indeterminate {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(400%);
    }
}

.tiptap-toolbar-more {
    margin-left: auto;
    border-right: none !important;
}

.tiptap-more-dropdown {
    position: relative;
    display: inline-block;
}

.tiptap-more-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 170px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.tiptap-more-dropdown.open .tiptap-more-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tiptap-more-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 18px;
    border: none;
    background: transparent;
    color: #222;
    font-size: 1em;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.tiptap-more-option:first-child {
    border-radius: 7px 7px 0 0;
}

.tiptap-more-option:last-child {
    border-radius: 0 0 7px 7px;
}

.tiptap-more-option:hover {
    background: #f2d12322;
}

.tiptap-more-option i {
    color: inherit;
    font-size: 1em;
    margin-right: 10px;
    width: 16px;
    text-align: center;
}

.tiptap-more-separator {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 10px;
}

/* Dark mode */
html[data-theme="dark"] .tiptap-more-menu {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .tiptap-more-option {
    color: #e2e8f0;
}

html[data-theme="dark"] .tiptap-more-option:hover {
    background: rgba(242, 209, 35, 0.15);
}

/* ============================================================================
   TOOLBAR CAROUSEL - Scrollable with arrows (Touch-friendly)
   ============================================================================ */

/* Inner scrollable container */
.tiptap-toolbar-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    touch-action: pan-x; /* Enable horizontal touch swipe */
}

/* Allow dropdowns to escape overflow when open */
.tiptap-toolbar-inner:has(.tiptap-heading-dropdown.open),
.tiptap-toolbar-inner:has(.tiptap-more-dropdown.open) {
    overflow: visible;
}

.tiptap-toolbar-inner::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Navigation arrows - Discret, même fond que toolbar */
.tiptap-toolbar-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #9ca3af;
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.15s ease;
    flex-shrink: 0;
    /* Touch-friendly: larger touch target */
    min-width: 44px;
    min-height: 44px;
    margin: -10px 0;
}

.tiptap-toolbar-arrow:hover {
    color: #f2d123;
}

.tiptap-toolbar-arrow:active {
    color: #d4b820;
    transform: scale(0.95);
}

.tiptap-toolbar-arrow-left {
    margin-right: 0;
}

.tiptap-toolbar-arrow-right {
    margin-left: 0;
}

/* Dark theme */
html[data-theme="dark"] .tiptap-toolbar-arrow {
    color: #64748b;
}

html[data-theme="dark"] .tiptap-toolbar-arrow:hover {
    color: #f2d123;
}

/* Zkriva theme */
html[data-theme="zkriva"] .tiptap-toolbar-arrow {
    color: #a8a29e;
}

html[data-theme="zkriva"] .tiptap-toolbar-arrow:hover {
    color: #d2b491;
}

/* ============================================================================
   Export Word Modal - Template Selection
   ============================================================================ */

.export-templates-body {
    padding: 1rem 1.25rem;
    max-height: 400px;
    overflow-y: auto;
}

.export-templates-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.export-template-card {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.export-template-card:hover:not(.export-template-soon) {
    background: rgba(242, 209, 35, 0.12);
}

.export-template-card.selected {
    background: rgba(242, 209, 35, 0.2);
}

.export-template-card.export-template-soon {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Template preview - mini A4 page */
.export-template-preview {
    margin-bottom: 0.5rem;
}

.template-page {
    aspect-ratio: 210 / 297; /* A4 ratio */
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 6%;
    display: flex;
    flex-direction: column;
    font-size: 4px;
    position: relative;
    overflow: hidden;
}

.template-page-placeholder {
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-coming-soon {
    color: #9ca3af;
    font-size: 18px;
}

/* Responsive: 2 columns on smaller screens */
@media (max-width: 768px) {
    .export-templates-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Template header */
.template-header {
    margin-bottom: 8%;
    min-height: 8%;
}

.template-header-line {
    height: 1px;
    background: #e5e7eb;
    width: 100%;
}

.template-header-modern {
    text-align: center;
}

.template-header-title {
    font-size: 4px;
    color: #6b7280;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.template-header-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, #d1d5db, transparent);
    width: 60%;
    margin: 0 auto;
}

/* Template title */
.template-title-centered {
    text-align: center;
    font-size: 7px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8%;
}

.template-title-left {
    font-size: 6px;
    font-weight: 700;
    color: #374151;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.template-subtitle {
    font-size: 5px;
    color: #6b7280;
    font-style: italic;
    margin-bottom: 6%;
}

/* Template content lines */
.template-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.template-line {
    height: 2px;
    background: #e5e7eb;
    border-radius: 1px;
}

.template-line.w-100 { width: 100%; }
.template-line.w-95 { width: 95%; }
.template-line.w-90 { width: 90%; }
.template-line.w-85 { width: 85%; }
.template-line.w-80 { width: 80%; }
.template-line.w-75 { width: 75%; }

/* Template footer */
.template-footer {
    margin-top: auto;
    padding-top: 6%;
    text-align: center;
}

.template-page-number {
    font-size: 4px;
    color: #9ca3af;
}

.template-footer-modern {
    text-align: center;
}

.template-footer-line {
    height: 1px;
    background: #e5e7eb;
    width: 30%;
    margin: 0 auto 4px;
}

/* Template info */
.export-template-info {
    text-align: center;
}

.export-template-info h6 {
    margin: 0 0 0.15rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.export-template-info small {
    font-size: 0.65rem;
    line-height: 1.2;
    display: block;
}

/* Check mark */
.export-template-check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: #f2d123;
    font-size: 1rem;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.export-template-card.selected .export-template-check {
    opacity: 1;
    transform: scale(1);
}

/* Dark mode */
html[data-theme="dark"] .export-template-card {
    background: transparent;
}

html[data-theme="dark"] .export-template-card:hover:not(.export-template-soon) {
    background: rgba(242, 209, 35, 0.15);
}

html[data-theme="dark"] .export-template-card.selected {
    background: rgba(242, 209, 35, 0.25);
}

html[data-theme="dark"] .template-page {
    background: #0f172a;
    border-color: #334155;
}

html[data-theme="dark"] .template-page-placeholder {
    background: #1e293b;
}

html[data-theme="dark"] .template-line,
html[data-theme="dark"] .template-header-line,
html[data-theme="dark"] .template-footer-line {
    background: #334155;
}

html[data-theme="dark"] .export-template-info h6 {
    color: #e2e8f0;
}

html[data-theme="dark"] .tiptap-more-separator {
    background: #334155;
}

/* ============================================================================
   EPUB Export Modal
   ============================================================================ */

.epub-export-tabs {
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    margin: 0 !important;
    padding: 1rem 1rem 0 !important;
}

.epub-export-tabs .nav-link {
    color: #6b7280;
    border: none;
    border-radius: 8px 8px 0 0;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.epub-export-tabs .nav-link:hover {
    color: #374151;
    background: rgba(0,0,0,0.05);
}

.epub-export-tabs .nav-link.active {
    color: #1f2937;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-bottom-color: #fff;
    margin-bottom: -1px;
}

.epub-form-group {
    margin-bottom: 1rem;
}

.epub-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.375rem;
}

.epub-label.required::after {
    content: " *";
    color: #dc2626;
}

.epub-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.epub-check-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.epub-check {
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border-radius: 6px;
    margin: 0;
}

.epub-check .form-check-label {
    font-size: 0.8125rem;
    color: #374151;
}

.epub-sub-option {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: #f3f4f6;
    border-radius: 6px;
}

/* Cover upload zone */
.epub-cover-upload-zone {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    background: #f9fafb;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.epub-cover-upload-zone:hover,
.epub-cover-upload-zone.dragover {
    border-color: #1f2937;
    background: #f3f4f6;
}

.epub-cover-placeholder {
    text-align: center;
    color: #6b7280;
}

.epub-cover-placeholder i {
    font-size: 3rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
    display: block;
}

.epub-cover-placeholder p {
    margin: 0.5rem 0 0.25rem;
    font-weight: 500;
}

.epub-cover-placeholder span {
    font-size: 0.75rem;
    color: #9ca3af;
}

.epub-cover-preview {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.epub-cover-preview img {
    max-width: 100%;
    max-height: 280px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.epub-cover-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

/* Color presets */
.epub-color-preset {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.epub-color-preset:hover {
    transform: scale(1.1);
    border-color: #1f2937;
}

/* Theme selector */
.epub-theme-selector {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.epub-theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.epub-theme-option input {
    display: none;
}

.epub-theme-preview {
    width: 60px;
    height: 80px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.epub-theme-option input:checked + .epub-theme-preview {
    border-color: #1f2937;
    box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.2);
}

.epub-theme-light {
    background: #fff;
    color: #1a1a1a;
    border-color: #e5e7eb;
}

.epub-theme-sepia {
    background: #f5f1e8;
    color: #5c4b37;
    border-color: #d4c8b8;
}

.epub-theme-dark {
    background: #1a1a1a;
    color: #e5e5e5;
    border-color: #333;
}

.epub-theme-option span:last-child {
    font-size: 0.75rem;
    color: #6b7280;
}

.epub-info-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
}

.epub-info-box p {
    font-size: 0.875rem;
    color: #475569;
}

/* Dark mode for EPUB modal */
html[data-theme="dark"] .epub-export-tabs {
    background: #1e293b;
    border-color: #334155;
}

html[data-theme="dark"] .epub-export-tabs .nav-link {
    color: #94a3b8;
}

html[data-theme="dark"] .epub-export-tabs .nav-link:hover {
    color: #e2e8f0;
    background: rgba(255,255,255,0.05);
}

html[data-theme="dark"] .epub-export-tabs .nav-link.active {
    color: #f1f5f9;
    background: #0f172a;
    border-color: #334155;
    border-bottom-color: #0f172a;
}

html[data-theme="dark"] #exportEpubModal .modal-body {
    background: #0f172a;
}

html[data-theme="dark"] .epub-label {
    color: #e2e8f0;
}

html[data-theme="dark"] .epub-section-title {
    color: #f1f5f9;
}

html[data-theme="dark"] .epub-check {
    background: #1e293b;
}

html[data-theme="dark"] .epub-check .form-check-label {
    color: #e2e8f0;
}

html[data-theme="dark"] .epub-sub-option {
    background: #1e293b;
}

html[data-theme="dark"] .epub-cover-upload-zone {
    background: #1e293b;
    border-color: #475569;
}

html[data-theme="dark"] .epub-cover-upload-zone:hover {
    border-color: #f2d123;
    background: #334155;
}

html[data-theme="dark"] .epub-cover-placeholder {
    color: #94a3b8;
}

html[data-theme="dark"] .epub-cover-placeholder i {
    color: #64748b;
}

html[data-theme="dark"] .epub-theme-option span:last-child {
    color: #94a3b8;
}

html[data-theme="dark"] .epub-info-box {
    background: #1e293b;
    border-color: #334155;
}

html[data-theme="dark"] .epub-info-box p {
    color: #94a3b8;
}

html[data-theme="dark"] #exportEpubModal .modal-footer {
    background: #1e293b;
    border-color: #334155;
}

/* ============================================================================
   Editor Wrapper - Zone de scroll pour les pages
   ============================================================================ */

.tiptap-editor-wrapper {
    position: relative; /* For loader overlay positioning */
    background: #ececec;
    margin: 0;
    /* Flex grow to fill space between toolbar and footerbar */
    flex: 1;
    min-height: 0; /* Important for flex children to shrink */
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.tiptap-editor-area {
    flex: 1;
    padding: 2rem 1rem;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Container starts at top, can grow */
    transition: flex 0.3s ease;
    /* Mobile scroll support */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.tiptap-editor-container {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -2px rgba(0, 0, 0, 0.1),
                0 20px 50px -12px rgba(0, 0, 0, 0.15);
    border: none;
    width: 100%;
    max-width: 794px; /* A4 width at 96dpi */
    min-height: 1122px; /* A4 height at 96dpi */
    padding: 3rem;
    height: fit-content;
    margin-bottom: 2rem;
}

/* ============================================================================
   ProseMirror / TipTap Editor - Conteneur principal
   ============================================================================ */

#tiptap-editor {
    min-height: calc(1122px - 6rem); /* A4 height - padding */
    height: auto;
    position: relative;
}

#tiptap-editor .ProseMirror {
    outline: none;
    min-height: calc(1122px - 6rem); /* A4 height - padding */
    height: auto;
    font-size: 1rem;
    line-height: 1.7;
    color: #111827;
}

#tiptap-editor .ProseMirror p {
    margin: 0 0 0.9rem;
}

#tiptap-editor .ProseMirror h1,
#tiptap-editor .ProseMirror h2,
#tiptap-editor .ProseMirror h3 {
    font-weight: 700;
    margin: 1.8rem 0 0.7rem;
    line-height: 1.2;
    color: #020617;
}

#tiptap-editor .ProseMirror h1:first-child,
#tiptap-editor .ProseMirror h2:first-child,
#tiptap-editor .ProseMirror h3:first-child {
    margin-top: 0;
}

#tiptap-editor .ProseMirror h1 {
    font-size: 1.9rem;
}

#tiptap-editor .ProseMirror h2 {
    font-size: 1.4rem;
}

#tiptap-editor .ProseMirror h3 {
    font-size: 1.2rem;
}

#tiptap-editor .ProseMirror ul,
#tiptap-editor .ProseMirror ol {
    padding-left: 1.5rem;
    margin: 0 0 0.9rem;
}

#tiptap-editor .ProseMirror li {
    margin-bottom: 0.25rem;
}

#tiptap-editor .ProseMirror blockquote {
    border-left: 4px solid #f2d123;
    margin: 1.2rem 0;
    padding-left: 1rem;
    color: #4b5563;
    font-style: italic;
}

#tiptap-editor .ProseMirror code {
    background: #f3f4f6;
    border-radius: 0.25rem;
    padding: 0.15rem 0.3rem;
    font-size: 0.9em;
    font-family: 'Fira Code', 'Consolas', monospace;
}

#tiptap-editor .ProseMirror pre {
    background: #020617;
    color: #e5e7eb;
    padding: 0.8rem 1rem;
    border-radius: 0.6rem;
    font-size: 0.9em;
    overflow-x: auto;
    font-family: 'Fira Code', 'Consolas', monospace;
}

#tiptap-editor .ProseMirror pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
}

#tiptap-editor .ProseMirror mark {
    background: rgba(242, 209, 35, 0.4);
    padding: 0 0.1rem;
    border-radius: 0.15rem;
}

#tiptap-editor .ProseMirror img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem auto;
    border-radius: 0.75rem;
    transition: box-shadow 0.2s ease;
}

#tiptap-editor .ProseMirror img:hover {
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
}

#tiptap-editor .ProseMirror hr {
    border: none;
    border-top: 2px solid #e5e7eb;
    margin: 2rem 0;
}

/* Placeholder */
#tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    color: #9ca3af;
    pointer-events: none;
    height: 0;
    font-style: italic;
}

/* Selection */
#tiptap-editor .ProseMirror ::selection {
    background: rgba(99, 102, 241, 0.2);
}

/* Links */
#tiptap-editor .ProseMirror a {
    color: #6366f1;
    text-decoration: underline;
    text-decoration-color: rgba(99, 102, 241, 0.3);
}

#tiptap-editor .ProseMirror a:hover {
    text-decoration-color: #6366f1;
}


/* ============================================================================
   Footerbar - Barre de commandes en bas
   ============================================================================ */

.tiptap-footerbar-sticky {
    flex-shrink: 0;
    width: 100%;
    z-index: 100;
    background: #fff;
    border-top: 1px solid #ececec;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 2px 1.2rem 2px 1rem;
    font-size: 0.92rem;
    min-height: 32px;
    height: 32px;
    overflow: visible !important;
}


.tiptap-footerbar-group {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: visible;
    position: relative;
}

.tiptap-icon-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 1.07rem;
    padding: 2px 4px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.13s, color 0.11s;
}

.tiptap-icon-btn:hover,
.tiptap-icon-btn:focus {
    background: rgba(242, 209, 35, 0.22);
    color: #b88d0a;
}

.tiptap-footerbar-sep {
    width: 1px;
    height: 20px;
    background: #e0e0e0;
}

/* Auto-save icon with halo effect */
#tiptapAutoSaveIcon {
    color: #005c45;
    filter:
        drop-shadow(0 0 2px rgba(0, 92, 69, 0.6))
        drop-shadow(0 0 6px rgba(0, 92, 69, 0.4))
        drop-shadow(0 0 10px rgba(0, 92, 69, 0.2));
    animation: footerbar-autosave-pulse 3s ease-in-out infinite;
}

#tiptapAutoSaveIcon.saving {
    filter:
        drop-shadow(0 0 3px rgba(0, 92, 69, 0.8))
        drop-shadow(0 0 8px rgba(0, 92, 69, 0.6))
        drop-shadow(0 0 14px rgba(0, 92, 69, 0.3));
    animation: footerbar-autosave-pulse-fast 0.6s ease-in-out infinite;
}

#tiptapAutoSaveIcon.error {
    color: #ef4444;
    filter:
        drop-shadow(0 0 2px rgba(239, 68, 68, 0.7))
        drop-shadow(0 0 6px rgba(239, 68, 68, 0.5))
        drop-shadow(0 0 10px rgba(239, 68, 68, 0.3));
    animation: footerbar-autosave-error-pulse 1.5s ease-in-out infinite;
}

#tiptapAutoSaveIcon.offline {
    color: #e5cdb3;
    filter:
        drop-shadow(0 0 2px rgba(245, 158, 11, 0.6))
        drop-shadow(0 0 6px rgba(245, 158, 11, 0.4))
        drop-shadow(0 0 10px rgba(245, 158, 11, 0.2));
    animation: none;
}

@keyframes footerbar-autosave-pulse {
    0%, 100% {
        opacity: 0.7;
        filter:
            drop-shadow(0 0 2px rgba(0, 92, 69, 0.5))
            drop-shadow(0 0 5px rgba(0, 92, 69, 0.3))
            drop-shadow(0 0 8px rgba(0, 92, 69, 0.15));
    }
    50% {
        opacity: 1;
        filter:
            drop-shadow(0 0 3px rgba(0, 92, 69, 0.7))
            drop-shadow(0 0 8px rgba(0, 92, 69, 0.5))
            drop-shadow(0 0 12px rgba(0, 92, 69, 0.25));
    }
}

@keyframes footerbar-autosave-pulse-fast {
    0%, 100% {
        opacity: 0.8;
        filter:
            drop-shadow(0 0 2px rgba(0, 92, 69, 0.7))
            drop-shadow(0 0 6px rgba(0, 92, 69, 0.5))
            drop-shadow(0 0 10px rgba(0, 92, 69, 0.3));
    }
    50% {
        opacity: 1;
        filter:
            drop-shadow(0 0 4px rgba(0, 92, 69, 0.9))
            drop-shadow(0 0 10px rgba(0, 92, 69, 0.7))
            drop-shadow(0 0 16px rgba(0, 92, 69, 0.4));
    }
}

@keyframes footerbar-autosave-error-pulse {
    0%, 100% {
        opacity: 0.8;
        filter:
            drop-shadow(0 0 2px rgba(239, 68, 68, 0.6))
            drop-shadow(0 0 5px rgba(239, 68, 68, 0.4))
            drop-shadow(0 0 8px rgba(239, 68, 68, 0.2));
    }
    50% {
        opacity: 1;
        filter:
            drop-shadow(0 0 3px rgba(239, 68, 68, 0.8))
            drop-shadow(0 0 8px rgba(239, 68, 68, 0.6))
            drop-shadow(0 0 12px rgba(239, 68, 68, 0.3));
    }
}

.tiptap-stat-dropdown {
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 8px;
    min-width: 220px;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    padding: 14px 16px;
    z-index: 10000;
    font-size: 0.9rem;
    color: #333;
}

/* Container for dropdown trigger */
.tiptap-stat-dropdown-container {
    position: relative;
    display: inline-block;
}

.tiptap-stat-trigger {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.tiptap-stat-trigger:hover {
    background: rgba(0, 0, 0, 0.05);
}

.tiptap-stat-arrow {
    font-size: 0.85em;
    margin-left: 2px;
    color: #888;
    vertical-align: middle;
    transition: transform 0.2s;
}

.tiptap-stat-dropdown-container.open .tiptap-stat-arrow {
    transform: rotate(180deg);
}

.tiptap-stat-dropdown-title {
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tiptap-stat-dropdown table {
    width: 100%;
}

.tiptap-stat-dropdown table td {
    padding: 4px 0;
    vertical-align: middle;
}

.tiptap-stat-dropdown table td:first-child {
    color: #666;
}

.tiptap-stat-dropdown table td.text-end {
    font-weight: 600;
    color: #333;
}

/* History Button Container */
#tiptapHistoryBtn {
    position: relative;
}

/* History Dropdown */
.tiptap-history-dropdown {
    position: fixed;
    /* Position dynamique définie par JS */
    min-width: 300px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    padding: 14px 16px;
    z-index: 10000;
    font-size: 0.9rem;
    color: #333;
}

.tiptap-history-dropdown-title {
    font-weight: 600;
    color: #555;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.tiptap-history-dropdown table td {
    padding: 6px 0;
    vertical-align: middle;
    font-size: 0.85rem;
}

.tiptap-history-dropdown table td:first-child {
    color: #666;
}

.tiptap-history-dropdown table td.text-end {
    font-weight: 500;
    color: #333;
}

.tiptap-history-dropdown-divider {
    height: 1px;
    background: #e5e5e5;
    margin: 8px 0;
}

[data-theme="dark"] .tiptap-history-dropdown-divider {
    background: #444;
}

.tiptap-history-dropdown-link {
    display: flex;
    align-items: center;
    width: calc(100% + 24px);
    margin: 0 -12px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #222;
    cursor: pointer;
    transition: background 0.15s;
}

.tiptap-history-dropdown-link:hover {
    background: rgba(242, 209, 35, 0.2);
}

[data-theme="dark"] .tiptap-history-dropdown-link {
    color: #e5e7eb;
}

[data-theme="dark"] .tiptap-history-dropdown-link:hover {
    background: rgba(242, 209, 35, 0.15);
    color: #fff;
}

/* Zoom slider */
#tiptapZoomSlider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    cursor: pointer;
    outline: none;
}

#tiptapZoomSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #f2d123;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#tiptapZoomSlider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(242, 209, 35, 0.4);
}

#tiptapZoomSlider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #f2d123;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

#tiptapZoomSlider::-moz-range-track {
    background: #e5e7eb;
    height: 4px;
    border-radius: 2px;
}

#tiptapZoomPercent {
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
}



/* ============================================================================
   Shortcuts Sidebar - Panneau des raccourcis (intégré dans le wrapper)
   ============================================================================ */

.tiptap-shortcuts-sidebar {
    width: 0;
    min-width: 0;
    background: #fff;
    border-left: 1px solid #ececec;
    overflow: hidden;
    transition: width 0.3s ease, min-width 0.3s ease;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.08);
    z-index: 110;
}

.tiptap-shortcuts-sidebar.open {
    width: 320px;
    min-width: 320px;
}

.tiptap-shortcuts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #ececec;
    background: #fff;
    flex-shrink: 0;
}

.tiptap-shortcuts-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

/* Zone scrollable */
.tiptap-shortcuts-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.tiptap-shortcuts-body {
    padding: 1rem 1.25rem;
}

.tiptap-shortcut-group {
    margin-bottom: 1.25rem;
}

.tiptap-shortcut-group:last-child {
    margin-bottom: 0;
}

.tiptap-shortcut-group-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #f0f0f0;
}

.tiptap-shortcut-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #444;
    border-radius: 6px;
    transition: background 0.15s;
}

.tiptap-shortcut-item:hover {
    background: #f3f4f6;
}

.tiptap-shortcut-keys {
    display: flex;
    align-items: center;
    gap: 3px;
}

.tiptap-shortcut-keys kbd {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.75rem;
    font-family: inherit;
    color: #374151;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}


/* ============================================================================
   Repetition Sidebar - Analyse des répétitions (Inside Wrapper Layout)
   ============================================================================ */

.tiptap-repetition-sidebar {
    width: 0;
    min-width: 0;
    background: #fff;
    border-left: 1px solid #ececec;
    overflow: hidden;
    transition: width 0.3s ease, min-width 0.3s ease;
    /* Full height of wrapper - sidebar stays fixed when editor scrolls */
    height: 100%;
    flex-shrink: 0;
    /* Flex column for sticky header/footer */
    display: flex;
    flex-direction: column;
    /* Same depth as toolbar, above footer */
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.08);
    z-index: 110;
}

.tiptap-repetition-sidebar.open {
    width: 320px;
    min-width: 320px;
}

.tiptap-repetition-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #ececec;
    background: #fff;
    flex-shrink: 0;
}

/* Zone scrollable contenant settings, summary, tabs et liste */
.tiptap-repetition-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0; /* Important for flex scroll */
}

.tiptap-repetition-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.tiptap-repetition-settings {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #ececec;
    background: #f9fafb;
}

.tiptap-repetition-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.tiptap-repetition-setting:last-of-type {
    margin-bottom: 0;
}

.tiptap-repetition-setting label {
    font-size: 0.8rem;
    color: #555;
    font-weight: 500;
}

.tiptap-repetition-setting .form-select {
    width: 120px;
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

.tiptap-repetition-summary {
    display: flex;
    justify-content: space-around;
    padding: 0.75rem 1rem;
    background: rgba(242, 209, 35, 0.15);
    border: 1px solid rgba(242, 209, 35, 0.3);
    border-radius: 6px;
    margin: 0.5rem 0.75rem;
}

.tiptap-rep-stat {
    text-align: center;
}

.tiptap-rep-stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
}

.tiptap-rep-stat-label {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tiptap-repetition-tabs {
    display: flex;
    border-bottom: 1px solid #ececec;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
}

.tiptap-rep-tab {
    flex: 1;
    padding: 0.6rem 0.5rem;
    background: none;
    border: none;
    font-size: 0.8rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.tiptap-rep-tab:hover {
    color: #333;
    background: rgba(0, 0, 0, 0.02);
}

.tiptap-rep-tab.active {
    color: #1f2937;
    border-bottom-color: #f2d123;
}

.tiptap-repetition-body {
    padding: 0.5rem;
}

.tiptap-repetition-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #888;
}

.tiptap-repetition-empty i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: block;
    color: #ccc;
}

.tiptap-repetition-empty p {
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.5;
}

/* Repetition word item */
.tiptap-rep-item {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.35rem;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}

.tiptap-rep-item:hover {
    background: #f3f4f6;
    border-color: #e5e7eb;
}

.tiptap-rep-item.active {
    background: rgba(242, 209, 35, 0.15);
    border-color: rgba(242, 209, 35, 0.4);
}

.tiptap-rep-item-word {
    flex: 1;
    font-weight: 500;
    color: #333;
    font-size: 0.9rem;
}

.tiptap-rep-item-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.tiptap-rep-item-count.low {
    background: #dbeafe;
    color: #1e40af;
}

.tiptap-rep-item-count.medium {
    background: #fef3c7;
    color: #92400e;
}

.tiptap-rep-item-count.high {
    background: #fee2e2;
    color: #991b1b;
}

.tiptap-rep-item-proximity {
    font-size: 0.7rem;
    color: #888;
    margin-left: 0.5rem;
}

.tiptap-rep-item-proximity.close {
    color: #ef4444;
}

/* Navigation buttons for occurrences */
.tiptap-rep-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding-left: 8px;
}

.tiptap-rep-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: #f3f4f6;
    border-radius: 4px;
    cursor: pointer;
    color: #374151;
    font-size: 0.8rem;
    transition: all 0.15s;
}

.tiptap-rep-nav-btn:hover {
    background: #1f2937;
    color: #fff;
}

.tiptap-rep-nav-btn:active {
    transform: scale(0.95);
}

.tiptap-rep-nav-counter {
    font-size: 0.7rem;
    color: #6b7280;
    min-width: 36px;
    text-align: center;
    font-weight: 500;
}

.tiptap-rep-nav-current {
    color: #6366f1;
    font-weight: 600;
}

/* Adjust item layout when nav is present */
.tiptap-rep-item {
    flex-wrap: wrap;
}

.tiptap-rep-item .tiptap-rep-nav {
    width: 100%;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f0f0f0;
    justify-content: center;
}

.tiptap-repetition-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid #ececec;
    flex-shrink: 0;
    background: #fff;
}

/* Highlight styles in editor */
.tiptap-rep-highlight,
mark.tiptap-rep-highlight,
mark[data-rep-highlight] {
    background: rgba(251, 191, 36, 0.6) !important;
    background-color: rgba(251, 191, 36, 0.6) !important;
    border-radius: 3px;
    padding: 2px 3px;
    margin: 0 1px;
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    border-bottom: 2px solid rgba(251, 191, 36, 0.8);
    color: inherit;
}

.tiptap-rep-highlight.current,
mark.tiptap-rep-highlight.current,
mark[data-rep-highlight].current {
    background: rgba(239, 68, 68, 0.6) !important;
    background-color: rgba(239, 68, 68, 0.6) !important;
    border-bottom: 2px solid rgba(239, 68, 68, 1);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4);
    animation: pulse-highlight 1.5s ease-in-out infinite;
}

@keyframes pulse-highlight {
    0%, 100% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.2); }
}

/* CSS Custom Highlight API */
::highlight(repetition-highlight) {
    background-color: rgba(251, 191, 36, 0.5);
    color: inherit;
}

::highlight(repetition-current) {
    background-color: rgba(239, 68, 68, 0.6);
    color: inherit;
}

/* ProseMirror relative positioning for overlay */
#tiptap-editor .ProseMirror {
    position: relative !important;
}

/* Overlay container for highlight markers */
.tiptap-highlight-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 5 !important;
    overflow: visible !important;
}

/* Highlight markers */
.tiptap-rep-highlight-marker {
    position: absolute !important;
    background: rgba(251, 191, 36, 0.5) !important;
    border-radius: 3px;
    pointer-events: none;
    box-sizing: border-box;
}

.tiptap-rep-highlight-marker.current {
    background: rgba(239, 68, 68, 0.6) !important;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
}

/* Dark mode for repetition sidebar */
html[data-theme="dark"] .tiptap-repetition-sidebar,
.tiptap-dark-mode .tiptap-repetition-sidebar {
    background: #1e293b;
    border-left-color: #334155;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .tiptap-repetition-header,
.tiptap-dark-mode .tiptap-repetition-header {
    border-bottom-color: #334155;
    background: #1e293b;
}

html[data-theme="dark"] .tiptap-repetition-header h5,
.tiptap-dark-mode .tiptap-repetition-header h5 {
    color: #f1f5f9;
}

html[data-theme="dark"] .tiptap-repetition-settings,
.tiptap-dark-mode .tiptap-repetition-settings {
    background: #0f172a;
    border-bottom-color: #334155;
}

html[data-theme="dark"] .tiptap-repetition-setting label,
.tiptap-dark-mode .tiptap-repetition-setting label {
    color: #94a3b8;
}

html[data-theme="dark"] .tiptap-repetition-setting .form-select,
.tiptap-dark-mode .tiptap-repetition-setting .form-select {
    background: #1e293b;
    border-color: #334155;
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-repetition-scroll,
.tiptap-dark-mode .tiptap-repetition-scroll {
    scrollbar-color: #475569 #1e293b;
}

html[data-theme="dark"] .tiptap-repetition-tabs,
.tiptap-dark-mode .tiptap-repetition-tabs {
    border-bottom-color: #334155;
    background: #1e293b;
}

html[data-theme="dark"] .tiptap-rep-tab,
.tiptap-dark-mode .tiptap-rep-tab {
    color: #94a3b8;
}

html[data-theme="dark"] .tiptap-rep-tab:hover,
.tiptap-dark-mode .tiptap-rep-tab:hover {
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .tiptap-rep-tab.active,
.tiptap-dark-mode .tiptap-rep-tab.active {
    color: #f2d123;
    border-bottom-color: #f2d123;
}

html[data-theme="dark"] .tiptap-rep-item:hover,
.tiptap-dark-mode .tiptap-rep-item:hover {
    background: #334155;
    border-color: #475569;
}

html[data-theme="dark"] .tiptap-rep-item.active,
.tiptap-dark-mode .tiptap-rep-item.active {
    background: rgba(242, 209, 35, 0.2);
    border-color: rgba(242, 209, 35, 0.4);
}

html[data-theme="dark"] .tiptap-rep-item-word,
.tiptap-dark-mode .tiptap-rep-item-word {
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-rep-nav-btn,
.tiptap-dark-mode .tiptap-rep-nav-btn {
    background: #334155;
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-rep-nav-btn:hover,
.tiptap-dark-mode .tiptap-rep-nav-btn:hover {
    background: #f2d123;
    color: #1f2937;
}

html[data-theme="dark"] .tiptap-rep-nav-counter,
.tiptap-dark-mode .tiptap-rep-nav-counter {
    color: #94a3b8;
}

html[data-theme="dark"] .tiptap-rep-item .tiptap-rep-nav,
.tiptap-dark-mode .tiptap-rep-item .tiptap-rep-nav {
    border-top-color: #334155;
}

html[data-theme="dark"] .tiptap-repetition-footer,
.tiptap-dark-mode .tiptap-repetition-footer {
    border-top-color: #334155;
    background: #1e293b;
}

html[data-theme="dark"] .tiptap-repetition-empty,
.tiptap-dark-mode .tiptap-repetition-empty {
    color: #94a3b8;
}

html[data-theme="dark"] .tiptap-repetition-empty i,
.tiptap-dark-mode .tiptap-repetition-empty i {
    color: #475569;
}

html[data-theme="dark"] .tiptap-repetition-summary,
.tiptap-dark-mode .tiptap-repetition-summary {
    background: rgba(242, 209, 35, 0.1);
    border-color: rgba(242, 209, 35, 0.2);
}

html[data-theme="dark"] .tiptap-rep-stat-value,
.tiptap-dark-mode .tiptap-rep-stat-value {
    color: #f1f5f9;
}

html[data-theme="dark"] .tiptap-rep-stat-label,
.tiptap-dark-mode .tiptap-rep-stat-label {
    color: #94a3b8;
}

/* Zkriva theme - Repetition Sidebar */
html[data-theme="zkriva"] .tiptap-repetition-sidebar,
body[data-theme="zkriva"] .tiptap-repetition-sidebar {
    background: #fffffe;
    border-left-color: #e7e5e4;
    box-shadow: -4px 0 8px rgba(28, 25, 23, 0.08);
}

html[data-theme="zkriva"] .tiptap-repetition-header,
body[data-theme="zkriva"] .tiptap-repetition-header {
    background: #fafaf9;
    border-bottom-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-repetition-header h5,
body[data-theme="zkriva"] .tiptap-repetition-header h5 {
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-repetition-settings,
body[data-theme="zkriva"] .tiptap-repetition-settings {
    background: #f5f3ef;
    border-bottom-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-repetition-setting label,
body[data-theme="zkriva"] .tiptap-repetition-setting label {
    color: #57534e;
}

html[data-theme="zkriva"] .tiptap-repetition-setting .form-select,
body[data-theme="zkriva"] .tiptap-repetition-setting .form-select {
    background: #fafaf9;
    border-color: #e7e5e4;
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-repetition-tabs,
body[data-theme="zkriva"] .tiptap-repetition-tabs {
    background: #fafaf9;
    border-bottom-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-rep-tab,
body[data-theme="zkriva"] .tiptap-rep-tab {
    color: #78716c;
}

html[data-theme="zkriva"] .tiptap-rep-tab:hover,
body[data-theme="zkriva"] .tiptap-rep-tab:hover {
    color: #1c1917;
    background: rgba(210, 180, 145, 0.05);
}

html[data-theme="zkriva"] .tiptap-rep-tab.active,
body[data-theme="zkriva"] .tiptap-rep-tab.active {
    color: #d2b491;
    border-bottom-color: #d2b491;
}

html[data-theme="zkriva"] .tiptap-rep-item,
body[data-theme="zkriva"] .tiptap-rep-item {
    background: #fafaf9;
    border-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-rep-item:hover,
body[data-theme="zkriva"] .tiptap-rep-item:hover {
    background: #f5f5f4;
    border-color: #d6d3d1;
}

html[data-theme="zkriva"] .tiptap-rep-item.active,
body[data-theme="zkriva"] .tiptap-rep-item.active {
    background: rgba(210, 180, 145, 0.1);
    border-color: rgba(210, 180, 145, 0.3);
}

html[data-theme="zkriva"] .tiptap-rep-item-word,
body[data-theme="zkriva"] .tiptap-rep-item-word {
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-rep-nav-btn,
body[data-theme="zkriva"] .tiptap-rep-nav-btn {
    background: #e7e5e4;
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-rep-nav-btn:hover,
body[data-theme="zkriva"] .tiptap-rep-nav-btn:hover {
    background: #d2b491;
    color: #ffffff;
}

html[data-theme="zkriva"] .tiptap-rep-nav-counter,
body[data-theme="zkriva"] .tiptap-rep-nav-counter {
    color: #78716c;
}

html[data-theme="zkriva"] .tiptap-rep-item .tiptap-rep-nav,
body[data-theme="zkriva"] .tiptap-rep-item .tiptap-rep-nav {
    border-top-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-repetition-footer,
body[data-theme="zkriva"] .tiptap-repetition-footer {
    background: #f5f3ef;
    border-top-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-repetition-empty,
body[data-theme="zkriva"] .tiptap-repetition-empty {
    color: #78716c;
}

html[data-theme="zkriva"] .tiptap-repetition-summary,
body[data-theme="zkriva"] .tiptap-repetition-summary {
    background: rgba(210, 180, 145, 0.08);
    border-color: rgba(210, 180, 145, 0.2);
}

html[data-theme="zkriva"] .tiptap-rep-stat-value,
body[data-theme="zkriva"] .tiptap-rep-stat-value {
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-rep-stat-label,
body[data-theme="zkriva"] .tiptap-rep-stat-label {
    color: #57534e;
}

/* ============================================================================
   Search/Replace Sidebar - Sidebar Rechercher/Remplacer
   ============================================================================ */

.tiptap-search-sidebar {
    width: 0;
    min-width: 0;
    background: #fff;
    border-left: 1px solid #ececec;
    overflow: hidden;
    transition: width 0.3s ease, min-width 0.3s ease;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.08);
    z-index: 110;
}

.tiptap-search-sidebar.open {
    width: 320px;
    min-width: 320px;
}

.tiptap-search-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #ececec;
    background: #fff;
    flex-shrink: 0;
}

.tiptap-search-sidebar-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.tiptap-search-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 0;
}

.tiptap-search-sidebar-section {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.tiptap-search-sidebar-section:last-child {
    border-bottom: none;
}

.tiptap-search-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tiptap-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.tiptap-search-input-wrapper input {
    padding-right: 50px;
}

.tiptap-search-count {
    position: absolute;
    right: 10px;
    font-size: 0.75rem;
    color: #888;
    font-weight: 500;
}

.tiptap-search-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tiptap-search-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #555;
    cursor: pointer;
}

.tiptap-search-option input[type="checkbox"] {
    accent-color: #f2d123;
    width: 14px;
    height: 14px;
}

.tiptap-search-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tiptap-search-actions .btn {
    flex: 1;
}

.tiptap-search-nav {
    display: flex;
    gap: 2px;
}

.tiptap-search-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: #f3f4f6;
    border-radius: 4px;
    cursor: pointer;
    color: #374151;
    font-size: 0.85rem;
    transition: all 0.15s;
}

.tiptap-search-nav-btn:hover {
    background: #1f2937;
    color: #fff;
}

.tiptap-search-nav-btn:active {
    transform: scale(0.95);
}

.tiptap-replace-actions {
    display: flex;
    gap: 0.5rem;
}

.tiptap-replace-actions .btn {
    flex: 1;
}

.tiptap-search-summary {
    background: rgba(242, 209, 35, 0.15);
    border: 1px solid rgba(242, 209, 35, 0.3);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    text-align: center;
}

.tiptap-search-summary-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.tiptap-search-summary-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.tiptap-search-summary-label {
    font-size: 0.8rem;
    color: #64748b;
}

.tiptap-search-results {
    padding: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.tiptap-search-empty {
    text-align: center;
    padding: 1.5rem 1rem;
    color: #888;
}

.tiptap-search-empty i {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    display: block;
    color: #ccc;
}

.tiptap-search-empty p {
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.5;
}

.tiptap-search-result-item {
    display: block;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    margin-bottom: 0.3rem;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
    font-size: 0.85rem;
    color: #444;
    line-height: 1.5;
    word-wrap: break-word;
}

.tiptap-search-result-item:hover {
    background: #f3f4f6;
    border-color: #e5e7eb;
}

.tiptap-search-result-item.active {
    background: rgba(242, 209, 35, 0.15);
    border-color: rgba(242, 209, 35, 0.4);
}

.tiptap-search-result-item mark {
    background: rgba(242, 209, 35, 0.5);
    padding: 0 2px;
    border-radius: 2px;
}

.tiptap-search-sidebar-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid #ececec;
    flex-shrink: 0;
    background: #fff;
}

/* Search highlight overlay and markers */
.tiptap-search-highlight-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 5 !important;
    overflow: visible !important;
}

.tiptap-search-highlight-marker {
    position: absolute !important;
    background: rgba(251, 191, 36, 0.5) !important;
    border-radius: 3px;
    pointer-events: none;
    box-sizing: border-box;
}

.tiptap-search-highlight-marker.current {
    background: rgba(239, 68, 68, 0.6) !important;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
}

/* Search Sidebar Dark Mode */
html[data-theme="dark"] .tiptap-search-sidebar,
.tiptap-dark-mode .tiptap-search-sidebar {
    background: #1e293b;
    border-left-color: #334155;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .tiptap-search-sidebar-header,
.tiptap-dark-mode .tiptap-search-sidebar-header {
    border-bottom-color: #334155;
    background: #1e293b;
}

html[data-theme="dark"] .tiptap-search-sidebar-header h5,
.tiptap-dark-mode .tiptap-search-sidebar-header h5 {
    color: #f1f5f9;
}

html[data-theme="dark"] .tiptap-search-sidebar-section,
.tiptap-dark-mode .tiptap-search-sidebar-section {
    border-bottom-color: #334155;
}

html[data-theme="dark"] .tiptap-search-label,
.tiptap-dark-mode .tiptap-search-label {
    color: #94a3b8;
}

html[data-theme="dark"] .tiptap-search-count,
.tiptap-dark-mode .tiptap-search-count {
    color: #64748b;
}

html[data-theme="dark"] .tiptap-search-option,
.tiptap-dark-mode .tiptap-search-option {
    color: #94a3b8;
}

html[data-theme="dark"] .tiptap-search-nav-btn,
.tiptap-dark-mode .tiptap-search-nav-btn {
    background: #334155;
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-search-nav-btn:hover,
.tiptap-dark-mode .tiptap-search-nav-btn:hover {
    background: #f2d123;
    color: #1f2937;
}

html[data-theme="dark"] .tiptap-search-summary,
.tiptap-dark-mode .tiptap-search-summary {
    background: rgba(242, 209, 35, 0.1);
    border-color: rgba(242, 209, 35, 0.2);
}

html[data-theme="dark"] .tiptap-search-summary-value,
.tiptap-dark-mode .tiptap-search-summary-value {
    color: #f1f5f9;
}

html[data-theme="dark"] .tiptap-search-summary-label,
.tiptap-dark-mode .tiptap-search-summary-label {
    color: #94a3b8;
}

html[data-theme="dark"] .tiptap-search-empty,
.tiptap-dark-mode .tiptap-search-empty {
    color: #94a3b8;
}

html[data-theme="dark"] .tiptap-search-empty i,
.tiptap-dark-mode .tiptap-search-empty i {
    color: #475569;
}

html[data-theme="dark"] .tiptap-search-result-item,
.tiptap-dark-mode .tiptap-search-result-item {
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-search-result-item:hover,
.tiptap-dark-mode .tiptap-search-result-item:hover {
    background: #334155;
    border-color: #475569;
}

html[data-theme="dark"] .tiptap-search-result-item.active,
.tiptap-dark-mode .tiptap-search-result-item.active {
    background: rgba(242, 209, 35, 0.2);
    border-color: rgba(242, 209, 35, 0.4);
}

html[data-theme="dark"] .tiptap-search-result-item mark,
.tiptap-dark-mode .tiptap-search-result-item mark {
    background: rgba(242, 209, 35, 0.4);
}

html[data-theme="dark"] .tiptap-search-sidebar-footer,
.tiptap-dark-mode .tiptap-search-sidebar-footer {
    border-top-color: #334155;
    background: #1e293b;
}

/* Zkriva theme - Search Sidebar */
html[data-theme="zkriva"] .tiptap-search-sidebar,
body[data-theme="zkriva"] .tiptap-search-sidebar {
    background: #fffffe;
    border-left-color: #e7e5e4;
    box-shadow: -4px 0 8px rgba(28, 25, 23, 0.08);
}

html[data-theme="zkriva"] .tiptap-search-sidebar-header,
body[data-theme="zkriva"] .tiptap-search-sidebar-header {
    background: #fafaf9;
    border-bottom-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-search-sidebar-header h5,
body[data-theme="zkriva"] .tiptap-search-sidebar-header h5 {
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-search-sidebar-section,
body[data-theme="zkriva"] .tiptap-search-sidebar-section {
    border-bottom-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-search-input,
body[data-theme="zkriva"] .tiptap-search-input {
    background: #fafaf9;
    border-color: #e7e5e4;
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-search-input:focus,
body[data-theme="zkriva"] .tiptap-search-input:focus {
    border-color: #d2b491;
    background: #ffffff;
}

html[data-theme="zkriva"] .tiptap-search-result-item,
body[data-theme="zkriva"] .tiptap-search-result-item {
    background: #fafaf9;
    border-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-search-result-item:hover,
body[data-theme="zkriva"] .tiptap-search-result-item:hover {
    background: #f5f5f4;
    border-color: #d6d3d1;
}

html[data-theme="zkriva"] .tiptap-search-result-text,
body[data-theme="zkriva"] .tiptap-search-result-text {
    color: #57534e;
}

html[data-theme="zkriva"] .tiptap-search-highlight,
body[data-theme="zkriva"] .tiptap-search-highlight {
    background: rgba(210, 180, 145, 0.2);
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-search-sidebar-footer,
body[data-theme="zkriva"] .tiptap-search-sidebar-footer {
    background: #f5f3ef;
    border-top-color: #e7e5e4;
}

/* ============================================================================
   Fullscreen Mode - Mode plein écran natif (Browser API)
   ============================================================================ */

#main-content:fullscreen,
#main-content:-webkit-full-screen,
#main-content:-ms-fullscreen {
    width: 100%;
    height: 100%;
    background: #ececec;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

.tiptap-fullscreen {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    background: #ececec;
}

.tiptap-fullscreen .tiptap-toolbar-container {
    flex-shrink: 0;
}

.tiptap-fullscreen .tiptap-editor-wrapper {
    flex: 1;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.tiptap-fullscreen .tiptap-editor-area {
    flex: 1;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
    /* Mobile scroll support */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.tiptap-fullscreen .tiptap-editor-container {
    width: 100%;
    max-width: 794px;
    min-height: 1122px; /* A4 height */
    height: auto !important;
    flex-shrink: 0;
    margin-bottom: 2rem;
}

.tiptap-fullscreen #tiptap-editor {
    min-height: calc(1122px - 6rem);
    height: auto !important;
}

.tiptap-fullscreen #tiptap-editor .ProseMirror {
    min-height: calc(1122px - 6rem);
    height: auto !important;
    overflow: visible !important;
}

.tiptap-fullscreen .tiptap-repetition-sidebar,
.tiptap-fullscreen .tiptap-search-sidebar,
.tiptap-fullscreen .tiptap-stats-sidebar,
.tiptap-fullscreen .tiptap-shortcuts-sidebar {
    height: 100%;
}

.tiptap-fullscreen .tiptap-footerbar-sticky {
    flex-shrink: 0;
    position: relative;
}

/* Dropdowns en mode fullscreen */
.tiptap-fullscreen .tiptap-history-dropdown,
.tiptap-fullscreen .tiptap-stat-dropdown,
.tiptap-fullscreen .tiptap-char-dropdown,
#main-content:fullscreen .tiptap-history-dropdown,
#main-content:fullscreen .tiptap-stat-dropdown,
#main-content:-webkit-full-screen .tiptap-history-dropdown,
#main-content:-webkit-full-screen .tiptap-stat-dropdown {
    position: fixed;
    z-index: 2147483647; /* Max z-index */
}

/* History sidebar en mode fullscreen */
.tiptap-fullscreen .tiptap-history-sidebar,
#main-content:fullscreen .tiptap-history-sidebar,
#main-content:-webkit-full-screen .tiptap-history-sidebar {
    position: fixed;
    z-index: 2147483646;
}

/* Widget preview en mode fullscreen - positionnement fixe avec z-index max */
.tiptap-history-preview-banner {
    /* En mode fullscreen, s'assurer que le z-index est suffisant */
}

:fullscreen ~ .tiptap-history-preview-banner,
:-webkit-full-screen ~ .tiptap-history-preview-banner {
    z-index: 2147483645;
}

/* Context menus en mode fullscreen */
.tiptap-fullscreen .tiptap-history-context-menu,
.tiptap-fullscreen .tiptap-history-date-menu,
#main-content:fullscreen .tiptap-history-context-menu,
#main-content:fullscreen .tiptap-history-date-menu,
#main-content:-webkit-full-screen .tiptap-history-context-menu,
#main-content:-webkit-full-screen .tiptap-history-date-menu,
:fullscreen .tiptap-history-context-menu,
:fullscreen .tiptap-history-date-menu,
:-webkit-full-screen .tiptap-history-context-menu,
:-webkit-full-screen .tiptap-history-date-menu {
    z-index: 2147483647 !important;
}

/* Modals overlay en mode fullscreen */
.tiptap-fullscreen .tiptap-history-modal-overlay,
#main-content:fullscreen .tiptap-history-modal-overlay,
#main-content:-webkit-full-screen .tiptap-history-modal-overlay,
:fullscreen .tiptap-history-modal-overlay,
:-webkit-full-screen .tiptap-history-modal-overlay {
    z-index: 2147483647 !important;
}

/* Progress toast en mode fullscreen */
.tiptap-fullscreen .tiptap-history-progress-toast,
#main-content:fullscreen .tiptap-history-progress-toast,
#main-content:-webkit-full-screen .tiptap-history-progress-toast,
:fullscreen .tiptap-history-progress-toast,
:-webkit-full-screen .tiptap-history-progress-toast {
    z-index: 2147483647 !important;
}

/* Animation spin pour icône sauvegarde */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}


/* ============================================================================
   Dark Mode (thème sombre)
   ============================================================================ */

html[data-theme="dark"] .tiptap-toolbar-container {
    background: #1e293b;
    border-bottom-color: #334155;
    border-top-color: #334155;
}

html[data-theme="dark"] .tiptap-toolbar-group {
    border-right-color: #334155;
}

html[data-theme="dark"] .tiptap-tb-btn {
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-tb-btn:hover {
    background: rgba(242, 209, 35, 0.15);
    color: #f1f5f9;
}

html[data-theme="dark"] .tiptap-tb-btn.active {
    background: rgba(242, 209, 35, 0.25);
    color: #f1f5f9;
}

/* Highlight Color Picker Dark Mode */
html[data-theme="dark"] .tiptap-highlight-picker {
    background: #1e293b;
    border-color: #334155;
}

html[data-theme="dark"] .tiptap-highlight-picker-arrow {
    border-bottom-color: #1e293b;
}

html[data-theme="dark"] .tiptap-highlight-remove {
    background: #334155;
    color: #94a3b8;
}

html[data-theme="dark"] .tiptap-highlight-remove:hover {
    background: #7f1d1d;
    color: #fca5a5;
}

/* Dark mode - Heading Dropdown */
html[data-theme="dark"] .tiptap-heading-trigger {
    background: #0f172a;
    color: #e5e7eb;
    border-color: #334155;
}

html[data-theme="dark"] .tiptap-heading-trigger:hover {
    background: rgba(242, 209, 35, 0.15);
    border-color: #f2d123;
}

html[data-theme="dark"] .tiptap-heading-menu {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .tiptap-heading-option {
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-heading-option:hover {
    background: rgba(242, 209, 35, 0.2);
}

html[data-theme="dark"] .tiptap-heading-option.active {
    background: rgba(242, 209, 35, 0.3);
}

/* Zkriva theme - Heading Dropdown */
html[data-theme="zkriva"] .tiptap-heading-trigger {
    background: #faf8f5;
    color: #44403c;
    border-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-heading-trigger:hover {
    background: rgba(210, 180, 145, 0.1);
    border-color: #d2b491;
}

html[data-theme="zkriva"] .tiptap-heading-menu {
    background: #fffffe;
    border-color: #e7e5e4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

html[data-theme="zkriva"] .tiptap-heading-option {
    color: #44403c;
}

html[data-theme="zkriva"] .tiptap-heading-option:hover {
    background: rgba(210, 180, 145, 0.12);
}

html[data-theme="zkriva"] .tiptap-heading-option.active {
    background: rgba(210, 180, 145, 0.2);
}

/* Zkriva theme - More Dropdown (Export/Import) */
html[data-theme="zkriva"] .tiptap-more-menu {
    background: #fffffe;
    border-color: #e7e5e4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

html[data-theme="zkriva"] .tiptap-more-option {
    color: #44403c;
}

html[data-theme="zkriva"] .tiptap-more-option:hover {
    background: rgba(210, 180, 145, 0.12);
}

html[data-theme="dark"] .tiptap-toolbar-stats {
    color: #9ca3af;
}

html[data-theme="dark"] .tiptap-toolbar-stats .sep {
    color: #475569;
}

html[data-theme="dark"] .tiptap-editor-wrapper,
html[data-theme="dark"] .tiptap-editor-area {
    background: #2d2d2d;
}

html[data-theme="dark"] .tiptap-editor-container {
    background: #1e293b;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
                0 2px 4px -2px rgba(0, 0, 0, 0.2),
                0 20px 50px -12px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] #tiptap-editor .ProseMirror {
    background: transparent;
    color: #e5e7eb;
}

html[data-theme="dark"] #tiptap-editor .ProseMirror h1,
html[data-theme="dark"] #tiptap-editor .ProseMirror h2,
html[data-theme="dark"] #tiptap-editor .ProseMirror h3 {
    color: #f1f5f9;
}

/* Footerbar Dark Mode */
html[data-theme="dark"] .tiptap-footerbar-sticky {
    background: #1e293b;
    border-top-color: #334155;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .tiptap-icon-btn {
    color: #9ca3af;
}

html[data-theme="dark"] .tiptap-icon-btn:hover,
html[data-theme="dark"] .tiptap-icon-btn:focus {
    background: rgba(242, 209, 35, 0.15);
    color: #f2d123;
}

html[data-theme="dark"] .tiptap-footerbar-sep {
    background: #475569;
}

html[data-theme="dark"] .tiptap-stat-dropdown {
    background: #1e293b;
    border-color: #334155;
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-stat-dropdown-title {
    color: #9ca3af;
}

html[data-theme="dark"] .tiptap-stat-dropdown table td:first-child {
    color: #9ca3af;
}

html[data-theme="dark"] .tiptap-stat-dropdown table td.text-end {
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-history-dropdown {
    background: #1e293b;
    border-color: #334155;
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-history-dropdown-title {
    color: #9ca3af;
}

html[data-theme="dark"] .tiptap-history-dropdown table td:first-child {
    color: #9ca3af;
}

html[data-theme="dark"] .tiptap-history-dropdown table td.text-end {
    color: #e5e7eb;
}

html[data-theme="dark"] #tiptapCharDropdownTrigger,
html[data-theme="dark"] .tiptap-stat-trigger {
    color: #9ca3af;
}

html[data-theme="dark"] .tiptap-stat-trigger:hover {
    background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .tiptap-stat-arrow {
    color: #64748b;
}

html[data-theme="dark"] #tiptapZoomPercent {
    color: #9ca3af;
}

/* Dark theme - Zoom slider */
html[data-theme="dark"] #tiptapZoomSlider {
    background: #475569;
}

html[data-theme="dark"] #tiptapZoomSlider::-webkit-slider-thumb {
    background: #f2d123;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] #tiptapZoomSlider::-moz-range-track {
    background: #475569;
}

html[data-theme="dark"] #tiptapZoomSlider::-moz-range-thumb {
    background: #f2d123;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}


/* Shortcuts Sidebar Dark Mode */
html[data-theme="dark"] .tiptap-shortcuts-sidebar,
.tiptap-dark-mode .tiptap-shortcuts-sidebar {
    background: #1e293b;
    border-left-color: #334155;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .tiptap-shortcuts-header,
.tiptap-dark-mode .tiptap-shortcuts-header {
    border-bottom-color: #334155;
    background: #1e293b;
}

html[data-theme="dark"] .tiptap-shortcuts-header h5,
.tiptap-dark-mode .tiptap-shortcuts-header h5 {
    color: #f1f5f9;
}

html[data-theme="dark"] .tiptap-shortcuts-scroll,
.tiptap-dark-mode .tiptap-shortcuts-scroll {
    scrollbar-color: #475569 #1e293b;
}

html[data-theme="dark"] .tiptap-shortcut-group-title,
.tiptap-dark-mode .tiptap-shortcut-group-title {
    color: #9ca3af;
    border-bottom-color: #334155;
}

html[data-theme="dark"] .tiptap-shortcut-item,
.tiptap-dark-mode .tiptap-shortcut-item {
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-shortcut-item:hover,
.tiptap-dark-mode .tiptap-shortcut-item:hover {
    background: #334155;
}

html[data-theme="dark"] .tiptap-shortcut-keys kbd,
.tiptap-dark-mode .tiptap-shortcut-keys kbd {
    background: #0f172a;
    border-color: #334155;
    color: #e5e7eb;
}

/* Fullscreen Dark Mode */
html[data-theme="dark"] #main-content:fullscreen,
html[data-theme="dark"] #main-content:-webkit-full-screen,
html[data-theme="dark"] #main-content:-ms-fullscreen {
    background: #1a1a1a;
}

html[data-theme="dark"] .tiptap-fullscreen {
    background: #1a1a1a;
}

/* ============================================================================
   Alternative Dark Mode selectors (using class for better compatibility)
   ============================================================================ */

.tiptap-dark-mode .tiptap-toolbar-container,
body[data-theme="dark"] .tiptap-toolbar-container {
    background: #1e293b;
    border-bottom-color: #334155;
    border-top-color: #334155;
}

.tiptap-dark-mode .tiptap-toolbar-group,
body[data-theme="dark"] .tiptap-toolbar-group {
    border-right-color: #334155;
}

.tiptap-dark-mode .tiptap-tb-btn,
body[data-theme="dark"] .tiptap-tb-btn {
    color: #e5e7eb;
}

.tiptap-dark-mode .tiptap-editor-wrapper,
.tiptap-dark-mode .tiptap-editor-area,
body[data-theme="dark"] .tiptap-editor-wrapper,
body[data-theme="dark"] .tiptap-editor-area {
    background: #2d2d2d;
}

.tiptap-dark-mode .tiptap-editor-container,
body[data-theme="dark"] .tiptap-editor-container {
    background: #1e293b;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
                0 2px 4px -2px rgba(0, 0, 0, 0.2),
                0 20px 50px -12px rgba(0, 0, 0, 0.5);
}

.tiptap-dark-mode #tiptap-editor .ProseMirror,
body[data-theme="dark"] #tiptap-editor .ProseMirror {
    background: transparent;
    color: #e5e7eb;
}

.tiptap-dark-mode #tiptap-editor .ProseMirror h1,
.tiptap-dark-mode #tiptap-editor .ProseMirror h2,
.tiptap-dark-mode #tiptap-editor .ProseMirror h3,
body[data-theme="dark"] #tiptap-editor .ProseMirror h1,
body[data-theme="dark"] #tiptap-editor .ProseMirror h2,
body[data-theme="dark"] #tiptap-editor .ProseMirror h3 {
    color: #f1f5f9;
}

.tiptap-dark-mode .tiptap-footerbar-sticky,
body[data-theme="dark"] .tiptap-footerbar-sticky {
    background: #1e293b;
    border-top-color: #334155;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
}

.tiptap-dark-mode .tiptap-icon-btn,
body[data-theme="dark"] .tiptap-icon-btn {
    color: #9ca3af;
}

.tiptap-dark-mode .tiptap-footerbar-sep,
body[data-theme="dark"] .tiptap-footerbar-sep {
    background: #475569;
}

.tiptap-dark-mode .tiptap-stat-dropdown,
body[data-theme="dark"] .tiptap-stat-dropdown {
    background: #1e293b;
    border-color: #334155;
    color: #e5e7eb;
}

.tiptap-dark-mode .tiptap-stat-trigger,
body[data-theme="dark"] .tiptap-stat-trigger {
    color: #9ca3af;
}

.tiptap-dark-mode .tiptap-repetition-sidebar,
body[data-theme="dark"] .tiptap-repetition-sidebar {
    background: #1e293b;
    border-left-color: #334155;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   Loading State
   ============================================================================ */

#tiptap-editor:empty::before {
    content: "Chargement de l'éditeur...";
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(1122px - 6rem);
    color: #6b7280;
    font-size: 0.95rem;
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 768px) {
    .tiptap-toolbar {
        padding: 0.35rem 0.5rem;
        gap: 0.25rem;
    }

    .tiptap-toolbar-group {
        padding-right: 0.15rem;
        margin-right: 0.15rem;
    }

    .tiptap-tb-btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.85rem;
    }

    .tiptap-toolbar-stats {
        display: none;
    }

    .tiptap-editor-area {
        padding: 1rem 0.5rem;
    }

    .tiptap-editor-container {
        padding: 1.5rem;
        border-radius: 6px;
    }

    .tiptap-repetition-sidebar.open {
        width: 280px;
        min-width: 280px;
    }

    .tiptap-search-sidebar.open {
        width: 280px;
        min-width: 280px;
    }

    .tiptap-stats-sidebar.open {
        width: 280px;
        min-width: 280px;
    }

    .tiptap-shortcuts-sidebar.open {
        width: 280px;
        min-width: 280px;
    }
}

@media (max-width: 768px) {
    /* Fix hauteur sur mobile - utiliser -webkit-fill-available pour éviter le bug 100vh */
    .zkriva-editor-page #main-content,
    #main-content:has(.tiptap-editor-wrapper) {
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px); /* Dynamic viewport height - meilleur support mobile */
        min-height: 0;
    }

    .tiptap-editor-area {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 160px !important; /* Espace pour la toolbar mobile */
    }

    /* Conteneur éditeur - hauteur automatique */
    .tiptap-editor-container {
        min-height: auto;
        height: auto;
    }

    #tiptap-editor,
    #tiptap-editor .ProseMirror {
        min-height: 300px;
        height: auto !important;
    }

    /* Mode plein écran sur mobile - s'assurer que le scroll fonctionne */
    .tiptap-fullscreen .tiptap-editor-wrapper {
        overflow: hidden !important;
    }

    .tiptap-fullscreen .tiptap-editor-area {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding-bottom: 160px !important;
    }
}

@media (max-width: 576px) {
    .tiptap-toolbar-group:nth-child(n+4) {
        display: none;
    }

    .tiptap-editor-area {
        padding: 0.75rem 0.25rem;
        padding-bottom: 160px !important; /* Espace pour la toolbar mobile */
    }

    /* Sidebars en overlay sur mobile */
    .tiptap-repetition-sidebar,
    .tiptap-search-sidebar,
    .tiptap-stats-sidebar,
    .tiptap-shortcuts-sidebar {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        z-index: 100;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    }

    .tiptap-repetition-sidebar.open,
    .tiptap-search-sidebar.open,
    .tiptap-stats-sidebar.open,
    .tiptap-shortcuts-sidebar.open {
        width: 100%;
        max-width: 300px;
        min-width: 0;
    }
}

/* ============================================================================
   Notes Sidebar (même style que repetition et search sidebars)
   ============================================================================ */

.tiptap-notes-sidebar {
    width: 0;
    min-width: 0;
    background: #fff;
    border-left: 1px solid #ececec;
    overflow: hidden;
    transition: width 0.3s ease, min-width 0.3s ease;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.08);
    z-index: 110;
}

.tiptap-notes-sidebar.open {
    width: 320px;
    min-width: 320px;
}

.tiptap-notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #ececec;
    background: #fff;
    flex-shrink: 0;
}

.tiptap-notes-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.tiptap-notes-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    position: relative;
}

.tiptap-notes-body {
    padding: 1rem;
    padding-bottom: 4rem; /* Space for form */
}

.tiptap-notes-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid #ececec;
    background: #fafafa;
    flex-shrink: 0;
}

.tiptap-notes-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #9ca3af;
}

.tiptap-notes-empty i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.tiptap-notes-empty p {
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.5;
}

.tiptap-note-item {
    position: relative;
    padding: 0.75rem 1rem;
    padding-right: 2.5rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.tiptap-note-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.15);
}

.tiptap-note-item.active {
    border-color: rgba(242, 209, 35, 0.6);
    box-shadow: 0 0 0 2px rgba(242, 209, 35, 0.2);
}

.tiptap-note-item.pinned {
    border-left: 3px solid #f2d123;
}

.tiptap-note-icon {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1rem;
    opacity: 0.4;
    color: #1f2937;
}

.tiptap-note-pin {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    font-size: 0.7rem;
    color: #d4a800;
}

.tiptap-note-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: #1f2937;
    margin-bottom: 0.35rem;
    line-height: 1.3;
}

.tiptap-note-preview {
    font-size: 0.75rem;
    color: #4b5563;
    line-height: 1.4;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Drag hint (grip icon) */
.tiptap-note-drag-hint {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    opacity: 0;
    color: #9ca3af;
    cursor: grab;
    transition: opacity 0.15s;
}

.tiptap-note-item:hover .tiptap-note-drag-hint {
    opacity: 0.5;
}

.tiptap-note-item {
    padding-left: 1.5rem;
    cursor: grab;
}

.tiptap-note-item:active {
    cursor: grabbing;
}

.tiptap-note-item.dragging {
    opacity: 0.5;
    transform: scale(0.98);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Inline Note Form */
.tiptap-note-form {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    animation: noteFormSlideDown 0.25s ease-out;
}

@keyframes noteFormSlideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }
}

.tiptap-note-form-card {
    background: #fffbe9;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.tiptap-note-form-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
    padding: 0;
    margin-bottom: 0.5rem;
    outline: none;
}

.tiptap-note-form-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.tiptap-note-form-textarea {
    width: 100%;
    border: none;
    background: rgba(0, 0, 0, 0.08);
    font-size: 0.8rem;
    color: #374151;
    padding: 8px;
    resize: none;
    outline: none;
    line-height: 1.5;
    min-height: 60px;
    border-radius: 6px;
}

.tiptap-note-form-textarea::placeholder {
    color: #9ca3af;
}

.tiptap-note-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.tiptap-note-form-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 1rem;
}

.tiptap-note-form-btn.cancel {
    background: rgba(0, 0, 0, 0.05);
    color: #6b7280;
}

.tiptap-note-form-btn.cancel:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #374151;
}

.tiptap-note-form-btn.save {
    background: #f2d123;
    color: #1f2937;
}

.tiptap-note-form-btn.save:hover {
    background: #e5c41f;
}

.tiptap-note-form-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dark mode form */
html[data-theme="dark"] .tiptap-note-form,
.tiptap-dark-mode .tiptap-note-form {
    background: transparent;
}

html[data-theme="dark"] .tiptap-note-form-card,
.tiptap-dark-mode .tiptap-note-form-card {
    background: #3d3520;
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .tiptap-note-form-input,
.tiptap-dark-mode .tiptap-note-form-input {
    color: #f1f5f9;
}

html[data-theme="dark"] .tiptap-note-form-textarea,
.tiptap-dark-mode .tiptap-note-form-textarea {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.10);
}

html[data-theme="dark"] .tiptap-note-form-input::placeholder,
html[data-theme="dark"] .tiptap-note-form-textarea::placeholder,
.tiptap-dark-mode .tiptap-note-form-input::placeholder,
.tiptap-dark-mode .tiptap-note-form-textarea::placeholder {
    color: #64748b;
}

html[data-theme="zkriva"] .tiptap-note-form-textarea,
body[data-theme="zkriva"] .tiptap-note-form-textarea {
    background: rgba(210, 180, 145, 0.10);
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-note-form-input,
body[data-theme="zkriva"] .tiptap-note-form-input {
    color: #1c1917;
}

/* Point indicateur notes (remplace le badge) */
.tiptap-notes-indicator {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #f2d123;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(242, 209, 35, 0.5);
}

/* Old badge style - kept for compatibility but hidden */
.tiptap-notes-badge {
    display: none;
}

/* Dark theme - Notes indicator */
html[data-theme="dark"] .tiptap-notes-indicator,
body[data-theme="dark"] .tiptap-notes-indicator {
    background: #f2d123;
    box-shadow: 0 0 4px rgba(242, 209, 35, 0.6);
}

/* Zkriva theme - Notes indicator */
html[data-theme="zkriva"] .tiptap-notes-indicator,
body[data-theme="zkriva"] .tiptap-notes-indicator {
    background: #d2b491;
    box-shadow: 0 0 4px rgba(210, 180, 145, 0.5);
}

/* Dark mode notes sidebar */
html[data-theme="dark"] .tiptap-notes-sidebar,
.tiptap-dark-mode .tiptap-notes-sidebar {
    background: #1e293b;
    border-left-color: #334155;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .tiptap-notes-header,
.tiptap-dark-mode .tiptap-notes-header {
    border-bottom-color: #334155;
    background: #1e293b;
}

html[data-theme="dark"] .tiptap-notes-header h5,
.tiptap-dark-mode .tiptap-notes-header h5 {
    color: #f1f5f9;
}

html[data-theme="dark"] .tiptap-notes-footer,
.tiptap-dark-mode .tiptap-notes-footer {
    background: #0f172a;
    border-top-color: #334155;
}

html[data-theme="dark"] .tiptap-note-item,
.tiptap-dark-mode .tiptap-note-item {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .tiptap-note-item:hover,
.tiptap-dark-mode .tiptap-note-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .tiptap-note-title,
.tiptap-dark-mode .tiptap-note-title {
    color: #1f2937;
}

html[data-theme="dark"] .tiptap-note-preview,
.tiptap-dark-mode .tiptap-note-preview {
    color: #374151;
}

html[data-theme="dark"] .tiptap-note-icon,
.tiptap-dark-mode .tiptap-note-icon {
    color: #1f2937;
}

html[data-theme="dark"] .tiptap-notes-empty,
.tiptap-dark-mode .tiptap-notes-empty {
    color: #64748b;
}

/* Zkriva theme - Notes Sidebar */
html[data-theme="zkriva"] .tiptap-notes-sidebar,
body[data-theme="zkriva"] .tiptap-notes-sidebar {
    background: #fffffe;
    border-left-color: #e7e5e4;
    box-shadow: -4px 0 8px rgba(28, 25, 23, 0.08);
}

html[data-theme="zkriva"] .tiptap-notes-header,
body[data-theme="zkriva"] .tiptap-notes-header {
    background: #fafaf9;
    border-bottom-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-notes-header h5,
body[data-theme="zkriva"] .tiptap-notes-header h5 {
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-notes-footer,
body[data-theme="zkriva"] .tiptap-notes-footer {
    background: #f5f3ef;
    border-top-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-note-item,
body[data-theme="zkriva"] .tiptap-note-item {
    border-color: #e7e5e4;
    background: #fafaf9;
}

html[data-theme="zkriva"] .tiptap-note-item:hover,
body[data-theme="zkriva"] .tiptap-note-item:hover {
    border-color: #d6d3d1;
    background: #f5f5f4;
    box-shadow: 0 2px 6px rgba(28, 25, 23, 0.1);
}

html[data-theme="zkriva"] .tiptap-note-title,
body[data-theme="zkriva"] .tiptap-note-title {
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-note-preview,
body[data-theme="zkriva"] .tiptap-note-preview {
    color: #57534e;
}

html[data-theme="zkriva"] .tiptap-note-icon,
body[data-theme="zkriva"] .tiptap-note-icon {
    color: #d2b491;
}

html[data-theme="zkriva"] .tiptap-notes-empty,
body[data-theme="zkriva"] .tiptap-notes-empty {
    color: #78716c;
}

/* ============================================================================
   Print Styles
   ============================================================================ */

/* ============================================================================
   Comments Sidebar - Système de commentaires collaboratifs
   ============================================================================ */

.tiptap-comments-sidebar {
    width: 0;
    min-width: 0;
    background: #fff;
    border-left: 1px solid #ececec;
    overflow: hidden;
    transition: width 0.3s ease, min-width 0.3s ease;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.08);
    z-index: 110;
}

.tiptap-comments-sidebar.open {
    width: 320px;
    min-width: 320px;
}

.tiptap-comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #ececec;
    background: #fff;
    flex-shrink: 0;
}

.tiptap-comments-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

/* Filtres commentaires - Switch Toggle Slide */
.tiptap-comments-filters {
    display: flex;
    position: relative;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #ececec;
    flex-shrink: 0;
    background: #fafafa;
}

.tiptap-comments-filters-inner {
    display: flex;
    position: relative;
    background: #e5e7eb;
    border-radius: 8px;
    padding: 3px;
    width: 100%;
}

.tiptap-comments-filters-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    height: calc(100% - 6px);
    width: calc(33.333% - 2px);
    background: #1f2937;
    border-radius: 6px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    transform: translateX(0);
}

.tiptap-comment-filter {
    flex: 1;
    padding: 0.45rem 0.5rem;
    border: none;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 2;
    position: relative;
    text-align: center;
}

.tiptap-comment-filter:hover {
    color: #374151;
}

.tiptap-comment-filter.active {
    color: #fff;
    background: transparent;
}

/* Zone scrollable */
.tiptap-comments-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.tiptap-comments-body {
    padding: 0.75rem;
}

.tiptap-comments-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #9ca3af;
}

.tiptap-comments-empty i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
    opacity: 0.5;
}

.tiptap-comments-empty p {
    font-size: 0.9rem;
    margin: 0 0 0.25rem;
    line-height: 1.5;
}

.tiptap-comments-empty small {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Comment Item (Thread parent) */
.tiptap-comment-thread {
    margin-bottom: 1rem;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    overflow: visible;
    transition: all 0.2s;
    position: relative;
}

.tiptap-comment-thread:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tiptap-comment-thread.resolved {
    opacity: 0.7;
    background: #f9fafb;
}

.tiptap-comment-thread.resolved:hover {
    opacity: 1;
}

/* Selection preview (text that was commented on) */
.tiptap-comment-selection {
    padding: 0.6rem 0.75rem;
    background: #fffbeb;
    border-bottom: 1px solid #fef08a;
    font-size: 0.8rem;
    color: #92400e;
    font-style: italic;
    cursor: pointer;
    transition: background 0.15s;
}

.tiptap-comment-selection:hover {
    background: #fef3c7;
}

.tiptap-comment-selection::before {
    content: '"';
}

.tiptap-comment-selection::after {
    content: '"';
}

/* Comment item */
.tiptap-comment-item {
    padding: 0.75rem;
}

.tiptap-comment-item.is-reply {
    background: transparent;
    border-top: none;
    padding: 0.75rem;
    padding-left: 0;
    margin-bottom: 0.5rem;
}

.tiptap-comment-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.tiptap-comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

.tiptap-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tiptap-comment-meta {
    flex: 1;
    min-width: 0;
}

.tiptap-comment-author {
    font-weight: 600;
    font-size: 0.85rem;
    color: #1f2937;
    display: block;
    line-height: 1.2;
}

.tiptap-comment-date {
    font-size: 0.7rem;
    color: #9ca3af;
}

.tiptap-comment-status {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tiptap-comment-status.open {
    background: #dbeafe;
    color: #1e40af;
}

.tiptap-comment-status.resolved {
    background: #d4efe5;
    color: #004a38;
}

.tiptap-comment-status.accepted {
    background: #d1fae5;
    color: #065f46;
}

.tiptap-comment-status.rejected {
    background: #fee2e2;
    color: #991b1b;
}

/* Comment text */
.tiptap-comment-text {
    font-size: 0.85rem;
    color: #374151;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    word-wrap: break-word;
}

/* Comment actions */
.tiptap-comment-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f0f0f0;
}

.tiptap-comment-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    background: transparent;
    font-size: 0.75rem;
    color: #6b7280;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.tiptap-comment-action:hover {
    background: #f3f4f6;
    color: #374151;
}

.tiptap-comment-action.liked {
    color: #ef4444;
}

.tiptap-comment-action.liked:hover {
    background: #fee2e2;
}

.tiptap-comment-action i {
    font-size: 0.85rem;
}

.tiptap-comment-action-sep {
    flex: 1;
}

/* Dropdown menu pour actions supplémentaires */
.tiptap-comment-dropdown {
    position: relative;
}

.tiptap-comment-dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 150px;
    z-index: 1000;
    display: none;
}

.tiptap-comment-dropdown.open .tiptap-comment-dropdown-menu {
    display: block;
    animation: dropdownFadeIn 0.15s ease-out;
}

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

/* Dropdown positionné en haut (quand pas assez d'espace en bas) */
.tiptap-comment-dropdown.dropdown-top .tiptap-comment-dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 4px;
}

.tiptap-comment-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s;
}

.tiptap-comment-dropdown-item:first-child {
    border-radius: 7px 7px 0 0;
}

.tiptap-comment-dropdown-item:last-child {
    border-radius: 0 0 7px 7px;
}

.tiptap-comment-dropdown-item:hover {
    background: #f3f4f6;
}

.tiptap-comment-dropdown-item.danger {
    color: #dc2626;
}

.tiptap-comment-dropdown-item.danger:hover {
    background: #fee2e2;
}

/* Replies section */
.tiptap-comment-replies {
    border-top: none;
    margin-top: 0.5rem;
}

.tiptap-comment-replies-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    font-size: 0.75rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    width: 100%;
    text-align: left;
}

.tiptap-comment-replies-toggle:hover {
    background: #f9fafb;
    color: #374151;
}

.tiptap-comment-replies-toggle i {
    transition: transform 0.2s;
}

.tiptap-comment-replies-toggle.expanded i {
    transform: rotate(90deg);
}

.tiptap-comment-replies-list {
    display: none;
    position: relative;
    margin-left: 2rem;
    padding-left: 1rem;
    border-left: 2px solid #e5e7eb;
}

.tiptap-comment-replies-list.show {
    display: block;
}

/* Reply input */
.tiptap-comment-reply-form {
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.tiptap-comment-reply-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.8rem;
    resize: none;
    outline: none;
    transition: border-color 0.15s;
}

.tiptap-comment-reply-input:focus {
    border-color: #6366f1;
}

.tiptap-comment-reply-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Footer avec input */
.tiptap-comments-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid #ececec;
    background: #fafafa;
    flex-shrink: 0;
}

.tiptap-comment-input-wrapper {
    margin-bottom: 0.5rem;
}

.tiptap-comment-selection-preview {
    padding: 0.5rem;
    background: #fffbeb;
    border: 1px solid #fef08a;
    border-radius: 6px 6px 0 0;
    font-size: 0.75rem;
    color: #92400e;
    font-style: italic;
    max-height: 60px;
    overflow-y: auto;
}

.tiptap-comment-selection-preview:empty {
    display: none;
}

.tiptap-comment-selection-preview:not(:empty) + .tiptap-comment-textarea {
    border-top: none;
    border-radius: 0 0 6px 6px;
}

.tiptap-comment-textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.85rem;
    resize: none;
    outline: none;
    transition: border-color 0.15s;
    min-height: 60px;
}

.tiptap-comment-textarea:focus {
    border-color: #6366f1;
}

.tiptap-comment-input-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Point indicateur commentaires (remplace le badge) */
.tiptap-comments-indicator {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #f2d123;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(242, 209, 35, 0.5);
}

/* Old badge style - kept for compatibility but hidden */
.tiptap-comments-badge {
    display: none;
}

/* Dark theme - Comments indicator */
html[data-theme="dark"] .tiptap-comments-indicator,
body[data-theme="dark"] .tiptap-comments-indicator {
    background: #f2d123;
    box-shadow: 0 0 4px rgba(242, 209, 35, 0.6);
}

/* Zkriva theme - Comments indicator */
html[data-theme="zkriva"] .tiptap-comments-indicator,
body[data-theme="zkriva"] .tiptap-comments-indicator {
    background: #d2b491;
    box-shadow: 0 0 4px rgba(210, 180, 145, 0.5);
}

/* Dark mode comments sidebar */
html[data-theme="dark"] .tiptap-comments-sidebar,
.tiptap-dark-mode .tiptap-comments-sidebar {
    background: #1e293b;
    border-left-color: #334155;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .tiptap-comments-header,
.tiptap-dark-mode .tiptap-comments-header {
    border-bottom-color: #334155;
    background: #1e293b;
}

html[data-theme="dark"] .tiptap-comments-header h5,
.tiptap-dark-mode .tiptap-comments-header h5 {
    color: #f1f5f9;
}

html[data-theme="dark"] .tiptap-comments-filters,
.tiptap-dark-mode .tiptap-comments-filters {
    background: #0f172a;
    border-bottom-color: #334155;
}

html[data-theme="dark"] .tiptap-comments-filters-inner,
.tiptap-dark-mode .tiptap-comments-filters-inner {
    background: #1e293b;
}

html[data-theme="dark"] .tiptap-comments-filters-slider,
.tiptap-dark-mode .tiptap-comments-filters-slider {
    background: #f2d123;
}

html[data-theme="dark"] .tiptap-comment-filter,
.tiptap-dark-mode .tiptap-comment-filter {
    color: #94a3b8;
}

html[data-theme="dark"] .tiptap-comment-filter:hover,
.tiptap-dark-mode .tiptap-comment-filter:hover {
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-comment-filter.active,
.tiptap-dark-mode .tiptap-comment-filter.active {
    color: #1f2937;
    background: transparent;
}

/* Zkriva theme - Comments Sidebar */
html[data-theme="zkriva"] .tiptap-comments-sidebar,
body[data-theme="zkriva"] .tiptap-comments-sidebar {
    background: #fffffe;
    border-left-color: #e7e5e4;
    box-shadow: -4px 0 8px rgba(28, 25, 23, 0.08);
}

html[data-theme="zkriva"] .tiptap-comments-header,
body[data-theme="zkriva"] .tiptap-comments-header {
    background: #fafaf9;
    border-bottom-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-comments-header h5,
body[data-theme="zkriva"] .tiptap-comments-header h5 {
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-comment-item,
body[data-theme="zkriva"] .tiptap-comment-item {
    border-color: #e7e5e4;
    background: #fafaf9;
}

html[data-theme="zkriva"] .tiptap-comment-item:hover,
body[data-theme="zkriva"] .tiptap-comment-item:hover {
    border-color: #d6d3d1;
    background: #f5f5f4;
}

html[data-theme="zkriva"] .tiptap-comment-author,
body[data-theme="zkriva"] .tiptap-comment-author {
    color: #1c1917;
    font-weight: 600;
}

html[data-theme="zkriva"] .tiptap-comment-text,
body[data-theme="zkriva"] .tiptap-comment-text {
    color: #57534e;
}

html[data-theme="zkriva"] .tiptap-comment-date,
body[data-theme="zkriva"] .tiptap-comment-date {
    color: #78716c;
}

html[data-theme="zkriva"] .tiptap-comments-empty,
body[data-theme="zkriva"] .tiptap-comments-empty {
    color: #78716c;
}

html[data-theme="zkriva"] .tiptap-comments-filters {
    background: #faf9f7;
    border-bottom-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-comments-filters-inner {
    background: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-comments-filters-slider {
    background: #d2b491;
}

html[data-theme="zkriva"] .tiptap-comment-filter {
    color: #78716c;
}

html[data-theme="zkriva"] .tiptap-comment-filter:hover {
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-comment-filter.active {
    color: #fff;
    background: transparent;
}

html[data-theme="dark"] .tiptap-comment-thread,
.tiptap-dark-mode .tiptap-comment-thread {
    background: #0f172a;
    border-color: #334155;
}

html[data-theme="dark"] .tiptap-comment-thread:hover,
.tiptap-dark-mode .tiptap-comment-thread:hover {
    border-color: #475569;
}

html[data-theme="dark"] .tiptap-comment-thread.resolved,
.tiptap-dark-mode .tiptap-comment-thread.resolved {
    background: #1e293b;
}

html[data-theme="dark"] .tiptap-comment-selection,
.tiptap-dark-mode .tiptap-comment-selection {
    background: #3d3520;
    border-bottom-color: #f2d123;
    color: #fbbf24;
}

html[data-theme="dark"] .tiptap-comment-selection:hover,
.tiptap-dark-mode .tiptap-comment-selection:hover {
    background: #4d4528;
}

html[data-theme="dark"] .tiptap-comment-item.is-reply,
.tiptap-dark-mode .tiptap-comment-item.is-reply {
    background: transparent;
    border-top: none;
}

html[data-theme="dark"] .tiptap-comment-author,
.tiptap-dark-mode .tiptap-comment-author {
    color: #f1f5f9;
}

html[data-theme="dark"] .tiptap-comment-date,
.tiptap-dark-mode .tiptap-comment-date {
    color: #64748b;
}

html[data-theme="dark"] .tiptap-comment-text,
.tiptap-dark-mode .tiptap-comment-text {
    color: #e2e8f0;
}

html[data-theme="dark"] .tiptap-comment-actions,
.tiptap-dark-mode .tiptap-comment-actions {
    border-top-color: #334155;
}

html[data-theme="dark"] .tiptap-comment-action,
.tiptap-dark-mode .tiptap-comment-action {
    color: #94a3b8;
}

html[data-theme="dark"] .tiptap-comment-action:hover,
.tiptap-dark-mode .tiptap-comment-action:hover {
    background: #334155;
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-comment-dropdown-menu,
.tiptap-dark-mode .tiptap-comment-dropdown-menu {
    background: #1e293b;
    border-color: #334155;
}

html[data-theme="dark"] .tiptap-comment-dropdown-item,
.tiptap-dark-mode .tiptap-comment-dropdown-item {
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-comment-dropdown-item:hover,
.tiptap-dark-mode .tiptap-comment-dropdown-item:hover {
    background: #334155;
}

html[data-theme="dark"] .tiptap-comment-replies,
.tiptap-dark-mode .tiptap-comment-replies {
    border-top: none;
}

html[data-theme="dark"] .tiptap-comment-replies-list,
.tiptap-dark-mode .tiptap-comment-replies-list {
    border-left-color: #334155;
}

html[data-theme="dark"] .tiptap-comment-replies-toggle,
.tiptap-dark-mode .tiptap-comment-replies-toggle {
    background: transparent;
    color: #94a3b8;
}

html[data-theme="dark"] .tiptap-comment-replies-toggle:hover,
.tiptap-dark-mode .tiptap-comment-replies-toggle:hover {
    background: #1e293b;
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-comment-reply-form,
.tiptap-dark-mode .tiptap-comment-reply-form {
    background: #1e293b;
    border-top-color: #334155;
}

html[data-theme="dark"] .tiptap-comment-reply-input,
.tiptap-dark-mode .tiptap-comment-reply-input {
    background: #0f172a;
    border-color: #334155;
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-comment-reply-input:focus,
.tiptap-dark-mode .tiptap-comment-reply-input:focus {
    border-color: #6366f1;
}

html[data-theme="dark"] .tiptap-comments-footer,
.tiptap-dark-mode .tiptap-comments-footer {
    background: #0f172a;
    border-top-color: #334155;
}

html[data-theme="dark"] .tiptap-comment-selection-preview,
.tiptap-dark-mode .tiptap-comment-selection-preview {
    background: #3d3520;
    border-color: #f2d123;
    color: #fbbf24;
}

html[data-theme="dark"] .tiptap-comment-textarea,
.tiptap-dark-mode .tiptap-comment-textarea {
    background: #1e293b;
    border-color: #334155;
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-comment-textarea:focus,
.tiptap-dark-mode .tiptap-comment-textarea:focus {
    border-color: #6366f1;
}

html[data-theme="dark"] .tiptap-comments-empty,
.tiptap-dark-mode .tiptap-comments-empty {
    color: #64748b;
}

/* Responsive */
@media (max-width: 768px) {
    .tiptap-comments-sidebar.open {
        width: 320px;
        min-width: 320px;
    }
}

@media (max-width: 576px) {
    .tiptap-comments-sidebar {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        z-index: 120;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    }

    .tiptap-comments-sidebar.open {
        width: 100%;
        max-width: 340px;
        min-width: 0;
    }
}

@media print {
    .tiptap-toolbar-container {
        display: none !important;
    }

    .tiptap-editor-wrapper {
        background: white !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .tiptap-editor-area {
        padding: 0 !important;
    }

    .tiptap-editor-container {
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 2cm !important;
    }

    .tiptap-repetition-sidebar,
    .tiptap-search-sidebar,
    .tiptap-stats-sidebar,
    .tiptap-notes-sidebar,
    .tiptap-comments-sidebar,
    .tiptap-shortcuts-sidebar,
    .tiptap-footerbar-sticky {
        display: none !important;
    }
}

/* ============================================================================
   COMMENT HIGHLIGHT MARKS - Texte commenté dans l'éditeur
   ============================================================================ */

/* Highlight de base pour texte commenté */
.tiptap-comment-highlight {
    background: rgba(255, 220, 100, 0.35);
    border-bottom: 2px solid rgba(255, 180, 50, 0.6);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    border-radius: 2px;
    padding: 1px 0;
}

.tiptap-comment-highlight:hover {
    background: rgba(255, 200, 60, 0.5);
    border-bottom-color: rgba(255, 160, 30, 0.8);
}

/* Statuts de commentaires */
.tiptap-comment-highlight[data-comment-status="resolved"] {
    background: rgba(0, 92, 69, 0.2);
    border-bottom-color: rgba(0, 92, 69, 0.5);
}

.tiptap-comment-highlight[data-comment-status="accepted"] {
    background: rgba(59, 130, 246, 0.2);
    border-bottom-color: rgba(59, 130, 246, 0.5);
}

.tiptap-comment-highlight[data-comment-status="rejected"] {
    background: rgba(239, 68, 68, 0.15);
    border-bottom-color: rgba(239, 68, 68, 0.4);
    text-decoration: line-through;
    text-decoration-color: rgba(239, 68, 68, 0.5);
}

/* Animation flash quand on scroll vers un commentaire */
.tiptap-comment-flash {
    animation: comment-flash 1.5s ease-out;
}

@keyframes comment-flash {
    0% {
        background: rgba(255, 220, 100, 0.8);
        box-shadow: 0 0 0 4px rgba(255, 180, 50, 0.4);
    }
    50% {
        background: rgba(255, 200, 60, 0.6);
        box-shadow: 0 0 0 2px rgba(255, 180, 50, 0.2);
    }
    100% {
        background: rgba(255, 220, 100, 0.35);
        box-shadow: none;
    }
}

/* Thread actif dans la sidebar */
.tiptap-comment-thread.active {
    background: rgba(255, 220, 100, 0.12);
    border-left: 3px solid #f2d123;
}

.tiptap-comment-item.active {
    background: rgba(255, 220, 100, 0.08);
}

/* Animation flash pour le sidebar */
.tiptap-comment-thread.flash,
.tiptap-comment-item.flash {
    animation: sidebar-comment-flash 1.5s ease-out;
}

@keyframes sidebar-comment-flash {
    0% {
        background: rgba(255, 220, 100, 0.4);
    }
    50% {
        background: rgba(255, 220, 100, 0.25);
    }
    100% {
        background: transparent;
    }
}

/* Citation du texte sélectionné dans le commentaire */
.tiptap-comment-selection {
    background: #f8f9fa;
    border-left: 3px solid #e9ecef;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 0 6px 6px 0;
    font-size: 0.8rem;
    color: #6b7280;
    font-style: italic;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.tiptap-comment-selection:hover {
    background: #f0f4f8;
    border-left-color: #f2d123;
}

.tiptap-comment-selection i {
    color: #9ca3af;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.tiptap-comment-selection span {
    flex: 1;
    word-break: break-word;
}

/* Dark mode */
html[data-theme="dark"] .tiptap-comment-highlight {
    background: rgba(255, 200, 80, 0.25);
    border-bottom-color: rgba(255, 180, 50, 0.5);
}

html[data-theme="dark"] .tiptap-comment-highlight:hover {
    background: rgba(255, 180, 60, 0.35);
}

html[data-theme="dark"] .tiptap-comment-highlight[data-comment-status="resolved"] {
    background: rgba(0, 92, 69, 0.15);
    border-bottom-color: rgba(0, 92, 69, 0.4);
}

html[data-theme="dark"] .tiptap-comment-highlight[data-comment-status="accepted"] {
    background: rgba(59, 130, 246, 0.15);
    border-bottom-color: rgba(59, 130, 246, 0.4);
}

html[data-theme="dark"] .tiptap-comment-highlight[data-comment-status="rejected"] {
    background: rgba(239, 68, 68, 0.1);
    border-bottom-color: rgba(239, 68, 68, 0.3);
}

html[data-theme="dark"] .tiptap-comment-thread.active {
    background: rgba(255, 200, 80, 0.1);
    border-left-color: #f2d123;
}

html[data-theme="dark"] .tiptap-comment-selection {
    background: #2a2a2a;
    border-left-color: #3a3a3a;
    color: #9ca3af;
}

html[data-theme="dark"] .tiptap-comment-selection:hover {
    background: #333;
    border-left-color: #f2d123;
}

@keyframes comment-flash-dark {
    0% {
        background: rgba(255, 200, 80, 0.5);
        box-shadow: 0 0 0 4px rgba(255, 180, 50, 0.3);
    }
    50% {
        background: rgba(255, 180, 60, 0.35);
        box-shadow: 0 0 0 2px rgba(255, 180, 50, 0.15);
    }
    100% {
        background: rgba(255, 200, 80, 0.25);
        box-shadow: none;
    }
}

html[data-theme="dark"] .tiptap-comment-flash {
    animation: comment-flash-dark 1.5s ease-out;
}

/* ============================================================================
   SIDEBAR STATISTIQUES D'ECRITURE
   ============================================================================ */

.tiptap-stats-sidebar {
    width: 0;
    min-width: 0;
    background: #fff;
    border-left: 1px solid #ececec;
    overflow: hidden;
    transition: width 0.3s ease, min-width 0.3s ease;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.08);
    z-index: 110;
}

.tiptap-stats-sidebar.open {
    width: 320px;
    min-width: 320px;
}

.tiptap-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}

.tiptap-stats-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

.tiptap-stats-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.tiptap-stats-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.tiptap-stats-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.tiptap-stats-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tiptap-stats-link {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
}

.tiptap-stats-link:hover {
    color: #374151;
}

/* Stats Grid */
.tiptap-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.tiptap-stat-mini {
    background: #f9fafb;
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
}

.tiptap-stat-mini-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}

.tiptap-stat-mini-label {
    font-size: 0.7rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* WPM Display */
.tiptap-wpm-display {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}

.tiptap-wpm-current,
.tiptap-wpm-avg {
    text-align: center;
}

.tiptap-wpm-current span,
.tiptap-wpm-avg span {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.tiptap-wpm-current span {
    color: #374151;
}

.tiptap-wpm-avg span {
    color: #6b7280;
}

.tiptap-wpm-current small,
.tiptap-wpm-avg small {
    font-size: 0.7rem;
    color: #9ca3af;
}

.tiptap-wpm-bar-container {
    padding: 0 0.5rem;
}

.tiptap-wpm-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

/* Mini Chart */
.tiptap-daily-chart {
    height: 80px;
}

.stats-mini-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    gap: 4px;
}

.stats-mini-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.stats-mini-bar {
    width: 100%;
    background: linear-gradient(to top, #6b7280, #9ca3af);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}

.stats-mini-bar.empty {
    background: #e5e7eb;
}

.stats-mini-label {
    font-size: 0.6rem;
    color: #9ca3af;
    margin-top: 4px;
}

/* Session History */
.tiptap-session-history {
    max-height: 200px;
    overflow-y: auto;
}

.stats-session-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.stats-session-item:last-child {
    border-bottom: none;
}

.stats-session-date {
    font-size: 0.7rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.stats-session-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: #374151;
}

.stats-session-stats span {
    display: flex;
    align-items: center;
}

.stats-session-stats i {
    color: #9ca3af;
}

/* Footer */
.tiptap-stats-footer {
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}

/* ============================================================================
   DARK MODE - Sidebar Stats
   ============================================================================ */

html[data-theme="dark"] .tiptap-stats-sidebar,
.tiptap-dark-mode .tiptap-stats-sidebar {
    background: #1e293b;
    border-left-color: #334155;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .tiptap-stats-header {
    background: #0f172a;
    border-color: #334155;
}

html[data-theme="dark"] .tiptap-stats-header h5 {
    color: #f1f5f9;
}

html[data-theme="dark"] .tiptap-stat-mini {
    background: #0f172a;
}

html[data-theme="dark"] .tiptap-stat-mini-value {
    color: #f1f5f9;
}

html[data-theme="dark"] .tiptap-stats-section {
    border-color: #334155;
}

html[data-theme="dark"] .tiptap-stats-section-title {
    color: #94a3b8;
}

html[data-theme="dark"] .stats-session-item {
    border-color: #334155;
}

html[data-theme="dark"] .stats-session-stats {
    color: #cbd5e1;
}

html[data-theme="dark"] .tiptap-stats-footer {
    background: #0f172a;
    border-color: #334155;
}

html[data-theme="dark"] .stats-mini-bar.empty {
    background: #334155;
}

html[data-theme="dark"] .tiptap-wpm-avg span {
    color: #94a3b8;
}

html[data-theme="dark"] .tiptap-wpm-current span {
    color: #e2e8f0;
}

html[data-theme="dark"] .stats-mini-bar {
    background: linear-gradient(to top, #64748b, #94a3b8);
}

html[data-theme="dark"] .tiptap-stats-link {
    color: #94a3b8;
}

html[data-theme="dark"] .tiptap-stats-link:hover {
    color: #cbd5e1;
}

/* ============================================================================
   ZKRIVA THEME - Sidebar Stats (warm amber/brown tones)
   ============================================================================ */

html[data-theme="zkriva"] .tiptap-stats-sidebar {
    background: #fffdf8;
    border-left-color: #e8dcc8;
}

html[data-theme="zkriva"] .tiptap-stats-header {
    background: #faf6ed;
    border-color: #e8dcc8;
}

html[data-theme="zkriva"] .tiptap-stats-header h5 {
    color: #44403c;
}

html[data-theme="zkriva"] .tiptap-stat-mini {
    background: #faf6ed;
}

html[data-theme="zkriva"] .tiptap-stat-mini-value {
    color: #44403c;
}

html[data-theme="zkriva"] .tiptap-stats-section {
    border-color: #e8dcc8;
}

html[data-theme="zkriva"] .tiptap-stats-section-title {
    color: #78716c;
}

html[data-theme="zkriva"] .tiptap-wpm-current span {
    color: #92400e;
}

html[data-theme="zkriva"] .tiptap-wpm-avg span {
    color: #78716c;
}

html[data-theme="zkriva"] .stats-mini-bar {
    background: linear-gradient(to top, #b45309, #d97706);
}

html[data-theme="zkriva"] .stats-mini-bar.empty {
    background: #e8dcc8;
}

html[data-theme="zkriva"] .tiptap-stats-link {
    color: #92400e;
}

html[data-theme="zkriva"] .tiptap-stats-link:hover {
    color: #78350f;
}

html[data-theme="zkriva"] .stats-session-item {
    border-color: #e8dcc8;
}

html[data-theme="zkriva"] .stats-session-stats {
    color: #57534e;
}

html[data-theme="zkriva"] .tiptap-stats-footer {
    background: #faf6ed;
    border-color: #e8dcc8;
}

/* ============================================================================
   LILIA THEME - Sidebar Stats (soft purple/pink tones)
   ============================================================================ */

html[data-theme="lilia"] .tiptap-stats-sidebar {
    background: #fef9fb;
    border-left-color: #f0d8e4;
}

html[data-theme="lilia"] .tiptap-stats-header {
    background: #fcf4f8;
    border-color: #f0d8e4;
}

html[data-theme="lilia"] .tiptap-stats-header h5 {
    color: #4a3728;
}

html[data-theme="lilia"] .tiptap-stat-mini {
    background: #fcf4f8;
}

html[data-theme="lilia"] .tiptap-stat-mini-value {
    color: #4a3728;
}

html[data-theme="lilia"] .tiptap-stats-section {
    border-color: #f0d8e4;
}

html[data-theme="lilia"] .tiptap-stats-section-title {
    color: #9d7a8c;
}

html[data-theme="lilia"] .tiptap-wpm-current span {
    color: #9d174d;
}

html[data-theme="lilia"] .tiptap-wpm-avg span {
    color: #9d7a8c;
}

html[data-theme="lilia"] .stats-mini-bar {
    background: linear-gradient(to top, #be185d, #ec4899);
}

html[data-theme="lilia"] .stats-mini-bar.empty {
    background: #f0d8e4;
}

html[data-theme="lilia"] .tiptap-stats-link {
    color: #9d174d;
}

html[data-theme="lilia"] .tiptap-stats-link:hover {
    color: #831843;
}

html[data-theme="lilia"] .stats-session-item {
    border-color: #f0d8e4;
}

html[data-theme="lilia"] .stats-session-stats {
    color: #6b4f5c;
}

html[data-theme="lilia"] .tiptap-stats-footer {
    background: #fcf4f8;
    border-color: #f0d8e4;
}

/* ============================================================================
   NATUR THEME - Sidebar Stats (green/earth tones)
   ============================================================================ */

html[data-theme="natur"] .tiptap-stats-sidebar {
    background: #f8fcf9;
    border-left-color: #d0e4d8;
}

html[data-theme="natur"] .tiptap-stats-header {
    background: #f0f7f2;
    border-color: #d0e4d8;
}

html[data-theme="natur"] .tiptap-stats-header h5 {
    color: #1c3829;
}

html[data-theme="natur"] .tiptap-stat-mini {
    background: #f0f7f2;
}

html[data-theme="natur"] .tiptap-stat-mini-value {
    color: #1c3829;
}

html[data-theme="natur"] .tiptap-stats-section {
    border-color: #d0e4d8;
}

html[data-theme="natur"] .tiptap-stats-section-title {
    color: #4d7c5b;
}

html[data-theme="natur"] .tiptap-wpm-current span {
    color: #166534;
}

html[data-theme="natur"] .tiptap-wpm-avg span {
    color: #4d7c5b;
}

html[data-theme="natur"] .stats-mini-bar {
    background: linear-gradient(to top, #15803d, #22c55e);
}

html[data-theme="natur"] .stats-mini-bar.empty {
    background: #d0e4d8;
}

html[data-theme="natur"] .tiptap-stats-link {
    color: #166534;
}

html[data-theme="natur"] .tiptap-stats-link:hover {
    color: #14532d;
}

html[data-theme="natur"] .stats-session-item {
    border-color: #d0e4d8;
}

html[data-theme="natur"] .stats-session-stats {
    color: #3d5a4c;
}

html[data-theme="natur"] .tiptap-stats-footer {
    background: #f0f7f2;
    border-color: #d0e4d8;
}


/* Export Word Advanced Options */
.export-options-btn {
    background: transparent;
    border: 1px solid #d1d5db;
    color: #6b7280;
    padding: 0.3rem 0.6rem;
    border-radius: 5px;
    transition: all 0.15s ease;
}
.export-options-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}
.export-options-btn .export-chevron {
    transition: transform 0.2s ease;
}

/* Panel des options avancées */
.export-advanced-options-panel {
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.export-option-group {
    padding: 0.25rem 0;
}
.export-option-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

/* Checkboxes noir et blanc style Zkriva */
.export-check {
    margin-bottom: 0.35rem;
}
.export-check .form-check-input {
    width: 0.95rem;
    height: 0.95rem;
    border: 1.5px solid #1f2937;
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
    margin-top: 0.15rem;
}
.export-check .form-check-input:checked {
    background-color: #1f2937;
    border-color: #1f2937;
}
.export-check .form-check-input:focus {
    border-color: #1f2937;
    box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.12);
}
.export-check .form-check-label {
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
}

/* Select inputs style Zkriva */
.export-select {
    font-size: 0.78rem;
    border: 1px solid #d1d5db;
    color: #374151;
    padding: 0.3rem 0.5rem;
}
.export-select:focus {
    border-color: #1f2937;
    box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.08);
}
.export-label {
    font-size: 0.7rem;
    color: #6b7280;
    margin-bottom: 0.2rem;
}

/* Animation */
#exportCoverOptions,
#exportHeaderOptions,
#exportFooterOptions {
    animation: fadeInExport 0.2s ease;
}
@keyframes fadeInExport {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Aperçu image de garde - Export modal
   ============================================ */
.export-cover-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.export-cover-preview {
    flex-shrink: 0;
}
.export-cover-options-col {
    flex: 1;
    display: flex;
    align-items: center;
}
.export-cover-options-col .export-cover-options-list {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.export-cover-image-wrapper {
    width: 120px;
    height: 180px;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.export-cover-image-wrapper:hover {
    border-color: #9ca3af;
}
.export-cover-image-wrapper.has-image {
    border-style: solid;
    border-color: #1f2937;
    cursor: default;
}
.export-cover-image-wrapper.has-image:hover {
    border-color: #1f2937;
}
.export-cover-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.export-cover-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #9ca3af;
    pointer-events: none;
}
.export-cover-placeholder i {
    font-size: 2rem;
}
.export-cover-placeholder span {
    font-size: 0.75rem;
}

/* Overlay pour les boutons hover */
.export-cover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: 6px;
}
.export-cover-image-wrapper:hover .export-cover-overlay {
    opacity: 1;
}
/* Bouton + pour ajouter une image */
.btn-cover-add {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-cover-add:hover {
    background: #fff;
    color: #1f2937;
    transform: scale(1.1);
}
/* Boutons modifier/supprimer */
.btn-cover-action {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
}
.btn-cover-edit {
    background: #fff;
    color: #1f2937;
}
.btn-cover-edit:hover {
    background: #f3f4f6;
    transform: scale(1.1);
}
.btn-cover-delete {
    background: #ef4444;
    color: #fff;
}
.btn-cover-delete:hover {
    background: #dc2626;
    transform: scale(1.1);
}
.export-cover-options-list {
    border-top: 1px solid #e5e7eb;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}
/* Source indication en bas de l'image avec dégradé - à l'intérieur du cadre */
.export-cover-source {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.2rem 0.4rem 0.35rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
    font-size: 0.6rem;
    color: #fff;
    text-align: center;
    pointer-events: none;
    z-index: 1;
}
.export-cover-source i {
    margin-right: 0.15rem;
    font-size: 0.55rem;
}

/* État désactivé quand checkbox non cochée */
.export-cover-preview.disabled {
    opacity: 0.45;
    pointer-events: none;
}
.export-cover-preview.disabled .export-cover-image-wrapper {
    cursor: not-allowed;
    border-color: #d1d5db;
}
.export-cover-preview.disabled .export-cover-image-wrapper:hover {
    border-color: #d1d5db;
}
.export-cover-preview.disabled .export-cover-overlay {
    display: none;
}
/* Options désactivées */
.export-cover-options-col.disabled {
    opacity: 0.45;
    pointer-events: none;
}
.export-cover-options-col.disabled .form-check-input {
    cursor: not-allowed;
}
.export-cover-options-col.disabled .form-check-label {
    cursor: not-allowed;
}

/* Dark mode */
html[data-theme="dark"] .export-options-btn {
    border-color: #4b5563;
    color: #9ca3af;
}
html[data-theme="dark"] .export-options-btn:hover {
    background: #374151;
    border-color: #6b7280;
    color: #e5e7eb;
}
html[data-theme="dark"] .export-advanced-options-panel {
    background: #1f2937;
    border-color: #374151;
}
html[data-theme="dark"] .export-option-title {
    color: #9ca3af;
}
html[data-theme="dark"] .export-check .form-check-input {
    border-color: #d1d5db;
    background-color: #374151;
}
html[data-theme="dark"] .export-check .form-check-input:checked {
    background-color: #e5e7eb;
    border-color: #e5e7eb;
}
html[data-theme="dark"] .export-check .form-check-label {
    color: #e5e7eb;
}
html[data-theme="dark"] .export-select {
    background-color: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}
html[data-theme="dark"] .export-label {
    color: #9ca3af;
}
/* Dark mode - Cover preview */
html[data-theme="dark"] .export-cover-image-wrapper {
    border-color: #4b5563;
    background: #374151;
}
html[data-theme="dark"] .export-cover-image-wrapper:hover {
    border-color: #6b7280;
}
html[data-theme="dark"] .export-cover-image-wrapper.has-image {
    border-color: #9ca3af;
}
html[data-theme="dark"] .export-cover-image-wrapper.has-image:hover {
    border-color: #9ca3af;
}
html[data-theme="dark"] .export-cover-placeholder {
    color: #6b7280;
}
html[data-theme="dark"] .export-cover-options-list {
    border-top-color: #374151;
}
html[data-theme="dark"] .btn-cover-edit {
    background: #e5e7eb;
    color: #1f2937;
}
html[data-theme="dark"] .btn-cover-edit:hover {
    background: #fff;
}
html[data-theme="dark"] .export-cover-preview.disabled .export-cover-image-wrapper {
    border-color: #4b5563;
}

/* ============================================================================
   Export Tabs (Standard / Par genre)
   ============================================================================ */

.export-tabs {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1rem;
}
.export-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #6b7280;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    margin-bottom: -1px;
    border-radius: 0;
    transition: color 0.2s, border-color 0.2s;
}
.export-tabs .nav-link:hover {
    color: #374151;
    border-bottom-color: #d1d5db;
}
.export-tabs .nav-link.active {
    color: #1f2937;
    border-bottom-color: #1f2937;
    background: transparent;
}
.export-tabs .nav-link i {
    font-size: 0.9rem;
}

/* Dark mode tabs */
html[data-theme="dark"] .export-tabs {
    border-bottom-color: #374151;
}
html[data-theme="dark"] .export-tabs .nav-link {
    color: #9ca3af;
}
html[data-theme="dark"] .export-tabs .nav-link:hover {
    color: #e5e7eb;
    border-bottom-color: #4b5563;
}
html[data-theme="dark"] .export-tabs .nav-link.active {
    color: #f3f4f6;
    border-bottom-color: #e5e7eb;
}

/* Tab content animation */
.tab-pane.fade {
    transition: opacity 0.15s ease;
}
.tab-pane.show {
    opacity: 1;
}

/* Genre template specific elements */
.template-genre-decoration {
    text-align: center;
    font-size: 6px;
    margin-bottom: 2px;
    color: #8B4513;
}
.template-genre-separator {
    text-align: center;
    font-size: 5px;
    color: #8B4513;
}

/* Additional width classes for template lines */
.template-line.w-40 { width: 40%; }
.template-line.w-45 { width: 45%; }
.template-line.w-50 { width: 50%; }
.template-line.w-55 { width: 55%; }
.template-line.w-60 { width: 60%; }
.template-line.w-65 { width: 65%; }
.template-line.w-70 { width: 70%; }

/* Academic template header */
.template-header-academic {
    display: flex;
    justify-content: space-between;
}
.template-header-line-left,
.template-header-line-right {
    width: 35%;
    height: 1px;
    background: #ccc;
}

/* ============================================================================
   ZKRIVA THEME SUPPORT (warm tones)
   ============================================================================ */

html[data-theme="zkriva"] .tiptap-toolbar-container,
body[data-theme="zkriva"] .tiptap-toolbar-container {
    background: #faf8f5;
    border-bottom-color: #e7e5e4;
    border-top-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-toolbar-group,
body[data-theme="zkriva"] .tiptap-toolbar-group {
    border-right-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-tb-btn,
body[data-theme="zkriva"] .tiptap-tb-btn {
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-tb-btn:hover,
body[data-theme="zkriva"] .tiptap-tb-btn:hover {
    background: #fef7ed;
}

html[data-theme="zkriva"] .tiptap-tb-btn.active,
body[data-theme="zkriva"] .tiptap-tb-btn.active {
    background: rgba(210, 180, 145, 0.15);
    color: #d2b491;
}

html[data-theme="zkriva"] .tiptap-editor-wrapper,
html[data-theme="zkriva"] .tiptap-editor-area,
body[data-theme="zkriva"] .tiptap-editor-wrapper,
body[data-theme="zkriva"] .tiptap-editor-area {
    background: #f5f3ef;
}

html[data-theme="zkriva"] .tiptap-editor-container,
body[data-theme="zkriva"] .tiptap-editor-container {
    background: #fffffe;
    box-shadow: 0 4px 6px -1px rgba(120, 113, 108, 0.1),
                0 2px 4px -2px rgba(120, 113, 108, 0.08),
                0 20px 50px -12px rgba(120, 113, 108, 0.15);
}

html[data-theme="zkriva"] #tiptap-editor .ProseMirror,
body[data-theme="zkriva"] #tiptap-editor .ProseMirror {
    color: #1c1917;
}

html[data-theme="zkriva"] #tiptap-editor .ProseMirror h1,
html[data-theme="zkriva"] #tiptap-editor .ProseMirror h2,
html[data-theme="zkriva"] #tiptap-editor .ProseMirror h3,
body[data-theme="zkriva"] #tiptap-editor .ProseMirror h1,
body[data-theme="zkriva"] #tiptap-editor .ProseMirror h2,
body[data-theme="zkriva"] #tiptap-editor .ProseMirror h3 {
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-footerbar-sticky,
body[data-theme="zkriva"] .tiptap-footerbar-sticky {
    background: #faf8f5;
    border-top-color: #e7e5e4;
    box-shadow: 0 -2px 8px rgba(120, 113, 108, 0.1);
}

html[data-theme="zkriva"] .tiptap-icon-btn,
body[data-theme="zkriva"] .tiptap-icon-btn {
    color: #78716c;
}

html[data-theme="zkriva"] .tiptap-icon-btn:hover,
body[data-theme="zkriva"] .tiptap-icon-btn:hover {
    background: #fef7ed;
    color: #d2b491;
}

html[data-theme="zkriva"] .tiptap-footerbar-sep,
body[data-theme="zkriva"] .tiptap-footerbar-sep {
    background: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-stat-dropdown,
body[data-theme="zkriva"] .tiptap-stat-dropdown {
    background: #fffffe;
    border-color: #e7e5e4;
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-history-dropdown {
    background: #fffffe;
    border-color: #e7e5e4;
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-history-dropdown-title {
    color: #78716c;
}

html[data-theme="zkriva"] .tiptap-history-dropdown table td:first-child {
    color: #78716c;
}

html[data-theme="zkriva"] .tiptap-history-dropdown table td.text-end {
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-stat-trigger,
body[data-theme="zkriva"] .tiptap-stat-trigger {
    color: #78716c;
}

/* Zkriva theme - Zoom slider */
html[data-theme="zkriva"] #tiptapZoomSlider,
body[data-theme="zkriva"] #tiptapZoomSlider {
    background: #e7e5e4;
}

html[data-theme="zkriva"] #tiptapZoomSlider::-webkit-slider-thumb,
body[data-theme="zkriva"] #tiptapZoomSlider::-webkit-slider-thumb {
    background: #d2b491;
    box-shadow: 0 1px 3px rgba(120, 113, 108, 0.3);
}

html[data-theme="zkriva"] #tiptapZoomSlider::-moz-range-track,
body[data-theme="zkriva"] #tiptapZoomSlider::-moz-range-track {
    background: #e7e5e4;
}

html[data-theme="zkriva"] #tiptapZoomSlider::-moz-range-thumb,
body[data-theme="zkriva"] #tiptapZoomSlider::-moz-range-thumb {
    background: #d2b491;
    box-shadow: 0 1px 3px rgba(120, 113, 108, 0.3);
}

html[data-theme="zkriva"] #tiptapZoomPercent,
body[data-theme="zkriva"] #tiptapZoomPercent {
    color: #78716c;
}


html[data-theme="zkriva"] .tiptap-repetition-sidebar,
body[data-theme="zkriva"] .tiptap-repetition-sidebar {
    background: #fffffe;
    border-left-color: #e7e5e4;
    box-shadow: -4px 0 8px rgba(120, 113, 108, 0.1);
}

html[data-theme="zkriva"] .tiptap-search-sidebar,
body[data-theme="zkriva"] .tiptap-search-sidebar {
    background: #fffffe;
    border-left-color: #e7e5e4;
    box-shadow: -4px 0 8px rgba(120, 113, 108, 0.1);
}

html[data-theme="zkriva"] .tiptap-search-sidebar-header,
body[data-theme="zkriva"] .tiptap-search-sidebar-header {
    border-bottom-color: #e7e5e4;
    background: #fffffe;
}

html[data-theme="zkriva"] .tiptap-search-sidebar-header h5,
body[data-theme="zkriva"] .tiptap-search-sidebar-header h5 {
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-search-sidebar-section,
body[data-theme="zkriva"] .tiptap-search-sidebar-section {
    border-bottom-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-search-label,
body[data-theme="zkriva"] .tiptap-search-label {
    color: #78716c;
}

html[data-theme="zkriva"] .tiptap-search-option,
body[data-theme="zkriva"] .tiptap-search-option {
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-search-option input[type="checkbox"],
body[data-theme="zkriva"] .tiptap-search-option input[type="checkbox"] {
    accent-color: #d2b491;
}

html[data-theme="zkriva"] .tiptap-search-nav-btn,
body[data-theme="zkriva"] .tiptap-search-nav-btn {
    background: #fef7ed;
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-search-nav-btn:hover,
body[data-theme="zkriva"] .tiptap-search-nav-btn:hover {
    background: #d2b491;
    color: #fff;
}

html[data-theme="zkriva"] .tiptap-search-summary,
body[data-theme="zkriva"] .tiptap-search-summary {
    background: rgba(210, 180, 145, 0.12);
    border-color: rgba(210, 180, 145, 0.3);
}

html[data-theme="zkriva"] .tiptap-search-summary-value,
body[data-theme="zkriva"] .tiptap-search-summary-value {
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-search-summary-label,
body[data-theme="zkriva"] .tiptap-search-summary-label {
    color: #78716c;
}

html[data-theme="zkriva"] .tiptap-search-result-item,
body[data-theme="zkriva"] .tiptap-search-result-item {
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-search-result-item:hover,
body[data-theme="zkriva"] .tiptap-search-result-item:hover {
    background: #fef7ed;
    border-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-search-result-item.active,
body[data-theme="zkriva"] .tiptap-search-result-item.active {
    background: rgba(210, 180, 145, 0.15);
    border-color: rgba(210, 180, 145, 0.4);
}

html[data-theme="zkriva"] .tiptap-search-result-item mark,
body[data-theme="zkriva"] .tiptap-search-result-item mark {
    background: rgba(210, 180, 145, 0.4);
}

html[data-theme="zkriva"] .tiptap-search-sidebar-footer,
body[data-theme="zkriva"] .tiptap-search-sidebar-footer {
    border-top-color: #e7e5e4;
    background: #fffffe;
}

html[data-theme="zkriva"] .export-tabs,
body[data-theme="zkriva"] .export-tabs {
    border-bottom-color: #e7e5e4;
}

html[data-theme="zkriva"] .export-tabs .nav-link,
body[data-theme="zkriva"] .export-tabs .nav-link {
    color: #78716c;
}

html[data-theme="zkriva"] .export-tabs .nav-link:hover,
body[data-theme="zkriva"] .export-tabs .nav-link:hover {
    color: #1c1917;
    border-bottom-color: #d2b491;
}

html[data-theme="zkriva"] .export-tabs .nav-link.active,
body[data-theme="zkriva"] .export-tabs .nav-link.active {
    color: #1c1917;
    border-bottom-color: #d2b491;
}

/* ============================================================================
   Theme Dropdown - Dark & Zkriva modes
   ============================================================================ */

html[data-theme="dark"] .tiptap-theme-dropdown,
html[data-theme="dark"] #tiptapThemeDropdown {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .tiptap-theme-option {
    color: #e5e7eb !important;
}

html[data-theme="dark"] .tiptap-theme-option:hover {
    background: rgba(242, 209, 35, 0.15) !important;
}

html[data-theme="dark"] .tiptap-theme-option i {
    color: #f2d123 !important;
}

html[data-theme="zkriva"] .tiptap-theme-dropdown,
html[data-theme="zkriva"] #tiptapThemeDropdown {
    background: #fffffe !important;
    border-color: #e7e5e4 !important;
    box-shadow: 0 4px 12px rgba(120, 113, 108, 0.15) !important;
}

html[data-theme="zkriva"] .tiptap-theme-option {
    color: #1c1917 !important;
}

html[data-theme="zkriva"] .tiptap-theme-option:hover {
    background: rgba(210, 180, 145, 0.12) !important;
}

html[data-theme="zkriva"] .tiptap-theme-option i {
    color: #d2b491 !important;
}

/* Offline badge */
.tiptap-offline-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: linear-gradient(90deg, #e5cdb3, #d2b491);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}
.tiptap-offline-badge i {
    font-size: 14px;
}

/* ============================================================================
   Corrections CSS - Focus et Commentaires
   ============================================================================ */

/* Supprime le border bleu au focus sur le ProseMirror */
#tiptap-editor .ProseMirror:focus,
.ProseMirror:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Supprime le border bleu sur tous les contenteditable */
[contenteditable]:focus {
    outline: none !important;
}

/* Commentaires avec background transparent (pas de couleur) */
.comment-mark,
mark.comment-mark {
    background: transparent !important;
    background-color: transparent !important;
}

/* ProseMirror : couleur de texte normale, pas bleue */
#tiptap-editor .ProseMirror {
    color: #111827 !important;
}

#tiptap-editor .ProseMirror:focus {
    color: #111827 !important;
    background: transparent !important;
}

/* Dark theme */
html[data-theme="dark"] #tiptap-editor .ProseMirror,
html[data-theme="dark"] #tiptap-editor .ProseMirror:focus {
    color: #e5e7eb !important;
}

/* Zkriva theme */
html[data-theme="zkriva"] #tiptap-editor .ProseMirror,
html[data-theme="zkriva"] #tiptap-editor .ProseMirror:focus {
    color: #1c1917 !important;
}

/* ============================================================================
   Scroll to Top Button
   ============================================================================ */

.tiptap-scroll-to-top {
    position: fixed;
    bottom: 40px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #6b7280;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
                0 1px 4px rgba(0, 0, 0, 0.04);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.tiptap-scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.tiptap-scroll-to-top:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.12);
    color: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12),
                0 2px 6px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px) scale(1.02);
}

.tiptap-scroll-to-top:active {
    transform: translateY(-1px) scale(1);
}

.tiptap-scroll-to-top i {
    animation: scroll-to-top-bounce 2s ease-in-out infinite;
}

@keyframes scroll-to-top-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* Dark theme */
html[data-theme="dark"] .tiptap-scroll-to-top {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

html[data-theme="dark"] .tiptap-scroll-to-top:hover {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

/* Zkriva theme */
html[data-theme="zkriva"] .tiptap-scroll-to-top {
    background: rgba(255, 255, 254, 0.9);
    border-color: rgba(0, 0, 0, 0.08);
    color: #78716c;
}

html[data-theme="zkriva"] .tiptap-scroll-to-top:hover {
    background: rgba(255, 255, 254, 0.95);
    border-color: rgba(0, 0, 0, 0.12);
    color: #44403c;
}

/* Scroll to top - repositionner quand un sidebar de droite est ouvert */
/* Utilise :has() pour cibler le bouton quand un sidebar frère est ouvert */
.tiptap-editor-area:has(~ .tiptap-history-sidebar.open) .tiptap-scroll-to-top,
.tiptap-editor-area:has(~ .tiptap-notes-sidebar.open) .tiptap-scroll-to-top,
.tiptap-editor-area:has(~ .tiptap-comments-sidebar.open) .tiptap-scroll-to-top,
.tiptap-editor-area:has(~ .tiptap-stats-sidebar.open) .tiptap-scroll-to-top,
.tiptap-editor-area:has(~ .tiptap-repetition-sidebar.open) .tiptap-scroll-to-top,
.tiptap-editor-area:has(~ .tiptap-search-sidebar.open) .tiptap-scroll-to-top,
.tiptap-editor-area:has(~ .tiptap-shortcuts-sidebar.open) .tiptap-scroll-to-top,
.tiptap-editor-area:has(~ .tiptap-spellcheck-sidebar.open) .tiptap-scroll-to-top {
    right: 332px; /* 320px sidebar + 12px marge */
    transition: right 0.3s ease;
}


/* ============================================================================
   MODAL HEADERS - Theme-aware styles
   ============================================================================ */

/* Light theme (default) */
.zediteur-modal-header {
  background: #1f2937;
  color: #fff;
  padding: 1rem 1.5rem;
}

.zediteur-modal-header .modal-title {
  color: #fff;
  font-weight: 600;
}

.zediteur-modal-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.8;
}

.zediteur-modal-close:hover {
  opacity: 1;
}

/* Dark theme */
html[data-theme="dark"] .zediteur-modal-header {
  background: #0f172a;
  color: #e5e5e5;
}

html[data-theme="dark"] .zediteur-modal-header .modal-title {
  color: #e5e5e5;
}

html[data-theme="dark"] .zediteur-modal-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Zkriva theme */
html[data-theme="zkriva"] .zediteur-modal-header {
  background: #78716c;
  color: #fffffe;
}

html[data-theme="zkriva"] .zediteur-modal-header .modal-title {
  color: #fffffe;
}

html[data-theme="zkriva"] .zediteur-modal-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.9;
}

html[data-theme="zkriva"] .zediteur-modal-close:hover {
  opacity: 1;
}

/* ============================================================================
   Lilia Theme - Pink/Magenta accent (#d4729c)
   ============================================================================ */

html[data-theme="lilia"] .tiptap-toolbar-container,
body[data-theme="lilia"] .tiptap-toolbar-container {
    background: #fffafc;
    border-color: rgba(212, 114, 156, 0.15);
}

html[data-theme="lilia"] .tiptap-toolbar-group,
body[data-theme="lilia"] .tiptap-toolbar-group {
    border-right-color: rgba(212, 114, 156, 0.15);
}

html[data-theme="lilia"] .tiptap-toolbar-group-end,
body[data-theme="lilia"] .tiptap-toolbar-group-end {
    border-left-color: rgba(212, 114, 156, 0.15);
}

html[data-theme="lilia"] .tiptap-toolbar-sep,
body[data-theme="lilia"] .tiptap-toolbar-sep {
    background: rgba(212, 114, 156, 0.2);
}

html[data-theme="lilia"] .tiptap-tb-btn,
body[data-theme="lilia"] .tiptap-tb-btn {
    color: #4a4a4a;
}

html[data-theme="lilia"] .tiptap-tb-btn:hover,
body[data-theme="lilia"] .tiptap-tb-btn:hover {
    background: rgba(212, 114, 156, 0.12);
    color: #d4729c;
}

html[data-theme="lilia"] .tiptap-tb-btn.active,
body[data-theme="lilia"] .tiptap-tb-btn.active {
    background: rgba(212, 114, 156, 0.2);
    color: #d4729c;
}

html[data-theme="lilia"] .tiptap-icon-btn,
body[data-theme="lilia"] .tiptap-icon-btn {
    color: #9ca3af;
}

html[data-theme="lilia"] .tiptap-icon-btn:hover,
body[data-theme="lilia"] .tiptap-icon-btn:hover {
    background: rgba(212, 114, 156, 0.12);
    color: #d4729c;
}

html[data-theme="lilia"] .tiptap-editor-wrapper,
html[data-theme="lilia"] .tiptap-editor-area,
body[data-theme="lilia"] .tiptap-editor-wrapper,
body[data-theme="lilia"] .tiptap-editor-area {
    background: #fef7fa;
}

html[data-theme="lilia"] .tiptap-editor-container,
body[data-theme="lilia"] .tiptap-editor-container {
    background: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(212, 114, 156, 0.1),
                0 2px 4px -2px rgba(212, 114, 156, 0.08),
                0 20px 50px -12px rgba(212, 114, 156, 0.12);
}

html[data-theme="lilia"] .tiptap-footerbar-sticky,
body[data-theme="lilia"] .tiptap-footerbar-sticky {
    background: #fffafc;
    border-top-color: rgba(212, 114, 156, 0.15);
    box-shadow: 0 -2px 8px rgba(212, 114, 156, 0.08);
}

html[data-theme="lilia"] .zediteur-modal-header {
    background: #d4729c;
    color: #ffffff;
}

html[data-theme="lilia"] .zediteur-modal-header .modal-title {
    color: #ffffff;
}

html[data-theme="lilia"] .zediteur-modal-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.9;
}

html[data-theme="lilia"] .zediteur-modal-close:hover {
    opacity: 1;
}

/* Lilia theme - Heading Dropdown */
html[data-theme="lilia"] .tiptap-heading-trigger {
    background: #fffafc;
    color: #6b5a63;
    border-color: rgba(212, 114, 156, 0.2);
}

html[data-theme="lilia"] .tiptap-heading-trigger:hover {
    background: rgba(212, 114, 156, 0.1);
    border-color: #d4729c;
}

html[data-theme="lilia"] .tiptap-heading-menu {
    background: #fffffe;
    border-color: rgba(212, 114, 156, 0.2);
    box-shadow: 0 4px 12px rgba(212, 114, 156, 0.15);
}

html[data-theme="lilia"] .tiptap-heading-option {
    color: #6b5a63;
}

html[data-theme="lilia"] .tiptap-heading-option:hover {
    background: rgba(212, 114, 156, 0.12);
}

html[data-theme="lilia"] .tiptap-heading-option.active {
    background: rgba(212, 114, 156, 0.2);
}

/* Lilia theme - More Dropdown (Export/Import) */
html[data-theme="lilia"] .tiptap-more-menu {
    background: #fffffe;
    border-color: rgba(212, 114, 156, 0.2);
    box-shadow: 0 4px 12px rgba(212, 114, 156, 0.15);
}

html[data-theme="lilia"] .tiptap-more-option {
    color: #6b5a63;
}

html[data-theme="lilia"] .tiptap-more-option:hover {
    background: rgba(212, 114, 156, 0.12);
}

/* Lilia theme - Zoom slider */
html[data-theme="lilia"] #tiptapZoomSlider,
html[data-theme="lilia"] .zoom-slider {
    background: rgba(212, 114, 156, 0.15);
}

html[data-theme="lilia"] #tiptapZoomSlider::-webkit-slider-thumb,
html[data-theme="lilia"] .zoom-slider::-webkit-slider-thumb {
    background: #d4729c;
    box-shadow: 0 1px 3px rgba(212, 114, 156, 0.3);
}

html[data-theme="lilia"] #tiptapZoomSlider::-moz-range-track,
html[data-theme="lilia"] .zoom-slider::-moz-range-track {
    background: rgba(212, 114, 156, 0.15);
}

html[data-theme="lilia"] #tiptapZoomSlider::-moz-range-thumb,
html[data-theme="lilia"] .zoom-slider::-moz-range-thumb {
    background: #d4729c;
    box-shadow: 0 1px 3px rgba(212, 114, 156, 0.3);
}

html[data-theme="lilia"] #tiptapZoomPercent,
html[data-theme="lilia"] .zoom-percent {
    color: #6b5a63;
}


/* ============================================================================
   Nature Theme - Green accent (#005c45)
   ============================================================================ */

html[data-theme="nature"] .tiptap-toolbar-container,
body[data-theme="nature"] .tiptap-toolbar-container {
    background: #f8fdfb;
    border-color: rgba(0, 92, 69, 0.15);
}

html[data-theme="nature"] .tiptap-toolbar-group,
body[data-theme="nature"] .tiptap-toolbar-group {
    border-right-color: rgba(0, 92, 69, 0.15);
}

html[data-theme="nature"] .tiptap-toolbar-group-end,
body[data-theme="nature"] .tiptap-toolbar-group-end {
    border-left-color: rgba(0, 92, 69, 0.15);
}

html[data-theme="nature"] .tiptap-toolbar-sep,
body[data-theme="nature"] .tiptap-toolbar-sep {
    background: rgba(0, 92, 69, 0.2);
}

html[data-theme="nature"] .tiptap-tb-btn,
body[data-theme="nature"] .tiptap-tb-btn {
    color: #374151;
}

html[data-theme="nature"] .tiptap-tb-btn:hover,
body[data-theme="nature"] .tiptap-tb-btn:hover {
    background: rgba(0, 92, 69, 0.1);
    color: #005c45;
}

html[data-theme="nature"] .tiptap-tb-btn.active,
body[data-theme="nature"] .tiptap-tb-btn.active {
    background: rgba(0, 92, 69, 0.18);
    color: #005c45;
}

html[data-theme="nature"] .tiptap-icon-btn,
body[data-theme="nature"] .tiptap-icon-btn {
    color: #6b7280;
}

html[data-theme="nature"] .tiptap-icon-btn:hover,
body[data-theme="nature"] .tiptap-icon-btn:hover {
    background: rgba(0, 92, 69, 0.1);
    color: #005c45;
}

html[data-theme="nature"] .tiptap-editor-wrapper,
html[data-theme="nature"] .tiptap-editor-area,
body[data-theme="nature"] .tiptap-editor-wrapper,
body[data-theme="nature"] .tiptap-editor-area {
    background: #e8f5f0;
}

html[data-theme="nature"] .tiptap-editor-container,
body[data-theme="nature"] .tiptap-editor-container {
    background: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 92, 69, 0.1),
                0 2px 4px -2px rgba(0, 92, 69, 0.08),
                0 20px 50px -12px rgba(0, 92, 69, 0.12);
}

html[data-theme="nature"] .tiptap-footerbar-sticky,
body[data-theme="nature"] .tiptap-footerbar-sticky {
    background: #f8fdfb;
    border-top-color: rgba(0, 92, 69, 0.15);
    box-shadow: 0 -2px 8px rgba(0, 92, 69, 0.08);
}

html[data-theme="nature"] .zediteur-modal-header {
    background: #005c45;
    color: #ffffff;
}

html[data-theme="nature"] .zediteur-modal-header .modal-title {
    color: #ffffff;
}

html[data-theme="nature"] .zediteur-modal-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.9;
}

html[data-theme="nature"] .zediteur-modal-close:hover {
    opacity: 1;
}

/* Nature theme - Heading Dropdown */
html[data-theme="nature"] .tiptap-heading-trigger {
    background: #f8fdfb;
    color: #1c5446;
    border-color: rgba(0, 92, 69, 0.2);
}

html[data-theme="nature"] .tiptap-heading-trigger:hover {
    background: rgba(0, 92, 69, 0.1);
    border-color: #005c45;
}

html[data-theme="nature"] .tiptap-heading-menu {
    background: #fffffe;
    border-color: rgba(0, 92, 69, 0.2);
    box-shadow: 0 4px 12px rgba(0, 92, 69, 0.15);
}

html[data-theme="nature"] .tiptap-heading-option {
    color: #1c5446;
}

html[data-theme="nature"] .tiptap-heading-option:hover {
    background: rgba(0, 92, 69, 0.12);
}

html[data-theme="nature"] .tiptap-heading-option.active {
    background: rgba(0, 92, 69, 0.2);
}

/* Nature theme - More Dropdown (Export/Import) */
html[data-theme="nature"] .tiptap-more-menu {
    background: #fffffe;
    border-color: rgba(0, 92, 69, 0.2);
    box-shadow: 0 4px 12px rgba(0, 92, 69, 0.15);
}

html[data-theme="nature"] .tiptap-more-option {
    color: #1c5446;
}

html[data-theme="nature"] .tiptap-more-option:hover {
    background: rgba(0, 92, 69, 0.12);
}

/* Nature theme - Zoom slider */
html[data-theme="nature"] #tiptapZoomSlider,
html[data-theme="nature"] .zoom-slider {
    background: rgba(0, 92, 69, 0.15);
}

html[data-theme="nature"] #tiptapZoomSlider::-webkit-slider-thumb,
html[data-theme="nature"] .zoom-slider::-webkit-slider-thumb {
    background: #005c45;
    box-shadow: 0 1px 3px rgba(0, 92, 69, 0.3);
}

html[data-theme="nature"] #tiptapZoomSlider::-moz-range-track,
html[data-theme="nature"] .zoom-slider::-moz-range-track {
    background: rgba(0, 92, 69, 0.15);
}

html[data-theme="nature"] #tiptapZoomSlider::-moz-range-thumb,
html[data-theme="nature"] .zoom-slider::-moz-range-thumb {
    background: #005c45;
    box-shadow: 0 1px 3px rgba(0, 92, 69, 0.3);
}

html[data-theme="nature"] #tiptapZoomPercent,
html[data-theme="nature"] .zoom-percent {
    color: #1c5446;
}


/* ============================================================================
   Theme Dropdown - Sélecteur de thème dans la footerbar
   ============================================================================ */

/* Wrapper pour positionner le dropdown par rapport au bouton */
.tiptap-theme-btn-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tiptap-theme-dropdown {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 12px;
    z-index: 1000;
    background: var(--zk-bg-card, #fff);
    border: 1px solid var(--zk-border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 6px;
    display: none;
    z-index: 1000;
    min-width: 120px;
}

/* Flèche triangulaire pointant vers le bouton */
.tiptap-theme-dropdown::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

/* Bordure de la flèche */
.tiptap-theme-dropdown::before {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid var(--zk-border, #e5e7eb);
}

.tiptap-theme-dropdown.show {
    display: block;
}

.tiptap-theme-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: var(--zk-text, #333);
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    font-weight: normal;
}

.tiptap-theme-option:hover {
    background: var(--zk-bg-hover, #f3f4f6);
}

.tiptap-theme-option.active {
    background: var(--zk-bg-hover, #f3f4f6);
    font-weight: 600;
}

/* Dark theme */
html[data-theme="dark"] .tiptap-theme-dropdown {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .tiptap-theme-dropdown::after {
    border-top-color: #1e293b;
}

html[data-theme="dark"] .tiptap-theme-dropdown::before {
    border-top-color: #334155;
}

html[data-theme="dark"] .tiptap-theme-option {
    color: #e5e7eb;
}

html[data-theme="dark"] .tiptap-theme-option:hover,
html[data-theme="dark"] .tiptap-theme-option.active {
    background: rgba(242, 209, 35, 0.15);
    color: #f2d123;
}

/* Zkriva theme */
html[data-theme="zkriva"] .tiptap-theme-dropdown {
    background: #fffffe;
    border-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-theme-dropdown::after {
    border-top-color: #fffffe;
}

html[data-theme="zkriva"] .tiptap-theme-dropdown::before {
    border-top-color: #e7e5e4;
}

html[data-theme="zkriva"] .tiptap-theme-option {
    color: #1c1917;
}

html[data-theme="zkriva"] .tiptap-theme-option:hover,
html[data-theme="zkriva"] .tiptap-theme-option.active {
    background: rgba(210, 180, 145, 0.12);
    color: #d2b491;
}

/* Lilia theme */
html[data-theme="lilia"] .tiptap-theme-dropdown {
    background: #ffffff;
    border-color: rgba(212, 114, 156, 0.2);
}

html[data-theme="lilia"] .tiptap-theme-dropdown::after {
    border-top-color: #ffffff;
}

html[data-theme="lilia"] .tiptap-theme-dropdown::before {
    border-top-color: rgba(212, 114, 156, 0.3);
}

html[data-theme="lilia"] .tiptap-theme-option {
    color: #4a4a4a;
}

html[data-theme="lilia"] .tiptap-theme-option:hover,
html[data-theme="lilia"] .tiptap-theme-option.active {
    background: rgba(212, 114, 156, 0.12);
    color: #d4729c;
}

/* Nature theme */
html[data-theme="nature"] .tiptap-theme-dropdown {
    background: #ffffff;
    border-color: rgba(0, 92, 69, 0.2);
}

html[data-theme="nature"] .tiptap-theme-dropdown::after {
    border-top-color: #ffffff;
}

html[data-theme="nature"] .tiptap-theme-dropdown::before {
    border-top-color: rgba(0, 92, 69, 0.3);
}

html[data-theme="nature"] .tiptap-theme-option {
    color: #374151;
}

html[data-theme="nature"] .tiptap-theme-option:hover,
html[data-theme="nature"] .tiptap-theme-option.active {
    background: rgba(0, 92, 69, 0.1);
    color: #005c45;
}

/* ============================================================================
   CSP COMPLIANT UTILITY CLASSES
   ============================================================================ */

/* Hidden elements */
.zediteur-hidden {
    display: none;
}

/* Progress bar small height */
.progress-height-sm {
    height: 8px;
}

/* Zoom controls */
.zoom-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    cursor: pointer;
    outline: none;
    vertical-align: middle;
}

.zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #f2d123;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.zoom-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(242, 209, 35, 0.4);
}

.zoom-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #f2d123;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.zoom-slider::-moz-range-track {
    background: #e5e7eb;
    height: 4px;
    border-radius: 2px;
}

/* Dark theme - .zoom-slider */
html[data-theme="dark"] .zoom-slider {
    background: #475569;
}

html[data-theme="dark"] .zoom-slider::-webkit-slider-thumb {
    background: #f2d123;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .zoom-slider::-moz-range-track {
    background: #475569;
}

html[data-theme="dark"] .zoom-slider::-moz-range-thumb {
    background: #f2d123;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Zkriva theme - .zoom-slider */
html[data-theme="zkriva"] .zoom-slider {
    background: #e7e5e4;
}

html[data-theme="zkriva"] .zoom-slider::-webkit-slider-thumb {
    background: #d2b491;
    box-shadow: 0 1px 3px rgba(120, 113, 108, 0.3);
}

html[data-theme="zkriva"] .zoom-slider::-moz-range-track {
    background: #e7e5e4;
}

html[data-theme="zkriva"] .zoom-slider::-moz-range-thumb {
    background: #d2b491;
    box-shadow: 0 1px 3px rgba(120, 113, 108, 0.3);
}

.zoom-percent {
    width: 48px;
    display: inline-block;
    text-align: right;
}

html[data-theme="dark"] .zoom-percent {
    color: #9ca3af;
}

html[data-theme="zkriva"] .zoom-percent {
    color: #78716c;
}

/* Settings modal styles */
.modal-rounded {
    border-radius: 12px;
    border: none;
}

.modal-header-gradient {
    background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
    padding: 1.5rem;
}

.modal-header-icon {
    color: #fff;
    font-size: 1.5rem;
}

.settings-tabs-sidebar {
    background-color: #ffffff;
    border-right: 1px solid #dee2e6;
}

.settings-tabs-nav {
    padding: 1rem;
}

.settings-content-area {
    padding: 1.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-footer-light {
    background-color: #f8f9fa;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
}

/* Settings icons (medium size) */
.settings-icon-md {
    font-size: 1.2rem;
}

/* Settings table */
.settings-table-font {
    font-size: 1em;
}

/* Export cover preview */
.export-cover-preview-hidden {
    display: none;
}

/* EPUB options hidden */
.epub-options-hidden {
    display: none;
}

/* Template preview base styles */
.template-style-bold {
    font-weight: bold;
}

.template-style-italic {
    font-style: italic;
}

.template-font-small {
    font-size: 5px;
}

.template-font-xsmall {
    font-size: 4px;
}

.template-font-medium {
    font-size: 6px;
}

.template-font-large {
    font-size: 7px;
}

.template-text-center {
    text-align: center;
}

.template-text-left {
    text-align: left;
}

.template-padding-left-sm {
    padding-left: 6px;
}

.template-padding-left-md {
    padding-left: 8px;
}

.template-margin-center {
    margin: 0 auto;
}

.template-margin-left-15 {
    margin-left: 15%;
}

.template-margin-y-sm {
    margin: 4px 0;
}

.template-margin-bottom-sm {
    margin-bottom: 4px;
}

.template-header-line-60 {
    width: 60%;
    margin: 0 auto;
}

/* Template font families */
.template-font-mono {
    font-family: monospace;
}

.template-font-serif {
    font-family: serif;
}

/* Template genre colors */
.template-color-western { color: #8B4513; }
.template-color-scifi { color: #00CED1; }
.template-color-romance { color: #C71585; }
.template-color-thriller { color: #8B0000; }
.template-color-horror { color: #800020; }
.template-color-adventure { color: #B8860B; }
.template-color-historical { color: #704214; }
.template-color-youth { color: #FF6B35; }
.template-color-poetry { color: #4A4A4A; }
.template-color-theater { color: #8B0000; }
.template-color-fairytale { color: #9370DB; }
.template-color-biography { color: #4682B4; }
.template-color-mystery { color: #2F4F4F; }
.template-color-academic { color: #333; }
.template-color-nature { color: #556B2F; }
.template-color-humor { color: #FF8C00; }
.template-color-muted { color: #666; }
.template-color-light { color: #999; }

/* Template backgrounds for thriller */
.template-bg-thriller {
    background: #1C1C1C;
}

.template-line-thriller {
    background: #444;
}

.template-line-theater {
    background: #8B0000;
    height: 2px;
}

/* Dark theme adjustments */
[data-theme="dark"] .settings-tabs-sidebar {
    background-color: #1a1a1a;
    border-right-color: #333;
}

[data-theme="dark"] .modal-footer-light {
    background-color: #1a1a1a;
    border-top-color: #333;
}

/* Zkriva theme adjustments */
[data-theme="zkriva"] .settings-tabs-sidebar {
    background-color: #fffffe;
    border-right-color: #e7e5e4;
}

[data-theme="zkriva"] .modal-footer-light {
    background-color: #faf9f7;
    border-top-color: #e7e5e4;
}

/* ============================================================================
   CSP-COMPLIANT UTILITY CLASSES (Phase 7 continuation)
   ============================================================================ */

/* Hidden elements */
.zediteur-config-hidden { display: none; }
.tiptap-panel-hidden { display: none; }

/* Table font size */
.tiptap-table-sm { font-size: 1em; }

/* Zoom slider */
.tiptap-zoom-slider { width: 100px; vertical-align: middle; }

/* Zoom percent display */
.tiptap-zoom-percent { width: 48px; display: inline-block; text-align: right; }

/* ============================================================================
   CURSOR HIGHLIGHT ANIMATION
   Animation cercles concentriques pour retrouver le curseur
   ============================================================================ */

.cursor-highlight {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
}

.cursor-highlight-ring {
    position: absolute;
    border-radius: 50%;
    border: 3px solid var(--cursor-highlight-color, #f2d123);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    animation: cursor-ring-expand 1.2s ease-out forwards;
}

/* Délais pour effet cascade */
.cursor-highlight-ring:nth-child(1) { animation-delay: 0s; }
.cursor-highlight-ring:nth-child(2) { animation-delay: 0.25s; }
.cursor-highlight-ring:nth-child(3) { animation-delay: 0.5s; }

@keyframes cursor-ring-expand {
    0% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Point central qui pulse */
.cursor-highlight-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cursor-highlight-color, #f2d123);
    transform: translate(-50%, -50%);
    animation: cursor-dot-pulse 1s ease-out forwards;
}

@keyframes cursor-dot-pulse {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
}

/* Couleurs par thème */
[data-theme="light"] .cursor-highlight-ring,
:root .cursor-highlight-ring {
    border-color: #f2d123;
    box-shadow: 0 0 10px rgba(242, 209, 35, 0.4);
}

[data-theme="dark"] .cursor-highlight-ring {
    border-color: #f2d123;
    box-shadow: 0 0 15px rgba(242, 209, 35, 0.6);
}

[data-theme="zkriva"] .cursor-highlight-ring {
    border-color: #d2a554;
    box-shadow: 0 0 12px rgba(210, 165, 84, 0.5);
}

[data-theme="lilia"] .cursor-highlight-ring {
    border-color: #d4729c;
    box-shadow: 0 0 12px rgba(212, 114, 156, 0.5);
}

[data-theme="natur"] .cursor-highlight-ring {
    border-color: #4a9c4a;
    box-shadow: 0 0 12px rgba(74, 156, 74, 0.5);
}

/* Couleurs du dot par thème */
[data-theme="dark"] .cursor-highlight-dot { background: #f2d123; }
[data-theme="zkriva"] .cursor-highlight-dot { background: #d2a554; }
[data-theme="lilia"] .cursor-highlight-dot { background: #d4729c; }
[data-theme="natur"] .cursor-highlight-dot { background: #4a9c4a; }

/* ============================================================================
   History Sidebar - Historique des versions
   (même style que notes, comments, search sidebars)
   ============================================================================ */

.tiptap-history-sidebar {
    width: 0;
    min-width: 0;
    background: #fff;
    border-left: 1px solid #ececec;
    overflow: hidden;
    transition: width 0.3s ease, min-width 0.3s ease;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.08);
    z-index: 110;
}

.tiptap-history-sidebar.open {
    width: 320px;
    min-width: 320px;
}

[data-theme="dark"] .tiptap-history-sidebar {
    background: #1e1e1e;
    border-left-color: #3a3a3a;
}

[data-theme="zkriva"] .tiptap-history-sidebar {
    background: #fffdf8;
    border-left-color: #e8dcc8;
}

[data-theme="lilia"] .tiptap-history-sidebar {
    background: #fef9fb;
    border-left-color: #f0d8e4;
}

[data-theme="natur"] .tiptap-history-sidebar {
    background: #f8fcf9;
    border-left-color: #d0e4d8;
}

/* Header */
.tiptap-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e5e5;
    background: #f9f9f9;
    flex-shrink: 0;
}

[data-theme="dark"] .tiptap-history-header {
    background: #252525;
    border-bottom-color: #3a3a3a;
}

[data-theme="zkriva"] .tiptap-history-header {
    background: #faf6ef;
    border-bottom-color: #e8dcc8;
}

.tiptap-history-header h5 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Scroll area */
.tiptap-history-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Body */
.tiptap-history-body {
    padding: 0;
}

/* Empty state */
.tiptap-history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #888;
}

.tiptap-history-empty i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.tiptap-history-empty p {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.tiptap-history-empty small {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Groups by date */
.tiptap-history-group {
    border-bottom: 1px solid #f0f0f0;
}

[data-theme="dark"] .tiptap-history-group {
    border-bottom-color: #333;
}

.tiptap-history-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    background: #f5f5f5;
    position: sticky;
    top: 0;
    z-index: 1;
}

.tiptap-history-date-label {
    flex: 1;
}

.tiptap-history-date-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: #888;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s, background 0.15s;
}

.tiptap-history-date-menu-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .tiptap-history-date {
    background: #2a2a2a;
    color: #999;
}

[data-theme="dark"] .tiptap-history-date-menu-btn {
    color: #999;
}

[data-theme="dark"] .tiptap-history-date-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="zkriva"] .tiptap-history-date {
    background: #f8f4ec;
    color: #8a7a5a;
}

[data-theme="zkriva"] .tiptap-history-date-menu-btn {
    color: #8a7a5a;
}

[data-theme="lilia"] .tiptap-history-date {
    background: #fdf2f8;
    color: #9d7a8c;
}

[data-theme="lilia"] .tiptap-history-date-menu-btn {
    color: #9d7a8c;
}

[data-theme="natur"] .tiptap-history-date {
    background: #ecfdf5;
    color: #5a7a6a;
}

[data-theme="natur"] .tiptap-history-date-menu-btn {
    color: #5a7a6a;
}

/* History items */
.tiptap-history-item {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s ease;
}

/* Icône de sélection (visible uniquement quand sélectionné) */
.tiptap-history-item-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
    color: var(--bs-primary, #f2d123);
    flex-shrink: 0;
    cursor: pointer;
    font-size: 1.1rem;
    transition: transform 0.15s;
}

.tiptap-history-item-check:hover {
    transform: scale(1.1);
}

[data-theme="dark"] .tiptap-history-item-check {
    color: #fbbf24;
}

[data-theme="lilia"] .tiptap-history-item-check {
    color: #d4729c;
}

[data-theme="natur"] .tiptap-history-item-check {
    color: #10b981;
}

/* Item sélectionné */
.tiptap-history-item.selected {
    background: rgba(242, 209, 35, 0.12);
    border-left: 3px solid var(--bs-primary, #f2d123);
}

.tiptap-history-item.selected:hover {
    background: rgba(242, 209, 35, 0.18);
}

[data-theme="dark"] .tiptap-history-item.selected {
    background: rgba(251, 191, 36, 0.12);
    border-left-color: #fbbf24;
}

[data-theme="dark"] .tiptap-history-item.selected:hover {
    background: rgba(251, 191, 36, 0.18);
}

[data-theme="lilia"] .tiptap-history-item.selected {
    background: rgba(212, 114, 156, 0.12);
    border-left-color: #d4729c;
}

[data-theme="lilia"] .tiptap-history-item.selected:hover {
    background: rgba(212, 114, 156, 0.18);
}

[data-theme="natur"] .tiptap-history-item.selected {
    background: rgba(16, 185, 129, 0.12);
    border-left-color: #10b981;
}

[data-theme="natur"] .tiptap-history-item.selected:hover {
    background: rgba(16, 185, 129, 0.18);
}

/* Barre d'actions de sélection */
.tiptap-history-selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: var(--bs-primary, #f2d123);
    color: #333;
    font-size: 0.8rem;
    font-weight: 500;
}

.tiptap-history-selection-count {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.tiptap-history-selection-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tiptap-history-selection-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: rgba(0, 0, 0, 0.1);
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.tiptap-history-selection-btn:hover {
    background: rgba(0, 0, 0, 0.2);
}

.tiptap-history-selection-btn.danger {
    background: rgba(220, 53, 69, 0.9);
    color: #fff;
}

.tiptap-history-selection-btn.danger:hover {
    background: #dc3545;
}

[data-theme="dark"] .tiptap-history-selection-bar {
    background: #fbbf24;
    color: #1e1e1e;
}

[data-theme="lilia"] .tiptap-history-selection-bar {
    background: #d4729c;
    color: #fff;
}

[data-theme="lilia"] .tiptap-history-selection-btn {
    color: #fff;
}

[data-theme="natur"] .tiptap-history-selection-bar {
    background: #10b981;
    color: #fff;
}

[data-theme="natur"] .tiptap-history-selection-btn {
    color: #fff;
}

.tiptap-history-item:hover {
    background: #f8f8f8;
}

.tiptap-history-item.menu-open {
    background: #f0f0f0;
}

.tiptap-history-item.active {
    background: rgba(242, 209, 35, 0.12);
    border-left: 3px solid #f2d123;
}

.tiptap-history-item.active.menu-open {
    background: rgba(242, 209, 35, 0.18);
}

[data-theme="dark"] .tiptap-history-item {
    border-bottom-color: #333;
}

[data-theme="dark"] .tiptap-history-item:hover {
    background: #2a2a2a;
}

[data-theme="dark"] .tiptap-history-item.menu-open {
    background: #333;
}

[data-theme="dark"] .tiptap-history-item.active {
    background: #1a3a4a;
    border-left-color: #4fc3f7;
}

[data-theme="dark"] .tiptap-history-item.active.menu-open {
    background: #1a4a5a;
}

[data-theme="zkriva"] .tiptap-history-item:hover {
    background: #faf6ed;
}

[data-theme="zkriva"] .tiptap-history-item.menu-open {
    background: #f5efe0;
}

[data-theme="zkriva"] .tiptap-history-item.active {
    background: #faf4e8;
    border-left-color: #d2a554;
}

[data-theme="zkriva"] .tiptap-history-item.active.menu-open {
    background: #f0e8d5;
}

[data-theme="lilia"] .tiptap-history-item:hover {
    background: #fdf6f9;
}

[data-theme="lilia"] .tiptap-history-item.menu-open {
    background: #faeef4;
}

[data-theme="lilia"] .tiptap-history-item.active {
    background: #fdf2f7;
    border-left-color: #ec4899;
}

[data-theme="lilia"] .tiptap-history-item.active.menu-open {
    background: #fae8f0;
}

[data-theme="natur"] .tiptap-history-item:hover {
    background: #f3faf5;
}

[data-theme="natur"] .tiptap-history-item.menu-open {
    background: #e8f5ec;
}

[data-theme="natur"] .tiptap-history-item.active {
    background: #ecfdf5;
    border-left-color: #10b981;
}

[data-theme="natur"] .tiptap-history-item.active.menu-open {
    background: #dcfce7;
}

.tiptap-history-item-main {
    flex: 1;
    min-width: 0;
}

.tiptap-history-time {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.35rem;
}

[data-theme="dark"] .tiptap-history-time {
    color: #e0e0e0;
}

.tiptap-history-time i {
    font-size: 0.75rem;
    opacity: 0.6;
}

.tiptap-history-preview {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.35rem;
}

[data-theme="dark"] .tiptap-history-preview {
    color: #aaa;
}

.tiptap-history-stats {
    display: flex;
    gap: 0.75rem;
    font-size: 0.7rem;
    color: #999;
}

.tiptap-history-stats span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tiptap-history-stats i {
    font-size: 0.7rem;
}

/* Actions (menu button) */
.tiptap-history-actions {
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.tiptap-history-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: #888;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.tiptap-history-menu-btn:hover {
    background: #e8e8e8;
    color: #333;
}

[data-theme="dark"] .tiptap-history-menu-btn:hover {
    background: #3a3a3a;
    color: #fff;
}

/* Context menu */
.tiptap-history-context-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 0.35rem;
    z-index: 10000;
    min-width: 180px;
}

[data-theme="dark"] .tiptap-history-context-menu {
    background: #2a2a2a;
    border-color: #444;
}

.tiptap-history-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    color: #333;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s;
    text-align: left;
}

.tiptap-history-menu-item:hover {
    background: #f0f0f0;
}

.tiptap-history-menu-item.danger {
    color: #dc3545;
}

.tiptap-history-menu-item.danger:hover {
    background: #fef2f2;
}

[data-theme="dark"] .tiptap-history-menu-item {
    color: #e0e0e0;
}

[data-theme="dark"] .tiptap-history-menu-item:hover {
    background: #3a3a3a;
}

[data-theme="dark"] .tiptap-history-menu-item.danger {
    color: #f87171;
}

[data-theme="dark"] .tiptap-history-menu-item.danger:hover {
    background: #3a2020;
}

.tiptap-history-menu-separator {
    height: 1px;
    background: #e5e5e5;
    margin: 0.35rem 0;
}

[data-theme="dark"] .tiptap-history-menu-separator {
    background: #444;
}

/* Footer */
.tiptap-history-footer {
    position: relative;
    padding: 0.75rem 1rem;
    border-top: 1px solid #e5e5e5;
    background: #f9f9f9;
    flex-shrink: 0;
    transition: padding 0.2s ease;
}

[data-theme="dark"] .tiptap-history-footer {
    background: #252525;
    border-top-color: #3a3a3a;
}

/* Toggle button */
.tiptap-history-footer-toggle {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: color 0.15s, background 0.15s, transform 0.2s;
    z-index: 1;
}

.tiptap-history-footer-toggle:hover {
    color: #666;
    background: rgba(0, 0, 0, 0.05);
}

.tiptap-history-footer.minimized .tiptap-history-footer-toggle {
    transform: rotate(180deg);
}

/* Minimized state */
.tiptap-history-footer.minimized {
    padding: 0.5rem 1rem;
}

.tiptap-history-footer.minimized .tiptap-history-info {
    display: none;
}

.tiptap-history-footer.minimized .tiptap-history-counter {
    margin-bottom: 0;
}

/* Dark theme toggle */
[data-theme="dark"] .tiptap-history-footer-toggle {
    color: #777;
}

[data-theme="dark"] .tiptap-history-footer-toggle:hover {
    color: #aaa;
    background: rgba(255, 255, 255, 0.08);
}

/* Zkriva theme toggle */
[data-theme="zkriva"] .tiptap-history-footer-toggle {
    color: #a09080;
}

[data-theme="zkriva"] .tiptap-history-footer-toggle:hover {
    color: #5c5240;
    background: rgba(92, 82, 64, 0.08);
}

/* Lilia theme toggle */
[data-theme="lilia"] .tiptap-history-footer-toggle {
    color: #c9a0b0;
}

[data-theme="lilia"] .tiptap-history-footer-toggle:hover {
    color: #6b4c5a;
    background: rgba(212, 114, 156, 0.08);
}

/* Natur theme toggle */
[data-theme="natur"] .tiptap-history-footer-toggle {
    color: #7ab09a;
}

[data-theme="natur"] .tiptap-history-footer-toggle:hover {
    color: #3d5a4c;
    background: rgba(16, 185, 129, 0.08);
}

/* Counter with progress bar */
.tiptap-history-counter {
    margin-bottom: 0.5rem;
}

.tiptap-history-counter-text {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 0.35rem;
}

.tiptap-history-counter-text #tiptapHistoryCount {
    font-size: 1rem;
    color: var(--bs-primary, #f2d123);
}

.tiptap-history-counter-label {
    font-weight: 400;
    color: #888;
    font-size: 0.75rem;
}

.tiptap-history-counter-bar {
    width: 100%;
    height: 4px;
    background: #e5e5e5;
    border-radius: 2px;
    overflow: hidden;
}

.tiptap-history-counter-fill {
    height: 100%;
    background: var(--bs-primary, #f2d123);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.tiptap-history-counter-fill.warning {
    background: #f59e0b;
}

/* Dark theme counter */
[data-theme="dark"] .tiptap-history-counter-text {
    color: #e5e7eb;
}

[data-theme="dark"] .tiptap-history-counter-text #tiptapHistoryCount {
    color: #fbbf24;
}

[data-theme="dark"] .tiptap-history-counter-label {
    color: #9ca3af;
}

[data-theme="dark"] .tiptap-history-counter-bar {
    background: #3a3a3a;
}

[data-theme="dark"] .tiptap-history-counter-fill {
    background: #fbbf24;
}

/* Zkriva theme counter */
[data-theme="zkriva"] .tiptap-history-counter-text {
    color: #5c5240;
}

[data-theme="zkriva"] .tiptap-history-counter-text #tiptapHistoryCount {
    color: #d4a800;
}

[data-theme="zkriva"] .tiptap-history-counter-bar {
    background: #e8e2d9;
}

[data-theme="zkriva"] .tiptap-history-counter-fill {
    background: #d4a800;
}

/* Lilia theme counter */
[data-theme="lilia"] .tiptap-history-counter-text {
    color: #6b4c5a;
}

[data-theme="lilia"] .tiptap-history-counter-text #tiptapHistoryCount {
    color: #d4729c;
}

[data-theme="lilia"] .tiptap-history-counter-bar {
    background: #f3e4ea;
}

[data-theme="lilia"] .tiptap-history-counter-fill {
    background: #d4729c;
}

/* Natur theme counter */
[data-theme="natur"] .tiptap-history-counter-text {
    color: #3d5a4c;
}

[data-theme="natur"] .tiptap-history-counter-text #tiptapHistoryCount {
    color: #10b981;
}

[data-theme="natur"] .tiptap-history-counter-bar {
    background: #d1fae5;
}

[data-theme="natur"] .tiptap-history-counter-fill {
    background: #10b981;
}

.tiptap-history-info {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #888;
    line-height: 1.4;
}

.tiptap-history-info i {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ============================================================================
   History Preview Banner (sticky under toolbar)
   ============================================================================ */

/* Widget de prévisualisation historique - Fixé en bas de la zone éditeur */
.tiptap-history-preview-banner {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: fixed;
    z-index: 100; /* Below dropdowns (z-index: 10000) but above editor content */
    padding: 0.6rem 1.25rem;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    font-size: 0.85rem;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    /* Position and width set by JavaScript */
}

.tiptap-history-preview-banner.visible {
    display: flex;
}

.tiptap-history-preview-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: #555;
}

.tiptap-history-preview-info i {
    font-size: 1.1rem;
    color: var(--bs-primary, #f2d123);
}

.tiptap-history-preview-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tiptap-history-preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.75rem;
    border: none;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.tiptap-history-preview-btn:hover {
    opacity: 0.85;
}

.tiptap-history-preview-close {
    background: #f3f4f6;
    color: #555;
}

.tiptap-history-preview-close:hover {
    background: #e5e7eb;
}

.tiptap-history-preview-use {
    background: var(--bs-primary, #f2d123);
    color: #111;
}

.tiptap-history-preview-use:hover {
    background: var(--bs-primary, #f2d123);
    opacity: 0.9;
}

/* Dark theme */
/* Dark theme */
[data-theme="dark"] .tiptap-history-preview-banner {
    background: #1e1e1e;
    border-color: #333;
}

[data-theme="dark"] .tiptap-history-preview-info {
    color: #e5e7eb;
}

[data-theme="dark"] .tiptap-history-preview-info i {
    color: #fbbf24;
}

[data-theme="dark"] .tiptap-history-preview-close {
    background: #333;
    color: #e5e7eb;
}

[data-theme="dark"] .tiptap-history-preview-close:hover {
    background: #444;
}

[data-theme="dark"] .tiptap-history-preview-use {
    background: #fbbf24;
    color: #1e1e1e;
}

/* Zkriva theme */
[data-theme="zkriva"] .tiptap-history-preview-banner {
    background: #fffdf8;
    border-color: #e8e2d9;
}

[data-theme="zkriva"] .tiptap-history-preview-info {
    color: #5c5240;
}

[data-theme="zkriva"] .tiptap-history-preview-info i {
    color: #d4a800;
}

[data-theme="zkriva"] .tiptap-history-preview-close {
    background: #f5f0e6;
    color: #5c5240;
}

[data-theme="zkriva"] .tiptap-history-preview-close:hover {
    background: #ebe4d6;
}

[data-theme="zkriva"] .tiptap-history-preview-use {
    background: #f2d123;
    color: #333;
}

/* Lilia theme */
[data-theme="lilia"] .tiptap-history-preview-banner {
    background: #fef7fa;
    border-color: #f3e4ea;
}

[data-theme="lilia"] .tiptap-history-preview-info {
    color: #6b4c5a;
}

[data-theme="lilia"] .tiptap-history-preview-info i {
    color: #d4729c;
}

[data-theme="lilia"] .tiptap-history-preview-close {
    background: #fce7f3;
    color: #6b4c5a;
}

[data-theme="lilia"] .tiptap-history-preview-close:hover {
    background: #f9d5e8;
}

[data-theme="lilia"] .tiptap-history-preview-use {
    background: #d4729c;
    color: #fff;
}

/* Natur theme */
[data-theme="natur"] .tiptap-history-preview-banner {
    background: #f0fdf4;
    border-color: #d1fae5;
}

[data-theme="natur"] .tiptap-history-preview-info {
    color: #3d5a4c;
}

[data-theme="natur"] .tiptap-history-preview-info i {
    color: #10b981;
}

[data-theme="natur"] .tiptap-history-preview-close {
    background: #d1fae5;
    color: #3d5a4c;
}

[data-theme="natur"] .tiptap-history-preview-close:hover {
    background: #a7f3d0;
}

[data-theme="natur"] .tiptap-history-preview-use {
    background: #10b981;
    color: #fff;
}

/* ============================================================================
   History Progress Toast (for bulk deletions)
   ============================================================================ */

.tiptap-history-progress-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    min-width: 280px;
    max-width: 350px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 0;
    z-index: 10001;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    overflow: hidden;
}

.tiptap-history-progress-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.tiptap-progress-toast-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 0.85rem;
    color: #333;
}

.tiptap-progress-toast-header i {
    color: var(--bs-primary, #f2d123);
}

.tiptap-progress-toast-body {
    padding: 1rem;
}

.tiptap-progress-toast-bar {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.tiptap-progress-toast-fill {
    height: 100%;
    background: var(--bs-primary, #f2d123);
    border-radius: 4px;
    transition: width 0.15s ease;
}

.tiptap-progress-toast-text {
    font-size: 0.8rem;
    color: #666;
    text-align: center;
}

/* Dark theme */
[data-theme="dark"] .tiptap-history-progress-toast {
    background: #2a2a2a;
    border-color: #444;
}

[data-theme="dark"] .tiptap-progress-toast-header {
    background: #333;
    border-color: #444;
    color: #e5e7eb;
}

[data-theme="dark"] .tiptap-progress-toast-bar {
    background: #444;
}

[data-theme="dark"] .tiptap-progress-toast-fill {
    background: #fbbf24;
}

[data-theme="dark"] .tiptap-progress-toast-text {
    color: #aaa;
}

/* Zkriva theme */
[data-theme="zkriva"] .tiptap-history-progress-toast {
    background: #fffdf8;
    border-color: #e8e2d9;
}

[data-theme="zkriva"] .tiptap-progress-toast-header {
    background: #f8f4ec;
    border-color: #e8e2d9;
    color: #5c5240;
}

[data-theme="zkriva"] .tiptap-progress-toast-fill {
    background: #d4a800;
}

/* Lilia theme */
[data-theme="lilia"] .tiptap-history-progress-toast {
    background: #fef7fa;
    border-color: #f3e4ea;
}

[data-theme="lilia"] .tiptap-progress-toast-header {
    background: #fdf2f8;
    border-color: #f3e4ea;
    color: #6b4c5a;
}

[data-theme="lilia"] .tiptap-progress-toast-fill {
    background: #d4729c;
}

/* Natur theme */
[data-theme="natur"] .tiptap-history-progress-toast {
    background: #f0fdf4;
    border-color: #d1fae5;
}

[data-theme="natur"] .tiptap-progress-toast-header {
    background: #ecfdf5;
    border-color: #d1fae5;
    color: #3d5a4c;
}

[data-theme="natur"] .tiptap-progress-toast-fill {
    background: #10b981;
}

/* ============================================================================
   History Restore Button (floating)
   ============================================================================ */

.tiptap-history-restore-btn {
    display: none;
    position: fixed;
    bottom: 80px;
    right: 24px;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(40, 167, 69, 0.4);
    z-index: 100;
    transition: transform 0.15s, box-shadow 0.15s;
}

.tiptap-history-restore-btn.visible {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tiptap-history-restore-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.5);
}

/* ============================================================================
   History Modals
   ============================================================================ */

.tiptap-history-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tiptap-history-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    width: 90%;
    max-width: 460px;
    animation: slideUp 0.2s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-theme="dark"] .tiptap-history-modal {
    background: #2a2a2a;
}

.tiptap-history-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e5e5;
}

[data-theme="dark"] .tiptap-history-modal-header {
    border-bottom-color: #444;
}

.tiptap-history-modal-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tiptap-history-modal-body {
    padding: 1.25rem;
}

.tiptap-history-modal-body p {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #555;
}

[data-theme="dark"] .tiptap-history-modal-body p {
    color: #bbb;
}

.tiptap-history-modal-info {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(242, 209, 35, 0.12);
    border-radius: 6px;
    font-size: 0.8rem;
    color: #c0a51b;
}

[data-theme="dark"] .tiptap-history-modal-info {
    background: #1a3a4a;
    color: #4fc3f7;
}

.tiptap-history-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e5e5e5;
    background: #f9f9f9;
    border-radius: 0 0 12px 12px;
}

[data-theme="dark"] .tiptap-history-modal-footer {
    background: #222;
    border-top-color: #444;
}

/* ============================================================================
   History Compare Modal (side by side)
   ============================================================================ */

.tiptap-history-compare-overlay {
    padding: 1rem;
}

.tiptap-history-compare-modal {
    max-width: 95%;
    width: 1200px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

/* Header actions container */
.tiptap-history-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Fullscreen button */
.tiptap-history-modal-fullscreen-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: #666;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.tiptap-history-modal-fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #333;
}

[data-theme="dark"] .tiptap-history-modal-fullscreen-btn {
    color: #aaa;
}

[data-theme="dark"] .tiptap-history-modal-fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Fullscreen mode for compare modal */
.tiptap-history-compare-modal.fullscreen {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0;
}

.tiptap-history-compare-overlay:has(.fullscreen) {
    padding: 0;
}

.tiptap-history-compare-modal.fullscreen .tiptap-history-compare-body {
    flex: 1;
}

.tiptap-history-compare-modal.fullscreen .tiptap-history-compare-content {
    padding: 2rem 3rem;
    font-size: 1.05rem;
}

.tiptap-history-compare-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.tiptap-history-compare-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.tiptap-history-compare-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f5f5f5;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    flex-shrink: 0;
}

[data-theme="dark"] .tiptap-history-compare-title {
    background: #333;
    color: #ddd;
}

.tiptap-history-compare-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.7;
    background: #fff;
    text-align: justify;
}

/* Mise en page pour la modale de comparaison */
.tiptap-history-compare-content p {
    margin-bottom: 1em;
}

.tiptap-history-compare-content h1,
.tiptap-history-compare-content h2,
.tiptap-history-compare-content h3 {
    font-weight: bold;
    margin: 1em 0 0.5em;
}

.tiptap-history-compare-content h1 {
    font-size: 1.5em;
}

.tiptap-history-compare-content h2 {
    font-size: 1.25em;
}

.tiptap-history-compare-content h3 {
    font-size: 1.1em;
}

.tiptap-history-compare-content blockquote {
    border-left: 3px solid #ccc;
    margin: 1em 0;
    padding-left: 1em;
    font-style: italic;
    color: #666;
}

.tiptap-history-compare-content ul,
.tiptap-history-compare-content ol {
    margin: 1em 0;
    padding-left: 2em;
}

[data-theme="dark"] .tiptap-history-compare-content {
    background: #1e1e1e;
    color: #e0e0e0;
}

[data-theme="dark"] .tiptap-history-compare-content blockquote {
    border-left-color: #555;
    color: #aaa;
}

/* ============================================================================
   Diff Highlighting Styles
   ============================================================================ */

.tiptap-history-compare-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e5e5;
}

[data-theme="dark"] .tiptap-history-compare-info {
    background: #2a2a2a;
    border-bottom-color: #444;
}

.tiptap-history-compare-legend {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.tiptap-history-compare-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #666;
}

[data-theme="dark"] .tiptap-history-compare-legend .legend-item {
    color: #aaa;
}

.diff-inserted-sample {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #d4edda;
    border: 1px solid #28a745;
    border-radius: 3px;
}

.diff-deleted-sample {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #f8d7da;
    border: 1px solid #dc3545;
    border-radius: 3px;
    text-decoration: line-through;
}

.tiptap-history-diff-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.diff-stat-info {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #666;
}

.diff-stat-added {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #28a745;
}

.diff-stat-removed {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #dc3545;
}

[data-theme="dark"] .diff-stat-info {
    color: #aaa;
}

/* Diff text highlighting */
.tiptap-history-diff-content {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.diff-inserted {
    background-color: #d4edda;
    color: #155724;
    padding: 0.1em 0.2em;
    border-radius: 2px;
    text-decoration: none;
}

.diff-deleted {
    background-color: #f8d7da;
    color: #721c24;
    padding: 0.1em 0.2em;
    border-radius: 2px;
    text-decoration: line-through;
}

/* Dark theme diff highlighting */
[data-theme="dark"] .diff-inserted {
    background-color: #1e4620;
    color: #8bc34a;
}

[data-theme="dark"] .diff-deleted {
    background-color: #4a1c1c;
    color: #ef9a9a;
}

[data-theme="dark"] .diff-inserted-sample {
    background: #1e4620;
    border-color: #4caf50;
}

[data-theme="dark"] .diff-deleted-sample {
    background: #4a1c1c;
    border-color: #f44336;
}

[data-theme="dark"] .diff-stat-added {
    color: #4caf50;
}

[data-theme="dark"] .diff-stat-removed {
    color: #f44336;
}

/* Zkriva theme diff highlighting */
[data-theme="zkriva"] .diff-inserted {
    background-color: #d4edda;
    color: #155724;
}

[data-theme="zkriva"] .diff-deleted {
    background-color: #f8d7da;
    color: #721c24;
}

[data-theme="zkriva"] .diff-inserted-sample {
    background: #d4edda;
    border-color: #28a745;
}

[data-theme="zkriva"] .diff-deleted-sample {
    background: #f8d7da;
    border-color: #dc3545;
}

[data-theme="zkriva"] .diff-stat-added {
    color: #28a745;
}

[data-theme="zkriva"] .diff-stat-removed {
    color: #dc3545;
}

/* Lilia theme diff highlighting */
[data-theme="lilia"] .diff-inserted {
    background-color: #d4edda;
    color: #155724;
}

[data-theme="lilia"] .diff-deleted {
    background-color: #fce4ec;
    color: #880e4f;
}

[data-theme="lilia"] .diff-inserted-sample {
    background: #d4edda;
    border-color: #28a745;
}

[data-theme="lilia"] .diff-deleted-sample {
    background: #fce4ec;
    border-color: #d81b60;
}

[data-theme="lilia"] .diff-stat-added {
    color: #28a745;
}

[data-theme="lilia"] .diff-stat-removed {
    color: #d81b60;
}

/* Natur theme diff highlighting */
[data-theme="natur"] .diff-inserted {
    background-color: #d4edda;
    color: #155724;
}

[data-theme="natur"] .diff-deleted {
    background-color: #ffebee;
    color: #c62828;
}

[data-theme="natur"] .diff-inserted-sample {
    background: #d4edda;
    border-color: #28a745;
}

[data-theme="natur"] .diff-deleted-sample {
    background: #ffebee;
    border-color: #ef5350;
}

[data-theme="natur"] .diff-stat-added {
    color: #28a745;
}

[data-theme="natur"] .diff-stat-removed {
    color: #ef5350;
}

/* Formatted content with diff coloring */
.tiptap-history-formatted-content {
    /* Hérite de tiptap-history-compare-content pour la mise en forme */
}

/* S'assurer que les diff spans héritent du style parent (bold, italic, etc.) */
.tiptap-history-formatted-content .diff-inserted,
.tiptap-history-formatted-content .diff-deleted {
    font-weight: inherit;
    font-style: inherit;
    font-size: inherit;
}

/* Titres avec diff coloring */
.tiptap-history-formatted-content h1 .diff-inserted,
.tiptap-history-formatted-content h2 .diff-inserted,
.tiptap-history-formatted-content h3 .diff-inserted,
.tiptap-history-formatted-content strong .diff-inserted,
.tiptap-history-formatted-content b .diff-inserted {
    font-weight: bold;
}

.tiptap-history-formatted-content h1 .diff-deleted,
.tiptap-history-formatted-content h2 .diff-deleted,
.tiptap-history-formatted-content h3 .diff-deleted,
.tiptap-history-formatted-content strong .diff-deleted,
.tiptap-history-formatted-content b .diff-deleted {
    font-weight: bold;
}

/* Italique avec diff coloring */
.tiptap-history-formatted-content em .diff-inserted,
.tiptap-history-formatted-content i .diff-inserted,
.tiptap-history-formatted-content em .diff-deleted,
.tiptap-history-formatted-content i .diff-deleted {
    font-style: italic;
}

/* Unified diff view (single panel) */
.tiptap-history-diff-view .diff-unified {
    flex: 1;
    max-width: 100%;
}

.tiptap-history-compare-divider {
    width: 1px;
    background: #e5e5e5;
    flex-shrink: 0;
}

[data-theme="dark"] .tiptap-history-compare-divider {
    background: #444;
}

/* ============================================================================
   History Load More Link (Pagination)
   ============================================================================ */

.tiptap-history-load-more {
    padding: 0.75rem 1rem;
    text-align: center;
}

.tiptap-history-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0;
    font-size: 0.8rem;
    font-weight: 400;
    color: #c0a51b;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.tiptap-history-load-more-btn:hover {
    color: #f2d123;
    text-decoration: underline;
}

.tiptap-history-load-more-btn i {
    font-size: 0.85rem;
}

.tiptap-history-remaining {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Theme adaptations */
[data-theme="dark"] .tiptap-history-load-more-btn {
    color: #fbbf24;
}

[data-theme="dark"] .tiptap-history-load-more-btn:hover {
    color: #fcd34d;
}

[data-theme="zkriva"] .tiptap-history-load-more-btn {
    color: #d4a800;
}

[data-theme="zkriva"] .tiptap-history-load-more-btn:hover {
    color: #f2d123;
}

[data-theme="lilia"] .tiptap-history-load-more-btn {
    color: #d4729c;
}

[data-theme="lilia"] .tiptap-history-load-more-btn:hover {
    color: #e091b3;
}

[data-theme="natur"] .tiptap-history-load-more-btn {
    color: #10b981;
}

[data-theme="natur"] .tiptap-history-load-more-btn:hover {
    color: #34d399;
}

/* Responsive */
@media (max-width: 768px) {
    .tiptap-history-sidebar.open {
        width: 100%;
        max-width: 300px;
        min-width: 0;
    }

    .tiptap-history-compare-body {
        flex-direction: column;
    }

    .tiptap-history-compare-divider {
        width: 100%;
        height: 1px;
    }

    .tiptap-history-restore-btn {
        bottom: 100px;
        right: 16px;
    }

    .tiptap-history-preview-banner {
        padding: 0.5rem 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }

    .tiptap-history-preview-info {
        font-size: 0.75rem;
        width: 100%;
        justify-content: center;
    }

    .tiptap-history-preview-actions {
        width: 100%;
        justify-content: center;
    }

    .tiptap-history-preview-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }
}