html {
    height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background-image: url('https://images.unsplash.com/photo-1579546929518-9e396f3cc809');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Ensures the background stays in place while scrolling */
    color: #E5E7EB; /* Default light gray text for the body - Tailwind's gray-200 */
}

#app {
    background-color: rgba(255, 255, 255, 0.15); /* Semi-transparent white */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* shadow-xl is already applied via Tailwind, we can keep it or define our own */
    /* We might need to adjust text colors if they are inherited and become hard to read */
}

/* Status Indicator Styles */
#status-indicator {
    /* Default gradient removed, background color will be set by status classes */
    transition: background-color 0.3s ease; /* Smooth transition for color changes */
}

.status-offline {
    background-color: red !important;
}

.status-error {
    background-color: orange !important;
}

.status-poor {
    background-color: yellow !important;
}

.status-good {
    background-color: green !important;
}


#app > header {
    background-color: rgba(255, 255, 255, 0.25); /* Slightly more opaque than #app */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; /* Override Tailwind if needed */
    color: #E5E7EB; /* Light gray text - Tailwind's gray-200 */
}

#app > header h1 {
    color: #F3F4F6; /* Lighter gray text - Tailwind's gray-100 for header text */
}

#settings-button svg {
    stroke: #E5E7EB; /* Light gray icon - Tailwind's gray-200 */
}

#settings-button:hover svg {
    stroke: #FFFFFF; /* White icon on hover */
}

#app-footer {
    background-color: rgba(255, 255, 255, 0.25); /* Slightly more opaque than #app */
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important; /* Override Tailwind if needed */
    /* Text color for elements inside will be handled separately or inherited */
}

#message-input {
    background-color: rgba(255, 255, 255, 0.3); /* More opaque for readability */
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #F3F4F6; /* Light gray text */
    /* Keep existing padding and focus rings from Tailwind for now */
}

#message-input::placeholder {
    color: #CBD5E1; /* Tailwind's slate-300 */
}

#send-button {
    background-color: rgba(79, 70, 229, 0.6); /* Semi-transparent version of current blue-600 */
    backdrop-filter: blur(5px); /* Subtle blur for the button */
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    /* Keep existing padding, focus rings etc. from Tailwind */
}

#send-button:hover {
    background-color: rgba(67, 56, 202, 0.7); /* Semi-transparent version of current blue-700 */
}

/* Main Page Footer (copyright) */
body > footer {
    background-color: rgba(0, 0, 0, 0.1); /* Darker, subtle glass */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #D1D5DB; /* Tailwind's gray-300 */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#chat-container::-webkit-scrollbar {
    width: 8px;
}
#chat-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1); /* Light track */
}
#chat-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3); /* Light thumb */
    border-radius: 4px;
}
#chat-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5); /* Slightly darker light thumb on hover */
}

/* Styles for Markdown content for better spacing */
/* These will apply to .ai-message-bubble if it also has .ai-message-content */

.user-message-bubble, .ai-message-bubble, .loading-bubble, .error-bubble, .info-bubble {
    padding: 0.75rem 1rem; /* Tailwind: px-4 py-3 */
    border-radius: 1.25rem; /* Tailwind: rounded-2xl */
    background-color: rgba(255, 255, 255, 0.1); /* Base glass background */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #F3F4F6; /* Light gray text - Tailwind's gray-100 */
    word-wrap: break-word; /* Ensure long words break */
}

.user-message-bubble {
    background-color: rgba(59, 130, 246, 0.3); /* Semi-transparent blue, Tailwind's blue-500 as base */
    color: #EFF6FF; /* Tailwind's blue-50 */
}

.ai-message-bubble {
    background-color: rgba(255, 255, 255, 0.15); /* Slightly more opaque white for AI */
}

.loading-bubble {
    color: #D1D5DB; /* Tailwind's gray-300 */
}

.loading-bubble .animate-pulse div {
    background-color: #9CA3AF; /* Tailwind's gray-400, but our new text is lighter */
}

.error-bubble {
    background-color: rgba(239, 68, 68, 0.2); /* Semi-transparent red, Tailwind's red-500 as base */
    border-color: rgba(248, 113, 113, 0.5); /* Lighter red border, Tailwind's red-400 */
    color: #FEF2F2; /* Tailwind's red-50 */
}

.info-bubble {
    background-color: rgba(234, 179, 8, 0.2); /* Semi-transparent yellow, Tailwind's yellow-500 as base */
    border-color: rgba(250, 204, 21, 0.5); /* Lighter yellow border, Tailwind's yellow-400 */
    color: #FFFBEB; /* Tailwind's yellow-50 */
}


.ai-message-content p {
    margin-bottom: 0.75rem;
}
.ai-message-content p:last-child {
    margin-bottom: 0;
}
.ai-message-content ul, .ai-message-content ol {
    padding-left: 1.5rem;
    list-style: revert;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}
