/* ============================================
   NOTES MODE CSS
   ============================================
   
   Features:
   - Resizable notes panel that slides in from left
   - Sidebar slides away when notes mode is active
   - Main content shifts to accommodate notes panel
   - Only visible on screens wider than 1080px
   - Modern, clean design matching the reference image
*/

/* ==========================================
   NOTES MODE VISIBILITY & RESPONSIVE
   ========================================== */

/* Hide notes mode feature on screens smaller than 1080px */
@media (max-width: 1080px) {
    .notes-mode-item {
        display: none !important;
    }
    
    .notes-panel {
        display: none !important;
    }
}

/* ==========================================
   NOTES PANEL CONTAINER
   ========================================== */

.notes-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 400px;
    height: 100vh;
    background: linear-gradient(to bottom right, rgba(250, 249, 246, 1), rgba(248, 246, 255, 0.8));
    border-right: 1px solid rgba(248, 246, 255, 0.5);
    z-index: 1200; /* Above sidebar (z-index: 1100) */
    transform: translateX(-100%); /* Hidden by default */
    transition: transform 0.3s ease, visibility 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
    visibility: hidden; /* Ensure completely hidden when not active */
}

/* Dark theme */
[data-theme="dark"] .notes-panel {
    background: #1a1a1a;
    border-right: 1px solid #2d2d2d;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}

/* Active state - panel visible */
.notes-panel.active {
    transform: translateX(0);
    visibility: visible; /* Show when active */
}

/* ==========================================
   NOTES PANEL HEADER
   ========================================== */

.notes-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(248, 246, 255, 0.6);
    background: linear-gradient(to right, rgba(250, 249, 246, 0.9), rgba(248, 246, 255, 0.7));
}

[data-theme="dark"] .notes-panel-header {
    background: #0f0f0f;
    border-bottom: 1px solid #2d2d2d;
}

.notes-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f1f1f;
    letter-spacing: -0.2px;
}

[data-theme="dark"] .notes-panel-title {
    color: #e5e5e5;
}

.notes-panel-title svg {
    color: #9d8fc9;
}

.notes-panel-close {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9d8fc9;
    transition: all 0.2s ease;
}

.notes-panel-close:hover {
    background: rgba(248, 246, 255, 0.8);
    color: #7c3aed;
}

[data-theme="dark"] .notes-panel-close {
    color: #999;
}

[data-theme="dark"] .notes-panel-close:hover {
    background: #2d2d2d;
    color: #e5e5e5;
}

/* ==========================================
   NOTES PANEL CONTENT
   ========================================== */

.notes-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Custom scrollbar */
.notes-panel-content::-webkit-scrollbar {
    width: 8px;
}

.notes-panel-content::-webkit-scrollbar-track {
    background: rgba(248, 246, 255, 0.3);
}

.notes-panel-content::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgba(157, 143, 201, 0.4), rgba(157, 143, 201, 0.6));
    border-radius: 4px;
}

.notes-panel-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, rgba(124, 58, 237, 0.5), rgba(124, 58, 237, 0.7));
}

[data-theme="dark"] .notes-panel-content::-webkit-scrollbar-track {
    background: #1a1a1a;
}

[data-theme="dark"] .notes-panel-content::-webkit-scrollbar-thumb {
    background: #404040;
}

[data-theme="dark"] .notes-panel-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ==========================================
   NOTE FORM CONTAINER
   ========================================== */

.note-form-container {
    margin-bottom: 32px;
}

.note-form-prompt {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
    font-size: 14px;
}

[data-theme="dark"] .note-form-prompt {
    color: #9ca3af;
}

.note-form {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
}

[data-theme="dark"] .note-form {
    background: #111827;
    border: 1px solid #374151;
}

/* ==========================================
   NOTE VERSE REFERENCE
   ========================================== */

.note-verse-reference {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    border-radius: 8px;
    margin-bottom: 16px;
    font-weight: 500;
    color: #1e40af;
}

[data-theme="dark"] .note-verse-reference {
    background: #1e3a5f;
    color: #93c5fd;
}

.note-verse-reference svg {
    flex-shrink: 0;
}

/* ==========================================
   NOTE HIGHLIGHTED TEXT
   ========================================== */

.note-highlighted-text {
    margin-bottom: 16px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

[data-theme="dark"] .note-highlighted-text {
    background: #1f2937;
    border: 1px solid #374151;
}

.highlighted-text-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .highlighted-text-label {
    color: #9ca3af;
}

.highlighted-text-content {
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
    font-style: italic;
}

[data-theme="dark"] .highlighted-text-content {
    color: #d1d5db;
}

/* ==========================================
   FORM ELEMENTS
   ========================================== */

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
    color: #374151;
}

[data-theme="dark"] .form-group label {
    color: #e5e7eb;
}

.note-input,
.note-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s ease;
    background: #ffffff;
    color: #111827;
}

[data-theme="dark"] .note-input,
[data-theme="dark"] .note-textarea {
    background: #374151;
    border: 1px solid #4b5563;
    color: #f9fafb;
}

.note-input:focus,
.note-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.note-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-help-text {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
}

[data-theme="dark"] .form-help-text {
    color: #9ca3af;
}

/* ==========================================
   FORM ACTIONS
   ========================================== */

.note-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.btn-primary,
.btn-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background: #3b82f6;
    color: #ffffff;
}

.btn-primary:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-secondary {
    background: #f3f4f6;
    color: #374151;
}

.btn-secondary:hover {
    background: #e5e7eb;
}

[data-theme="dark"] .btn-secondary {
    background: #374151;
    color: #e5e7eb;
}

[data-theme="dark"] .btn-secondary:hover {
    background: #4b5563;
}

/* ==========================================
   NOTES LIST
   ========================================== */

.notes-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.notes-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* Remove gap for cleaner look */
}

/* Empty state message */
.no-notes {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
    font-size: 14px;
    font-style: italic;
}

[data-theme="dark"] .no-notes {
    color: #6b7280;
}

/* ==========================================
   BOOK DIVIDERS
   ========================================== */

.note-book-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px 0;
    padding: 0 8px;
}

.note-book-divider:first-child {
    margin-top: 8px;
}

.book-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(157, 143, 201, 0.3), transparent);
}

.book-divider-text {
    font-size: 13px;
    font-weight: 600;
    color: #9d8fc9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    padding: 0 4px;
}

[data-theme="dark"] .book-divider-line {
    background: linear-gradient(to right, transparent, rgba(157, 143, 201, 0.4), transparent);
}

[data-theme="dark"] .book-divider-text {
    color: #b8a8d9;
}

/* ==========================================
   NOTE ITEMS
   ========================================== */

/* Note Item Bubble Style - Clean chat-like appearance */
.note-bubble-item {
    position: relative;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 0 0 8px 0 !important;
    cursor: pointer;
    transition: all 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    box-shadow: none !important;
}

.note-bubble-item:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

[data-theme="dark"] .note-bubble-item {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .note-bubble-item:last-child {
    border-bottom: none !important;
}

.note-bubble-item:hover {
    background: rgba(157, 143, 201, 0.08) !important;
    /* Keep all sizing properties identical to prevent deflation */
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 0 0 8px 0 !important;
    box-shadow: 0 2px 8px rgba(157, 143, 201, 0.1) !important;
}

.note-bubble-item:last-child:hover {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

[data-theme="dark"] .note-bubble-item:hover {
    background: rgba(59, 130, 246, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .note-bubble-item:last-child:hover {
    border-bottom: none !important;
}

/* Highlight effect for newly created notes */
.note-just-created {
    animation: noteCreatedPulse 2s ease-in-out;
}

@keyframes noteCreatedPulse {
    0%, 100% {
        background: transparent !important;
    }
    10%, 30%, 50% {
        background: rgba(157, 143, 201, 0.15) !important;
        box-shadow: 0 0 20px rgba(157, 143, 201, 0.3) !important;
    }
    20%, 40% {
        background: rgba(157, 143, 201, 0.08) !important;
        box-shadow: 0 0 10px rgba(157, 143, 201, 0.2) !important;
    }
}

[data-theme="dark"] .note-just-created {
    animation: noteCreatedPulseDark 2s ease-in-out;
}

@keyframes noteCreatedPulseDark {
    0%, 100% {
        background: transparent !important;
    }
    10%, 30%, 50% {
        background: rgba(59, 130, 246, 0.2) !important;
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3) !important;
    }
    20%, 40% {
        background: rgba(59, 130, 246, 0.1) !important;
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.2) !important;
    }
}

.note-bubble-content {
    font-size: 15px;
    line-height: 1.6;
    color: #111827;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-bottom: 8px;
    font-weight: 400;
}

[data-theme="dark"] .note-bubble-content {
    color: #e5e7eb;
}

.note-bubble-item .note-bubble-reference {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 0;
    border-top: none;
}

[data-theme="dark"] .note-bubble-item .note-bubble-reference {
    border-top: none;
}

.note-bubble-item .note-bubble-reference span {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    font-style: italic;
}

[data-theme="dark"] .note-bubble-item .note-bubble-reference span {
    color: #9ca3af;
}

/* Individual passage styling in multi-passage notes */
.note-bubble-reference .passage-current {
    color: #3b82f6;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.15);
    transition: all 0.3s ease;
}

[data-theme="dark"] .note-bubble-reference .passage-current {
    color: #60a5fa;
    text-shadow: 0 0 10px rgba(96, 165, 250, 0.2);
}

.note-bubble-reference .passage-unavailable {
    color: #9ca3af;
    opacity: 0.5;
    font-style: italic;
}

[data-theme="dark"] .note-bubble-reference .passage-unavailable {
    color: #6b7280;
    opacity: 0.4;
}

/* Active note - enhance current passage glow */
.note-item.active .note-bubble-reference .passage-current {
    color: #2563eb;
    text-shadow: 0 0 12px rgba(37, 99, 235, 0.25);
}

[data-theme="dark"] .note-item.active .note-bubble-reference .passage-current {
    color: #60a5fa;
    text-shadow: 0 0 14px rgba(96, 165, 250, 0.3);
}

/* Inline edit mode styles */
.note-item.editing {
    padding: 16px !important; /* Match normal state exactly */
    background: rgba(157, 143, 201, 0.12) !important;
    border-radius: 12px !important; /* Rounded like normal state */
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin: 0 0 8px 0 !important;
    box-shadow: 0 2px 8px rgba(157, 143, 201, 0.15) !important;
}

[data-theme="dark"] .note-item.editing {
    background: rgba(59, 130, 246, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.note-item.editing:hover {
    padding: 16px !important; /* Keep consistent */
    margin: 0 0 8px 0 !important;
    background: rgba(157, 143, 201, 0.12) !important;
    border-radius: 12px !important;
}

[data-theme="dark"] .note-item.editing:hover {
    background: rgba(59, 130, 246, 0.15) !important;
}

/* Active note (first click - viewing verses) */
.note-item.active {
    padding: 16px !important;
    background: linear-gradient(135deg, rgba(147, 197, 253, 0.2), rgba(59, 130, 246, 0.15)) !important;
    border-radius: 12px !important;
    border: 2px solid rgba(59, 130, 246, 0.4) !important;
    border-bottom: 2px solid rgba(59, 130, 246, 0.4) !important;
    margin: 0 0 8px 0 !important;
    box-shadow: 
        0 0 0 0 rgba(59, 130, 246, 0.4),
        0 4px 12px rgba(59, 130, 246, 0.25),
        0 0 20px rgba(59, 130, 246, 0.3),
        0 0 40px rgba(59, 130, 246, 0.15) !important;
    position: relative;
    animation: activeGlow 2s ease-in-out infinite;
}

@keyframes activeGlow {
    0%, 100% {
        box-shadow: 
            0 0 0 0 rgba(59, 130, 246, 0.4),
            0 4px 12px rgba(59, 130, 246, 0.25),
            0 0 20px rgba(59, 130, 246, 0.3),
            0 0 40px rgba(59, 130, 246, 0.15);
    }
    50% {
        box-shadow: 
            0 0 0 0 rgba(59, 130, 246, 0.4),
            0 4px 16px rgba(59, 130, 246, 0.35),
            0 0 30px rgba(59, 130, 246, 0.4),
            0 0 60px rgba(59, 130, 246, 0.25);
    }
}

.note-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, rgba(59, 130, 246, 1), rgba(96, 165, 250, 1));
    border-radius: 12px 0 0 12px;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

[data-theme="dark"] .note-item.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(96, 165, 250, 0.2)) !important;
    border: 2px solid rgba(96, 165, 250, 0.5) !important;
    border-bottom: 2px solid rgba(96, 165, 250, 0.5) !important;
    box-shadow: 
        0 0 0 0 rgba(96, 165, 250, 0.5),
        0 4px 12px rgba(59, 130, 246, 0.35),
        0 0 25px rgba(96, 165, 250, 0.4),
        0 0 50px rgba(96, 165, 250, 0.2) !important;
}

@keyframes activeGlowDark {
    0%, 100% {
        box-shadow: 
            0 0 0 0 rgba(96, 165, 250, 0.5),
            0 4px 12px rgba(59, 130, 246, 0.35),
            0 0 25px rgba(96, 165, 250, 0.4),
            0 0 50px rgba(96, 165, 250, 0.2);
    }
    50% {
        box-shadow: 
            0 0 0 0 rgba(96, 165, 250, 0.5),
            0 4px 18px rgba(59, 130, 246, 0.45),
            0 0 35px rgba(96, 165, 250, 0.5),
            0 0 70px rgba(96, 165, 250, 0.3);
    }
}

[data-theme="dark"] .note-item.active {
    animation: activeGlowDark 2s ease-in-out infinite;
}

.note-item.active:hover {
    background: linear-gradient(135deg, rgba(147, 197, 253, 0.25), rgba(59, 130, 246, 0.2)) !important;
    border: 2px solid rgba(59, 130, 246, 0.5) !important;
    border-bottom: 2px solid rgba(59, 130, 246, 0.5) !important;
}

[data-theme="dark"] .note-item.active:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(96, 165, 250, 0.25)) !important;
    border: 2px solid rgba(96, 165, 250, 0.6) !important;
    border-bottom: 2px solid rgba(96, 165, 250, 0.6) !important;
}

/* Dim inactive notes when one is active or being edited */
#notes-list:has(.note-item.active) .note-item:not(.active):not(.editing),
#notes-list:has(.note-item.editing) .note-item:not(.active):not(.editing) {
    opacity: 0.4;
    filter: grayscale(0.3);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Restore full visibility when hovering over inactive notes */
#notes-list:has(.note-item.active) .note-item:not(.active):not(.editing):hover,
#notes-list:has(.note-item.editing) .note-item:not(.active):not(.editing):hover {
    opacity: 1 !important;
    filter: grayscale(0) !important;
}

/* Dark theme variations */
[data-theme="dark"] #notes-list:has(.note-item.active) .note-item:not(.active):not(.editing),
[data-theme="dark"] #notes-list:has(.note-item.editing) .note-item:not(.active):not(.editing) {
    opacity: 0.35;
    filter: grayscale(0.4);
}

[data-theme="dark"] #notes-list:has(.note-item.active) .note-item:not(.active):not(.editing):hover,
[data-theme="dark"] #notes-list:has(.note-item.editing) .note-item:not(.active):not(.editing):hover {
    opacity: 1 !important;
    filter: grayscale(0) !important;
}

/* ============================================
   UNAVAILABLE NOTES (book not in translation)
   ============================================ */

.note-item.note-unavailable {
    opacity: 0.4 !important;
    filter: grayscale(0.6);
    cursor: not-allowed !important;
    position: relative;
}

