/* Grayscale Palette & Dark Mode Aesthetic (Google Search Inspired) */
:root {
    /* Grayscale Palette - Adjusted for Dark Mode Focus */
    --gray-50: #FAFAFA; /* Very light gray for text/highlights */
    --gray-100: #F5F5F5; /* Light gray for primary text */
    --gray-200: #EEEEEE; /* Lighter gray for secondary text/elements */
    --gray-300: #DEDEDE; /* Medium-light gray */
    --gray-400: #BDBDBD; /* Medium gray */
    --gray-500: #9E9E9E; /* Medium-dark gray */
    --gray-600: #757575; /* Darker gray */
    --gray-700: #424242; /* Very dark gray */
    --gray-800: #212121; /* Near black for card backgrounds/text */
    --gray-850: #2A2A2A; /* Custom dark gray for slightly lighter backgrounds */
    --gray-900: #121212; /* Deepest black for body background */

    /* Grayscale Accent Colors for actions - Lighter grays for contrast */
    /* In light mode, use darker grays for accents */
    --accent-color-light-mode: var(--gray-700); 
    --accent-color-light-mode-hover: var(--gray-500); 
    /* In dark mode, use lighter grays for accents */
    --accent-color-dark-mode: var(--gray-500); /* Medium dark gray for buttons in dark mode */
    --accent-color-dark-mode-hover: var(--gray-400); /* Medium gray for hover in dark mode */

    /* Transparency for dark mode */
    --transparency-dark-alpha: rgba(42, 42, 42, 0.9); /* Semi-transparent dark gray for card */
    
    /* Enhanced Shadows for Dark Mode */
    --card-shadow-dark: 0 12px 24px rgba(0,0,0,0.35), 0 8px 12px rgba(0,0,0,0.3); /* Deeper, softer shadows */

    /* Error color */
    --error-color: #FF6F91; /* A pleasant pink for errors */
    /* Success color */
    --success-color: #66BB6A; /* A suitable green for success messages */
}

body { 
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; 
    font-weight: 400; /* Normal font weight */
    line-height: 1.6; /* Improved line spacing */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
    margin: 0;
    background-color: var(--gray-900); /* Deepest black background */
    color: var(--gray-100); /* Light gray text for primary contrast */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions */
    color-scheme: dark; /* Explicitly set dark scheme */
}

/* Dark mode specific text color for status messages for clarity */
@media (prefers-color-scheme: dark) {
    body {
        color: var(--gray-50); /* Near-white for main body text for max contrast */
    }
    .status-message {
        color: var(--gray-100); /* Slightly softer light gray for status messages */
    }
    /* Specific error color */
    .status-message.error {
        color: var(--error-color); /* Pink for error messages */
    }
     /* Specific success color */
    .status-message.success {
        color: var(--success-color); /* Green for success messages */
    }

    /* --- Dark Mode Specific Component Styles --- */
    .mdl-card {
        background-color: var(--transparency-dark-alpha);
        box-shadow: var(--card-shadow-dark);
    }
    .mdl-card__title { border-bottom: 1px solid var(--gray-700); }
    .mdl-card__supporting-text, .mdl-card__actions { border-bottom: 1px solid var(--gray-700); }
    .mdl-card__actions:last-of-type { border-bottom: none; }
    #codeDisplay { background-color: rgba(33, 33, 33, 0.92); box-shadow: inset 0 1px 8px rgba(0,0,0,0.25); }
    iframe { border: 1px solid var(--gray-600); }
    
    /* Textfield styles for dark mode */
    .mdl-textfield__input {
        color: var(--gray-100); /* Light text for input */
        border-bottom: 1px solid var(--gray-300); /* Lighter border */
        background-color: var(--gray-800); /* Added background color */
    }

    textarea.mdl-textfield__input {
        padding: 8px;
    }
    .mdl-textfield__label {
        color: var(--gray-400); /* Medium gray for label */
    }
    .mdl-textfield.is-focused .mdl-textfield__label,
    .mdl-textfield.is-dirty .mdl-textfield__label {
        color: var(--accent-color-dark-mode-hover); /* Accent color for focused/dirty label */
    }
    .mdl-textfield--floating-label.is-focused .mdl-textfield__label,
    .mdl-textfield--floating-label.is-dirty .mdl-textfield__label {
        color: var(--accent-color-dark-mode-hover); /* Accent color for floating label */
    }
    /* Error state for textfield */
    .mdl-textfield.is-invalid .mdl-textfield__input,
    .mdl-textfield.is-invalid .mdl-textfield__label {
        color: var(--error-color);
        border-bottom-color: var(--error-color);
    }
    .mdl-textfield.is-invalid.is-dirty .mdl-textfield__label,
    .mdl-textfield.is-invalid.is-focused .mdl-textfield__label {
        color: var(--error-color);
    }
    
    /* Title color for dark mode */
    h1 {
        color: var(--gray-100); /* Lighter gray for heading in dark mode */
    }
}

