:root {
    --body-bg: #1a1a2e;
    --text-color: #e0e0e0;
    --card-bg: #242436;
    --border-color: #3a3a5e;
    --input-bg: #1e1e30;
    --input-border: #4a4a6e;
    --focus-border: #7a7afc;
    --focus-border-shadow: rgba(122, 122, 252, 0.5);
    --primary-accent: #5a5aff;
    --primary-accent-hover: #7a7afc;
    --secondary-accent: #c0c0ff; /* Titles, active tabs, parenthesized text */
    --link-color: #9393ff;
    --link-hover-color: #c0c0ff;
    --hamburger-btn-color: #c0c0ff;
    --modal-overlay-bg: rgba(0, 0, 0, 0.6);
    --modal-content-bg: #2a2a3e;
    --modal-content-border: #4a4a6e;
    --scrollbar-track-bg: #1e1e30;
    --scrollbar-thumb-bg: #4a4a6e;
    --scrollbar-thumb-hover-bg: #5a5aff;
    --header-bg: #1a1a2e;
    --header-border: #3a3a5e;
    --footer-bg: #242436;
    --footer-border: #3a3a5e;
    --footer-text-color: #a0aec0;
    --mobile-nav-drawer-bg: #242436;
    --mobile-nav-link-border: #3a3a5e;
    --mobile-nav-link-hover-bg: #3a3a5e;
    --mobile-nav-link-active-bg: #4a4a6e;
    --danger-color: #ef4444; /* red-500 */
    --danger-hover-color: #dc2626; /* red-600 */
    --success-color: #22c55e; /* green-500 */

    /* New subtle accent colors */
    --subtle-accent: #8b5cf6; /* Tailwind violet-500 */
    --subtle-accent-hover: #7c3aed; /* Tailwind violet-600 */
    --subtle-accent-bg-hover: rgba(139, 92, 246, 0.1); /* Light violet for hover background */
    --subtle-accent-text-on-fill: white; /* Text color when subtle accent is background */

    /* Subtle pixelation effect variables */
    --pixel-dot-color-light: rgba(255, 255, 255, 0.03); /* Very faint white dots */
    --pixel-dot-color-dark: rgba(0, 0, 0, 0.02);       /* Very faint black dots */
    --pixel-dot-size: 1px; /* Size of each dot/pixel */
    --pixel-dot-spacing: 3px; /* Spacing of the grid */

    /* Explanation block tint */
    --explanation-block-tint-dark: rgba(0,0,0,0.06); /* Increased opacity */
    --explanation-block-tint-light: rgba(255,255,255,0.5); /* Light tint for dusk theme */
}

.theme-dusk {
    --body-bg: #f0f2f5;
    --text-color: #333344;
    --card-bg: #ffffff;
    --border-color: #d1d5db;
    --input-bg: #f9fafb;
    --input-border: #d1d5db;
    --focus-border: #4338ca;
    --focus-border-shadow: rgba(79, 70, 229, 0.4);
    --primary-accent: #4f46e5;
    --primary-accent-hover: #4338ca;
    --secondary-accent: #312e81;
    --link-color: #4f46e5;
    --link-hover-color: #312e81;
    --hamburger-btn-color: #312e81;
    --modal-overlay-bg: rgba(50, 50, 70, 0.5);
    --modal-content-bg: #ffffff;
    --modal-content-border: #e5e7eb;
    --scrollbar-track-bg: #e5e7eb;
    --scrollbar-thumb-bg: #9ca3af;
    --scrollbar-thumb-hover-bg: #6b7280;
    --header-bg: #ffffff;
    --header-border: #e5e7eb;
    --footer-bg: #f9fafb;
    --footer-border: #e5e7eb;
    --footer-text-color: #6b7280;
    --mobile-nav-drawer-bg: #ffffff;
    --mobile-nav-link-border: #e5e7eb;
    --mobile-nav-link-hover-bg: #f3f4f6;
    --mobile-nav-link-active-bg: #e0e7ff;
    --danger-color: #ef4444;
    --danger-hover-color: #dc2626;
    --success-color: #16a34a; /* green-600 */

    /* Subtle accent for dusk theme */
    --subtle-accent: #7c3aed; /* Tailwind violet-600 (a bit darker for light bg) */
    --subtle-accent-hover: #6d28d9; /* Tailwind violet-700 */
    --subtle-accent-bg-hover: rgba(124, 58, 237, 0.1);
    --subtle-accent-text-on-fill: white;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--body-bg);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.grimoire-font {
    font-family: 'MedievalSharp', cursive;
    color: var(--secondary-accent);
}
.modal {
    background-color: var(--modal-overlay-bg);
}
.modal-content {
    background-color: var(--modal-content-bg);
    border: 1px solid var(--modal-content-border);
    color: var(--text-color);
}
input, select, textarea {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-color);
    padding: 0.5rem 0.75rem;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--focus-border);
    box-shadow: 0 0 0 2px var(--focus-border-shadow);
}

