/* Base styles */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #e0e0e0; 
            color: #1f2937; /* gray-800 */
            transition: background-color 0.3s, color 0.3s;
        }
        .card {
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
            transition: background-color 0.3s, box-shadow 0.3s;
        }
        
        
        /* Dark Mode Styles (Rest of your existing Dark Mode CSS) */
        body.dark {
            background-color: #111827; /* gray-900 */
            color: #f3f4f6; /* gray-100 */
        }
        body.dark .card {
            background-color: #1f2937; /* gray-800 */
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }
        body.dark .text-gray-900 { color: #f3f4f6; }
        body.dark .text-gray-800 { color: #e5e7eb; }
        body.dark .text-gray-700 { color: #d1d5db; }
        body.dark .text-gray-600 { color: #9ca3af; }
        body.dark .border-gray-300 { border-color: #374151; }
        body.dark .bg-gray-50 { background-color: #374151; }
        body.dark .bg-white { background-color: #1f2937; }

        /* Dark Mode Text Areas and Inputs */
        body.dark textarea,
        body.dark input[type="email"],
        body.dark input[type="password"],
        body.dark input[type="text"],
        body.dark input[type="tel"],
        body.dark select {
            background-color: #374151;
            color: #f3f4f6;
            border-color: #4b5563;
        }
        body.dark .clear-btn { color: #9ca3af; }
        body.dark .clear-btn:hover { color: #f3f4f6; }
        
        /* Dark Mode Content Boxes */
        body.dark .bg-blue-50 { background-color: #1e3a8a; border-color: #3b82f6; color: #bfdbfe; }
        body.dark .bg-green-50 { background-color: #065f46; border-color: #10b981; color: #a7f3d0; }
        body.dark .similar-word-btn { background-color: #065f46; color: #a7f3d0; }
        body.dark .similar-word-btn:hover { background-color: #047857; }
        body.dark .text-indigo-600 { color: #818cf8; }
        body.dark .bg-indigo-50 { background-color: #3730a3; }

        /* Typing Loader Animation */
        textarea.loading {
            opacity: 0.8; 
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="15" viewBox="0 0 50 15"><circle cx="7" cy="7.5" r="4" fill="%236366f1"><animate attributeName="opacity" values="0.4;1;0.4" dur="1.4s" repeatCount="indefinite" begin="0"/></circle><circle cx="25" cy="7.5" r="4" fill="%236366f1"><animate attributeName="opacity" values="0.4;1;0.4" dur="1.4s" repeatCount="indefinite" begin="0.2s"/></circle><circle cx="43" cy="7.5" r="4" fill="%236366f1"><animate attributeName="opacity" values="0.4;1;0.4" dur="1.4s" repeatCount="indefinite" begin="0.4s"/></circle></svg>');
            background-repeat: no-repeat;
            background-position: center center;
            color: transparent;
        }
        
        /* Similar Words Loading Design */
        .similar-word-btn.loading {
            pointer-events: none;
            opacity: 0.6;
            background-color: #c7d2fe;
            animation: pulse 1s infinite;
        }
        .loading-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            min-height: 100px;
        }
        .svg-spinner {
            animation: spin 1.2s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Clear Button Styling/Positioning */
        .clear-btn {
            position: absolute;
            top: 0.5rem; 
            right: 0.5rem; 
            color: #9ca3af; 
            background-color: transparent;
            border-radius: 9999px;
            padding: 0.25rem;
            display: none;
            transition: color 0.15s ease-in-out;
            z-index: 10;
        }
        textarea:not(:placeholder-shown) ~ .clear-btn,
        textarea.loading ~ .clear-btn {
             display: block; 
        }

        /* Modal Transitions & Backdrop Fix (Applied to all modals) */
        .modal-backdrop {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.5); 
            display: flex; align-items: center; justify-content: center; z-index: 50;
            transition: opacity 0.3s ease-in-out;
            opacity: 0;
            pointer-events: none;
        }
        .modal-backdrop:not(.hidden) {
             opacity: 1;
             pointer-events: auto;
        }
        
        .modal-content {
            padding: 2rem; border-radius: 1rem; 
            max-width: 90%; max-height: 90vh;
            overflow-y: auto; position: relative;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
            transform: scale(0.95);
            transition: transform 0.3s ease-out, opacity 0.3s ease-out;
            opacity: 0; 
            background-color: #f7f9fc;
        }
        body.dark .modal-content {
             background-color: #111827; 
        }
        .modal-backdrop:not(.hidden) .modal-content {
            transform: scale(1); opacity: 1;
        }
        
        /* Header Button Styling */
        .header-btn {
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            background-color: #eef2ff; 
            transition: all 0.2s;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            display: flex; 
        }
        .header-btn:hover {
            background-color: #c7d2fe; 
            color: #4f46e5;
        }

        /* NEW MOBILE RESPONSIVENESS: Hide text labels on small screens */
        @media (max-width: 768px) {
            .header-btn span {
                display: none;
            }
            .header-btn {
                padding: 0.5rem; 
            }
        }

        /* Positioning the top menu elements */
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start; /* Align menu to the top left */
            margin-bottom: 0.5rem; 
            padding-top: 0.5rem; 
            position: relative; /* Context for absolute placement */
        }

        /* Menu Icons (Top Left Corner) */
        .menu-top-left {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            position: absolute;
            top: 0; /* MOVED UPWARD */
            left: 0;
            z-index: 20;
        }

        /* Menu Icons (Top Right Corner) */
        .menu-top-right {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            position: absolute;
            top: 0; /* MOVED UPWARD */
            right: 0;
            z-index: 20;
        }

        /* Sidebar Styles */
        #sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 280px;
            height: 100%;
            background-color: #ffffff; 
            box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
            z-index: 60;
            padding: 1rem;
        }
        #sidebar.open {
            transform: translateX(0);
        }
        #sidebar-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 59;
            display: none;
        }
        #sidebar-backdrop.open {
            display: block;
        }
        body.dark #sidebar {
            background-color: #1f2937;
            color: #f3f4f6;
        }
        body.dark .menu-icon-btn { color: #818cf8; }
        body.dark .menu-icon-btn:hover { background-color: #1f2937; }
        body.dark .header-btn { background-color: #3730a3; color: #eef2ff; }
        body.dark .header-btn:hover { background-color: #4f46e5; }
        
        /* Style for the dedicated Translate button */
        #translateButton {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 1.5rem 0; /* Add margin above and below */
        }
        @media (min-width: 768px) {
            #translateButton {
                width: auto;
                margin: 0; 
                align-self: flex-end; /* Align to the bottom when in a row */
            }
        }

        /* Style to highlight the active input box on the desktop grid */
        @media (min-width: 768px) {
            #inputTextA.border-indigo-500 {
                border-width: 2px;
                border-color: #6366f1; /* indigo-500 */
            }
            #inputTextB.border-indigo-500 {
                border-width: 2px;
                border-color: #6366f1; /* indigo-500 */
            }
        }
       /* --- Custom CSS for Animation and Button Positioning --- */

/* 1. Animation Keyframes (from your input) */
@keyframes pulse-translate {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); 
    }
    50% {
        transform: scale(1.05); 
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); 
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    }
}

/* 2. Class to apply the animation (from your input) */
.is-translating {
    animation: pulse-translate 0.5s ease-out; 
}

/* 3. Button Positioning and Styles (CRITICAL ADDITIONS) */

/* Clear button position (inside the relative textarea container) */
.clear-btn {
    position: absolute;
    top: 10px; /* Adjust vertical position */
    right: 10px; /* Adjust horizontal position */
    padding: 0.25rem;
    border-radius: 9999px; /* Tailwind 'rounded-full' */
    color: #9ca3af; /* Tailwind gray-400 */
    background-color: transparent;
    transition: color 0.2s, background-color 0.2s;
    cursor: pointer;
}

.clear-btn:hover {
    color: #ef4444; /* Tailwind red-500 */
    background-color: #fecaca; /* Tailwind red-200 */
}

/* Speaker button styles (usually positioned outside the textarea, in the header) */
.speak-btn {
    color: #4f46e5; /* Tailwind indigo-600 */
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.speak-btn:hover {
    color: #1e40af; /* Tailwind blue-800 */
}

.speak-btn.loading {
    /* Spin animation for the loading state if needed, similar to the main spinner */
    opacity: 0.6;
    pointer-events: none;
}

/* --- TOAST & ICON ANIMATIONS --- */

/* 1. Pop-In Animation (for the entire toast) */
@keyframes toast-in {
    0% {
        opacity: 0;
        transform: translate(-50%, 50px); /* Starts off-screen (down) */
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0); /* Moves to final position */
    }
}

/* 2. Login/Signup Icon Animation (for a 'boost/check' look) */
@keyframes login-boost {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.2) rotate(-5deg); color: #34d399; } /* Tailwind green-400 */
    100% { transform: scale(1); }
}

/* 3. Logout Icon Animation (for a 'slide-out' look) */
@keyframes logout-slide {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(10px); opacity: 0; }
}

/* --- TOAST STATUS CLASSES --- */

/* Base class applied when the toast is visible */
.toast-visible {
    animation: toast-in 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; /* Applied on show */
    pointer-events: auto;
}

/* Style for successful login/signup */
.toast-success {
    background-color: #d1fae5; /* Tailwind green-100 */
    color: #065f46; /* Tailwind green-800 */
}
.toast-success #toastIcon {
    animation: login-boost 0.5s ease-out;
}

/* Style for successful logout */
.toast-logout {
    background-color: #fee2e2; /* Tailwind red-100 */
    color: #991b1b; /* Tailwind red-800 */
}
.toast-logout #toastIcon {
    animation: logout-slide 0.5s ease-out;
}

/* Style for errors (e.g., failed login/signup validation) */
.toast-error {
    background-color: #fef2f2; /* Tailwind red-50 */
    color: #b91c1c; /* Tailwind red-700 */
    border: 1px solid #fca5a5; /* Tailwind red-300 */
}

/* --- RESIZING SMOOTHNESS FIX --- */

/* Targets the text areas while they are actively being resized. */
/* This overrides the transition-all duration-300 class from Tailwind */
textarea:active {
    /* Temporarily disable transitions for smoother, instant dragging */
    transition: none !important; 
    
    /* Optional: Temporarily remove focus ring shadows if they are causing lag */
    box-shadow: none !important;
}

/* Ensure the focus state still applies transitions AFTER resizing is done */
textarea:focus {
    /* Re-apply transition rules for normal focus/hover states */
    transition: all 300ms ease-in-out; 
}
   /* --- CUSTOM LOGO STYLING (Existing + Centering) --- */
.lexiverse-logo-container {
    display: flex;
    align-items: center;
    justify-content: center; /* This centers the image horizontally within the container */
    flex-grow: 1; /* Allows it to take up the center space */
    text-decoration: none;
    color: inherit;
    /* Removed fixed width: 100px as flex-grow: 1 implies dynamic width. 
        If you need a specific size for the logo area, adjust as needed. */
}

/* 1. Image Styles and Animation Application */
.small-logo-img {
    /* Initial size for the image (adjust as needed, e.g., to match the '100px' context) */
    width: 125px; 
    height: auto;
    
    /* Apply the animation: pulse, 2 seconds, smooth, infinite loop */
    animation: pulse 2s ease-in-out infinite;
    /* Optional: Smooth transition for hover effects */
    transition: transform 0.3s ease-in-out;
}

/* Optional: Hover effect */
.small-logo-img:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}

