:root {
    /* Light Theme (Default) */
    --bg-color: #f4f4f4;
    --text-color: #333;
    --header-bg: #333;
    --header-text: white;
    --footer-bg: #333;
    --footer-text: white;
    --tab-border: #ccc;
    --tab-bg: #eee;
    --tab-active-bg: white;
    --tab-active-border: #ccc;
    --tab-content-bg: rgba(255, 255, 255, 1.0); /* Changed to opaque */
    --tab-content-border: #ccc;
    --label-color: #333; /* Updated from implicit */
    --input-bg: white;
    --input-border: #ccc;
    --input-text: #333; /* Updated from implicit */
    --button-bg: #007bff;
    --button-text: white;
    --button-hover-bg: #0056b3;
    --status-text: #555;
    --status-error-text: red;
    --diff-bg: #fff;
    --diff-border: #ccc;
    --diff-ins-bg: #d4edda;
    --diff-ins-text: #155724;
    --diff-del-bg: #f8d7da;
    --diff-del-text: #721c24;
    --modal-overlay-bg: rgba(0,0,0,0.4);
    --modal-content-bg: #fefefe;
    --modal-border: #888;
    --modal-close-text: #aaa;
    --modal-close-hover-text: black;
    --privacy-note-text: #666;
    --subHeader-text: #666;
    --link-color: #007bff; /* Added for potential future links */
    --theme-toggle-bg: transparent; /* Added for theme toggle */
    --theme-toggle-text: var(--header-text); /* Added for theme toggle */
    --theme-toggle-hover-bg: rgba(255, 255, 255, 0.1); /* Added for theme toggle */
}

body[data-theme="dark"] {
    /* Dark Theme Overrides */
    --bg-color: #22272e;
    --text-color: #c9d1d9;
    --header-bg: #1c2128;
    --header-text: #c9d1d9;
    --footer-bg: #1c2128;
    --footer-text: #c9d1d9;
    --tab-border: #444c56;
    --tab-bg: #2d333b;
    --tab-active-bg: #22272e;
    --tab-active-border: #444c56;
    --tab-content-bg: rgba(34, 39, 46, 1.0); /* Changed to opaque (dark) */
    --tab-content-border: #444c56;
    --label-color: #c9d1d9;
    --input-bg: #1c2128;
    --input-border: #444c56;
    --input-text: #c9d1d9;
    --button-bg: #0d6efd; /* Adjusted blue for dark mode */
    --button-text: white;
    --button-hover-bg: #0b5ed7; /* Darker blue for hover */
    --status-text: #8b949e;
    --status-error-text: #f85149; /* GitHub red */
    --diff-bg: #1c2128;
    --diff-border: #444c56;
    --diff-ins-bg: rgba(46, 160, 67, 0.15); /* GitHub green subtle */
    --diff-ins-text: #3fb950;
    --diff-del-bg: rgba(248, 81, 73, 0.15); /* GitHub red subtle */
    --diff-del-text: #f85149;
    --modal-overlay-bg: rgba(0,0,0,0.6);
    --modal-content-bg: #2d333b;
    --modal-border: #555;
    --modal-close-text: #aaa;
    --modal-close-hover-text: white;
    --privacy-note-text: #8b949e;
    --subHeader-text: #8b949e;
    --link-color: #58a6ff; /* GitHub blue */
    --theme-toggle-bg: transparent;
    --theme-toggle-text: var(--header-text);
    --theme-toggle-hover-bg: rgba(255, 255, 255, 0.1);
}

/* --- Base Styles using Variables --- */

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    /* Existing Styles */
    padding: 0;
    background-image: url('images/background.jpg'); /* Set background image */
    background-size: cover; /* Scale the image to cover the entire element */
    background-position: center center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-attachment: fixed; /* Keep the background fixed during scroll */
    background-color: var(--bg-color); /* Fallback for older browsers */
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background-color 0.3s, color 0.3s; /* Smooth transition */
    overflow-x: hidden;
}

label{
    font-family: 'Times New Roman', Times, serif;
    font-size: 18px;
    font-weight: bold;
}

