html {
    width: 100%;
    height: 100%;
    background: none;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: none;
    font-family: Arial, sans-serif;
    overflow: hidden;
    position: relative;
    /* Use a base text color that contrasts with the chosen hljs theme background */
    color: #ccc; /* Example for dark themes */
    pointer-events: none; /* Make the body click-through by default */
}

/* --- Instruction Banner --- */
#instruction-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 0 0 8px 8px;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: opacity 0.3s ease;
    user-select: none;
    opacity: 1;
}

/* --- Response Overlay --- */
#response-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    z-index: 9998;
    backdrop-filter: blur(3px);
    /* Flexbox layout */
    display: flex;
    flex-direction: column;
    /* Removed justify-content: center */
    align-items: center; /* Center horizontally */
    padding: 20px 0; /* Add some padding top/bottom */
    box-sizing: border-box;
    height: 100%; /* Ensure overlay takes full height */
}

#response-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* --- Response Box --- */
#response-box {
    /* Removed absolute positioning */
    flex-grow: 0; /* Don't force growth */
    flex-shrink: 1; /* Allow shrinking */
    width: 90%;
    max-width: 900px;
    max-height: calc(100vh - 250px); /* Explicit max-height leaving ~250px */
    overflow-y: auto;
    background: rgba(25,25,25,0.95); /* Fallback background */
    color: #f0f0f0; /* Base text color inside the box */
    /* Removed margin-bottom */
    padding: 25px;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.6; /* Slightly increase for readability */
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    pointer-events: auto; /* Enable interactions with this element */
}

/* --- Scrollbar --- */
#response-box::-webkit-scrollbar {
    width: 8px;
    pointer-events: auto; /* Explicitly enable pointer events on scrollbar */
}
#response-box::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
}
#response-box::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 4px;
}

/* --- Styling for <pre> blocks (container for code) --- */
/* Let Highlight.js control background and text color inside */
pre {
    /* background: rgba(40,40,40,0.95); */ /* Let theme handle background */
    /* color: #f0f0f0; */ /* Let theme handle text color */
    padding: 1em; /* Use em for padding relative to font size */
    border-radius: 6px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    margin: 1.5em 0; /* More vertical space */
    border: 1px solid rgba(255,255,255,0.1); /* Optional border */
    font-family: 'Fira Code', Consolas, 'Courier New', monospace; /* Ensure monospace font */
    font-size: 0.9em; /* Slightly smaller font for code */
}

/* --- Styling for inline `code` (outside pre) --- */
/* Keep specific styling for non-highlighted inline code */
code:not(pre code) { /* Target only code NOT inside pre */
    font-family: 'Fira Code', Consolas, 'Courier New', monospace;
    background: rgba(60,60,60,0.95);
    color: #fff;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.9em; /* Match code block font size */
    word-break: keep-all;
    white-space: normal;
}

/* --- General Paragraph Margins --- */
#response-box p { margin: 0 0 1em 0; } /* Use em for spacing */
#response-box p:last-child { margin-bottom: 0; }

/* --- Error Message --- */
.error-message {
    color: #ff6b6b; /* Slightly softer red */
    background: rgba(255,68,68,0.1);
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #ff6b6b;
    margin: 1.5em 0;
    white-space: pre-wrap;
    font-family: monospace; /* Use monospace for errors often containing code/paths */
}
.error-message strong { color: #ff4444; }

/* --- Loading Indicator --- */
#loading-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 10000;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s;
    backdrop-filter: blur(3px);
}
#loading-overlay.visible { opacity: 1; visibility: visible; }
.loading-bar-container {
    width: 250px; /* Increased width for better visual */
    height: 25px; /* Increased height */
    border: 2px solid #fff; /* White border */
    border-radius: 12.5px; /* Half of height for rounded ends */
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow */
}

.loading-bar {
    width: 0%;
    height: 100%;
    background-color: #000; /* Black filling color */
    /* Diagonal stripes using linear gradient */
    background-image: linear-gradient(
        -45deg,
        rgba(255, 255, 255, .2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, .2) 50%,
        rgba(255, 255, 255, .2) 75%,
        transparent 75%,
        transparent
    );
    background-size: 40px 40px; /* Size of the stripe pattern */
    animation: fill 2s linear infinite, stripes 1s linear infinite; /* Fill animation and stripe movement */
}

@keyframes fill {
    0% { width: 0%; }
    100% { width: 100%; }
}

@keyframes stripes {
    to { background-position: 40px 0; }
}

@keyframes fill {
    0% { width: 0%; }
    100% { width: 100%; }
}

#loading-text { margin-top: 20px; color: #fff; font-size: 16px; }
#loading-timer { margin-top: 10px; color: rgba(255,255,255,0.7); font-size: 14px; }

