/* START OF FILE styles.css */

/* ========== Material Design 3 - Light Theme ========== */
:root {
    /* --- M3 Light Theme Color Palette (Based on Teal #00968F) --- */
    /* Using https://m3.material.io/theme-builder#/custom to generate */
    --md-sys-color-primary-light: #006A66;
    --md-sys-color-on-primary-light: #FFFFFF;
    --md-sys-color-primary-container-light: #6FF7F0;
    --md-sys-color-on-primary-container-light: #00201F;
    --md-sys-color-primary-hover-light: #00807B;
    /* Custom lighter hover */

    --md-sys-color-secondary-light: #4A6361;
    --md-sys-color-on-secondary-light: #FFFFFF;
    --md-sys-color-secondary-container-light: #CCE8E5;
    --md-sys-color-on-secondary-container-light: #051F1E;

    --md-sys-color-tertiary-light: #4B607C;
    --md-sys-color-on-tertiary-light: #FFFFFF;
    --md-sys-color-tertiary-container-light: #D2E4FF;
    --md-sys-color-on-tertiary-container-light: #041C35;

    --md-sys-color-error-light: #BA1A1A;
    --md-sys-color-on-error-light: #FFFFFF;
    --md-sys-color-error-container-light: #FFDAD6;
    --md-sys-color-on-error-container-light: #410002;

    --md-sys-color-background-light: #F4FBFA;
    /* Slightly off-white */
    --md-sys-color-on-background-light: #171D1C;
    --md-sys-color-surface-light: #F4FBFA;
    /* Same as background */
    --md-sys-color-on-surface-light: #171D1C;
    --md-sys-color-surface-variant-light: #DAE5E3;
    --md-sys-color-on-surface-variant-light: #3F4947;

    /* Outline variant used for borders */
    --md-sys-color-outline-variant-light: #909e9b;

    --md-sys-color-surface-dim-light: #D5DBDA;
    --md-sys-color-surface-bright-light: #F4FBFA;
    --md-sys-color-surface-container-lowest-light: #FFFFFF;
    --md-sys-color-surface-container-low-light: #EEF5F4;
    --md-sys-color-surface-container-light: #E8EFEE;
    /* Use for Header/Footer */
    --md-sys-color-surface-container-high-light: #E2E9E8;
    --md-sys-color-surface-container-highest-light: #DCE4E3;
    /* Use for Inputs/Toasts */

    /* --- Original Variable Mapping (Legacy Support & Consistency) --- */
    --primary-color: var(--md-sys-color-primary-light);
    --primary-hover: var(--md-sys-color-primary-hover-light);
    --surface-color: var(--md-sys-color-surface-light);
    --background-color: var(--md-sys-color-background-light);
    --divider-color: var(--md-sys-color-outline-light);
    /* Divider maps to outline */
    --text-primary: var(--md-sys-color-on-surface-light);
    --text-on-primary: var(--md-sys-color-on-primary-light);
    --error-color: var(--md-sys-color-error-light);
    /* Success role variables removed (unused) */

    /* --- Theme-Agnostic Aliases (Light mappings) --- */
    --on-surface: var(--md-sys-color-on-surface-light);
    --on-surface-variant: var(--md-sys-color-on-surface-variant-light);
    --outline: var(--md-sys-color-outline-light);
    --outline-variant: var(--md-sys-color-outline-variant-light);
    --surface-variant: var(--md-sys-color-surface-variant-light);
    --surface-container-lowest: var(--md-sys-color-surface-container-lowest-light);
    --surface-container-low: var(--md-sys-color-surface-container-low-light);
    --surface-container: var(--md-sys-color-surface-container-light);
    --surface-container-high: var(--md-sys-color-surface-container-high-light);
    --surface-container-highest: var(--md-sys-color-surface-container-highest-light);

    /* --- Spacing --- */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 24px;

    /* --- Border Radii --- */
    --border-radius-sm: 6px;
    /* Extra Small (Inputs, Checkbox, Debug, Chunk Info, Toast, Footer Link) */
    --border-radius-md: 12px;
    /* Medium (Toggle Container) */
    --border-radius-lg: 16px;
    /* Large (Header, Main, Footer, File Upload) */
    --border-radius-xl: 10px;
    /* Small (Table Container) */
    --border-radius-pill: 20px;
    /* Full/Pill (Buttons, based on 40px height) */

    /* Shadows removed — flat style */

    /* --- Motion --- */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    /* M3 Standard Easing */
    --duration-short: 100ms;
    --duration-medium: 250ms;
    --duration-long: 400ms;

    /* --- Interaction States --- */
    --hover-opacity: 0.08;
    /* 8% */
    --focus-opacity: 0.12;
    /* 12% */
    /* pressed/dragged opacities removed (unused) */
    /* Calculated state layers */
    --hover-bg: color-mix(in srgb, var(--primary-color) calc(var(--hover-opacity) * 100%), transparent);
    /* active-bg removed (unused) */
    --focus-bg: color-mix(in srgb, var(--primary-color) calc(var(--focus-opacity) * 100%), transparent);

    /* icon-color alias removed (unused; use currentColor) */
}