button { border-radius: 0.375rem; }

/* General button styling, excluding specific ones */
button:not(.tab-btn):not(.close-button):not(.hamburger-btn):not(.mobile-nav-link):not(.auth-switch-link):not(.login-prompt-link):not(.theme-toggle-btn):not(.admin-delete-btn):not(#confirm-delete-cancel-btn):not(.add-spell-to-active-chapter-btn):not(.add-comment-form button[type="submit"]):not(.comment-trigger-btn):not(.add-explanation-context-comment-form button[type="submit"]):not(.reply-btn):not(.header-auth-btn):not(.footer-link) {
    background-color: var(--primary-accent);
    color: white;
    background-image: radial-gradient(circle at var(--pixel-dot-size) var(--pixel-dot-size), var(--pixel-dot-color-light) var(--pixel-dot-size), transparent 0);
    background-size: var(--pixel-dot-spacing) var(--pixel-dot-spacing);
}
button:not(.tab-btn):not(.close-button):not(.hamburger-btn):not(.mobile-nav-link):not(.auth-switch-link):not(.login-prompt-link):not(.theme-toggle-btn):not(.admin-delete-btn):not(#confirm-delete-cancel-btn):not(.add-spell-to-active-chapter-btn):not(.add-comment-form button[type="submit"]):not(.comment-trigger-btn):not(.add-explanation-context-comment-form button[type="submit"]):not(.reply-btn):not(.header-auth-btn):not(.footer-link):hover {
     background-color: var(--primary-accent-hover);
}

