#system-prompt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

#system-prompt-container {
    background-color: var(--settings-bg);
    color: var(--settings-text);
    padding: 20px;
    border: 1px solid var(--border-medium);
    width: 80%;
    max-width: 600px;
    transition: background-color 0.3s, color 0.3s;
    max-height: 85vh; /*For scroll*/
    overflow-y: auto;
}

#system-prompt-container h2 {
    color: var(--text-dark);
    margin-bottom: 15px;
}

#system-instruction {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-medium);
    margin-bottom: 10px;
    font-family: inherit;
    background-color: var(--input-bg);
    color: var(--input-text);
    transition: background-color 0.3s, color 0.3s;
}

#close-prompt-button {
    padding: 8px 15px;
    background-color: var(--dark-gray);
    color: var(--white);
    border: none;
    cursor: pointer;
    margin-top: 15px;
}

#settings-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

#settings-buttons button {
    padding: 8px 15px;
    background-color: var(--dark-gray);
    color: var(--white);
    border: none;
    cursor: pointer;
}

/* Add styling for the clear button */
#clear-chat-button {
    padding: 8px 15px;
    background-color: #d32f2f;  /* Red color to indicate destructive action */
    color: var(--white);
    border: none;
    cursor: pointer;
}

#clear-chat-button:hover {
    background-color: #b71c1c;  /* Darker red on hover */
}

/* --- Settings Panel Styling --- */
.settings-section {
    margin-bottom: 20px;
}

.settings-section h3 {
    font-size: 1em;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.settings-field {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    position: relative; /*For API visibility*/
}

.settings-field label {
    margin-bottom: 5px;
    color: var(--text-medium);
    font-size: 0.9em;
}

.settings-field input,
.settings-field select,
.settings-field textarea {
    padding: 8px;
    border: 1px solid var(--border-medium);
    background-color: var(--input-bg);
    color: var (--input-text);
    transition: background-color 0.3s, color 0.3s;
}

/* Fix for dark mode text in settings inputs */
body.dark-theme .settings-field input,
body.dark-theme .settings-field select,
body.dark-theme .settings-field textarea,
body.dark-theme #gemini-api-key,
body.dark-theme #fal-api-key,
body.dark-theme #model-selector {
    color: var(--dark-black); /* Ensure text is visible in dark mode */
}

/* API key input styling */
/* .settings-field {  <- already defined above
    position: relative;
} */

.settings-field input[type="password"],
.settings-field input[type="text"] {
    padding-right: 40px; /* Make room for the toggle button */
}

.key-toggle {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}

.key-toggle:hover {
    color: var(--text-dark);
}

/* Adjust positioning for labels */
.settings-field label + input + .key-toggle {
    top: calc(50% + 10px);
}

/* --- Tool Toggle Styling --- */
.tool-toggles {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 5px;
}

.tool-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tool-toggle input[type="checkbox"] {
    margin: 0;
}

.tool-toggle label {
    user-select: none;
    cursor: pointer;
    color: var(--text-medium);
}

body.dark-theme .tool-toggle label {
    color: var(--dark-dark-gray);
}

/* Ensure proper styling for API settings sections */
.gemini-settings, .openai-settings, .falai-settings {
    transition: opacity 0.3s ease;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background-color: var(--bg-lighter);
}

.gemini-settings {
    border-left: 3px solid #4285f4; /* Google blue */
}

.openai-settings {
    border-left: 3px solid #10a37f; /* OpenAI green */
}

.falai-settings {
    border-left: 3px solid #ff6b6b; /* Distinctive color for Fal.ai */
}

.api-description {
    font-size: 0.9em;
    color: var(--text-medium);
    margin-top: 5px;
    font-style: italic;
}