header {
    background: linear-gradient(135deg, #1e90ff 0%, #00bfff 50%, #87cefa 100%);
    color: var(--header-text);
    padding: 0 1rem;
    display: flex;
    justify-content: flex-start; 
    align-items: center;
    position: relative;
    overflow: hidden;
    width: calc(100% - 350px); 
    margin: 0 auto;
    height: 100px; 
}

.topo {
    width: 100%; 
    float: none; 
    background: none; 
}

#app-logo {
    display: none; /* Hide the logo */
}

header h1 {
  font-family: "Merriweather", monospace;
  font-size: 70px;
  font-weight: 800;
  background-image: radial-gradient(circle, #59dae2, #f6f4f7);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

h2 {
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 5px;
    margin-top: 0px;
}

.settings-area {
    position: fixed; /* Fix position relative to the viewport */
    top: 1rem;       /* Distance from the top */
    right: 1rem;      /* Distance from the right */
    z-index: 1000;    /* Ensure it's above most other elements */
    display: flex;
    align-items: center;
    gap: 1rem; /* Space between items */
    background-color: rgba(0, 0, 0, 0.5); /* Optional: Add a subtle background for better visibility */
    padding: 0.5rem;
    border-radius: 5px;
}

/* .settings-area padding is handled by header padding now */

.language-switcher button {
    background: none;
    border: none;
    color: white; /* Ensure button text is visible */
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* Add shadow */
}
.language-switcher button:hover {
    text-decoration: underline;
}

#theme-toggle-button {
    background: var(--theme-toggle-bg);
    border: none;
    color: white; /* Ensure icon is visible */
    cursor: pointer;
    font-size: 1.5rem; /* Make icon larger */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* Add shadow */
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    line-height: 1; /* Adjust line height for icon */
}
#theme-toggle-button:hover {
    background: var(--theme-toggle-hover-bg);
}


main {
    flex-grow: 1;
    padding: 1rem;
    max-width: 1300px;
    margin: 1rem auto;
    width: 95%;
    position: relative; /* Ensure z-index works */
    z-index: 1; /* Place above floating languages */
}

footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    text-align: center;
    padding: 0.5rem;
    margin-top: auto;
}

/* Tabs */
.tabs {
    border-bottom: 1px solid var(--tab-border);
}

.tab-button {
    padding: 0.5rem 1rem;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    background-color: var(--tab-bg);
    color: var(--text-color); /* Use main text color */
    margin-right: 5px;
    border-radius: 5px 5px 0 0;
    transition: background-color 0.2s ease-in-out; /* Smooth hover transition */
    font-family: 'Times New Roman', Times, serif;
    font-size: 24px;
}

/* Add hover effect for inactive tabs */
.tab-button:not(.active):hover {
    background-color: color-mix(in srgb, var(--tab-bg) 85%, var(--text-color) 15%); /* Slightly darken/adjust tab background */
}


.tab-button.active {
    background-color: var(--tab-active-bg);
    border-color: var(--tab-active-border);
    border-bottom: 2px solid var(--button-bg); /* Thicker, colored bottom border */
    border-bottom: 1px solid var(--tab-active-bg); /* Cover the main border */
    position: relative;
    bottom: -1px;
}

.tab-content {
    display: none; /* Hidden by default */
    padding: 1rem;
    border: 1px solid var(--tab-content-border);
    border-top: none;
    background-color: var(--tab-content-bg);
    border-radius: 0 8px 8px 8px; /* Rounded corners, skipping top-left */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.tab-content.active {
    display: block; /* Show active tab */
}

/* Correction Section Layout */
.correction-container {
    display: flex;
    gap: 1rem;
    align-items: flex-start; /* Align items to the top */
    margin-bottom: 1rem;
}

.text-area-container {
    flex: 1; /* Take up available space */
    display: flex;
    flex-direction: column;
}

.text-area-container label {
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: var(--label-color);
}

textarea {
    width: 100%;
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    padding: 0.5rem;
    border: 1px solid var(--input-border);
    background-color: var(--input-bg);
    color: var(--input-text);
    border-radius: 4px;
    font-size: 1rem;
    resize: vertical; /* Allow vertical resizing */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth focus transition */
    height: calc(100vh / 4); /* Set height to 1/3 of viewport height */
}

/* Enhance focus state for textareas */
textarea:focus {
    outline: none; /* Remove default outline */
    border-color: var(--button-bg); /* Use button color for focus border */
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--button-bg) 25%, transparent); /* Add a subtle glow */
}