/* Styles for the less impactful buttons */
.add-spell-to-active-chapter-btn,
.add-comment-form button[type="submit"], /* Targets main and reply forms */
.add-explanation-context-comment-form button[type="submit"] {
    background-color: transparent;
    color: var(--subtle-accent);
    border: 1px solid var(--subtle-accent);
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.add-spell-to-active-chapter-btn:hover,
.add-comment-form button[type="submit"]:hover, /* Targets main and reply forms */
.add-explanation-context-comment-form button[type="submit"]:hover {
    background-color: var(--subtle-accent);
    color: var(--subtle-accent-text-on-fill);
    background-image: radial-gradient(circle at var(--pixel-dot-size) var(--pixel-dot-size), var(--pixel-dot-color-light) var(--pixel-dot-size), transparent 0);
    background-size: var(--pixel-dot-spacing) var(--pixel-dot-spacing);
}

/* Theme Dusk adjustments for pixelation */
.theme-dusk button:not(.tab-btn):not(.close-button):not(.hamburger-btn):not(.mobile-nav-link):not(.auth-switch-link):not(.login-prompt-link):not(.theme-toggle-btn):not(.admin-delete-btn):not(#confirm-delete-cancel-btn):not(.add-spell-to-active-chapter-btn):not(.add-comment-form button[type="submit"]):not(.comment-trigger-btn):not(.add-explanation-context-comment-form button[type="submit"]):not(.reply-btn):not(.header-auth-btn):not(.footer-link) {
    background-image: radial-gradient(circle at var(--pixel-dot-size) var(--pixel-dot-size), var(--pixel-dot-color-dark) var(--pixel-dot-size), transparent 0);
    background-size: var(--pixel-dot-spacing) var(--pixel-dot-spacing);
}
.theme-dusk .add-spell-to-active-chapter-btn:hover,
.theme-dusk .add-comment-form button[type="submit"]:hover,
.theme-dusk .add-explanation-context-comment-form button[type="submit"]:hover {
    background-image: radial-gradient(circle at var(--pixel-dot-size) var(--pixel-dot-size), var(--pixel-dot-color-dark) var(--pixel-dot-size), transparent 0);
    background-size: var(--pixel-dot-spacing) var(--pixel-dot-spacing);
}

.comment-trigger-btn { /* For "Annotations" button */
    color: var(--subtle-accent);
    background-color: transparent;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.comment-trigger-btn:hover {
    color: var(--subtle-accent-hover);
    background-color: var(--subtle-accent-bg-hover);
}
.reply-btn { /* For "↪ Reply" text links */
    background-color: transparent;
    color: var(--link-color);
    font-size: 0.75rem; /* text-xs */
    text-decoration: underline;
    padding: 0.125rem 0;
    margin-top: 0.25rem; /* Tailwind mt-1 */
    margin-bottom: 0.25rem; /* Tailwind mb-1 */
    border: none;
    cursor: pointer;
}
.reply-btn:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

.login-prompt-link, .auth-switch-link, .footer-link {
    background-color: transparent;
    text-decoration: underline;
    color: var(--link-color);
    padding: 0;
    font-size: 0.875rem;
}
.login-prompt-link:hover, .auth-switch-link:hover, .footer-link:hover {
    color: var(--link-hover-color);
}
.spell-card, .chapter-content-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}
.comment-item {
    margin-bottom: 0.75rem;
}
.comment-content {
    border-left: 2px solid var(--primary-accent);
    background-color: var(--input-bg);
    padding: 0.5rem;
    border-radius: 0.25rem;
}
.comment-replies {
    margin-left: 1.5rem;
    padding-left: 0.75rem;
    margin-top: 0.5rem;
    border-left: 1px dashed var(--border-color);
    position: relative;
}
.reply-form-container {
    margin-left: 1.5rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    padding-left: 0.75rem;
}

.tab-btn {
    padding: 0.75rem 1rem; margin-bottom: -1px; border: 1px solid transparent; border-bottom: none;
    opacity: 0.7;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
}
.tab-btn .tab-main-font {
    font-family: 'Inter', sans-serif;
    color: var(--secondary-accent);
     margin-right: 0.25rem;
}
.tab-btn .tab-secondary-font {
    font-family: 'MedievalSharp', cursive;
    color: var(--secondary-accent);
    opacity: 0.85;
    font-size: 0.9em;
}

.tab-btn:hover:not(.active-tab) {
    opacity: 1;
    border-color: var(--border-color);
    border-bottom: none;
    background-color: var(--input-bg);
}
.tab-btn.active-tab {
    border-color: var(--border-color);
    border-bottom: 2px solid var(--primary-accent);
    background-color: var(--card-bg);
    font-weight: 600;
    opacity: 1;
}
.tab-btn.active-tab .tab-main-font {
     color: var(--primary-accent);
}
.tab-btn.active-tab .tab-secondary-font {
     color: var(--primary-accent);
     opacity: 0.9;
}

.add-chapter-tab-btn {
    color: var(--primary-accent);
    opacity: 1;
}
.add-chapter-tab-btn:hover {
    color: var(--primary-accent-hover) !important;
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}
.close-button { background-color: transparent; color: var(--text-color); opacity: 0.7; }
.close-button:hover { color: #ef4444; opacity: 1; }
.hamburger-btn { color: var(--hamburger-btn-color); }

.mobile-nav-drawer {
    background-color: var(--mobile-nav-drawer-bg);
}
.mobile-nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem; color: var(--text-color); border-bottom: 1px solid var(--mobile-nav-link-border);
    background: none; text-align: left; width: 100%;
}
.mobile-nav-link .mobile-main-font {
    font-family: 'Inter', sans-serif;
    color: var(--secondary-accent);
    margin-right: 0.25rem;
}
.mobile-nav-link .mobile-secondary-font {
    font-family: 'MedievalSharp', cursive;
    color: var(--secondary-accent);
    opacity: 0.85;
    font-size: 0.9em;
}
.mobile-nav-link:hover { background-color: var(--mobile-nav-link-hover-bg); }
.mobile-nav-link.active-mobile-link { background-color: var(--mobile-nav-link-active-bg); font-weight: 600; }
.mobile-nav-link.active-mobile-link .mobile-main-font,
.mobile-nav-link.active-mobile-link .mobile-secondary-font {
    color: var(--primary-accent);
}
.add-chapter-mobile-link {
    color: var(--primary-accent) !important;
}
.add-chapter-mobile-link:hover {
    color: var(--primary-accent-hover) !important;
}

header {
    background-color: var(--header-bg);
    border-bottom-color: var(--header-border);
}
footer {
    background-color: var(--footer-bg);
    border-top-color: var(--footer-border);
    color: var(--footer-text-color);
}
#chapters-tab-bar {
    border-bottom-color: var(--border-color);
}
.comments-section { /* General comments section styling */
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem; /* py-3 */
    margin-top: 1rem; /* my-4 */
}
.grimoire-font { color: var(--secondary-accent); }
.chapter-header-title .chapter-main-font {
    font-family: 'Inter', sans-serif;
    color: var(--secondary-accent);
    margin-right: 0.3rem;
}
.chapter-header-title .chapter-secondary-font {
    font-family: 'MedievalSharp', cursive;
    color: var(--secondary-accent);
    opacity: 0.85;
    font-size: 0.9em;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track-bg); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-bg); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover-bg); }