#followup-container {
    flex-grow: 0;
    flex-shrink: 0;
    margin-top: auto;
    width: 90%; max-width: 900px; display: flex; flex-direction: column;
    background: rgba(40,40,40,0.95); border-radius: 8px; padding: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3); z-index: 9999; display: none;
    pointer-events: auto;
}
#response-overlay.visible #followup-container.active { display: flex; }
#followup-options { display: flex; justify-content: space-between; margin-bottom: 10px; }
.followup-btn {
    background: rgba(60,60,60,0.95); color: #fff; border: 1px solid transparent;
    border-radius: 4px; padding: 8px 15px; cursor: default !important; font-size: 14px;
    transition: background 0.2s ease, border-color 0.2s ease; flex: 1; margin: 0 5px;
    pointer-events: auto;
}
.followup-btn:hover { background: rgba(80,80,80,0.95); }
.followup-btn.active { background: rgba(100,100,255,0.3); border-color: rgba(100,100,255,0.5); }
#followup-input-container { display: flex; width: 100%; }
#followup-textarea {
    flex: 1; height: 80px; background: rgba(25,25,25,0.9); color: #fff;
    border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 10px;
    font-family: Arial, sans-serif; font-size: 14px; resize: none;
    pointer-events: auto;
}
#followup-textarea:focus { outline: none; border-color: rgba(100,100,255,0.5); }
#followup-submit {
    width: 120px; background: #3d8aff; color: #fff; border: none; border-radius: 4px;
    margin-left: 10px; cursor: default !important; font-size: 14px; font-weight: bold;
    transition: background 0.2s ease; pointer-events: auto;
}
#followup-submit:hover { background: #2a6fd1; }
#followup-submit:disabled { background: #666; cursor: not-allowed !important; }
#screenshot-instructions {
    display: none; color: #fff; background: rgba(60,60,255,0.2); padding: 10px;
    border-radius: 4px; margin-top: 10px; text-align: center; font-size: 14px;
    border: 1px solid rgba(60,60,255,0.3);
}


#gemini-api-key-container {
    display: none; 
    position: fixed; 
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%; 
    max-width: 400px;
    padding: 10px 15px;
    background: rgba(40, 40, 40, 0.9);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    z-index: 9997; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    pointer-events: auto;
}
#gemini-api-key-container.visible {
    display: block;
}
#gemini-api-key-label {
    display: block;
    font-size: 13px;
    color: #ccc;
    margin-bottom: 5px;
}
#gemini-api-key-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(25,25,25,0.9);
    color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    pointer-events: auto; /* Allow typing */
    cursor: text !important; /* Ensure text cursor */
}
#gemini-api-key-input:focus {
    outline: none;
    border-color: #3d8aff;
}


#response-box .hljs {
    background: transparent !important;
    color: inherit;
}

/* Force default cursor on all elements */
* {
    cursor: default !important;
}

/* Override any hover states that might change cursor */
input:hover,
textarea:hover,
button:hover,
a:hover,
#response-box:hover,
#followup-textarea:hover,
#followup-submit:hover,
.followup-btn:hover {
    cursor: default !important;
}

/* Override text selection cursor */
*::selection {
    cursor: default !important;
}

/* Additional specific overrides for content within scrollable areas */
#response-box *,
#response-box *:hover {
    cursor: default !important;
}
/* --- Login Form --- */
#login-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10,10,10, 0.95); /* Dark background */
    z-index: 10001; /* Above loading overlay */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #eee;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 8px; /* Added this line */
    pointer-events: auto; /* Allow interaction */
}
#login-container.hidden {
    display: none;
}
    #login-form {
    background: rgba(40, 40, 40, 0.8);
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    text-align: center;
    width: 100%;
    max-width: 350px;
}
#login-form h2 {
    margin-top: 0;
    margin-bottom: 25px;
    color: #fff;
    font-weight: 300;
}
.login-input {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(25,25,25,0.9);
    color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    pointer-events: auto; /* Allow typing */
    cursor: text !important; /* Ensure text cursor */
}
.login-input:focus {
    outline: none;
    border-color: #3d8aff;
}
.login-button {
    width: calc(50% - 5px); /* Two buttons side-by-side */
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    cursor: default !important; /* Keep default cursor */
    transition: background 0.2s ease;
    margin-top: 10px;
    pointer-events: auto; /* Allow clicking */
}
#signin-button {
    background: #3d8aff;
    color: #fff;
    margin-right: 10px;
}
#signin-button:hover {
    background: #2a6fd1;
}
#signup-button {
    background: #555;
    color: #fff;
}
#signup-button:hover {
    background: #444;
}
#login-error {
    color: #ff6b6b;
    margin-top: 15px;
    font-size: 13px;
    min-height: 18px; /* Reserve space */
    text-align: center;
}

/* Initially hide app elements */
body:not(.authenticated) #instruction-banner,
body:not(.authenticated) #response-overlay,
body:not(.authenticated) #loading-overlay:not(.visible) /* Allow loading overlay if explicitly shown */
{
    display: none;
}