/* ============================================================
   ThxEditor — Modular rich text editor styles
   Self-contained. Uses CSS variables with fallbacks.
   ============================================================ */

/* ── Quill overrides ──────────────────────────────────────── */
.ql-toolbar.ql-snow {
    border: 1px solid var(--border, #ddd);
    border-radius: 8px 8px 0 0;
    background: var(--bg-card, #f5f5f5);
}
.ql-container.ql-snow {
    border: 1px solid var(--border, #ddd);
    border-top: none;
    border-radius: 0 0 8px 8px;
    font-family: var(--font-body, 'Basier Circle', -apple-system, sans-serif);
    font-size: 15px;
    min-height: 200px;
    flex: 1;
}
.ql-editor {
    padding: 20px 24px;
    line-height: 1.7;
    color: var(--fg, #333);
}
.ql-editor.ql-blank::before {
    color: var(--fg-dim, #999);
    font-style: italic;
}
.ql-snow .ql-stroke { stroke: var(--fg-dim, #777); }
.ql-snow .ql-fill { fill: var(--fg-dim, #777); }
.ql-snow .ql-picker { color: var(--fg, #333); }
.ql-snow .ql-picker-options { background: var(--bg-card, #fff); border-color: var(--border, #ddd); }

/* Dark mode */
body.dark-mode .ql-toolbar.ql-snow { background: #2a2a2e; border-color: #444; }
body.dark-mode .ql-container.ql-snow { border-color: #444; background: #1e1e22; }
body.dark-mode .ql-editor { color: #d4d4d4; }
body.dark-mode .ql-editor.ql-blank::before { color: #666; }
body.dark-mode .ql-snow .ql-stroke { stroke: #aaa; }
body.dark-mode .ql-snow .ql-fill { fill: #aaa; }
body.dark-mode .ql-snow .ql-picker { color: #d4d4d4; }
body.dark-mode .ql-snow .ql-picker-options { background: #2a2a2e; border-color: #444; }
body.dark-mode .ql-snow .ql-active .ql-stroke { stroke: var(--accent, #0074ff); }
body.dark-mode .ql-snow .ql-active .ql-fill { fill: var(--accent, #0074ff); }
body.dark-mode .ql-snow .ql-active { color: var(--accent, #0074ff); }

/* ── Video embed ──────────────────────────────────────────── */
.ql-video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin: 16px 0;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}
.ql-video-embed iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}
.thx-video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin: 24px 0;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}
.thx-video-embed iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

/* ── Gallery (editor preview) ─────────────────────────────── */
.ql-gallery {
    margin: 24px 0;
    cursor: pointer;
}
.ql-gallery-label {
    font-size: 10px;
    color: var(--fg-dim, #999);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0.5;
}
.ql-gallery-preview .ql-gallery-preview-item {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.ql-gallery-preview .ql-gallery-preview-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.ql-gallery-preview--carousel .ql-gallery-preview-item { display: none; }
.ql-gallery-preview--carousel .ql-gallery-preview-item:first-child { display: block; }
.ql-gallery-preview--carousel .ql-gallery-preview-item img {
    height: auto;
    max-height: 500px;
    object-fit: contain;
    background: #000;
}
.ql-gallery-empty {
    text-align: center;
    padding: 20px;
    color: var(--fg-dim, #999);
    font-size: 13px;
}

/* ── Gallery (published) ──────────────────────────────────── */
.thx-gallery { margin: 24px 0; border-radius: 10px; overflow: hidden; }
.thx-gallery-row { display: flex; gap: 4px; margin-top: 4px; }
.thx-gallery-row:first-child { margin-top: 0; }
.thx-gallery--collage .thx-gallery-item { flex: 1; min-width: 0; overflow: hidden; cursor: zoom-in; }
.thx-gallery--collage .thx-gallery-item img { width: 100%; height: 200px; object-fit: cover; display: block; transition: opacity 0.15s; }
.thx-gallery--collage .thx-gallery-item:hover img { opacity: 0.85; }
.thx-gallery--carousel .thx-gallery-item { display: none; }
.thx-gallery--carousel .thx-gallery-item:first-child { display: block; }
.thx-gallery--carousel .thx-gallery-item img { width: 100%; max-height: 500px; object-fit: contain; display: block; cursor: zoom-in; background: #000; }

/* ── Gallery dialog ───────────────────────────────────────── */
.thx-ed-gallery-layout { display: flex; gap: 8px; margin-bottom: 12px; }
.thx-ed-layout-btn {
    flex: 1; padding: 8px; border: 1px solid var(--border, #ddd); border-radius: 6px;
    background: var(--bg-input, #f3f3f3); color: var(--fg-dim, #777); cursor: pointer;
    font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.thx-ed-layout-btn.active { border-color: var(--accent, #0074ff); color: var(--accent, #0074ff); background: var(--accent-dim, rgba(0,116,255,0.1)); }
.thx-ed-gallery-drop {
    border: 2px dashed var(--border, #ddd); border-radius: 8px; padding: 24px;
    text-align: center; cursor: pointer; color: var(--fg-dim, #777);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.thx-ed-gallery-drop:hover, .thx-ed-gallery-drop.drag-over { border-color: var(--accent, #0074ff); color: var(--accent, #0074ff); }
.thx-ed-gallery-drop i { font-size: 24px; }
.thx-ed-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; min-height: 10px; }
.thx-ed-gallery-thumb {
    position: relative; width: 72px; height: 54px; border-radius: 4px; overflow: hidden;
    border: 1px solid var(--border, #ddd); cursor: grab;
}
.thx-ed-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thx-ed-gallery-thumb.dragging { opacity: 0.3; }
.thx-ed-gallery-thumb.drag-target { outline: 2px solid var(--accent, #0074ff); outline-offset: -2px; }
.thx-ed-gallery-thumb-num {
    position: absolute; bottom: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; font-size: 9px;
    display: flex; align-items: center; justify-content: center;
}
.thx-ed-gallery-thumb-remove {
    position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
    border-radius: 50%; border: none; background: rgba(0,0,0,0.6); color: #fff;
    font-size: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.thx-ed-gallery-status { font-size: 12px; color: var(--fg-dim, #999); margin-top: 8px; }

/* ── Context menu ─────────────────────────────────────────── */
.thx-editor-ctx {
    position: fixed; z-index: 9500;
    background: var(--bg-card, #fff); border: 1px solid var(--border, #ddd);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    padding: 4px 0; min-width: 180px; font-size: 13px;
}
.thx-editor-ctx-item {
    display: flex; align-items: center; gap: 10px; padding: 7px 14px;
    cursor: pointer; transition: background 0.12s;
    color: var(--fg, #333);
}
.thx-editor-ctx-item:hover { background: var(--accent-dim, rgba(0,116,255,0.15)); color: var(--fg-bright, #000); }
.thx-editor-ctx-item--danger:hover { background: rgba(239,68,68,0.15); color: #ef4444; }
.thx-editor-ctx-divider { height: 1px; margin: 4px 8px; background: var(--border, #ddd); }

/* ── Dialog (built-in) ────────────────────────────────────── */
.thx-editor-dialog-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.55); z-index: 10000;
    display: flex; align-items: center; justify-content: center;
}
.thx-editor-dialog {
    background: var(--bg-card, #fff); border: 1px solid var(--border, #ddd);
    border-radius: 12px; padding: 20px 24px; min-width: 320px; max-width: 90vw;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.thx-editor-dialog-title { font-size: 16px; font-weight: 700; color: var(--fg, #333); margin-bottom: 8px; }
.thx-editor-dialog-message { font-size: 12px; color: var(--fg-dim, #777); margin-bottom: 12px; }
.thx-editor-dialog-input {
    width: 100%; padding: 8px 12px; border: 1px solid var(--border, #ddd);
    border-radius: 6px; background: var(--bg-input, #f3f3f3); color: var(--fg, #333);
    font-size: 14px; box-sizing: border-box;
}
.thx-editor-dialog-input:focus { outline: none; border-color: var(--accent, #0074ff); }
.thx-editor-dialog-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.thx-editor-dialog-btn {
    padding: 8px 16px; border-radius: 6px; border: 1px solid var(--border, #ddd);
    cursor: pointer; font-size: 13px; font-weight: 500;
    background: var(--bg-card, #fff); color: var(--fg, #333);
}
.thx-editor-dialog-btn--confirm { background: var(--accent, #0074ff); color: #fff; border-color: var(--accent, #0074ff); }
.thx-editor-dialog-btn--confirm:disabled { opacity: 0.4; cursor: default; }
.thx-editor-dialog-btn--danger { background: var(--danger, #ef4444); color: #fff; border-color: var(--danger, #ef4444); }
.thx-editor-dialog-btn--cancel { background: transparent; }
.thx-editor-dialog-btn--cancel:hover { background: var(--bg-card-hover, #eee); }

/* ── Lightbox ─────────────────────────────────────────────── */
.thx-lightbox-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.92); z-index: 99999;
    display: flex; align-items: center; justify-content: center;
}
.thx-lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 4px; }
.thx-lightbox-close { position: absolute; top: 16px; right: 20px; color: #fff; font-size: 24px; cursor: pointer; opacity: 0.7; z-index: 1; }
.thx-lightbox-close:hover { opacity: 1; }
.thx-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 28px; cursor: pointer; opacity: 0.5; padding: 20px; z-index: 1; }
.thx-lightbox-nav:hover { opacity: 1; }
.thx-lightbox-prev { left: 8px; }
.thx-lightbox-next { right: 8px; }
.thx-lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 14px; }

/* Dark mode — context menu + dialogs */
body.dark-mode .thx-editor-ctx { background: #2a2a2e; border-color: #444; }
body.dark-mode .thx-editor-ctx-item { color: #d4d4d4; }
body.dark-mode .thx-editor-ctx-divider { background: #444; }
body.dark-mode .thx-editor-dialog { background: #2a2a2e; border-color: #444; }
body.dark-mode .thx-editor-dialog-title { color: #fff; }
body.dark-mode .thx-editor-dialog-input { background: #1e1e22; border-color: #444; color: #d4d4d4; }
body.dark-mode .thx-editor-dialog-btn { background: #333; border-color: #444; color: #d4d4d4; }
body.dark-mode .thx-editor-dialog-btn--cancel { background: transparent; }
body.dark-mode .thx-ed-layout-btn { background: #1e1e22; border-color: #444; color: #aaa; }
body.dark-mode .thx-ed-gallery-drop { border-color: #444; color: #aaa; }
body.dark-mode .thx-ed-gallery-thumb { border-color: #444; }