@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Merriweather:wght@400;700;900&display=swap');

/* --- 1. BASE & SCROLLBARS --- */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f3f4f6; 
    -webkit-font-smoothing: antialiased; 
    overflow-x: hidden; 
}
.hidden { display: none !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; transition: background 0.2s; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ========================================================= */
/* --- 🧵 THREAD & TIMELINE UI OVERHAUL --- */
/* ========================================================= */

#app { max-width: 1400px !important; width: 100% !important; padding: 0 !important; }
@media (min-width: 768px) { #app { padding: 0.5rem !important; } }

#editor-view .glass-panel {
    background: transparent !important; border: none !important; box-shadow: none !important;
    padding: 0 !important; max-width: 100% !important; margin: 0 auto !important;
}

hr.my-8 { margin-top: 1.5rem !important; margin-bottom: 1rem !important; border-color: #e2e8f0 !important; }
.mb-8 { margin-bottom: 1.25rem !important; }

/* Thread Containers */
.static-field-group, .dynamic-content-block, div:has(> label.uppercase), div:has(> label.static-label) {
    position: relative !important; padding-left: 0.85rem !important; padding-right: 0 !important; 
    margin-bottom: 1.25rem !important; border: none !important; background: transparent !important;
    box-shadow: none !important; padding-top: 0 !important;
}
@media (min-width: 768px) {
    .static-field-group, .dynamic-content-block, div:has(> label.uppercase), div:has(> label.static-label) {
        padding-left: 1.5rem !important; 
    }
}

/* The Vertical Line */
.static-field-group::before, .dynamic-content-block::before, div:has(> label.uppercase)::before, div:has(> label.static-label)::before {
    content: ''; position: absolute; left: 0.15rem; top: 2rem; bottom: -2rem; width: 2px; background: #cbd5e1; border-radius: 3px; z-index: 1;
}
@media (min-width: 768px) {
    .static-field-group::before, .dynamic-content-block::before, div:has(> label.uppercase)::before, div:has(> label.static-label)::before {
        left: 0.25rem; width: 3px;
    }
}
.dynamic-content-block:last-of-type::before { background: linear-gradient(to bottom, #cbd5e1 0%, transparent 100%); }

/* The Timeline Node */
.static-field-group::after, .dynamic-content-block::after, div:has(> label.uppercase)::after, div:has(> label.static-label)::after {
    content: ''; position: absolute; left: -0.15rem; top: 0.5rem; width: 10px; height: 10px;
    background: #ffffff; border: 2px solid #4f46e5; border-radius: 50%; z-index: 2; box-shadow: 0 0 0 3px #f3f4f6;
}
@media (min-width: 768px) {
    .static-field-group::after, .dynamic-content-block::after, div:has(> label.uppercase)::after, div:has(> label.static-label)::after {
        left: -0.05rem; width: 14px; height: 14px; border-width: 3px;
    }
}

/* Label Pill */
.static-label, .dynamic-content-block h3, label.uppercase {
    display: inline-flex !important; align-items: center; background: #1e293b !important; color: #f8fafc !important;
    padding: 4px 10px !important; border-radius: 6px !important; font-size: 0.65rem !important; 
    font-weight: 700 !important; letter-spacing: 0.05em; margin-bottom: 6px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: relative; z-index: 3; border: none !important; width: auto !important; 
}

/* The Editor Box */
.rich-editor-wrapper, .static-input, .dynamic-content-block input[type="text"] {
    background: #ffffff !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; 
    box-shadow: 0 4px 15px -2px rgba(0,0,0,0.03) !important; width: 100% !important; position: relative; z-index: 3;
    transition: all 0.2s ease-in-out !important;
}

.static-input, .dynamic-content-block input[type="text"] {
    padding: 0.6rem 0.5rem !important; font-size: 0.85rem !important;
}

.rich-editor-wrapper:focus-within, .static-input:focus, .dynamic-content-block input[type="text"]:focus {
    transform: translateY(-2px); box-shadow: 0 12px 25px -5px rgba(79, 70, 229, 0.1) !important; border-color: #6366f1 !important;
}

.rich-toolbar {
    display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: #f8fafc;
    border-bottom: 1px solid #e2e8f0; border-radius: 8px 8px 0 0;
}

.rich-content-area {
    min-height: 80px; padding: 0.75rem 0.5rem; outline: none; line-height: 1.7; color: #334155; overflow-y: auto;
}
@media (min-width: 768px) { .rich-content-area { padding: 1rem 1rem; } }


/* ========================================================= */
/* --- 📝 CUSTOM PLACEHOLDERS (Fixes empty space bug) --- */
/* ========================================================= */

.rich-content-area:empty:before,
.rich-content-area:not(:focus):has(> br:first-child:last-child):before { 
    content: attr(data-placeholder); color: #94a3b8; font-style: normal !important; pointer-events: none; display: block; 
}

/* 1. MAIN TOP HEADLINE (Only at the very top of the page) */
#static-headline-container .rich-content-area.headline-editor:empty:before,
#static-headline-container .rich-content-area.headline-editor:not(:focus):has(> br:first-child:last-child):before,
#article-headline-container .rich-content-area.headline-editor:empty:before,
#article-headline-container .rich-content-area.headline-editor:not(:focus):has(> br:first-child:last-child):before { 
    content: "The main title of the article"; 
    font-style: normal !important; 
    color: #94a3b8; 
}

/* 2. MIDDLE ARTICLE HEADINGS (H2, H3, H4 added via "Add Block") */
.dynamic-content-block .rich-content-area.headline-editor:empty:before,
.dynamic-content-block .rich-content-area.headline-editor:not(:focus):has(> br:first-child:last-child):before { 
    content: "Heading (middle of article)..."; 
    font-style: normal !important; 
    color: #94a3b8; 
}

/* 3. CAPTION BOXES */
.rich-content-area.caption-editor:empty:before,
.rich-content-area.caption-editor:not(:focus):has(> br:first-child:last-child):before { 
    content: "Enter image caption..."; 
    font-style: normal !important; 
    color: #94a3b8; 
    opacity: 0.7; 
}

/* Dynamic Block specific icons */
.drag-handle {
    position: absolute; top: 0rem; right: 2rem; left: auto !important; width: 28px !important; height: 28px !important;
    background: transparent !important; border: none !important; color: #94a3b8; z-index: 5; display: flex; align-items: center; justify-content: center;
}
.drag-handle:hover { color: #1e293b !important; cursor: grab; }

.remove-block-btn {
    top: 0rem !important; right: 0rem !important; transform: none !important; width: 28px !important; height: 28px !important;
    background: transparent !important; color: #ef4444 !important; display: flex; align-items: center; justify-content: center;
    border: none; transition: all 0.2s ease;
}
.remove-block-btn:hover { background: #fee2e2 !important; color: #dc2626 !important; border-radius: 0 8px 0 8px !important; }

/* --- 8. SMOOTH/HEAVY "ADD BLOCK" & REPO DROPDOWNS --- */
.border-dashed {
    background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 99px !important; padding: 0.4rem 0.6rem !important; 
    margin-left: 0.85rem !important; margin-top: 0.25rem !important; margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important; display: flex !important; flex-direction: row !important; align-items: center !important;
    justify-content: flex-start !important; gap: 0.5rem !important; width: max-content !important; max-width: 95vw !important; 
}
@media (min-width: 768px) { .border-dashed { margin-left: 1.5rem !important; } }

/* Apply heavy smooth feel to Dropdowns */
.border-dashed select, #target-repo-select, #block-type-select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1em;
    padding: 0.4rem 2rem 0.4rem 0.8rem !important; border-radius: 99px !important; border: 1px solid #e2e8f0 !important;
    background-color: #f8fafc !important; font-size: 0.75rem !important; font-weight: 600 !important; min-width: 150px !important; cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; 
}
.border-dashed select:hover, #target-repo-select:hover, #block-type-select:hover { border-color: #cbd5e1 !important; }
.border-dashed select:focus, #target-repo-select:focus, #block-type-select:focus { 
    border-color: #6366f1 !important; background-color: #fff !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}
.border-dashed select:active, #target-repo-select:active, #block-type-select:active {
    transform: scale(0.97); box-shadow: inset 0 2px 5px rgba(0,0,0,0.05) !important;
}

.border-dashed button {
    padding: 0.4rem 1rem !important; border-radius: 99px !important; font-size: 0.75rem !important; height: auto !important; transition: all 0.2s ease;
}

/* --- 9. MS WORD STYLE TABLE RIBBON --- */
.table-wrapper { overflow-x: auto; background: white; border: 1px solid #e2e8f0; border-radius: 0.5rem; margin-top: 10px; max-width: 100%; }
.table-toolbar-container { background: #f8fafc; border-radius: 0.5rem; border: 1px solid #e2e8f0; margin-bottom: 12px; padding: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
.table-toolbar-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; padding: 2px; }
.table-toolbar-row:not(:last-child) { border-bottom: 1px solid #f1f5f9; padding-bottom: 8px; margin-bottom: 6px; }
.table-tool-group { display: flex; flex-wrap: wrap; gap: 4px; border-right: 1px solid #cbd5e1; padding-right: 8px; margin-right: 2px; align-items: center; }
.table-tool-group:last-child { border-right: none; padding-right: 0; }

.sheet-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.sheet-table th, .sheet-table td { border: 1px solid #e2e8f0; padding: 0; vertical-align: top; position: relative; transition: background-color 0.2s; }
.sheet-table thead td { background-color: #f8fafc; border-bottom: 2px solid #cbd5e1; }
.sheet-table tbody tr:hover td { background-color: #f8fafc; }
.sheet-cell { width: 100%; outline: none; padding: 12px; min-height: 44px; font-size: 0.9rem; color: #334155; cursor: text; }
.sheet-cell:focus { background-color: rgba(99, 102, 241, 0.03) !important; box-shadow: inset 0 0 0 2px #6366f1; }
/* Table Cell Placeholders (Fixed for empty space bug) */
.sheet-cell:empty:before,
.sheet-cell:not(:focus):has(> br:first-child:last-child):before { 
    content: attr(data-placeholder); 
    color: #94a3b8; 
    font-style: normal !important; /* Removed italic to match your preference */
    pointer-events: none; 
    display: block; 
    opacity: 0.7; /* Faded effect */
}
/* --- 10. ANIMATED "SAVED" POP-IN --- */
.save-indicator {
    position: fixed; bottom: 24px; right: 24px; background: #ffffff; padding: 10px 20px; border-radius: 99px; box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0; font-size: 0.8rem; font-weight: 600; color: #475569; opacity: 0; transform: translateY(30px) scale(0.85); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; pointer-events: none;
}
.save-indicator.visible { opacity: 1; transform: translateY(0) scale(1); }

/* --- 11. BUTTONS, TAGS, & MODALS --- */
#publish-button, #preview-button, #download-md-button { position: relative; z-index: 10; border-radius: 12px !important; margin-top: 1rem !important; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); transition: all 0.2s ease; }
#publish-button:hover, #preview-button:hover { transform: translateY(-2px); box-shadow: 0 15px 20px -3px rgba(0,0,0,0.15); }

.tag-suggestions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.tag-chip, .category-chip, .country-chip { font-size: 0.7rem; font-weight: 600; padding: 0.35rem 0.75rem; border-radius: 9999px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; user-select: none; }
.tag-chip { background-color: #f1f5f9; color: #475569; } .tag-chip:hover { background-color: #e2e8f0; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.category-chip { background-color: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; } .category-chip:hover { background-color: #dbeafe; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(29, 78, 216, 0.1); }
.country-chip { background-color: #ecfdf5; color: #047857; border-color: #6ee7b7; } .country-chip:hover { background-color: #d1fae5; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(4, 120, 87, 0.1); }
.country-list-scroll { max-height: 220px; overflow-y: auto; padding: 8px; border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 0.5rem; }

textarea, input[type="email"], input[type="number"], select { transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; outline: none; font-family: 'Inter', sans-serif; }
textarea:focus, input:focus, select:focus { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); background-color: #fff; }

.tool-btn { padding: 6px 10px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; color: #64748b; font-size: 0.85rem; background: transparent; display: flex; align-items: center; gap: 4px; transition: all 0.2s ease; }
.tool-btn:hover:not(:disabled) { background: #e2e8f0; color: #0f172a; } .tool-btn:active:not(:disabled) { transform: scale(0.92); }

.link-modal-overlay, .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(15, 23, 42, 0.5); z-index: 1000; backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: flex-start; padding-top: 15vh; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.link-modal-overlay.visible, .modal-overlay.visible { opacity: 1; pointer-events: all; }
.link-modal-content, .modal-content { background-color: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); width: 90%; max-width: 500px; transform: scale(0.9) translateY(-20px); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.link-modal-overlay.visible .link-modal-content, .modal-overlay.visible .modal-content { transform: scale(1) translateY(0); }
.link-modal-input { width: 100%; padding: 0.875rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 1rem; margin-bottom: 1.5rem; }
.link-modal-buttons { display: flex; justify-content: flex-end; gap: 0.75rem; }
.link-modal-btn { padding: 0.6rem 1.25rem; border-radius: 0.5rem; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; }
.link-modal-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.link-modal-btn.primary { background-color: #4f46e5; color: white; box-shadow: 0 4px 6px rgba(79, 70, 229, 0.2); }
.link-modal-btn.secondary { background-color: #f1f5f9; color: #475569; }

/* ========================================================= */
/* --- 🛡️ STRICT NATIVE TYPOGRAPHY LOCK (LIVE PREVIEW) --- */
/* ========================================================= */
[contenteditable="true"] * { background-color: transparent !important; font-size: inherit !important; font-family: inherit !important; color: inherit !important; }

.rich-content-area.headline-editor { font-family: 'Merriweather', serif !important; font-weight: 900 !important; font-size: 32px !important; line-height: 1.3 !important; color: #111827 !important; min-height: 50px; }
.rich-content-area.subheadline-editor { font-family: 'Inter', sans-serif !important; font-size: 16px !important; color: #4b5563 !important; line-height: 1.6 !important; font-weight: 400 !important; font-style: normal !important; }
.rich-content-area.subheadline-editor *, .rich-content-area.subheadline-editor:empty:before { font-style: normal !important; }

.rich-content-area.caption-editor { 
    font-family: 'Inter', sans-serif !important; font-size: 12px !important; color: #6b7280 !important; 
    text-align: center !important; display: block !important; 
    min-height: 30px !important; padding: 0.6rem 0.75rem !important; line-height: 1.4 !important; 
}

.rich-content-area:not(.headline-editor):not(.subheadline-editor):not(.caption-editor) { font-family: 'Merriweather', serif !important; font-size: 17px !important; line-height: 1.8 !important; color: #111827 !important; }
.rich-content-area.quote-editor { font-family: 'Merriweather', serif !important; font-size: 17px !important; line-height: 1.8 !important; color: #606770 !important; font-style: italic !important; border-left: 3px solid #cbd5e1 !important; padding-left: 1.5rem !important; margin-left: 0.5rem !important; }
.rich-content-area.quote-editor * { font-style: italic !important; color: #606770 !important; }

[contenteditable="true"] a { color: #2563eb !important; text-decoration: underline !important; font-weight: inherit; font-style: normal; text-underline-offset: 2px; }
[contenteditable="true"] i, [contenteditable="true"] em { font-style: italic !important; }
[contenteditable="true"] b, [contenteditable="true"] strong { font-weight: bold !important; }
[contenteditable="true"] u { text-decoration: underline !important; text-underline-offset: 2px; }