/* General styling for status messages */
.status-message {
    margin-top: 15px;
    font-size: 0.9em;
    min-height: 1.2em; /* Ensure space for text */
    font-weight: 500;
}
/* Specific error color */
.status-message.error {
    color: var(--error-color); /* Pink for error messages */
}
/* Specific success color */
.status-message.success {
    color: var(--success-color); /* Green for success messages */
}

.mdl-card__title-text {
    color: white;
}

.mdl-card__title h1,
.mdl-card__title h2 {
    margin: 0; /* Remove default margins */
}

.mdl-card__title {
    padding-bottom: 0;
    border-bottom: 1px solid var(--gray-700); /* Darker border for card title */
    padding: 20px; /* Consistent padding for the title area */
}
.mdl-card__supporting-text {
    padding-top: 20px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-700); /* Darker border */
}

.mdl-card__actions p {
    text-align: left;
}

.mdl-card__actions {
    padding: 20px; /* Consistent padding */
    border-bottom: 1px solid var(--gray-700); /* Darker border */
    display: flex;
    justify-content: flex-end;
}
.mdl-card__actions:last-of-type {
    border-bottom: none;
}

/* Style for Swagger link */
.swagger-link {
    display: block;
    margin-top: 20px;
    font-size: 0.85em;
    color: var(--gray-400); /* Medium gray for less emphasis */
    text-decoration: none;
    transition: color 0.3s ease;
}
.swagger-link:hover {
    color: var(--gray-100); /* Lighter gray on hover for visibility */
    text-decoration: underline;
}

/* Floating button for Swagger FAB */
.swagger-fab {
    position: fixed;
    bottom: 20px; /* Adjust vertical position */
    right: 20px;  /* Adjust horizontal position */
    z-index: 1000; /* Ensure it's on top of other elements */
    background-color: transparent !important; /* Force background to be transparent */
    color: var(--gray-900); /* Text color (less relevant for image, but for icon fallback) */
    /* Ensure it looks like a button with an icon */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Make it round like a FAB */
    box-shadow: none; /* Removed shadow */
    width: 56px; /* Standard FAB size */
    height: 56px; /* Standard FAB size */
    line-height: 56px; /* Center text vertically */
    text-align: center;
    font-size: 1.5em; /* Icon/text size */
    overflow: hidden; /* Ensure content stays within bounds */
}
.swagger-fab:hover {
    background-color: transparent !important; /* Force transparent on hover too */
    box-shadow: none; /* Removed shadow on hover */
}
/* Add specific dark mode adjustments if necessary */
@media (prefers-color-scheme: dark) {
    .swagger-fab {
        background-color: transparent; /* Keep transparent */
        color: var(--gray-900);
    }
    .swagger-fab:hover {
        background-color: transparent;
    }
}
/* Ensure the image within the FAB scales correctly */
.swagger-fab img {
    display: block; /* Remove extra space below image */
    width: 100%;
    height: 100%;
    object-fit: contain; /* Scale image while preserving aspect ratio */
    border-radius: 50%; /* Keep it circular */
    padding: 8px; /* Add some padding so the image doesn't touch the edges */
    box-sizing: border-box; /* Include padding in width/height */
}

.mdl-card__title-text {
    color: white;
}

.mdl-card {
    width: 80vw;
    max-width: 900px;
    margin-top: 20px;
}

.mdl-textfield select {
    background-color: var(--gray-800);
    color: var(--gray-100);
    border: none;
    border-bottom: 1px solid var(--gray-300);
    padding: 8px; /* Added padding */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}



#ai-form .mdl-textfield {
    margin-bottom: 0px !important; /* Compact inputs */
}

#ai-form .mdl-textfield:first-child {
    margin-top: 0; /* Remove top margin from the first input */
}

.hidden {
    display: none;
}