.note-item.note-unavailable:hover {
    opacity: 0.5 !important; /* Slightly increase on hover to show it's there */
    filter: grayscale(0.6);
    transform: none !important;
}

[data-theme="dark"] .note-item.note-unavailable {
    opacity: 0.3 !important;
    filter: grayscale(0.7);
}

[data-theme="dark"] .note-item.note-unavailable:hover {
    opacity: 0.4 !important;
}

/* Disable delete button for unavailable notes */
.note-item.note-unavailable .note-delete-btn {
    display: none !important;
}

.note-display {
    display: block;
    min-height: 40px; /* Ensure minimum height consistency */
}

.note-edit-form {
    display: none;
    min-height: 40px; /* Match note-display */
    /* No extra padding - parent already has padding */
}

.note-edit-textarea {
    width: 100%;
    min-height: 120px;
    border: none;
    background: transparent;
    resize: vertical;
    font-size: 15px;
    line-height: 1.6;
    color: #111827;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    padding: 0;
    outline: none;
    margin-bottom: 12px;
}

[data-theme="dark"] .note-edit-textarea {
    color: #e5e7eb;
}

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

.note-edit-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.note-edit-save {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    box-shadow: none;
}

.note-edit-save:hover {
    background: rgba(107, 114, 128, 0.25);
    transform: scale(1.05);
    box-shadow: none;
}

.note-edit-save svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
}

/* Clean note styles - like chat messages, no boxes */
.note-item {
    padding: 16px 24px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 !important;
    position: relative;
}

.note-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: #666;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.note-item:hover::before {
    opacity: 0;
}

.note-item:last-child {
    border-bottom: none !important;
}

.note-item:hover {
    background: #fafafa !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    border-radius: 0 !important;
    padding: 16px 24px !important;
    margin: 0 !important;
}

.note-item:last-child:hover {
    border-bottom: none !important;
}

.note-item:active {
    background: #f5f5f5 !important;
    padding: 16px 24px !important;
    margin: 0 !important;
}

/* Lock sizing when in edit mode - prevent any changes */
.note-item.editing,
.note-item.editing:hover,
.note-item.editing:active,
.note-item.editing:focus {
    padding: 16px 24px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
}

[data-theme="dark"] .note-item {
    background: transparent !important;
    border-bottom: 1px solid #2d2d2d !important;
}

[data-theme="dark"] .note-item:last-child {
    border-bottom: none !important;
}

[data-theme="dark"] .note-item:hover {
    background: #1f1f1f !important;
    border-bottom: 1px solid #2d2d2d !important;
}

.note-item:hover::before {
    opacity: 0;
}

[data-theme="dark"] .note-item:last-child:hover {
    border-bottom: none !important;
}

[data-theme="dark"] .note-item:active {
    background: #252525 !important;
}

/* Active/Selected note state - when verse highlighting is shown */
.note-item.active {
    background: linear-gradient(to right, rgba(248, 246, 255, 0.9), rgba(250, 249, 246, 0.7)) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 0 0 8px 0 !important;
    box-shadow: 0 2px 8px rgba(157, 143, 201, 0.15) !important;
}

.note-item.active::before {
    opacity: 0;
    width: 0;
}

.note-item.active .note-bubble-content {
    color: #1f1f1f;
    font-weight: 500;
}

.note-item.active .note-bubble-reference {
    color: #7c3aed;
    font-weight: 600;
}

[data-theme="dark"] .note-item.active {
    background: #252525 !important;
}

[data-theme="dark"] .note-item.active .note-bubble-content {
    color: #e5e5e5;
    font-weight: 500;
}

[data-theme="dark"] .note-item.active .note-bubble-reference {
    color: #ccc;
    font-weight: 600;
}

.note-bubble-content {
    color: #4a4a4a;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 10px;
    word-wrap: break-word;
    font-weight: 400;
    text-align: center;
}

[data-theme="dark"] .note-bubble-content {
    color: #d0d0d0;
}

.note-bubble-reference {
    text-align: center;
    font-size: 12px;
    color: #666;
    font-style: italic;
    padding-top: 0;
    border-top: none;
    font-weight: 500;
}

[data-theme="dark"] .note-bubble-reference {
    color: #999;
}

/* Old styles for backward compatibility */

.note-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.note-item-title {
    font-weight: 600;
    font-size: 14px;
    color: #111827;
    margin: 0;
}

[data-theme="dark"] .note-item-title {
    color: #f9fafb;
}

.note-item-reference {
    font-size: 12px;
    color: #3b82f6;
    font-weight: 500;
}

.note-item-content {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[data-theme="dark"] .note-item-content {
    color: #9ca3af;
}

.note-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

[data-theme="dark"] .note-item-footer {
    border-top: 1px solid #374151;
}

.note-item-date {
    font-size: 11px;
    color: #9ca3af;
}

.note-item-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.note-tag {
    padding: 2px 8px;
    background: #eff6ff;
    color: #1e40af;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

[data-theme="dark"] .note-tag {
    background: #1e3a5f;
    color: #93c5fd;
}

/* ==========================================
   RESIZE HANDLE
   ========================================== */

.notes-panel-resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    width: 10px;
    height: 100%;
    cursor: ew-resize;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notes-panel-resize-handle:hover .resize-handle-indicator {
    opacity: 1;
}

.resize-handle-indicator {
    width: 3px;
    height: 60px;
    background: #d0d0d0;
    border-radius: 2px;
    opacity: 0;
    transition: all 0.2s ease;
}

.notes-panel-resize-handle:hover .resize-handle-indicator {
    opacity: 1;
    height: 70px;
    background: #b0b0b0;
}

/* ==========================================
   NOTES MODE ACTIVE STATE
   ========================================== */

/* CRITICAL: Override overflow:hidden on parent containers to allow popup notes
   to extend beyond the Bible content area and overlap the sidebar */
body.notes-mode-active .bible-main-content,
body.notes-mode-active .bible-book-content,
body.notes-mode-active .bible-flex-container {
    overflow: visible !important;
}

/* Ensure popup notes have higher z-index than sidebar when in notes mode */
body.notes-mode-active .popup-note-card,
body.notes-mode-active .create-note-popup {
    z-index: 1200 !important; /* Above sidebar (z-index: 1100) */
}

/* When notes mode is active - sidebar stays visible initially */
/* Sidebar only hides when notes panel is explicitly opened */
body.notes-mode-active.notes-panel-visible .sidebar {
    left: -250px; /* Slide sidebar out */
}

body.notes-mode-active.notes-panel-visible .sidebar.collapsed {
    left: -60px;
}

/* Notes panel slides in only when explicitly opened */
body.notes-mode-active.notes-panel-visible .notes-panel {
    left: 0; /* Slide notes panel in */
}

/* Main wrapper shifts only when panel is visible */
body.notes-mode-active.notes-panel-visible .main-wrapper {
    margin-left: 400px; /* Shift main content */
    transition: margin-left 0.3s ease;
}

/* When just in notes mode (no panel), reset margin to normal sidebar margin */
/* This ensures smooth transition back when panel closes */
body.notes-mode-active:not(.notes-panel-visible) .main-wrapper {
    transition: margin-left 0.3s ease;
    margin-left: 250px !important; /* Reset to normal sidebar margin */
}

/* When sidebar is collapsed in notes mode without panel */
body.notes-mode-active:not(.notes-panel-visible) .main-wrapper.sidebar-collapsed {
    margin-left: 50px !important;
}

/* Explicit reset when notes-panel-visible is removed - prevent any stuck margin */
body:not(.notes-panel-visible):not(.notes-mode-active) .main-wrapper {
    /* Margin is handled by sidebar.css - no override needed */
}

/* On mobile/tablet, reset to 0 margin */
@media (max-width: 1366px) {
    body.notes-mode-active:not(.notes-panel-visible) .main-wrapper {
        margin-left: 0 !important;
    }
}

/* When just in notes mode (no panel), don't override the normal sidebar margin */
/* The sidebar margin is handled by sidebar.css, we don't need to set anything here */

/* Adjust AI chat panel position when notes mode is active */
body.notes-mode-active .ai-chat-panel {
    right: 0; /* Keep it on the right */
}

/* ==========================================
   SIDEBAR NOTES MODE BUTTON STYLING
   ========================================== */

.notes-mode-item {
    position: relative;
}

.notes-mode-item.active {
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid #3b82f6;
}

.notes-mode-item.active .sidebar-icon {
    color: #3b82f6;
}

.notes-mode-item.active .sidebar-text {
    color: #3b82f6;
    font-weight: 600;
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

.hidden {
    display: none !important;
}

/* ==========================================
   ANIMATIONS
   ========================================== */

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* ==========================================
   VERSE HIGHLIGHTING IN NOTES MODE
   ========================================== */

/* Make verses clickable in notes mode */
body.notes-mode-active #chapter-content .v,
body.notes-mode-active .verse-text,
body.notes-mode-active .verse-text-wrapper {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Disable text selection in notes mode - users should only select verses */
body.notes-mode-active #chapter-content {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body.notes-mode-active #chapter-content * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Show grabbing cursor when dragging */
body.notes-mode-active.dragging-verses #chapter-content {
    cursor: grabbing !important;
}

body.notes-mode-active.dragging-verses #chapter-content * {
    cursor: grabbing !important;
}

body.notes-mode-active #chapter-content .v:hover,
body.notes-mode-active .verse-text:hover,
body.notes-mode-active .verse-text-wrapper:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Highlighted verse in notes mode - uses dynamic color from palette */
.verse-highlighted-for-note {
    /* Background and border colors set via inline styles from palette */
    padding-left: 10px;
    margin-left: -13px;
    border-left: 3px solid;
    transition: all 0.3s ease;
}

[data-theme="dark"] .verse-highlighted-for-note {
    /* Background and border colors set via inline styles from palette */
    padding-left: 10px;
    margin-left: -13px;
    border-left: 3px solid;
}

/* Faint highlighting for verses with notes (not actively being edited) */
/* Background and border colors are set via inline styles using note's actual highlight_color */
.verse-with-note {
    padding-left: 8px;
    margin-left: -10px;
    border-left: 2px solid;
    transition: all 0.2s ease;
    cursor: pointer;
}

.verse-with-note:hover {
    filter: brightness(0.92);
}

[data-theme="dark"] .verse-with-note {
    /* Uses inline styles for colors */
}

[data-theme="dark"] .verse-with-note:hover {
    filter: brightness(1.1);
}

[data-theme="dark"] .verse-with-note:hover {
    background-color: rgba(59, 130, 246, 0.22) !important;
    border-left: 2px solid rgba(59, 130, 246, 0.55);
    animation: none;
}

/* Emphasized verses for active note (first click - fully visible like BibliaAI highlights) */
/* Background and border colors are set via inline styles using note's actual highlight_color */
.verse-with-note.verse-emphasized {
    border-left: 4px solid;
    border-radius: 4px;
    font-weight: 700;
    animation: none !important; /* Stop pulsing when emphasized */
}

/* ================================================================
   COLLABORATIVE REMOTE HIGHLIGHTS (Google Docs-style)
   ================================================================ */

/* Remote user's verse selection overlay */
.collab-remote-highlight {
    background-color: var(--collab-bg, rgba(99, 102, 241, 0.18)) !important;
    border-radius: 2px;
    transition: background-color 0.25s ease;
    position: relative;
}

/* Only the .v (verse number) span gets the left-border accent */
span.v.collab-remote-highlight {
    border-left: 3px solid var(--collab-border, #6366f1) !important;
    padding-left: 8px !important;
    margin-left: -11px !important;
}

/* Wrapped text nodes inherit background only — no duplicate border */
.collab-text-wrap.collab-remote-highlight {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

[data-theme="dark"] .collab-remote-highlight {
    background-color: var(--collab-bg, rgba(99, 102, 241, 0.25)) !important;
}

/* Floating name tag on first highlighted verse */
.collab-name-tag {
    position: absolute;
    top: -1.4em;
    left: -3px;
    background: var(--tag-bg, #6366f1);
    color: var(--tag-text, #fff);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 7px 2px;
    border-radius: 4px 4px 4px 0;
    white-space: nowrap;
    pointer-events: none;
    z-index: 50;
    line-height: 1.4;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    animation: collabTagSlideIn 0.25s ease;
}

@keyframes collabTagSlideIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Collab author badge on note cards ---- */
.note-collab-author {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}

[data-theme="dark"] .note-collab-author {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.15);
}

.note-collab-author svg {
    width: 10px;
    height: 10px;
    opacity: 0.7;
}

/* Subtle left border on collab notes from other users */
.note-item.note-from-other {
    border-left: 3px solid rgba(124, 58, 237, 0.3);
    margin-left: -3px;
}

[data-theme="dark"] .note-item.note-from-other {
    border-left-color: rgba(139, 92, 246, 0.35);
}

.verse-with-note.verse-emphasized:hover {
    filter: brightness(0.9);
}

/* Color-specific emphasized styles - now using inline styles for actual note colors */
/* These classes are kept for backwards compatibility but colors come from inline styles */

[data-theme="dark"] .verse-with-note.verse-emphasized {
    /* Background color set via inline styles using note's actual highlight_color */
    border-radius: 4px;
    animation: none !important;
}

[data-theme="dark"] .verse-with-note.verse-emphasized:hover {
    filter: brightness(1.1);
}

/* Emphasized verses with inline color (uses note's actual highlight_color) */
.verse-with-note.verse-emphasized.verse-emphasized-colored {
    /* Background and border colors are set via inline styles */
    border-left: 4px solid;
    border-radius: 4px;
    font-weight: 700;
    animation: none !important;
}

[data-theme="dark"] .verse-with-note.verse-emphasized.verse-emphasized-colored {
    /* Dark mode uses same inline styles with slightly different opacity */
    border-left: 4px solid;
    border-radius: 4px;
    font-weight: 700;
    animation: none !important;
}

/* Different subtle colors for multiple notes on same chapter */
.verse-with-note.color-1 {
    background-color: rgba(147, 197, 253, 0.04) !important;
    border-left-color: rgba(59, 130, 246, 0.15);
}

.verse-with-note.color-2 {
    background-color: rgba(167, 139, 250, 0.04) !important;
    border-left-color: rgba(139, 92, 246, 0.15);
}

.verse-with-note.color-3 {
    background-color: rgba(134, 239, 172, 0.04) !important;
    border-left-color: rgba(34, 197, 94, 0.15);
}

.verse-with-note.color-4 {
    background-color: rgba(251, 191, 36, 0.04) !important;
    border-left-color: rgba(245, 158, 11, 0.15);
}

.verse-with-note.color-5 {
    background-color: rgba(252, 165, 165, 0.04) !important;
    border-left-color: rgba(239, 68, 68, 0.15);
}

[data-theme="dark"] .verse-with-note.color-1 {
    background-color: rgba(59, 130, 246, 0.04) !important;
}

[data-theme="dark"] .verse-with-note.color-2 {
    background-color: rgba(139, 92, 246, 0.04) !important;
}

[data-theme="dark"] .verse-with-note.color-3 {
    background-color: rgba(34, 197, 94, 0.04) !important;
}

[data-theme="dark"] .verse-with-note.color-4 {
    background-color: rgba(245, 158, 11, 0.04) !important;
}

[data-theme="dark"] .verse-with-note.color-5 {
    background-color: rgba(239, 68, 68, 0.04) !important;
}

/* ==========================================
   NOTE CREATION BUBBLE
   ========================================== */

.note-creation-bubble {
    position: relative;
    background: linear-gradient(to bottom right, rgba(250, 249, 246, 0.95), rgba(248, 246, 255, 0.9));
    border: 1px solid rgba(157, 143, 201, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 24px;
    box-shadow: 0 2px 6px rgba(157, 143, 201, 0.1);
    transition: all 0.2s ease;
    animation: slideIn 0.3s ease-out;
}

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

[data-theme="dark"] .note-creation-bubble {
    background: #1f1f1f;
    border: 1px solid #2d2d2d;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.note-creation-bubble.hidden {
    display: none;
}

/* Delete button - hidden by default, shown on hover */
.note-delete-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
}

.note-bubble-item:hover .note-delete-btn,
.note-item:hover .note-delete-btn {
    opacity: 1;
    pointer-events: auto;
}

.note-delete-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    transform: scale(1.1);
}

.note-delete-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
}

/* Note creation bubble close button */
.note-bubble-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    z-index: 10;
    opacity: 0;
}

.note-creation-bubble:not(.hidden) .note-bubble-close {
    opacity: 1;
}

.note-bubble-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    transform: scale(1.1);
}

.note-bubble-close svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
}

