/* --- Mobile Responsiveness Fixes --- */
html, body { 
    height: 100dvh; 
    min-height: -webkit-fill-available;
    overflow: hidden; 
    margin: 0; 
    padding: 0;
}
body { background: #0a0a0b; font-family: 'Inter', sans-serif; }
.h-screen { height: 100dvh !important; }
.min-h-screen { min-height: 100dvh !important; }
/* ---------------------------------- */

html { scroll-behavior: smooth; }

.glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); }
.glass-dark { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); }
.glass-input { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); color: white; }
.glass-input:focus { outline: none; border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); }
.btn-primary { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); color: white; transition: all 0.3s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(139, 92, 246, 0.3); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary { background: rgba(255, 255, 255, 0.1); color: white; transition: all 0.3s ease; }
.btn-secondary:hover { background: rgba(255, 255, 255, 0.15); }
.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
#chatContainer { scroll-behavior: smooth; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fadeIn { animation: fadeIn 0.5s ease-out forwards; }
.typing-dot { width: 8px; height: 8px; background: #8b5cf6; border-radius: 50%; animation: bounce 0.6s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.1s; }
.typing-dot:nth-child(3) { animation-delay: 0.2s; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.message-user { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); border-radius: 20px 20px 5px 20px; }
.message-assistant { background: rgba(255, 255, 255, 0.08); border-radius: 20px 20px 20px 5px; }
.sidebar-item:hover { background: rgba(255, 255, 255, 0.08); }
.sidebar-item.active { background: rgba(139, 92, 246, 0.2); }

.prose { color: #d1d5db; line-height: 1.6; word-break: break-word; } .prose p { margin-bottom: 1em; } .prose ul, .prose ol { margin-left: 1.5em; margin-bottom: 1em; } .prose li { margin-bottom: 0.25em; } .prose a { color: #8b5cf6; text-decoration: underline; } .prose strong { color: #f9fafb; font-weight: 600; }
.prose code:not(pre > code) { background: rgba(139, 92, 246, 0.2); padding: 2px 6px; border-radius: 4px; font-family: 'Menlo', 'Monaco', monospace; font-size: 0.9em; color: #f3f4f6; }
.code-block-wrapper { position: relative; margin: 1em 0; }
.prose pre { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 1rem; font-family: 'Menlo', 'Monaco', monospace; font-size: 14px; overflow-x: auto; color: #d1d5db; }
.prose pre code { background: transparent; padding: 0; font-size: inherit; color: inherit; }
.copy-code-btn { position: absolute; top: 0.75rem; right: 0.75rem; background: rgba(255, 255, 255, 0.1); color: #d1d5db; border: none; border-radius: 6px; padding: 0.25rem 0.6rem; font-size: 0.8rem; cursor: pointer; transition: all 0.2s ease; opacity: 0; }
.code-block-wrapper:hover .copy-code-btn { opacity: 1; }
.copy-code-btn:hover { background: rgba(255, 255, 255, 0.2); }

.blinking-cursor { display: inline-block; width: 10px; height: 1.2em; background-color: #d1d5db; animation: blink 1s step-end infinite; vertical-align: bottom; }
@keyframes blink { 50% { opacity: 0; } }

#miaPage { background: #090a0f; opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; }
#miaPage.active { opacity: 1; pointer-events: auto; }
#miaCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
#miaVisualizer { width: 200px; height: 200px; cursor: pointer; position: relative; z-index: 1; }
#miaIcon { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0)); }
#miaIcon .mia-glow { transition: all 0.3s ease; }
#miaVisualizer.listening #miaIcon { transform: scale(1.1); filter: drop-shadow(0 0 25px rgba(139, 92, 246, 0.8)); }
#miaVisualizer.listening .mia-glow { stroke: #a78bfa; }
#miaVisualizer.speaking #miaIcon { transform: scale(1.05); filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.7)); animation: pulse 1.5s infinite; }
#miaVisualizer.speaking .mia-glow { stroke: #818cf8; }
@keyframes pulse { 0%, 100% { transform: scale(1.05); } 50% { transform: scale(1.08); } }

.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.1); transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #8b5cf6; }
input:checked + .slider:before { transform: translateX(20px); }

.message-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; opacity: 0; transition: opacity 0.2s ease-in-out; }
.message-wrapper:hover .message-actions { opacity: 1; }
.action-btn { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 0.75rem; display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 0.375rem; }
.action-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }

.delete-chat-btn { opacity: 0; transition: opacity 0.2s ease-in-out; }
@media (max-width: 1024px) { .delete-chat-btn { opacity: 1; } } /* Always visible on mobile */