/* Design System Variables */
:root {
    /* Colors */
    --bg-color: #eef2f7;
    --card-bg-color: #ffffff;
    --text-color: #222;
    --text-light-color: #718096;
    --border-color: #e2e8f0;
    --primary-color: #3182ce;
    --primary-color-dark: #2b6cb0;
    --primary-color-light: #ebf8ff;
    --hover-bg-color: #eaf1f8;
    
    /* Fonts */
    --font-ui: 'Inter', sans-serif;
    --font-scripture: 'Source Serif Pro', serif;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Border Radius */
    --radius: 12px;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Button reset to prevent browser default hover styles - but not for styled buttons */
button:not([class]) {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* Remove the global button hover reset entirely - it was breaking styled buttons */

body {
    font-family: var(--font-ui);
    color: var(--text-color);
    background: 
        repeating-linear-gradient(
            45deg,
            #E0E0E0 0px,
            #E0E0E0 2px,
            #D5D5D5 2px,
            #D5D5D5 4px
        );
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Global anchor/hyperlink styling */
a {
    color: #DD4111;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

a:visited {
    color: #DD4111;
}

a:active {
    opacity: 0.6;
}

/* Prevent FOUC (Flash of Unwanted Content) by initially hiding elements */
body:not(.app-initialized) #home-btn,
body:not(.app-initialized) #menu-btn,
body:not(.app-initialized) .nav-logo,
body:not(.app-initialized) #page-title,
body:not(.app-initialized) #main-content,
body:not(.app-initialized) #bottom-toolbar {
    visibility: hidden;
}

/* Fast loading skeleton */
body:not(.app-initialized) .navbar {
    background: var(--card-bg-color);
    height: 60px;
}

body:not(.app-initialized) #page-title::before {
    content: '';
    display: inline-block;
    width: 100px;
    height: 20px;
    background: #e2e8f0;
    border-radius: 4px;
    visibility: visible;
    animation: pulse 1.5s ease-in-out infinite;
}

body:not(.app-initialized) #main-content::before {
    content: '';
    display: block;
    height: 200px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    visibility: visible;
    margin: 20px;
    border-radius: 8px;
}

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

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#main-content {
    flex: 1;
}

/* Navigation Bar */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--card-bg-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    height: 60px;
}

.nav-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: var(--spacing-sm);
    color: var(--text-color);
    transition: transform 0.2s;
}

.nav-btn:hover {
    transform: scale(1.1) !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.nav-title {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-logo {
    height: 16px;
    width: auto;
    display: block;
}

/* Center chapter navigation relative to window on desktop */
@media (min-width: 769px) {
    .nav-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
    }
}

.nav-right {
    display: flex;
    gap: var(--spacing-sm);
}

/* Hamburger Menu */
.hamburger-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1);
    opacity: 1;
}

.home-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1);
    opacity: 1;
}

/* Sliding Tab Menu */
.hamburger-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 350px;
    height: 100vh;
    background: #222;
    padding: var(--spacing-xl) var(--spacing-lg);
    z-index: 200;
    transform: translateX(100%);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: none !important;
    border: none !important;
    border-left: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hamburger-menu::-webkit-scrollbar {
    display: none;
}

.hamburger-menu.open {
    transform: translateX(0);
    box-shadow: none !important;
    border-left: none !important;
}

.hamburger-menu.open .user-info {
    animation: slideInFromRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}

.hamburger-menu.open .menu-item {
    animation: slideInFromRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.hamburger-menu.open .menu-item:nth-child(3) {
    animation-delay: 0.15s;
}

.hamburger-menu.open .menu-item:nth-child(4) {
    animation-delay: 0.2s;
}

.hamburger-menu.open .menu-item:nth-child(5) {
    animation-delay: 0.25s;
}

@keyframes slideInFromRight {
    from {
        transform: translateX(30px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 199;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

.user-info {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: transparent;
    border-radius: var(--radius);
    border: none;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.profile-picture {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-initials {
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}

.user-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.user-details strong {
    font-size: 15px;
    margin-bottom: 2px;
    color: white;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-details span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hamburger-menu hr {
    display: none;
}

.menu-item {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-lg);
    background: transparent;
    border: none;
    border-radius: var(--radius);
    margin-bottom: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    font-size: 14px;
    font-weight: 500;
    color: white;
    text-align: left;
}

.menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.02);
}

/* SVG icons in hamburger menu */
.menu-icon-svg {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1); /* Make SVG icons white */
}

/* Profile Page Styling */
.profile {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-xl);
}

.profile-container {
    background: var(--card-bg-color);
    border-radius: var(--radius);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.profile-header {
    text-align: center;
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
    color: white;
}

.profile-picture-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    border: 3px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.profile-initials-large {
    font-size: 32px;
    font-weight: 600;
    color: white;
}

.profile-header h2 {
    margin: 0 0 var(--spacing-sm);
    font-size: 24px;
    font-weight: 600;
}

.profile-email {
    opacity: 0.9;
    font-size: 16px;
}

.profile-sections {
    padding: var(--spacing-xl);
}

.profile-section {
    margin-bottom: var(--spacing-xl);
}

.profile-section:last-child {
    margin-bottom: 0;
}

.profile-section h3 {
    margin: 0 0 var(--spacing-lg);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: var(--spacing-sm);
}

.profile-field {
    margin-bottom: var(--spacing-lg);
}

.profile-field label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
    color: var(--text-color);
}

.profile-field input[type="text"],
.profile-field input[type="email"] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 16px;
    font-family: var(--font-ui);
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.profile-field input[type="text"]:focus,
.profile-field input[type="email"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.profile-field input[type="file"] {
    display: none;
}

.profile-actions {
    padding: var(--spacing-xl);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .profile {
        padding: var(--spacing-md);
    }
    
    .profile-actions {
        flex-direction: column;
    }
    
    .profile-actions button {
        width: 100%;
    }
}

.menu-item:active {
    background: var(--primary-color-light);
}

.menu-item:last-child {
    margin-bottom: 0;
}

.menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 16px;
    opacity: 0.7;
}

/* Main Content */
#main-content {
    padding: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

/* Scripture Reader specific main content */
#main-content.reader-mode {
    padding: var(--spacing-lg);
    max-width: 800px;
    margin: 0 auto;
}

/* Card Styles */
.card {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

/* Buttons */
.btn {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transform: scale(1);
}

.btn-primary {
    background-color: var(--primary-color) !important;
    background: var(--primary-color) !important;
    color: white !important;
}

.btn-primary:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}

.btn-secondary {
    background-color: var(--primary-color-light);
    color: var(--primary-color);
}

.btn-secondary:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.plus-icon {
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
    color: white; /* Make plus icon white */
    transform: translateY(-1px); /* Move up 1px */
}

.feather-icon {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(100%); /* Make icon white */
}

/* Dashboard Styles */
.dashboard-header {
    margin-bottom: var(--spacing-xl);
    margin-top: var(--spacing-xl); /* Add more space from top */
    text-align: center; /* Center the text */
}

.dashboard-header h1 {
    font-size: 38px; /* Larger text */
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
}

.dashboard-header p {
    color: var(--text-color); /* Same color as welcome back text */
    font-size: 20px; /* Larger subtitle text but smaller than regular */
    line-height: 1.4;
    max-width: 600px; /* Limit width for better readability */
    margin: 0 auto; /* Center the paragraph */
}

.action-buttons {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    justify-content: center; /* Center the buttons */
}

/* Button icon styling */
.button-icon {
    width: 20px;
    height: 20px;
    margin-right: var(--spacing-sm);
    filter: brightness(0) invert(1); /* Make icon white for primary buttons */
}

/* Secondary button icons should match text color */
.btn-secondary .button-icon {
    filter: none; /* Remove white filter */
    opacity: 0.8;
}

/* Ensure button content is vertically centered */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Single line button text should be centered */
.btn-secondary .button-text {
    align-items: center;
}

/* Full-width activity rows */
.full-width-activity {
    background: var(--card-bg-color);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.activity-rows {
    display: flex;
    flex-direction: column;
}

.activity-row {
    display: grid;
    grid-template-columns: 40px 80px 120px 200px 1fr;
    gap: var(--spacing-md);
    padding: calc(var(--spacing-md) + 5px) var(--spacing-lg); /* 5px more top/bottom padding */
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.activity-row:hover {
    background-color: #f8f9fa; /* Very light gray instead of bluish */
}

.activity-row:last-child {
    border-bottom: none;
}

.activity-row-favorite {
    display: flex;
    justify-content: center;
    align-items: center;
}

.activity-row-favorite .heart-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.activity-row-favorite .heart-icon:hover {
    opacity: 0.7;
}

.activity-row-date {
    font-size: 14px;
    color: var(--text-color);
    font-weight: 500;
}

.activity-row-category {
    display: flex;
    justify-content: flex-start;
}

.category-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.category-pill.question {
    background-color: #3b82f6;
    color: white;
}

.category-pill.note,
.category-pill.thought {
    background-color: #22c55e;
    color: white;
}

.category-pill.inspiration {
    background-color: #8b5cf6;
    color: white;
}

.activity-row-verses {
    font-size: 14px;
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
}

.activity-row-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ai-icon-inline {
    width: 16px;
    height: 16px;
    opacity: 0.7;
    filter: brightness(0) saturate(100%) invert(17%) sepia(16%) saturate(1007%) hue-rotate(182deg) brightness(92%) contrast(90%);
    margin-right: var(--spacing-xs);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .dashboard-header h1 {
        font-size: 32px; /* Slightly smaller on mobile */
    }
    
    .dashboard-header p {
        font-size: 18px; /* Adjust for mobile */
        padding: 0 var(--spacing-md);
    }
    
    .action-buttons {
        flex-direction: column; /* Stack buttons vertically on mobile */
        align-items: center;
        gap: calc(var(--spacing-lg) + 15px); /* Add 15px more space between buttons */
    }
    
    .activity-row {
        grid-template-columns: 30px 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 
            "star mobile-first"
            "star title";
        gap: var(--spacing-md);
        padding: var(--spacing-lg) var(--spacing-md);
        align-items: start;
    }
    
    /* Hide desktop elements on mobile */
    .activity-row-date,
    .activity-row-category,
    .activity-row-verses {
        display: none;
    }
    
    .activity-row-favorite {
        grid-area: star;
        align-self: flex-start;
        justify-self: flex-start;
        margin-top: 2px; /* Align with first line text baseline */
    }
    
    /* Mobile-specific first row with inline elements */
    .activity-row-mobile-first {
        grid-area: mobile-first;
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        flex-wrap: nowrap;
        color: var(--text-color);
    }
    
    .mobile-date {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-color);
    }
    
    .mobile-verses {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-color);
    }
    
    /* Mobile category pills */
    .activity-row-mobile-first .category-pill {
        padding: 3px 8px;
        font-size: 11px;
        border-radius: 12px;
    }
    
    .activity-row-title {
        grid-area: title;
        font-size: 16px;
        font-weight: 600;
        margin-top: var(--spacing-xs);
        color: var(--text-color);
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }
    
    .ai-icon-inline {
        width: 16px;
        height: 16px;
        filter: brightness(0) saturate(100%) invert(17%) sepia(16%) saturate(1007%) hue-rotate(182deg) brightness(92%) contrast(90%);
        flex-shrink: 0;
    }
}

/* Desktop: hide mobile-specific elements */
@media (min-width: 769px) {
    .activity-row-mobile-first {
        display: none;
    }
}

/* Recent Favorites Row Layout */
.favorite-row {
    display: flex;
    align-items: flex-start; /* Changed from center to flex-start for better wrapping */
    gap: var(--spacing-md); /* Reduced gap for more space efficiency */
    padding: calc(var(--spacing-md) + 5px) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
    /* Removed white-space: nowrap and overflow: hidden to allow wrapping */
}

.favorite-row:hover {
    background-color: #f8f9fa;
}

.favorite-row:last-child {
    border-bottom: none;
}

.favorite-time {
    font-size: 14px;
    color: var(--text-color);
    font-weight: 500;
    width: 70px; /* Changed from min-width to width for better responsiveness */
    flex-shrink: 0;
}

.favorite-reference {
    font-size: 14px;
    color: var(--text-color);
    font-weight: 600;
    width: 140px; /* Slightly larger and changed from min-width to width */
    flex-shrink: 0;
}

.favorite-text {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 400;
    flex: 1;
    line-height: 1.4; /* Better line height for multi-line text */
    /* Removed overflow/text-overflow/white-space restrictions to allow full text display */
    word-wrap: break-word; /* Allow long words to break if needed */
}

/* Tablet/Small Desktop responsive adjustments */
@media (max-width: 1024px) {
    .favorite-time {
        width: 60px; /* Slightly smaller on tablets */
    }
    
    .favorite-reference {
        width: 120px; /* More compact reference column */
    }
}

/* Mobile responsive for favorites */
@media (max-width: 768px) {
    .favorite-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
        white-space: normal;
    }
    
    .favorite-time,
    .favorite-reference,
    .favorite-text {
        min-width: unset;
        white-space: normal;
    }
    
    .favorite-text {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }
}