/* Save button for note creation */
.note-save-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    box-shadow: none;
    z-index: 10;
}

.note-save-btn:hover {
    background: rgba(107, 114, 128, 0.25);
    transform: scale(1.05);
    box-shadow: none;
}

.note-save-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.note-save-btn.hidden {
    display: none;
}

/* Note deletion burst animation */
@keyframes noteBurst {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(0.3);
        opacity: 0;
    }
}

@keyframes noteParticle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

.note-deleting {
    animation: noteBurst 0.4s ease-out forwards;
    pointer-events: none;
    position: relative;
    overflow: visible;
}

.note-deleting::before,
.note-deleting::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, transparent 70%);
    animation: noteParticle 0.4s ease-out forwards;
}

.note-deleting::before {
    --tx: -60px;
    --ty: -60px;
}

.note-deleting::after {
    --tx: 60px;
    --ty: 60px;
    animation-delay: 0.05s;
}

/* "Create a note" prompt */
.note-bubble-create-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.note-bubble-create-prompt:hover {
    transform: translateY(-2px);
    background: rgba(157, 143, 201, 0.08);
}

.note-bubble-create-prompt.hidden {
    display: none;
}

.create-prompt-text {
    font-size: 16px;
    font-weight: 500;
    color: #9d8fc9;
    margin-bottom: 8px;
}

[data-theme="dark"] .create-prompt-text {
    color: #999;
}

.note-bubble-create-prompt .note-bubble-reference {
    font-size: 13px;
    color: #999;
    font-style: italic;
    border: none;
    padding: 0;
    margin: 0;
    font-weight: 400;
}

[data-theme="dark"] .note-bubble-create-prompt .note-bubble-reference {
    color: #666;
}

/* Textarea when expanded */
.note-creation-bubble .note-bubble-textarea {
    width: 100%;
    min-height: 200px;
    border: none;
    background: transparent;
    resize: vertical;
    font-size: 15px;
    line-height: 1.6;
    color: #111827;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    padding: 0;
    outline: none;
    margin-bottom: 12px;
}

.note-creation-bubble .note-bubble-textarea:focus {
    outline: none;
    border: none;
}

[data-theme="dark"] .note-creation-bubble .note-bubble-textarea {
    color: #f9fafb;
}

.note-creation-bubble .note-bubble-textarea.hidden {
    display: none;
}

.note-creation-bubble .note-bubble-textarea::placeholder {
    color: #9ca3af;
}

/* Placeholder for contenteditable div */
.note-creation-bubble .note-bubble-textarea:empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
}

[data-theme="dark"] .note-creation-bubble .note-bubble-textarea:empty::before {
    color: #6b7280;
}

/* ==========================================
   CREATE ANOTHER NOTE BUBBLE
   ========================================== */

.create-another-note-bubble {
    background: rgba(248, 250, 252, 0.5);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 24px;
    padding: 10px 16px;
    margin: 12px 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 
        0 8px 32px rgba(100, 116, 139, 0.12),
        0 2px 8px rgba(148, 163, 184, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(148, 163, 184, 0.1);
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}

.create-another-note-bubble::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(203, 213, 225, 0.4));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.create-another-note-bubble:hover {
    background: rgba(241, 245, 249, 0.65);
    transform: translateY(-2px);
    box-shadow: 
        0 12px 40px rgba(100, 116, 139, 0.16),
        0 4px 12px rgba(148, 163, 184, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(148, 163, 184, 0.15);
    border-color: rgba(148, 163, 184, 0.3);
}

.create-another-note-bubble:not(.expanded):hover {
    background: rgba(241, 245, 249, 0.65);
    transform: translateY(-2px);
}

.create-another-note-bubble.expanded {
    background: rgba(249, 250, 251, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(229, 231, 235, 0.6);
    border-radius: 16px;
    padding: 20px;
    cursor: default;
    transform: none;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);
    animation: expandBubble 0.3s ease-out;
}

@keyframes expandBubble {
    from {
        opacity: 0.8;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.create-another-note-bubble.expanded:hover {
    background: rgba(249, 250, 251, 0.95);
    transform: none;
}

[data-theme="dark"] .create-another-note-bubble {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(148, 163, 184, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    color: #94a3b8;
}

[data-theme="dark"] .create-another-note-bubble::before {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.3), rgba(71, 85, 105, 0.2));
}

[data-theme="dark"] .create-another-note-bubble:hover {
    background: rgba(51, 65, 85, 0.6);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(148, 163, 184, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-color: rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .create-another-note-bubble.expanded {
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(55, 65, 81, 0.6);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .create-another-note-bubble.expanded:hover {
    background: rgba(17, 24, 39, 0.95);
}

.create-another-note-prompt {
    display: flex;
    align-items: center;
    gap: 6px;
}

.create-another-note-prompt .prompt-text {
    font-size: 13px;
    color: #3b82f6;
    font-weight: 500;
}

[data-theme="dark"] .create-another-note-prompt .prompt-text {
    color: #60a5fa;
}

.create-another-note-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.create-another-note-form .note-bubble-reference {
    text-align: right;
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
    padding-top: 0;
    margin-top: 0;
    border-top: none;
    font-weight: 500;
}

[data-theme="dark"] .create-another-note-form .note-bubble-reference {
    color: #9ca3af;
}

.create-another-note-textarea {
    width: 100%;
    min-height: 200px;
    border: none;
    background: transparent;
    resize: vertical;
    font-size: 15px;
    line-height: 1.6;
    color: #111827;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    padding: 0;
    outline: none;
    margin-bottom: 12px;
}

.create-another-note-textarea:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

[data-theme="dark"] .create-another-note-textarea {
    background: transparent;
    color: #f9fafb;
    border: none;
}

[data-theme="dark"] .create-another-note-textarea:focus {
    border: none;
    box-shadow: none;
}

.create-another-note-textarea::placeholder {
    color: #9ca3af;
}

.create-another-note-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #ef4444;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    z-index: 10;
}

.create-another-note-close:hover {
    background: #dc2626;
    transform: scale(1.1);
}

.create-another-note-close svg {
    stroke: white;
}

/* ============================================
   UNAVAILABLE NOTE MODAL
   ============================================ */

.unavailable-note-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

.unavailable-note-modal-content {
    background: white;
    border-radius: 16px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: slideUp 0.3s ease;
    text-align: center;
}

.unavailable-note-modal-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    color: #f59e0b;
}

.unavailable-note-modal-icon svg {
    width: 100%;
    height: 100%;
}

.unavailable-note-modal-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px 0;
}

.unavailable-note-modal-message {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 24px 0;
}

.unavailable-note-modal-button {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.unavailable-note-modal-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.unavailable-note-modal-button:active {
    transform: translateY(0);
}

/* Dark theme */
[data-theme="dark"] .unavailable-note-modal {
    background: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .unavailable-note-modal-content {
    background: #1f2937;
}

[data-theme="dark"] .unavailable-note-modal-title {
    color: #f9fafb;
}

[data-theme="dark"] .unavailable-note-modal-message {
    color: #d1d5db;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* ==========================================
   MULTI-PASSAGE INDICATOR
   ========================================== */

.multi-passage-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(157, 143, 201, 0.1), rgba(139, 92, 246, 0.1));
    border-radius: 8px;
    font-size: 13px;
    color: #7c3aed;
}

[data-theme="dark"] .multi-passage-indicator {
    background: linear-gradient(135deg, rgba(157, 143, 201, 0.15), rgba(139, 92, 246, 0.15));
    color: #a78bfa;
}

.multi-passage-icon {
    font-size: 16px;
}

.multi-passage-text {
    font-weight: 500;
}

/* ==========================================
   PASSAGE NAVIGATOR BUBBLE
   ========================================== */

.passage-navigator-bubble {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: white;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    z-index: 2000;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 400px;
    width: auto;
    min-width: 280px;
}

/* When both palette and navigator are visible, they will be positioned by JS */
/* The .side-by-side class is added by JS when both are visible */
.color-palette-container.visible.side-by-side {
    transform: translateX(-100%) translateY(0);
    left: calc(50% - 8px);
}

.passage-navigator-bubble.visible.side-by-side {
    transform: translateX(0%) translateY(0);
    left: calc(50% + 8px);
}

[data-theme="dark"] .passage-navigator-bubble {
    background: #1f1f1f;
    border: 1.5px solid #374151;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.passage-navigator-bubble.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.passage-nav-content {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.passage-nav-reference {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    flex: 1;
    text-align: center;
    white-space: nowrap;
}

[data-theme="dark"] .passage-nav-reference {
    color: #e5e7eb;
}

.passage-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: #f3f4f6;
    color: #a78bfa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.passage-nav-btn:hover:not(:disabled) {
    background: #ede9fe;
    color: #8b5cf6;
    border-color: #d8b4fe;
}

.passage-nav-btn:active:not(:disabled) {
    transform: scale(0.95);
    background: #ddd6fe;
}

.passage-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.passage-nav-btn svg {
    width: 18px;
    height: 18px;
}

[data-theme="dark"] .passage-nav-btn {
    background: #374151;
    color: #9ca3af;
    border-color: #4b5563;
}

[data-theme="dark"] .passage-nav-btn:hover:not(:disabled) {
    background: #4b5563;
    color: #d1d5db;
    border-color: #6b7280;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .passage-navigator-bubble {
        bottom: 10px;
        min-width: 260px;
        max-width: calc(100% - 20px);
    }
    
    .passage-nav-content {
        padding: 8px 12px;
    }
    
    .passage-nav-reference {
        font-size: 14px;
    }
    
    .passage-nav-btn {
        width: 32px;
        height: 32px;
    }
    
    .passage-nav-btn {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* View All Button in Navigator */
.passage-nav-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    margin: 0;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    font-size: 13px;
    font-weight: 500;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0 0 12px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.passage-nav-view-all:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.passage-nav-view-all svg {
    width: 14px;
    height: 14px;
    opacity: 0.9;
}

[data-theme="dark"] .passage-nav-view-all {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .passage-nav-view-all:hover {
    background: linear-gradient(135deg, #4338ca, #3730a3);
}

/* ==========================================
   ALL PASSAGES VIEW OVERLAY
   ========================================== */

.all-passages-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.all-passages-view.visible {
    opacity: 1;
}

.all-passages-container {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 800px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s ease;
}

.all-passages-view.visible .all-passages-container {
    transform: scale(1) translateY(0);
}

[data-theme="dark"] .all-passages-container {
    background: #1f1f1f;
    border: 1px solid #374151;
}

.all-passages-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

[data-theme="dark"] .all-passages-header {
    border-bottom-color: #374151;
    background: linear-gradient(135deg, #1f2937, #1a1a1a);
}

.all-passages-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.all-passages-title svg {
    color: #3b82f6;
}

[data-theme="dark"] .all-passages-title {
    color: #e5e7eb;
}

[data-theme="dark"] .all-passages-title svg {
    color: #60a5fa;
}

.all-passages-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    color: #6b7280;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.all-passages-close:hover {
    background: #f3f4f6;
    color: #374151;
}

[data-theme="dark"] .all-passages-close:hover {
    background: #374151;
    color: #e5e7eb;
}

.all-passages-note-content {
    padding: 16px 24px;
    background: #fef3c7;
    border-bottom: 1px solid #fbbf24;
    font-size: 14px;
    line-height: 1.6;
    color: #78350f;
}

[data-theme="dark"] .all-passages-note-content {
    background: #422006;
    border-bottom-color: #854d0e;
    color: #fde68a;
}

.all-passages-note-content:empty {
    display: none;
}

.all-passages-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

.all-passages-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: #6b7280;
}

/* Legacy loading spinner - Use bibliatech-loading class instead */
/* See loading-animation.css for the new loading styles */

.all-passages-passage {
    margin-bottom: 24px;
    padding: 16px 20px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.all-passages-passage:last-child {
    margin-bottom: 0;
}

.all-passages-passage:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .all-passages-passage {
    background: #1a1a1a;
    border-color: #374151;
}

[data-theme="dark"] .all-passages-passage:hover {
    border-color: #4b5563;
}

.all-passages-passage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

[data-theme="dark"] .all-passages-passage-header {
    border-bottom-color: #374151;
}

.all-passages-passage-ref {
    font-size: 15px;
    font-weight: 600;
    color: #1e40af;
}

[data-theme="dark"] .all-passages-passage-ref {
    color: #60a5fa;
}

.all-passages-passage-number {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
}

.all-passages-passage-content {
    line-height: 1.7;
}

.all-passages-verse {
    display: inline;
}

.all-passages-verse-num {
    font-size: 11px;
    font-weight: 600;
    color: #3b82f6;
    margin-right: 4px;
    vertical-align: super;
}

[data-theme="dark"] .all-passages-verse-num {
    color: #60a5fa;
}

.all-passages-verse-text {
    font-size: 16px;
    color: #374151;
    font-family: 'Crimson Text', 'EB Garamond', Georgia, serif;
}

[data-theme="dark"] .all-passages-verse-text {
    color: #d1d5db;
}

.all-passages-error {
    text-align: center;
    padding: 40px;
    color: #ef4444;
    font-size: 14px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .all-passages-container {
        width: 95%;
        max-height: 90vh;
        border-radius: 12px;
    }
    
    .all-passages-header {
        padding: 12px 16px;
    }
    
    .all-passages-title {
        font-size: 16px;
    }
    
    .all-passages-list {
        padding: 12px 16px;
    }
    
    .all-passages-passage {
        padding: 12px 14px;
    }
    
    .all-passages-verse-text {
        font-size: 15px;
    }
    
    .passage-nav-view-all {
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* ==========================================
   INLINE ALL PASSAGES VIEW
   Displays all passages as Bible cards in content area
   Clean card design with visual separation
   ========================================== */

.all-passages-inline-view {
    padding: 16px;
    min-height: 60vh;
}

.all-passages-inline-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.all-passages-inline-passage {
    padding: 20px 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.all-passages-inline-passage:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.all-passages-inline-passage.highlighted {
    background: #f0f7ff;
    border-color: #3b82f6;
    border-left: 3px solid #3b82f6;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .all-passages-inline-passage {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .all-passages-inline-passage:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .all-passages-inline-passage.highlighted {
    background: #1e3a5f;
    border-color: #60a5fa;
    border-left: 3px solid #60a5fa;
    box-shadow: 0 4px 16px rgba(96, 165, 250, 0.2);
}

/* Passage content - uses main Bible verse number styling */
.all-passages-inline-passage-content {
    line-height: 1.9;
    font-family: 'Crimson Text', 'EB Garamond', Georgia, serif;
    font-size: 18px;
    color: #374151;
    text-align: justify;
    flex: 1;
}

[data-theme="dark"] .all-passages-inline-passage-content {
    color: #d1d5db;
}

/* Use same verse number styling as main Bible content */
.all-passages-inline-passage-content .v {
    font-size: 0.75em;
    vertical-align: super;
    color: var(--bible-text-verse-num) !important;
    font-weight: 600;
    margin-right: .4rem;
    padding: 3px 6px;
    border-radius: 4px;
    font-family: 'Georgia', serif;
    min-width: 20px;
    text-align: center;
    display: inline-block;
    line-height: 1;
}

.all-passages-inline-verse {
    display: inline;
}

/* Visual gap between non-contiguous verses (e.g., 6-7, 10) */
.verse-gap {
    display: block;
    height: 24px;
}

/* Footer with reference and passage number - matches note verse labels */
.all-passages-inline-passage-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
    padding-top: 0;
}

.all-passages-inline-passage-ref {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    font-style: italic;
}

[data-theme="dark"] .all-passages-inline-passage-ref {
    color: #9ca3af;
}

.all-passages-inline-passage-number {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    font-style: italic;
}

[data-theme="dark"] .all-passages-inline-passage-number {
    color: #9ca3af;
}

/* Mobile responsive for inline view */
@media (max-width: 768px) {
    .all-passages-inline-view {
        padding: 12px;
    }
    
    .all-passages-inline-passage {
        padding: 16px 18px;
    }
    
    .all-passages-inline-passage-content {
        font-size: 16px;
    }
    
    .all-passages-inline-passage-ref {
        font-size: 11px;
    }
    
    .all-passages-clear-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* ==========================================
   BIBLE REFERENCE LINKS IN NOTES
   ========================================== */

/* Bible reference links in note content */
.bible-ref-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, text-decoration 0.15s ease;
    outline: none;
}

.bible-ref-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.bible-ref-link:active,
.bible-ref-link:focus {
    color: #1e40af;
    outline: none;
}

[data-theme="dark"] .bible-ref-link {
    color: #60a5fa;
}

[data-theme="dark"] .bible-ref-link:hover {
    color: #93c5fd;
    text-decoration: underline;
}

[data-theme="dark"] .bible-ref-link:active,
[data-theme="dark"] .bible-ref-link:focus {
    color: #bfdbfe;
    outline: none;
}

/* Visual feedback when Bible reference is clicked */
.bible-ref-link.bible-ref-clicked {
    color: #9333ea !important;
    transition: color 0.1s ease;
}

[data-theme="dark"] .bible-ref-link.bible-ref-clicked {
    color: #c084fc !important;
}

/* Highlight effect when clicking a Bible reference link */
.bible-ref-highlight {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(59, 130, 246, 0.2)) !important;
    border-radius: 2px;
    animation: bible-ref-pulse 0.4s ease-out;
}

@keyframes bible-ref-pulse {
    0% {
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.5), rgba(59, 130, 246, 0.4));
    }
    100% {
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(59, 130, 246, 0.2));
    }
}

[data-theme="dark"] .bible-ref-highlight {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.35), rgba(59, 130, 246, 0.3)) !important;
}

@keyframes bible-ref-pulse-dark {
    0% {
        background: linear-gradient(135deg, rgba(96, 165, 250, 0.6), rgba(59, 130, 246, 0.5));
    }
    100% {
        background: linear-gradient(135deg, rgba(96, 165, 250, 0.35), rgba(59, 130, 246, 0.3));
    }
}

[data-theme="dark"] .bible-ref-highlight {
    animation: bible-ref-pulse-dark 0.4s ease-out;
}

/* Contenteditable edit area for notes */
.note-edit-content {
    width: 100%;
    min-height: 120px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: #1f2937;
    outline: none;
    resize: vertical;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.note-edit-content:focus {
    border: none;
    box-shadow: none;
}

[data-theme="dark"] .note-edit-content {
    background: transparent;
    border: none;
    color: #e5e7eb;
}

[data-theme="dark"] .note-edit-content:focus {
    border: none;
    box-shadow: none;
}

.note-edit-content:empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
}

[data-theme="dark"] .note-edit-content:empty::before {
    color: #6b7280;
}

/* ==========================================
   VIEW ALL NOTES FLOATING BUTTON
   ========================================== */

.view-all-notes-btn {
    position: fixed;
    bottom: 90px; /* Above the graph button which is at 24px */
    right: 24px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: linear-gradient(135deg, #7c3aed 0%, #9d8fc9 100%);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
    cursor: pointer;
    color: white;
    z-index: 1048;
    transition: all 0.3s ease;
}

.view-all-notes-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(124, 58, 237, 0.5);
}

.view-all-notes-btn:active {
    transform: scale(0.95);
}

.view-all-notes-btn svg {
    color: white;
    flex-shrink: 0;
}

[data-theme="dark"] .view-all-notes-btn {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}

[data-theme="dark"] .view-all-notes-btn:hover {
    box-shadow: 0 6px 28px rgba(139, 92, 246, 0.5);
}

[data-theme="dark"] .view-all-notes-btn svg {
    color: white;
}

/* Hide on mobile */
@media (max-width: 1080px) {
    .view-all-notes-btn {
        display: none !important;
    }
}

/* ==========================================
   CREATE NOTE FLOATING BUTTON (Pen icon)
   ========================================== */

.create-note-btn {
    position: fixed;
    bottom: 24px; /* Same level as graph button */
    right: 90px; /* Left of graph button (graph is at 24px, width 56px + gap) */
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
    cursor: pointer;
    color: white;
    z-index: 1048;
    transition: all 0.3s ease;
}

.create-note-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(16, 185, 129, 0.5);
}