/* 2. Keyframe Animation Definition (The Dynamic Pulse Effect) */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

/* --- Global Keyframes: Sonar Pulse Animation --- */
@keyframes sonar-pulse {
    0% {
        transform: translate(-50%, -50%) scale(1); /* Start expanded to the circle size */
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.25); /* Expand slightly further */
        opacity: 0;
    }
}

/* --- Speak Button Base Styles (Dynamic Blue/Indigo) --- */
.speak-btn {
    color: #3730a3; /* Indigo-700 for the icon */
    background-color: transparent; 
    border: none;
    cursor: pointer;
    padding: 0; 
    position: relative; 
    z-index: 10; 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    transition: color 0.2s ease-in-out, transform 0.1s ease-in-out; 
    margin-left: 5px; 
}

/* Solid Blue Background Circle */
.speak-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px; 
    height: 38px; 
    border-radius: 50%;
    background-color: #c3dafe; /* Light Blue solid background */
    transform: translate(-50%, -50%); 
    z-index: -1; 
    transition: background-color 0.2s, transform 0.2s;
}

/* Blue Sonar Pulse Effect */
.speak-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px; 
    height: 38px;
    border-radius: 50%;
    background-color: #6366f1; /* Indigo color for pulse */
    z-index: -2; 
    opacity: 0;
}

