body[data-active-section="verse"] {
    background-color: var(--verse-background);
    color: var(--verse-text-primary);
    font-family: 'Noto Sans Kannada', 'Noto Serif Kannada', 'Kedage', 'Mallige', Tunga, 'Arial Unicode MS', sans-serif;

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

/* Script-specific styles */
[data-active-section="verse"] .verse-text[data-script="kannada"] {
    font-family: 'Noto Sans Kannada', sans-serif !important;
    font-size: 1.4rem;
    line-height: 2.2;
    letter-spacing: 0.01em;
    font-weight: 500;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[data-active-section="verse"] .verse-text[data-script="telugu"] {
    font-family: 'Noto Sans Telugu', sans-serif !important;
    font-size: 1.4rem;
    line-height: 2.2;
    letter-spacing: 0.01em;
    font-weight: 500;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[data-active-section="verse"] .verse-text[data-script="devanagari"],
[data-active-section="verse"] .verse-text[data-script="roman"] {
    font-family: 'Noto Sans';
}

/* Mobile optimizations */
@media (max-width: 768px) {

    [data-active-section="verse"] .verse-text[data-script="kannada"],
    [data-active-section="verse"] .verse-text[data-script="telugu"] {
        font-size: 1.25rem;
        line-height: 2;
    }
}

[data-active-section="verse"] .verse-text {
    font-size: 1.1rem;
    line-height: 1.8;
    padding: 0.5rem;
    margin: 0.3rem;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--verse-text-primary);
    font-family: 'Noto Sans Kannada' !important;
    font-family: 'Noto Sans Telugu' !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}





/* Main Content */
[data-active-section="verse"] .main-content {
    padding: var(--verse-spacing-xl);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

/* Search Section */
[data-active-section="verse"] .search-section {
    position: relative;
    margin: 0 auto var(--verse-spacing-xl);
    transition: all 0.3s ease;
    padding: 0 1rem;
    z-index: 98;
}

[data-active-section="verse"] .search-section.fixed {
    position: fixed;
    top: 70px; /* Adjust this value based on your header height */
    left: 0;
    right: 0;
    width: 100%;
    background: var(--verse-background);
    padding: 0.75rem 1rem;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--verse-border-color);
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-active-section="verse"] .search-section.fixed .search-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Welcome section transition */
[data-active-section="verse"] .welcome-section-verse {
    text-align: center;
    padding: 4rem 2rem;
    max-width: 800px;
    margin: 0 auto;
    opacity: 1;
    transition: all 0.5s ease;
}

[data-active-section="verse"] .welcome-section-verse.hidden {
    opacity: 0;
    visibility: hidden;
    display: none;
}

/* Main content padding when search is fixed */
[data-active-section="verse"] .main-content.search-fixed {
    padding-top: 70px;
    padding-bottom: 70px;
}

/* Ensure proper stacking context */
[data-active-section="verse"] .header {
    z-index: 99;
}

[data-active-section="verse"] .dropdown-menu {
    z-index: 100;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    [data-active-section="verse"] .search-section.fixed {
        padding: 0.5rem;
    }
    
    [data-active-section="verse"] .search-section.fixed .search-container {
        padding: 0 0.5rem;
    }
}

/* Update the search input styles when fixed */
[data-active-section="verse"] .search-section.fixed .search-input-verse {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    display: block;
    border-color: var(--verse-primary-light);
    background: var(--verse-surface);
    box-shadow: 0 4px 20px rgba(var(--verse-primary-rgb), 0.15);
    transform: scale(1.02);
}

/* Add a container for the fixed search input */
[data-active-section="verse"] .search-section.fixed::after {
    content: '';
    display: block;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Search container styles */
[data-active-section="verse"] .search-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* Update search input styles */
[data-active-section="verse"] .search-input-verse {
    width: 100%;
    padding: 0.8rem;
    padding-right: 3.5rem;
    /* Make space for the button */
    font-size: 1.1rem;
    background-color: var(--verse-surface);
    color: var(--verse-input-text);
    border: 2px solid var(--verse-border-color);
    border-radius: 12px;
    box-shadow: var(--verse-shadow);
    transition: all 0.3s ease;
}

/* Search button styles */
[data-active-section="verse"] .search-button-verse {
    position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        background-color: transparent;
        color: var(--dict-text-secondary);
        border: none;
        border-radius: 8px;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
}





[data-active-section="verse"] .search-button-verse .material-icons {
    font-size: 1.5rem;
}

/* Results Section */
[data-active-section="verse"] .results-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  
    max-width: min(800px, 100%);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Verse Card Base Styles */
[data-active-section="verse"] .verse-card {
    background: var(--verse-card-bg, rgba(255, 255, 255, 0.95));
    border: 1px solid var(--verse-card-border, rgba(5, 150, 105, 0.2));
    border-radius: 16px;
    margin-bottom: 0.2rem;
    padding: 0.2rem 0.2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    animation: fadeIn 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;
}

[data-active-section="verse"] .verse-card:hover {
    background: var(--verse-hover-bg, #ffffff);
    border-color: var(--verse-accent, #059669);
    box-shadow: 0 4px 20px rgba(52, 211, 153, 0.15);
}

/* Similarity Badge Styles */
[data-active-section="verse"] .similarity-badge {
    position: absolute;
    top: -0.6rem;
    right: 1rem;
    z-index: 2;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Exact match styles */
[data-active-section="verse"] .similarity-badge[data-type="exact"] {
    background: #05963d;
    color: white;
}

[data-active-section="verse"] [data-theme="light"] .similarity-badge[data-type="exact"] {
    background: #10B981;
    color: white;
}

/* Trigram match styles */
[data-active-section="verse"] .similarity-badge[data-type="trigram"] {
    background: #ecfd8a;
    color: #92400E;
}

/* Verse Key and Footer Styles */
[data-active-section="verse"] .verse-key {
    color: var(--verse-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    background: rgba(6, 78, 59, 0.08);
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 120px);
    /* Space for buttons */
}

[data-active-section="verse"] .verse-footer {
    padding: 0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-top: 1px solid var(--verse-border-color);
    gap: 0.5rem;
}

[data-active-section="verse"] .verse-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    /* Prevent buttons from shrinking */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    [data-active-section="verse"] .similarity-badge {
        top: -0.5rem;
        right: 0.8rem;
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
        border-radius: 10px;
    }

    [data-active-section="verse"] .verse-key {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
        max-width: calc(100% - 100px);
        /* Adjusted space for mobile */
    }

    [data-active-section="verse"] .verse-footer {
        padding: 0.25rem;
        gap: 0.375rem;
    }

    [data-active-section="verse"] .verse-actions {
        gap: 0.375rem;
    }

    [data-active-section="verse"] .action-button .material-icons,
    [data-active-section="verse"] .star-button .material-icons {
        font-size: 1rem;
    }
}

/* Even smaller screens */
@media (max-width: 390px) {
    [data-active-section="verse"] .similarity-badge {
        top: 0rem;
        right: 0.6rem;
        font-size: 0.6rem;
        padding: 0.2rem 0.4rem;
    }

    [data-active-section="verse"] .verse-key {
        font-size: 0.7rem;
        max-width: calc(100% - 90px);
        /* Further reduced for smaller screens */
    }

    [data-active-section="verse"] .verse-footer {
        padding: 0.2rem;
    }
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark mode adjustments */
[data-theme="dark"] [data-active-section="verse"] .verse-card {
    background: rgba(6, 95, 70, 0.7);
    border-color: rgba(52, 211, 153, 0.2);
}

[data-theme="dark"] [data-active-section="verse"] .verse-card:hover {
    background: rgba(6, 95, 70, 0.9);
}

/* Enhanced loading spinner */
[data-active-section="verse"] .loading-spinner {
    display: none;
    justify-content: center;
    padding: 2rem;
}

[data-active-section="verse"] .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(6, 78, 59, 0.1);
    border-top-color: var(--verse-primary-color);
    border-radius: 50%;
    animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}



@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-20px);
    }
}


/* Responsive Design */
@media (max-width: 768px) {

    [data-active-section="verse"] .main-content {
        padding: var(--verse-spacing-sm);

    }

    [data-active-section="verse"] .button-text {
        display: none;
    }



    [data-active-section="verse"] .verse-text {
        padding: 0.3rem;
        font-size: 1rem;
        line-height: 1.7;
    }

    [data-active-section="verse"] .verse-header,
    [data-active-section="verse"] .verse-footer {
        padding: 0.3rem;
    }



    [data-active-section="verse"] .verse-header {
        flex-direction: column;
        gap: 0.8rem;
        padding-right: 0;
        /* Remove padding on mobile */
    }

    [data-active-section="verse"] .verse-meta {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-right: 90px;
        /* Make space for similarity badge on mobile */
    }

    [data-active-section="verse"] .verse-key {
        max-width: 280px;
        font-size: 0.8rem;
    }

    [data-active-section="verse"] .similarity-badge {
        top: -0.5rem;
        right: 0.8rem;
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }

    [data-active-section="verse"] .verse-actions {
        margin-left: auto;
        padding-top: 0.5rem;
    }

    [data-active-section="verse"] .search-input-verse {
  
        padding: 0.8rem 1rem;
        font-size: 1rem;
    }

 


    /* Update action buttons icon size */
    [data-active-section="verse"] .action-button .material-icons,
    [data-active-section="verse"] .star-button .material-icons {
        font-size: 16px;
    }

    [data-active-section="verse"] .logo img {
        height: 32px;
    }

    [data-active-section="verse"] .logo-text {
        font-size: 1.5rem;
    }
}

/* Add styles for even smaller screens */
@media (max-width: 390px) {
    [data-active-section="verse"] .main-content {
        padding: var(--verse-spacing-xs);
    }

    [data-active-section="verse"] .verse-key {
        max-width: 250px;
        font-size: 0.75rem;
    }

    [data-active-section="verse"] .verse-text {
        padding: 0.3rem;
        font-size: 0.9375rem;
    }

    [data-active-section="verse"] .logo {
        font-size: 1.3rem;
    }

    [data-active-section="verse"] .verse-meta {
        padding-right: 80px;
        /* Adjust space for similarity badge on smaller screens */
    }

    [data-active-section="verse"] .similarity-badge {
        top: 0rem;
        right: 1rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
    }
}






[data-active-section="verse"] .starred-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

[data-active-section="verse"] .starred-container {
    background: var(--verse-surface);
    border-radius: 16px;
    width: min(90%, 800px);
    max-height: 85vh;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease;
}

[data-active-section="verse"] .starred-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--verse-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: var(--verse-surface);
    border-radius: 16px 16px 0 0;
    z-index: 1;
}

[data-active-section="verse"] .starred-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--verse-text-primary);
}