/* Insights History Table Styles */
.insights-history-content.full-width {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 0 var(--spacing-lg);
    box-sizing: border-box;
}

.insights-table-header {
    display: grid;
    grid-template-columns: 40px 120px 1fr 60px 90px 80px; /* Heart, Date, Title, Notes, Scriptures, Type */
    gap: var(--spacing-xl); /* Maximum spacing between columns */
    padding: var(--spacing-md) var(--spacing-xl);
    background-color: var(--table-header-bg, #f8f9fa);
    border-bottom: 1px solid var(--border-color);
    font-weight: bold;
    font-size: 14px;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.header-col {
    display: flex;
    align-items: center;
}

.insight-row {
    display: grid;
    grid-template-columns: 40px 120px 1fr 60px 90px 80px; /* Heart, Date, Title, Notes, Scriptures, Type */
    gap: var(--spacing-xl); /* Match header spacing */
    padding: calc(var(--spacing-md) + 5px) var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
    align-items: flex-start;
    transition: background-color 0.2s ease;
}

.insight-row:hover {
    background-color: #f8f9fa;
}

.insight-row:last-child {
    border-bottom: none;
}

.insight-heart,
.insight-date,
.insight-notes-count,
.insight-scriptures-count,
.insight-title,
.insight-type {
    font-size: 14px;
    color: #222;
    font-weight: normal;
}

.insight-type {
    text-align: left;
}

.insight-title {
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.insight-heart {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 2px;
}

.insight-date {
    text-align: left;
    color: #222 !important;
}

.insight-notes-count,
.insight-scriptures-count {
    text-align: left;
}

/* Insight detail modal styles */
.insight-detail-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    font-size: 14px;
    color: #222;
}

.insight-detail-stats-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.copy-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.copy-icon,
.checkmark-icon {
    transition: all 0.3s ease;
}

.insight-detail-analysis {
    font-size: 16px;
    line-height: 1.6;
    color: #222;
    padding: var(--spacing-md) 0;
}

.insight-detail-analysis h1 {
    font-size: 20px;
    margin: var(--spacing-md) 0 var(--spacing-sm) 0;
    color: #333;
}

.insight-detail-analysis h2 {
    font-size: 18px;
    margin: var(--spacing-md) 0 var(--spacing-sm) 0;
    color: #333;
}

.insight-detail-analysis h3 {
    font-size: 16px;
    margin: var(--spacing-sm) 0 var(--spacing-xs) 0;
    color: #333;
}

.insight-detail-analysis ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
}

.insight-detail-analysis li {
    margin: var(--spacing-xs) 0;
}

.insight-detail-analysis code {
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
}

.scripture-link {
    background-color: #222;
    color: white;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    border: none;
    display: inline-block;
    margin: 2px 4px;
}

.scripture-link:hover {
    background-color: #444;
    color: white;
    text-decoration: none;
}

.scripture-link:active {
    background-color: #111;
    color: white;
}

/* Period text for insights */
.period-text {
    font-size: 14px;
    color: #222;
    font-weight: normal;
    text-transform: capitalize;
}

/* Apply same formatting as chapter summary modal to insight detail modal */
/* Section header styling with #222 border */
.insight-detail-analysis h2 {
    margin-bottom: 12px !important;
    color: var(--text-color) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid #222;
    text-align: left !important;
    display: block !important;
    justify-content: flex-start !important;
}

.insight-detail-analysis h3 {
    margin-bottom: 12px !important;
    color: var(--text-color) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid #222;
    text-align: left !important;
    display: block !important;
    justify-content: flex-start !important;
}

/* Remove extra spacing from br tags that follow headings and lists */
.insight-detail-analysis h2 + br,
.insight-detail-analysis h3 + br,
.insight-detail-analysis ul + br,
.insights-analysis h2 + br,
.insights-analysis h3 + br,
.insights-analysis ul + br {
    display: none;
}

/* PEOPLE section spacing for insight detail modal */
/* This targets strong elements that appear after the PEOPLE heading but before the next section */
.insight-detail-analysis #section-2 ~ strong:not(#section-3 ~ strong):not(#section-4 ~ strong) {
    display: inline-block;
    margin-top: 1.5em;
}

/* But not for the first strong element right after the PEOPLE heading */
.insight-detail-analysis #section-2 + br + strong,
.insight-detail-analysis #section-2 + br + br + strong {
    margin-top: 0 !important;
}

/* APPLY IDENTICAL FORMATTING TO NEW REPORT MODAL (.insights-analysis) */
/* Section header styling with #222 border */
.insights-analysis h2 {
    margin-bottom: 12px !important;
    color: var(--text-color) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid #222;
    text-align: left !important;
    display: block !important;
    justify-content: flex-start !important;
}

.insights-analysis h3 {
    margin-bottom: 12px !important;
    color: var(--text-color) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid #222;
    text-align: left !important;
    display: block !important;
    justify-content: flex-start !important;
}

/* PEOPLE section spacing for new report modal */
.insights-analysis #section-2 ~ strong:not(#section-3 ~ strong):not(#section-4 ~ strong) {
    display: inline-block;
    margin-top: 1.5em;
}

.insights-analysis #section-2 + br + strong,
.insights-analysis #section-2 + br + br + strong {
    margin-top: 0 !important;
}

/* Fix paragraph spacing in new report modal */
.insights-analysis br + br {
    display: block;
    margin-bottom: 12px;
    line-height: 2;
}

.insights-analysis p {
    margin-bottom: var(--spacing-md);
}

.insights-analysis strong {
    display: inline-block;
    margin-bottom: 6px;
    margin-top: 8px;
}

/* Remove extra spacing after unordered lists in new report modal */
.insights-analysis ul {
    margin-bottom: 0;
}

/* Fix paragraph spacing in insight detail modal */
/* Target double br tags to create proper paragraph spacing */
.insight-detail-analysis br {
    line-height: 1.5;
}

.insight-detail-analysis br + br {
    display: block;
    margin-bottom: 12px;
    line-height: 2;
}

/* Ensure proper spacing between paragraphs */
.insight-detail-analysis p {
    margin-bottom: var(--spacing-md);
}

/* Add spacing around bold headings within paragraphs */
.insight-detail-analysis strong {
    display: inline-block;
    margin-bottom: 6px;
    margin-top: 8px;
}

/* Remove extra spacing after unordered lists */
.insight-detail-analysis ul {
    margin-bottom: 0;
}

/* Tablet responsive adjustments for insights table */
@media (max-width: 1024px) {
    .insights-history-content.full-width {
        padding: 0 var(--spacing-md);
    }
    
    .insights-table-header,
    .insight-row {
        grid-template-columns: 40px 90px 1fr 50px 60px 70px; /* Heart, Date, Title, Notes, Scriptures, Type */
        gap: var(--spacing-md);
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .insight-date {
        font-size: 12px;
    }
    
    .insight-notes-count,
    .insight-scriptures-count {
        font-size: 13px;
    }
    
}

/* Hide mobile layout on desktop */
@media (min-width: 769px) {
    .mobile-insight-first {
        display: none;
    }
}

/* Mobile responsive for insights table */
@media (max-width: 768px) {
    .insights-history-content.full-width {
        width: 100%;
        margin-left: 0;
        padding: 0 var(--spacing-sm);
    }
    
    .insights-table-header {
        display: none; /* Hide header on mobile */
    }
    
    .insight-row {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        padding: var(--spacing-md);
        align-items: flex-start;
        grid-template-columns: none; /* Override grid layout */
    }
    
    /* Hide desktop elements on mobile */
    .insight-row > .insight-date,
    .insight-row > .insight-notes-count,
    .insight-row > .insight-scriptures-count,
    .insight-row > .insight-title,
    .insight-row > .insight-type {
        display: none;
    }
    
    /* Show mobile layout */
    .mobile-insight-first {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        width: 100%;
        order: -1; /* Show first */
    }
    
    .mobile-insight-first .insight-date {
        font-size: 13px;
        color: #222;
    }
    
    .mobile-stats {
        display: flex;
        gap: var(--spacing-sm);
        margin-left: auto;
        font-size: 12px;
        color: var(--text-muted);
    }
    
    .insight-period {
        font-size: 14px;
        font-weight: 600;
        width: 100%;
        order: 0; /* Show second */
    }
    
    .period-text {
        font-size: 13px;
    }
    
    .mobile-insight-title {
        font-size: 14px;
        color: #222;
        line-height: 1.4;
        margin-top: var(--spacing-xs);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
}

/* Stat Cards Grid */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: all 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-card-icon {
    font-size: 32px;
    margin-bottom: var(--spacing-sm);
}

.stat-card-label {
    color: var(--text-light-color);
    font-size: 14px;
    margin-bottom: var(--spacing-xs);
}

.stat-card-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-color);
}

/* Enhanced Dashboard Styles */
.resume-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
    padding: var(--spacing-md) var(--spacing-lg);
}

/* First-time user library button with #222 background */
.first-time-library-btn {
    background: #222 !important;
    color: white !important;
    border: none !important;
    transition: all 0.2s ease !important;
    transform: scale(1) !important;
}

.first-time-library-btn:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}

.first-time-library-btn .button-icon {
    filter: brightness(0) invert(1) !important;
    transition: all 0.2s ease !important;
}

/* Overview video wrapper with close functionality */
.overview-video-wrapper {
    margin-top: var(--spacing-lg);
    margin-bottom: calc(var(--spacing-lg) + 10px);
    position: relative;
    max-width: 600px;
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    background: white;
    margin-left: auto;
    margin-right: auto;
}

.video-close-btn {
    position: absolute;
    top: -12px;
    right: -12px;
    background: white;
    color: #222;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    z-index: 10;
    transition: all 0.2s ease;
}

.video-close-btn:hover {
    background: #f5f5f5;
    transform: scale(1.1);
}

/* Overview video container */
.overview-video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.overview-video-container iframe {
    max-width: 100%;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-main-text {
    font-size: 16px;
    font-weight: 600;
}

.btn-sub-text {
    font-size: 14px;
    opacity: 0.8;
    font-weight: 400;
}

.library-icon {
    width: 20px;
    height: 20px;
    margin-right: var(--spacing-sm);
}

/* Override for toolbar context */
.toolbar-icon .library-icon {
    margin-right: 0 !important;
}

.stat-card-subtext {
    font-size: 12px;
    color: var(--text-light-color);
    margin-top: var(--spacing-xs);
}

.community-stat-card {
    cursor: default;
}

.dashboard-sections {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.community-section {
    width: 100%;
}

.section-header {
    display: flex;
    justify-content: center; /* Center the header text */
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.section-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

/* Questions Feed */
.questions-feed {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.question-item {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all 0.2s;
}

.question-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.question-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.user-avatar {
    width: 32px;
    height: 32px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.user-name {
    font-size: 14px;
    font-weight: 500;
}

.question-time {
    font-size: 12px;
    color: var(--text-light-color);
}

.question-content h4 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.question-reference {
    font-size: 14px;
    color: #DD4111;
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
}

.question-stats {
    display: flex;
    gap: var(--spacing-md);
    font-size: 14px;
    color: var(--text-light-color);
}

.upvotes, .answers {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* User Activity */
.user-activity {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

.activity-icon {
    font-size: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--hover-bg-color);
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
}

.activity-content p {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 14px;
    line-height: 1.4;
}

.activity-title {
    font-size: 14px;
    color: var(--text-light-color);
    margin-bottom: var(--spacing-xs);
}

.activity-time {
    font-size: 12px;
    color: var(--text-light-color);
}

/* Empty and Error States */
.empty-state, .error-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-light-color);
}

.empty-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-subtext {
    font-size: 14px;
    margin-top: var(--spacing-xs);
    opacity: 0.7;
}

.loading-spinner {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-light-color);
    font-style: italic;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.feed-section {
    margin-top: 0;
}

/* Community Tabs */
.community-section {
    flex: 1;
}

.tabs-container {
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

.tabs {
    display: flex;
    background: var(--hover-bg-color);
    border-bottom: 1px solid var(--border-color);
}

.tab {
    flex: 1;
    padding: var(--spacing-md);
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
    color: var(--text-light-color);
}

.tab.active {
    background: var(--card-bg-color);
    color: var(--text-color);
    border-bottom: 2px solid var(--primary-color);
}

.tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.5);
}

.tab-content {
    padding: var(--spacing-lg);
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.tab-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--spacing-md);
}

/* Community Table */
.table-container {
    overflow-x: auto;
}

.community-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.community-data-table.full-width {
    width: 100%;
    table-layout: fixed;
}

.community-data-table.full-width td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-name.clickable,
.activity-text.clickable {
    color: var(--primary-color);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
}

.question-text.clickable,
.note-text.clickable,
.activity-text.clickable {
    color: var(--primary-color);
    cursor: pointer;
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.2s;
}

.user-name.clickable:hover,
.question-text.clickable:hover,
.note-text.clickable:hover,
.activity-text.clickable:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Tutorial Modal */
.tutorial-modal .modal-content {
    max-width: 600px;
    margin: 2rem auto;
}

.tutorial-content .modal-body {
    padding: var(--spacing-xl);
}

.tutorial-video-placeholder {
    margin-bottom: var(--spacing-xl);
}

.video-placeholder {
    background: var(--hover-bg-color);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius);
    padding: var(--spacing-xl);
    text-align: center;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.video-placeholder h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: 24px;
}

.video-placeholder ul {
    text-align: left;
    max-width: 400px;
    margin: var(--spacing-lg) auto 0;
}

.tutorial-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-top: var(--spacing-lg);
}