.create-note-btn:active {
    transform: scale(0.95);
}

.create-note-btn svg {
    color: white;
    flex-shrink: 0;
}

[data-theme="dark"] .create-note-btn {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    box-shadow: 0 4px 20px rgba(5, 150, 105, 0.4);
}

[data-theme="dark"] .create-note-btn:hover {
    box-shadow: 0 6px 28px rgba(5, 150, 105, 0.5);
}

[data-theme="dark"] .create-note-btn svg {
    color: white;
}

/* Active state when in create mode */
.create-note-btn.create-mode-active {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
    animation: create-mode-pulse 2s infinite;
}

.create-note-btn.create-mode-active:hover {
    box-shadow: 0 6px 28px rgba(239, 68, 68, 0.5);
}

[data-theme="dark"] .create-note-btn.create-mode-active {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4);
}

[data-theme="dark"] .create-note-btn.create-mode-active:hover {
    box-shadow: 0 6px 28px rgba(220, 38, 38, 0.5);
}

@keyframes create-mode-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Hide on mobile */
@media (max-width: 1080px) {
    .create-note-btn {
        display: none !important;
    }
}

/* ==========================================
   NOTES NOTIFICATION TOAST
   ========================================== */

.notes-notification {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 24px;
    background: #1f2937;
    color: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    opacity: 0;
    transition: all 0.3s ease;
}

.notes-notification.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.notes-notification-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.notes-notification-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.notes-notification-error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

[data-theme="dark"] .notes-notification {
    background: #374151;
}

/* ==========================================
   POPUP NOTE CARD
   ========================================== */

.popup-note-card {
    position: absolute; /* Absolute positioning so popup scrolls with content */
    background: linear-gradient(135deg, #ffffff 0%, #faf9ff 100%);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    box-shadow: 
        0 8px 32px rgba(124, 58, 237, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.08);
    z-index: 10000; /* Above sidebar (z-index: 1100) - JS may override dynamically */
    min-width: 200px;
    max-width: 500px;
    width: 320px;
    min-height: 120px;
    max-height: 70vh;
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    resize: both;
    display: flex;
    flex-direction: column;
}

.popup-note-card.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.popup-note-card.dragging {
    cursor: grabbing;
    box-shadow: 
        0 12px 48px rgba(124, 58, 237, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.12);
    transform: scale(1.02);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.popup-note-card.resizing {
    cursor: grabbing;
    transition: none;
    user-select: none;
}

.popup-note-card.dragging * {
    cursor: grabbing;
}

[data-theme="dark"] .popup-note-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #222222 100%);
    border: 1px solid rgba(139, 92, 246, 0.25);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(139, 92, 246, 0.1);
}

/* Popup Note Header - minimal design */
.popup-note-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 2px 4px;
    background: transparent;
    cursor: grab;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

/* Author badge inside popup header for collab notes */
.popup-collab-author {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.6rem;
    font-weight: 600;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
    padding: 1px 6px 1px 4px;
    border-radius: 8px;
    white-space: nowrap;
    margin-right: auto;
}

[data-theme="dark"] .popup-collab-author {
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .popup-note-header {
    background: transparent;
}

/* Remove drag handle styles - no longer used */

.popup-note-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #b0b0b0;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.5;
}

.popup-note-card:hover .popup-note-close {
    opacity: 1;
}

.popup-note-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #666;
}

[data-theme="dark"] .popup-note-close {
    color: #6b7280;
}

[data-theme="dark"] .popup-note-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* ==========================================
   POPUP NOTE TABS (for multiple notes on same verse)
   ========================================== */

.popup-note-tabs {
    display: flex;
    gap: 2px;
    padding: 4px 6px 0 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 2px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 12px 12px 0 0;
}

[data-theme="dark"] .popup-note-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
}

.popup-note-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    background: transparent;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.popup-note-tab:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #374151;
}

.popup-note-tab.active {
    color: #374151;
    font-weight: 600;
}

[data-theme="dark"] .popup-note-tab {
    color: #9ca3af;
}

[data-theme="dark"] .popup-note-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e5e7eb;
}

[data-theme="dark"] .popup-note-tab.active {
    color: #f3f4f6;
}

/* Disable tabs when popup is in edit mode (but not the add-tab button) */
.popup-note-card.popup-editing .popup-note-tab:not(.active):not(.popup-add-tab) {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.popup-note-card.popup-editing .popup-note-tabs {
    opacity: 1;
}

.popup-note-tab .tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Author label on tab for collab notes from other users */
.popup-note-tab .tab-author {
    font-size: 0.55rem;
    font-weight: 600;
    color: #6366f1;
    opacity: 0.8;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-theme="dark"] .popup-note-tab .tab-author {
    color: #a5b4fc;
}

.popup-note-tab .tab-number {
    font-size: 10px;
    font-weight: 600;
}

/* Adjust header position when tabs are present */
.popup-note-card.has-tabs .popup-note-header {
    top: 4px;
}

/* Resize handle indicator for popup notes */
.popup-note-card::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: linear-gradient(
        -45deg,
        transparent 0%,
        transparent 40%,
        rgba(124, 58, 237, 0.3) 40%,
        rgba(124, 58, 237, 0.3) 45%,
        transparent 45%,
        transparent 55%,
        rgba(124, 58, 237, 0.3) 55%,
        rgba(124, 58, 237, 0.3) 60%,
        transparent 60%,
        transparent 70%,
        rgba(124, 58, 237, 0.3) 70%,
        rgba(124, 58, 237, 0.3) 75%,
        transparent 75%
    );
    pointer-events: none;
    border-radius: 0 0 12px 0;
}

[data-theme="dark"] .popup-note-card::after {
    background: linear-gradient(
        -45deg,
        transparent 0%,
        transparent 40%,
        rgba(139, 92, 246, 0.4) 40%,
        rgba(139, 92, 246, 0.4) 45%,
        transparent 45%,
        transparent 55%,
        rgba(139, 92, 246, 0.4) 55%,
        rgba(139, 92, 246, 0.4) 60%,
        transparent 60%,
        transparent 70%,
        rgba(139, 92, 246, 0.4) 70%,
        rgba(139, 92, 246, 0.4) 75%,
        transparent 75%
    );
}

/* Popup Note Content */
.popup-note-content {
    padding: 6px 12px 8px 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #1f2937;
    white-space: pre-wrap;
    word-wrap: break-word;
    flex: 1;
    overflow-y: auto;
    cursor: grab;
    display: flex;
    flex-direction: column;
    padding-right: 8px;
}

/* Custom scrollbar for popup content - thin and away from close button */
.popup-note-content::-webkit-scrollbar {
    width: 6px;
}

.popup-note-content::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 24px;
}

.popup-note-content::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.2);
    border-radius: 3px;
}

.popup-note-content::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 58, 237, 0.35);
}

[data-theme="dark"] .popup-note-content::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.25);
}

[data-theme="dark"] .popup-note-content::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.4);
}

/* When editing, content should use flexbox */
.popup-note-card.popup-editing .popup-note-content {
    overflow: hidden;
}

[data-theme="dark"] .popup-note-content {
    color: #e5e7eb;
}

/* Remove color border variations - keep it clean */

/* Popup Note Reference */
.popup-note-reference {
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: grab;
    gap: 8px;
}

.popup-note-reference .popup-reference-text {
    font-size: 10px;
    font-weight: 500;
    color: #9ca3af;
    font-style: italic;
    margin-left: auto;
}

/* Theme badge in popup notes - appears on left */
.popup-note-reference .popup-theme-badge {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.05);
    color: #6b7280;
    font-weight: 500;
    text-transform: capitalize;
    white-space: nowrap;
}

[data-theme="dark"] .popup-note-reference {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .popup-note-reference .popup-reference-text {
    color: #6b7280;
}

[data-theme="dark"] .popup-note-reference .popup-theme-badge {
    background: rgba(255, 255, 255, 0.08);
    color: #9ca3af;
}

/* Add reference button in popup edit mode */
.popup-note-reference .popup-add-reference-btn {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(124, 58, 237, 0.1);
    color: #7C3AED;
    border: 1px solid rgba(124, 58, 237, 0.2);
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.15s ease;
    margin-left: 8px;
}

.popup-note-reference .popup-add-reference-btn:hover {
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(124, 58, 237, 0.4);
}

[data-theme="dark"] .popup-note-reference .popup-add-reference-btn {
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="dark"] .popup-note-reference .popup-add-reference-btn:hover {
    background: rgba(124, 58, 237, 0.25);
    border-color: rgba(124, 58, 237, 0.5);
}

/* Hide add reference button when not in edit mode */
.popup-note-card:not(.popup-editing) .popup-add-reference-btn {
    display: none;
}

/* Multi-passage navigation buttons */
.popup-note-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(124, 58, 237, 0.04);
    border-top: 1px solid rgba(124, 58, 237, 0.1);
    border-radius: 0 0 12px 12px;
}

.popup-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: white;
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #7c3aed;
}

.popup-nav-btn:hover {
    background: #7c3aed;
    border-color: #7c3aed;
    color: white;
    transform: scale(1.1);
}

.popup-nav-btn svg {
    stroke: currentColor;
}

.popup-nav-indicator {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    min-width: 40px;
    text-align: center;
}

[data-theme="dark"] .popup-note-navigation {
    background: rgba(124, 58, 237, 0.08);
    border-top-color: rgba(124, 58, 237, 0.15);
}

[data-theme="dark"] .popup-nav-btn {
    background: #1f2937;
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="dark"] .popup-nav-btn:hover {
    background: #7c3aed;
}

[data-theme="dark"] .popup-nav-indicator {
    color: #9ca3af;
}

/* Navigation inside create popup - positioned after reference row */
.create-popup-navigation {
    margin: 8px 0;
    border-radius: 8px;
    border-top: none;
    background: rgba(124, 58, 237, 0.06);
}

[data-theme="dark"] .create-popup-navigation {
    background: rgba(124, 58, 237, 0.12);
}

/* ==========================================
   POPUP NOTE EDIT MODE
   ========================================== */

