/* Dark Mode Aesthetic Improvements */

/* Soften the main background */
.dark {
    /* Override the harsh slate-900 with a softer slate-800 */
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity)) !important; /* slate-800 */
}

/* Improve chat area appearance */
.dark #chat-container {
    background-color: rgb(30 41 59 / 0.5); /* semi-transparent slate-800 */
    backdrop-filter: blur(10px);
    border: 1px solid rgb(71 85 105 / 0.3); /* subtle slate-600 border */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -1px rgb(0 0 0 / 0.2);
}

/* Soften bot message bubbles */
.dark .bot-bubble {
    background-color: rgb(30 41 59) !important; /* slate-800 instead of slate-800 */
    border: 1px solid rgb(71 85 105 / 0.5); /* subtle slate-600 border */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px 0 rgb(0 0 0 / 0.1);
}

/* Improve user message bubbles */
.dark .user-bubble {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%); /* gradient from sky-700 to sky-600 */
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.3);
}

/* Better header styling */
.dark header {
    background-color: rgb(30 41 59 / 0.95) !important; /* semi-transparent slate-800 */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgb(71 85 105 / 0.5);
}

/* Improved dropdown menu */
.dark #user-menu {
    background-color: rgb(30 41 59) !important; /* slate-800 */
    border: 1px solid rgb(71 85 105 / 0.5);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -2px rgb(0 0 0 / 0.3);
}

/* Better hover states */
.dark .hover\:bg-slate-700:hover {
    background-color: rgb(51 65 85 / 0.8) !important; /* slightly transparent slate-700 */
}

/* Improved system messages */
.dark .system-bubble {
    background-color: rgb(30 41 59 / 0.5) !important; /* semi-transparent slate-800 */
    border-color: rgb(71 85 105 / 0.5) !important;
}

/* Better input field styling */
.dark #user-input {
    background-color: rgb(30 41 59) !important;
    border: 1px solid rgb(71 85 105 / 0.5);
}

.dark #user-input:focus {
    border-color: rgb(14 165 233 / 0.5); /* sky-500 with opacity */
    box-shadow: 0 0 0 3px rgb(14 165 233 / 0.1);
}

/* Smoother scrollbar */
.dark #chat-history::-webkit-scrollbar-track {
    background: rgb(30 41 59 / 0.5);
}

/* Better button styling */
.dark button {
    transition: all 0.2s ease;
}

.dark .bg-sky-600 {
    background-color: rgb(2 132 199) !important; /* sky-700 for better contrast */
}

/* Improved footer */
.dark footer {
    background-color: rgb(30 41 59 / 0.95) !important;
    border-top: 1px solid rgb(71 85 105 / 0.5);
}

/* Add subtle animations */
.dark * {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Better contrast for links */
.dark a:hover {
    color: rgb(125 211 252) !important; /* sky-300 */
}

/* Improved modal backgrounds */
.dark .modal-content,
.dark [role="dialog"] {
    background-color: rgb(30 41 59) !important;
    border: 1px solid rgb(71 85 105 / 0.5);
}

/* Character selection cards */
.dark .character-card {
    background-color: rgb(30 41 59 / 0.8);
    border: 1px solid rgb(71 85 105 / 0.5);
}

.dark .character-card:hover {
    background-color: rgb(51 65 85 / 0.8);
    border-color: rgb(14 165 233 / 0.5);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
}