:root {
    /* Primary backgrounds - Deep blacks like your auth screen */
    --bg-primary: #181818;
    --bg-secondary: #242424;
    --bg-tertiary: #343434;
    --bg-quaternary: #404040;
    
    /* Text colors - High contrast whites and greys */
    --text-primary: rgba(255, 255, 255, 0.7);
    --text-secondary: rgba(255, 255, 255, 0.6);
    --text-tertiary: rgba(255, 255, 255, 0.5);
    --text-quaternary: rgba(255, 255, 255, 0.4);
    --text-stream: rgba(255, 255, 255, 0.2);
    --text-overlay: rgba(255, 255, 255, 0.7);
    
    /* Border colors - More visible borders */
    --border-color: rgba(255, 255, 255, 0.12);
    --border-secondary: rgba(255, 255, 255, 0.18);
    --border-tertiary: rgba(255, 255, 255, 0.25);
    
    /* Accent colors */
    --accent-color: #50fa7b;
    --accent-hover: #3dd688;
    --accent-bg: rgba(80, 250, 123, 0.05);
    --accent-bg-hover: rgba(80, 250, 123, 0.1);
    --accent-border: rgba(80, 250, 123, 0.2);
    --accent-replay: #1E90FF;
    
    /* Code highlighting */
    --code-bg: #242424;
    --code-text: #ffffff;
    --code-keyword: #50fa7b;
    --code-string: rgba(255, 255, 255, 0.8);
    --code-comment: rgba(255, 255, 255, 0.4);
    
    /* YAML specific colors */
    --yaml-bg: #242424;
    --yaml-key: #509ffa;
    --yaml-value: #50fa7b;
    
    /* Status colors with transparency support */
    --error-bg: rgba(255, 107, 107, 0.05);
    --error-color: #ff6b6b;
    --success-color: #50fa7b;
    --success-color-primary: #50fa7b;
    --success-color-auxiliary: #3dd688;
    --warning-color: #ffb74d;
    --info-color: #5dade2;
    
    /* Glassmorphism and blur effects */
    --glass-bg: rgba(255, 255, 255, 0.02);
    --glass-border: rgba(255, 255, 255, 0.05);
    --backdrop-blur: blur(10px);
    
    /* Shadows - Deep and subtle */
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-heavy: 0 20px 60px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    /* Component specific backgrounds */
    --tool-call-bg: #1e1e1e;
    --tool-call-border: #50fa7b;
    --tool-call-thinking-border: #50fa7b;
    --tool-call-text: rgba(255, 255, 255, 0.6);
    --tool-call-action-text: #50fa7b;
    
    /* Data display */
    --mermaid-bg: #1a1a1a;
    --dataframe-header-bg: #2a2a2a;
    --dataframe-header-text: #ffffff;
    --dataframe-even-row: rgba(255, 255, 255, 0.02);
    --dataframe-hover: rgba(255, 255, 255, 0.05);
    --cache-manager-accent: #a855f7;
    
    /* Interactive elements */
    --dropdown-bg: #1a1a1a;
    --modal-bg: #1a1a1a;
    --modal-text: #ffffff;
    --overlay-bg: rgba(0, 0, 0, 1);
    
    /* Scrollbars */
    --scrollbar-thumb: rgba(255, 255, 255, 0.1);
    --scrollbar-track: transparent;
    
    /* Special UI elements */
    --star-inactive: rgba(255, 255, 255, 0.2);
    --highlight-bg: rgba(80, 250, 123, 0.15);
    --link-hover-bg: rgba(255, 255, 255, 0.05);
    
    /* System and research elements */
    --system-message-bg: #242424;
    --system-message-text: #50fa7b;
    --summary-popup-bg: #242424;
    --summary-popup-border: rgba(80, 250, 123, 0.3);
    --summary-popup-text: #50fa7b;
    --research-item-bg: #242424;
    --research-header: #ffffff;
}

[data-theme="light"] {
    /* Light theme */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f8f8;
    --bg-tertiary: #f5f5f7;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --text-quaternary: #ababab;
    --text-stream:#d0d0d0;
    --text-overlay: rgba(0, 0, 0, 0.7);
    --border-color: #dddddd;
    --accent-color: #35c477;
    --accent-hover: #2a9d5d;
    --accent-replay: #0064FF;
    --code-bg: #f8f8f8;
    --code-text: #333333;
    --code-keyword: #229922; /* Brighter green for keywords */
    --code-string: #727272;
    --code-comment: #999999;
    --yaml-bg: #f5f5f5;
    --yaml-key: #018c01; /* Dark green in light mode */
    --yaml-value: #006600;
    --error-bg: #fff0f0;
    --error-color: #ff0000;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --tool-call-bg: #f8f8f8;
    --tool-call-border: #35c477;
    --tool-call-thinking-border: #35c477;
    --tool-call-text: #555555;
    --success-color: #35c477;
    --mermaid-bg: #f5f5f5;
    --dataframe-header-bg: #f8f9fa;
    --dataframe-header-text: #2c3e50;
    --dataframe-even-row: #fafafa;
    --dataframe-hover: #f5f9ff;
    --cache-manager-accent: #9333ea; /* Purple for cache manager text */
    --dropdown-bg: #ffffff;
    --modal-bg: #f8f8f8;
    --modal-text: #444444;
    --star-inactive: #cccccc;
    --summary-popup-bg: #e6ffe6;
    --summary-popup-border: #99ff99;
    --summary-popup-text: #006400;
    --system-message-bg: #f0f8f0;
    --system-message-text: #35c477;
    --research-item-bg: #f9f9f9;
    --research-header: #2c3e50;
    --link-hover-bg: #f0f8f4;
    --scrollbar-thumb: #d1d1d1;
    --scrollbar-track: #f1f1f1;
    --highlight-bg: rgba(53, 196, 119, 0.2);
    --overlay-bg: rgba(255, 255, 255, 1);
    --warning-color: #ff9800;
    --mermaid-diagram-bg: #1a1a1a; /* Consistent across themes for contrast */
    --mermaid-primary-color: #384B5E;
    --mermaid-text-color: #C1DAFF;
    --success-color-primary: #35c477;
    --success-color-auxiliary: #2a9d5d;
    --success-color-primary-bg: #e6f7ef; /* Light green background for light theme */
    --success-color-auxiliary-bg: #e0f2e8; /* Slightly different light green for light theme */
    --error-color-bg: #fff0f0; /* For error pills in light theme */
    --bg-tertiary: #f5f5f7; /* Ensure this is defined */
    --text-secondary: #666666; /* Ensure this is defined */
    --border-color: #dddddd; /* Ensure this is defined */
    --info-color: #2978b5;         /* Example: A distinct blue */
    --info-color-bg: #eaf2f8;      /* Light blue background for light theme */
    --info-color-hover-bg: #d5e5f1;/* Slightly darker for hover */
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    color: var(--text-overlay);
    font-size: 18px;
    font-family: inherit;
}

.loading-overlay .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 12px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: 100%;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
}

.container {
    display: flex;
    height: 100%;
    transition: all 0.3s;
}

.collapse-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: left 0.3s, transform 0.3s;
}

.collapse-button:hover {
    background-color: var(--accent-color);
}

.collapse-button svg {
    width: 24px;
    height: 24px;
    fill: var(--accent-color);
}

.left-panel {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border-color);
    transition: all 0.1s;
    background-color: var(--bg-primary);
}

.left-panel.collapsed {
    flex: 0;
    width: 0;
    border: none;
}

.right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.2s;
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--bg-primary);
}

.right-panel.expanded {
    flex: 2;
}

.session-ids {
    color: var(--accent-color);
    border: none;
    margin: 0;
    padding: 2px 4px; /* Match .tool-start */
    font-size: 12px;
    display: block;
}

/* Style for each row to control spacing */
.id-row {
    line-height: 1.2;
    margin-bottom: 1px;
}

.id-label {
    color: var(--accent-color);
    margin-right: 4px;
}

.id-value {
    color: var(--text-secondary);
    word-break: break-all;
}

.input-area {
    padding: 5px;
    background-color: var(--bg-primary);
    display: flex;
    flex-direction: column;
}

.input-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 10px;
}

.textarea-container {
    position: relative;
    flex: 1;
}

.icon-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--accent-color);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.2s;
}

.icon-button svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
}

.icon-button:hover {
    transform: scale(1.1);
}

.icon-button.disabled {
    color: var(--text-tertiary);
    pointer-events: none;
    opacity: 1;
}

.icon-row {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 10px;
}

.submit-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 4px;
    background-color: var(--accent-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.submit-button:hover {
    background-color: var(--accent-hover);
    transform: scale(1.05);
}

.submit-button:active {
    transform: scale(0.95);
}

.submit-button svg {
    stroke: white;
    width: 18px;
    height: 18px;
}

.attach-icon { left: 10px; }
.planning-brain { left: 40px; }
.guide-icon { left: 70px; }
.rank-icon { left: 100px; }

#queryInput {
    width: 100%;
    min-height: 60px;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 10px 60px 40px 10px;
    font-size: 14px;
    resize: none;
    overflow-y: hidden;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.external-context-indicator {
    position: absolute;
    top: -20px;
    right: 10px;
    font-size: 11px;
    color: var(--accent-color);
    background: var(--bg-primary);
    padding: 0 6px;
    z-index: 10;
    font-style: italic;
    cursor: pointer;
    user-select: none;
}

.external-context-indicator:hover {
    color: var(--accent-hover);
}

.url-list-popup {
    position: absolute;
    bottom: 100%;  /* Changed from top: 10px */
    margin-bottom: 25px;  /* Add some space above the textarea */
    right: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    max-width: 400px;
    box-shadow: 0 2px 10px var(--shadow-color);
    z-index: 100;
}

.url-list-popup a {
    display: block;
    color: var(--accent-color);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    word-break: break-all;
    font-size: 12px;
}

.url-list-popup a:hover {
    background: var(--bg-tertiary);
    text-decoration: underline;
}

#streamOutput {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background-color: var(--bg-primary);
    white-space: pre-wrap;
    font-family: monospace;
    color: var(--text-secondary);
}

/* --- Dataset Status Pills --- */

/* Container for all dataset status pills */
#datasetStatusPillsContainer {
    display: flex;
    flex-wrap: wrap; /* Allows pills to wrap */
    gap: 8px;        /* Space between pills */
    padding: 0px 10px 5px 10px; /* Top padding 0, L/R/B padding */
    margin-top: 2px;   /* Reduced margin from input box */
}

