/* --- Global & Layout --- */
/* Make sure footer sticks to bottom on short pages */
html {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
main {
    flex: 1 0 auto;
}
footer {
    flex-shrink: 0;
}

/* --- Spinners --- */
/* Smaller spinner for buttons (from index.html) */
.button-spinner { 
    border: 4px solid rgba(0, 0, 0, 0.1); 
    width: 24px; 
    height: 24px; 
    border-radius: 50%; 
    border-left-color: #1165d7; 
    animation: spin 1s ease infinite; 
}
/* Larger spinner for modal loading (from bible-study.html) */
.modal-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #1165d7;
    animation: spin 1s ease infinite;
}
@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

/* --- Dropdown (Used on all pages) --- */
.dropdown { position: relative; display: inline-block; }
.dropdown-content { 
    display: none; 
    position: absolute; 
    right: 0; 
    background-color: #ffffff; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1); 
    z-index: 100; 
    border-radius: 0.5rem; 
    border: 1px solid #e5e7eb; 
    margin-top: 0.5rem; 
    overflow: hidden; 
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; 
    opacity: 0; 
    transform: translateY(-10px); 
}
.dropdown-content.show { display: block; opacity: 1; transform: translateY(0); }
.dropdown-content a, .dropdown-content button { 
    color: #374151; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
    width: 100%; 
    font-size: 0.875rem; 
    line-height: 1.25rem; 
}
.dropdown-content a:hover, .dropdown-content button:hover { background-color: #f9fafb; }
.dropdown-divider { height: 1px; margin: 0.5rem 0; overflow: hidden; background-color: #e5e7eb; }

/* --- Modals (Used on all pages) --- */
.modal-backdrop { transition: opacity 0.3s ease-in-out; }
.modal-content { transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; }
.hidden { display: none; }

/* --- AI Chat Page (index.html) --- */
.chat-message p { margin-bottom: 1rem; }
.chat-message blockquote { 
    background-color: #f1f5f9; 
    color: #475569; 
    padding: 0.75rem; 
    border-radius: 0.375rem; 
    border-left-width: 4px; 
    border-left-color: #cbd5e1; 
    margin-top: 1rem; 
    margin-bottom: 1rem; 
}
.chat-message p:last-child { margin-bottom: 0; }
.chat-message.user { background-color: #eef2ff; color: #3730a3; }
.chat-message.model { background-color: #f8fafc; }

.typing-indicator span { 
    height: 8px; 
    width: 8px; 
    margin: 0 2px; 
    background-color: #94a3b8; 
    border-radius: 50%; 
    display: inline-block; 
    animation: bounce 1.4s infinite ease-in-out both; 
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; } 
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 
    0%, 80%, 100% { transform: scale(0); } 
    40% { transform: scale(1.0); } 
}

.options-panel { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.3s ease-in-out, padding-bottom 0.3s ease-in-out, opacity 0.3s ease-in-out; 
    opacity: 0; 
}
.options-panel.show { max-height: 300px; opacity: 1; padding-bottom: 1rem; }

.example-prompt-btn { 
    background-color: #f1f5f9; 
    color: #475569; 
    padding: 8px 16px; 
    border-radius: 9999px; 
    font-weight: 500; 
    font-size: 0.875rem; 
    transition: all 0.2s; 
    border: 1px solid #e2e8f0;
} 
.example-prompt-btn:hover { 
    background-color: #e2e8f0; 
    border-color: #cbd5e1; 
    color: #1e293b; 
}

/* --- Bible Study Page (bible-study.html) --- */
.jesus-words { background-color: #fee2e2; border-radius: 3px; padding: 1px 2px; }

#toast { 
    position: fixed; 
    bottom: -100px; 
    left: 50%; 
    transform: translateX(-50%); 
    transition: bottom 0.5s ease-in-out; 
    z-index: 100; 
}
#toast.show { bottom: 30px; }
mark { background-color: #fef08a; border-radius: 3px; color: inherit; }

/* Verse Action Icons */
.verse-icon {
    cursor: pointer; 
    width: 20px; 
    height: 20px; 
    display: inline-block;
    vertical-align: middle; 
    margin-left: 8px; 
    transition: transform 0.2s ease-in-out;
}
.verse-icon:hover { transform: scale(1.2); }
.verse-icon .icon-outline { display: block; }
.verse-icon .icon-filled { display: none; }
.verse-icon.active .icon-outline { display: none; }
.verse-icon.active .icon-filled { display: block; }

.bookmark-icon .icon-outline { color: #94a3b8; }
.bookmark-icon .icon-filled { color: #facc15; }
.note-icon .icon-outline { color: #94a3b8; }
.note-icon .icon-filled { color: #60a5fa; }
.highlight-icon .icon-outline { color: #94a3b8; }
.highlight-icon.active .icon-filled { display: block; }

/* Highlight Palette */
.color-palette {
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 4px;
    background-color: white;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 110;
    transform: translate(-50%, -110%);
    left: 50%;
}
.color-palette.show { display: flex; }
.color-dot {
    width: 24px; 
    height: 24px; 
    border-radius: 50%; 
    cursor: pointer;
    border: 2px solid white; 
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

/* Note Editor */
.note-editor {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, margin-top 0.4s ease-in-out, opacity 0.4s ease-in-out;
    opacity: 0;
}
.note-editor.show {
    max-height: 300px;
    margin-top: 1rem;
    opacity: 1;
}

/* --- Static Content Pages (about, privacy, terms) --- */
/* Basic styling for long-form text content */
.static-content-container {
    background-color: #ffffff;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    overflow: hidden;
}
.static-content {
    padding: 2rem; /* p-8 */
}
.static-content h1 {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    color: #1e293b; /* text-slate-900 */
    letter-spacing: -0.025em; /* tracking-tight */
    margin-bottom: 1rem; /* mb-4 */
}
.static-content h2 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 600; /* font-semibold */
    color: #1e293b; /* text-slate-900 */
    margin-top: 2rem; /* mt-8 */
    margin-bottom: 1rem; /* mb-4 */
    border-bottom: 1px solid #e2e8f0; /* border-b border-slate-200 */
    padding-bottom: 0.5rem; /* pb-2 */
}
.static-content h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #334155; /* text-slate-800 */
    margin-top: 1.5rem; /* mt-6 */
    margin-bottom: 0.5rem; /* mb-2 */
}
.static-content p {
    font-size: 1rem; /* text-base */
    line-height: 1.75; /* leading-relaxed */
    color: #475569; /* text-slate-600 */
    margin-bottom: 1.25rem; /* mb-5 */
}
.static-content ul, .static-content ol {
    list-style-position: inside;
    margin-left: 0.5rem; /* ml-2 */
    margin-bottom: 1.25rem; /* mb-5 */
    color: #475569; /* text-slate-600 */
}
.static-content li {
    margin-bottom: 0.5rem; /* mb-2 */
    line-height: 1.75; /* leading-relaxed */
}
.static-content ul {
    list-style-type: disc;
}
.static-content ol {
    list-style-type: decimal;
}
.static-content a {
    color: #1a7ff6; /* text-brand-blue-600 */
    text-decoration: underline;
}
.static-content a:hover {
    color: #1165d7; /* text-brand-blue-700 */
}
.static-content strong, .static-content b {
    font-weight: 600; /* font-semibold */
    color: #334155; /* text-slate-800 */
}

input:focus, textarea:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
}

.sources-link {
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2563eb; /* Tailwind blue-600 */
  cursor: pointer;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}
.sources-link:hover {
  color: #1d4ed8; /* blue-700 */
  text-decoration: underline;
}