.ai-message-content li:not(:last-child) {
    margin-bottom: 0.5rem;
}
.ai-message-content a {
    color: #7DD3FC; /* Tailwind's sky-300 - a lighter, vibrant blue */
    text-decoration: underline;
}
.ai-message-content a:hover {
    color: #BAE6FD; /* Tailwind's sky-200 */
}
 .ai-message-content code {
    background-color: #111827;
    color: #e5e7eb;
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    border-radius: 6px;
}
.ai-message-content pre > code {
    display: block;
    padding: 1rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.ai-message-content pre {
     background-color: #111827;
     border-radius: 8px;
     margin-top: 0.5rem;
     margin-bottom: 1rem;
     overflow-x: auto; /* Ensure code blocks can scroll horizontally if needed */
}
.ai-message-content h1, .ai-message-content h2, .ai-message-content h3 {
     margin-bottom: 0.75rem;
     margin-top: 1.25rem;
}

/* Styles for the copy button */
.copy-button {
    background: none;
    border: none;
    color: inherit; /* Inherit color from parent, can be overridden */
    cursor: pointer;
    padding: 0.25rem; /* Small padding */
    border-radius: 50%; /* Make it circular if desired, or match bubble */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6; /* Slightly transparent until hover */
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
    position: absolute; /* Position relative to the messageDiv */
    top: 50%;
    transform: translateY(-50%);
}

.copy-button:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1); /* Subtle hover background */
}

.copy-button svg {
    width: 16px; /* Consistent icon size */
    height: 16px;
    stroke: currentColor; /* Icon color matches text color */
}

/* Specific positioning for user message copy button (left) */
.user-message-bubble + .copy-button { /* This selector is if button is AFTER bubble */
    /* This won't work as intended if button is before bubble as in JS. Let's adjust based on structure. */
}
/* Correct approach: If messageDiv contains [copyButton, bubbleDiv] or [bubbleDiv, copyButton] */
/* We need to adjust the JS structure or CSS selectors carefully. */

/* Assuming the structure in JS:
   User: messageDiv > copyButton, bubbleDiv
   AI:   messageDiv > bubbleDiv, copyButton
*/

/* For User messages (button first) */
/* The button is inside messageDiv which is flex justify-end. Button is flex item. */
/* We want it outside the bubble, but aligned with it. */
/* Let's simplify: button is part of the flex flow in messageDiv */

/* Removing absolute positioning for simpler flex alignment */
.copy-button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 0.375rem; /* Tailwind's rounded-md */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
    /* Removed position: absolute, top, transform */
    margin: 0 0.25rem; /* Add some margin around the button */
}
/* User message: button is on the left of the bubble */
.flex.justify-end .copy-button { /* Targets copy button in user messageDiv */
    order: -1; /* Places it before the bubble in flex layout */
}

/* AI message: button is on the right of the bubble */
.flex.justify-start .copy-button { /* Targets copy button in AI messageDiv */
    order: 1; /* Places it after the bubble in flex layout */
}


/* Styling for the check icon when text is copied */
.copy-button .check-icon {
    stroke: #4CAF50; /* Green color for success */
}

/* Ensure message bubble and copy button align nicely */
.user-message-bubble, .ai-message-bubble {
    display: inline-block; /* Or flex if content inside needs alignment */
    max-width: calc(100% - 32px - 0.5rem); /* Account for button width and margin */
}

/* Settings Modal Styles */
#settings-modal-content {
    background-color: rgba(255, 255, 255, 0.15); /* Semi-transparent white */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #E5E7EB; /* Light gray text - Tailwind's gray-200 */
}

#settings-modal-content h2 {
    color: #F3F4F6; /* Lighter gray text - Tailwind's gray-100 */
}

#close-settings-modal svg {
    stroke: #E5E7EB; /* Light gray icon */
}

#close-settings-modal:hover svg {
    stroke: #FFFFFF; /* White icon on hover */
}

#settings-modal-content label {
    color: #D1D5DB; /* Tailwind's gray-300 */
}

#settings-modal-content select {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #F3F4F6; /* Light text for options */
}

#settings-modal-content select option {
    background-color: rgba(0, 0, 0, 0.8); /* Darker background for dropdown options for readability */
    color: #F3F4F6;
}

#settings-modal-content select:focus {
    border-color: rgba(59, 130, 246, 0.7); /* Blue-500 with opacity */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4); /* Focus ring */
}

#clear-cache-button {
    background-color: rgba(239, 68, 68, 0.5); /* Semi-transparent red (Tailwind's red-500 as base) */
    border: 1px solid rgba(248, 113, 113, 0.6); /* Lighter red border */
    color: #FEF2F2; /* Tailwind's red-50 */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

#clear-cache-button:hover {
    background-color: rgba(220, 38, 38, 0.6); /* Darker semi-transparent red (Tailwind's red-600 as base) */
    border-color: rgba(239, 68, 68, 0.7);
}

#clear-cache-button:focus {
    ring-color: rgba(239, 68, 68, 0.5); /* Red focus ring */
    ring-offset-color: rgba(255, 255, 255, 0.1); /* Offset color matching modal background */
}