.popup-note-card.popup-editing .popup-note-content {
    padding: 8px;
    cursor: default;
    display: flex;
    flex-direction: column;
    overflow: visible;
    flex: 1;
    min-height: 0;
}

/* When editing, allow content to fill and show textarea properly */
.popup-note-card.popup-editing {
    overflow: visible;
}

/* Ensure textarea fills available space in edit mode */
.popup-note-card.popup-editing .popup-note-textarea {
    flex: 0 0 auto;
    min-height: 80px;
    max-height: none;
}

/* Dimmed state for other popups when one is being edited */
.popup-note-card.popup-dimmed {
    opacity: 0.25;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.popup-note-textarea {
    width: 100%;
    flex: 1;
    min-height: 60px;
    padding: 8px;
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: #1f2937;
    resize: none;
    outline: none;
    overflow-y: auto;
}

.popup-note-textarea:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* Remove the verse info div styles - no longer used */

[data-theme="dark"] .popup-note-textarea {
    background: #1f1f2e;
    border-color: rgba(139, 92, 246, 0.4);
    color: #e5e7eb;
}

[data-theme="dark"] .popup-note-textarea:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.popup-note-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
    flex-shrink: 0;
}

.popup-note-save,
.popup-note-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.popup-note-save {
    background: #7c3aed;
    color: white;
}

.popup-note-save:hover {
    background: #6d28d9;
    transform: scale(1.05);
}

.popup-note-cancel {
    background: rgba(0, 0, 0, 0.06);
    color: #6b7280;
}

.popup-note-cancel:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

[data-theme="dark"] .popup-note-save {
    background: #8b5cf6;
}

[data-theme="dark"] .popup-note-save:hover {
    background: #a78bfa;
}

[data-theme="dark"] .popup-note-cancel {
    background: rgba(255, 255, 255, 0.08);
    color: #9ca3af;
}

[data-theme="dark"] .popup-note-cancel:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.popup-note-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    margin-right: auto;
}

.popup-note-delete:hover {
    background: #dc2626;
    color: white;
    transform: scale(1.05);
}

[data-theme="dark"] .popup-note-delete {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

[data-theme="dark"] .popup-note-delete:hover {
    background: #ef4444;
    color: white;
}

/* ==========================================
   CREATE NOTE POPUP (When selecting verses)
   ========================================== */

.create-note-popup {
    position: absolute; /* Absolute to scroll with content */
    background: linear-gradient(135deg, #ffffff 0%, #faf9ff 100%);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 16px;
    box-shadow: 
        0 8px 32px rgba(124, 58, 237, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.08);
    z-index: 10000; /* Above sidebar (z-index: 1100) */
    min-width: 280px;
    max-width: 600px;
    width: 320px;
    min-height: 200px;
    max-height: 80vh;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: grab;
    resize: both;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.create-note-popup.visible {
    opacity: 1;
    transform: translateY(0);
}

.create-note-popup.dragging {
    cursor: grabbing;
    transition: none;
}

.create-note-popup.resizing {
    transition: none;
    user-select: none;
}

.create-note-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.create-note-popup-title {
    font-size: 13px;
    font-weight: 600;
    color: #7c3aed;
}

.create-note-popup-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #b0b0b0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.create-note-popup-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #666;
}

.create-note-popup-content {
    padding: 12px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.create-note-popup-reference {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 10px;
    font-style: italic;
}

.create-note-popup-textarea {
    width: 100%;
    min-height: 100px;
    flex: 1;
    padding: 10px;
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: #1f2937;
    resize: none;
    outline: none;
    overflow-y: auto;
}

.create-note-popup-textarea:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.create-note-popup-textarea::placeholder {
    color: #9ca3af;
}

.create-note-popup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.create-note-popup-save {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #7c3aed;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.create-note-popup-save:hover {
    background: #6d28d9;
    transform: translateY(-1px);
}

.create-note-popup-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

[data-theme="dark"] .create-note-popup {
    background: linear-gradient(135deg, #1a1a1a 0%, #151515 100%);
    border-color: rgba(139, 92, 246, 0.2);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(139, 92, 246, 0.15);
}

[data-theme="dark"] .create-note-popup-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .create-note-popup-title {
    color: #a78bfa;
}

[data-theme="dark"] .create-note-popup-close {
    color: #6b7280;
}

[data-theme="dark"] .create-note-popup-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #9ca3af;
}

[data-theme="dark"] .create-note-popup-reference {
    color: #9ca3af;
}

[data-theme="dark"] .create-note-popup-textarea {
    background: #1f1f2e;
    border-color: rgba(139, 92, 246, 0.3);
    color: #e5e7eb;
}

[data-theme="dark"] .create-note-popup-textarea:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

[data-theme="dark"] .create-note-popup-textarea::placeholder {
    color: #6b7280;
}

[data-theme="dark"] .create-note-popup-save {
    background: #8b5cf6;
}

[data-theme="dark"] .create-note-popup-save:hover {
    background: #a78bfa;
}

/* ==========================================
   REFERENCE ROW (Reference + Add Reference Button)
   ========================================== */

.create-note-popup-reference-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.create-note-popup-reference-row .create-note-popup-reference {
    margin-bottom: 0;
}

.add-reference-btn {
    padding: 3px 8px;
    font-size: 11px;
    color: #7c3aed;
    background: transparent;
    border: 1px dashed rgba(124, 58, 237, 0.4);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.add-reference-btn:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.6);
}

[data-theme="dark"] .add-reference-btn {
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.4);
}

[data-theme="dark"] .add-reference-btn:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(167, 139, 250, 0.6);
}

/* ==========================================
   DELETABLE REFERENCES (Desktop Only)
   Subtle X appears on hover to delete individual refs
   ========================================== */

.deletable-references-container {
    display: inline;
    font-size: inherit;
    color: inherit;
}

.deletable-ref-item {
    position: relative;
    display: inline-block;
    cursor: default;
    transition: opacity 0.15s ease;
}

.deletable-ref-text {
    display: inline;
    transition: opacity 0.15s ease;
}

/* The X delete button - subtle, only appears on hover */
.deletable-ref-x {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    z-index: 1;
    line-height: 1;
}

/* Desktop only - show X on hover */
@media (hover: hover) and (pointer: fine) {
    .deletable-ref-item:hover .deletable-ref-text {
        opacity: 0.3;
    }
    
    .deletable-ref-item:hover .deletable-ref-x {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
    
    .deletable-ref-x:hover {
        color: #dc2626;
    }
}

/* Separator between refs */
.ref-separator {
    color: inherit;
    opacity: 0.6;
}

/* "More" toggle for collapsed view */
.ref-more-toggle {
    display: inline;
    font-size: inherit;
    color: #7c3aed;
    cursor: pointer;
    margin-left: 4px;
    font-weight: 500;
    transition: color 0.15s ease;
}

.ref-more-toggle:hover {
    color: #6d28d9;
    text-decoration: underline;
}

[data-theme="dark"] .ref-more-toggle {
    color: #a78bfa;
}

[data-theme="dark"] .ref-more-toggle:hover {
    color: #c4b5fd;
}

[data-theme="dark"] .deletable-ref-x {
    color: #9ca3af;
}

[data-theme="dark"] .deletable-ref-x:hover {
    color: #ef4444;
}

/* Hide "more" toggle when expanded */
.deletable-references-container.expanded .ref-more-toggle {
    display: none;
}

/* Ensure wrapped references in popup look good */
.popup-reference-deletable {
    flex: 1;
    min-width: 0;
}

.popup-reference-deletable .deletable-references-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    align-items: center;
}

/* Create note popup specific adjustments */
.create-note-popup-reference .deletable-references-container {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    align-items: center;
}

/* ==========================================
   REFERENCE PICKER PANEL
   ========================================== */

/* ==========================================
   Reference Picker Cascading Panel (External to popup)
   Shows Books | Chapters | Verses in side-by-side columns
   ========================================== */

.reference-picker-cascade {
    position: absolute;
    display: flex;
    flex-direction: row;
    z-index: 1201;
    max-height: 400px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 
        0 8px 30px rgba(124, 58, 237, 0.2),
        0 4px 15px rgba(0, 0, 0, 0.1);
}

.reference-picker-cascade .reference-picker-columns {
    display: flex;
    flex-direction: row;
    max-height: 400px;
    overflow: hidden;
}

[data-theme="dark"] .reference-picker-cascade {
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.5),
        0 4px 15px rgba(139, 92, 246, 0.2);
}

/* Thin scrollbars for reference picker */
.reference-picker-cascade ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.reference-picker-cascade ::-webkit-scrollbar-track {
    background: transparent;
}

.reference-picker-cascade ::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.2);
    border-radius: 2px;
}

.reference-picker-cascade ::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 58, 237, 0.4);
}

[data-theme="dark"] .reference-picker-cascade ::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .reference-picker-cascade ::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.5);
}

/* Each column in the cascading picker */
.reference-picker-column {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #ffffff 0%, #faf9ff 100%);
    border-right: 1px solid rgba(124, 58, 237, 0.1);
    min-height: 200px;
    max-height: 400px;
    overflow: hidden;
}

.reference-picker-column:last-child {
    border-right: none;
}

.reference-picker-column.hidden {
    display: none;
}

[data-theme="dark"] .reference-picker-column {
    background: linear-gradient(135deg, #1a1a1a 0%, #151515 100%);
    border-right-color: rgba(255, 255, 255, 0.06);
}

/* Books column */
.reference-picker-books-column {
    width: 160px;
    border-radius: 12px 0 0 12px;
}

/* When books column is the only one visible, give it full border radius */
.reference-picker-books-column:last-child,
.reference-picker-columns .reference-picker-books-column:only-child {
    border-radius: 12px;
}

/* When chapters is last visible (verses hidden), round its right corners */
.reference-picker-chapters-column:not(.hidden) + .reference-picker-verses-column.hidden,
.reference-picker-chapters-column:last-child:not(.hidden) {
    border-radius: 0 12px 12px 0;
}

/* Chapters column */
.reference-picker-chapters-column {
    width: 220px;
    min-width: 220px;
    overflow-x: hidden;
}

/* When chapters column is visible and verses is hidden, round right side */
.reference-picker-chapters-column:not(.hidden) ~ .reference-picker-verses-column.hidden + .reference-picker-chapters-column,
.reference-picker-columns:has(.reference-picker-verses-column.hidden) .reference-picker-chapters-column:not(.hidden) {
    border-radius: 0 12px 12px 0;
}

/* Verses column (includes action buttons) */
.reference-picker-verses-column {
    width: 200px;
    border-radius: 0 12px 12px 0;
}

/* Column headers */
.reference-picker-column-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(124, 58, 237, 0.1);
    background: rgba(124, 58, 237, 0.03);
    flex-shrink: 0;
}

/* Draggable header styling */
.reference-picker-column-header.reference-picker-draggable {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.reference-picker-column-header.reference-picker-draggable:active {
    cursor: grabbing;
}

[data-theme="dark"] .reference-picker-column-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    background: rgba(139, 92, 246, 0.05);
}

.reference-picker-column-title {
    font-size: 13px;
    font-weight: 600;
    color: #7c3aed;
}

[data-theme="dark"] .reference-picker-column-title {
    color: #a78bfa;
}

/* Close button */
.reference-picker-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(239, 68, 68, 0.1);
    border: none;
    border-radius: 50%;
    color: #ef4444;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.reference-picker-close:hover {
    background: #ef4444;
    color: white;
}

/* Search in header */
.reference-picker-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 6px;
}

[data-theme="dark"] .reference-picker-search {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.2);
}

.reference-picker-search-icon {
    color: #9ca3af;
    flex-shrink: 0;
}

.reference-picker-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 12px;
    color: #1f2937;
    outline: none;
    min-width: 0;
    width: 70px;
}

.reference-picker-search-input::placeholder {
    color: #9ca3af;
}

[data-theme="dark"] .reference-picker-search-input {
    color: #e5e7eb;
}

[data-theme="dark"] .reference-picker-search-input::placeholder {
    color: #6b7280;
}

.reference-picker-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 50%;
    color: #6b7280;
    cursor: pointer;
    flex-shrink: 0;
}

.reference-picker-search-clear.hidden {
    display: none;
}

.reference-picker-search-clear:hover {
    background: rgba(0, 0, 0, 0.2);
    color: #374151;
}

[data-theme="dark"] .reference-picker-search-clear {
    background: rgba(255, 255, 255, 0.1);
    color: #9ca3af;
}

[data-theme="dark"] .reference-picker-search-clear:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #e5e7eb;
}

/* Books list */
.reference-picker-books-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.reference-picker-book-item {
    padding: 6px 10px;
    font-size: 12px;
    color: #374151;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reference-picker-book-item:hover {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.reference-picker-book-item.active {
    background: rgba(124, 58, 237, 0.15);
    color: #7c3aed;
    font-weight: 500;
}

[data-theme="dark"] .reference-picker-book-item {
    color: #d1d5db;
}

[data-theme="dark"] .reference-picker-book-item:hover {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

[data-theme="dark"] .reference-picker-book-item.active {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

/* Chapters grid */
.reference-picker-chapters-grid {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    align-content: start;
}

.reference-picker-chapter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    min-height: 36px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.reference-picker-chapter-btn:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.3);
    color: #7c3aed;
}

.reference-picker-chapter-btn.active {
    background: #7c3aed;
    border-color: #7c3aed;
    color: white;
}

[data-theme="dark"] .reference-picker-chapter-btn {
    color: #d1d5db;
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.15);
}

[data-theme="dark"] .reference-picker-chapter-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.35);
    color: #a78bfa;
}

[data-theme="dark"] .reference-picker-chapter-btn.active {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
}

/* Verses grid */
.reference-picker-verses-grid {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    align-content: start;
}

.reference-picker-verse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    min-height: 36px;
    font-size: 12px;
    color: #374151;
    background: rgba(124, 58, 237, 0.03);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.reference-picker-verse-btn:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.2);
}

.reference-picker-verse-btn.selected {
    background: #7c3aed;
    border-color: #7c3aed;
    color: white;
}

[data-theme="dark"] .reference-picker-verse-btn {
    color: #d1d5db;
    background: rgba(139, 92, 246, 0.05);
    border-color: rgba(139, 92, 246, 0.1);
}

[data-theme="dark"] .reference-picker-verse-btn:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.25);
}

[data-theme="dark"] .reference-picker-verse-btn.selected {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
}

/* Action buttons */
.reference-picker-actions {
    display: flex;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid rgba(124, 58, 237, 0.1);
    flex-shrink: 0;
}