.tutorial-actions .btn {
    min-width: 140px;
}

/* Site Footer */
.site-footer {
    background-color: #222;
    color: white;
    text-align: center;
    padding: var(--spacing-md) 0;
    margin-top: auto;
    border-top: 1px solid #222;
    width: 100%;
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.footer-content p {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
}

.footer-heart-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px;
    filter: brightness(0) invert(1);
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.1);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(1);
    }
}

/* Activity Cards Styling */
.activity-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.activity-card {
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    height: 260px;
    display: flex;
    flex-direction: column;
}

.activity-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.activity-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

.heart-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
    opacity: 0.3;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: var(--spacing-sm);
}

.heart-icon:hover {
    opacity: 0.6;
    transform: scale(1.1);
}

.heart-icon.favorited {
    opacity: 1;
}

.heart-icon:not(.favorited) {
    filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(95%);
}

/* Specific styling for verse favorite hearts */
.heart-icon.verse-favorite.favorited {
    opacity: 1;
}

.heart-icon.verse-favorite:not(.favorited) {
    filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(95%) !important;
}

.activity-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: 4px;
    flex-shrink: 0;
    min-width: 0;
    flex: 1;
}

.ai-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--text-color);
    color: white;
    padding: 3px 4px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-right: var(--spacing-xs);
}

.ai-tag-icon {
    width: 10px;
    height: 10px;
    filter: brightness(0) invert(1);
}

.title-text {
    font-weight: 600;
    font-size: 18px;
    color: var(--text-color);
    line-height: 1.3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}

.activity-category {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    font-size: 11px;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 12px;
    margin-bottom: var(--spacing-md);
    font-weight: 500;
    width: fit-content;
}

.activity-category.thought {
    background: #10b981; /* Green for thoughts */
}

.activity-category.question {
    background: #f59e0b; /* Orange for questions */
}

.activity-category.inspiration {
    background: #8b5cf6; /* Purple for inspiration */
}


.activity-content {
    color: var(--text-color);
    font-size: 15px;
    line-height: 1.4;
    flex: 1;
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.activity-meta-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    flex-shrink: 0;
}

.activity-verse {
    color: #DD4111;
    font-size: 13px;
    font-weight: 600;
}

.activity-date {
    color: var(--text-light-color);
    font-size: 12px;
    font-weight: 500;
}

.activity-date {
    color: var(--text-light-color);
    font-size: 12px;
    font-weight: 500;
    text-align: right;
}

@media (max-width: 768px) {
    #main-content {
        padding: var(--spacing-md);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .activity-cards-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .activity-card {
        height: auto;
        min-height: 180px;
        width: 100%;
        max-width: calc(100vw - 32px);
        box-sizing: border-box;
        margin: 0;
        padding: var(--spacing-md);
        overflow: hidden;
    }
    
    .title-text {
        font-size: 16px;
    }
    
    .activity-content {
        -webkit-line-clamp: 2;
    }
}

.heart {
    color: #ff4757;
    font-size: 16px;
    display: inline-block;
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.1);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(1);
    }
}

.community-data-table th {
    background: #222;
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-weight: 600;
    color: white;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.community-data-table td {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.table-row.clickable {
    cursor: pointer;
    transition: background-color 0.2s;
}

.table-row.clickable:hover {
    background-color: var(--hover-bg-color);
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.user-avatar {
    width: 24px;
    height: 24px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.user-name {
    font-weight: 500;
    white-space: nowrap;
}

.community-data-table .date-cell {
    color: var(--text-light-color);
    font-size: 12px;
    white-space: nowrap;
    width: 80px !important;
    max-width: 80px !important;
}

.community-data-table .user-cell {
    width: 180px !important;
    max-width: 180px !important;
    white-space: nowrap;
}

.community-data-table .verse-cell {
    color: var(--primary-color);
    font-weight: 500;
    white-space: nowrap;
    width: 150px !important;
    max-width: 150px !important;
}

.community-data-table .content-cell {
    max-width: none !important;
    width: auto !important;
    min-width: 50% !important;
}

.question-text, .note-text {
    line-height: 1.4;
    word-wrap: break-word;
}

.answers-cell, .likes-cell {
    text-align: center;
    font-weight: 600;
    color: var(--text-light-color);
}

.like-count {
    color: var(--primary-color);
}

/* Desktop: Hide cards, show table */
.community-cards {
    display: none;
}

.feed-section h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
}

.question-item {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    cursor: pointer;
    transition: background-color 0.2s;
}

.question-item:hover {
    background-color: var(--hover-bg-color);
}

.question-text {
    font-size: 16px;
    margin-bottom: var(--spacing-xs);
}

.scripture-ref {
    color: #DD4111;
    font-size: 14px;
    font-weight: 500;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Scripture Reader Styles */
/* Chapter Navigation in Navbar */
.nav-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

.chapter-nav-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-light-color);
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.chapter-nav-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
    transform: scale(1.1);
}

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

.chapter-title-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    min-width: 150px;
    text-align: center;
}

/* Chapter Transition Animation */
.verses-transition-container {
    position: relative;
    overflow: visible; /* Allow anchor icons to extend beyond container */
    min-height: 400px;
}

.verses-content {
    width: 100%;
    opacity: 1;
    transform: translateX(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible; /* Allow anchor icons to extend beyond container */
}

.verses-content.slide-out-left {
    opacity: 0;
    transform: translateX(-50px);
}

.verses-content.slide-out-right {
    opacity: 0;
    transform: translateX(50px);
}

.verses-content.slide-in-left {
    animation: slideInLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.verses-content.slide-in-right {
    animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.scripture-reader {
    display: flex;
    position: relative;
    overflow: visible; /* Allow anchor icons to extend beyond container */
}

.scripture-column {
    padding: 0;
    overflow: visible; /* Allow anchor icons to extend beyond container */
}

.column {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.questions-column,
.answers-column {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    overflow-y: auto;
    height: 80vh;
    position: fixed;
    top: 80px;
    z-index: 1000;
}

/* Single Column Layout (Default) */
.scripture-reader.single-column .scripture-column {
    width: 100%;
}

.scripture-reader.single-column .questions-column,
.scripture-reader.single-column .answers-column {
    width: 400px;
    opacity: 0;
    transform: translateX(100%);
    pointer-events: none;
    right: -420px;
}

/* Two Column Layout (Scripture + Questions) */
.scripture-reader.two-column .questions-column {
    width: 400px;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    right: 20px;
}

.scripture-reader.two-column .answers-column {
    width: 400px;
    opacity: 0;
    transform: translateX(100%);
    pointer-events: none;
    right: -420px;
}

/* Two Column Layout (Scripture + Answers) */
.scripture-reader.two-column-answers .questions-column {
    width: 400px;
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
    right: 440px;
}

.scripture-reader.two-column-answers .answers-column {
    width: 400px;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    right: 20px;
}

/* Three Column Layout */
.scripture-reader.three-column .questions-column {
    width: 350px;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    right: 370px;
}

.scripture-reader.three-column .answers-column {
    width: 350px;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    right: 20px;
}

/* Verse Styles */
.verse-wrapper {
    position: relative;
    margin-bottom: var(--spacing-lg);
    overflow: visible; /* Ensure anchor icon can extend beyond wrapper */
}

.verse-container {
    position: relative; /* Enable absolute positioning for anchor icon */
    background-color: white;
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    border: 3px solid #D5D5D5; /* Gray matching striped background */
    transition: border-color 0.3s ease;
    overflow: visible; /* Allow anchor icon to extend outside */
}

.verse-container.selected {
    border-color: #B9375D;
    border-width: 3px;
}

.verse-container.ai-active {
    border-color: #AF269D;
    border-width: 3px;
}


/* Selected state always takes priority over AI active and user notes */
.verse-container.selected.ai-active {
    border-color: #B9375D;
}

/* Force override any orange borders - new UI design doesn't use them */
.verse-container.has-user-note,
.verse-container.selected.has-user-note {
    border-color: #E0E0E0 !important;
    border-width: 3px !important;
}


.verse-container.selected.anchor {
    border-width: 3px;
}

/* Anchor icon styling */
.anchor-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    background-color: #B9375D; /* Same color as selection border */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Very high z-index to ensure it's on top */
    box-shadow: none;
    pointer-events: none; /* Don't interfere with clicks */
    transform: translate(50%, -50%); /* Move it outside the corner */
}

.anchor-icon img {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1); /* Makes the anchor icon white */
}

.verse-box {
    background-color: white;
    padding-top: var(--spacing-lg); /* Same spacing as container padding for consistency */
    font-family: var(--font-scripture);
    font-size: 16px;
    line-height: 1.7;
}


.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.verse-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #B9375D; /* Use pink color for checked state */
    position: absolute;
    top: 24px;
    right: 25px;
    z-index: 10;
}

/* Checkbox selection mode - gray out all other interactive elements */
.checkbox-mode-active .ask-btn,
.checkbox-mode-active .simplify-btn,
.checkbox-mode-active .verse-favorite,
.checkbox-mode-active .notes-btn,
.checkbox-mode-active .profile-btn,
.checkbox-mode-active .personal-notes-btn,
.checkbox-mode-active .notes-count {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
}

/* Keep checkboxes fully interactive in checkbox mode */
.checkbox-mode-active .verse-checkbox {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

.people-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.7; /* Make it less dark */
    transform: translateY(-2px); /* Move up 2px for better alignment */
}

.community-notes-display {
    display: none;
    margin-left: 8px;
    font-size: 13px;
    color: var(--text-light-color);
    font-weight: 500;
    vertical-align: middle;
}

.community-notes-display .people-icon {
    margin-left: 0;
    margin-right: 4px;
}

.select-verses-text {
    color: #B9375D;
    font-weight: normal;
    font-size: 12px;
    margin-left: var(--spacing-sm);
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.select-verses-text.show {
    opacity: 1;
    transform: translateX(0);
}

/* Hide select verses text on mobile to save space */
@media (max-width: 768px) {
    .select-verses-text {
        display: none !important;
    }
}

/* Create Note Button */
.create-note-button {
    position: fixed;
    bottom: 92px; /* Above the 72px toolbar with optimal spacing */
    left: 50%;
    transform: translateX(-50%) translateY(100px); /* Start below visible area */
    z-index: 999; /* Below anchor icons but above toolbar */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.create-note-button.show {
    transform: translateX(-50%) translateY(0); /* Slide up to visible position */
}

/* White gradient backdrop for create note button */
.create-note-backdrop {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 197px; /* Extends from toolbar (72px) to above button (~197px total) - 30px higher */
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0.3) 80%, transparent 100%);
    z-index: 998; /* Behind create note button but above content */
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none; /* Don't interfere with clicks */
}

.create-note-backdrop.show {
    opacity: 1;
}

.btn-create-note {
    background: #B9375D;
    color: white;
    border: 1px solid white; /* 1px white border */
    padding: 12px 24px;
    border-radius: 6px; /* Half of var(--radius) which is 12px */
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    animation: subtleBounceReminder 4s ease-in-out infinite;
}

.btn-create-note:hover {
    background: #9F2E4F;
    transform: translateY(-2px);
}

.verse-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.verse-actions.hidden {
    display: none;
}

.church-icon-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    color: var(--text-light-color);
    transition: color 0.2s;
}

.church-icon-btn:hover {
    color: var(--primary-color);
}

.button-separator {
    width: 1px;
    height: 20px;
    background-color: var(--border-color);
    margin: 0 4px;
}

.right-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

/* Button Color Palette - Subtle 25% opacity */
/* AI button (purple) */
.btn.btn-secondary.simplify-btn,
.btn.btn-secondary.simplify-btn.active {
    background: #AF269D !important;
    color: white !important;
    width: auto !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    gap: 4px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
}

/* ASK button (#222) - only apply to verse action buttons */
.verse-actions .btn.btn-primary {
    background: #222 !important;
    color: white !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
}

.verse-actions .btn.btn-primary:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}

/* ASK button on anchor verse - keep #222 styling */
.verse-container.anchor .verse-actions .btn.btn-primary {
    background: #222 !important;
    color: white !important;
    border: 1px solid transparent !important;
}

