/* static/css/app.css */

/* Dark Theme Variables */
:root {
    --dark-bg-primary: #121212; /* Deepest background (body, main content area) */
    --dark-bg-secondary: #1e1e1e; /* Sidebar, dialogs, footer */
    --dark-bg-tertiary: #2c2c2c; /* Inputs, item backgrounds, table headers */
    --dark-bg-hover: #383838; /* Hover for items, buttons */
    --dark-bg-active: #4a4a4a; /* Active state for items */

    --dark-text-primary: #e0e0e0; /* Main text */
    --dark-text-secondary: #b0b0b0; /* Subdued text, placeholders, timestamps */
    --dark-text-titles: #ffffff; /* For main titles, headings */
    --dark-text-on-accent: #121212; /* Text color for bright accent buttons */

    --dark-border-primary: #3a3a3a; /* Borders */
    --dark-border-focus: #80cbc4; /* Focus ring for inputs */

    --dark-accent-primary: #e57373; /* Adapted arXiv red (primary actions) */
    --dark-accent-primary-hover: #ef9a9a;
    --dark-accent-primary-active: #d32f2f;
    
    --dark-accent-green: #66bb6a; /* ELI5 Button */
    --dark-accent-green-hover: #81c784;
    --dark-accent-yellow: #ffee58; /* Undergraduate Button */
    --dark-accent-yellow-hover: #fff176;
    --dark-accent-red: #ef5350; /* Expert Button (distinct from primary) */
    --dark-accent-red-hover: #e57373;

    --dark-link-color: #82b1ff; /* Light blue for links */
    --dark-link-hover-color: #bbdefb;

    --dark-error-bg: #2c1d1d;
    --dark-error-border: #ef5350;
    --dark-error-text: #ef9a9a;

    --dark-scrollbar-thumb: #555;
    --dark-scrollbar-track: var(--dark-bg-secondary);
}

/* Basic Reset/Defaults & Global Dark Theme */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

* {
    font-family: inherit;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--dark-scrollbar-thumb) var(--dark-scrollbar-track);
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: var(--dark-scrollbar-track);
}
*::-webkit-scrollbar-thumb {
    background-color: var(--dark-scrollbar-thumb);
    border-radius: 4px;
    border: 2px solid var(--dark-scrollbar-track);
}

/* Page Wrapper for Sidebar and Main Content */
#cs-page-wrapper {
    display: flex;
    min-height: 100vh;
    background-color: var(--dark-bg-primary);
}

#cs-custom-sidebar {
    width: 500px;
    flex-shrink: 0;
    background-color: var(--dark-bg-secondary);
    padding: 10px;
    border-right: 1px solid var(--dark-border-primary);
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    font-size: 0.9em;
    color: var(--dark-text-primary);
}

/* --- ArXiv Navigation Section Styles --- */
#cs-arxiv-navigation {
    margin-bottom: 10px;
    padding: 8px;
    border-bottom: 1px solid var(--dark-border-primary);
    background-color: var(--dark-bg-tertiary);
    border-radius: 4px;
    border: 1px solid var(--dark-border-primary);
}

#cs-arxiv-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

#cs-arxiv-navigation #cs-arxiv-title-row h3 {
    margin: 0;
    font-size: 0.9em;
    padding-left: 20px; /* From original inline in app.py, kept for layout consistency if needed */
    color: var(--dark-text-titles) !important;
    font-weight: bold;
}

#cs-current-paper {
    font-size: 0.75em !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    padding: 2px 4px !important;
    border-radius: 2px !important;
    white-space: nowrap;
    color: var(--dark-text-primary) !important; /* Changed from secondary to primary for better visibility */
    background-color: var(--dark-bg-hover) !important; /* Changed to lighter background for better contrast */
    border: 1px solid var(--dark-border-focus) !important; /* Changed to accent border for better visibility */
}


#cs-arxiv-input-container {
    display: flex;
    gap: 5px;
}

#cs-arxiv-id-input {
    flex: 1;
    padding: 6px;
    border: 1px solid var(--dark-border-primary);
    border-radius: 3px;
    font-size: 0.8em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

#cs-arxiv-id-input:focus {
    outline: none;
    border-color: var(--dark-border-focus);
    box-shadow: 0 0 3px color-mix(in srgb, var(--dark-border-focus) 30%, transparent);
}

#cs-arxiv-id-input::placeholder {
    color: var(--dark-text-secondary);
    font-family: inherit;
    font-style: italic;
}