/* ===== Base Reset & Body ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', 'OPPO Sans Medium', sans-serif;
    margin: 0 auto;
    padding: var(--spacing-5) var(--spacing-4);
    background: var(--background-color);
    color: var(--text-primary);
    line-height: 1.5;
    max-width: 800px;
    min-height: 100vh;
    scrollbar-color: var(--surface-container-high) var(--surface-container-low);
}

/* ===== General Container Styles ===== */
header,
main,
footer {
    border-radius: var(--border-radius-lg);
    /* Large radius for main containers */
    box-shadow: none;
    border: 1px solid var(--outline-variant);
    /* Rely on border and bg color */
}

/* ===== Header ===== */
header {
    background: var(--surface-container);
    /* Use Surface Container */
    color: var(--on-surface);
    padding: var(--spacing-4) var(--spacing-5);
    /* Border unified at general rule */
    margin-bottom: var(--spacing-5);

    h2 {
        margin: 0;
        font-size: 1.375rem;
        /* M3 Title Large */
        font-weight: 500;
        letter-spacing: 0.25px;
        line-height: 1.6;
    }
}

/* ===== Main Content Area ===== */
main {
    background: var(--surface-color);
    padding: var(--spacing-5);
    position: relative;
    /* Keep for potential absolute children */
    z-index: 1;
    /* Keep for stacking context */
    /* Border unified at general rule */
}

/* ===== File Upload Component ===== */
.file-upload {
    --highlight-color: var(--primary-color);
    --info-bg: var(--surface-container-low);
    /* Subtle bg for info */
    background: transparent;
    /* Make it blend more, rely on border */
    border: 1.5px dashed var(--outline-variant);
    /* Keep dashed style */
    border-radius: var(--border-radius-lg);
    /* Large radius */
    padding: calc(var(--spacing-5) * 1.5) var(--spacing-5);
    /* More padding */
    text-align: center;
    position: relative;
    margin: var(--spacing-4) auto;
    color: var(--on-surface-variant);
    /* Less prominent text */
}

.file-upload:hover {
    border-color: var(--highlight-color);
    background: var(--hover-bg);
}

.hidden-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    top: 0;
    left: 0;
}

.upload-area {
    pointer-events: none;
    /* Clicks pass through to hidden input */
}

.highlight {
    color: var(--highlight-color);
    font-weight: 500;
    margin-left: 4px;
}

.file-info {
    margin-top: var(--spacing-4);
    color: var(--text-primary);
    font-size: 0.9em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chunk-info {
    margin-top: var(--spacing-3);
    color: var(--on-surface-variant);
    font-size: 0.875em;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--info-bg);
    border-radius: var(--border-radius-sm);
    /* Small radius */
    border: 1px solid var(--outline-variant);
}

.settings-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: var(--spacing-4) 0;
    flex-wrap: wrap;
    /* Allow wrapping */
}

/* ===== Upload Mode Selector (Radio Buttons) ===== */
.upload-mode-selector {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    /* Space between label and radios */
    margin-right: var(--spacing-4);
    /* Space before next element */
}

.mode-label {
    font-size: 0.875rem;
    /* M3 Label Large */
    color: var(--on-surface-variant);
    margin-right: var(--spacing-2);
}