[data-theme="dark"] .reference-picker-actions {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.reference-picker-goto-btn,
.reference-picker-add-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 8px;
    font-size: 11px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.reference-picker-goto-btn {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.reference-picker-goto-btn:hover:not(:disabled) {
    background: rgba(124, 58, 237, 0.2);
}

.reference-picker-goto-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.reference-picker-add-btn {
    background: #7c3aed;
    color: white;
}

.reference-picker-add-btn:hover:not(:disabled) {
    background: #6d28d9;
}

.reference-picker-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[data-theme="dark"] .reference-picker-goto-btn {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

[data-theme="dark"] .reference-picker-goto-btn:hover:not(:disabled) {
    background: rgba(139, 92, 246, 0.25);
}

[data-theme="dark"] .reference-picker-add-btn {
    background: #8b5cf6;
}

[data-theme="dark"] .reference-picker-add-btn:hover:not(:disabled) {
    background: #a78bfa;
}

/* Loading/Error states */
.reference-picker-loading,
.reference-picker-error {
    padding: 20px;
    text-align: center;
    font-size: 12px;
    color: #6b7280;
}

.reference-picker-error {
    color: #ef4444;
}

[data-theme="dark"] .reference-picker-loading {
    color: #9ca3af;
}

/* ==========================================
   REFERENCE MANUAL ENTRY BOX (Floating below popup)
   ========================================== */

.reference-manual-entry-box {
    position: absolute;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #ffffff 0%, #faf9ff 100%);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    box-shadow: 
        0 4px 20px rgba(124, 58, 237, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .reference-manual-entry-box {
    background: linear-gradient(135deg, #1e1e1e 0%, #171717 100%);
    border-color: rgba(139, 92, 246, 0.2);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(139, 92, 246, 0.15);
}

.reference-manual-entry-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(124, 58, 237, 0.03);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 8px;
    min-width: 0;
}

[data-theme="dark"] .reference-manual-entry-search {
    background: rgba(139, 92, 246, 0.06);
    border-color: rgba(139, 92, 246, 0.15);
}

.reference-manual-entry-icon {
    color: #9ca3af;
    flex-shrink: 0;
}

[data-theme="dark"] .reference-manual-entry-icon {
    color: #6b7280;
}

.reference-manual-entry-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    min-width: 0;
}

.reference-manual-entry-input::placeholder {
    color: #9ca3af;
    font-style: italic;
}

[data-theme="dark"] .reference-manual-entry-input {
    color: #e5e7eb;
}

[data-theme="dark"] .reference-manual-entry-input::placeholder {
    color: #6b7280;
}

.reference-manual-entry-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(0, 0, 0, 0.08);
    border: none;
    border-radius: 50%;
    color: #6b7280;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.reference-manual-entry-clear.hidden {
    display: none;
}

.reference-manual-entry-clear:hover {
    background: rgba(0, 0, 0, 0.15);
    color: #374151;
}

[data-theme="dark"] .reference-manual-entry-clear {
    background: rgba(255, 255, 255, 0.1);
    color: #9ca3af;
}

[data-theme="dark"] .reference-manual-entry-clear:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #e5e7eb;
}

.reference-manual-entry-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: #7c3aed;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.reference-manual-entry-add-btn:hover {
    background: #6d28d9;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.35);
}

.reference-manual-entry-add-btn:active {
    transform: translateY(0);
}

.reference-manual-entry-add-btn svg {
    flex-shrink: 0;
}

[data-theme="dark"] .reference-manual-entry-add-btn {
    background: #8b5cf6;
}

[data-theme="dark"] .reference-manual-entry-add-btn:hover {
    background: #a78bfa;
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.45);
}

/* Error state for manual entry box */
.reference-manual-entry-box.entry-error {
    border-color: #ef4444 !important;
    box-shadow: 
        0 0 0 2px rgba(239, 68, 68, 0.2),
        0 4px 20px rgba(239, 68, 68, 0.15);
}