#cs-arxiv-go-button {
    padding: 6px 12px;
    background-color: var(--dark-accent-primary);
    color: var(--dark-text-on-accent);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

#cs-arxiv-go-button:hover {
    background-color: var(--dark-accent-primary-hover);
}

#cs-arxiv-go-button:active {
    background-color: var(--dark-accent-primary-active);
}

#cs-arxiv-go-button:disabled {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-secondary);
    cursor: not-allowed;
}

/* API Configuration Section - Horizontal Layout */
#cs-api-config {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--dark-border-primary);
}

#cs-api-row {
    display: flex;
    gap: 8px;
    align-items: end;
}

#cs-provider-col { flex: 1; }
#cs-key-col { flex: 2; }

#cs-api-config label {
    display: block;
    margin-bottom: 2px;
    font-weight: bold;
    font-size: 0.8em;
    color: var(--dark-text-secondary);
}

#cs-api-config select,
#cs-api-config input {
    width: 100%;
    padding: 5px;
    border: 1px solid var(--dark-border-primary);
    border-radius: 3px;
    font-size: 0.8em;
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}
#cs-api-config input::placeholder {
    color: var(--dark-text-secondary);
}

#cs-api-config select:focus,
#cs-api-config input:focus {
    outline: none;
    border-color: var(--dark-border-focus);
    box-shadow: 0 0 3px color-mix(in srgb, var(--dark-border-focus) 30%, transparent);
}

/* Main notes area that takes up remaining space and scrolls */
#cs-copied-content-target {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    margin-bottom: 10px;
    line-height: 1.4 !important;
}
#cs-copied-content-target > p > em {
    color: var(--dark-text-secondary);
    display: block;
    padding: 10px;
}


#cs-copied-content-target .cs-copied-item {
    background-color: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border-primary);
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 4px;
    font-size: 0.85em;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

#cs-copied-content-target .cs-copied-item:last-child {
    margin-bottom: 0;
}

#cs-copied-content-target .cs-copied-item h4 {
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 0.75em;
    color: var(--dark-text-secondary);
    font-weight: normal;
}

#cs-copied-content-target .cs-copied-item .cs-markdown-content img {
    max-width: 100%;
    height: auto;
    background-color: white;
    padding: 2px;
    border-radius: 3px;
}

/* Markdown content styles within sidebar items */
#cs-copied-content-target .cs-copied-item .cs-markdown-content h1 {
    font-size: 1.8em; margin: 8px 0 4px 0; font-weight: bold; line-height: 1.2;
    color: var(--dark-text-titles);
}
#cs-copied-content-target .cs-copied-item .cs-markdown-content h2 {
    font-size: 1.6em; margin: 6px 0 3px 0; font-weight: bold; line-height: 1.2;
    color: var(--dark-text-titles);
}
#cs-copied-content-target .cs-copied-item .cs-markdown-content h3 {
    font-size: 1.4em; margin: 5px 0 2px 0; font-weight: bold; line-height: 1.2;
    color: var(--dark-text-primary);
}
#cs-copied-content-target .cs-copied-item .cs-markdown-content h4,
#cs-copied-content-target .cs-copied-item .cs-markdown-content h5,
#cs-copied-content-target .cs-copied-item .cs-markdown-content h6 {
    font-size: 1.3em; margin: 4px 0 2px 0; font-weight: bold; line-height: 1.2;
    color: var(--dark-text-primary);
}
#cs-copied-content-target .cs-copied-item .cs-markdown-content p {
    margin: 4px 0; line-height: 1.4; font-size: 1rem;
    color: var(--dark-text-primary);
}
#cs-copied-content-target .cs-copied-item .cs-markdown-content ul,
#cs-copied-content-target .cs-copied-item .cs-markdown-content ol {
    margin: 4px 0; padding-left: 16px;
}
#cs-copied-content-target .cs-copied-item .cs-markdown-content li {
    margin: 2px 0; line-height: 1.4; font-size: 1rem;
    color: var(--dark-text-primary);
}
#cs-copied-content-target .cs-copied-item .cs-markdown-content pre {
    white-space: pre-wrap; word-wrap: break-word; max-height: 250px; overflow-y: auto;
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-secondary);
    padding: 6px; border-radius: 3px; font-size: 0.8em;
    border: 1px solid var(--dark-border-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#cs-copied-content-target .cs-copied-item .cs-markdown-content code {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-secondary);
    padding: 0.2em 0.4em; border-radius: 3px;
    border: 1px solid var(--dark-border-primary);
}
#cs-copied-content-target .cs-copied-item .cs-markdown-content a {
    color: var(--dark-link-color); text-decoration: underline;
}
#cs-copied-content-target .cs-copied-item .cs-markdown-content a:hover {
    color: var(--dark-link-hover-color);
}
#cs-copied-content-target .cs-copied-item .cs-markdown-content blockquote {
    border-left: 4px solid var(--dark-border-focus);
    padding-left: 1em; margin-left: 0;
    color: var(--dark-text-secondary);
}
#cs-copied-content-target .cs-copied-item .cs-markdown-content table {
    border-collapse: collapse; width: 100%; margin: 1em 0;
}
#cs-copied-content-target .cs-copied-item .cs-markdown-content th,
#cs-copied-content-target .cs-copied-item .cs-markdown-content td {
    border: 1px solid var(--dark-border-primary); padding: 0.5em; text-align: left;
}
#cs-copied-content-target .cs-copied-item .cs-markdown-content th {
    background-color: var(--dark-bg-hover);
}