.radio-label {
    --radio-size: 20px;
    --radio-border-width: 2px;
    --radio-dot-size: 10px;
    /* Size of the inner dot */
    --active-color: var(--primary-color);
    --border-color: var(--outline-variant);
    --hover-bg: var(--hover-bg);

    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: var(--spacing-2);
    font-size: 0.875rem;
    /* M3 Label Large */
    padding: var(--spacing-2) var(--spacing-3);
    /* Padding around text + radio */
    border-radius: var(--border-radius-pill);
    /* Pill shape for label */
    position: relative;
    min-height: 40px;
    /* Match button height */
    color: var(--on-surface-variant);
    background-color: transparent;
    /* No background initially */
    border: 1px solid transparent;
    /* Placeholder for border */
    transition: background-color var(--duration-medium) var(--ease-standard),
        border-color var(--duration-medium) var(--ease-standard);
}

.radio-label:hover {
    background-color: var(--hover-bg);
}

/* Custom radio button circle */
.radio-label::before {
    content: '';
    display: inline-block;
    width: var(--radio-size);
    height: var(--radio-size);
    border-radius: 50%;
    border: var(--radio-border-width) solid var(--border-color);
    background-color: transparent;
    transition: all var(--duration-short) var(--ease-standard);
    flex-shrink: 0;
    /* Prevent shrinking */
}

/* Style when checked */
.radio-label input[type="radio"]:checked+.radio-text::before {
    border-color: var(--active-color);
}

/* Inner dot for checked state */
.radio-label input[type="radio"]:checked+.radio-text::after {
    content: '';
    position: absolute;
    /* Calculate position to center the dot inside the circle */
    left: calc(var(--spacing-3) + var(--radio-border-width) + (var(--radio-size) - var(--radio-border-width)*2 - var(--radio-dot-size)) / 2);
    top: 50%;
    transform: translateY(-50%);
    width: var(--radio-dot-size);
    height: var(--radio-dot-size);
    border-radius: 50%;
    background-color: var(--active-color);
    transition: background-color var(--duration-short) var(--ease-standard);
}


/* Hide actual radio input */
.radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Focus visible style for radio */
.radio-label input[type="radio"]:focus-visible+.radio-text {
    /* Unified a11y focus: soft background highlight on label */
    background-color: var(--hover-bg);
    border-radius: var(--border-radius-pill);
}


/* ===== URL/Note Input Field (shared) ===== */
.url-container, .note-container {
    width: 100%;
    margin: var(--spacing-4) 0;
}

.text-field, #sjurl {
    width: 100%;
    height: 56px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--border-radius-lg);
    /* Unified with header/footer background */
    background: var(--surface-container);
    padding: var(--spacing-2) var(--spacing-3);
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.5;
}
.text-field:focus, #sjurl:focus {
    /* Unified a11y focus: soft highlight consistent with selectors */
    outline: none;
    border-color: var(--outline-variant);
    background-color: var(--hover-bg);
}

/* ===== M3 Style Checkbox (Applied via .chunk-toggle) ===== */
/* Reusing .chunk-toggle as the label container */
.chunk-toggle {
    --checkbox-size: 18px;
    /* M3 Checkbox size */
    --checkbox-border-width: 2px;
    --active-color: var(--primary-color);
    --border-color: var(--outline-variant);
    --hover-bg: var(--hover-bg);
    --text-color: var(--on-surface-variant);

    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: var(--spacing-2);
    margin: var(--spacing-2) 0;
    font-size: 0.875rem;
    /* M3 Label Large */
    padding: var(--spacing-2) var(--spacing-3);
    /* Adjust padding */
    padding-left: calc(var(--spacing-2) + var(--checkbox-size) + var(--spacing-2));
    /* Space for checkbox */
    border-radius: var(--border-radius-pill);
    /* Pill shape */
    position: relative;
    min-height: 40px;
    /* Match button height */
    color: var(--text-color);
    background-color: transparent;
    /* No background */
    border: 1px solid transparent;
    /* No border */
    transition: background-color var(--duration-medium) var(--ease-standard);
}

.chunk-toggle:hover {
    background: var(--hover-bg);
}