.verse-container.anchor .verse-actions .btn.btn-primary:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}

/* QUESTIONS button (#222) - exclude notes button and dashboard buttons */
.btn.btn-secondary:not(.simplify-btn):not(.notes-btn):not(.action-buttons *) {
    background-color: #222 !important;
    color: white !important;
}

.btn.btn-secondary:not(.simplify-btn):not(.notes-btn):not(.action-buttons *):hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Dashboard action buttons should use solid background */
.action-buttons .btn.btn-secondary {
    background-color: #222 !important;
    color: white !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; /* Subtle dark drop shadow */
}
.action-buttons .btn.btn-secondary:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Primary button in dashboard action buttons also gets drop shadow */
.action-buttons .btn.btn-primary,
.dashboard-header .btn.btn-primary,
.insights-history .btn.btn-primary {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; /* Subtle dark drop shadow */
}

/* Make insights history button match dashboard gray styling */
.insights-history .btn.btn-primary {
    background-color: #222 !important;
    color: white !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.insights-history .btn.btn-primary:hover {
    background-color: #333 !important;
    transform: scale(1.02) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Make button icons white in dashboard action buttons */
.action-buttons .btn.btn-secondary .button-icon {
    filter: brightness(0) invert(1) !important; /* Makes icon white */
    opacity: 1 !important;
}

/* Make button icons white in verse action buttons */
.verse-actions .btn .button-icon,
.simplify-btn .button-icon,
.notes-btn .button-icon,
.btn.btn-secondary:not(.action-buttons *) .button-icon {
    filter: brightness(0) invert(1) !important; /* Makes icon white */
    opacity: 1 !important;
}

.simplify-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Button state styles for new verse selection behavior */
.btn.grayed-out,
.btn.btn-primary.grayed-out,
.btn.btn-secondary.grayed-out,
.btn.btn-secondary.simplify-btn.grayed-out,
.btn.btn-secondary:not(.simplify-btn).grayed-out {
    background-color: #e2e8f0 !important;
    color: #718096 !important;
    border-color: #e2e8f0 !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.btn.faded {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* New content indicator - darker border that disappears on click */
.btn.new-content {
    position: relative;
    border: 2px solid !important;
}

/* Questions button with new content - darker orange border - exclude notes button */
.btn.btn-secondary:not(.simplify-btn):not(.notes-btn).new-content {
    border-color: rgba(200, 120, 0, 0.8) !important;
}

/* Notes button (#222) */
.notes-btn {
    background-color: #222 !important;
    color: white !important;
    border-color: #e2e8f0 !important;
}

.notes-btn:hover {
    background-color: #333 !important;
}

/* Notes button with new content - darker green border */
.notes-btn.new-content {
    border-color: rgba(0, 100, 0, 0.8) !important;
}

/* AI button shouldn't have new content border */
.simplify-btn.new-content {
    border: 1px solid transparent !important;
}

/* Ensure strong tags in buttons display correctly */
.btn strong {
    font-weight: 700;
}

/* Light gray buttons for Ask Question and Add Note */
.btn-light {
    background-color: #f5f5f5 !important;
    color: #222 !important;
    border: 1px solid #ddd !important;
}

.btn-light:hover {
    background-color: #e9e9e9 !important;
}

/* Dark button for save actions */
.btn-dark {
    background-color: #222 !important;
    color: white !important;
    border: 1px solid #222 !important;
}

.btn-dark:hover {
    background-color: #222 !important;
    border-color: #222 !important;
}

.btn-light.selected {
    background-color: #007bff !important;
    color: white !important;
    border-color: #007bff !important;
}

.btn-light.disabled {
    background-color: #f5f5f5 !important;
    color: #999 !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* SELECT ONE text styling */
.select-one-text {
    font-size: 11px;
    color: #666;
    margin: 0 8px;
    font-weight: 500;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.select-one-text.show {
    opacity: 1;
    transform: translateY(0);
}

.ai-icon {
    width: 14px;
    height: 14px;
    margin-right: 0;
    margin-left: -1px;
    vertical-align: middle;
    display: inline-block;
    filter: brightness(0) invert(1); /* Make AI icon white */
}

.ai-icon-small {
    width: 9px;
    height: 9px;
    margin-right: 4px;
    margin-left: 0;
    vertical-align: middle;
    display: inline-block;
    filter: brightness(0) invert(1); /* Make icon white */
}

.ai-icon-label {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
    display: inline-block;
}

.verse-number {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1.1em;
    color: #1a202c;
    margin-right: var(--spacing-sm);
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 20px;
}

.modal.show {
    opacity: 1;
    visibility: visible;
}

/* Native app-like slide up animation for creation modal */
#content-creation-modal {
    align-items: flex-end;
    justify-content: center;
}

#content-creation-modal .modal-content {
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    margin: 0;
    border-radius: 20px;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#content-creation-modal.show .modal-content {
    transform: translateY(0);
}

/* Desktop version - centered modal */
@media (min-width: 768px) {
    #content-creation-modal {
        align-items: center;
        justify-content: center;
    }
    
    #content-creation-modal .modal-content {
        border-radius: 16px;
        transform: scale(0.9) translateY(20px);
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    #content-creation-modal.show .modal-content {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    
    /* Desktop: Always hide short text, even when AI is expanded */
    .btn-text-short {
        display: none !important;
    }
    
    .verse-actions.ai-expanded .questions-btn .btn-text,
    .verse-actions.ai-expanded .notes-btn .btn-text {
        display: inline !important;
    }
}

.modal-content {
    background-color: var(--card-bg-color);
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Custom Scrollbar for Modal Body */
.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

.modal-body:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    border-radius: 16px 16px 0 0;
    background-color: var(--card-bg-color);
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #222;
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.chapter-summary-modal .modal-body {
    padding: var(--spacing-lg);
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.modal-body {
    padding: var(--spacing-lg);
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: 20px; /* This creates the space you want at the bottom */
    box-sizing: border-box; /* This ensures the modal's overall size doesn't change */
    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.modal-body:hover {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}


.setting-group {
    margin-bottom: var(--spacing-lg);
}

.setting-group label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    color: var(--text-color);
}

/* Field error messages - subtle text-only styling */
.field-error {
    display: none;
    color: #e53e3e;
    font-size: 14px;
    margin-top: 6px;
    margin-bottom: 0;
    padding: 0;
    border: none;
    background: none;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.slider-container input[type="range"] {
    flex: 1;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

.slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
}

.slider-container input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

#font-size-value {
    min-width: 40px;
    font-weight: 500;
    color: var(--primary-color);
}

#font-family-select, #text-font-family-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    background-color: var(--card-bg-color);
    font-size: 16px;
    color: var(--text-color);
    font-family: var(--font-ui);
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

#font-family-select:hover, #text-font-family-select:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

#font-family-select:focus, #text-font-family-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

#font-family-select option, #text-font-family-select option {
    padding: 8px 12px;
    font-size: 16px;
    color: var(--text-color);
    background-color: var(--card-bg-color);
}

#ai-prompt-textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid #718096;
    border-radius: 3px;
    background-color: var(--card-bg-color);
    font-size: 14px;
    color: var(--text-color);
    font-family: var(--font-ui);
    resize: vertical;
    min-height: 60px;
}

#ai-prompt-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color-light);
}

/* Modal Radio Button and Checkbox Styling */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.radio-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.radio-option input[type="radio"] {
    accent-color: #222; /* Gray color matching btn-dark */
    width: 18px;
    height: 18px;
    margin: 0;
}

.radio-option label {
    font-size: 14px;
    color: var(--text-color);
    cursor: pointer;
    margin: 0;
}

/* Modal checkbox styling */
.modal input[type="checkbox"] {
    accent-color: #222; /* Gray color matching btn-dark */
    width: 18px;
    height: 18px;
    margin: 0;
}

.toggle-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.toggle-group label {
    font-size: 14px;
    color: var(--text-color);
    cursor: pointer;
    margin: 0;
}

/* Modal textarea styling to match other form elements */
.modal textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #718096; /* Match title input border */
    border-radius: 3px; /* Match title input radius */
    background-color: var(--card-bg-color);
    font-size: 16px;
    color: var(--text-color);
    font-family: var(--font-ui);
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.modal textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

/* Verse reference text styling - same color as modal heading */
.verse-reference-text {
    margin-bottom: var(--spacing-lg);
    font-size: 14px;
    color: #000000 !important; /* Force dark black color like modal heading */
    text-align: left;
    font-weight: 400; /* Normal weight, not bold */
}

/* Category group with extra spacing below label and below radio options */
.category-group .radio-group {
    margin-top: var(--spacing-md); /* More space below "Category" label */
}

.category-group {
    margin-bottom: var(--spacing-xl); /* Extra space between category and share checkbox */
}

/* Inline validation error styling */
.validation-error {
    background-color: #fed7d7;
    color: #c53030;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 6px;
    border: 1px solid #feb2b2;
    margin-bottom: var(--spacing-md);
    font-size: 14px;
    font-weight: 500;
}

.setting-help {
    font-size: 13px;
    color: var(--text-light-color);
    margin-top: var(--spacing-xs);
    line-height: 1.4;
}

/* Content Creation Modal */
.creation-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.verse-reference {
    background: var(--primary-color-light);
    color: var(--primary-color-dark);
    padding: var(--spacing-md);
    border-radius: var(--radius);
    font-weight: 600;
    text-align: center;
    border: 1px solid rgba(49, 130, 206, 0.2);
}

.creation-form input[type="text"],
.creation-form textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: var(--font-ui);
    resize: vertical;
    transition: border-color 0.2s ease;
}

.creation-form input[type="text"]:focus,
.creation-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

/* Verse Reference Text */
.verse-reference-text {
    font-size: 15px;
    color: var(--text-light-color);
    margin-bottom: var(--spacing-md);
    text-align: left;
    padding: 0;
}

/* Public/Private Toggle */
.public-private-toggle {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    cursor: pointer;
    font-weight: 500;
    font-size: 15px;
}

.toggle-label input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 48px;
    height: 24px;
    background: #9ca3af !important;
    border-radius: 12px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.toggle-label input[type="checkbox"]:checked + .toggle-slider {
    background: var(--primary-color) !important;
}

.toggle-label input[type="checkbox"]:checked + .toggle-slider::before {
    transform: translateX(24px);
}

.toggle-text {
    font-size: 16px;
    color: var(--text-color);
}

.toggle-help {
    font-size: 13px;
    color: var(--text-light-color);
    line-height: 1.4;
    margin-left: 0;
    margin-top: var(--spacing-xs);
}

/* Larger text in modal for better readability */
#content-creation-modal input,
#content-creation-modal textarea {
    font-size: 16px;
}

#content-creation-modal input::placeholder,
#content-creation-modal textarea::placeholder {
    font-size: 16px;
}

/* Character Counter */
.input-with-counter {
    position: relative;
}

.char-counter {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 12px;
    color: var(--text-light-color);
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.2s ease;
}

.char-counter.warning {
    color: #f59e0b;
}

.char-counter.danger {
    color: #ef4444;
}

/* Submit Button Loading State */
.btn.loading {
    position: relative;
    color: transparent !important;
    overflow: visible !important;
}

.btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border: 1.5px solid transparent;
    border-top: 1.5px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: spin 1s linear infinite;
    z-index: 1;
    margin-top: -7px;
    margin-left: -7px;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Form Validation States */
.creation-form .error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.error-message {
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.2s ease;
}

.error-message.show {
    opacity: 1;
    transform: translateY(0);
}

.setting-preview {
    background-color: var(--hover-bg-color);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.setting-preview h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: 16px;
    color: var(--text-light-color);
}

.preview-text {
    font-family: var(--font-scripture);
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-color);
}

/* Simplify Animation Styles */
.verse-text {
    transition: opacity 0.3s ease-in-out;
}

.verse-text.fading-out {
    opacity: 0;
}

.verse-text.fading-in {
    opacity: 1;
}

.simplifying-message {
    background: linear-gradient(90deg, #AF269D 25%, #D466CB 50%, #AF269D 75%);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    position: relative;
    top: -1px;
}

.simplifying-message.visible {
    opacity: 1;
    animation: shimmer 2.5s infinite linear, textPulse 2s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes textPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes subtleBounceReminder {
    0%, 85%, 100% {
        transform: translateY(0);
    }
    90% {
        transform: translateY(-6px);
    }
    95% {
        transform: translateY(0);
    }
}

/* Tabs */
.tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.tab {
    padding: var(--spacing-sm) var(--spacing-md);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-light-color);
    position: relative;
    transition: color 0.2s;
}

.tab:hover {
    color: var(--text-color);
}

.tab.active {
    color: var(--primary-color);
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--primary-color);
}

/* Volume List */
.volume-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.volume-item {
    background-color: var(--card-bg-color);
    border: 3px solid #D5D5D5;
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: all 0.2s;
}