/* Pulse trigger: When the Speak button is active or loading */
.speak-btn:hover::after,
.speak-btn.loading::after {
    transform: translate(-50%, -50%) scale(1.05);
}

.speak-btn:not([disabled]):hover::before,
.speak-btn.loading::before {
    animation: sonar-pulse 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* --- Dark Mode Overrides for SPEAK Button --- */
body.dark .speak-btn {
    color: #c7d2fe; /* Light icon color */
}
body.dark .speak-btn::after {
    background-color: #3730a3; /* Dark Indigo solid background */
}
body.dark .speak-btn::before {
    background-color: #818cf8; /* Lighter pulse color in dark mode */
}


/* --- Stop Button Styles (Dynamic Red/Pink) --- */
.stop-btn {
    color: #ef4444; /* Red-500 for the icon */
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative; 
    z-index: 10; 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, color 0.2s ease-in-out; 
    
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

/* Solid Red Background Circle */
.stop-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px; 
    height: 38px; 
    border-radius: 50%;
    background-color: #fee2e2; /* Light Red solid background */
    transform: translate(-50%, -50%); 
    z-index: -1; 
    transition: background-color 0.2s, transform 0.2s;
}

/* Red Sonar Pulse Effect */
.stop-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px; 
    height: 38px;
    border-radius: 50%;
    background-color: #ef4444; /* Red color for pulse */
    z-index: -2; 
    opacity: 0;
}

/* Pulse trigger: When the Stop button is visible (i.e., not disabled) */
.stop-btn:not([disabled])::before {
    animation: sonar-pulse 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Active State: Stop Button visibility toggle (applied by JavaScript) */
.stop-btn:not([disabled]) {
    opacity: 1; 
    transform: scale(1); 
    pointer-events: auto; 
}

/* --- Dark Mode Overrides for STOP Button --- */
body.dark .stop-btn {
    color: #fca5a5; /* Light icon color */
}
body.dark .stop-btn::after {
    background-color: #991b1b; /* Dark Red solid background */
}
body.dark .stop-btn::before {
    background-color: #f87171; /* Lighter pulse color in dark mode */
}