/* Proxied HTML Main Content Area (Right Panel) */
#cs-proxied-main-content {
    flex-grow: 1; display: flex; flex-direction: column;
    height: 100vh; overflow: hidden;
    background-color: var(--dark-bg-primary);
}

#cs-main-article-content {
    flex: 1; padding: 20px; overflow-y: auto; min-height: 0;
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

/* --- Aggressive Dark Theme Overrides for Proxied Content --- */
#cs-main-article-content * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    color: var(--dark-text-primary) !important;
    background-color: transparent !important;
    border-color: var(--dark-border-primary) !important;
}

#cs-main-article-content a,
#cs-main-article-content a:link,
#cs-main-article-content a[href],
#cs-main-article-content a:visited {
    color: var(--dark-link-color) !important;
    text-decoration: underline !important;
    background-color: transparent !important;
}
#cs-main-article-content a:hover,
#cs-main-article-content a:active {
    color: var(--dark-link-hover-color) !important;
    background-color: transparent !important;
}

#cs-main-article-content h1, #cs-main-article-content .ltx_title,
#cs-main-article-content h2, #cs-main-article-content .ltx_part_title, #cs-main-article-content .ltx_chapter_title, #cs-main-article-content .ltx_section_title,
#cs-main-article-content h3, #cs-main-article-content .ltx_subsection_title,
#cs-main-article-content h4, #cs-main-article-content .ltx_subsubsection_title,
#cs-main-article-content h5, #cs-main-article-content .ltx_paragraph_title,
#cs-main-article-content h6, #cs-main-article-content .ltx_subparagraph_title {
    color: var(--dark-text-titles) !important;
    border-bottom-color: var(--dark-border-primary) !important;
    background-color: transparent !important;
}

#cs-main-article-content pre,
#cs-main-article-content code,
#cs-main-article-content tt,
#cs-main-article-content .ltx_verbatim,
#cs-main-article-content .ltx_listing,
#cs-main-article-content .ltx_listingblock,
#cs-main-article-content .ltx_font_typewriter {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-secondary) !important;
    border: 1px solid var(--dark-border-primary) !important;
    padding: 0.5em !important;
    border-radius: 4px !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
}
#cs-main-article-content code {
    padding: 0.2em 0.4em !important;
    font-size: 0.85em !important;
}


#cs-main-article-content table {
    border-collapse: collapse !important;
    margin: 1em 0 !important;
    background-color: transparent !important;
}
#cs-main-article-content th,
#cs-main-article-content td {
    border: 1px solid var(--dark-border-primary) !important;
    padding: 0.5em !important;
    color: var(--dark-text-primary) !important;
    background-color: transparent !important;
}
#cs-main-article-content th {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-titles) !important;
}
#cs-main-article-content caption,
#cs-main-article-content .ltx_caption {
    color: var(--dark-text-secondary) !important;
    background-color: transparent !important;
    margin-bottom: 0.5em !important;
}

#cs-main-article-content hr, 
#cs-main-article-content .ltx_rule {
    border: none !important;
    border-top: 1px solid var(--dark-border-primary) !important;
    background-color: transparent !important;
    height: 1px !important;
    margin: 1em 0 !important;
}

#cs-main-article-content .MathJax_SVG svg g path[fill] {
    fill: var(--dark-text-primary) !important;
}
#cs-main-article-content .MathJax_SVG svg g path[stroke] {
    stroke: var(--dark-text-primary) !important;
}
#cs-main-article-content .mjx-chtml {
    color: var(--dark-text-primary) !important;
}