.volume-item:hover {
    background-color: #FAFAFA;
    transform: scale(1.02);
}

.volume-name {
    font-size: 18px;
    font-weight: 500;
}

/* Book List */
.book-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.book-item {
    background-color: var(--card-bg-color);
    border: 3px solid #D5D5D5;
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

.book-item:hover {
    background-color: #FAFAFA;
    transform: scale(1.02);
}

.book-name {
    font-size: 18px;
    font-weight: 500;
    flex: 1;
    min-width: 0;
}

.book-chapters {
    font-size: 14px;
    color: var(--text-light-color);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Chapter Grid */
.chapter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.chapter-item {
    background-color: var(--card-bg-color);
    border: 3px solid #D5D5D5;
    border-radius: var(--radius);
    padding: var(--spacing-md);
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chapter-item:hover {
    background-color: #FAFAFA;
    transform: scale(1.05);
}

/* Column Header */
.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #222;
    padding: var(--spacing-xs);
}

.close-btn:hover {
    color: #222;
    transform: scale(1.02);
}

.close-btn-large {
    font-size: 28px !important;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .action-buttons {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .stat-cards {
        grid-template-columns: 1fr;
    }
    
    .dashboard-sections {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        overflow-x: hidden;
    }
    
    .resume-btn, .action-buttons .btn {
        width: 100%;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px 24px !important; /* Even more top/bottom padding on mobile */
    }
    
    /* Mobile video styles */
    .overview-video-wrapper {
        margin-left: var(--spacing-md);
        margin-right: var(--spacing-md);
        padding: 20px;
    }
    
    .overview-video-container {
        padding: 0;
    }
    
    .overview-video-container iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }
    
    .video-close-btn {
        right: -15px;
        top: -15px;
    }
    
    .section-header {
        flex-direction: column;
        align-items: center; /* Center on mobile too */
        gap: var(--spacing-sm);
    }
    
    /* Mobile: Convert table to card layout */
    .table-container {
        overflow: visible;
    }
    
    .community-data-table {
        display: none;
    }
    
    .community-cards {
        display: block;
    }
    
    .community-card {
        background: var(--card-bg-color);
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .community-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-color: var(--primary-color);
    }
    
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--spacing-sm);
    }
    
    .card-user {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }
    
    .card-time {
        font-size: 12px;
        color: var(--text-light-color);
    }
    
    .card-verse {
        color: var(--primary-color);
        font-weight: 500;
        font-size: 14px;
        margin-bottom: var(--spacing-xs);
    }
    
    .card-content {
        margin-bottom: var(--spacing-sm);
        line-height: 1.4;
    }
    
    .card-stats {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: var(--text-light-color);
    }
    
    .tabs {
        flex-direction: column;
    }
    
    .tab {
        border-bottom: 1px solid var(--border-color);
    }
    
    .tab.active {
        border-bottom: 1px solid var(--border-color);
        border-left: 3px solid var(--primary-color);
    }
    
    /* Mobile: Full width scripture reader */
    #main-content.reader-mode {
        max-width: 100%;
        padding: var(--spacing-md);
    }
    
    /* Mobile sliding menu adjustments */
    .hamburger-menu {
        width: 300px;
        padding: var(--spacing-lg) var(--spacing-md);
    }
    
    .user-info {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    
    .profile-picture {
        width: 36px;
        height: 36px;
    }
    
    .profile-initials {
        font-size: 14px;
    }
    
    .user-details strong {
        font-size: 14px;
        color: white;
    }
    
    .user-details span {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
    }
    
    .menu-item {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 14px;
        gap: var(--spacing-sm);
    }
    
    .menu-icon {
        width: 18px;
        height: 18px;
        font-size: 14px;
    }
    
    .questions-column,
    .answers-column {
        width: calc(100vw - 40px) !important;
        left: 20px !important;
        right: auto !important;
        height: 70vh;
    }
    
    .scripture-reader.single-column .questions-column,
    .scripture-reader.single-column .answers-column {
        transform: translateY(100%) !important;
        top: 100vh;
    }
    
    .scripture-reader.two-column .questions-column,
    .scripture-reader.two-column-answers .answers-column,
    .scripture-reader.three-column .questions-column,
    .scripture-reader.three-column .answers-column {
        transform: translateY(0) !important;
        top: 25vh;
    }
    
    /* Improve mobile verse actions spacing */
    .verse-actions {
        gap: var(--spacing-sm);
    }
    
    .btn-sm {
        padding: 5px 10px;
        font-size: 13px;
    }
    
    /* AI button expansion animation on mobile */
    .simplify-btn {
        transition: width 0.3s ease, padding 0.3s ease;
        overflow: hidden;
        white-space: nowrap;
    }
    
    /* Hide short text by default */
    .btn-text-short {
        display: none;
    }
    
    /* When AI button is expanded (showing ORIGINAL), show shortened text in other buttons on mobile only */
    .verse-actions.ai-expanded .questions-btn .btn-text {
        display: none;
    }
    
    .verse-actions.ai-expanded .notes-btn .btn-text {
        display: none;
    }
    
    .verse-actions.ai-expanded .questions-btn .btn-text-short {
        display: inline;
    }
    
    .verse-actions.ai-expanded .notes-btn .btn-text-short {
        display: inline;
    }
    
    /* Make buttons more compact when AI is expanded */
    .verse-actions.ai-expanded .questions-btn,
    .verse-actions.ai-expanded .notes-btn {
        min-width: auto;
        padding: 5px 8px;
    }
    
    .verse-container {
        margin-bottom: var(--spacing-md);
        padding: var(--spacing-md);
    }
    
    .action-bar {
        gap: var(--spacing-xs);
    }
    
    .chapter-title-text {
        min-width: 120px;
        font-size: 16px;
    }
    
    /* Hide church icon and its separator on mobile */
    .church-icon-btn,
    .church-icon-btn + .button-separator {
        display: none !important;
    }
    
    /* Hide individual navbar icons on mobile (they should be in hamburger menu) */
    .nav-right .nav-btn:not(#menu-btn) {
        display: none !important;
    }
}

/* ===== BOTTOM TOOLBAR ===== */
.bottom-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: #222;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-md);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    overflow: visible;
}


.bottom-toolbar.show {
    transform: translateY(0);
}

.toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: var(--spacing-md); /* Reduced gap to fit 5 buttons */
}

.toolbar-btn {
    background: none;
    border: none;
    padding: var(--spacing-sm);
    cursor: pointer;
    border-radius: var(--radius);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    min-width: 60px;
    color: white;
    position: relative;
    height: 100%;
}

.toolbar-btn:hover {
    transform: scale(1.15) !important;
    color: white !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}


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

.toolbar-icon {
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    width: 20px;
    height: 20px;
    margin: 0 auto;
}

.toolbar-icon .ai-icon {
    width: 24px;
    height: 24px;
    margin: 0;
    filter: brightness(0) saturate(100%) invert(28%) sepia(85%) saturate(4743%) hue-rotate(289deg) brightness(93%) contrast(91%);
    padding: 0;
}

.toolbar-icon .library-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1); /* Makes SVG white */
    margin: 0;
    padding: 0;
}

.toolbar-icon .text-size-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1); /* Makes SVG white */
    margin: 0;
    padding: 0;
}

.toolbar-icon .summary-icon {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1); /* Makes SVG white */
    margin: 0;
    padding: 0;
}

.toolbar-label {
    display: none;
}

.toolbar-arrow {
    background: none;
    border: none;
    padding: var(--spacing-sm);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    height: 100%;
}

.toolbar-arrow:hover {
    transform: scale(1.15) !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.toolbar-arrow:active {
    transform: scale(0.95);
}

.toolbar-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.toolbar-arrow:disabled:hover {
    transform: none;
    background: none;
}

.arrow-icon {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1); /* Makes SVG white */
}

/* Prevent horizontal scroll and add bottom spacing for toolbar */


/* Conditional bottom padding - controlled by JavaScript */
#main-content.reader-mode.with-toolbar {
    padding-bottom: 87px; /* Space for toolbar */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .bottom-toolbar {
        padding: var(--spacing-sm);
    }
    
    #main-content.reader-mode.with-toolbar {
        padding-bottom: 77px; /* Smaller space on mobile */
    }
    
    .toolbar-actions {
        gap: var(--spacing-sm); /* Smaller gap on mobile for 5 buttons */
    }
    
    .toolbar-btn {
        min-width: 45px; /* Slightly smaller to fit 5 buttons */
        padding: var(--spacing-xs);
    }
    
    .arrow-icon {
        width: 15px;
        height: 15px;
    }
    
    /* Keep 3 columns on mobile for chapters */
    .chapter-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }
}

/* AI Prompt Modal Presets and Checkbox Options */
.preset-options, .checkbox-options {
    margin-bottom: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.preset-option, .checkbox-option {
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.preset-option input[type="radio"], .checkbox-option input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    accent-color: #222; /* Gray color matching btn-dark */
}

.preset-option label, .checkbox-option label {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    flex: 1;
}

.preset-option label:hover, .checkbox-option label:hover {
    background-color: var(--hover-bg-color);
}

.preset-option input[type="radio"]:checked + label {
    background-color: var(--primary-color-light, #e3f2fd);
}

.checkbox-option input[type="checkbox"]:checked + label {
    background-color: transparent;
}

.preset-option strong, .checkbox-option strong {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 4px;
}

.option-description, .preset-description {
    font-size: 0.9em;
    color: var(--text-secondary, #6b7280);
    margin-top: 2px;
}

.content-type-options, .note-category-options {
    margin-bottom: var(--spacing-xl);
}

.validation-message {
    color: #dc2626;
    font-size: 0.9em;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
}

/* Insights modal create button styling */
.modal-header .btn-dark.btn-sm {
    white-space: nowrap;
    min-width: auto;
    height: 34px; /* Fixed height to prevent vertical growth */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px; /* Standard btn-sm padding */
}

.modal-header .btn-dark.btn-sm .loading-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    padding: 0; /* Override any default padding */
    text-align: center;
    vertical-align: middle;
    align-self: center;
}

.modal-header .btn-dark.btn-sm .loading-spinner::before {
    width: 14px;
    height: 14px;
    border-width: 2px;
    vertical-align: middle;
}

/* Success checkmark styling - not a button */
.insights-success-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: #4CAF50;
    color: white;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: default;
}

.preset-description {
    font-size: 14px;
    color: var(--text-light-color);
    line-height: 1.4;
}

.custom-prompt-section {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.custom-prompt-section textarea {
    width: 100%;
    resize: vertical;
    font-family: inherit;
    padding: 12px;
    font-size: 16px;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-sizing: border-box;
    margin-top: var(--spacing-sm);
}

/* ===== PROFILE PICTURE NOTES BUTTONS ===== */
.notes-buttons-container {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    vertical-align: middle;
}

.personal-notes-btn,
.community-notes-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Closer spacing to match personal notes better */
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
    font-size: 14px;
    height: 32px; /* Same height as AI and plus buttons */
    line-height: 1;
}

.personal-notes-btn:hover,
.community-notes-btn:hover {
    transform: translateY(-1px);
}

.profile-pic {
    border-radius: 50%;
    object-fit: cover;
}

.profile-pic-small {
    width: 28px;
    height: 28px;
}

.profile-pic-tiny {
    width: 20px;
    height: 20px;
}

.profile-pic-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 12px;
}

.notes-count {
    font-weight: 600;
    color: #222;
    font-size: 14px;
}

/* Stacked profile pictures */
.stacked-profiles {
    display: inline-flex;
    position: relative;
    height: 24px; /* 15% smaller than personal profile */
    margin-right: 4px;
}

.stacked-profile {
    position: absolute;
    border: 2px solid white;
    border-radius: 50%;
    overflow: hidden;
    width: 24px; /* 15% smaller than 28px */
    height: 24px;
}

.stacked-profile .profile-pic {
    border: none;
    width: 100%;
    height: 100%;
}

.profile-fade {
    position: absolute;
    left: 48px;
    top: 0;
    width: 24px;
    height: 28px;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, white 100%);
    pointer-events: none;
}

.community-notes-btn .stacked-profiles {
    /* Dynamic width - will be set via JavaScript based on number of profiles */
}

.community-notes-btn .stacked-profiles.count-1 {
    width: 24px;
}

.community-notes-btn .stacked-profiles.count-2 {
    width: 38px; /* 24 + 14 overlap */
}

.community-notes-btn .stacked-profiles.count-3 {
    width: 52px; /* 24 + 14 + 14 overlap */
}

/* Notes divider */
.notes-divider {
    color: #9ca3af; /* Lighter gray for vertical bars */
    font-weight: normal;
    margin: 0 8px;
    font-size: 14px;
}

/* Personal profile picture pulsing animation - triggered by intersection observer */
.personal-notes-btn .profile-pic.pulse {
    animation: personalProfilePulse 0.8s ease-out 1;
}