.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center button vertically */
    padding-top: 2rem; /* Add some space above the button */
    margin-top: 3rem;
}

#correct-button, #translate-button, #settings-button, #save-settings-button {
    padding: 0.8rem 1.5rem;
    cursor: pointer;
    background-color: var(--button-bg);
    color: var(--button-text);
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out; /* Smooth transitions */
}

#correct-button:hover, #translate-button:hover, #settings-button:hover, #save-settings-button:hover {
    background-color: var(--button-hover-bg);
}

/* Add active state for buttons */
#correct-button:active, #translate-button:active, #settings-button:active, #save-settings-button:active {
    transform: scale(0.98); /* Slightly shrink button on click */
    background-color: color-mix(in srgb, var(--button-bg) 85%, black 15%); /* Darken button slightly more */
}

.status {
    font-size: 0.9rem;
    color: var(--status-text);
    min-height: 1.2em; /* Reserve space for messages */
}
/* Style for error status messages */
.status[style*="color: red"], /* Target inline style */
.status.error /* Or add an error class via JS */
{
    color: var(--status-error-text);
}


/* Diff View */
.diff-container {
    margin-top: 1.5rem;
}
.diff-container h3 {
    color: var(--label-color); /* Use label color */
    margin-bottom: 5px;
}

.diff-output {
    background-color: var(--diff-bg);
    border: 1px solid var(--diff-border);
    padding: 1rem;
    border-radius: 4px;
    min-height: 170px;
    white-space: pre-wrap; /* Preserve whitespace and wrap lines */
    line-height: 1.6;
    color: var(--text-color); /* Ensure text color matches theme */
    height: calc(100vh / 4); /* Set height to 1/3 of viewport height */
    margin-top:10px;
    overflow: auto;
}

.diff-output ins {
    background-color: var(--diff-ins-bg);
    color: var(--diff-ins-text);
    text-decoration: none;
    padding: 0.1em 0;
}

.diff-output del {
    color: var(--diff-del-text);
    background-color: var(--diff-del-bg);
    text-decoration: line-through; /* Keep line-through */
    padding: 0.1em 0;
}

/* Translation Section Layout */
.translation-container {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    gap: 1rem;
}
.translation-container h2 {
    color: var(--label-color);
}

.controls-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.controls-container label {
    font-weight: bold;
    color: var(--label-color);
}

#target-language {
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--input-border);
    background-color: var(--input-bg);
    color: var(--input-text);
}

/* Settings Modal */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: var(--modal-overlay-bg);
}

.modal-content {
    background-color: var(--modal-content-bg);
    color: var(--text-color); /* Ensure modal text uses theme color */
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid var(--modal-border);
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 500px;
    border-radius: 5px;
    position: relative;
}

.close-button {
    color: var(--modal-close-text);
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: var(--modal-close-hover-text);
    text-decoration: none;
    cursor: pointer;
}

.modal-content h2 {
    color: var(--label-color); /* Use label color for heading */
}

.modal-content label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: var(--label-color);
}

.modal-content input[type="password"] {
    width: calc(100% - 22px); /* Adjust for padding/border */
    padding: 10px;
    margin-bottom: 1rem;
    border: 1px solid var(--input-border);
    background-color: var(--input-bg);
    color: var(--input-text);
    border-radius: 4px;
}

/* Custom searchable model select */
.model-select-container {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
}

#model-search-input {
    width: calc(100% - 22px); /* Adjust for padding/border */
    padding: 10px;
    border: 1px solid var(--input-border);
    background-color: var(--input-bg);
    color: var(--input-text);
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box; /* Include padding and border in element's total width */
}

#model-options-container {
    display: none; /* Hidden by default, shown when input is focused or typed in */
    position: absolute;
    top: calc(100% + 2px); /* Position slightly below the input, adjust as needed */
    left: 0;
    width: 100%; /* Ensure it matches the input width */
    box-sizing: border-box; /* Include padding and border in width */
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px; /* Limit height and enable scrolling */
    overflow-y: auto;
    z-index: 100; /* Ensure it's above other modal elements */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.model-option {
    padding: 10px;
    cursor: pointer;
    color: var(--input-text);
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Show ellipsis for overflow */
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.model-option:hover, .model-option.selected {
    background-color: var(--button-hover-bg);
    color: var(--button-text);
}

/* Adjust arrow color for dark theme */
body[data-theme="dark"] .modal-content #model-select {
     background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238b949e%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
}