/* Base individual pill style */
.dataset-status-pill {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 16px;
    font-size: 13px;    /* Standardized from previous step */
    font-style: italic; /* Standardized from previous step */
    border: 1px solid transparent; /* Base, specific states will override */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* Content within the pill (text + spinner) */
.dataset-pill-content {
    display: flex;
    align-items: center;
    gap: 6px; /* Space between text and spinner */
    /* Transition for hover effects if applied directly here */
    transition: opacity 0.2s ease; /* Example if you wanted text to fade slightly */
}

/* Clickable content area (for successfully loaded pills) */
.clickable-pill-content {
    cursor: pointer; /* Hand cursor on hover */
    /* Transitions for hover effects are on the parent .dataset-status-pill or specific states */
}

/* Spinner style */
.file-upload-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--highlight-bg); /* Track color */
    border-top-color: currentColor; /* Spinner color matches text color of its state */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Remove icon style */
.dataset-pill-remove-icon {
    margin-left: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.dataset-pill-remove-icon svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    /* Stroke color will be set by specific pill states */
}
.dataset-status-pill:hover .dataset-pill-remove-icon { /* Show remove icon more clearly on pill hover */
    opacity: 1;
}

/* --- Pill States (Loading, Success, Error) --- */

/* Loading State (applies to both primary and auxiliary) */
.dataset-status-pill.loading {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
.dataset-status-pill.loading .dataset-pill-remove-icon {
    display: none; /* Hide remove icon during loading */
}

/* Error State (applies to both primary and auxiliary) */
.dataset-status-pill.error {
    background-color: var(--error-color-bg);
    color: var(--error-color);
    border-color: var(--error-color);
}
.dataset-status-pill.error .dataset-pill-remove-icon svg {
    stroke: var(--error-color);
}
.dataset-status-pill.error .clickable-pill-content { /* Errors are not clickable for preview */
    cursor: default;
}


/* --- Primary Dataset Pill: Success State --- */
.primary-dataset-pill.success {
    background-color: var(--success-color-primary-bg);
    color: var(--success-color-primary);
    border-color: var(--success-color-primary);
}
.primary-dataset-pill.success .dataset-pill-remove-icon svg {
    stroke: var(--success-color-primary);
}

.primary-dataset-pill.success:hover { /* Hover on the entire pill */
     background-color: #d4f0e3; /* Slightly darker than --success-color-primary-bg for light theme */
}


/* Dark Theme Override for Primary Success Pill */
[data-theme="dark"] .primary-dataset-pill.success {
    background-color: transparent; /* No fill */
    color: var(--success-color-primary);
    border: 1px solid var(--success-color-primary);
}
[data-theme="dark"] .primary-dataset-pill.success .dataset-pill-remove-icon svg {
    stroke: var(--success-color-primary);
}
/* Hover effect for Dark Theme Primary Success */
[data-theme="dark"] .primary-dataset-pill.success:hover {
    background-color: rgba(80, 250, 123, 0.08); /* Very subtle accent background on hover */
    /* border-color: #70ff9b; /* Optional: slightly brighter border on hover */
}


/* --- Auxiliary Dataset Pill: Success State --- */
.auxiliary-dataset-pill.success {
    background-color: var(--success-color-auxiliary-bg);
    color: var(--success-color-auxiliary);
    border-color: var(--success-color-auxiliary);
}
.auxiliary-dataset-pill.success .dataset-pill-remove-icon svg {
    stroke: var(--success-color-auxiliary);
}
/* Hover effect for Light Theme Auxiliary Success */
.auxiliary-dataset-pill.success:hover { /* Hover on the entire pill */
    background-color: #ccebde; /* Slightly darker than --success-color-auxiliary-bg for light theme */
}

/* Dark Theme Override for Auxiliary Success Pill */
[data-theme="dark"] .auxiliary-dataset-pill.success {
    background-color: transparent; /* No fill */
    color: var(--success-color-auxiliary);
    border: 1px solid var(--success-color-auxiliary);
}
[data-theme="dark"] .auxiliary-dataset-pill.success .dataset-pill-remove-icon svg {
    stroke: var(--success-color-auxiliary);
}
/* Hover effect for Dark Theme Auxiliary Success */
[data-theme="dark"] .auxiliary-dataset-pill.success:hover {
    background-color: rgba(61, 214, 136, 0.08); /* Very subtle accent background for auxiliary on hover */
    /* border-color: #5edc9c; /* Optional: slightly brighter border on hover */
}

/* --- Ontology Pill Styles --- */
.ontology-dataset-pill.loading { /* Same as other loading pills */
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
.ontology-dataset-pill.error { /* Same as other error pills */
    background-color: var(--error-color-bg);
    color: var(--error-color);
    border-color: var(--error-color);
}
.ontology-dataset-pill.error .dataset-pill-remove-icon svg {
    stroke: var(--error-color);
}

/* Success State for Ontology Pill - Light Theme */
.ontology-dataset-pill.success {
    background-color: var(--info-color-bg);
    color: var(--info-color);
    border-color: var(--info-color);
}
.ontology-dataset-pill.success .dataset-pill-remove-icon svg {
    stroke: var(--info-color);
}
.ontology-dataset-pill.success:hover {
    background-color: var(--info-color-hover-bg);
}

/* Success State for Ontology Pill - Dark Theme (No Fill) */
[data-theme="dark"] .ontology-dataset-pill.success {
    background-color: transparent;
    color: var(--info-color); /* Use the dark theme info color for text */
    border: 1px solid var(--info-color); /* Use the dark theme info color for border */
}
[data-theme="dark"] .ontology-dataset-pill.success .dataset-pill-remove-icon svg {
    stroke: var(--info-color); /* Use the dark theme info color */
}
[data-theme="dark"] .ontology-dataset-pill.success:hover {
    background-color: rgba(93, 173, 226, 0.1); /* Subtle hover using dark theme info color */
}

/* General Header for all modals */
.modal-header-section {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    justify-content: center; /* Center all headers */
}

.modal-header-section img {
    display: none; /* Hide icon from all three modals */
}

.modal-header-section h3 {
    color: var(--accent-color); /* Use accent color for all headers */
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

/* --- Shared Helper Classes (Buttons, Labels) --- */

.circular-button {
    background-color: transparent;
    color: var(--accent-color);
    border: 1.5px solid var(--accent-color);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
    margin: 16px auto 0;
}

.circular-button:hover:not(:disabled) {
    background-color: var(--highlight-bg);
    color: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: scale(1.05);
}

.circular-button:active {
    transform: scale(0.95);
}

.circular-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    border-color: var(--text-tertiary);
    color: var(--text-tertiary);
}

.circular-button:disabled:hover {
    background-color: transparent;
    transform: none;
    color: var(--text-tertiary);
    border-color: var(--text-tertiary);
}

.circular-button svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.button-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 6px;
    font-weight: 400;
}

[data-theme="dark"] .button-label {
    color: var(--text-secondary);
}

.circular-button.loading {
    pointer-events: none;
}

.circular-button.loading svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- Generic Toast System --- */

.summary-popup.system-message {
    background-color: var(--system-message-bg);
    border: 1px solid var(--system-message-text);
    color: var(--system-message-text);
    border-radius: 6px;
    box-shadow: 0 2px 10px var(--shadow-color);
    padding-right: 40px; /* Creates space on the right for the close button */
}

.summary-popup.system-message pre {
    color: var(--system-message-text);
    background-color: transparent;
    margin: 0;
    padding: 0;
    font-family: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.summary-popup.system-message .close-button {
    color: var(--system-message-text);
    opacity: 0.7;
    transition: opacity 0.2s;
}

.summary-popup.system-message .close-button:hover {
    opacity: 1;
    color: var(--accent-color);
}

[data-theme="dark"] .summary-popup.system-message {
    background-color: var(--system-message-bg);
    border-color: var(--system-message-text);
}

[data-theme="dark"] .summary-popup.system-message pre,
[data-theme="dark"] .summary-popup.system-message .close-button {
    color: var(--system-message-text);
}

#contentOutput {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.content-area {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* --- Tab Container: --- */
.tab-container {
    display: flex;
    background-color: var(--bg-primary);
    padding: 10px 10px 0 10px; /* Keep top/side padding, bottom padding is effectively handled by tabs */
    /*border-bottom: 1px solid var(--border-color); /* Subtle grayish border under the tab row */
    transition: border-bottom-color 0.3s; /* Keep transition if you still want it, though it's now static */
}

.tab-container:not(:empty) {
    border-bottom: 1px solid var(--border-color); /* Apply the border only when the container has tabs */
}

/* --- Tab General Styling: Replaced --- */
.tab {
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px 5px 0 0;
    padding: 10px 15px;
    margin-right: 5px;
    margin-bottom: -1px; /* Crucial for overlapping the container's bottom border */
    position: relative;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s, background-color 0.3s;

    /* Add this line to ensure tabs only take the width their content needs */
    width: fit-content;

    /* Ensure flex properties prevent unwanted growth (these are often defaults but explicit here) */
    flex-grow: 0;
    flex-shrink: 1; /* Allow shrinking if many tabs, can be 0 if you never want them to shrink */
}

/* --- Active Tab Styling: Replaced --- */
.tab.active {
    color: var(--accent-color); /* Accented text color */
    border-color: var(--accent-color); /* Accented border for top, left, right */
    border-bottom-color: var(--bg-primary); /* Bottom border matches content bg to "open" the tab */
    background-color: var(--bg-primary); /* Background matches content area to blend in */
    z-index: 1; /* Ensures the active tab is visually on top of the container's border */
}

/* --- Inactive Tab Styling: Replaced --- */
.tab:not(.active) {
    color: var(--text-secondary); /* Subdued text color for inactive tabs */
    border-color: var(--border-color); /* Subtle border for inactive tabs */
    background-color: var(--bg-secondary); /* Slightly different background for inactive tabs */
}

/* --- Inactive Tab Hover Styling: New --- */
.tab:not(.active):hover {
    color: var(--accent-color); /* Accented text on hover */
    border-color: var(--accent-hover); /* Border color changes to a hover accent */
    background-color: var(--bg-tertiary); /* Slight background change on hover */
}

.tab-content {
    display: none;
    padding: 20px;
    background-color: var(--bg-primary);
    flex: 1;
    overflow-y: auto;
}

.tab-content.active {
    display: block;
}

.markdown-content {
    line-height: 1.6;
}

.markdown-content p {
    margin-bottom: 15px;
}

.markdown-content pre {
    background-color: var(--code-bg);
    padding: 16px;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 16px;
}

.markdown-content code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    padding: 2px 4px;
    border-radius: 3px;
    color: var(--code-text);
}

.markdown-content table {
    border-collapse: collapse;
    width: auto;
    margin: 10px 0;
    font-size: 14px;
}

.markdown-content th,
.markdown-content td {
    border: 1px solid var(--border-color);
    padding: 3px 6px;
    text-align: left;
    white-space: nowrap;
}

.markdown-content th {
    background-color: var(--dataframe-header-bg);
    font-weight: bold;
    color: var(--dataframe-header-text);
}

.markdown-content tr:nth-child(even) {
    background-color: var(--dataframe-even-row);
}

.markdown-content tr:hover {
    background-color: var(--dataframe-hover);
}

.katex-display {
    margin: 1em 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.plan-content {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.yaml-content {
    font-family: monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: var(--yaml-bg);
    padding: 15px;
    border-radius: 5px;
    line-height: 1.2;
}

.yaml-task-container {
    background-color: var(--bg-tertiary);
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 15px;
}

.yaml-list-item, .yaml-key-value, .yaml-line {
    display: block;
}

/* Ensure YAML keys use the theme variables with higher specificity */
.yaml-key {
    color: var(--yaml-key) !important;
}

/* Override Highlight.js or markdown rendering for YAML keys in dark mode */
[data-theme="dark"] .yaml-key,
[data-theme="dark"] .hljs-attr { /* Highlight.js class for YAML keys */
    color: var(--yaml-key) !important; /* #50fa7b in dark mode */
}

/* Ensure YAML content and wrapper use the correct background and text */
.yaml-content,
.yaml-wrapper pre,
.yaml-wrapper code {
    background-color: var(--yaml-bg) !important;
    color: var(--code-text) !important;
    border: 1px solid var(--border-color) !important;
}

/* Ensure markdown-rendered YAML uses the correct colors */
.markdown-content .yaml-key {
    color: var(--yaml-key) !important;
}

/* For inline YAML or code blocks within markdown */
.markdown-content pre code .hljs-attr {
    color: var(--yaml-key) !important;
}

.yaml-value {
    color: var(--yaml-value)!important;
}

.yaml-content-wrap {
    display: inline-block;
    white-space: normal;
}

.yaml-key-link {
    color: var(--yaml-key);
    font-weight: bold;
}

.yaml-task-link {
    text-decoration: none;
    color: var(--accent-color);
    font-weight: bold;
}

.yaml-task-link:hover {
    text-decoration: underline;
}

.yaml-wrapper {
    max-width: 100%;
    overflow-x: auto;
}

.yaml-wrapper pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
}

.yaml-wrapper code {
    display: block;
    max-width: 100%;
}

/* Main container for the tab-like "tool-start" */
.tool-start {
    display: flex;
    align-items: center;
    margin: 1px 0 0 0; /* Vertical spacing: 1px top, 6px bottom. Horizontal 0. */
    font-size: 11px;
    line-height: 1.4; /* Improved readability */
    color: var(--system-message-text); /* Default text color for children */
    position: relative;
    padding-bottom: 2px; /* Space for button */
}

/* Horizontal lines on either side of the text */
.tool-start::before,
.tool-start::after {
    content: "";
    flex-grow: 1; /* Lines will expand to fill available space */
    height: 1px;
    background-color: var(--tool-call-thinking-border); /* Accent color for the lines */
}

/* Styling for the .agent div (first part of the "tab" text) */
.tool-start .agent {
    font-weight: bold; /* Kept from original */
    color: var(--system-message-text); /* Kept from original, also set on parent */
    display: flex; /* Kept from original for icon alignment */
    align-items: center; /* Kept from original for icon alignment */
    
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 8px;  /* Space between left line and start of agent text */
    padding-right: 4px; /* Space between agent text and model text */
    white-space: nowrap; /* Prevent text wrapping */
    margin-bottom: 0; /* Ensure no extra bottom margin */
}

/* Styling for the SVG icon within .agent */
.tool-start .agent svg {
    margin-right: 4px; /* Kept from original */
    /* Ensure SVG inherits color or set it explicitly if needed */
    /* stroke: currentColor; /* Or var(--system-message-text); */
}

/* Styling for the .model div (second part of the "tab" text) */
.tool-start .model {
    color: var(--system-message-text); /* Kept from original, also set on parent */
    
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 4px;  /* Space between agent text and model text */
    padding-right: 8px; /* Space between model text and right line */
    white-space: nowrap; /* Prevent text wrapping */
}
[data-theme="dark"] .tool-start {
    opacity: 0.8; /* Or your desired value like 0.6, 0.75, etc. */
}

/* Tool start animation */

/* Sparkle icon animation for loading state */
.tool-start.loading .agent svg {
    animation: sparkle-pulse 1.5s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes sparkle-pulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(0.85);
    }
    50% {
        opacity: 1;
        transform: scale(1.35);
        filter: drop-shadow(0 0 3px var(--accent-color));
    }
}

.tool-call {
    position: relative;
    background-color: var(--tool-call-bg);
    border-left: 2px solid var(--tool-call-border);
    margin: 1px 0 0 0;
    padding: 2px 4px 2px 4px; /* Keep original padding */
    border-radius: 4px;
    font-size: 11px;
    max-width: 300px;
    box-shadow: 0 1px 2px var(--shadow-color);
    line-height: 1;
    transition: max-width 0.3s ease;
    min-height: 24px; /* Ensure minimum height for the toggle */
}

.tool-call.expanded {
    max-width: 30vw !important;
}

.tool-call.thinking {
    border-left: 2px solid var(--tool-call-thinking-border);
}

.tool-call-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.tool-call-action {
    font-weight: bold;
    color: var(--tool-call-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.thinking .tool-call-action {
    color: var(--tool-call-thinking-border);
}

.tool-call-status {
    display: flex;
    align-items: center;
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.tool-call-input {
    font-style: italic;
    color: var(--tool-call-text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.completion-message {
    color: var(--tool-call-border);
    font-size: 10px;
}

.thinking .completion-message {
    color: var(--tool-call-thinking-border);
}

.tool-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
}

.thinking .tool-icon {
    stroke: var(--tool-call-thinking-border);
}

.tool-call-action, .agent {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.spinner {
    border: 1.5px solid var(--bg-secondary);
    border-top: 1.5px solid var(--tool-call-border);
    border-radius: 50%;
    width: 8px;
    height: 8px;
    animation: spin 1s linear infinite;
    margin-right: 3px;
}

.activity-row-processing {
    background-color: var(--highlight-bg) !important;
}

.activity-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

/* Old Error Styles for bacward compatibility */
.tool-call-error-standalone {
    margin: 8px 0;
    padding: 8px 12px;
    font-size: 11px;
    line-height: 1.4;
    color: #ff6b6b;
}

.error-header {
    margin-bottom: 6px;
}

.error-label {
    font-weight: 600;
    color: #ff4444;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.error-content {
    color: #ff9999;
    font-size: 11px;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    white-space: pre-wrap;
    line-height: 1.3;
}
/*End Old Error Styles */

/* Error styling for tool calls */
.tool-call.tool-call-error {
    border-left-color: var(--error-color) !important;
}

.tool-call.tool-call-error .tool-icon {
    color: var(--error-color) !important;
    stroke: var(--error-color) !important;
}

.tool-call.tool-call-error .tool-call-action {
    color: var(--error-color) !important;
}

.tool-call.tool-call-error .completion-message {
    color: var(--error-color) !important;
}

/* Red chevron hover for error tool calls */
.tool-call.tool-call-error .thoughts-toggle:hover {
    color: var(--error-color) !important;
}

/* Error-specific override for code-result-content */
.code-result-content.error-result {
    color: var(--error-color) !important;
    font-family: 'Courier New', monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .code-result-content.error-result {
        color: var(--error-color) !important;
    }
}

[data-theme="dark"] .code-result-content.error-result {
    color: var(--error-color) !important;
}


.dataframe {
    border-collapse: collapse;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

.dataframe th, .dataframe td {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    text-align: left;
}

.dataframe th {
    background-color: var(--dataframe-header-bg);
    font-weight: 600;
    color: var(--dataframe-header-text);
    position: sticky;
    top: 0;
    z-index: 10;
    background-clip: padding-box;
    box-shadow: inset 0 1px 0 var(--bg-primary), 0 1px 0 var(--border-color);
}

.dataframe-container {
    width: 100%;
    overflow-x: auto;
    margin: 1rem 0;
    border-radius: 8px;
    box-shadow: 0 1px 3px var(--shadow-color);
    background: var(--bg-primary);
}

.dataframe tr:nth-child(even) {
    background-color: var(--dataframe-even-row);
}

.dataframe tr:hover {
    background-color: var(--dataframe-hover);
}

.dataframe td:first-child {
    color: var(--accent-color);
    cursor: pointer;
}

.dataframe td:nth-child(3) {
    font-family: "SF Mono", Consolas, monospace;
    font-size: 12px;
    white-space: nowrap;
    color: var(--text-secondary);
}

.dataframe td:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.dataframe td:nth-child(2) {
    font-weight: 500;
}

.research-container {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
}

.research-item {
    background-color: var(--research-item-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}

.research-query {
    font-size: 1.4em;
    color: var(--research-header);
    margin-bottom: 10px;
}

.research-result {
    margin-bottom: 15px;
}

.links-header {
    font-size: 1.2em;
    color: var(--text-secondary);
    margin-top: 15px;
    margin-bottom: 10px;
}

.links-list {
    list-style-type: none;
    padding-left: 0;
}

.link-item {
    margin-bottom: 10px;
}

.link-title {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: bold;
}

.link-title:hover {
    text-decoration: underline;
}

.link-url {
    display: block;
    font-size: 0.9em;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: inherit;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: flex-start;
    border-bottom: none;
    box-shadow: none;
}

.panel-content {
    flex: 1;
    overflow-y: auto;
    margin-top: 50px;
    background-color: inherit;
    position: relative;
    z-index: 1;
}

.top-panel {
    background-color: inherit;
    height: 57px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid var(--border-color);
    justify-content: space-between;
}

#submitQuery {
    position: absolute;
    bottom: 10px;
    right: 10px;

    /* Standardized appearance */
    background-color: transparent;
    border: 1px solid var(--accent-color);
    border-radius: 50%; /* Circular */
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
    color: var(--accent-color); /* Icon color */
}

#submitQuery svg {
    width: 18px;
    height: 18px;
    stroke: currentColor; /* Inherits color from #submitQuery (which is var(--accent-color)) */
    fill: none;          /* Ensure outlined icon */
}

#submitQuery:hover {
    background-color: var(--highlight-bg); /* Subtle background on hover */
    color: var(--accent-hover);            /* Icon color change on hover */
    border-color: var(--accent-hover);     /* Border color change on hover */
    transform: scale(1.05); /* Keep existing hover transform if desired, or remove if only color change is wanted */
}

#submitQuery:active {
    transform: scale(0.95);

}

#submitQuery:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    border-color: var(--text-tertiary);
    color: var(--text-tertiary);
}

#submitQuery:disabled:hover {
    background-color: transparent;
    transform: none;
    border-color: var(--text-tertiary);
    color: var(--text-tertiary);
}

.tab-navigation {
    position: absolute;
    top: 5px;
    right: 10px;
}

.nav-arrow {
    background: none;
    border: none;
    font-size: 25px;
    cursor: pointer;
    padding: 5px;
    color: var(--accent-color);
}

.nav-arrow:disabled {
    color: var(--star-inactive);
    cursor: not-allowed;
}

.nav-arrow:not(:disabled):hover {
    color: var(--accent-hover);
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg);
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.modal-content {
    background-color: var(--bg-primary);
    padding: 20px;
    border: none;
    border-radius: 8px;
    width: 400px; /* Increased from 320px */
    text-align: center;
    box-shadow: 0 2px 6px var(--shadow-color);
    position: relative;
    animation: modalopen 0.3s ease-out;
    pointer-events: auto;
}

@keyframes modalopen {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    transition: color 0.2s;
}

.close:hover,
.close:focus {
    color: var(--text-primary);
}

.modal h3 {
    color: var(--modal-text);
    margin: 0 0 15px;
    font-size: 18px;
    font-weight: 500;
}

.rank-modal-content {
    width: 400px;
}

/* Progress Rating System */
.rank-modal-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    text-align: center;
    line-height: 1.5;
}

.progress-rating-container {
    margin: 20px 0;
    user-select: none;
}

.rating-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.progress-rating-track {
    position: relative;
    height: 36px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: visible;
}

.progress-rating-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, 
        #d93025 0%,      /* Red */
        #ff6b00 30%,     /* Dark orange */
        #ff8c00 60%,     /* Primary orange */
        #ffa500 80%,     /* Light orange */
        #ffb84d 100%);   /* Pale orange */
    width: 0%;
    transition: width 0.3s ease;
    pointer-events: none;
    border-radius: 5px;
    opacity: 0.4;
}