/* Pulse on hover */
.personal-notes-btn .profile-pic:hover {
    animation: personalProfilePulse 0.8s ease-out 1;
}

@keyframes personalProfilePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(51, 51, 51, 0.15);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(51, 51, 51, 0);
    }
}

/* Notes Modals */
.notes-modal .modal-content {
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

.notes-modal .modal-title {
    font-size: 20px;
    margin-bottom: 20px;
}

.notes-list {
    margin: 20px 0;
    max-height: 400px;
    overflow-y: auto;
}

.note-item {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
}

.note-item h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #222;
}

.note-content {
    margin: 8px 0;
    line-height: 1.6;
    color: #555;
}

.note-meta {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    font-size: 12px;
    color: #777;
}

.note-category {
    background: #e2e8f0;
    padding: 2px 8px;
    border-radius: 4px;
}

.note-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.author-initials {
    width: 32px;
    height: 32px;
    background: #4285F4;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.author-name {
    font-weight: 500;
    color: #222;
}

.no-notes {
    text-align: center;
    color: #777;
    padding: 40px 20px;
    font-style: italic;
}

.add-note-btn {
    margin-top: 20px;
    width: 100%;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .notes-buttons-container {
        gap: 4px;
    }
    
    .personal-notes-btn,
    .community-notes-btn {
        height: 28px;
        font-size: 13px;
        gap: 4px; /* Even closer on mobile to match personal notes */
    }
    
    .profile-pic-small {
        width: 24px;
        height: 24px;
    }
    
    .stacked-profile {
        width: 20px; /* 15% smaller than 24px on mobile */
        height: 20px;
    }
    
    .stacked-profiles {
        height: 20px;
    }
    
    .community-notes-btn .stacked-profiles.count-1 {
        width: 20px;
    }
    
    .community-notes-btn .stacked-profiles.count-2 {
        width: 32px; /* 20 + 12 overlap on mobile */
    }
    
    .community-notes-btn .stacked-profiles.count-3 {
        width: 44px; /* 20 + 12 + 12 overlap on mobile */
    }
    
    .notes-divider {
        color: #9ca3af; /* Lighter gray for vertical bars on mobile */
        margin: 0 4px;
        font-size: 13px;
    }
    
    /* Personal profile picture pulsing on mobile - triggered by intersection observer */
    .personal-notes-btn .profile-pic.pulse {
        animation: personalProfilePulse 0.8s ease-out 1;
    }
}

/* Speed Reading Full-Screen Overlay */
.speed-reading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.speed-reading-overlay.show {
    opacity: 1;
}

.speed-reading-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
}

/* Word Display Area */
.speed-reading-display {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 180px;
    max-height: 250px;
}

.speed-reading-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 3rem;
    font-weight: 400;
    color: #222;
    text-align: center;
    line-height: 1.2;
    transition: opacity 0.1s ease;
    max-width: 90%;
    white-space: nowrap;
    overflow: visible;
}

.speed-reading-countdown {
    font-family: var(--font-ui);
    font-size: 4rem;
    font-weight: bold;
    color: var(--primary-color);
    text-align: center;
    position: absolute;
    animation: countdownPulse 1s ease-in-out;
}

@keyframes countdownPulse {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Progress Bar */
.speed-reading-progress {
    width: 100%;
    max-width: 600px;
    margin: 40px 0;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
    transition: opacity 0.3s ease;
}

.progress-bar.faded {
    opacity: 0.25;
}

.progress-fill {
    height: 100%;
    background-color: #222;
    border-radius: 2px;
    transition: width 0.2s ease;
    width: 0%;
}

.progress-text {
    text-align: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: opacity 0.3s ease;
}

.progress-text.faded {
    opacity: 0.25;
}

/* Settings Panel (top area) */
.speed-reading-settings {
    width: 100%;
    max-width: 600px;
    display: flex;
    gap: 80px;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: opacity 0.3s ease;
}

.speed-reading-settings.faded {
    opacity: 0.25;
}


/* Playback Controls (bottom area) */
.speed-reading-controls {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

.control-btn {
    background: transparent;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.control-btn:hover {
    transform: scale(1.1);
}

.reverse-btn {
    width: 80px;
    height: 80px;
}

.play-pause-btn {
    width: 80px;
    height: 80px;
}

.control-icon {
    filter: brightness(0);
}

.reverse-btn .control-icon {
    width: 50px;
    height: 50px;
}

.play-pause-btn .control-icon {
    width: 50px;
    height: 50px;
}


/* Settings Controls */
.control-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.control-group label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #222;
    text-align: center;
}

/* Words per view selector */
.word-count-selector {
    display: flex;
    gap: 8px;
}

.word-count-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    background-color: transparent;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    color: #222;
    cursor: pointer;
    transition: all 0.2s ease;
}

.word-count-btn:hover {
    border-color: #222;
}

.word-count-btn.active {
    border-color: #222;
    background-color: rgba(0, 0, 0, 0.1);
    color: #222;
}

/* Speed slider */
.speed-slider-container {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 300px;
}

.speed-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 500;
    min-width: 35px;
    text-align: center;
}

.speed-slider {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.2);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #222;
    cursor: pointer;
    transition: all 0.3s ease;
}

.speed-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.speed-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #222;
    cursor: pointer;
    border: none;
}

/* Exit Button (top right X) */
.speed-exit-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    background: transparent;
    border: none;
    color: #222;
    font-size: 90px;
    font-weight: 200;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 0.8;
}

.speed-exit-btn:hover {
    transform: scale(1.1);
}

.speed-exit-btn.faded {
    opacity: 0.25;
}

/* Speed Reading Completion Screen */
.speed-completion {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.98);
    z-index: 10;
}


/* Navigation Options (inline icons) */
.completion-options {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 60px;
    width: 100%;
}

.completion-icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.completion-icon-btn:hover {
    transform: scale(1.1);
}

.completion-nav-icon {
    width: 40px;
    height: 40px;
    filter: brightness(0);
}

/* Speed icon styling for toolbar */
.speed-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

/* Mobile Responsive for Speed Reading */
@media (max-width: 768px) {
    .speed-reading-content {
        padding: 20px;
    }
    
    .speed-reading-text {
        font-size: 2.5rem;
        max-width: 90%;
    }
    
    /* Mobile X button - smaller and higher up */
    .speed-exit-btn {
        top: -15px;
        right: -15px;
        width: 90px;
        height: 90px;
        font-size: 68px;
        font-weight: 100;
    }
    
    /* Settings controls - fix overflow */
    .speed-reading-settings {
        flex-direction: column;
        gap: 40px;
        padding: 0 10px;
        max-width: calc(100vw - 40px);
    }
    
    .control-group {
        width: 100%;
        max-width: 280px;
    }
    
    .speed-slider-container {
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }
    
    .word-count-selector {
        justify-content: center;
    }
    
    /* Mobile controls - make bigger */
    .reverse-btn {
        width: 90px;
        height: 90px;
    }
    
    .play-pause-btn {
        width: 100px;
        height: 100px;
    }
    
    .reverse-btn .control-icon {
        width: 55px;
        height: 55px;
    }
    
    .play-pause-btn .control-icon {
        width: 60px;
        height: 60px;
    }
}

/* Resources Page Styling */
.resources {
    padding: var(--spacing-lg);
}

.resources-content {
    margin-top: var(--spacing-xl);
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

.resource-card {
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    transition: all 0.2s ease;
}

.resource-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: #DD4111;
}

.resource-card h3 {
    color: var(--text-color);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid #DD4111;
}

.resource-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.resource-links li {
    margin-bottom: var(--spacing-sm);
}

.resource-links a {
    color: #DD4111;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    display: block;
    padding: var(--spacing-sm);
    border-radius: 6px;
}

.resource-links a:hover {
    background-color: rgba(221, 65, 17, 0.1);
    transform: translateX(4px);
    text-decoration: underline;
}

/* Mobile responsiveness for resources */
@media (max-width: 768px) {
    .resources {
        padding: var(--spacing-md);
    }
    
    .resources-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .resource-card {
        padding: var(--spacing-md);
    }
    
    .resource-card h3 {
        font-size: 18px;
    }
}

/* Hamburger menu blur effect */
.menu-blur {
    filter: blur(1px);
    transition: filter 0.3s ease;
}

/* Ensure menu overlay and hamburger menu are not blurred */
.hamburger-menu,
.menu-overlay {
    filter: none !important;
}

/* Notes Modal Styling */
.notes-modal .modal-content {
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

/* Note Display Modal Styling */
#note-display-modal .modal-content {
    max-width: 500px;
    max-height: 70vh;
}

.note-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.note-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.note-author .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.note-date {
    font-size: 13px;
    color: var(--text-light-color);
}

.note-verse-ref {
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(49, 130, 206, 0.1);
    border-radius: var(--radius-sm);
    display: inline-block;
}

.note-content-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
    white-space: pre-wrap;
}

.note-content-text a {
    text-decoration: underline;
    color: var(--primary-color);
}

/* Note modal new layout styles */
.note-verse-date-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: 14px;
}

.note-verse-date-line span:first-child {
    font-weight: 600;
    color: var(--text-color);
}

.note-verse-date-line span:last-child {
    color: var(--text-light-color);
}

.note-separator {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 12px 0;
}

.note-edit-section {
    margin-top: 12px;
}

.note-title-edit {
    margin-bottom: 12px;
}

.note-title-edit input {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid #718096;
    border-radius: 3px;
    background-color: var(--card-bg-color);
    font-size: 14px;
    color: var(--text-color);
    font-family: var(--font-ui);
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.note-title-edit input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.note-edit-section textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #718096;
    border-radius: 3px;
    background-color: var(--card-bg-color);
    font-size: 16px;
    color: var(--text-color);
    font-family: var(--font-ui);
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.note-edit-section textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.modal-footer {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    justify-content: flex-end;
}

.modal-header-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.edit-btn {
    background: #222;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.edit-btn:hover {
    background: #555;
}

.modal-header-buttons .save-btn {
    background: #222;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.modal-header-buttons .save-btn:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}

.notes-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-lg);
}

.notes-modal .modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
}

.verse-reference-modal {
    background: var(--primary-color-light);
    color: var(--primary-color-dark);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--spacing-lg);
    font-size: 14px;
}

.notes-modal-body {
    min-height: 200px;
    margin-bottom: var(--spacing-xl);
}

.notes-cards-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.note-card {
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    transition: all 0.2s ease;
}

.note-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #DD4111;
}

.note-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-md);
}

.note-title-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex: 1;
    min-width: 0;
}

.note-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.4;
    word-wrap: break-word;
}

.note-author-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 0;
}

.author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.author-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.author-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-time-small {
    font-size: 12px;
    color: var(--text-light-color);
}

.note-category-tag {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.note-category-tag.question {
    background-color: #EBF8FF;
    color: #2B6CB0;
}

.note-category-tag.thought {
    background-color: #F0FDF4;
    color: #166534;
}

.note-category-tag.inspiration {
    background-color: #F3E8FF;
    color: #7C3AED;
}


/* AI Response Formatting - Professional list styling */
.verse-text ul {
    margin: 0.8em 0;
    padding-left: 1.2em;
    line-height: 1.5;
}

.verse-text li {
    margin: 0.3em 0;
    list-style-type: disc;
    list-style-position: outside;
}

.verse-text p {
    margin: 0.6em 0;
    line-height: 1.6;
}

.verse-text h3 {
    margin: 1em 0 0.5em 0;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-color);
}

/* Ensure proper spacing between AI response elements */
.verse-text br + ul {
    margin-top: 0.4em;
}

.verse-text ul + br {
    display: none; /* Remove extra line breaks after lists */
}

.ai-tag-small {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: linear-gradient(135deg, #ff00cd, #827ce5);
    border-radius: 4px;
    flex-shrink: 0;
}

.ai-tag-icon-small {
    width: 12px;
    height: 12px;
    filter: brightness(0) invert(1);
    margin-left: -1px;
}

/* AI Title Pill - Subtle indicator for AI-generated titles */
.ai-title-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    background: #222; /* Darker than text color */
    border-radius: 12px;
    margin-right: 8px; /* More space between pill and title */
    flex-shrink: 0;
    opacity: 0.85;
}

.ai-title-pill-icon {
    width: 10px;
    height: 10px;
    filter: brightness(0) invert(1); /* Makes icon white */
    margin-left: -1px;
}

.note-content {
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.note-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

.note-time {
    color: var(--text-light-color);
    font-size: 13px;
    font-weight: 500;
}

.empty-state-modal {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    color: var(--text-light-color);
}

.empty-state-modal p {
    margin-bottom: var(--spacing-sm);
}

.empty-state-modal p:last-child {
    margin-bottom: 0;
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-lg);
    display: flex;
    justify-content: center;
}

.add-note-btn {
    min-width: 120px;
}

/* Chapter Summary Modal Styles */
.chapter-summary-modal .modal-content {
    max-width: 700px;
    max-height: 75vh; /* Shorter on desktop */
}