.privacy-note {
    font-size: 0.8rem;
    color: var(--privacy-note-text);
    margin-top: 1rem;
}

.subHeader {
    font-size: 0.8rem;
    color: var(--subHeader-text);
    margin-top: 0px;
    margin-bottom: 20px;
}

/* Styles for the buttons container in the modal */
.modal-buttons {
    display: flex;
    justify-content: space-between; /* Space out buttons */
    align-items: center; /* Align items vertically */
    margin-top: 1rem; /* Add space above the buttons */
    gap: 1rem; /* Add gap between buttons if needed */
}

/* Style the donate button link/image */
.donate-button-link {
    display: inline-block; /* Allow setting height/width if needed */
    line-height: 0; /* Remove extra space below image */
}

.donate-button-img {
    height: 25px; /* Match the approximate height of the Save button */
    vertical-align: middle; /* Align image nicely with text button */
    border-radius: 4px; /* Match button border radius */
    transition: opacity 0.2s ease-in-out; /* Smooth hover effect */
}

.donate-button-img:hover {
    opacity: 0.85; /* Slightly fade on hover */
}


/* --- Responsive Design --- */
@media (max-width: 768px) {
    .correction-container {
        flex-direction: column; /* Stack text areas vertically */
        align-items: stretch; /* Stretch items to full width */
    }

    .button-container {
        padding-top: 1rem; /* Reduce top padding */
        align-items: stretch; /* Make button full width */
        margin-top: 1rem; /* Add space above button */
    }

    #correct-button, #translate-button {
        width: 100%; /* Make buttons take full width */
    }

    /* Adjust header for smaller screens if needed */
    header {
        flex-direction: column;
        height: auto; /* Allow header height to adjust */
        padding: 0.5rem 1rem; /* Adjust padding */
    }

    #app-logo {
        height: 60px; /* Smaller logo */
        margin-bottom: 0.5rem;
    }

    header h1 {
        font-size: 1.5rem; /* Smaller title */
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .settings-area {
        justify-content: center; /* Center settings */
        width: 100%;
    }

    main {
        width: 100%; /* Use full width */
        padding: 0.5rem; /* Reduce padding */
        margin: 0.5rem 0; /* Adjust margin */
    }

    .tab-content {
        padding: 0.5rem; /* Reduce padding */
    }
}

/* GitHub Corner Link */
.github-corner-link {
    position: fixed;   /* Fix position relative to the viewport */
    bottom: 20px;      /* Distance from the bottom */
    right: 20px;       /* Distance from the right */
    z-index: 1000;     /* Ensure it stays on top of other elements */
    display: block;    /* Treat as a block for positioning */
    transition: transform 0.2s ease-in-out; /* Smooth hover effect */
}

.github-corner-link img {
    height: 50px;      /* Set the desired height (adjust if needed) */
    width: auto;       /* Maintain aspect ratio */
    display: block;    /* Remove potential extra space below the image */
    border-radius: 50%; /* Optional: Make the image circular */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Optional: Add a subtle shadow */
}

.github-corner-link:hover {
    transform: scale(1.1); /* Slightly enlarge the link on hover */
}

/* Floating Languages Container */
#floating-languages-container {
    position: fixed; /* Fixed to viewport */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Hide languages outside viewport */
    z-index: -1; /* Place behind all other content */
}

/* Floating Languages */
.floating-language {
    position: absolute;
    color: rgba(255, 255, 255, 0.7); /* Increased opacity for better visibility */
    font-size: 3em; /* Adjust as needed */
    font-weight: bold;
    pointer-events: none; /* Allow clicks to pass through */
    animation: floatAndFade 15s infinite ease-in-out; /* Animation duration and timing */
    white-space: nowrap; /* Prevent text wrapping */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Slightly stronger shadow for readability */
}

@keyframes floatAndFade {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--translate-x), var(--translate-y)) scale(1.2);
        opacity: 0;
    }
}