.progress-rating-segments {
    display: flex;
    height: 100%;
    position: relative;
    z-index: 1;
}

.rating-segment {
    flex: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.rating-segment:last-child {
    border-right: none;
}

.rating-segment:hover {
    background: rgba(255, 140, 0, 0.1);
}

.rating-segment.active {
    background: rgba(255, 140, 0, 0.2);
    border-right-color: rgba(255, 140, 0, 0.3);
}

/* Threshold Indicator */
.threshold-indicator {
    position: relative;
}

.threshold-indicator::before {
    content: '';
    position: absolute;
    right: -1px;
    top: -10px;
    bottom: -10px;
    width: 2px;
    background: #ff8c00;
    z-index: 2;
    box-shadow: 0 0 8px rgba(255, 140, 0, 0.5);
}

.threshold-line {
    position: absolute;
    right: -40px;
    top: -25px;
    font-size: 10px;
    color: #ff8c00;
    background: var(--bg-primary);
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    border: 1px solid #ff8c00;
    z-index: 3;
}

.threshold-line::before {
    content: 'AI Memory';
}

/* Rating Display */
.rating-value-display {
    margin-top: 15px;
    text-align: center;
}

#ratingValue {
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.threshold-hint {
    display: block;
    font-size: 12px;
    font-style: normal;
    opacity: 0.9;
    color: var(--text-secondary);
}

/* Color coding classes */
.rating-value-display.low #ratingValue {
    color: #d93025;
}