[data-active-section="verse"] .close-button {
    background: transparent;
    border: none;
    color: var(--verse-text-secondary);
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

[data-active-section="verse"] .close-button:hover {
    background: rgba(var(--verse-primary-rgb), 0.1);
    color: var(--verse-primary-color);
}

[data-active-section="verse"] .starred-content {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

[data-active-section="verse"] .no-starred {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--verse-text-secondary);
    font-size: 1.1rem;
}

/* Animation */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    [data-active-section="verse"] .starred-modal {
        padding: 0;
    }

    [data-active-section="verse"] .starred-container {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    [data-active-section="verse"] .starred-header {
        padding: 1rem;
        border-radius: 0;
    }

    [data-active-section="verse"] .starred-title {
        font-size: 1.25rem;
    }

    [data-active-section="verse"] .starred-content {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    [data-active-section="verse"] .close-button {
        padding: 0.4rem;
    }

    [data-active-section="verse"] .close-button .material-icons {
        font-size: 1.25rem;
    }

    [data-active-section="verse"] .no-starred {
        padding: 2rem 1rem;
        font-size: 1rem;
    }
}

/* Small Mobile Screens */
@media (max-width: 390px) {
    [data-active-section="verse"] .starred-header {
        padding: 0.75rem;
    }

    [data-active-section="verse"] .starred-title {
        font-size: 1.1rem;
    }

    [data-active-section="verse"] .starred-content {
        padding: 0.5rem;
    }

    [data-active-section="verse"] .no-starred {
        padding: 1.5rem 0.75rem;
        font-size: 0.9rem;
    }
}

[data-active-section="verse"] .source-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    background: var(--verse-primary-dark);
    color: white;
    border-radius: 16px;
    font-size: 0.8rem;
    margin-top: var(--verse-spacing-sm);
}

[data-active-section="verse"] .starred-button {
    display: flex;
    align-items: center;
    gap: var(--verse-spacing-xs);
    background: none;
    border: none;
    color: var(--verse-text-primary);
    cursor: pointer;
    padding: var(--verse-spacing-xs) var(--verse-spacing-sm);
    border-radius: 8px;
    transition: all 0.3s ease;
}

[data-active-section="verse"] .starred-button:hover {
    background-color: var(--verse-border-color);
}

[data-active-section="verse"] .verse-actions {
    display: flex;
    align-items: center;
    gap: var(--verse-spacing-xs);
}

/* Style for the action buttons */
[data-active-section="verse"] .action-button {
    background: none;
    border: none;
    color: var(--verse-text-secondary);
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* For positioning the icon */
}

/* Hover effect for action buttons */
[data-active-section="verse"] .action-button:hover {
    background-color: rgba(var(--verse-primary-rgb), 0.1);
    color: var(--verse-primary-color);
    transform: scale(1.1);
}

/* Add a glow effect for the "other things" button */
[data-active-section="verse"] .action-button[title="Other Things"]:hover {
    box-shadow: 0 0 10px rgba(5, 150, 105, 0.5);
}

/* Icon styles */
[data-active-section="verse"] .material-icons {
    font-size: 1.5rem;
    /* Adjust size as needed */
}

/* Optional: Add a custom icon for the "other things" button */
[data-active-section="verse"] .action-button[title="Other Things"] .material-icons {
    color: var(--verse-accent-color);
    /* Change color for emphasis */
}

/* Add loading skeleton styles */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

[data-active-section="verse"] .skeleton {
    background: linear-gradient(90deg,
            var(--verse-border-color) 25%,
            var(--verse-surface) 50%,
            var(--verse-border-color) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

[data-active-section="verse"] .verse-card.skeleton {
    height: 200px;
}

/* Add keyboard navigation styles */
[data-active-section="verse"] .verse-card:focus {
    outline: 2px solid var(--verse-primary-color);
    outline-offset: 2px;
}

/* Add mobile enhancements */
@media (max-width: 768px) {
    [data-active-section="verse"] .verse-card {
        touch-action: pan-y;
    }

    [data-active-section="verse"] .verse-actions {
        opacity: 1;
        position: static;
        background: none;
        padding: 0;
    }
}

[data-active-section="verse"] .main-content {
    /* Header height + search section height */
    padding-bottom: 70px;
}
/* Add padding to main content when search is fixed */
[data-active-section="verse"] .main-content.search-fixed {
    padding-top: 70px;
    padding-bottom: 70px;
}

@media (max-width: 768px) {


    [data-active-section="verse"] .search-section.fixed {
        top: 60px;
    }
}

/* Add animation for the fixed transition */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

[data-active-section="verse"] .search-section.fixed {
    animation: slideDown 0.3s ease-out;
}

/* Update mobile styles */
@media (max-width: 768px) {
    [data-active-section="verse"] .search-section.fixed {
        padding: 0.8rem;
    }

    [data-active-section="verse"] .search-section.fixed .search-input-verse {
        transform: scale(1);
    }
}

/* Update the logo styles */
[data-active-section="verse"] .logo {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    letter-spacing: 1px;
    text-decoration: none;
    display: flex;
    align-items: center;
}

[data-active-section="verse"] .logo-text {
    background: linear-gradient(45deg, var(--verse-primary-color), var(--verse-primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Update mobile styles for logo */
@media (max-width: 768px) {
    [data-active-section="verse"] .logo-text {
        font-size: 1.5rem;
    }
}

/* Action Buttons */
[data-active-section="verse"] .action-button,
[data-active-section="verse"] .star-button {
    background: transparent;
    border: none;
    color: var(--verse-text-secondary);
    padding: 0.3rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-active-section="verse"] .action-button:hover {
    color: var(--verse-accent-color);
    background: rgba(5, 150, 105, 0.1);
}

/* Remove background on hover for bookmark button */
[data-active-section="verse"] .star-button:hover {
    color: var(--verse-accent-color);
}

/* Bookmarked Modal Verse Card Styles */
[data-active-section="verse"] .starred-content .verse-card {
  
    border: 1px solid var(--verse-border-color);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    position: relative;
}

[data-active-section="verse"] .starred-content .verse-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--verse-primary-rgb), 0.1);
    border-color: var(--verse-primary-light);
}

[data-active-section="verse"] .starred-content .verse-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--verse-text-primary);
    margin: 0;
    padding: 0;
    grid-column: 1 / -1;
}

[data-active-section="verse"] .starred-content .verse-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--verse-border-color);
}