.theme-toggle-btn {
    padding: 0.5rem; border-radius: 9999px; background-color: var(--input-bg);
    border: 1px solid var(--input-border); color: var(--text-color);
    display: flex; align-items: center; justify-content: center;
}
.theme-toggle-btn:hover { background-color: var(--border-color); }
.theme-toggle-btn svg { width: 1.25rem; height: 1.25rem; }

.emoji-link {
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: var(--link-color);
}
.emoji-link:hover {
    color: var(--link-hover-color);
}
.emoji-link .emoji-char {
    text-decoration: underline;
    text-decoration-color: var(--link-color);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s;
}
.emoji-link:hover .emoji-char {
    text-decoration-color: var(--link-hover-color);
}
.emoji-link .learn-more-text-label {
    text-decoration: none;
    transition: color 0.2s;
}

.admin-delete-btn {
    background-color: transparent;
    color: var(--danger-color);
    padding: 0.25rem 0.5rem;
    margin-left: 0.5rem;
    font-size: 0.8rem;
    border: 1px solid transparent;
}
.admin-delete-btn:hover {
    color: var(--danger-hover-color);
    background-color: rgba(239, 68, 68, 0.1);
    border-color: var(--danger-color);
}
.admin-delete-btn svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* Admin Regenerate Button Style */
.admin-regenerate-btn {
    background-color: transparent;
    color: var(--subtle-accent);
    padding: 0.25rem;
    margin-left: 0.25rem;
    border: 1px solid transparent;
    border-radius: 9999px; /* circle */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}
.admin-regenerate-btn:hover {
    color: var(--subtle-accent-hover);
    background-color: var(--subtle-accent-bg-hover);
    transform: rotate(90deg);
}
.admin-regenerate-btn svg {
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
}

/* Header Auth Button Style */
.header-auth-btn {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 9999px; /* Creates a pill shape */
    padding: 0.25rem 0.75rem; /* Vertical and horizontal padding */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* space between icon and text */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500;
    color: var(--text-color);
    transition: background-color 0.2s;
}
.header-auth-btn:hover {
    background-color: var(--border-color);
}
.auth-feather-icon {
    width: 1.125rem; /* w-4.5 */
    height: 1.125rem; /* h-4.5 */
}
.feather-login { color: var(--success-color); }
.feather-logout { color: var(--danger-color); }


/* Explanation Modal Styles */
.explanation-modal-content {
    max-height: 85vh;
}
.explanation-block { /* New style for cohesive blocks */
    border: 1px solid var(--border-color);
    border-radius: 0.5rem; /* Tailwind rounded-lg */
    padding: 1rem; /* Tailwind p-4 */
    background-color: var(--explanation-block-tint-dark);
    margin-bottom: 1.5rem; /* Space between blocks */
}
.theme-dusk .explanation-block {
    background-color: var(--explanation-block-tint-light);
}