.rating-value-display.medium #ratingValue {
    color: #ff8c00;
}

.rating-value-display.high #ratingValue {
    color: #ffb84d;
}

.privacy-note {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    color: #ff8c00;
    opacity: 0.9;
}

.modal-footer-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
}

.privacy-info {
    text-align: center;
    width: 100%;
}

.privacy-detail {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-tertiary);
    opacity: 0.8;
}

.blog-link-hint {
    font-size: 12px;
}

.blog-link-hint a {
    color: #ff8c00;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.blog-link-hint a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Status message */
.rank-status-message {
    margin: 15px 0 10px;
    color: #ff8c00;
    font-size: 13px;
    font-weight: 400;
    display: none;
    text-align: center;
    min-height: 20px;
}

/* Submit button with orange theme */
.submit-rank-btn {
    background-color: transparent;
    border: 1.5px solid #ff8c00;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
    color: #ff8c00;
    margin: 0 auto;
}

.submit-rank-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}

.submit-rank-btn:hover {
    background-color: rgba(255, 140, 0, 0.1);
    border-color: #ffa500;
}

.submit-rank-btn:active {
    transform: scale(0.95);
}

.submit-rank-btn:disabled {
    border-color: var(--text-tertiary);
    color: var(--text-tertiary);
    background-color: transparent;
    cursor: not-allowed;
    transform: none;
}

.submit-rank-btn:disabled:hover {
    background-color: transparent;
}

.summary-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--summary-popup-bg);
    border: 1px solid var(--summary-popup-border);
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 2px 10px var(--shadow-color);
    display: none;
    max-width: 300px;
    z-index: 1000;
}

.summary-popup h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--system-message-text);
}

.summary-popup pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--summary-popup-text);
}

.summary-popup.system-message {
    width: auto;
    max-width: 80vw;
}

.summary-popup.system-message pre {
    display: -webkit-box;
    display: box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    max-height: 2.6em;
    line-height: 1.3em;
}

.close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--system-message-text);
}

.close-button:hover {
    color: var(--accent-hover);
}

.switch-row {
    padding: 0 2px;
    margin-top: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.icon-button.planning-brain {
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all 0.2s ease;
}

.icon-button.planning-brain.active {
    color: var(--accent-color);
}

.icon-button.planning-brain:hover {
    transform: scale(1.05);
}

.icon-button.suggest-questions {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--accent-color);
    cursor: pointer;
    font-size: 12px;
    transition: opacity 0.2s;
}

.icon-button.suggest-questions.disabled {
    opacity: 1;
    pointer-events: none;
    color: var(--text-tertiary);
}

.icon-button.suggest-questions:hover {
    opacity: 0.8;
}

.icon-button.rank-icon {
    cursor: pointer;
    color: var(--accent-color);
    transition: all 0.2s ease;
}

.icon-button.rank-icon.active {
    color: var(--accent-color);
}
.icon-button.rank-icon:hover {
    transform: scale(1.05);
    color: var(--accent-color);
}

.icon-button.rank-icon.replay {
    color: var(--accent-replay);
    cursor: pointer;
}

.icon-button.rank-icon.replay:hover {
    transform: scale(1.05);
    color: var(--accent-replay);
}

.icon-button.rank-icon.replay-success {
    color: var(--accent-replay);
    cursor: default;
}

.icon-button.rank-icon.replay-success:hover {
    transform: none;
    color: var(--accent-replay);
}

/* Branching CV Icons Popup */
.branching-slider-popup {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 70px; /* Positioned to align with suggest questions button */
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 40px;
    box-shadow: 0 2px 10px var(--shadow-color);
    z-index: 1000;
}

.branching-slider-popup::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 10px;
}

.branching-slider-popup::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 20px;
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.branching-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s;
    width: 100%;
}

/* Size scaling from smallest to largest */
.branching-icon[data-value="1"] svg {
    width: 14px;
    height: 14px;
}

.branching-icon[data-value="2"] svg {
    width: 16px;
    height: 16px;
}

.branching-icon[data-value="3"] svg {
    width: 18px;
    height: 18px;
}

.branching-icon[data-value="4"] svg {
    width: 20px;
    height: 20px;
}

.branching-icon[data-value="5"] svg {
    width: 22px;
    height: 22px;
}

.branching-icon svg {
    stroke: currentColor;
    fill: none;
    transition: all 0.2s;
}

.branching-icon:hover {
    background: var(--bg-tertiary);
    color: var(--accent-color);
}