#cs-main-article-content img {
    background-color: white !important;
    padding: 1px !important;
    border-radius: 2px !important;
}
#cs-main-article-content figure,
#cs-main-article-content .ltx_figure {
    border: none !important;
    background-color: transparent !important;
    padding: 0.5em !important;
}

/* Footer for Right Panel - Comprehensive overrides to prevent proxied CSS interference */
#cs-footer {
    background-color: var(--dark-bg-secondary) !important;
    border-top: 1px solid var(--dark-border-primary) !important;
    padding: 10px 20px !important;
    text-align: center !important;
    font-size: 14px !important;
    color: var(--dark-text-secondary) !important;
    flex-shrink: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
}

/* Target all possible child elements with maximum specificity */
#cs-footer *,
#cs-footer p,
#cs-footer a,
#cs-footer span,
#cs-footer strong,
#cs-footer em,
#cs-footer div,
#cs-footer ul,
#cs-footer li,
#cs-footer h1,
#cs-footer h2,
#cs-footer h3,
#cs-footer h4,
#cs-footer h5,
#cs-footer h6 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    font-weight: normal !important;
    font-style: normal !important;
}

#cs-footer p { 
    margin: 0 !important; 
    padding: 0 !important;
    color: var(--dark-text-secondary) !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    text-align: center !important;
}

#cs-footer a,
#cs-footer a:link,
#cs-footer a:visited,
#cs-footer a:hover,
#cs-footer a:active,
#cs-footer a:focus {
    color: #b31b1b !important;
    text-decoration: none !important;
    font-size: 14px !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    font-weight: normal !important;
    font-style: normal !important;
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
}
#cs-footer a:hover,
#cs-footer a:active {
    color: #d32f2f !important;
    text-decoration: underline !important;
}

/* Override any ::before or ::after pseudo-elements that might be added */
#cs-footer *::before,
#cs-footer *::after {
    content: none !important;
    display: none !important;
}


/* "Explain" Button (on text selection) */
#cs-dynamic-copy-button {
    background-color: var(--dark-accent-primary);
    color: var(--dark-text-on-accent);
    border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.45);
    font-size: 0.9em; font-weight: bold;
}
#cs-dynamic-copy-button:hover {
    background-color: var(--dark-accent-primary-hover);
}

/* --- Explain Dialog Styles --- */
#cs-explain-dialog {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 25000; justify-content: center; align-items: center;
    padding: 20px;
}
#cs-explain-dialog-content {
    background-color: var(--dark-bg-secondary);
    padding: 25px; border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    width: 100%; max-width: 550px;
    display: flex; flex-direction: column; gap: 15px;
    color: var(--dark-text-primary);
}
#cs-explain-dialog-content p {
    margin: 0; font-size: 0.95em; line-height: 1.5;
    color: var(--dark-text-primary);
}
#cs-explain-question-input {
    width: 100%; padding: 12px; border-radius: 5px; font-size: 1em; min-height: 70px;
    resize: vertical; font-family: inherit;
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border-primary);
}
#cs-explain-question-input::placeholder { color: var(--dark-text-secondary); }
#cs-explain-question-input:focus {
    outline: none; border-color: var(--dark-border-focus);
    box-shadow: 0 0 3px color-mix(in srgb, var(--dark-border-focus) 30%, transparent);
}
#cs-explain-dialog-buttons { display: flex; justify-content: flex-end; gap: 10px; }
#cs-explain-dialog-content button {
    padding: 10px 18px; border: none; border-radius: 5px; cursor: pointer;
    font-size: 0.95em; font-weight: 500; transition: background-color 0.2s ease;
}
#cs-explain-submit-button {
    background-color: var(--dark-accent-primary);
    color: var(--dark-text-on-accent);
}
#cs-explain-submit-button:hover { background-color: var(--dark-accent-primary-hover); }
#cs-explain-cancel-button {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}
#cs-explain-cancel-button:hover { background-color: var(--dark-bg-hover); }

/* --- Explanation Level Toggle Section --- */
#cs-explain-level-section {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--dark-border-primary);
    flex-shrink: 0; background-color: var(--dark-bg-secondary);
}

#cs-level-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

#cs-explain-level-section label {
    font-weight: bold;
    font-size: 0.85em;
    white-space: nowrap;
    color: var(--dark-text-secondary);
}