@media (max-width: 768px) {
    .chapter-summary-modal.modal {
        padding: 20px;
    }
    
    .chapter-summary-modal .modal-content {
        max-height: 100%;
        height: auto;
        width: 100%;
        margin: 0;
    }
}

.chapter-info {
    text-align: center;
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-lg);
}

.chapter-info h3 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-color);
}

.chapter-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--text-light-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-content {
    min-height: 200px;
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    text-align: center;
    gap: 8px;
}

/* Clean loading spinner circle */
.loading-spinner::before {
    content: '';
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
}

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

.loading-state p {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
}

.loading-state small {
    color: var(--text-light-color);
    font-size: 13px;
}

.ai-summary-content {
    line-height: 1.6;
    font-size: 16px;
    color: var(--text-color);
}

/* Fix ordered list styling in summary */
.ai-summary-content ol {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.ai-summary-content ol li {
    color: var(--text-color) !important;
}

.ai-summary-content ol li::before {
    content: none;
}

.ai-summary-content h1,
.ai-summary-content h2,
.ai-summary-content h3 {
    color: var(--text-color);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.ai-summary-content h1 {
    font-size: 20px;
}

.ai-summary-content h2 {
    font-size: 18px;
}

.ai-summary-content h3 {
    font-size: 16px;
}

.ai-summary-content p {
    margin-bottom: var(--spacing-md);
}

.ai-summary-content strong {
    font-weight: 600;
    color: var(--text-color);
}

/* Add spacing before person names in PEOPLE section only */
/* This targets strong elements that appear after the PEOPLE heading but before the next section */
#section-2 ~ strong:not(#section-3 ~ strong):not(#section-4 ~ strong) {
    display: inline-block;
    margin-top: 1.5em;
}

/* But not for the first strong element right after the PEOPLE heading */
#section-2 + br + strong,
#section-2 + br + br + strong {
    margin-top: 0 !important;
}

.summary-disclaimer {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.summary-disclaimer small {
    color: var(--text-light-color);
    font-size: 12px;
}

.error-state {
    text-align: center;
    padding: var(--spacing-xl);
}

.error-message {
    color: var(--danger-color);
    font-weight: 500;
    margin: 0 0 var(--spacing-xs) 0;
}

.error-details {
    color: var(--text-light-color);
    font-size: 13px;
}

/* Enhanced Modal Header with AI Pill and Actions */
.modal-title-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.ai-pill {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: #222;
    color: white;
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* Black AI pill for chapter summary modal */
.ai-pill-black {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: #222;
    color: white;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ai-pill-black .ai-pill-icon {
    width: 12px;
    height: 12px;
    filter: brightness(0) invert(1);
}

.ai-pill-icon {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.modal-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Style recycle icon to match close button color */
.chapter-summary-modal .recycle-btn img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1);
}

.chapter-summary-modal .close-btn {
    color: #222 !important;
    font-size: 28px !important;
    font-weight: normal !important;
}

.chapter-summary-modal .close-btn:hover {
    color: #222 !important;
}

/* Chapter summary modal buttons styling */
.chapter-summary-modal .btn-primary {
    background-color: #222 !important;
    border-color: #222 !important;
    border-radius: 4px !important;
    color: white !important;
}

.chapter-summary-modal .btn-primary:hover {
    background-color: #444 !important;
    border-color: #444 !important;
}

.chapter-summary-modal .btn-secondary {
    background-color: #222 !important;
    border-color: #222 !important;
    border-radius: 4px !important;
    color: white !important;
}

.chapter-summary-modal .btn-secondary:hover {
    background-color: #444 !important;
    border-color: #444 !important;
}

.icon-btn {
    background: none;
    border: none;
    padding: var(--spacing-xs);
    cursor: pointer;
    border-radius: var(--radius);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.icon-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

.icon-btn img {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(0) invert(0.6);
}

.icon-btn:hover img {
    filter: brightness(0) saturate(0) invert(0.8);
}

/* Recycle button specific styling */
.recycle-btn img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1) !important;
}

.recycle-btn:hover img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1.2) !important;
}

/* Summary Navigation */
.summary-navigation {
    margin-bottom: var(--spacing-lg);
}

.nav-header {
    margin-bottom: var(--spacing-sm);
}

.nav-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Override nav-title color specifically for library navbar */
html body .navbar.library-navbar .nav-title,
html body .navbar.library-navbar #page-title {
    color: white !important;
}

.nav-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.nav-item {
    background: #222 !important;
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 4px !important;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-weight: 500;
}

.nav-item:hover {
    background: var(--primary-dark-color, #3b82f6);
    color: white;
    transform: translateY(-1px);
}

/* Section Headers and Anchors - Modal specific */
.modal-body .section-header {
    margin-top: 30px !important;
    margin-bottom: 20px !important;
    color: var(--text-color) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid #222;
    text-align: left !important;
    display: block !important;
    justify-content: flex-start !important;
}

.section-anchor {
    display: block;
    position: relative;
    top: -20px;
    visibility: hidden;
}

.section-highlight {
    background: rgba(59, 130, 246, 0.1) !important;
    border-radius: var(--radius);
    padding: var(--spacing-xs) !important;
    transition: background 0.3s ease;
}

/* Enhanced AI Summary Content */
.ai-summary-content {
    line-height: 1.7;
    font-size: 15px;
    color: var(--text-color);
}

.ai-summary-content h1,
.ai-summary-content h2,
.ai-summary-content h3 {
    color: var(--text-color);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.ai-summary-content h1 {
    font-size: 20px;
}

.ai-summary-content h2 {
    font-size: 18px;
}

.ai-summary-content h3 {
    font-size: 16px;
}

.ai-summary-content p {
    margin-bottom: var(--spacing-md);
}

.ai-summary-content strong {
    font-weight: 600;
    color: var(--text-color);
}

.ai-summary-content ul,
.ai-summary-content ol {
    margin-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.ai-summary-content li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.6;
}

/* Control line break spacing in insights modal */
.ai-summary-content br + br + br {
    display: none;
}

/* Mobile Optimizations for Summary Modal */
@media (max-width: 768px) {
    .modal-title-container {
        gap: var(--spacing-sm);
    }
    
    .ai-pill {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    .ai-pill-icon {
        width: 12px;
        height: 12px;
    }
    
    .nav-items {
        justify-content: center;
    }
    
    .nav-item {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .section-header {
        font-size: 15px !important;
    }
    
    /* Modal already centers content by default, no need to override */
}

/* Scripture Reference Links */
.scripture-link {
    background-color: #222;
    color: white;
    text-decoration: none;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    border: none;
    transition: background-color 0.2s ease;
    display: inline-block;
    margin: 2px 4px;
    font-size: 13px;
}

.scripture-link:hover {
    background-color: #444;
    color: white;
    text-decoration: none;
}

.scripture-link:active {
    background-color: #111;
    color: white;
}

/* Verse highlighting for navigation */
.verse-highlight {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(147, 51, 234, 0.15) 100%) !important;
    border-radius: var(--radius) !important;
    padding: var(--spacing-sm) !important;
    margin: var(--spacing-xs) 0 !important;
    border: 2px solid rgba(59, 130, 246, 0.3) !important;
    animation: verse-highlight-pulse 2s ease-in-out;
}

@keyframes verse-highlight-pulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); 
    }
    50% { 
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.1); 
    }
}

/* Enhanced Related Scriptures Section */
.ai-summary-content h4[id*="related"] {
    color: var(--primary-color) !important;
    border-top: 2px solid var(--border-color);
    padding-top: var(--spacing-lg);
    margin-top: var(--spacing-xl) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Special styling for related scripture items */
.ai-summary-content p:has(.scripture-link) {
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-sm);
    background: var(--surface-color);
    border-radius: var(--radius);
    border-left: 3px solid var(--primary-color);
}

/* Mobile optimizations for scripture links */
@media (max-width: 768px) {
    .scripture-link {
        font-size: 12px;
        padding: 1px 4px;
    }
}

/* Mobile optimizations for notes modals */
@media (max-width: 768px) {
    .notes-modal .modal-content {
        max-width: 95vw;
        margin: 10px;
        max-height: 85vh;
    }
    
    .note-card {
        padding: var(--spacing-md);
    }
    
    .note-card-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    
    .note-author-section {
        align-self: flex-start;
    }
    
    .note-category-tag {
        align-self: flex-end;
        margin-top: var(--spacing-xs);
    }
    
    .verse-reference-modal {
        font-size: 13px;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* Note modal title input styling */
.modal-title-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #718096;
    border-radius: 3px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s ease;
}

.modal-title-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.modal-title-input::placeholder {
    color: var(--text-light-color);
}

/* Enhanced helper text styling */
.setting-help-large {
    font-size: 14px !important;
    color: var(--text-light-color);
    margin-top: var(--spacing-xs);
    line-height: 1.5;
}

/* AI helper pill in setting help text */
.ai-helper-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #222;
    border-radius: 10px;
    padding: 4px 8px;
    margin: 0 3px;
    vertical-align: middle;
}

.ai-helper-icon {
    width: 12px;
    height: 12px;
    filter: brightness(0) invert(1); /* Make icon white */
    margin-left: -1px;
}
}
/* PWA Install Banner Styles */
.pwa-install-banner {
    position: fixed;
    bottom: -100px;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    padding: 16px;
    z-index: 10000;
    transition: bottom 0.3s ease;
}

.pwa-install-banner.show {
    bottom: 0;
}