.reference-manual-entry-box.entry-error .reference-manual-entry-search {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

[data-theme="dark"] .reference-manual-entry-box.entry-error {
    border-color: #f87171 !important;
    box-shadow: 
        0 0 0 2px rgba(248, 113, 113, 0.25),
        0 4px 20px rgba(239, 68, 68, 0.25);
}

[data-theme="dark"] .reference-manual-entry-box.entry-error .reference-manual-entry-search {
    border-color: #f87171;
    background: rgba(239, 68, 68, 0.1);
}

/* Shake animation for validation errors */
@keyframes shake-entry-box {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.reference-manual-entry-box.shake {
    animation: shake-entry-box 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Resize handle indicator */
.create-note-popup::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    background: linear-gradient(
        -45deg,
        transparent 0%,
        transparent 40%,
        rgba(124, 58, 237, 0.3) 40%,
        rgba(124, 58, 237, 0.3) 45%,
        transparent 45%,
        transparent 55%,
        rgba(124, 58, 237, 0.3) 55%,
        rgba(124, 58, 237, 0.3) 60%,
        transparent 60%,
        transparent 70%,
        rgba(124, 58, 237, 0.3) 70%,
        rgba(124, 58, 237, 0.3) 75%,
        transparent 75%
    );
    pointer-events: none;
    border-radius: 0 0 16px 0;
}

[data-theme="dark"] .create-note-popup::after {
    background: linear-gradient(
        -45deg,
        transparent 0%,
        transparent 40%,
        rgba(139, 92, 246, 0.4) 40%,
        rgba(139, 92, 246, 0.4) 45%,
        transparent 45%,
        transparent 55%,
        rgba(139, 92, 246, 0.4) 55%,
        rgba(139, 92, 246, 0.4) 60%,
        transparent 60%,
        transparent 70%,
        rgba(139, 92, 246, 0.4) 70%,
        rgba(139, 92, 246, 0.4) 75%,
        transparent 75%
    );
}

/* ==========================================
   POPUP NOTE CONNECTING LINE
   ========================================== */

.popup-note-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1049;
    overflow: hidden;
}

.popup-note-line line {
    /* stroke set dynamically via JavaScript gradient */
    stroke-width: 2;
    stroke-dasharray: 6, 4;
    stroke-linecap: round;
}

[data-theme="dark"] .popup-note-line line {
    /* stroke set dynamically via JavaScript gradient */
}

/* ==========================================
   VERSE EMPHASIS FOR POPUP NOTES
   ========================================== */

.verse-emphasized-popup {
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* Popup emphasis - inline styles from JS control colors and box-shadow */
/* These rules provide structural styling only */
.verse-emphasized-popup:not(.popup-color-1):not(.popup-color-2):not(.popup-color-3):not(.popup-color-4):not(.popup-color-5) {
    /* No background or box-shadow here - inline styles control everything */
}

/* Dark theme popup colors - inline styles override */
[data-theme="dark"] .verse-emphasized-popup:not(.popup-color-1):not(.popup-color-2):not(.popup-color-3):not(.popup-color-4):not(.popup-color-5) {
    /* No background or box-shadow here - inline styles control everything */
}

/* Hide on mobile */
@media (max-width: 1080px) {
    .popup-note-card {
        display: none !important;
    }
    
    .popup-note-line {
        display: none !important;
    }
}

/* ==========================================
   FOLDER TABS (Collapsible - outside Notes Panel)
   ========================================== */

.notes-folder-tabs {
    display: none; /* Hidden by default, shown when folders exist */
    position: absolute;
    right: -8px;
    bottom: 80px;
    transform: translateX(100%);
    z-index: 1051;
}

/* Collapsed toggle button */
.folder-tabs-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #7c3aed;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.folder-tabs-toggle:hover {
    background: #f8f5ff;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}

.folder-tabs-toggle svg {
    color: #7c3aed;
}

.folder-toggle-count {
    background: #7c3aed;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

[data-theme="dark"] .folder-tabs-toggle {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
    color: #a78bfa;
}

[data-theme="dark"] .folder-tabs-toggle:hover {
    background: #252525;
}

[data-theme="dark"] .folder-toggle-count {
    background: #8b5cf6;
}

/* Expanded folder panel */
.folder-tabs-expanded {
    display: none;
    flex-direction: column;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    min-width: 180px;
    max-width: 220px;
}

[data-theme="dark"] .folder-tabs-expanded {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.notes-folder-tabs.expanded .folder-tabs-toggle {
    display: none;
}

.notes-folder-tabs.expanded .folder-tabs-expanded {
    display: flex;
}

.notes-folder-tabs.collapsed .folder-tabs-toggle {
    display: flex;
}

.notes-folder-tabs.collapsed .folder-tabs-expanded {
    display: none;
}

.folder-tabs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 8px;
}

.folder-tabs-title {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .folder-tabs-title {
    color: #94a3b8;
}

.folder-tabs-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #94a3b8;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.folder-tabs-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #64748b;
}

[data-theme="dark"] .folder-tabs-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e5e5e5;
}

/* Folder tabs scroll container */
.folder-tabs-scroll {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}

/* Individual folder tab buttons */
.folder-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    width: 100%;
}

.folder-tab:hover {
    background: rgba(0, 0, 0, 0.04);
}

.folder-tab.active {
    background: rgba(124, 58, 237, 0.08);
}

[data-theme="dark"] .folder-tab:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .folder-tab.active {
    background: rgba(139, 92, 246, 0.15);
}

/* Checkbox style indicator */
.folder-tab-checkbox {
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.folder-tab-checkbox svg {
    width: 10px;
    height: 10px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.folder-tab.active .folder-tab-checkbox {
    background: #7c3aed;
    border-color: #7c3aed;
}

.folder-tab.active .folder-tab-checkbox svg {
    opacity: 1;
    color: white;
}

[data-theme="dark"] .folder-tab-checkbox {
    border-color: #4b5563;
}

[data-theme="dark"] .folder-tab.active .folder-tab-checkbox {
    background: #8b5cf6;
    border-color: #8b5cf6;
}

/* Folder color dot */
.folder-tab-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Folder name */
.folder-tab-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="dark"] .folder-tab-name {
    color: #e5e5e5;
}

/* Note count badge */
.folder-tab-count {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    background: rgba(0, 0, 0, 0.04);
    padding: 2px 6px;
    border-radius: 10px;
}

[data-theme="dark"] .folder-tab-count {
    color: #6b7280;
    background: rgba(255, 255, 255, 0.06);
}

/* Note folder indicator - small colored dot on note cards */
.note-folder-indicator {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0.9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .note-folder-indicator {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.notes-list-container {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}


/* ==========================================
   CHURCH FATHERS TAB & NOTES
   ========================================== */

/* Divider between folders and Church Fathers tab */
.folder-tabs-divider {
    height: 1px;
    background: rgba(157, 143, 201, 0.3);
    margin: 8px 12px;
}

[data-theme="dark"] .folder-tabs-divider {
    background: rgba(157, 143, 201, 0.2);
}

/* Church Fathers tab styling (inherits folder-tab styles) */
.church-fathers-tab {
    margin-top: 0 !important;
    border-top: none !important;
}

/* Hide Church Fathers tab on mobile devices */
@media (max-width: 767px) {
    .church-fathers-tab {
        display: none !important;
    }
}

.church-fathers-tab .folder-tab-dot.church-fathers-dot {
    background: linear-gradient(135deg, #9d8fc9 0%, #7c6aa8 100%) !important;
    box-shadow: 0 0 6px rgba(157, 143, 201, 0.4);
}

.church-fathers-tab.active {
    background: rgba(157, 143, 201, 0.15) !important;
    border-color: #9d8fc9 !important;
}

[data-theme="dark"] .church-fathers-tab.active {
    background: rgba(157, 143, 201, 0.2) !important;
}

/* Church Fathers Notes Container */
.church-fathers-notes-container {
    border-top: 1px solid rgba(157, 143, 201, 0.2);
    margin-top: 8px;
    padding-top: 0;
    background: rgba(248, 246, 255, 0.3);
}

[data-theme="dark"] .church-fathers-notes-container {
    background: rgba(30, 25, 45, 0.3);
    border-top-color: rgba(157, 143, 201, 0.15);
}

/* Section Header */
.cf-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #9d8fc9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .cf-section-header {
    color: #b4a8d4;
}

.cf-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #9d8fc9 0%, #7c6aa8 100%);
    border-radius: 6px;
    color: white;
}

.cf-section-title {
    flex: 1;
}

/* Loading state */
.cf-notes-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.cf-notes-loading.hidden {
    display: none;
}

/* Empty/Not following states */
.cf-notes-empty,
.cf-not-following {
    padding: 40px 20px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

.cf-notes-empty.hidden,
.cf-not-following.hidden {
    display: none;
}

.cf-empty-icon {
    margin-bottom: 16px;
    opacity: 0.4;
    color: #9d8fc9;
}

[data-theme="dark"] .cf-empty-icon {
    opacity: 0.3;
}

.cf-browse-link {
    display: inline-block;
    margin-top: 12px;
    color: #9d8fc9;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: color 0.15s ease;
}

.cf-browse-link:hover {
    color: #7c6aa8;
    text-decoration: underline;
}

/* Church Fathers Notes List */
.cf-notes-list {
    display: flex;
    flex-direction: column;
}

/* Church Father Note Item - Expandable Card Design */
.cf-note-item {
    position: relative;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 4px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.cf-note-item:last-child {
    border-bottom: none;
}

[data-theme="dark"] .cf-note-item {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.cf-note-item:hover {
    background: rgba(157, 143, 201, 0.06);
}

[data-theme="dark"] .cf-note-item:hover {
    background: rgba(157, 143, 201, 0.1);
}

/* Author - Always visible */
.cf-note-author {
    font-size: 13px;
    font-weight: 600;
    color: #9d8fc9;
    margin-bottom: 2px;
}

[data-theme="dark"] .cf-note-author {
    color: #b4a8d4;
}

/* Note header - Contains author and minimize button */
.cf-note-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.cf-note-header .cf-note-author {
    flex: 1;
}

/* Minimize button */
.cf-note-minimize-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: rgba(157, 143, 201, 0.15);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #9d8fc9;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: 8px;
}

.cf-note-minimize-btn:hover {
    background: rgba(157, 143, 201, 0.3);
    color: #7c6bb3;
}

[data-theme="dark"] .cf-note-minimize-btn {
    background: rgba(157, 143, 201, 0.2);
    color: #b4a8d4;
}

[data-theme="dark"] .cf-note-minimize-btn:hover {
    background: rgba(157, 143, 201, 0.4);
    color: #c9bde6;
}

/* Reference - Always visible */
.cf-note-reference {
    font-size: 11px;
    color: #6b7280;
    font-style: italic;
}

[data-theme="dark"] .cf-note-reference {
    color: #9ca3af;
}

/* Content - Hidden when collapsed, visible when expanded */
.cf-note-content {
    font-size: 14px;
    line-height: 1.65;
    color: #111827;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-weight: 400;
    font-style: italic;
    padding: 12px;
    margin-top: 10px;
    background: rgba(157, 143, 201, 0.06);
    border-left: 3px solid rgba(157, 143, 201, 0.4);
    border-radius: 4px;
    
    /* Hidden by default */
    max-height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
}

[data-theme="dark"] .cf-note-content {
    color: #e5e7eb;
    background: rgba(157, 143, 201, 0.1);
    border-left-color: rgba(157, 143, 201, 0.5);
}

/* Source - Hidden when collapsed */
.cf-note-source {
    font-size: 11px;
    color: #6b7280;
    font-style: italic;
    margin-top: 8px;
    
    /* Hidden by default */
    max-height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
}

/* Footer container for source and Read in Context */
.cf-note-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    /* Hidden by default */
    max-height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
}

.cf-note-footer .cf-note-source {
    max-height: none;
    margin: 0;
    opacity: 1;
    flex: 1;
}

/* Read in Context button */
.read-in-context-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #6B4596 0%, #8B5A9C 100%);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.read-in-context-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(107, 69, 150, 0.3);
}

.read-in-context-btn svg {
    flex-shrink: 0;
}

[data-theme="dark"] .read-in-context-btn {
    background: linear-gradient(135deg, #7B5596 0%, #9B6AAC 100%);
}

[data-theme="dark"] .cf-note-source {
    color: #9ca3af;
}

/* Expanded state - Show everything */
.cf-note-item.expanded {
    background: rgba(157, 143, 201, 0.08);
    padding: 14px 16px 16px;
    box-shadow: 0 2px 8px rgba(157, 143, 201, 0.12);
}

[data-theme="dark"] .cf-note-item.expanded {
    background: rgba(157, 143, 201, 0.12);
}

.cf-note-item.expanded .cf-note-content {
    max-height: 500px;
    padding: 12px;
    margin-top: 10px;
    opacity: 1;
}

.cf-note-item.expanded .cf-note-source {
    max-height: 30px;
    margin-top: 8px;
    opacity: 1;
}

.cf-note-item.expanded .cf-note-footer {
    max-height: 40px;
    margin-top: 10px;
    opacity: 1;
}

/* Verse highlighting animation for Church Fathers */
@keyframes cfVerseHighlightPulse {
    0%, 100% {
        background-color: rgba(157, 143, 201, 0.15);
    }
    50% {
        background-color: rgba(157, 143, 201, 0.3);
    }
}

/* Verse number highlight */
.verse-cf-highlight {
    background-color: rgba(157, 143, 201, 0.35) !important;
    border-radius: 3px;
    transition: background-color 0.3s ease;
    padding: 2px 4px;
    margin: -2px -4px;
}

.verse-cf-highlight.pulse {
    animation: cfVerseHighlightPulse 1.5s ease-in-out 3;
}

/* Full verse text highlight */
.verse-cf-text-highlight {
    background-color: rgba(157, 143, 201, 0.18);
    border-radius: 3px;
    padding: 2px 0;
    transition: background-color 0.3s ease;
}

.verse-cf-text-highlight.pulse {
    animation: cfVerseHighlightPulse 1.5s ease-in-out 3;
}

[data-theme="dark"] .verse-cf-highlight {
    background-color: rgba(157, 143, 201, 0.45) !important;
}

[data-theme="dark"] .verse-cf-text-highlight {
    background-color: rgba(157, 143, 201, 0.25);
}

/* Church Fathers popup note card */
.cf-popup-note {
    position: absolute;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 340px;
    min-width: 280px;
    z-index: 1050;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition: all 0.2s ease;
    border-left: 4px solid #9d8fc9;
}

.cf-popup-note.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

[data-theme="dark"] .cf-popup-note {
    background: #1e1e2e;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.cf-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px 14px 8px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .cf-popup-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.cf-popup-author {
    font-size: 14px;
    font-weight: 600;
    color: #9d8fc9;
}

.cf-popup-work {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

[data-theme="dark"] .cf-popup-work {
    color: #999;
}

.cf-popup-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #888;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.cf-popup-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #333;
}

[data-theme="dark"] .cf-popup-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.cf-popup-content {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.65;
    color: #333;
    font-style: italic;
    max-height: 200px;
    overflow-y: auto;
}

[data-theme="dark"] .cf-popup-content {
    color: #d0d0d8;
}

.cf-popup-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: rgba(248, 246, 255, 0.5);
    border-radius: 0 0 12px 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .cf-popup-footer {
    background: rgba(30, 30, 45, 0.5);
    border-top-color: rgba(255, 255, 255, 0.04);
}

.cf-popup-reference {
    font-size: 12px;
    font-weight: 500;
    color: #9d8fc9;
}

.cf-popup-citation {
    font-size: 11px;
    color: #888;
}

[data-theme="dark"] .cf-popup-citation {

    color: #999;
}

/* ==========================================
   CHURCH FATHERS MODE — Faint Verse Highlights
   ========================================== */

/* Faint highlight on verse numbers with commentaries */
.fathers-mode-verse-highlight {
    background-color: var(--cf-bg, rgba(184, 134, 11, 0.12)) !important;
    border-radius: 4px;
    padding: 3px 4px;
    margin: -3px -4px;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.2s ease;
    border-left: 3px solid var(--cf-border, rgba(184, 134, 11, 0.45));
    box-shadow: inset 0 0 0 1px rgba(184, 134, 11, 0.08);
}

.fathers-mode-verse-highlight:hover {
    background-color: var(--cf-hover-bg, rgba(184, 134, 11, 0.22)) !important;
    border-left-color: var(--cf-border, rgba(184, 134, 11, 0.7));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Active state when panel is open */
.fathers-mode-verse-active {
    background-color: var(--cf-active-bg, rgba(184, 134, 11, 0.28)) !important;
    border-left: 3px solid var(--cf-border, #b8860b) !important;
    box-shadow: 0 2px 12px rgba(184, 134, 11, 0.25), 0 0 0 2px rgba(184, 134, 11, 0.12);
    transform: scale(1.03);
    position: relative;
    z-index: 5;
    transition: all 0.2s ease;
}

/* Faint highlight on verse text */
.fathers-mode-text-highlight {
    background-color: rgba(184, 134, 11, 0.08);
    border-radius: 3px;
    padding: 1px 0;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.2s ease;
    border-bottom: 2px solid rgba(184, 134, 11, 0.35);
}

.fathers-mode-text-highlight:hover {
    background-color: rgba(184, 134, 11, 0.18);
    border-bottom-color: rgba(184, 134, 11, 0.55);
}

/* Active state */
.fathers-mode-text-active {
    background-color: rgba(184, 134, 11, 0.22) !important;
    border-bottom: 2px solid rgba(184, 134, 11, 0.7) !important;
    transform: scale(1.02);
    position: relative;
    z-index: 5;
    transition: all 0.2s ease;
}

/* Dark theme */
[data-theme="dark"] .fathers-mode-verse-highlight {
    background-color: var(--cf-bg, rgba(218, 165, 32, 0.14)) !important;
    border-left-color: var(--cf-border, rgba(218, 165, 32, 0.45));
    box-shadow: inset 0 0 0 1px rgba(218, 165, 32, 0.08);
}
[data-theme="dark"] .fathers-mode-verse-highlight:hover {
    background-color: var(--cf-hover-bg, rgba(218, 165, 32, 0.26)) !important;
    border-left-color: var(--cf-border, rgba(218, 165, 32, 0.7));
}
[data-theme="dark"] .fathers-mode-verse-active {
    background-color: var(--cf-active-bg, rgba(218, 165, 32, 0.32)) !important;
    border-left-color: var(--cf-border, #daa520) !important;
    box-shadow: 0 2px 12px rgba(218, 165, 32, 0.3), 0 0 0 2px rgba(218, 165, 32, 0.15);
    transform: scale(1.03);
    position: relative;
    z-index: 5;
}
[data-theme="dark"] .fathers-mode-text-highlight {
    background-color: rgba(218, 165, 32, 0.10);
    border-bottom-color: rgba(218, 165, 32, 0.35);
}
[data-theme="dark"] .fathers-mode-text-highlight:hover {
    background-color: rgba(218, 165, 32, 0.20);
    border-bottom-color: rgba(218, 165, 32, 0.55);
}
[data-theme="dark"] .fathers-mode-text-active {
    background-color: rgba(218, 165, 32, 0.25) !important;
    border-bottom: 2px solid rgba(218, 165, 32, 0.7) !important;
    transform: scale(1.02);
    position: relative;
    z-index: 5;
}

/* Emphasized state (popup is open for this verse — bolder highlight like notes mode) */
.fathers-mode-verse-emphasized {
    border-radius: 4px;
    padding: 3px 4px;
    margin: -3px -4px;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.2s ease;
    border-left: 3px solid;
    position: relative;
    z-index: 5;
    transform: scale(1.03);
}

.fathers-mode-text-emphasized {
    border-radius: 3px;
    padding: 1px 0;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.2s ease;
    position: relative;
    z-index: 5;
    transform: scale(1.02);
}

/* ==========================================
   CHURCH FATHERS MODE — Floating Popup (v4.2)
   Draggable popup cards with SVG connecting line,
   matching notes mode behavior exactly.
   ========================================== */

/* Multi-father dot indicator on verse numbers */
.cf-multi-father-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 700;
    margin-left: 2px;
    vertical-align: super;
    line-height: 1;
}

/* ---- Popup Card ---- */
.cf-popup-card {
    position: absolute;
    background: linear-gradient(135deg, #fffdf7 0%, #faf5e8 100%);
    border: 1px solid rgba(184, 134, 11, 0.25);
    border-radius: 12px;
    box-shadow:
        0 8px 32px rgba(184, 134, 11, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.08);
    z-index: 10000;
    min-width: 240px;
    max-width: 420px;
    width: auto;
    min-height: 80px;
    max-height: 70vh;
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    resize: both;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
}

.cf-popup-card.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.cf-popup-card.dragging {
    cursor: grabbing;
    box-shadow:
        0 12px 48px rgba(184, 134, 11, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.12);
    transform: scale(1.02);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cf-popup-card.dragging * {
    cursor: grabbing;
}

[data-theme="dark"] .cf-popup-card {
    background: linear-gradient(135deg, #0a0a0a 0%, #111111 100%);
    border-color: rgba(218, 165, 32, 0.3);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 4px 16px rgba(218, 165, 32, 0.08);
}

/* Resize handle (bottom-right corner) */
.cf-popup-card::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, transparent 50%, rgba(184, 134, 11, 0.2) 50%);
    border-radius: 0 0 10px 0;
    cursor: se-resize;
    z-index: 2;
}

[data-theme="dark"] .cf-popup-card::after {
    background: linear-gradient(135deg, transparent 50%, rgba(218, 165, 32, 0.2) 50%);
}

/* ---- Tabs (multiple fathers) ---- */
.cf-popup-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    flex-wrap: wrap;
    max-height: 62px;
    border-bottom: 1px solid rgba(184, 134, 11, 0.1);
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex-shrink: 0;
}

.cf-popup-tabs::-webkit-scrollbar {
    display: none;
}

.cf-popup-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 500;
    color: #999;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    font-family: inherit;
}

.cf-popup-tab:hover {
    color: var(--tab-color, #b8860b);
    background: rgba(184, 134, 11, 0.05);
}

.cf-popup-tab.active {
    font-weight: 600;
}

.cf-tab-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cf-tab-num {
    font-weight: inherit;
}

.cf-tab-count {
    font-size: 9px;
    font-weight: 600;
    background: rgba(184, 134, 11, 0.12);
    color: #b8860b;
    padding: 1px 5px;
    border-radius: 8px;
}

[data-theme="dark"] .cf-popup-tab {
    color: #666;
}

[data-theme="dark"] .cf-popup-tab:hover {
    color: var(--tab-color, #daa520);
}

[data-theme="dark"] .cf-tab-count {
    background: rgba(218, 165, 32, 0.15);
    color: #daa520;
}

/* ---- Header (close button, absolute top-right) ---- */
.cf-popup-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 2px 4px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    cursor: grab;
}

.cf-popup-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #b0b0b0;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.5;
}

.cf-popup-card:hover .cf-popup-close {
    opacity: 1;
}

.cf-popup-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #555;
}

[data-theme="dark"] .cf-popup-close {
    color: #666;
}

[data-theme="dark"] .cf-popup-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ccc;
}

/* ---- Author panel visibility ---- */
.cf-popup-author-panel {
    /* visible by default */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.cf-panel-hidden {
    display: none !important;
}

/* ---- Inner navigation (prev/next within one father) ---- */
.cf-popup-inner-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(184, 134, 11, 0.05);
    border-bottom: 1px solid rgba(184, 134, 11, 0.1);
    font-size: 11px;
    color: #888;
}

[data-theme="dark"] .cf-popup-inner-nav {
    background: rgba(218, 165, 32, 0.06);
    border-bottom-color: rgba(218, 165, 32, 0.12);
    color: #777;
}

.cf-inner-counter {
    font-weight: 500;
    min-width: 50px;
    text-align: center;
}

.cf-inner-prev,
.cf-inner-next {
    background: none;
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 6px;
    padding: 3px 6px;
    cursor: pointer;
    color: #b8860b;
    display: flex;
    align-items: center;
    transition: all 0.15s ease;
}

.cf-inner-prev:hover:not(:disabled),
.cf-inner-next:hover:not(:disabled) {
    background: rgba(184, 134, 11, 0.1);
    border-color: rgba(184, 134, 11, 0.3);
}

.cf-inner-prev:disabled,
.cf-inner-next:disabled {
    opacity: 0.3;
    cursor: default;
}

[data-theme="dark"] .cf-inner-prev,
[data-theme="dark"] .cf-inner-next {
    color: #daa520;
    border-color: rgba(218, 165, 32, 0.2);
}

[data-theme="dark"] .cf-inner-prev:hover:not(:disabled),
[data-theme="dark"] .cf-inner-next:hover:not(:disabled) {
    background: rgba(218, 165, 32, 0.12);
}

/* ---- Inner commentary cards ---- */
.cf-popup-inner-card {
    padding: 12px 14px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* ---- Author row (avatar + name) ---- */
.cf-card-author-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.cf-card-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(184, 134, 11, 0.3);
    flex-shrink: 0;
}

[data-theme="dark"] .cf-card-avatar {
    border-color: rgba(218, 165, 32, 0.3);
}

/* ---- Author info wrapper ---- */
.cf-card-author-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ---- Author name ---- */
.cf-card-author {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1.3;
}

/* ---- Era / years ---- */
.cf-card-era {
    font-size: 10.5px;
    color: #999;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 1px;
}

[data-theme="dark"] .cf-card-era {
    color: #777;
}

/* ---- Work title ---- */
.cf-card-work {
    font-size: 11px;
    color: #888;
    font-style: italic;
    margin-bottom: 8px;
}

[data-theme="dark"] .cf-card-work {
    color: #999;
}

/* ---- Citation (e.g., CCC §554) ---- */
.cf-card-citation {
    font-size: 10.5px;
    color: #b08540;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

[data-theme="dark"] .cf-card-citation {
    color: #d4a855;
}

/* ---- Commentary text ---- */
.cf-card-text {
    font-size: 13.5px;
    line-height: 1.65;
    color: #333;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    flex: 1 1 auto;
    min-height: 60px;
    overflow-y: auto;
    cursor: grab;
    padding-right: 4px;
}

[data-theme="dark"] .cf-card-text {
    color: #d0d0d8;
}

/* Scrollbar for text */
.cf-card-text::-webkit-scrollbar {
    width: 4px;
}

.cf-card-text::-webkit-scrollbar-thumb {
    background: rgba(184, 134, 11, 0.2);
    border-radius: 4px;
}

/* ---- Footer ---- */
.cf-card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.cf-card-footer:empty {
    display: none;
}

[data-theme="dark"] .cf-card-footer {
    border-top-color: rgba(255, 255, 255, 0.04);
}

.cf-card-ref {
    font-size: 11px;
    font-weight: 500;
}

/* ---- Read in Context button ---- */
.cf-card-read-context {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(184, 134, 11, 0.1);
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 6px;
    color: #b8860b;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.cf-card-read-context:hover {
    background: rgba(184, 134, 11, 0.2);
    border-color: rgba(184, 134, 11, 0.4);
}

[data-theme="dark"] .cf-card-read-context {
    background: rgba(218, 165, 32, 0.15);
    border-color: rgba(218, 165, 32, 0.25);
    color: #daa520;
}

[data-theme="dark"] .cf-card-read-context:hover {
    background: rgba(218, 165, 32, 0.25);
}

/* ---- Reference footer ---- */
.cf-popup-reference {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 6px 14px 8px;
    background: rgba(184, 134, 11, 0.04);
    border-top: 1px solid rgba(184, 134, 11, 0.08);
    flex-shrink: 0;
}

[data-theme="dark"] .cf-popup-reference {
    background: rgba(218, 165, 32, 0.04);
    border-top-color: rgba(218, 165, 32, 0.08);
}

.cf-popup-ref-text {
    font-size: 11px;
    font-style: italic;
    color: #b8860b;
    font-weight: 500;
}

[data-theme="dark"] .cf-popup-ref-text {
    color: #daa520;
}

/* ---- Connecting SVG line ---- */
.cf-popup-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: visible;
}

.cf-popup-line line {
    stroke-width: 2;
    stroke-dasharray: 6, 4;
    stroke-linecap: round;
}

/* ==========================================
   CHURCH FATHERS MODE — Hide notes elements
   ========================================== */

/* Allow notes panel to show in fathers mode with commentaries */
body.fathers-mode-active.notes-panel-visible .main-wrapper {
    margin-left: 400px;
    transition: margin-left 0.3s ease;
}

body.fathers-mode-active .create-note-btn,
body.fathers-mode-active .note-indicator,
body.fathers-mode-active .note-popup,
body.fathers-mode-active .popup-note-line,
body.fathers-mode-active .faint-note-indicator,
body.fathers-mode-active .note-creation-bubble,
body.fathers-mode-active .create-note-popup {
    display: none !important;
}

/* Hide AI panel in Fathers mode (panel stays hidden, but tab is visible) */
body.fathers-mode-active #ai-chat-panel,
body.fathers-mode-active .ai-chat-panel,
body.fathers-mode-active .biblia-ai-panel {
    display: none !important;
}

/* Remove right margin gap when AI panel is hidden in Fathers mode */
body.fathers-mode-active .bible-main-content,
body.fathers-mode-active.ai-panel-open .bible-main-content {
    margin-right: 0 !important;
}

/* AI toggle tab is VISIBLE in Fathers mode (user can open AI if they want) */

/* Hide AI verse highlights (light blue) in Fathers mode */
body.fathers-mode-active .ai-verse-highlight,
body.fathers-mode-active .ai-verse-pulse,
body.fathers-mode-active .ai-verse-selected {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    animation: none !important;
}

/* In Fathers mode, ensure verse clicking still works */
body.fathers-mode-active #chapter-content .v {
    pointer-events: auto;
    cursor: pointer;
}

body.fathers-mode-active #chapter-content .verse-text {
    pointer-events: auto;
    cursor: pointer;
}

/* ==========================================
   CHURCH FATHERS MODE — Mobile Responsive
   ========================================== */

@media (max-width: 768px) {
    .cf-popup-card {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
        border-radius: 16px 16px 0 0;
        max-height: 65vh;
        overflow-y: auto;
        resize: none;
        border-left: none;
        border-top: 3px solid #b8860b;
    }

    .cf-popup-line {
        display: none;
    }
}

/* ==========================================
   COLOR PALETTE FOR NOTE HIGHLIGHTING
   ========================================== */

/* Main Container */
.color-palette-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    z-index: 1051;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    padding: 12px 20px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.color-palette-container.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

[data-theme="dark"] .color-palette-container {
    background: rgba(31, 31, 31, 0.95);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.color-palette-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
}

/* Color Circle Wrapper - positioned relative for popover */
.color-circle-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.color-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-circle:hover {
    transform: scale(1.1);
}

.color-circle.selected {
    border-color: #374151;
}

[data-theme="dark"] .color-circle.selected {
    border-color: #fff;
}

.color-chevron {
    opacity: 0;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: opacity 0.15s ease;
}

.color-circle.selected .color-chevron {
    opacity: 1;
}

.color-theme-label {
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
    white-space: nowrap;
}

/* Hide theme labels when setting is off */
body[data-show-theme-labels="false"] .color-theme-label {
    display: none;
}

/* Also hide highlight type badges on notes when labels are off */
body[data-show-theme-labels="false"] .highlight-type-badge {
    display: none;
}

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

/* Add Color Button */
.add-color-circle {
    background: #f3f4f6;
    border: 2px dashed #d1d5db;
    color: #9ca3af;
}

.add-color-circle:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
    color: #6b7280;
}