/* Dark theme adjustments */
[data-theme="dark"] .branching-slider-popup {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .branching-slider-popup::after {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .branching-icon {
    color: var(--text-secondary);
}

[data-theme="dark"] .branching-icon:hover {
    color: var(--accent-color);
    background: var(--bg-tertiary);
}

.switch-container {
    display: flex;
    align-items: center;
    padding: 0 5px;
}

.selection-popup {
    position: fixed;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 2px 10px var(--shadow-color);
    z-index: 1001;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 300px;
    box-sizing: border-box;
}

.selection-popup input {
    flex: 1;
    height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.selection-popup button {
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%; /* Circular */
    width: 32px;
    height: 32px;
    min-width: 32px; /* Match width */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
    color: var(--accent-color); /* Icon color */
}

.selection-popup button:hover {
    background-color: var(--highlight-bg);
}

.selection-popup button:active {
    transform: scale(0.98);
}

.selection-popup button svg {
    width: 18px;
    height: 18px;
    /* Styles for the filled SVG to appear outlined */
    fill: none;
    stroke: currentColor; /* Inherits color */
    stroke-width: 2; /* Define stroke-width for the path */
}

/* Customize the browser's native selection highlighting */
::selection {
    background-color: rgba(140, 231, 182, 0.3);
    color: inherit; /* Keep original text color */
}

/* For Firefox */
::-moz-selection {
    background-color: rgba(140, 231, 182, 0.3);
    color: inherit;
}

#selectionForm {
    display: flex;
    flex: 1;
    gap: 8px;
}

.selected-text-display {
    margin-top: 8px;
    padding: 6px 8px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    max-width: 300px;
    word-wrap: break-word;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.selected-text-display strong {
    color: var(--accent-color);
    font-weight: 500;
}

.plot-container {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 0 5px;
    box-sizing: border-box;
}

.plot-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.plot-query-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

.plot-query-btn:hover {
    background-color: var(--highlight-bg);
}

.plot-query-btn svg {
    width: 20px;
    height: 20px;
    fill: var(--accent-color);
}

.plot-query-form {
    display: flex;
    gap: 8px;
    margin: 10px 0;
    padding: 10px;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.plot-query-input {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.plot-query-submit {
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%; /* Circular */
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
    color: var(--accent-color); /* Icon color */
}

.plot-query-submit svg {
    width: 18px;
    height: 18px;
    /* Styles for the filled SVG to appear outlined */
    fill: none;
    stroke: currentColor; /* Inherits color */
    stroke-width: 2; /* Define stroke-width for the path */
}

.plot-query-submit:hover {
    background-color: var(--highlight-bg);
}

.plot-content {
    width: 100%;
    margin-top: 10px;
    padding: 0 5px;
    box-sizing: border-box;
}

.plot-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.plotly-plot {
    min-height: 400px;
    width: 100% !important;
}

.plotly-plot .js-plotly-plot,
.plotly-plot .plot-container {
    width: 100% !important;
}

.plotly-plot {
    border-radius: 4px;
    overflow: hidden;
}

.plotly-preview-container {
    width: 100%;
    height: 100%;
}

.plot-error {
    padding: 20px;
    text-align: center;
    color: var(--error-color);
    background: var(--error-bg);
    border: 1px solid var(--error-color);
    border-radius: 4px;
}

.plot-error small {
    display: block;
    margin-top: 8px;
    opacity: 0.8;
}

.code-header {
    background: var(--code-bg);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.code-header + pre {
    margin-top: 0;
    margin-bottom: 8px;
}

pre code {
    display: block;
    background-color: var(--code-bg);
    padding: 1em;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    white-space: pre;
    overflow-x: auto;
    color: var(--code-text);
}

.header-actions {
    display: flex;
    gap: 8px;
}

.discard-button {
    color: var(--error-color);
}

.discard-button:hover {
    background-color: var(--error-bg) !important;
    color: var(--error-color) !important;
}

.edit-button[data-editing="true"] .edit-icon {
    stroke: var(--accent-color);
}

.save-icon {
    display: none;
}

.code-action-button[data-editing="true"] .edit-icon {
    display: none;
}

.code-action-button[data-editing="true"] .save-icon {
    display: block;
    stroke: var(--accent-color);
}

.code-editor {
    width: 100%;
    min-height: 200px;
    padding: 1rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid var(--border-color);
    border-radius: 0 0 4px 4px;
    resize: vertical;
    background-color: var(--code-bg);
    color: var(--code-text);
    overflow-y: auto;
    box-sizing: border-box;
}

.code-editor:focus {
    outline: none;
    background-color: var(--bg-secondary);
    border-color: var(--accent-color);
}

.code-action-button {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.code-action-button:hover:not(:disabled) {
    background-color: var(--bg-tertiary);
    color: var(--accent-color);
}

.code-action-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.code-action-button.active {
    color: var(--accent-color);
    background-color: var(--bg-tertiary);
}

.code-action-button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.code-content {
    position: relative;
    background-color: var(--code-bg);
}

.code-content pre {
    margin: 0;
    padding: 1rem;
}

.copy-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.copy-button:hover {
    opacity: 1;
    color: var(--accent-color);
}

.language-label {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.copy-button .copy-icon,
.copy-button .check-icon {
    transition: display 0.2s ease;
}

.copy-button .check-icon {
    color: var(--accent-color);
}

.code-editor-wrapper {
    border: 1px solid var(--border-color);
    border-radius: 0 0 4px 4px;
}

.code-editor-wrapper .CodeMirror {
    height: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 0 0 4px 4px;
    background-color: var(--code-bg) !important;
    color: var(--code-text) !important;
}

.code-editor-wrapper .CodeMirror-focused {
    border-color: var(--accent-color);
}

.code-editor-wrapper .CodeMirror-lines {
    padding: 1rem;
}

.code-editor-wrapper .CodeMirror-linenumber {
    padding-right: 1rem;
    color: var(--text-tertiary) !important;
}

.code-editor-wrapper .CodeMirror-gutters {
    border-right: 1px solid var(--border-color) !important;
    background-color: var(--bg-tertiary) !important;
}

.code-editor-wrapper .CodeMirror-selected {
    background-color: var(--bg-tertiary) !important;
}

.code-editor-wrapper .CodeMirror-activeline-background {
    background-color: var(--bg-tertiary) !important;
}

.code-editor-wrapper .CodeMirror-cursor {
    border-left: 1px solid var(--text-primary) !important;
}

.code-editor-wrapper .CodeMirror-matchingbracket {
    color: var(--accent-color) !important;
    border-bottom: 1px solid var(--accent-color);
}

/* Ensure inline code within markdown uses the same colors */
.markdown-content code:not(.hljs) {
    background-color: var(--code-bg) !important;
    color: var(--code-text) !important;
}

/* For CodeMirror (if used) to match Highlight.js */
.CodeMirror .cm-string,
.CodeMirror .cm-string-2 {
    color: var(--code-string) !important;
}

.CodeMirror .cm-number,
.CodeMirror .cm-variable-2 { /* For f-string variables like overall_change */
    color: var(--code-text) !important; /* Use light grey for visibility */
}

.code-editor-wrapper .cm-keyword { color: var(--code-keyword) !important; }
.code-editor-wrapper .cm-def { color: var(--accent-color) !important; }
.code-editor-wrapper .cm-variable { color: var(--code-text) !important; }
.code-editor-wrapper .cm-operator { color: var(--code-keyword) !important; }
.code-editor-wrapper .cm-number { color: var(--warning-color) !important; }
.code-editor-wrapper .cm-string { color: var(--code-string) !important; }
.code-editor-wrapper .cm-comment { color: var(--code-comment) !important; }
.code-editor-wrapper .cm-builtin { color: var(--accent-color) !important; }

code.language-yaml,
code.language-json {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-x: hidden !important;
}

.hljs {
    background-color: var(--code-bg) !important;
    color: var(--code-text) !important;
}

/* Specific token types for Highlight.js */
.hljs-keyword,
.hljs-name {
    color: var(--code-keyword) !important;
}

.hljs-string {
    color: var(--code-string) !important;
}

/* Target f-string expressions and placeholders (e.g., {overall_change:.2f}) */
.hljs-string .hljs-subst, /* For f-string placeholders like {variable} */
.hljs-string .hljs-literal { /* For formatted literals like .2f */
    color: var(--code-string) !important; /* Use light grey to stand out */
}

.hljs-comment {
    color: var(--code-comment) !important;
}

.mermaid {
    background: var(--mermaid-diagram-bg);
    padding: 16px;
    border-radius: 4px;
}

.diagram-container {
    position: relative;
    margin-bottom: 16px;
}

.mermaid-view {
    background: var(--mermaid-diagram-bg);
    padding: 16px;
    padding-left: 40px;
    border-radius: 4px;
}

.view-toggle {
    position: absolute;
    top: 8px;
    left: 8px;
    background: none;
    border: none;
    color: var(--mermaid-text-color);
    cursor: pointer;
    padding: 4px;
    opacity: 0.7;
    transition: opacity 0.2s;
    z-index: 1;
}

.view-toggle:hover {
    opacity: 1;
    color: var(--accent-color);
}

.mermaid-code {
    background-color: var(--code-bg);
    padding: 1em;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
}

.mermaid-code code {
    white-space: pre;
    color: var(--code-text);
}

.mermaid-error {
    padding: 10px 15px;
    background-color: var(--error-bg);
    color: var(--error-color);
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 10px;
    text-align: center;
}

.mermaid-error-notice {
    padding: 8px 12px;
    background-color: var(--bg-secondary);
    color: var(--warning-color);
    border-left: 3px solid var(--warning-color);
    border-radius: 2px;
    font-size: 12px;
    margin-bottom: 10px;
    width: fit-content;
}

/* Mermaid Subgraph/cluster title styling */
.diagram-container .mermaid-view .cluster-label text {
    font-size: 16px !important;
    font-weight: bold !important;
}

.size-error-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    background-color: var(--bg-secondary);
    color: var(--warning-color);
    border-left: 3px solid var(--warning-color);
    border-radius: 2px;
    font-size: 12px;
    width: fit-content;
}

.size-error-notice svg {
    color: var(--warning-color);
    flex-shrink: 0;
}

.attach-menu-container {
    position: relative;
    display: inline-block;
}

#uploadLimitMessage {
    position: absolute;
    bottom: calc(100% + 5px); /* Position it above the attach button */
    left: 0;
    /* Or, to center it relative to the button:
    left: 50%;
    transform: translateX(-50%);
    */
    background-color: var(--error-color-bg); /* Use error background for visibility */
    color: var(--error-color);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;   /* Small and subtle */
    font-style: italic;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    z-index: 1001; /* Above other elements but below menu if menu overlaps */
    opacity: 0;    /* Hidden by default */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    white-space: nowrap; /* Prevent message from wrapping if short */
}

#uploadLimitMessage.visible {
    opacity: 1;
    visibility: visible;
}

.attach-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    display: none;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
    box-shadow: 0 2px 10px var(--shadow-color);
    z-index: 1000;
}

.attach-menu::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 10px;
}

.attach-menu::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 20px;
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.attach-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.attach-option:hover {
    background: var(--bg-tertiary);
    color: var(--accent-color);
}

.attach-option svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.attach-menu-container:hover .attach-menu,
.attach-menu:hover {
    display: flex;
}

.icon-row .attach-menu-container {
    display: flex;
    align-items: center;
}

.top-panel-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.stream-container {
    position: relative;
}

.scroll-indicator {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: var(--overlay-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 24px;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
}

.scroll-indicator.visible {
    opacity: 0.3;
}

.menu-container {
    display: flex;
    align-items: center;
    gap: 8px;

}

/* Group action pills together */
.action-pills-group {
    display: flex;
    gap: 8px;
    margin-left: 8px;
}

.menu-button {
    background: none;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    border-radius: 12px;
}

.menu-button:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent-color);
    transform: translateY(-1px);
}

.menu-button svg {
    width: 26px;  /* Reduced from 38px */
    height: 26px;  /* Reduced from 38px */
}

.menu-popup {
    position: absolute;
    left: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    padding-top: 3px;
    padding-bottom: 20px;
    display: none;
    flex-direction: column;
    gap: 4px;
    min-width: 700px;
    width: 700px;
    box-shadow: 0 4px 12px var(--shadow-color);
    z-index: 1000;
    transition: all 0.3s ease;
    
    /* Dynamic height - always end 8px from bottom */
    max-height: calc(98vh - var(--menu-top-offset, 60px) - 8px);
    overflow: visible;
}

.menu-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: none;
    background: var(--bg-primary);
    width: 100%;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s;
    border-radius: 6px;
    white-space: nowrap;
    font-weight: bold;
}

.menu-option:hover {
    background: var(--link-hover-bg);
    color: var(--accent-color);
}

.menu-option svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.menu-option span {
    font-size: 14px;
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    backdrop-filter: blur(2px);
    z-index: 999;
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.menu-overlay.active {
    display: block;
    opacity: 1;
}

.menu-divider {
    width: 90%;
    margin: 10px auto;
    border: 0;
    height: 2px; /* Slightly thicker for easier grabbing */
    background-image: linear-gradient(to right, transparent, var(--accent-color), transparent);
    cursor: ns-resize; /* Show resize cursor */
    position: relative;
    transition: height 0.2s ease;
}

.menu-divider:hover {
    height: 3px; /* Make it more prominent on hover */
}

/* Add a visual indicator when dragging */
.menu-divider.dragging {
    height: 3px;
    background-image: linear-gradient(to right, transparent, var(--accent-color), var(--accent-color), transparent);
}

/* Logo styling */
.menu-logo {
    width: 80px;
    height: 50px; 
    display: block;
    margin: 10px auto; /* Center it at the top */
    align-self: flex-start; /* Align to the left edge */
}

/* Ensure logo is visible only when menu is active */
.menu-popup:not(.active) .menu-logo {
    display: none;
}

.thread-container {
    margin-bottom: 16px;
}

.thread-container:last-child {
    margin-bottom: 40px;
}

.threads-header {
    color: var(--accent-color);
    font-size: 16px;
    margin: 12px 15px;
    font-weight: 600;
}

.threads-list {
    max-height: calc(100vh - var(--menu-top-offset, 60px) - 200px);
    overflow-y: auto;
    padding: 0 8px;
    margin-bottom: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* --- Threads Search Box (New) --- */
.threads-search-container {
    position: relative;
    margin: 8px 15px 12px 15px; /* Spacing below header */
    display: flex;
    align-items: center;
}

.threads-search-input {
    flex-grow: 1;
    width: 100%;
    padding: 8px 64px 8px 12px; /* Right padding for two buttons */
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 18px; /* Pill shape */
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.threads-search-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.threads-search-input::placeholder {
    color: var(--text-tertiary);
    font-style: italic;
    opacity: 0.8;
}

.threads-search-input:disabled {
    background-color: rgba(255, 140, 0, 0.1); /* Light orange background */
    color: #ff8c00; /* Orange text */
    font-style: italic;
    border-color: #ff8c00; /* Orange border */
}

/* Also disable the submit button when filtering */
.threads-search-submit:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* When filter is active, make clear button orange-themed */
.threads-search-input:disabled ~ .threads-search-clear {
    color: #ff8c00; /* Orange color instead of default */
}

.threads-search-input:disabled ~ .threads-search-clear:hover {
    color: #ff8c00; /* Keep orange on hover */
    background-color: rgba(255, 140, 0, 0.2); /* Light orange background on hover */
}

/* Keep the submit button visually consistent when disabled */
.threads-search-input:disabled ~ .threads-search-submit {
    color: #ff8c00;
    opacity: 0.3;
}

.threads-search-submit,
.threads-search-clear {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    border-radius: 50%; /* Circular */
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color 0.2s, background-color 0.2s;
}

.threads-search-submit {
    right: 4px;
}

.threads-search-clear {
    right: 34px;
}

.threads-search-submit:hover,
.threads-search-clear:hover {
    color: var(--accent-color);
    background-color: var(--highlight-bg);
}

.threads-search-container.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.thread-search-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--text-tertiary);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.threads-list::-webkit-scrollbar {
    display: none;
}

.thread-item {
    position: relative;
    padding: 12px;
    padding-bottom: 32px;
    margin: 8px 0;
    border-radius: 6px;
    background-color: var(--bg-secondary); 
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px var(--shadow-color);
}

.thread-item:hover {
    background-color: var(--link-hover-bg);
    border-color: var(--accent-color);
    box-shadow: 0 2px 5px var(--highlight-bg);
}

.thread-timestamp {
    display: block;
    font-size: 12px;
    color: var(--yaml-key);
    margin-bottom: 5px;
    font-weight: 800;
}

.thread-id {
    display: block;
    font-size: 12px;
    color: var(--accent-color);
    margin-bottom: 3px;
    font-weight: 500;
}

.thread-dataset-name{
    display: block;
    font-size: 12px;
    color: var(--accent-color);
    margin-bottom: 5px;
    font-weight: 500;
}

.thread-task {
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    max-height: 4.5em;
    word-break: break-word;
    font-size: 14px;
    color: var(--text-primary);
}

.thread-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--accent-color);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.thread-toggle:hover {
    background-color: var(--highlight-bg);
}

.thread-toggle.expanded svg {
    transform: rotate(180deg);
}

.thread-delete-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-tertiary);
    opacity: 0.6;
    transition: all 0.2s ease;
}