.install-banner-content {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.install-banner-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.install-banner-text strong {
    font-size: 16px;
    color: var(--text-color);
}

.install-banner-text span {
    font-size: 14px;
    color: var(--text-light-color);
}

.install-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.install-banner-actions .btn {
    background: var(--primary-color);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.install-banner-actions .btn:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}

.install-banner-actions .btn-text {
    background: none;
    color: var(--text-light-color);
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.install-banner-actions .btn-text:hover {
    color: var(--text-color);
}

/* Responsive PWA Install Banner */
@media (max-width: 480px) {
    .install-banner-content {
        flex-direction: column;
        text-align: center;
    }
    
    .install-banner-actions {
        width: 100%;
        justify-content: center;
    }
}

/* PWA Standalone Mode Adjustments */
@media (display-mode: standalone) {
    /* Add padding for iOS status bar in standalone mode */
    .navbar {
        padding-top: env(safe-area-inset-top);
    }
    
    /* Adjust for iOS home indicator */
    .bottom-toolbar {
        padding-bottom: env(safe-area-inset-bottom);
    }
}
EOF < /dev/null
/* Mobile Recent Notes Layout */
@media (max-width: 768px) {
  /* Hide desktop layout elements on mobile */
  .activity-rows .activity-row > .activity-row-favorite,
  .activity-rows .activity-row > .activity-row-date,
  .activity-rows .activity-row > .activity-row-category,
  .activity-rows .activity-row > .activity-row-verses,
  .activity-rows .activity-row > .activity-row-title {
    display: none !important;
  }
  
  /* Show mobile layout */
  .activity-rows .activity-row-mobile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  
  /* First row: heart, date, category */
  .mobile-row-first {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .mobile-row-first .heart-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  
  .mobile-row-first .mobile-date {
    font-size: 13px;
    color: var(--text-light-color);
    flex-shrink: 0;
  }
  
  .mobile-row-first .category-pill {
    margin-left: auto;
  }
  
  /* Second row: scripture reference */
  .mobile-row-second {
    font-size: 14px;
    color: var(--text-color);
    font-weight: 600;
    padding-left: 32px; /* Align with text after heart icon */
  }
  
  /* Third row: title */
  .mobile-row-third {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.4;
    padding-left: 32px; /* Align with text after heart icon */
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .mobile-row-third .ai-title-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--primary-color-light);
    border-radius: 4px;
    flex-shrink: 0;
  }
  
  .mobile-row-third .ai-title-pill-icon {
    width: 12px;
    height: 12px;
  }
  
  /* Adjust activity row padding on mobile */
  .activity-row {
    padding: 16px;
  }
}

/* Desktop: hide mobile layout */
@media (min-width: 769px) {
  .activity-row-mobile {
    display: none;
  }
}
EOF < /dev/null
/* Mobile Recent Notes Layout - Clean Implementation */
@media (max-width: 768px) {
  /* Transform activity row to vertical layout on mobile */
  .activity-rows .activity-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    align-items: flex-start;
  }
  
  /* First row: heart, date, category in horizontal line */
  .activity-rows .activity-row > .activity-row-favorite,
  .activity-rows .activity-row > .activity-row-date,
  .activity-rows .activity-row > .activity-row-category {
    display: inline-flex;
    margin: 0;
  }
  
  /* Create mobile first row container */
  .activity-rows .activity-row::before {
    content: '';
    display: flex;
    width: 100%;
    order: -1;
  }
  
  /* Reorder elements for mobile */
  .activity-rows .activity-row > .activity-row-favorite {
    order: 1;
    width: auto;
    margin-right: 12px;
  }
  
  .activity-rows .activity-row > .activity-row-date {
    order: 1;
    font-size: 13px;
    color: var(--text-light-color);
    margin-right: auto;
  }
  
  .activity-rows .activity-row > .activity-row-category {
    order: 1;
  }
  
  /* Second row: scripture reference */
  .activity-rows .activity-row > .activity-row-verses {
    order: 2;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
  }
  
  /* Third row: title */
  .activity-rows .activity-row > .activity-row-title {
    order: 3;
    width: 100%;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
  }
  
  /* Adjust heart icon size */
  .activity-rows .activity-row .heart-icon {
    width: 20px;
    height: 20px;
  }
  
  /* Adjust category pill for mobile */
  .activity-rows .activity-row .category-pill {
    padding: 3px 8px;
    font-size: 11px;
  }
}

/* Mobile Recent Notes - Clean Three-Line Layout */
.activity-row-mobile-wrapper {
  display: none;
}

@media (max-width: 768px) {
  /* Hide desktop elements on mobile */
  .activity-row > .activity-row-favorite,
  .activity-row > .activity-row-date,
  .activity-row > .activity-row-category,
  .activity-row > .activity-row-verses,
  .activity-row > .activity-row-title,
  .activity-row-mobile-first {
    display: none \!important;
  }
  
  /* Show mobile wrapper */
  .activity-row-mobile-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  
  /* Override grid layout on mobile */
  .activity-row {
    display: block \!important;
    padding: 16px \!important;
    grid-template-columns: unset \!important;
    grid-template-rows: unset \!important;
    grid-template-areas: unset \!important;
  }
  
  /* First line: heart, date, category */
  .mobile-line-one {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .mobile-line-one .heart-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  
  .mobile-line-one .mobile-date {
    font-size: 13px;
    color: var(--text-light-color);
  }
  
  .mobile-line-one .category-pill {
    margin-left: auto;
    padding: 3px 8px;
    font-size: 11px;
  }
  
  /* Second line: scripture reference */
  .mobile-line-two {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
  }
  
  /* Third line: title */
  .mobile-line-three {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .mobile-line-three .ai-title-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--primary-color-light);
    border-radius: 4px;
    flex-shrink: 0;
  }
  
  .mobile-line-three .ai-title-pill-icon {
    width: 12px;
    height: 12px;
  }
}
EOF < /dev/null

/* Mobile Scripture Text Size Improvements */
@media (max-width: 768px) {
  /* Increase all scripture text on mobile */
  body.reader-mode .verse-text,
  .scripture-text,
  .verse p,
  .verse-content p {
    font-size: 18px \!important;
    line-height: 1.7 \!important;
  }
  
  /* Scripture reference styling */
  .verse-reference,
  .scripture-reference {
    font-size: 17px \!important;
    font-weight: 700 \!important;
  }
  
  /* Verse numbers */
  .verse-number {
    font-size: 1.3em \!important;
  }
  
  /* Modal text improvements */
  .modal .verse-text,
  .modal .scripture-text,
  .modal .note-content-text {
    font-size: 17px \!important;
    line-height: 1.6 \!important;
  }
  
  /* Note content in all contexts */
  .note-text,
  .note-content {
    font-size: 17px \!important;
    line-height: 1.6 \!important;
  }
  
  /* Chapter content improvements */
  .chapter-content p,
  .scripture-chapter p {
    font-size: 18px \!important;
    line-height: 1.7 \!important;
  }
}
EOF < /dev/null



/* Study Insights Modal Styles */
.modal-description {
  color: var(--text-light-color);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

.time-period-options {
  margin-bottom: var(--spacing-xl);
}

.time-period-options h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  color: var(--text-color);
}

.insights-header {
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.insights-header h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--text-color);
}

.insights-stats {
  color: var(--text-light-color);
  font-size: 14px;
}

.insights-analysis {
  line-height: 1.8;
  color: var(--text-color);
}

.insights-analysis h1,
.insights-analysis h2,
.insights-analysis h3 {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  color: var(--text-color);
}

.insights-analysis h1 { font-size: 18px; }
.insights-analysis h2 { font-size: 16px; }
.insights-analysis h3 { font-size: 15px; }

.insights-analysis ul,
.insights-analysis ol {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-lg);
}

.insights-analysis li {
  margin-bottom: var(--spacing-sm);
}

#insights-results-section .btn-secondary {
  margin-top: var(--spacing-lg);
}

/* AI Copy Button Styles */
.ai-copy-container {
  position: absolute;
  bottom: 8px;
  right: 8px;
}

.ai-copy-button {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.ai-copy-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.ai-copy-icon {
  width: 16px;
  height: 16px;
}

.ai-copy-icon.copy-state {
  filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(96%) contrast(89%); /* #222 color */
}

.ai-copy-icon.success-state {
  /* Purple color is already set in the SVG fill */
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .ai-copy-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
}

/* Header Styling - Unified #222 background for all pages */
html body .navbar {
  background-color: #222 !important;
  border-bottom: 1px solid #222 !important;
  color: white !important;
}

html body .navbar.library-navbar {
  background-color: #222 !important;
  border-bottom: 1px solid #222 !important;
  color: white !important;
}

html body .navbar.library-navbar .nav-title {
  color: white !important;
}

/* Override CSS variable for library navbar */
html body .navbar.library-navbar {
  --text-color: white;
}

html body .navbar.library-navbar,
html body .navbar.library-navbar * {
  color: white !important;
}

/* Force white text on library pages with maximum specificity */
html body .navbar.library-navbar .nav-title,
html body .navbar.library-navbar #page-title {
  color: white !important;
}

/* All navbar icons should be white on #222 background */
.navbar .hamburger-icon,
.navbar .home-icon {
  filter: invert(1) !important;
}


/* ===================================== */
/* INSIGHTS HISTORY PAGE STYLES */
/* ===================================== */

.insights-history {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.insights-history-content {
  margin-top: 20px;
}

.insights-date-group {
  margin-bottom: 30px;
}

.date-group-header {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-color);
}

.insight-card {
  background: var(--card-bg-color);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--border-color);
}

.insight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: var(--primary-color);
}

.insight-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.insight-header h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.insight-date {
  font-size: 0.85rem;
  color: var(--text-light-color);
  font-weight: 500;
}

.insight-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.stat-item {
  background: var(--primary-color-light);
  color: var(--primary-color);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

.insight-preview {
  color: var(--text-light-color);
  line-height: 1.5;
  font-size: 0.95rem;
}

/* Empty state and error state */
.empty-state, .error-state {
  text-align: center;
  padding: 40px 20px;
  background: var(--card-bg-color);
  border-radius: var(--radius);
  margin: 20px 0;
}

.empty-state h3, .error-state h3 {
  color: var(--text-color);
  margin-bottom: 12px;
  font-size: 1.3rem;
}

.empty-state p, .error-state p {
  color: var(--text-light-color);
  margin-bottom: 8px;
  line-height: 1.6;
}

.empty-state .btn, .error-state .btn {
  margin-top: 16px;
}

/* Loading spinner */
.loading-spinner {
  text-align: center;
  color: var(--text-light-color);
  padding: 40px;
  font-style: italic;
}

/* Insights modal specific loading centering */
#study-insights-modal .modal-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 300px;
}

#study-insights-modal .modal-body.has-content {
  justify-content: flex-start;
  align-items: stretch;
}

/* Insights modal loading state - reduced spacing */
#study-insights-modal .insights-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding-top: 40px;
  margin-top: 0;
}

#study-insights-modal .insights-loading-spinner {
  text-align: center;
  padding: 0;
  color: #222;
  font-style: italic;
}

#study-insights-modal .insights-loading-message {
  font-size: 16px;
  color: #222;
  font-style: italic;
  margin-top: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .insights-history {
    padding: 15px;
  }
  
  .insight-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .insight-stats {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .stat-item {
    font-size: 0.75rem;
  }
}

/* ============================================
   FAVORITES PAGE STYLES
   ============================================ */

.favorites-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.favorites-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--spacing-md);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: 14px;
    color: var(--text-color);
}

.pagination-btn {
    background: var(--card-bg-color);
    border: 1px solid #D5D5D5;
    padding: 8px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    color: var(--text-color);
    font-family: var(--font-ui);
}

.pagination-btn:hover:not(:disabled) {
    background: #FAFAFA;
    border-color: var(--primary-color);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.favorites-table-container {
    background: var(--card-bg-color);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin: var(--spacing-md) 0;
}

/* Favorites Table Header */
.favorites-table-header {
    display: grid;
    grid-template-columns: 100px 150px 2fr 80px; /* Time, Reference, Text, Notes */
    gap: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-xl);
    background: #F8F9FA;
    border-bottom: 1px solid #D5D5D5;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.favorites-table-header .sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    padding: 4px 8px;
    border-radius: 4px;
    margin: -4px -8px;
}

.favorites-table-header .sortable:hover {
    background: rgba(0, 0, 0, 0.05);
}

.sort-indicator {
    margin-left: 5px;
    color: var(--primary-color);
    font-size: 12px;
}

/* Favorites rows use existing favorite-row styling but with grid layout */
.favorites-table-container .favorite-row {
    display: grid;
    grid-template-columns: 100px 150px 2fr 80px; /* Match header */
    gap: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-xl);
    border-bottom: 1px solid #D5D5D5;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.favorites-table-container .favorite-row:hover {
    background: var(--hover-bg-color);
}

.favorites-table-container .favorite-row:last-child {
    border-bottom: none;
}

/* Override favorite column widths for favorites page */
.favorites-table-container .favorite-time {
    width: auto;
    color: #222;
    font-size: 14px;
}

.favorites-table-container .favorite-reference {
    width: auto;
    color: #222;
    font-weight: 500;
}

.favorites-table-container .favorite-text {
    width: auto;
    font-family: var(--font-ui);
    color: #222;
    line-height: 1.4;
    font-size: 14px;
}

.favorites-table-container .favorite-notes {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}


.loading-favorites,
.error-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-light-color);
    font-style: italic;
}

/* See All Favorites Link */
.see-all-link {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.see-all-link:hover {
    opacity: 0.8;
    text-decoration: underline;
    transform: scale(1.02);
}

/* See All Favorites Button */
.see-all-favorites-btn {
    transition: all 0.2s ease !important;
}

.see-all-favorites-btn:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Favorites Table Row Styling */
.favorites-table-row:hover {
    background: #FAFAFA !important;
}

.favorites-table .scripture-reference {
    font-weight: 500;
    color: var(--primary-color);
}

.favorites-table .notes-cell {
    text-align: center;
    vertical-align: middle;
}

.note-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #F0F7FF;
    border: 1px solid #B3D9FF;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
}

.user-circle-icon {
    font-size: 12px;
}

/* Profile with count styling (matches scripture verse styling) */
.profile-with-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.favorites-table-container .profile-with-count .note-count {
    font-weight: normal;
    color: #222;
    font-size: 14px;
}

.note-count {
    font-weight: 600;
    color: var(--primary-color);
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .favorites-table-header {
        grid-template-columns: 80px 120px 1fr 60px;
        gap: var(--spacing-md);
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 12px;
    }
    
    .favorites-table-container .favorite-row {
        grid-template-columns: 80px 120px 1fr 60px;
        gap: var(--spacing-md);
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .favorites-table-container .favorite-time {
        font-size: 13px;
    }
    
    .favorites-table-container .favorite-reference {
        font-size: 13px;
    }
    
    .favorites-table-container .favorite-text {
        font-size: 13px;
    }
    
    .favorites-table-container .profile-with-count .note-count {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .favorites-content {
        padding: 0 var(--spacing-sm);
    }
    
    .favorites-controls {
        justify-content: center;
        margin-bottom: var(--spacing-sm);
    }
    
    .pagination-controls {
        gap: var(--spacing-sm);
        font-size: 13px;
    }
    
    .pagination-btn {
        padding: 6px 10px;
        font-size: 13px;
    }
    
    .favorites-table-container {
        margin: var(--spacing-sm) 0;
        border-radius: 8px;
    }
    
    .favorites-table-header {
        grid-template-columns: 50px 100px 1fr 40px;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
        font-size: 11px;
    }
    
    .favorites-table-container .favorite-row {
        grid-template-columns: 50px 100px 1fr 40px;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }
    
    .favorites-table-container .favorite-time {
        font-size: 12px;
    }
    
    .favorites-table-container .favorite-reference {
        font-size: 12px;
    }
    
    .favorites-table-container .favorite-text {
        font-size: 12px;
    }
    
    .favorites-table-container .profile-with-count .note-count {
        font-size: 12px;
    }
    
    .note-indicator {
        font-size: 10px;
        padding: 1px 6px;
    }
}

/* FINAL OVERRIDE: Force white text on library navbar - highest specificity */
html body .navbar.library-navbar .nav-title,
html body .navbar.library-navbar #page-title {
    color: white !important;
}