#cs-explanation-level {
    flex: 1;
    padding: 6px;
    border: 1px solid var(--dark-border-primary);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 0.85em;
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
    cursor: pointer;
}

#cs-explanation-level:focus {
    outline: none;
    border-color: var(--dark-border-focus);
    box-shadow: 0 0 3px color-mix(in srgb, var(--dark-border-focus) 30%, transparent);
}

#cs-quick-summary {
    padding: 6px 12px;
    background-color: var(--dark-accent-green);
    color: var(--dark-text-on-accent);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
    white-space: nowrap;
    transition: all 0.2s ease;
}

#cs-quick-summary:hover {
    background-color: var(--dark-accent-green-hover);
    transform: translateY(-1px);
}

#cs-quick-summary:active {
    transform: translateY(0);
    opacity: 0.9;
}

#cs-quick-summary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-secondary);
}

/* Error item styling */
.cs-error-item {
    background-color: var(--dark-error-bg) !important;
    border-left: 4px solid var(--dark-error-border) !important;
    color: var(--dark-error-text) !important;
    padding: 8px 12px !important;
}
.cs-error-item p {
    color: var(--dark-error-text) !important;
}
.cs-error-item p strong {
    color: var(--dark-error-text) !important;
}

/* --- Loader Styles --- */
.cs-loading-item {
    background-color: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border-primary);
    padding: 15px; margin-bottom: 8px; border-radius: 4px;
    text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.cs-loading-item p {
    margin-top: 8px; margin-bottom: 0; font-size: 0.8em;
    color: var(--dark-text-secondary);
}
.cs-loader {
  border: 3px solid var(--dark-bg-hover);
  border-top: 3px solid var(--dark-accent-primary);
  border-radius: 50%; width: 25px; height: 25px;
  animation: spin 1s linear infinite; margin: 0 auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- General Question Section Styles (compact) --- */
#cs-general-question-section {
    margin-top: 10px; padding-top: 8px;
    border-top: 1px solid var(--dark-border-primary);
    flex-shrink: 0; background-color: var(--dark-bg-secondary);
}
#cs-general-question-wrapper { position: relative; }
#cs-general-question-input {
    width: 100%; padding: 6px 40px 6px 8px;
    border: 1px solid var(--dark-border-primary);
    border-radius: 4px; font-size: 0.85em;
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}
#cs-general-question-input:focus {
    outline: none; border-color: var(--dark-border-focus);
    box-shadow: 0 0 3px color-mix(in srgb, var(--dark-border-focus) 30%, transparent);
}
#cs-general-question-input::placeholder { color: var(--dark-text-secondary); font-style: italic; }

#cs-general-question-send {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none !important; /* Added !important to override any inherited styles */
    background-color: transparent !important; /* Explicitly transparent */
    border: none; cursor: pointer; line-height: 0; padding:0;
}
/* SVG icon styling for general question send button */
#cs-general-question-send svg {
    display: block;
    pointer-events: none; /* The button itself is clickable */
    stroke: var(--dark-accent-primary); /* Default stroke for all shapes within this SVG */
    background: none !important; /* No background on SVG element */
    background-color: transparent !important; /* Explicitly transparent */
    /* fill: none; -> This is set inline on the SVG tag in app.py, which is good. */
}
#cs-general-question-send svg * {
    background: none !important; /* Remove background from all SVG child elements */
    background-color: transparent !important;
}
#cs-general-question-send svg rect {
    fill: none !important; /* In case there's a rect element creating the white square */
}
#cs-general-question-send svg circle {
    fill: var(--dark-bg-tertiary) !important; /* Dark background instead of transparent */
    /* Stroke color is inherited from the parent SVG's stroke property */
}
#cs-general-question-send svg polyline {
    fill: none !important; /* Ensure the arrow polyline is not filled */
    /* Stroke color is inherited from the parent SVG's stroke property */
}
/* The 'line' element for the arrow will also inherit stroke and doesn't have a fill property */

#cs-general-question-send:hover svg { stroke: var(--dark-accent-primary-hover); }
#cs-general-question-send:active svg { opacity: 0.8; }