.thread-delete-btn:hover {
    background-color: rgba(255, 51, 51, 0.1);
    color: var(--error-color);
    opacity: 1;
}

.chain-item {
    margin-left: 15px;
    padding: 10px;
    border-left: 2px solid var(--accent-color);
    background-color: var(--bg-secondary);
}

.chains-container {
    margin-top: 4px;
}

.chains-container.hidden {
    display: none;
}

.chain-preview {
    position: absolute;
    z-index: 1010;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 4px 8px var(--shadow-color);
    width: 450px;
    height: 280px;
    display: none;
}

.plotly-preview-container {
    width: 100%;
    height: 100%;
}

.preview-loading, .preview-error {
    padding: 10px;
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.preview-error {
    color: var(--text-tertiary);
}

/* Theme Toggle in Settings Menu - Match existing menu items exactly */
.theme-toggle-option .sun-icon,
.theme-toggle-option .moon-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    /* Remove any margin - let the default gap: 8px from .menu-option handle spacing */
}

.theme-toggle-option .theme-label {
    font-size: 14px; /* Match other menu item text */
}

/* Hide old theme toggle container */
.theme-toggle-container {
    display: none;
}

/* Fix submenu trigger - be very specific */
.integrations-menu-item .integrations-option:hover + .integrations-submenu,
.integrations-submenu:hover {
    display: flex !important;
}

/* Ensure the general hover rule doesn't apply to other elements */
.integrations-menu-item:hover .integrations-submenu {
    display: none !important;
}

/* Only show submenu when hovering specifically over the integrations option or the submenu itself */
.integrations-menu-item .integrations-option:hover + .integrations-submenu,
.integrations-menu-item .integrations-submenu:hover {
    display: flex !important;
}

/* Search Results Styles */
.related-searches-container {
    margin: 1rem 0;
    padding: 15px; /* Matches .research-item padding */
    border: 1px solid var(--border-color); /* Matches app's border style */
    border-radius: 4px; /* Matches app's border-radius */
    background: var(--bg-secondary); /* Matches .thread-item, .research-item background */
    box-shadow: 0 1px 3px var(--shadow-color); /* Matches .thread-item shadow */
}

.related-searches-header {
    display: flex;
    align-items: center; /* Vertically aligns the icon and text */
    gap: 0; /* No flex gap */
    font-family: Arial, sans-serif; /* Matches body font */
    font-size: 14px; /* As previously set */
    font-weight: 600; /* Matches .threads-header */
    color: var(--accent-color); /* Matches .threads-header */
    margin-top: 2px; /* Margin to the top edge */
    margin-bottom: 2px; /* Margin to the divider (border-bottom) */
    border-bottom: 1px solid var(--border-color); /* Matches other headers like .yaml-task-container */
    padding-bottom: 0.25rem; /* Matches existing padding-bottom */
}

.related-searches-header .search-icon {
    width: 16px; /* Matches .tool-icon, .code-action-button svg */
    height: 16px;
    stroke: var(--accent-color); /* Matches icon colors like .tool-icon */
    display: block; /* Treat the SVG as a block element to avoid inline spacing issues */
    transform: translateY(1px); /* Fine-tune vertical alignment */
    margin-right: 2px; /* Controlled space between icon and text */
}

.related-searches-header .header-text {
    display: inline-block; /* Ensure the text behaves as a block for alignment */
    line-height: 1; /* Normalize line-height to match the icon */
}

.related-searches-list {
    display: flex;
    flex-direction: column; /* Stacks chips vertically */
    align-items: flex-start; /* Prevents chips from stretching to full width */
    gap: 8px; /* Matches .header-actions gap */
    margin-top: 10px; /* Space between the divider and the chips */
    width: auto; /* Ensure the list itself doesn’t stretch */
}

.related-search-chip {
    display: inline-block; /* Wraps tightly around text */
    width: auto; /* Ensures width is based on text length */
    max-width: fit-content; /* Constrains the chip to the width of its content */
    padding: 8px 16px; /* Matches .attach-option padding */
    border: 1px solid var(--border-color); /* Matches app's border style */
    border-radius: 16px; /* Matches .modal-content border-radius */
    background: var(--bg-tertiary); /* Matches .yaml-task-container background */
    color: var(--text-primary); /* Matches app's text color */
    text-decoration: none;
    font-family: Arial, sans-serif; /* Matches body font */
    font-style:italic; /* Italic style for emphasis */
    font-size: 14px; /* Matches .thread-task font-size */
    font-weight: 500; /* Matches .language-label */
    transition: all 0.2s ease; /* Matches .attach-option transition */
}

.related-search-chip:hover {
    background: var(--link-hover-bg); /* Matches .menu-option hover background */
    color: var(--accent-color); /* Matches .menu-option hover color */
    border-color: var(--accent-color); /* Matches .thread-item hover */
}

/* Dark theme adjustments */
[data-theme="dark"] .related-searches-container {
    border-color: var(--border-color); /* #555555 in dark mode */
    background: var(--bg-secondary); /* #333333 in dark mode */
}

[data-theme="dark"] .related-searches-header {
    color: var(--accent-color); /* #50fa7b in dark mode */
    border-bottom-color: var(--border-color); /* #555555 in dark mode */
}

[data-theme="dark"] .related-searches-header .search-icon {
    stroke: var(--accent-color); /* #50fa7b in dark mode */
}

[data-theme="dark"] .related-search-chip {
    background: var(--bg-tertiary); /* #3a3a3a in dark mode */
    border-color: var(--border-color); /* #555555 in dark mode */
    color: var(--text-primary); /* #e0e0e0 in dark mode */
}

[data-theme="dark"] .related-search-chip:hover {
    background: var(--link-hover-bg); /* #4a4a4a in dark mode */
    color: var(--accent-color); /* #50fa7b in dark mode */
    border-color: var(--accent-color); /* #50fa7b in dark mode */
}

/* Feedback Results - Using your preferred styles with textarea support */

/* This is for backwards compatibility with old feedback elements */
/*----------------------------------------------------------------------------------*/

.user-context-request .feedback-container,
.user-context-request .feedback-header,
.user-context-request .feedback-form,
.user-context-request .feedback-input,
.user-context-request .feedback-submit,
.user-context-request .feedback-message {
    display: none !important;
}

/*-----------------------------------------------------------------------------------*/

#streamOutput .feedback-result-content {
    font-family: inherit !important; /* Use streamOutput's monospace font like semantic search */
    font-weight: normal;
    color: var(--text-secondary);
    white-space: normal !important; /* Critical: Override streamOutput's pre-wrap */
    line-height: 1.4;
    font-style: italic; /* Match semantic search italic style */
    background-color: var(--bg-secondary);
    padding: 2px 4px;
    margin: 1px 0;
    border-radius: 3px;
    display: block;
    font-size: 1.1em; /* Match semantic search font size */
}

