@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Base setup for a stable viewport */
html {
    height: 100%;
    overflow: hidden; /* Prevent scrolling on the html element */
}

body { 
    font-family: 'Inter', sans-serif; 
    height: 100%;
    overflow: hidden; /* Prevent scrolling on the body element */
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* FIX: This wrapper is the new foundation for the layout */
#app-wrapper {
    position: fixed; /* Lock the wrapper to the visual viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Use flexbox for the main layout */
    flex-direction: column;
}

/* app-container now lives inside the fixed wrapper */
#app-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-grow: 1; /* Allow it to grow and fill the wrapper */
    overflow: hidden; /* Hide any overflow within the container */
}

/* Header and Footer will not shrink */
header, footer {
    flex-shrink: 0;
}

/* Chat container will take up all available space and be scrollable */
main#chat-container {
    flex-grow: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* --- Scrollbar and Animation Styles (Unchanged) --- */
.chat-container::-webkit-scrollbar, .sidebar-content::-webkit-scrollbar, .modal-content::-webkit-scrollbar, .settings-content::-webkit-scrollbar { width: 4px; }
.chat-container::-webkit-scrollbar-thumb, .sidebar-content::-webkit-scrollbar-thumb, .modal-content::-webkit-scrollbar-thumb, .settings-content::-webkit-scrollbar-thumb { background-color: #4a5568; border-radius: 20px; }
.fade-in { animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.prose img { border-radius: 0.5rem; }
.blinking-cursor { font-weight: bold; animation: blink 1s step-end infinite; }
@keyframes blink { from, to { color: transparent; } 50% { color: #e5e7eb; } }
.prose pre { white-space: pre-wrap; word-break: break-all; overflow-x: auto; }
.prose code { word-break: break-all; }
.typing-indicator { display: flex; align-items: center; }
.typing-indicator span { height: 8px; width: 8px; background-color: #9ca3af; border-radius: 50%; display: inline-block; margin: 0 2px; animation: typing-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 typing-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }
.message-actions-menu { transition: opacity 0.2s, transform 0.2s; }

/* --- Content and Component Styles (Unchanged) --- */
.prose { line-height: 1.7; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { margin-top: 1.5em; margin-bottom: 0.6em; }
.prose p { margin-top: 0; margin-bottom: 1.25em; }
.prose ul, .prose ol { padding-left: 1.5em; margin-bottom: 1.25em; }
.prose li { margin-top: 0.5em; }
.prose pre { background-color: #1f2937 !important; border: 1px solid #374151; padding: 1.25em; padding-top: 3em; border-radius: 0.75rem; position: relative; }
.prose pre code { font-family: 'Courier New', Courier, monospace; font-size: 0.9rem; color: #d1d5db; }
.prose blockquote { border-left: 3px solid #4b5563; padding-left: 1em; color: #d1d5db; font-style: italic; }
.prose a { color: #a78bfa; text-decoration: none; font-weight: 500; transition: color 0.2s; }
.prose a:hover { color: #c4b5fd; text-decoration: underline; }
.prose code:not(pre *) { background-color: #374151; padding: 0.2em 0.4em; border-radius: 0.25rem; font-weight: 500; color: #e5e7eb; }

.audio-seek-bar { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; background: #4a5568; outline: none; border-radius: 5px; cursor: pointer; }
.audio-seek-bar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: #c4b5fd; border-radius: 50%; cursor: pointer; transition: background 0.2s; }
.audio-seek-bar::-moz-range-thumb { width: 14px; height: 14px; background: #c4b5fd; border-radius: 50%; cursor: pointer; transition: background 0.2s; }
.audio-seek-bar:hover::-webkit-slider-thumb { background: #a78bfa; }
.audio-seek-bar:hover::-moz-range-thumb { background: #a78bfa; }

.settings-nav-btn { background-color: #4b5563; color: white; font-weight: bold; padding: 0.75rem 1rem; border-radius: 0.5rem; transition: background-color 0.2s; width: 100%; }
.settings-nav-btn:hover { background-color: #6b7280; }
.settings-nav-btn.active-settings-btn { background-color: #7c3aed; color: white; }