.explanation-level {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}
.explanation-level:not(:last-child) { /* Separator between Eaf, Betwixt, Earfoþe */
     border-bottom: 1px solid var(--border-color);
     margin-bottom: 1rem;
     padding-bottom: 1rem;
}
.explanation-level-title { /* For "Simple Explanation" etc. */
    font-family: 'Inter', sans-serif;
    font-weight: 600; /* semibold */
    font-size: 1rem; /* text-base */
    color: var(--secondary-accent);
    margin-bottom: 0.25rem;
}
.explanation-text {
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap;
}
.loading-spinner {
    border: 3px solid var(--input-border);
    border-top: 3px solid var(--primary-accent);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
    margin: 1rem auto;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.explanation-comments-container { /* For the overall "Discussion on AI Explanations" section */
    margin-top: 1rem;
    padding-top: 1rem;
    /* border-top removed, handled by explanation-block or previous explanation-level */
}
.explanation-comments-container > h4 { /* "Discussion on AI Explanations" title */
    font-family: 'Inter', sans-serif; /* Normal font */
    font-weight: 600; /* semibold */
}

.explanation-subsection-comments { /* Container for comments under EACH specific section (e.g. under a link) */
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-color);
    opacity: 0.9;
}
.explanation-subsection-comments h5 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--secondary-accent);
    margin-bottom: 0.5rem;
}

.comments-list {
    max-height: 60vh;
    overflow-y: auto;
}
.resource-links-container { /* This is now an .explanation-block */
    /* margin-top, padding-top, border-top removed, handled by .explanation-block */
}
.resource-links-container > div { /* Each resource link + its comment section */
    margin-bottom: 0.5rem;
}
.resource-links-container > div:not(:last-child) { /* Separator between resource items */
     border-bottom: 1px solid var(--border-color);
     padding-bottom: 0.75rem;
     margin-bottom: 0.75rem;
}
.resource-link {
    display: block;
    padding: 0.5rem 0;
    color: var(--link-color);
    text-decoration: underline;
    font-size: 0.875rem;
}
.resource-link:hover {
    color: var(--link-hover-color);
}
.emoji-link-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
}
.emoji-hint-bubble {
    position: absolute;
    left: 130%;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 2px solid var(--border-color);
    padding: 0.4rem 0.8rem;
    border-radius: 10px 10px 10px 0;
    font-size: 0.7rem;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.25);
}
.emoji-hint-bubble.show-hint {
    opacity: 1;
    visibility: visible;
}
.emoji-hint-bubble::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent var(--card-bg) transparent transparent;
}
.theme-dusk .emoji-hint-bubble::before {
    border-color: transparent var(--card-bg) transparent transparent;
}

.legal-content {
    font-size: 0.875rem;
    line-height: 1.6;
}
.legal-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--secondary-accent);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
 .legal-content p, .legal-content ul {
    margin-bottom: 0.75rem;
}
.legal-content ul {
    list-style-position: inside;
    list-style-type: disc;
}
.legal-content li {
    margin-left: 1rem;
}

/* Subtle Copy Icon Styles */
.copy-prompt-icon {
    display: inline-block;
    margin-left: 0.25rem;
    color: var(--link-color);
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    vertical-align: middle;
}

.copy-prompt-icon:hover {
    color: var(--link-hover-color);
    transform: scale(1.05);
}

.copy-prompt-icon svg {
    width: 1rem;
    height: 1rem;
    display: inline-block;
    vertical-align: middle;
}

.copy-prompt-icon .icon-copy { display: inline; }
.copy-prompt-icon .icon-copied { display: none; }
.copy-prompt-icon.copied .icon-copy { display: none; }
.copy-prompt-icon.copied .icon-copied { display: inline; color: var(--success-color); }

.copy-text-label, .learn-more-text-label {
    font-family: 'Inter', sans-serif;
    vertical-align: middle;
    opacity: 0.8;
    transition: color 0.2s;
}

.copy-text-label {
    font-size: 0.7rem;
    color: var(--link-color);
    margin-left: 0.15rem;
}

.learn-more-text-label {
    font-size: 0.7rem; /* Make font size the same as copy text */
    color: var(--link-color);
    margin-left: 0.15rem;
    text-decoration: none; /* Explicitly remove underline */
}

.copy-prompt-icon:hover .copy-text-label {
    color: var(--link-hover-color);
}