#streamOutput .feedback-label {
    font-weight: 600;
    color: var(--text-primary);
    font-style: normal; /* Labels are not italic */
    font-family: inherit !important;
    white-space: normal !important;
}

#streamOutput .feedback-result-content br {
    line-height: 0.2; /* Reduce line height for single br */
}

/* Styling for formatted text lines */
#streamOutput .feedback-text-line {
    margin-bottom: 0.2em; /* Reduced from 0.5em to match semantic search */
    font-family: inherit !important;
    font-style: italic;
    color: var(--text-secondary);
}

#streamOutput .feedback-text-line:last-child {
    margin-bottom: 0;
}

/* Styling for list items (numbered and bullet points) */
#streamOutput .feedback-list-item {
    margin-left: 1.5em;
    position: relative;
    padding-left: 0.5em;
    margin-bottom: 0.2em; /* Reduced from 0.5em to match semantic search */
    font-family: inherit !important;
    font-style: italic;
    color: var(--text-secondary);
    display: block;
}

#streamOutput .feedback-list-item:last-child {
    margin-bottom: 0;
}

#streamOutput .feedback-form-simple {
    display: flex;
    gap: 8px;
    margin-top: 16px; 
    font-style: normal;
    align-items: flex-start; /* Changed from center to flex-start for textarea */
    font-family: inherit !important;
    white-space: normal !important;
}

/* Updated for textarea with auto-resize */
#streamOutput .feedback-input-simple {
    flex: 1;
    padding: 10px; /* Match main query input padding */
    border: 1px solid var(--border-color);
    border-radius: 8px; /* Match main query input border-radius */
    font-size: 14px; /* Match main query input font-size */
    background-color: transparent;
    color: var(--text-primary);
    font-family: Arial, sans-serif !important;
    white-space: normal !important;
    transition: border-color 0.2s ease; /* Add transition like main input */
    
    /* Textarea specific styles */
    resize: none; /* Disable manual resize */
    overflow-y: hidden; /* Hide scrollbar, let it auto-resize */
    min-height: 40px; /* Minimum height to match single line */
    max-height: 120px; /* Maximum height to prevent it getting too tall */
    line-height: 1.4; /* Match container line-height */
    word-wrap: break-word; /* Enable word wrapping */
    box-sizing: border-box; /* Include padding in height calculations */
}

#streamOutput .feedback-input-simple:focus {
    outline: none;
    border-color: var(--accent-color); /* Match main query input focus */
}

#streamOutput .feedback-input-simple:hover {
    border-color: var(--accent-color); /* Add hover effect like main input */
}

#streamOutput .feedback-input-simple:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Adjust submit button alignment for textarea */
#streamOutput .feedback-submit-simple {
    background-color: transparent;
    border: 1px solid var(--accent-color);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
    color: var(--accent-color);
    flex-shrink: 0;
    font-family: inherit !important;
    white-space: normal !important;
    margin-top: 6px; /* Add small top margin to align with textarea text */
}

#streamOutput .feedback-submit-simple svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
}

#streamOutput .feedback-submit-simple:hover:not(:disabled) {
    background-color: var(--highlight-bg);
    color: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: scale(1.05);
}

#streamOutput .feedback-submit-simple:active {
    transform: scale(0.95);
}

#streamOutput .feedback-submit-simple:disabled {
    border-color: var(--text-tertiary);
    color: var(--text-tertiary);
    background-color: transparent;
    cursor: not-allowed;
    transform: none;
}

#streamOutput .feedback-submit-simple:disabled:hover {
    background-color: transparent;
}

#streamOutput .feedback-message-simple {
    margin-top: 6px;
    font-size: 0.9em;
    font-style: normal;
    color: var(--accent-color);
    font-family: inherit !important;
    white-space: normal !important;
}

/* Dark theme overrides */
@media (prefers-color-scheme: dark) {
    #streamOutput .feedback-result-content {
        color: var(--text-secondary);
        background-color: var(--bg-secondary);
    }
    
    #streamOutput .feedback-label {
        color: var(--text-primary);
    }
    
    #streamOutput .feedback-text-line,
    #streamOutput .feedback-list-item {
        color: var(--text-secondary);
    }
    
    #streamOutput .feedback-input-simple {
        background: var(--bg-primary);
        color: var(--text-primary);
        border-color: var(--border-color);
    }
}

[data-theme="dark"] #streamOutput .feedback-result-content {
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
}

[data-theme="dark"] #streamOutput .feedback-label {
    color: var(--text-primary);
}

[data-theme="dark"] #streamOutput .feedback-text-line,
[data-theme="dark"] #streamOutput .feedback-list-item {
    color: var(--text-secondary);
}

[data-theme="dark"] #streamOutput .feedback-input-simple {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}


/* --- Custom minimal scroll bar --- */

/* For WebKit browsers - show minimal scroll indicator */
#streamOutput::-webkit-scrollbar {
    width: 1px;
}

#streamOutput::-webkit-scrollbar-track {
    background: transparent;
}

#streamOutput::-webkit-scrollbar-thumb {
    background: var(--text-stream);
    border-radius: 1px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#streamOutput:hover::-webkit-scrollbar-thumb {
    opacity: 0.4;
}

#streamOutput::-webkit-scrollbar-thumb:hover {
    opacity: 0.6;
}

/* For Firefox - minimal scrollbar */
#streamOutput {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s ease;
}

#streamOutput:hover {
    scrollbar-color: var(--text-stream) transparent;
}

/* For contentOutput */
#contentOutput::-webkit-scrollbar,
#contentOutput *::-webkit-scrollbar {
    width: 1px !important;
    height: 0 !important;
}

#contentOutput::-webkit-scrollbar-track,
#contentOutput *::-webkit-scrollbar-track {
    background: transparent !important;
}

#contentOutput::-webkit-scrollbar-thumb,
#contentOutput *::-webkit-scrollbar-thumb {
    background: var(--text-stream) !important;
    border-radius: 1px !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

#contentOutput:hover::-webkit-scrollbar-thumb,
#contentOutput *:hover::-webkit-scrollbar-thumb {
    opacity: 0.4 !important;
}

#contentOutput::-webkit-scrollbar-thumb:hover,
#contentOutput *::-webkit-scrollbar-thumb:hover {
    opacity: 0.6 !important;
}

#contentOutput,
#contentOutput * {
    scrollbar-width: thin !important;
    scrollbar-color: transparent transparent !important;
    transition: scrollbar-color 0.3s ease !important;
}

#contentOutput:hover,
#contentOutput *:hover {
    scrollbar-color: var(--text-stream) transparent !important;
}

/* Interactive Pills Container */
.interactive-pills-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 15px 0;
    width: 100%;
}

/* Interactive Pill Style */
.interactive-pill {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px var(--shadow-color);
    position: relative;
    overflow: hidden;
}

.interactive-pill:hover {
    background-color: var(--link-hover-bg);
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: 0 3px 6px var(--shadow-color);
}

.interactive-pill:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px var(--shadow-color);
}

/* Pill Number */
.pill-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    background-color: transparent;
    color: var(--accent-color);
    border: 1.5px solid var(--accent-color);
    border-radius: 50%;
    font-weight: normal;
    margin-right: 12px;
    flex-shrink: 0;
}

/* Pill Content */
.pill-content {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
}

/* Ensure links within pills don't interfere with pill clicking */
.pill-content a {
    pointer-events: none;
}

/* Bold text in pills */
.pill-content strong {
    color: var(--accent-color);
    font-weight: 600;
}

/* Pill Icon */
.pill-icon {
    margin-left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--accent-color);
    opacity: 0.7;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.interactive-pill:hover .pill-icon {
    opacity: 1;
}

.pill-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Dark theme adjustments */
[data-theme="dark"] .interactive-pill {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .interactive-pill:hover {
    background-color: var(--link-hover-bg);
    border-color: var(--accent-color);
}

[data-theme="dark"] .pill-number {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Edit button styling */
.pill-edit-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--accent-color);
    opacity: 0.6;
    transition: opacity 0.2s;
    padding: 2px;
    flex-shrink: 0;
}

.interactive-pill:hover .pill-edit-btn {
    display: flex;
}

.pill-edit-btn:hover {
    opacity: 1;
}

.pill-edit-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Edit textarea styling */
.pill-edit-input {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    padding: 4px 8px;
    background-color: var(--bg-primary);
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: inherit;
    outline: none;
    resize: none;
    overflow: hidden;
    min-height: 20px;
}

/* Editing state */
.interactive-pill.editing {
    background-color: var(--link-hover-bg);
    border-color: var(--accent-color);
}

.interactive-pill.editing .pill-edit-btn {
    display: flex;
    opacity: 1;
    color: var(--success-color, var(--accent-color));
}

.interactive-pill.editing .pill-icon {
    display: none;
}

.interactive-pill.editing:hover {
    transform: none;
}

/* Dark theme adjustments */
[data-theme="dark"] .pill-edit-input {
    background-color: var(--bg-secondary);
    border-color: var(--accent-color);
    color: var(--text-primary);
}

/* Workflow Map Modal Styles */
.workflow-modal-content {
    width: 95% !important; /* Increased from 90% */
    max-width: 1600px !important; /* Increased from 1400px */
    max-height: 95vh !important; /* Increased from 90vh */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px; /* Reduced padding to save space */
    margin-bottom: 0; /* Remove bottom margin */
}

.modal-header h2 {
    margin: 0; /* Remove default margin from the title */
    font-size: 18px; /* Slightly smaller title */
}

/* Modified modal-body for the split layout */
.modal-body {
    flex-grow: 1;
    overflow: hidden;
    padding: 0;
    min-height: 500px; /* Increased from 400px */
}

/* New class for workflow specific layout */
.workflow-body {
    display: flex;
    flex-direction: row;
    height: 100%;
    max-height: 80vh; /* Increased from 70vh */
}

.workflow-map-container {
    flex: 85;
    overflow: auto;
    padding: 15px; /* Reduced padding to save space */
}

.workflow-details-pane {
    flex: 15;
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-secondary);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    color: var(--text-tertiary);
}

.details-header {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--accent-color);
    padding-bottom: 3px;
    border-bottom: 1px solid var(--border-color);
    opacity: 0.7;
}

.details-content {
    flex: 1;
    overflow-y: auto;
}

.details-text {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 8px;
    border-radius: 3px;
    max-height: 300px;
    overflow-y: auto;
    word-break: break-word;
    line-height: 1.4;
    font-size: 12px;
    opacity: 0.85;
}

.fallback-answer {
    margin-top: 2px;
    padding-top: 2px;
    max-height: 400px;
    overflow-y: auto;
}

.fallback-label {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 3px;
    letter-spacing: 0.5px;
}