/* --- Explanation Level Buttons Section --- */
#cs-explain-buttons-section {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--dark-border-primary);
    flex-shrink: 0; background-color: var(--dark-bg-secondary);
}
#cs-explain-buttons-container { display: flex; gap: 4px; }
#cs-explain-buttons-container button {
    flex: 1; padding: 6px 2px; border: none; border-radius: 3px; cursor: pointer;
    font-size: 0.75em; font-weight: bold; transition: all 0.2s ease; text-align: center;
}
#cs-explain-eli5 { background-color: var(--dark-accent-green); color: var(--dark-text-on-accent); }
#cs-explain-eli5:hover { background-color: var(--dark-accent-green-hover); transform: translateY(-1px); }
#cs-explain-undergraduate { background-color: var(--dark-accent-yellow); color: var(--dark-text-on-accent); }
#cs-explain-undergraduate:hover { background-color: var(--dark-accent-yellow-hover); transform: translateY(-1px); }
#cs-explain-expert { background-color: var(--dark-accent-red); color: var(--dark-text-on-accent); }
#cs-explain-expert:hover { background-color: var(--dark-accent-red-hover); transform: translateY(-1px); }
#cs-explain-buttons-container button:active { transform: translateY(0); opacity: 0.9; }
#cs-explain-buttons-container button:disabled {
    opacity: 0.5; cursor: not-allowed; transform: none;
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-secondary);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #cs-page-wrapper { flex-direction: column; }
    #cs-custom-sidebar {
        width: 100%; height: 50vh; position: relative; padding: 8px;
    }
    #cs-proxied-main-content { height: 50vh; min-height: 50vh; }
    #cs-main-article-content { padding: 10px; }
    #cs-api-row { flex-direction: column; gap: 5px; }
    #cs-provider-col, #cs-key-col { flex: none; }
    #cs-arxiv-navigation { margin-bottom: 8px; padding: 6px; }
    #cs-arxiv-title-row { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 4px; }
    #cs-arxiv-id-input { font-size: 0.75em; }
    #cs-arxiv-go-button { font-size: 0.75em; padding: 6px 8px; }

    @media (max-width: 480px) {
        #cs-explain-buttons-container { flex-direction: column; gap: 3px; }
        #cs-explain-buttons-container button { font-size: 0.8em; padding: 8px; }
        #cs-arxiv-input-container { flex-direction: column; gap: 3px; }
        #cs-arxiv-go-button { width: 100%; }
        #cs-arxiv-title-row { gap: 4px; }
    }
}

.cs-eq-help{
    display:inline-block;
    margin-left:4px;
    width:16px;
    height:16px;
    line-height:14px;              /* centres the “?” */
    text-align:center;
    font-size:10px;
    font-weight:bold;
    border-radius:50%;
    background-color:var(--dark-accent-red) !important;      /* red circle */
    color:#ffffff;                                /* white “?” */
    border:1px solid var(--dark-accent-red-hover) !important;
    cursor:pointer;
    user-select:none;
}
.cs-eq-help:hover{
    background-color:var(--dark-accent-red-hover) !important;/* lighter red on hover */
    color:#ffffff;
}

/* keep the red circle even inside #cs-main-article-content  */
#cs-main-article-content .cs-eq-help{
    background-color:var(--dark-accent-red) !important;
    border:1px solid var(--dark-accent-red-hover) !important;
    color:#ffffff !important;
}
#cs-main-article-content .cs-eq-help:hover{
    background-color:var(--dark-accent-red-hover) !important;
}

#cs-main-article-content .ltx_eqn_table,
#cs-main-article-content .ltx_eqn_table th,
#cs-main-article-content .ltx_eqn_table td{
    border:none !important;          /* kill the 1-pixel frame */
}

/*BETA corner banner*/
body:after {
    content: "beta";
    position: fixed;
    z-index: 1070;
    width: 80px;
    height: 25px;
    background: #fb595a;
    top: 7px;
    left: -20px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 1px;
    font-family: sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    color: black;
    line-height: 27px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

/* Add these styles to your app.css file */

/* Image selection styles */
#cs-main-article-content img {
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

#cs-main-article-content img:hover {
    box-shadow: 0 0 0 3px var(--dark-accent-primary) !important;
    opacity: 0.9 !important;
    transform: scale(1.02) !important;
}

#cs-main-article-content img.cs-selected-image {
    box-shadow: 0 0 0 4px var(--dark-accent-primary) !important;
    opacity: 0.85 !important;
}

/* Style for when Ask AI button appears over images */
#cs-dynamic-copy-button.cs-image-mode {
    background-color: rgba(227, 115, 115, 0.95); /* semi-transparent version of accent color */
    backdrop-filter: blur(4px);
}

/* Optional: Add a help tooltip on image hover */
#cs-main-article-content img::after {
    content: "Click to ask AI about this image";
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

#cs-main-article-content img:hover::after {
    opacity: 1;
}