/* Custom Checkbox Indicator */
.custom-checkbox {
    position: absolute;
    left: var(--spacing-3);
    /* Position checkbox inside padding */
    top: 50%;
    transform: translateY(-50%);
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border: var(--checkbox-border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    /* Small radius */
    background-color: transparent;
    transition: all var(--duration-short) var(--ease-standard);
    pointer-events: none;
    /* Prevent interaction with the span itself */
}

/* Checked State */
.toggle-input:checked+.custom-checkbox {
    border-color: var(--active-color);
    background-color: var(--active-color);
}

/* Checkmark */
.toggle-input:checked+.custom-checkbox::after {
    content: "";
    position: absolute;
    /* Adjust checkmark position and size for 18px box */
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid var(--text-on-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Focus Visible Style */
.toggle-input:focus-visible+.custom-checkbox {
    /* Unified focus: use focus-bg instead of ring */
    outline: none;
    box-shadow: none;
    background-color: var(--focus-bg);
}

/* Apply focus ring to the label as well for better visibility */
.chunk-toggle:focus-within {
    /* Limit focus styling to the checkbox only */
    outline: none;
}


/* Disabled State */
.toggle-input:disabled+.custom-checkbox {
    opacity: 0.5;
    border-color: var(--outline);
    background-color: var(--surface-variant);
}

.chunk-toggle:has(input:disabled) {
    color: var(--on-surface-variant);
    opacity: 0.7;
    cursor: not-allowed;
    background-color: transparent;
    /* Ensure no hover effect */
}

.chunk-toggle:has(input:disabled):hover {
    background-color: transparent;
}


/* Hide actual checkbox input */
.toggle-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}


/* ===== Button System ===== */
button {
    padding: 10px var(--spacing-5);
    /* M3 standard padding */
    background: var(--primary-color);
    color: var(--text-on-primary);
    border: none;
    /* M3 buttons usually have no border */
    border-radius: var(--border-radius-pill);
    /* Pill shape */
    box-shadow: none;
    /* No shadow for buttons */
    font-size: 0.875rem;
    /* M3 Label Large */
    font-weight: 500;
    letter-spacing: 0.1px;
    cursor: pointer;
    height: 40px;
    /* M3 standard height */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Center content */
    gap: var(--spacing-2);
    text-transform: none;
    /* M3 usually doesn't uppercase */
    transition: all var(--duration-medium) var(--ease-standard);
    /* Use defined duration */
    margin: var(--spacing-1);
    /* Global margin: top/right/bottom/left */
    /* min-width removed for natural sizing */
}

button:hover {
    background: var(--primary-hover);
    box-shadow: none;
    /* Increase shadow on hover */
}

button:active {
    box-shadow: none;
    /* Slightly less shadow on press */
}

button:disabled {
    background-color: var(--surface-variant);
    /* Disabled background */
    color: var(--on-surface-variant);
    /* Disabled text */
    opacity: 0.7;
    box-shadow: none;
    /* No shadow when disabled */
    cursor: not-allowed;
}

/* Button Groups */
/* Unified button rows spacing */
.btn-row,
.button-group,
.debug-buttons,
.action-buttons,
.history-actions {
    margin: var(--spacing-4) 0;
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    align-items: center;
}

/* ===== Table System ===== */
#uploadHistory {
    margin-top: var(--spacing-5);
    /* More space before table */
    background: var(--surface-color);
    /* Use base surface */
    overflow: hidden;
    /* Clip content */
    display: flex;
    /* Needed if table-container is direct child */
    flex-direction: column;
    /* Needed if table-container is direct child */
    box-shadow: none;
    /* No shadow; flat table container */
    border-radius: var(--border-radius-lg);
}

.table-container {
    max-height: 400px;
    overflow: auto;
    overflow-x: auto;
    border-radius: var(--border-radius-lg);
    /* Small radius for table container */
    border: 1px solid var(--outline-variant);
    /* Unified border color via outline-variant */
    scrollbar-color: var(--surface-container-high) var(--surface-container-low);
}

.upload-history-table {
    width: 100%;
    min-width: 640px;
    table-layout: fixed;
    border-collapse: collapse;
}

/* Table Header */
.upload-history-table thead {
    position: sticky;
    /* Keep header visible */
    top: 0;
    z-index: 1;
}

.upload-history-table th {
    background: var(--surface-container);
    /* Subtle header bg */
    padding: var(--spacing-3) var(--spacing-4);
    /* 12px 16px */
    height: 56px;
    /* M3 Header Row Height */
    font-weight: 500;
    /* M3 Medium weight */
    font-size: 0.875rem;
    /* M3 Label Large */
    text-align: left;
    color: var(--text-primary);
    border-bottom: 1px solid var(--outline-variant);
    /* Use variant for internal lines */
}

/* Table Body Cells */
.upload-history-table td {
    padding: var(--spacing-3) var(--spacing-4);
    /* 12px 16px */
    height: 52px;
    /* M3 Body Row Height */
    border-bottom: 1px solid var(--outline-variant);
    /* Use variant for internal lines */
    font-size: 0.875rem;
    /* M3 Body Medium or Label Large */
    vertical-align: middle;
    /* Align content vertically */
    /* Single-line truncation for cells */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Remove bottom border for last row */
.upload-history-table tr:last-child td {
    border-bottom: none;
}

/* Row Hover Effect */
.upload-history-table tbody tr:hover td {
    background: var(--hover-bg);
}

/* Link Cell Styling */
.link-cell,
.note-cell {
    /* Ensure single-line with ellipsis for long content */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: normal;
}

/* Time column should not be truncated */
.upload-history-table td.time-cell {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
}

.link-cell a {
    color: var(--primary-color);
    text-decoration: none;
    padding: 2px 4px;
    margin: -2px -4px;
    /* Negative margin to make hover bg fit better */
    border-radius: var(--border-radius-sm);
}

.link-cell a:hover {
    text-decoration: underline;
    background-color: var(--hover-bg);
}


/* ===== Debug Output ===== */
.debug-output {
    background: var(--surface-color);
    /* Subtle background */
    border: 1px solid var(--outline-variant);
    border-radius: var(--border-radius-lg);
    /* Small radius */
    padding: var(--spacing-3);
    margin: var(--spacing-4) 0;
    font-family: 'Roboto Mono', monospace;
    /* Monospace font */
    overflow: auto;
    /* Scrollbars */
    max-height: 200px;
    scrollbar-color: var(--surface-container-high) var(--surface-container-low);
}

.debug-output pre {
    margin: 0;
    font-size: 0.8125rem;
    /* Slightly smaller */
    line-height: 1.6;
    color: var(--on-surface-variant);
    /* Use variant color */
    white-space: pre-wrap;
    /* Allow wrapping */
    word-break: break-all;
    /* Break long lines */
}

/* ===== Footer ===== */
footer {
    background: var(--surface-container);
    /* Consistent with Header */
    margin-top: var(--spacing-5);
    padding: var(--spacing-4);
    /* Consistent padding */
    /* Border unified at general rule */
    /* border-radius is --border-radius-lg from general rule */
}

footer p {
    max-width: 800px;
    /* Match body max-width */
    margin: var(--spacing-1) auto;
    /* Reduced vertical margin */
    padding: 0;
    /* Remove inner padding */
    color: var(--on-surface-variant);
    /* Less prominent text */
    font-size: 0.875rem;
    /* M3 Body Small or Label Medium */
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    /* Allow wrapping on small screens */
}

footer p:last-child {
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--outline-variant);
    margin-top: var(--spacing-3);
}

footer a {
    color: var(--primary-color);
    text-decoration: none;
    padding: 2px 4px;
    margin: -2px -4px;
    /* Counteract padding for hover */
    border-radius: var(--border-radius-sm);
    /* Small radius */
}

footer a:hover {
    text-decoration: underline;
    background-color: var(--hover-bg);
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 300px) {
    body {
        padding: var(--spacing-4) var(--spacing-3);
        /* Adjust padding */
    }

    header,
    main,
    footer {
        padding: var(--spacing-4);
        /* Adjust padding */
    }

    header h2 {
        font-size: 1.25rem;
        /* Slightly smaller title */
    }

    .settings-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .button-group,
    .debug-buttons,
    .action-buttons,
    .history-actions {
        gap: var(--spacing-3);
        /* Slightly more gap */
    }

    /* Ensure table cells don't get too cramped */
    .upload-history-table th,
    .upload-history-table td {
        padding: var(--spacing-2) var(--spacing-3);
        white-space: nowrap;
        /* Prevent wrapping initially */
        overflow: hidden;
        text-overflow: ellipsis;
        /* Add ellipsis */
    }

    /* Allow link cell to wrap if needed */
.upload-history-table td.link-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
}

@media (max-width: 300px) {
    body {
        padding: var(--spacing-3) var(--spacing-2);
    }

    header,
    main,
    footer {
        padding: var(--spacing-3);
        border-radius: var(--border-radius-md);
        /* Smaller radius on small screens */
    }

    .file-upload {
        padding: var(--spacing-5) var(--spacing-4);
        border-radius: var(--border-radius-md);
    }

    button {
        width: 100%;
        /* Full width buttons */
        justify-content: center;
    }

    footer p {
        flex-direction: column;
        align-items: center;
        /* Center align items */
        gap: var(--spacing-1);
        text-align: center;
    }

    footer p:last-child {
        padding-top: var(--spacing-2);
        margin-top: var(--spacing-2);
    }

    /* Make table horizontally scrollable */
    #uploadHistory {
        border-radius: var(--border-radius-md);
        /* Match container radius on small screens */
    }

    .table-container {
        overflow-x: auto;
    }

    .upload-history-table {
        min-width: 600px;
        /* Force scroll if needed */
        table-layout: auto;
        /* Allow columns to resize */
    }

    .upload-history-table th,
    .upload-history-table td {
        white-space: normal;
        /* Allow wrapping again */
    }

    /* Keep key columns single-line with ellipsis even on very small screens */
    .upload-history-table td.link-cell,
    .upload-history-table td.note-cell {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ===== Performance Hints ===== */
main,
.file-upload,
#uploadHistory {
    /* Promote layers for potentially complex/animated elements */
    /* Use sparingly as it can increase memory usage */
    will-change: transform;
    /* Keep will-change if animations/transitions are complex */
    transform: translateZ(0);
}

/* ===== Toast Notification Styling ===== */
.m3-toast {
    background: var(--surface-container-highest) !important;
    /* Use highest container */
    color: var(--on-surface) !important;
    /* Standard text on surface */
    border: 1px solid var(--outline-variant) !important;
    box-shadow: none !important;
    /* Use Level 3 shadow */
    border-radius: var(--border-radius-sm) !important;
    /* Small radius */
    padding: var(--spacing-3) var(--spacing-4) !important;
    /* 12px 16px */
    /* Styles moved from JS: */
    font: 400 0.875rem/1.4 Roboto, sans-serif !important;
    /* M3 Body Medium */
    margin: 0 var(--spacing-4) var(--spacing-4) 0 !important;
    /* Same margin as before */
}

.m3-toast a {
    color: var(--primary-color) !important;
    /* Primary color for links */
    text-decoration: none !important;
}

.m3-toast a:hover {
    text-decoration: underline !important;
}

/* ===== General Transitions for Theme Switching ===== */
body,
header,
main,
footer,
button,
input,
select,
textarea,
.file-upload,
.chunk-info,
.chunk-toggle,
.custom-checkbox,
#uploadHistory,
.table-container,
.upload-history-table th,
.upload-history-table td,
.debug-output,
.debug-output pre

/* [!code --] .m3-toast */
    {
    /* .m3-toast excluded from transitions */
    transition:
        background-color var(--duration-medium) var(--ease-standard),
        color var(--duration-medium) var(--ease-standard),
        border-color var(--duration-medium) var(--ease-standard),
        box-shadow var(--duration-medium) var(--ease-standard),
        outline-color var(--duration-medium) var(--ease-standard),
        opacity var(--duration-medium) var(--ease-standard);
}

/* Exclude transform/opacity from general transition if handled by specific animations (like toast entry/exit) */

/* END OF FILE styles.css */
/* ===== Section Headings (h3) Standardization ===== */
h3 {
    margin: var(--spacing-4) 0 var(--spacing-3);
    font-size: 1.125rem; /* Between title and label */
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

/* Ensure the first h3 in main has top spacing aligned with layout */
main h3:first-of-type {
    margin-top: var(--spacing-4);
}

/* ===== Headings h2/h4 Standardization ===== */
h2 {
    margin: var(--spacing-4) 0 var(--spacing-3);
    font-size: 1.375rem; /* Match header title */
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.6;
}

h4 {
    margin: var(--spacing-3) 0 var(--spacing-2);
    font-size: 1rem; /* Smaller subsection */
    font-weight: 500;
    color: var(--on-surface-variant);
    line-height: 1.4;
}