.modal-footer {
    padding: 2px 4px; /* Reduced padding to save space */
    font-size: 0.8em;
    color: var(--text-secondary);
    margin-top: 0; /* Remove top margin */
}

#workflowMapContainer g.node:hover * {
    stroke: var(--accent-color) !important;
    stroke-width: 1px !important;
}

/* Loading indicator */
.loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 200px;
    color: var(--text-secondary);
    font-style: italic;
}

.details-plot-preview {
    margin-top: 10px;
    min-height: 50px;
    max-height: 200px;
    overflow: hidden;
    border-radius: 3px;
    background-color: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.plot-preview-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plot-preview-container img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
}

.plot-preview-message {
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 11px;
    text-align: center;
    padding: 10px;
}

.keyboard-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto; /* Push to the right */
    padding: 2px 5px;
    min-width: 28px;
    height: 16px;
    background-color: rgba(0, 0, 0, 0.08); /* Subtler background */
    border-radius: 3px;
    font-size: 10px;
    font-family: system-ui, -apple-system, sans-serif; /* System font for better platform look */
    font-weight: 500; /* Medium weight for better readability */
    letter-spacing: 0.5px;
    opacity: 0.8;
    color: var(--text-secondary); /* Use theme color variable */
    text-align: center;
}

/* Adjust for dark theme */
[data-theme="dark"] .keyboard-shortcut {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}


.auxiliary-status-item .file-status-message {
    /* Inherits styles from .file-status-message */
    /* You can add specific overrides if needed */
    font-size: 13px; /* Slightly smaller if desired */
}

.aux-error-message { /* For the "max 3 datasets" error */
    padding: 4px 0;
    font-size: 14px;
}

/* --- Generated Datasets (in streamOutput) --- */
#streamOutput .generated-datasets-container {
    margin: 1rem 0;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-secondary);
    box-shadow: 0 1px 3px var(--shadow-color);
    font-family: Arial, sans-serif;
    white-space: normal;
    line-height: 1.5;
}

#streamOutput .generated-datasets-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-color);
    margin-top: 0;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

#streamOutput .generated-datasets-header .file-icon-header {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    flex-shrink: 0;
}

#streamOutput .generated-datasets-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

#streamOutput .generated-dataset-item.no-datasets-message {
    font-style: italic;
    color: var(--text-secondary);
    font-size: 14px;
    padding: 8px 0;
}

#streamOutput .dataset-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    max-width: 100%;
    cursor: pointer;
}

#streamOutput .dataset-link:hover {
    background: var(--link-hover-bg);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

#streamOutput .dataset-link .download-icon-pill {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    flex-shrink: 0;
}

#streamOutput .dataset-link .dataset-path {
    word-break: break-word;
    line-height: 1.3;
}

/* Search Result Styles */
.search-result-content {
    font-style: italic;
    color: var(--text-secondary, #666);
    background-color: var(--bg-secondary, #f8f9fa);
    padding: 4px 8px;
    margin: 2px 0;
    border-radius: 3px;
    display: block;
    font-size: 1.1em; /* Same as thought-content */
    line-height: 1.4;
}

.search-label {
    font-weight: 600;
    color: var(--text-primary, #333);
    font-style: normal; /* Remove italic from labels */
}

.search-code {
    background: var(--code-background, rgba(0,0,0,0.1));
    padding: 2px 4px;
    border-radius: 2px;
    font-family: monospace;
    font-size: 0.85em;
    font-style: normal; /* Remove italic from code */
}

/* Dark theme overrides */
@media (prefers-color-scheme: dark) {
    .search-result-content {
        color: var(--text-secondary);
        background-color: var(--bg-secondary);
    }
    
    .search-label {
        color: var(--text-primary);
    }
}

[data-theme="dark"] .search-result-content {
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .search-label {
    color: var(--text-primary);
}

/* Thought Content Styles */
.thoughts-toggle {
    position: absolute;
    bottom: 2px; /* Reduced from 8px */
    right: 4px;  /* Reduced from 8px */
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;  /* Reduced from 8px */
    border-radius: 6px;
    display: flex;
    align-items: center;
    color: var(--text-secondary, #666);
    transition: color 0.2s ease, background-color 0.2s ease;
    z-index: 10; /* Ensure it's on top */
}

.thoughts-toggle:hover {
    color: var(--accent-color, #35c477);
    background: var(--bg-secondary, rgba(53, 196, 119, 0.1));
}

.chevron-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.thoughts-container {
    margin-top: 8px;
    padding-left: 16px;
    border-left: 2px solid var(--border-color, #eee);
}

.thought-content {
    font-style: italic;
    color: var(--text-secondary, #666);
    background-color: var(--bg-secondary, #f8f9fa);
    padding: 4px 8px;
    margin: 2px 0;
    border-radius: 3px;
    display: block;
    font-size: 1.1em;
}

/* Dark theme overrides */
@media (prefers-color-scheme: dark) {
    .thought-content {
        color: var(--text-secondary);
        background-color: var(--bg-secondary);
        border-left-color: var(--accent-color);
    }
}

/* If your app uses a data-theme attribute instead */
[data-theme="dark"] .thought-content {
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border-left-color: var(--accent-color);
}

.tool-call.expanded {
    width: 30vw !important; /* Your working expand style */
    max-width: 30vw !important;
}

.thoughts-container {
    margin-top: 8px;
    padding-left: 16px;
    border-left: 2px solid var(--border-color, #eee);
    overflow: hidden; /* Prevents content from breaking layout during transition */
}

.results-container {
    margin-top: 8px;
    padding-left: 16px;
    border-left: 2px solid var(--border-color, #eee);
    overflow: hidden;
}

/* Code Result Styles */
.code-result-content {
    font-style: italic;
    color: var(--text-secondary, #666);
    background-color: var(--bg-secondary, #f8f9fa);
    padding: 4px 8px;
    margin: 2px 0;
    border-radius: 3px;
    display: block;
    font-size: 1.1em;
    line-height: 1.4;
}

.code-label {
    font-weight: 600;
    color: var(--text-primary, #333);
    font-style: normal;
}

.code-label.error {
    color: var(--error-color, #dc3545);
}

/* Dark theme overrides */
@media (prefers-color-scheme: dark) {
    .code-result-content {
        color: var(--text-secondary);
        background-color: var(--bg-secondary);
    }
    
    .code-label {
        color: var(--text-primary);
    }
    
    .code-label.error {
        color: var(--error-color, #ff6b6b);
    }
}

[data-theme="dark"] .code-result-content {
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .code-label {
    color: var(--text-primary);
}

[data-theme="dark"] .code-label.error {
    color: var(--error-color, #ff6b6b);
}

/* --- Settings container --- */
.settings-container {
    position: relative;
    display: inline-block;
}

.settings-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-secondary) !important;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, transform 0.2s;
}

.settings-button svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
}

.settings-button:hover {
    color: var(--accent-color) !important;
    transform: scale(1.1);
}

.settings-popup {
    position: absolute;
    top: 0;
    left: calc(100% + 10px);
    right: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-color); /* Or a lighter version */
    border-radius: 10px; /* Updated */
    padding: 10px; /* Updated */
    display: none;
    flex-direction: column;
    gap: 6px; /* Updated */
    min-width: 190px; /* Slightly wider if padding increased */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05); /* Updated */
    z-index: 1002;
}

.settings-popup::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    width: 10px;
    height: 100%;
    background: transparent;
}

.settings-popup::after {
    content: '';
    position: absolute;
    top: 14px;
    left: -5px;
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-right: none;
    border-top: none;
}

.settings-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
    text-decoration: none;
    border-radius: 6px;
    white-space: nowrap;
    font-weight: normal;
    font-size: 14px;
    font-family: inherit;
}

.settings-option:hover {
    color: var(--accent-color);
    background-color: rgba(128, 128, 128, 0.07);
}

.settings-option svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

.settings-option svg[fill="currentColor"] {
    fill: currentColor;
    stroke: none;
}

.settings-container:hover .settings-popup {
    display: flex;
}

.integrations-menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
}

.integrations-option {
    justify-content: space-between;
}

.submenu-arrow {
    margin-left: auto;
    padding-left: 8px;
    font-size: 1.1em;
    color: var(--text-tertiary);
    transition: color 0.2s;
}

.integrations-option:hover .submenu-arrow {
    color: var(--accent-color);
}

.integrations-submenu {
    position: absolute;
    top: 0;
    left: calc(100% + 5px);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    display: none !important;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    box-shadow: 0 2px 10px var(--shadow-color);
    z-index: 1003;
}

.integrations-submenu::before {
    content: '';
    position: absolute;
    top: 0;
    left: -5px;
    width: 5px;
    height: 100%;
    background: transparent;
}

.integrations-submenu::after {
    content: '';
    position: absolute;
    top: 14px;
    left: -5px;
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-right: none;
    border-top: none;
}

.integrations-menu-item:hover .integrations-submenu,
.integrations-submenu:hover {
    display: flex !important;
}

.menu-popup .settings-container {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1001;
}

.menu-popup {
    overflow: visible;
}

/* PDF Export Styles */
/* Button styling to match BambooAI app theme */

/* Button Container */
.tab-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.tab-header-container h3 {
    margin: 0;
}

/* PDF Export Button - Green accent ghost style */
.pdf-export-btn {
    background: transparent;
    border: 1px solid #4a9d5b;
    border-radius: 4px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #4a9d5b;
    font-size: 13px;
    font-weight: 500;
    gap: 6px;
    white-space: nowrap;
}

.pdf-export-btn:hover:not(:disabled) {
    background-color: #4a9d5b;
    border-color: #4a9d5b;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(74, 157, 91, 0.3);
}

.pdf-export-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

.pdf-export-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.pdf-export-btn:disabled:hover {
    background: transparent;
    color: #4a9d5b;
    box-shadow: none;
}

.pdf-export-btn .pdf-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.pdf-export-btn .pdf-text {
    font-family: inherit;
}

/* Loading Spinner */
.pdf-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(74, 157, 91, 0.3);
    border-top: 2px solid #4a9d5b;
    border-radius: 50%;
    animation: pdf-spin 0.8s linear infinite;
}

@keyframes pdf-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Dark Theme - Enhanced */
[data-theme="dark"] .pdf-export-btn {
    border-color: #4a9d5b;
    color: #5cb870;  /* Slightly brighter green for dark mode */
    background: rgba(74, 157, 91, 0.1);
}

[data-theme="dark"] .pdf-export-btn:hover:not(:disabled) {
    background-color: #4a9d5b;
    border-color: #4a9d5b;
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(74, 157, 91, 0.4);
}

[data-theme="dark"] .pdf-spinner {
    border-color: rgba(92, 184, 112, 0.3);
    border-top-color: #5cb870;
}