[data-theme="dark"] .add-color-circle {
    background: #374151;
    border-color: #4b5563;
    color: #6b7280;
}

/* ==========================================
   INLINE EDIT POPOVER (appears above color)
   ========================================== */

.color-edit-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 10px;
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 1055;
    white-space: nowrap;
}

.color-edit-popover::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid white;
}

.color-edit-popover.visible {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}

[data-theme="dark"] .color-edit-popover {
    background: #2d2d2d;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .color-edit-popover::after {
    border-top-color: #2d2d2d;
}

.color-edit-picker {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    background: none;
}

.color-edit-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-edit-picker::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}

.color-edit-theme {
    width: 90px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    background: #f9fafb;
    color: #374151;
}

.color-edit-theme:focus {
    outline: none;
    border-color: #7c3aed;
}

[data-theme="dark"] .color-edit-theme {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

.color-edit-delete {
    padding: 6px;
    background: #fef2f2;
    border: none;
    border-radius: 6px;
    color: #ef4444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.color-edit-delete:hover {
    background: #fee2e2;
}

[data-theme="dark"] .color-edit-delete {
    background: rgba(239, 68, 68, 0.15);
}

/* ==========================================
   CUSTOM COLOR MODAL
   ========================================== */

.custom-color-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1060;
}

.custom-color-modal.visible {
    display: flex;
}

.custom-color-dialog {
    background: white;
    border-radius: 12px;
    padding: 20px;
    min-width: 260px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .custom-color-dialog {
    background: #1f1f1f;
}

.custom-color-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.custom-color-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

[data-theme="dark"] .custom-color-header h3 {
    color: #e5e7eb;
}

.custom-color-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.custom-color-close:hover {
    color: #6b7280;
}

.custom-color-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.custom-color-picker {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
}

.custom-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.custom-color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 8px;
}

.custom-color-hex {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    font-family: monospace;
    background: #f9fafb;
    color: #374151;
}

[data-theme="dark"] .custom-color-hex {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

.custom-color-theme {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    background: #f9fafb;
    color: #374151;
    margin-bottom: 16px;
    box-sizing: border-box;
}

[data-theme="dark"] .custom-color-theme {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

.custom-color-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.custom-color-cancel,
.custom-color-add {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.custom-color-cancel {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #374151;
}

.custom-color-cancel:hover {
    background: #e5e7eb;
}

[data-theme="dark"] .custom-color-cancel {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

.custom-color-add {
    background: #7c3aed;
    border: none;
    color: white;
}

.custom-color-add:hover {
    background: #6d28d9;
}

/* ==========================================
   HIGHLIGHT TYPE BADGE
   ========================================== */

.highlight-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

[data-theme="dark"] .highlight-type-badge {
    background: rgba(167, 139, 250, 0.2);
    color: #c4b5fd;
}

.note-highlight-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.note-highlight-color-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .color-palette-container {
        width: 95%;
        padding: 10px 14px;
    }
    
    .color-circle {
        width: 34px;
        height: 34px;
    }
    
    .color-palette-row {
        gap: 8px;
    }
    
    .color-theme-label {
        font-size: 9px;
    }
}

/* True-color verse highlights (uses note's actual highlight color) */
.verse-with-note-colored {
    cursor: pointer;
    transition: all 0.2s ease;
}

.verse-with-note-colored:hover {
    filter: brightness(0.95);
}

/* ==========================================
   POPUP NOTE "ADD TAB" BUTTON
   ========================================== */

/* "+" button to create new tab (new note for same verses) */
.popup-add-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: 1px dashed rgba(124, 58, 237, 0.3);
    background: transparent;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 2px;
    opacity: 0.6;
}

.popup-add-tab:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.5);
    opacity: 1;
}

.popup-add-tab svg {
    stroke: #7c3aed;
    transition: transform 0.2s ease;
}

.popup-add-tab:hover svg {
    transform: scale(1.1);
}

[data-theme="dark"] .popup-add-tab {
    border-color: rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .popup-add-tab:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.5);
}

[data-theme="dark"] .popup-add-tab svg {
    stroke: #a78bfa;
}

/* Single note tabs - hidden by default, shown in edit mode */
.popup-single-note-tabs {
    display: none;
}

/* Show single note tabs when in edit mode */
.popup-note-card.popup-editing .popup-single-note-tabs {
    display: flex;
}

/* Allow add-tab button to remain clickable even in edit mode */
.popup-note-card.popup-editing .popup-add-tab {
    opacity: 0.7;
    cursor: pointer;
    pointer-events: auto;
}

.popup-note-card.popup-editing .popup-add-tab:hover {
    opacity: 1;
}

/* ==========================================
   ATTACH TO NOTE FEATURE
   ========================================== */

/* Attach to note bubble under create popups */
.attach-to-note-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    margin: 0;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 400;
}

.attach-to-note-bubble svg {
    stroke: #94a3b8;
    width: 12px;
    height: 12px;
    transition: all 0.2s ease;
}

.attach-to-note-bubble:hover {
    color: #7c3aed;
}

.attach-to-note-bubble:hover svg {
    stroke: #7c3aed;
}

/* Panel mode variant (inside create another note bubble or main creation bubble) */
.attach-to-note-bubble.panel-mode {
    margin-top: 8px;
    padding: 6px 10px;
    border-top: none;
    border-radius: 6px;
    background: rgba(139, 92, 246, 0.05);
}

.attach-to-note-bubble.panel-mode:hover {
    background: rgba(139, 92, 246, 0.1);
}

/* Attach button inside the main note-creation-bubble */
.note-creation-bubble .attach-to-note-bubble {
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    margin-top: 0;
}

[data-theme="dark"] .attach-to-note-bubble {
    color: #64748b;
    border-top-color: rgba(71, 85, 105, 0.2);
}

[data-theme="dark"] .attach-to-note-bubble svg {
    stroke: #64748b;
}

[data-theme="dark"] .attach-to-note-bubble:hover {
    color: #a78bfa;
}

[data-theme="dark"] .attach-to-note-bubble:hover svg {
    stroke: #a78bfa;
}

[data-theme="dark"] .attach-to-note-bubble.panel-mode {
    background: rgba(139, 92, 246, 0.08);
}

[data-theme="dark"] .attach-to-note-bubble.panel-mode:hover {
    background: rgba(139, 92, 246, 0.15);
}

/* Attach mode indicator at top of notes panel */
.attach-mode-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin: 0 -12px 12px -12px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(109, 40, 217, 0.08) 100%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
    animation: attachModeSlideIn 0.2s ease-out;
}

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

.attach-mode-content {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7c3aed;
    font-size: 13px;
    font-weight: 500;
}

.attach-mode-content svg {
    stroke: #7c3aed;
    opacity: 0.8;
}

.attach-mode-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    cursor: pointer;
    transition: all 0.15s ease;
}

.attach-mode-cancel:hover {
    background: #ef4444;
    color: white;
}

.attach-mode-cancel svg {
    stroke: currentColor;
    width: 12px;
    height: 12px;
}

[data-theme="dark"] .attach-mode-indicator {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(109, 40, 217, 0.1) 100%);
    border-bottom-color: rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .attach-mode-content {
    color: #a78bfa;
}

[data-theme="dark"] .attach-mode-content svg {
    stroke: #a78bfa;
}

[data-theme="dark"] .attach-mode-cancel {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

/* Note items in attach mode */
.notes-attach-mode .note-item.attach-target {
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.notes-attach-mode .note-item.attach-target:hover {
    transform: translateY(-1px);
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}

/* Merge overlay on notes - subtle lavender background with title */
.merge-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(167, 139, 250, 0.12);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    z-index: 5;
    border: 2px solid rgba(139, 92, 246, 0.5);
}

.notes-attach-mode .note-item.attach-target:hover .merge-overlay {
    opacity: 1;
}

.merge-overlay-content {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(109, 40, 217, 0.9);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.merge-overlay-content svg {
    width: 14px;
    height: 14px;
    stroke: rgba(109, 40, 217, 0.8);
}

.merge-overlay-content span {
    letter-spacing: 0.2px;
}

[data-theme="dark"] .merge-overlay {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(167, 139, 250, 0.6);
}

[data-theme="dark"] .merge-overlay-content {
    color: rgba(196, 181, 253, 0.95);
    background: rgba(30, 30, 30, 0.8);
}

[data-theme="dark"] .merge-overlay-content svg {
    stroke: rgba(196, 181, 253, 0.9);
}

/* Note just merged animation */
.note-just-merged {
    animation: noteMergedPulse 0.4s ease;
    border-color: rgba(139, 92, 246, 0.6) !important;
}

@keyframes noteMergedPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
    }
    50% {
        transform: scale(1.01);
        box-shadow: 0 0 0 8px rgba(139, 92, 246, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
    }
}

/* Panel in attach mode styling */
.notes-panel.attach-mode {
    border-left: 2px solid rgba(139, 92, 246, 0.5);
}

[data-theme="dark"] .notes-panel.attach-mode {
    border-left-color: rgba(139, 92, 246, 0.6);
}

/* Merge success notification - black style matching mode switch */
.merge-success-notification {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: rgba(30, 30, 30, 0.95);
    color: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.merge-success-notification.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.merge-success-notification svg {
    stroke: white;
    flex-shrink: 0;
}

[data-theme="dark"] .merge-success-notification {
    background: rgba(40, 40, 40, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ==========================================
   SHARED STUDY BANNER (Read-Only Mode)
   ========================================== */

.shared-study-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%);
    border-radius: 10px;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.shared-study-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 8px;
    flex-shrink: 0;
}

.shared-study-banner-icon svg {
    stroke: #7c3aed;
}

.shared-study-banner-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.shared-study-banner-title {
    font-size: 13px;
    font-weight: 600;
    color: #4c1d95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shared-study-banner-subtitle {
    font-size: 11px;
    color: #6d28d9;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="dark"] .shared-study-banner {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.12) 100%);
    border-color: rgba(139, 92, 246, 0.25);
}

[data-theme="dark"] .shared-study-banner-icon {
    background: rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .shared-study-banner-icon svg {
    stroke: #a78bfa;
}

[data-theme="dark"] .shared-study-banner-title {
    color: #c4b5fd;
}

[data-theme="dark"] .shared-study-banner-subtitle {
    color: #a78bfa;
}

/* In shared mode, hide the create note button / FAB */
.shared-study-mode .create-note-fab,
.shared-study-mode .view-all-notes-btn .create-note-indicator,
.shared-study-mode #note-creation-bubble {
    display: none !important;
}

/* In shared mode, disable verse hover effects and cursor (except on highlighted notes) */
body.shared-study-mode.notes-mode-active #chapter-content .v:hover,
body.shared-study-mode.notes-mode-active .verse-text:hover,
body.shared-study-mode.notes-mode-active .verse-text-wrapper:hover {
    background-color: transparent !important;
    cursor: default !important;
}

body.shared-study-mode #chapter-content .v {
    cursor: default !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Block any verse selection highlighting in shared mode */
body.shared-study-mode #chapter-content .v.selected,
body.shared-study-mode #chapter-content .v.verse-highlighted-for-note,
body.shared-study-mode #chapter-content .verse-text.underline,
body.shared-study-mode #chapter-content .verse-text-wrapper.underline {
    background-color: transparent !important;
    text-decoration: none !important;
}

/* But keep pointer cursor on faint-highlighted verses (they have notes to view) */
body.shared-study-mode #chapter-content .verse-with-note,
body.shared-study-mode #chapter-content .verse-with-note-colored {
    cursor: pointer !important;
}

/* Shared read-only note items - remove hover edit cues */
.note-item.shared-readonly {
    cursor: default;
}

.note-item.shared-readonly:hover {
    /* No edit cursor */
    cursor: default;
}

/* Shared study mode: two-column layout only on very large screens (wider than Dell XPS 13 Plus 1920px) */
body.shared-study-mode .chapter-content.layout-auto {
    columns: 1 !important;
    max-width: 750px;
}

@media (min-width: 1921px) {
    body.shared-study-mode .chapter-content.layout-auto,
    body.shared-study-mode .chapter-content.layout-auto.auto-two-column {
        columns: 2 !important;
        max-width: 1100px;
        column-gap: 3.5rem;
        column-rule: 1px solid rgba(124, 58, 237, 0.12);
        column-fill: balance;
    }
}