[data-active-section="verse"] .starred-content .verse-key {
    font-size: 0.8rem;
    color: var(--verse-text-secondary);
    background: rgba(var(--verse-primary-rgb), 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    max-width: calc(100% - 80px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-active-section="verse"] .starred-content .verse-actions {
    display: flex;
    gap: 0.5rem;
}

[data-active-section="verse"] .starred-content .action-button,
[data-active-section="verse"] .starred-content .star-button {
    padding: 0.4rem;
    color: var(--verse-text-secondary);
    transition: all 0.2s ease;
}

[data-active-section="verse"] .starred-content .action-button:hover {
    color: var(--verse-primary-color);
}

[data-active-section="verse"] .starred-content .star-button {
    color: var(--verse-primary-color);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    [data-active-section="verse"] .starred-content .verse-card {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    [data-active-section="verse"] .starred-content .verse-text {
        font-size: 0.9rem;
    }

    [data-active-section="verse"] .starred-content .verse-key {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }
}

/* Update bookmark button styles */
[data-active-section="verse"] .star-button {
    background: transparent;
    border: none;
    color: var(--verse-text-secondary);
    padding: 0.3rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-active-section="verse"] .star-button:hover {
    color: var(--verse-accent-color);
    transform: scale(1.1);
}

[data-active-section="verse"] .star-button .material-icons {
    transition: all 0.2s ease;
}

/* Style for bookmarked state */
[data-active-section="verse"] .star-button[title^="Remove"] .material-icons {
    color: var(--verse-accent-color);
}

/* Update fixed search styles */
[data-active-section="verse"] .search-section.fixed .search-container {
    max-width: 900px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    [data-active-section="verse"] .search-button-verse {
        width: 2.2rem;
        height: 2.2rem;
    }

    /* [data-active-section="verse"] .search-button-verse .material-icons {
        font-size: 1.25rem;
    } */

    [data-active-section="verse"] .search-input-verse {
        padding-right: 3rem;
    }
}

/* Add styles for the source section */
[data-active-section="verse"] .source-section {
    margin-left: 0.8rem;
    transition: background 0.3s ease;
    display: flex;
    /* Flexbox for alignment */
    align-items: center;
    /* Center items vertically */
}

[data-active-section="verse"] .source-title {
    color: var(--verse-primary-color);
    /* Use primary color for the link */
    text-decoration: underline;
    /* Underline to indicate it's a link */
    cursor: pointer;
    /* Pointer cursor to indicate clickability */
    flex-grow: 1;
    /* Allow the title to take available space */
    margin-left: 0.5rem;
}

[data-active-section="verse"] .source-title:hover {
    color: var(--verse-primary-light);
    /* Change color on hover */
}

/* Hide elements by default */
[data-active-section="verse"] .hidden {
    display: none;
}

/* Other Fields Section Styling */
[data-active-section="verse"] .other-fields {
    margin-top: 0.75rem;
    background: var(--verse-surface);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(var(--verse-primary-rgb), 0.08);
}

[data-active-section="verse"] .other-fields-header {
    background: linear-gradient(45deg, rgba(var(--verse-primary-rgb), 0.08), rgba(var(--verse-primary-rgb), 0.03));
    padding: 1rem;
    font-size: 1rem;
    color: var(--verse-text-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[data-active-section="verse"] .other-fields-header::before {
    content: 'info';
    font-family: 'Material Icons';
    color: var(--verse-primary-color);
    font-size: 1.2rem;
}

[data-active-section="verse"] .other-field {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(var(--verse-primary-rgb), 0.1);
    transition: background-color 0.3s ease;
}

[data-active-section="verse"] .other-field:last-child {
    border-bottom: none;
}

[data-active-section="verse"] .other-field:hover {
    background-color: rgba(var(--verse-primary-rgb), 0.02);
}

[data-active-section="verse"] .other-field-key {
    font-size: 0.9rem;
    color: var(--verse-primary-color);
    margin-bottom: 0.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

[data-active-section="verse"] .other-field-key:hover {
    color: var(--verse-primary-light);
}

[data-active-section="verse"] .other-field-key .material-icons {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
    opacity: 0.8;
}

[data-active-section="verse"] .other-field-value {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--verse-text-primary);
    background:var(--verse-card-bg, rgba(255, 255, 255, 0.95));
    padding: 1rem;
    border-radius: 8px;
    margin-top: 0.5rem;
    transition: all 0.3s ease;
    border-left: 3px solid var(--verse-primary-light);
}

[data-theme="dark"] [data-active-section="verse"] .other-field-value {
    background: var(--verse-card-bg);
    border-left-color: var(--verse-primary-lighter);
}

[data-active-section="verse"] .other-field-value.hidden {
    display: none;
}

/* Info Button Styling */
[data-active-section="verse"] .info-button {
    background: rgba(var(--verse-primary-rgb), 0.08);
    border: none;
    color: var(--verse-primary-color);
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-active-section="verse"] .info-button:hover {
    background: rgba(var(--verse-primary-rgb), 0.15);
    transform: translateY(-1px);
}

[data-theme="dark"] [data-active-section="verse"] .info-button {
    background: rgba(var(--verse-primary-rgb), 0.15);
    color: var(--verse-primary-lighter);
}

[data-theme="dark"] [data-active-section="verse"] .info-button:hover {
    background: rgba(var(--verse-primary-rgb), 0.25);
}

[data-active-section="verse"] .info-button .material-icons {
    font-size: 1.2rem;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    [data-active-section="verse"] .other-fields {
        margin-top: 0.5rem;
        border-radius: 10px;
    }

    [data-active-section="verse"] .other-fields-header {
        padding: 0.75rem;
        font-size: 0.80rem;
    }

    [data-active-section="verse"] .other-field {
        padding: 0.75rem;
    }

    [data-active-section="verse"] .other-field-key {
        font-size: 0.85rem;
    }

    [data-active-section="verse"] .other-field-value {
        font-size: 0.9rem;
        padding: 0.75rem;
        line-height: 1.6;
    }
}

/* Animations */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-active-section="verse"] .other-field-value:not(.hidden) {
    animation: slideDown 0.3s ease-out;
}

/* No Info Message */
[data-active-section="verse"] .no-info {
    padding: 1rem;
    text-align: center;
    color: var(--verse-text-secondary);
    font-size: 0.9rem;
    font-style: italic;
}

/* Header Styles */
/* Responsive Styles */
@media (max-width: 768px) {
    [data-active-section="verse"] .header {
        padding: 1rem;
        /* Adjust padding for mobile */
    }

    [data-active-section="verse"] .header-title {
        font-size: 1.25rem;
        /* Adjust font size for mobile */
    }

}

[data-active-section="verse"] .header {
    padding: 1rem 2rem;
    /* Padding for the header */
    background-color: var(--verse-surface);
    /* Dark green background */
    display: flex;
    /* Use flexbox for layout */
    justify-content: space-between;
    /* Space between left and right sections */
    align-items: center;
    /* Center items vertically */
    position: sticky;
    /* Sticky positioning */
    top: 0;
    /* Stick to the top */
    z-index: 100;
    /* Ensure it stays above other content */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Shadow for depth */
    border-bottom: 2px solid #4db6ac;
    /* Darker green border */
    width: 100%;
    /* Ensure it takes full width */
}

[data-active-section="verse"] .header-content {
    display: flex;
    /* Ensure header content is also flex */
    justify-content: space-between;
    /* Space between left and right sections */
    align-items: center;
    /* Center items vertically */
    width: 100%;
    /* Ensure it takes full width */
}

[data-active-section="verse"] .header-left {
    display: flex;
    /* Ensure left section is also flex */
    align-items: center;
    /* Center items vertically */
}

[data-active-section="verse"] .header-right {
    display: flex;
    /* Ensure right section is also flex */
    align-items: center;
    /* Center items vertically */
    gap: 1rem;
    /* Space between items */
}

[data-active-section="verse"] .user-info {
    display: flex;
    align-items: center;
    gap: 1rem;

}

[data-active-section="verse"] .header-title {
    font-size: 1.5rem;
    /* Font size for the title */
    font-weight: bold;
    /* Bold text */
    color: #004d40;
    /* Dark green text color */
}

[data-active-section="verse"] .user-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

[data-active-section="verse"] .user-name {
    color: var(--verse-text-color);
    font-size: 1rem;
}





[data-active-section="verse"] .dropdown {
    position: relative;
    /* Position for dropdown */
}

[data-active-section="verse"] .dropdown-toggle {
    background: none;
    /* No background */
    border: none;
    /* No border */
    cursor: pointer;
    /* Pointer cursor */
}



[data-active-section="verse"] .dropdown-item {
    padding: 0.5rem 1rem;
    /* Padding for dropdown items */
    color: #004d40;
    /* Dark green text color */
    text-decoration: none;
    /* No underline */
    display: block;
    /* Block display */
}

[data-active-section="verse"] .dropdown-item:hover {
    background: #4db6ac;
    /* Darker green background on hover */
    color: white;
    /* White text on hover */
}

[data-active-section="verse"] .header-logo {
    height: 32px;
    /* Adjust the height as needed */
    width: auto;
    /* Maintain aspect ratio */
    margin: 0;
    /* Remove any default margin */
    display: flex;
    /* Use flexbox for alignment */
    align-items: center;
    /* Center vertically */
}

/* Add styles for the source span in the verse card */
[data-active-section="verse"] .source-word {
    color: var(--verse-text-secondary);
    /* Apply secondary color */
    font-size: 0.8rem;
    /* Decrease font size by 1 rem */
}

/* Remove or replace this comment */
[data-active-section="verse"] .source-title {
    color: var(--verse-text-secondary);
    /* Use secondary color for the link */
    font-size: 0.8rem;
    /* Decrease font size by 1 rem */
}

/* Remove the invalid comment below */

[data-active-section="verse"] .language-selection {
    margin-right: 1rem;
}

[data-active-section="verse"] .language-select {
    padding: 0.5rem;
    border: 1px solid var(--verse-border-color);
    border-radius: 4px;
    background-color: var(--verse-surface);
    color: var(--verse-primary-lighter);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

[data-active-section="verse"] .language-select:hover {
    border-color: var(--verse-primary-color);
}

[data-active-section="verse"] .language-select:focus {
    outline: none;
    border-color: var(--verse-primary-color);
    box-shadow: 0 0 0 2px rgba(var(--verse-primary-rgb), 0.2);
}

/* Dark mode adjustments */
[data-theme="dark"] [data-active-section="verse"] .language-select {
    background-color: var(--verse-surface);
    color: var(--verse-text-primary);
}

[data-active-section="verse"] .dropdown-item .language-selection {
    margin: 0;
    width: 100%;
    position: relative;
}

[data-active-section="verse"] .dropdown-item .language-select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--verse-border-color);
    border-radius: 4px;
    background-color: var(--verse-surface);
    color: #134e4a;
    cursor: pointer;
    font-size: 0.9rem;
}

[data-active-section="verse"] .dropdown-item .language-select:hover {
    background-color: var(--verse-hover-color);
}


/* Add a material icon for language */
[data-active-section="verse"] .dropdown-item .language-selection::before {
    content: "language";
    font-family: 'Material Icons';
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--verse-text-secondary);
}

/* Skeleton Loading Styles */
[data-active-section="verse"] .verse-card.skeleton {
    background: var(--verse-surface);
    border: 1px solid var(--verse-border-color);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    animation: pulse 1.5s infinite;
}

[data-active-section="verse"] .skeleton-badge {
    width: 60px;
    height: 24px;
    background: var(--verse-skeleton-color);
    border-radius: 12px;
    margin-bottom: 1rem;
}

[data-active-section="verse"] .skeleton-text {
    margin-bottom: 1rem;
}

[data-active-section="verse"] .skeleton-line {
    height: 16px;
    background: var(--verse-skeleton-color);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

[data-active-section="verse"] .skeleton-line:last-child {
    width: 80%;
}

[data-active-section="verse"] .skeleton-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[data-active-section="verse"] .skeleton-key {
    width: 120px;
    height: 20px;
    background: var(--verse-skeleton-color);
    border-radius: 4px;
}

[data-active-section="verse"] .skeleton-actions {
    width: 100px;
    height: 20px;
    background: var(--verse-skeleton-color);
    border-radius: 4px;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* Add smooth transition for font changes */
[data-active-section="verse"] .verse-text {

    font-display: swap;
    opacity: 1 !important;
}

/* Add font loading classes */
[data-active-section="verse"] .fonts-loaded .verse-text {
    opacity: 1;
}




/* Mobile optimizations */
@media (max-width: 768px) {

    [data-active-section="verse"] .verse-text[data-script="kannada"],
    [data-active-section="verse"] .verse-text[data-script="telugu"] {
        font-size: 1.25rem;
        line-height: 2;
    }
}

/* Show text only when fonts are loaded */
[data-active-section="verse"] .fonts-loaded .verse-text[data-script="kannada"],
[data-active-section="verse"] .fonts-loaded .verse-text[data-script="telugu"] {
    visibility: visible;
    font-size: 1.4rem;
    line-height: 2.2;
    letter-spacing: 0.01em;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}



/* Ensure font loading */
/* @font-face {
    font-family: 'Noto Sans Kannada';
    src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+Kannada:wght@400;500;600&display=swap') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
    unicode-range: U+0C80-0CFF; /* Kannada Unicode Range */


/* @font-face {
    font-family: 'Noto Sans Telugu';
    src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+Telugu:wght@400;500;600&display=swap') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
    unicode-range: U+0C00-0C7F; /* Telugu Unicode Range */
*/ */
/* @font-face {
    font-family: 'Kedage';
    src: url('fonts/Kedage.woff2') format('woff2'),
         url('fonts/Kedage.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Mallige';
    src: url('fonts/Mallige.woff2') format('woff2'),
         url('fonts/Mallige.woff') format('woff');
    font-display: swap;
} */

/* @font-face {
    font-family: 'NotoSansKannada';
    src: url('fonts/NotoSansKannada-Regular.woff2') format('woff2'),
         url('fonts/NotoSansKannada-Regular.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'NotoSerifKannada';
    src: url('fonts/NotoSerifKannada-Regular.woff2') format('woff2'),
         url('fonts/NotoSerifKannada-Regular.woff') format('woff');
    font-display: swap;
} */

/* Add styles for auth and limit messages */
[data-active-section="verse"] .auth-message,
[data-active-section="verse"] .limit-message {
    text-align: center;
    padding: 2rem;
    background: var(--verse-surface);
    border-radius: 12px;
    border: 1px solid var(--verse-border-color);
    margin: 2rem auto;
    max-width: 500px;
}

[data-active-section="verse"] .auth-message h3,
[data-active-section="verse"] .limit-message h3 {
    color: var(--verse-primary-color);
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

[data-active-section="verse"] .auth-message p,
[data-active-section="verse"] .limit-message p {
    color: var(--verse-text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}



/* Dark theme adjustments */
[data-theme="dark"] [data-active-section="verse"] .auth-message,
[data-theme="dark"] [data-active-section="verse"] .limit-message {
    background: var(--verse-surface);
    border-color: var(--verse-border-color);
}

/* History Modal Styles */
[data-active-section="verse"] .history-modal-verse {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

[data-active-section="verse"] .history-container {
    background: var(--verse-surface);
    border-radius: 16px;
    box-shadow: var(--verse-card-shadow);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

[data-active-section="verse"] .history-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--verse-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[data-active-section="verse"] .history-title {
    font-size: 1.25rem;
    color: var(--verse-text-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[data-active-section="verse"] .history-title .material-icons {
    color: var(--verse-primary-color);
}

[data-active-section="verse"] .history-content {
    padding: 1rem;
    overflow-y: auto;
    max-height: calc(80vh - 80px);
}

[data-active-section="verse"] .history-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[data-active-section="verse"] .history-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(var(--verse-primary-rgb), 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

[data-active-section="verse"] .history-item:hover {
    background: rgba(var(--verse-primary-rgb), 0.1);
    transform: translateX(4px);
}

[data-active-section="verse"] .history-item .material-icons {
    color: var(--verse-text-secondary);
    font-size: 1.25rem;
}

[data-active-section="verse"] .history-text {
    color: var(--verse-text-primary);
    font-size: 0.95rem;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-active-section="verse"] .close-button {
    background: none;
    border: none;
    color: var(--verse-text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

[data-active-section="verse"] .close-button:hover {
    background: rgba(var(--verse-primary-rgb), 0.1);
    color: var(--verse-text-primary);
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    [data-active-section="verse"] .history-container {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    [data-active-section="verse"] .history-content {
        max-height: calc(100vh - 80px);
    }

    [data-active-section="verse"] .history-item {
        padding: 1rem;
    }
}

/* Dropdown Menu Styles */
[data-active-section="verse"] .dropdown {
    position: relative;
}


[data-active-section="verse"] .user-avatar:hover {
    background-color: rgba(var(--verse-primary-rgb), 0.1);
}

[data-active-section="verse"] .user-avatar .material-icons {
    font-size: 1.75rem;

}

[data-active-section="verse"] .dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--verse-surface);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--verse-border-color);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    padding: 0.5rem;
    z-index: 1000;
}

[data-active-section="verse"] .dropdown:hover .dropdown-menu,
[data-active-section="verse"] .dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

[data-active-section="verse"] .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--verse-text-primary);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

[data-active-section="verse"] .dropdown-item:hover {
    background: rgba(var(--verse-primary-rgb), 0.1);
}

[data-active-section="verse"] .dropdown-item .material-icons {
    font-size: 1.25rem;
    color: var(--verse-text-secondary);
}

[data-active-section="verse"] .dropdown-item span:not(.material-icons) {
    font-weight: 500;
}

/* Language container specific styles */
[data-active-section="verse"] .language-container {
    border-top: 1px solid var(--verse-border-color);
    border-bottom: 1px solid var(--verse-border-color);
    margin: 0.5rem 0;
    padding: 0.75rem 1rem;
}

[data-active-section="verse"] .language-select {
    background: none;
    border: none;
    color: var(--verse-text-primary);
    font-size: 0.95rem;
    width: 100%;
    cursor: pointer;
    padding: 0.25rem 0;
    font-weight: 500;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    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 0 center;
    background-size: 1.25em;
    padding-right: 1.5em;
}

[data-active-section="verse"] .language-select:focus {
    color: var(--verse-primary-color);
}

[data-active-section="verse"] .language-select option {
    background: var(--verse-surface);
    color: var(--verse-text-primary);
    padding: 0.75rem;
}

/* Dark mode adjustments */
[data-theme="dark"] [data-active-section="verse"] .language-select {
    color: #f0fdfa;
    /* Light shade for better contrast in dark mode */
    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='%23f0fdfa' 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");
}

[data-theme="dark"] [data-active-section="verse"] .language-select option {
    background: var(--verse-surface);
    color: #f0fdfa;
}

[data-theme="dark"] [data-active-section="verse"] .language-select:focus {
    color: #f0fdfa;
}

[data-active-section="verse"] .no-verses {
    text-align: center;
    padding: 2rem;
    color: var(--verse-text-secondary);
    font-size: 0.95rem;
}

/* Add these styles for bookmarks modal while keeping all existing CSS */
[data-active-section="verse"] .bookmarks-modal-verse {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

[data-active-section="verse"] .bookmarks-modal-verse .modal-container {
    background: var(--verse-surface);
    border-radius: 16px;
    box-shadow: var(--verse-card-shadow);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

[data-active-section="verse"] .bookmarks-modal-verse .modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--verse-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[data-active-section="verse"] .bookmarks-modal-verse .modal-title {
    font-size: 1.25rem;
    color: var(--verse-text-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[data-active-section="verse"] .bookmarks-modal-verse .modal-title .material-icons {
    color: var(--verse-primary-color);
}

[data-active-section="verse"] .bookmarks-modal-verse .modal-content {
    padding: 1rem;
    overflow-y: auto;
    max-height: calc(90vh - 5rem);
}

/* Make sure verse cards in modal look exactly like search results */
[data-active-section="verse"] .bookmarks-modal-verse .verse-result {
    margin-bottom: 1rem;
}

[data-active-section="verse"] .bookmarks-modal-verse .verse-result:last-child {
    margin-bottom: 0;
}

/* Fade out animation for removing bookmarks */
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-20px);
    }
}

/* Mobile optimizations for bookmarks modal */
@media (max-width: 768px) {
    [data-active-section="verse"] .bookmarks-modal-verse .modal-container {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    [data-active-section="verse"] .bookmarks-modal-verse .modal-content {
        max-height: calc(100vh - 4rem);
    }
}

/* Verse result styles */
[data-active-section="verse"] .verse-result {
    background: var(--verse-surface);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--verse-card-shadow);
    border: 1px solid var(--verse-border-color);
    transition: all 0.2s ease;
}

[data-active-section="verse"] .verse-result:hover {
    transform: translateY(-2px);
    box-shadow: var(--verse-card-shadow-hover);
}


[data-active-section="verse"] .verse-result .verse-text {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: var(--verse-text-primary);
}

[data-active-section="verse"] .verse-result .verse-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[data-active-section="verse"] .verse-result .verse-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[data-active-section="verse"] .verse-result .verse-actions {
    display: flex;
    gap: 0.5rem;
}

[data-active-section="verse"] .verse-result .icon-btn {
    background: none;
    border: none;
    color: var(--verse-text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
}

[data-active-section="verse"] .verse-result .icon-btn:hover {
    background: rgba(var(--verse-primary-rgb), 0.1);
    color: var(--verse-primary-color);
}

[data-active-section="verse"] .verse-result .icon-btn.active {
    color: var(--verse-primary-color);
}

/* Verse modal styles - improved version */
[data-active-section="verse"] .verse-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: flex-start;
    /* Changed from center for better mobile UX */
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(8px);
    padding: 0;
    /* Remove padding for full-screen mobile */
}

[data-active-section="verse"] .verse-modal .verse-container {
    background: var(--verse-surface);
    border-radius: 16px;
    box-shadow: var(--verse-card-shadow);
    width: 90%;
    max-width: 800px;
    height: 90vh;
    /* Fixed height for better mobile handling */
    margin: 2vh auto;
    /* Center vertically with margin */
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
    border: 1px solid var(--verse-border-color);
}

[data-active-section="verse"] .verse-modal .verse-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--verse-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(var(--verse-primary-rgb), 0.05);
    border-radius: 16px 16px 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

[data-active-section="verse"] .verse-modal .verse-title {
    font-size: 1.1rem;
    color: var(--verse-text-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[data-active-section="verse"] .verse-modal .verse-content {
    padding: 0.75rem;
    overflow-y: auto;
    flex-grow: 1;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
}

/* Improved verse cards inside modal */
[data-active-section="verse"] .verse-modal .verse-result {
    background: var(--verse-card-bg);
    border: 1px solid var(--verse-card-border);
    border-radius: 12px;
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    transition: all 0.2s ease;
}

[data-active-section="verse"] .verse-modal .verse-result:hover {
    background: var(--verse-card-hover);
}

[data-active-section="verse"] .verse-modal .verse-result .verse-text {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0.75rem 0;
    color: var(--verse-text-primary);
    padding: 0.5rem;
    background: rgba(var(--verse-primary-rgb), 0.03);
    border-radius: 6px;
}

[data-active-section="verse"] .verse-modal .verse-result .verse-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--verse-border-color);
}

/* Mobile optimizations */
@media (max-width: 768px) {
    [data-active-section="verse"] .verse-modal {
        align-items: flex-end;
        /* Makes modal slide up from bottom */
    }

    [data-active-section="verse"] .verse-modal .verse-container {
        width: 100%;
        height: 95vh;
        /* Slightly shorter on mobile */
        margin: 0;
        border-radius: 16px 16px 0 0;
        border: none;
    }

    [data-active-section="verse"] .verse-modal .verse-header {
        padding: 0.75rem 1rem;
    }

    [data-active-section="verse"] .verse-modal .verse-title {
        font-size: 1rem;
    }

    [data-active-section="verse"] .verse-modal .verse-content {
        padding: 0.75rem;
    }

    [data-active-section="verse"] .verse-modal .verse-result {
        background: var(--verse-card-bg);
        border: 1px solid var(--verse-card-border);
        border-radius: 12px;
        margin-bottom: 0.5rem;
        padding: 0.75rem;
        transition: all 0.2s ease;
    }

    [data-active-section="verse"] .verse-modal .verse-result:hover {
        background: var(--verse-card-hover);
    }

    [data-active-section="verse"] .verse-modal .verse-result .verse-text {
        font-size: 0.95rem;
        line-height: 1.5;
        padding: 0.5rem;
        margin: 0.5rem 0;
    }

    [data-active-section="verse"] .verse-modal .verse-result .verse-footer {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }

    /* Compact action buttons on mobile */
    [data-active-section="verse"] .verse-modal .verse-result .verse-actions {
        gap: 0.25rem;
    }

    [data-active-section="verse"] .verse-modal .verse-result .icon-btn {
        padding: 0.375rem;
    }

    /* Better empty state on mobile */
    [data-active-section="verse"] .verse-modal .no-verses {
        padding: 2rem 1rem;
    }
}

/* Empty state styling */
[data-active-section="verse"] .verse-modal .no-verses {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--verse-text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

[data-active-section="verse"] .verse-modal .no-verses .material-icons {
    font-size: 2.5rem;
    color: var(--verse-text-secondary);
    opacity: 0.5;
}

[data-active-section="verse"] .verse-modal .no-verses p {
    margin: 0;
    font-size: 0.95rem;
}

[data-active-section="verse"] .verse-modal .no-verses .hint {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Animation for modal */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* To this */
[data-theme="dark"] [data-active-section="verse"] .verse-modal .verse-result {
    background: rgba(6, 95, 70, 0.7);
    border-color: rgba(52, 211, 153, 0.2);
}

[data-theme="dark"] [data-active-section="verse"] .verse-modal .verse-result:hover {
    background: rgba(6, 95, 70, 0.9);
}

[data-theme="dark"] [data-active-section="verse"] .verse-modal .verse-result .verse-text {
    background: rgba(6, 95, 70, 0.3);
}


[data-active-section="verse"] .archha-logo {
    height: 40px;
    width: auto;
}

[data-active-section="verse"] .dictionary-text {
    color: var(--dict-primary-color);
    font-size: 1.5rem;
    font-weight: 600;
}

[data-active-section="verse"] .user-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

[data-active-section="verse"] .user-name {
    color: var(--verse-text-color);
    font-size: 1rem;
}

[data-active-section="verse"] .user-name span {
    font-weight: 700;
    color: var(--verse-primary-light);
}

.login-button,
.logout-button {
    padding: 0.5rem 1rem;
    border-radius: 15px;
    background:white;
    /* Changed from #3CB878 to orange */

    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.login-button img {
    width: 18px;
    height: 18px;
}

.login-button:hover,
.logout-button:hover {
    background: var(--verse-primary-light);
}




/* Mobile Styles */
@media (max-width: 768px) {


    [data-active-section="verse"] .archha-logo {
        height: 32px;
    }

    [data-active-section="verse"] .dictionary-text {
        font-size: 1.25rem;
    }

    [data-active-section="verse"] .user-name {
        font-size: 1rem;

    }

    .login-button,
   .logout-button {
        font-size: 0.813rem;
        padding: 0.5rem 0.75rem;
    }



    [data-active-section="verse"] .logout-button {
        padding: 0.5rem;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 25%;
    }

    [data-active-section="verse"] .logout-button .material-icons {
        font-size: 20px;
    }

    [data-active-section="verse"] .logout-button .button-text {
        display: none;
        /* Hide the "Logout" text on mobile */
    }

  .login-button {
        padding: 0.5rem;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 25%;
    }

    .login-button img {
        width: 20px;
        height: 20px;
    }

    .login-button span {
        display: none;
    }
}

.chat-container-verse {
    flex: 1;
    overflow-y: auto;
    /* margin-top: 80px; */
    display: flex;
    flex-direction: column;
    gap: var(--dict-spacing-md);
    margin: 0 auto;
    width: 100%;
}
@media (max-width: 768px) {
    .chat-container-verse {
        padding: var(--dict-spacing-md);
        gap: var(--dict-spacing-sm);
    }
}

[data-active-section="verse"] .limit-message {
    text-align: center;
    padding: 2rem;
    background: var(--verse-surface);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 1rem auto;
    max-width: 500px;
}

[data-active-section="verse"] .limit-message h3 {
    color: var(--verse-primary-color);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

[data-active-section="verse"] .limit-message p {
    color: var(--verse-text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

[data-active-section="verse"] .limit-message .login-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--verse-primary-color);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

[data-active-section="verse"] .limit-message .login-link:hover {
    background: var(--verse-primary-light);
    transform: translateY(-2px);
}

[data-active-section="verse"] .limit-message .material-icons {
    font-size: 1.25rem;
}

/* Navigation controls styles */
[data-active-section="verse"] .verse-navigation {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

[data-active-section="verse"] .nav-button {
    background: var(--verse-accent-light, rgba(5, 150, 105, 0.1));
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--verse-accent, #059669);
}

[data-active-section="verse"] .nav-button:hover {
    background: var(--verse-accent, #059669);
    color: white;
    transform: scale(1.05);
}

[data-active-section="verse"] .nav-button:active {
    transform: scale(0.95);
}

[data-active-section="verse"] .nav-button:focus {
    outline: 2px solid var(--verse-accent, #059669);
    outline-offset: 2px;
}

[data-active-section="verse"] .nav-button .material-icons {
    font-size: 18px;
}

[data-active-section="verse"] .nav-separator {
    width: 1px;
    height: 16px;
    background: var(--verse-border-color, rgba(5, 150, 105, 0.2));
}

[data-active-section="verse"] .material-icons.spinning {
    animation: spin 1s linear infinite;
}

/* Verse navigation slide animations */
[data-active-section="verse"] .verse-card.slide-left {
    animation: slideLeftIn 0.3s ease forwards;
}

[data-active-section="verse"] .verse-card.slide-right {
    animation: slideRightIn 0.3s ease forwards;
}

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

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

/* Mobile adjustments for navigation */
@media (max-width: 768px) {
    [data-active-section="verse"] .verse-navigation {
        margin-left: 0.25rem;
        gap: 0.15rem;
    }
    
    [data-active-section="verse"] .nav-button {
        width: 24px;
        height: 24px;
    }
    
    [data-active-section="verse"] .nav-button .material-icons {
        font-size: 16px;
    }
}

@media (max-width: 390px) {
    [data-active-section="verse"] .verse-navigation {
        margin-left: 0.15rem;
        gap: 0.1rem;
    }
    
    [data-active-section="verse"] .nav-button {
        width: 22px;
        height: 22px;
    }
    
    [data-active-section="verse"] .nav-button .material-icons {
        font-size: 14px;
    }
}

/* Add styles for source-title-wrapper to limit its width */
[data-active-section="verse"] .source-title-wrapper {
    display: inline-block;
    max-width: fit-content;
}

/* Fix source title to only take up the space it needs */
[data-active-section="verse"] .source-title {
    color: var(--verse-primary-color);
    text-decoration: underline;
    cursor: pointer;
    display: inline-block;
    margin-left: 0.5rem;
}

[data-active-section="verse"] .source-title:hover {
    color: var(--verse-primary-light);
}

/* Improve verse-actions positioning for large screens */
@media (min-width: 768px) {
    [data-active-section="verse"] .verse-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        padding: 1rem;
    }

    [data-active-section="verse"] .verse-key {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 1rem;
    }

    [data-active-section="verse"] .verse-actions {
        display: flex;
        gap: 0.5rem;
        margin-left: auto;
        justify-content: flex-end;
    }
}

/* Ensure verse navigation is properly positioned next to the actions */
[data-active-section="verse"] .verse-navigation {
    display: flex;
    align-items: center;
    margin-left: 0.5rem;
}

/* Add this at the end of the file before the last closing brace */

/* Word hyperlinks in verse text */
[data-active-section="verse"] .verse-text .word-hyperlink {
    color: var(--verse-primary-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    font-weight: 500;
    padding: 1px 2px;
    border-radius: 2px;
}

[data-active-section="verse"] .verse-text .word-hyperlink:hover {
    background-color: rgba(var(--verse-primary-rgb), 0.1);
    border-bottom-color: var(--verse-primary-color);
    text-decoration: none;
}

[data-theme="dark"] [data-active-section="verse"] .verse-text .word-hyperlink {
    color: var(--verse-primary-light);
}

[data-theme="dark"] [data-active-section="verse"] .verse-text .word-hyperlink:hover {
    background-color: rgba(var(--verse-primary-rgb), 0.2);
    border-bottom-color: var(--verse-primary-light);
}

/* Ensure hyperlinks work well in expanded verse text */
[data-active-section="verse"] .verse-text.expanded .word-hyperlink {
    display: inline;
    line-height: inherit;
}