body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background: #f7f7f7;
    color: #222;
    height: 100vh;
    overflow: hidden;
}

.header-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    height: 0.5em;
    padding: 0;
    background: #f4f6fa;
    border-bottom: 1px solid #c0c6d0;
    box-sizing: border-box;
}

.footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    height: 2.5em;
    padding: 0.5em 1.5em;
    background: #f4f6fa;
    border-top: 2px solid #c0c6d0;
    box-sizing: border-box;
}

.footer-content {
    display: flex;
    align-items: center;
    gap: 1.2em;
    height: 100%;
}

.current-file-display {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50%;
    color: #2a4d7a;
    font-weight: 500;
    font-size: 1.08em;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 1.2em;
}

.main-container {
    position: absolute;
    top: 0.5em;
    left: 0;
    right: 0;
    bottom: 2.5em;
    height: calc(100vh - 3em);
    overflow: auto;
    background: #fafafa;
    display: flex;
    flex-direction: row;
}

.split-container {
    display: flex;
    flex: 1 1 0;
    height: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
}

.left-pane {
    width: 40%;
    min-width: 340px;
    background: #fff;
    border-right: 1px solid #ddd;
    overflow-y: auto;
    padding: 1em;
    height: 100%;
    box-sizing: border-box;
}

.right-pane {
    flex: 1 1 0;
    min-width: 0;
    background: #fafbfc;
    padding: 2em;
    position: relative;
    overflow-wrap: break-word;
    word-break: break-word;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.para-snippet {
    border-bottom: 1px solid #eee;
    padding: 0.35em 0;
    cursor: pointer;
    transition: background 0.2s;
    background: transparent;
}

.para-snippet:hover {
    background: #e6f0ff;
}

.snippet-text {
    margin-top: 0.3em;
    white-space: pre-wrap;
    line-height: 1.5;
    color: #333;
}

.para-snippet:hover .snippet-text {
    color: #000;
}

mark {
    background-color: #ffeb3b;
    color: #000;
    font-weight: bold;
    padding: 1px 2px;
    border-radius: 2px;
}

.filename {
    color: #555;
    font-size: 0.1em;
}

.lineno {
    color: #999;
    font-size: 0.9em;
    margin-left: 0.5em;
}

.doc-paragraph {
    padding: 0.5em 0;
    border-bottom: 1px solid #eee;
    background: transparent;
}

.doc-paragraph.highlighted {
    background: #ffe066;
}

.entity-person {
    background: #e3f2fd;
    color: #174a5a;
    border-radius: 3px;
    padding: 0 2px;
}

.entity-place {
    background: #fff8e1;
    color: #7a4a17;
    border-radius: 3px;
    padding: 0 2px;
}

.entity-org {
    background: #d6ffb3;
    color: #2a5a17;
    border-radius: 3px;
    padding: 0 2px;
}

.entity-date {
    background: #ffe0b2;
    color: #bf360c;
    border-radius: 3px;
    padding: 0 2px;
}

.search-highlight {
    background: #fff9c4;
    color: #000;
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 500;
}

details {
    margin-bottom: 1em;
    background: #fff;
    border-radius: 7px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    padding: 0.7em 1.2em 1.2em 1.2em;
}

summary {
    font-size: 1.13em;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.7em;
    outline: none;
    cursor: pointer;
}

button {
    font-family: inherit;
    background: #f6fafd;
    color: #222;
    border: 1px solid #c0c0c0;
    cursor: pointer;
    padding: 0.3em 0.9em;
    border-radius: 4px;
}

button:hover {
    background: #e3f2fd;
}

.entity-summary {
    font-size: 0.95em;
    color: #2a4d7a;
    margin-top: 0.3em;
}

.filter-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    align-items: stretch;
    margin: 0.5em 0 0.7em 0;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
}

.filter-controls input[type="text"] {
    flex: 1 1 120px;
    min-width: 90px;
    max-width: 200px;
    padding: 0.3em;
    font-size: 1em;
}

.filter-controls button {
    font-size: 0.8em;
}

.entity-working {
    margin-left: 0.7em;
    font-size: 0.98em;
    color: orange;
    font-weight: bold;
    background: #fff3e0;
    border-radius: 4px;
    padding: 0.1em 0.5em;
}

/* Management panel in left pane */
.management-panel {
    margin-bottom: 1em;
    background: #f9fafb;
    border: 1px solid #e0e6ef;
}

.management-panel summary {
    font-size: 1em;
    color: #2a4d7a;
}

/* File upload row */
.file-upload-row {
    display: flex;
    align-items: center;
    gap: 0.8em;
    margin-bottom: 0.8em;
    padding-bottom: 0.8em;
    border-bottom: 1px solid #eee;
}

.file-input-btn {
    padding: 0.4em 0.9em;
    font-size: 0.9em;
}

.file-upload-row #progress-bar-container {
    flex: 1;
    display: none;
    background: #e0e6ef;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}

.file-upload-row #progress-bar {
    height: 100%;
    width: 0;
    background: orange;
    border-radius: 3px;
    transition: width 0.18s;
}

.project-actions-row {
    display: flex;
    gap: 0.6em;
    margin-bottom: 0.8em;
    padding-bottom: 0.8em;
    border-bottom: 1px solid #eee;
}

/* Unified button styles: ensure consistent font size, padding, and behavior across the UI */
button,
.project-action-btn,
.export-btn,
.file-input-btn,
.viewer-tab {
    font-size: 0.8em;
    padding: 0.45em 0.8em;
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s;
}

/* Keep the small adjustments for hover/active states provided previously */
.project-action-btn:hover,
.export-btn:hover,
.file-input-btn:hover,
.viewer-tab:hover {
    background: #e8e8e8;
}
.project-action-btn:active,
.export-btn:active,
.file-input-btn:active,
.viewer-tab:active {
    background: #d8d8d8;
}

.project-action-btn:hover {
    background: #e8e8e8;
}

.project-action-btn:active {
    background: #d8d8d8;
}

/* File list */
.file-list {
    margin-bottom: 0.8em;
    max-height: 500px;
    overflow-y: auto;
}

.file-list-empty {
    color: #888;
    font-size: 0.9em;
    font-style: italic;
}

.file-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 0.6em;
    margin-bottom: 0.3em;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
}

.file-chip-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}

.file-chip-count {
    color: #666;
    font-size: 0.85em;
}

.file-chip-analyze {
    padding: 0.4em 0.8em;
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
    white-space: nowrap;
}

.file-chip-analyze:hover {
    background: #e0e0e0;
}

.file-chip-analyze:active {
    background: #d0d0d0;
}

.file-chip-remove {
    padding: 0.1em 0.4em;
    font-size: 1.1em;
    line-height: 1;
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
}

.file-chip-remove:hover {
    color: #c00;
    background: #fee;
}

/* File analysis panel */
.file-analysis-panel {
    width: 100%;
    margin-top: 0.5em;
    padding: 0.6em;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 0.85em;
    min-height: 300px;
    max-height: 400px;
    overflow-y: auto;
}

.analysis-loading {
    color: #666;
    font-style: italic;
}

.analysis-error {
    color: #c00;
    font-size: 0.9em;
}

.analysis-section {
    margin-bottom: 0.8em;
}

.analysis-section:last-child {
    margin-bottom: 0;
}

.analysis-section-title {
    margin: 0 0 0.4em 0;
    font-size: 0.95em;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.2em;
}

.analysis-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
}

.analysis-term {
    padding: 0.2em 0.4em;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #333;
    font-size: 0.9em;
}

.analysis-entity-group {
    margin-bottom: 0.4em;
    line-height: 1.6;
}

.analysis-entity-group:last-child {
    margin-bottom: 0;
}

.analysis-entity-group strong {
    color: #333;
}

.analysis-cooccurrence {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.analysis-cooccur-item {
    padding: 0.3em 0.4em;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #333;
    font-family: monospace;
    font-size: 0.9em;
}

.analysis-empty {
    color: #888;
    font-style: italic;
    font-size: 0.9em;
}

/* Export analysis panel */
.export-analysis-panel {
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0.6em;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 0.85em;
    min-height: 300px;
    max-height: 400px;
    overflow-y: auto;
}

/* Entity toggle row */
.entity-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.5em 0;
    border-top: 1px solid #eee;
    margin-top: 0.5em;
}

.entity-toggle-row span {
    font-size: 0.9em;
    color: #444;
}

/* Cooccurrence section */
.cooccurrence-section {
    border-top: 1px solid #eee;
    margin-top: 0.8em;
    padding-top: 0.8em;
}

.cooccurrence-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5em;
}

.cooccurrence-header strong {
    font-size: 0.95em;
    color: #333;
}

.cooccurrence-header button {
    padding: 0.2em 0.5em;
    font-size: 0.85em;
}

#cooccurrence-content {
    max-height: 180px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e6eef8;
    border-radius: 4px;
    padding: 0.5em;
}

#cooccurrence-placeholder {
    color: #888;
    font-size: 0.9em;
    font-style: italic;
}

/* Footer status text */
#status {
    font-size: 0.9em;
    color: #555;
    white-space: nowrap;
}

/* Legacy - keep for backward compat but not used in new layout */
.entity-toggle-bar {
    display: flex;
    align-items: center;
    gap: 1em;
    background: #f6fafd;
    border: 1px solid #e0e6ef;
    border-radius: 7px;
    padding: 0.5em 1em;
    margin-bottom: 0.7em;
    box-shadow: 0 1px 4px rgba(224, 230, 239, 0.2);
    white-space: nowrap;
    min-width: 0;
}

.entity-toggle-bar span {
    font-size: 0.95em;
    font-weight: normal;
    margin-left: 0.2em;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    vertical-align: middle;
    margin-right: 0.3em;
    background: none;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #cfd8dc;
    border-radius: 24px;
    transition: background 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
    background: #90caf9;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px #bbb;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(12px);
}

.results-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    background: #fafbfc;
    margin-bottom: 1em;
    border-radius: 6px;
    padding: 0.5em;
}

#doc-viewer {
    margin-top: 1em;
    color: #888;
    overflow-y: auto;
    flex: 1 1 0;
    max-height: none;
    position: relative;
}

/* Viewer tabs placed above the document/export viewer area */
.viewer-tabs {
    display: flex;
    gap: 0.5em;
    margin-bottom: 0.6em;
    align-items: center;
}

/* Individual tab button */
.viewer-tab {
    background: #f4f6fa;
    border: 1px solid #d0d7df;
    color: #2a4d7a;
    padding: 0.4em 0.9em;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
}

/* Active tab - visually connected to the viewer content */
.viewer-tab.active {
    background: #fff;
    border-bottom-color: transparent;
    color: #174a5a;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.02) inset;
}

/* Viewer content areas: document and export */
.viewer-content {
    display: none;
    padding: 0.6em 0 0;
    background: transparent;
}

/* When active, show the content */
.viewer-content.active {
    display: block;
}

/* Export viewer specific styles */
#export-viewer {
    /* keep layout consistent with doc viewer */
    margin-top: 0;
    color: #222;
    overflow-y: auto;
    flex: 1 1 0;
    max-height: none;
    position: relative;
}

/* Individual exported chunk */
.export-chunk {
    background: #fff;
    border: 1px solid #e6eef8;
    padding: 0.75em;
    border-radius: 6px;
    margin-bottom: 0.6em;
    position: relative;
    box-shadow: 0 1px 2px rgba(18, 38, 63, 0.02);
}

/* Source code badge shown before a chunk */
.export-source-code {
    display: inline-block;
    background: #eaf6ff;
    color: #1b5e20;
    font-weight: 700;
    padding: 0.12em 0.5em;
    border-radius: 4px;
    margin-right: 0.5em;
    font-size: 0.85em;
}

/* Paragraph text inside a chunk */
.export-chunk-text {
    margin-top: 0.4em;
    color: #333;
    white-space: pre-wrap;
    line-height: 1.45;
    font-size: 0.98em;
}

/* Remove button for a chunk */
.export-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: #c23f3f;
    cursor: pointer;
    font-size: 1.05em;
    padding: 0.15em;
}

/* Small legend area listing file codes -> filenames */
.export-legend {
    margin-top: 1em;
    font-size: 0.9em;
    color: #444;
    border-top: 1px solid #eee;
    padding-top: 0.6em;
}

/* Compact adjustments to ensure export view remains readable on narrow layouts */
@media (max-width: 720px) {
    .viewer-tabs {
        gap: 0.4em;
    }
    .viewer-tab {
        padding: 0.3em 0.6em;
        font-size: 0.9em;
    }
    .export-source-code {
        font-size: 0.82em;
    }
}

/* Hide the entity highlight toggle (not needed) */
.entity-toggle-row {
    display: none;
}

/* Regex search input and button */
.filter-regex-input {
    width: 180px;
    margin-left: 0.5em;
    font-size: 0.9em;
    padding: 0.3em 0.5em;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.regex-search-btn {
    margin-left: 0.3em;
    padding: 0.3em 0.7em;
    font-size: 0.9em;
    background: #4a90e2;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.regex-search-btn:hover {
    background: #357abd;
}

/* Loading spinner for document viewer - uses ::before pseudo-element */
#doc-viewer {
    position: relative;
    min-height: 200px;
}

#doc-viewer.loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid #e0e6ef;
    border-top-color: #2a4d7a;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 100;
}

#doc-viewer.loading::after {
    content: "Loading document...";
    position: absolute;
    top: calc(50% + 36px);
    left: 50%;
    transform: translateX(-50%);
    color: #666;
    font-size: 0.95em;
    font-weight: 500;
    z-index: 100;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Worker status badge (shown in header) */
.worker-badge {
    margin-left: 1em;
    padding: 0.15em 0.6em;
    font-size: 0.92em;
    border-radius: 6px;
    border: 1px solid #d0d7df;
    background: #f4f6fa;
    color: #2a4d7a;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    white-space: nowrap;
}

/* Small emphasized status text inside the badge */
#worker-badge em#worker-status {
    font-style: normal;
    font-weight: 600;
    color: inherit;
}

/* State styles */
.worker-badge.worker-active {
    background: #e8f5e9;
    border-color: #c8e6c9;
    color: #1b5e20;
}

.worker-badge.worker-fallback {
    background: #fff8e1;
    border-color: #ffe0b2;
    color: #bf360c;
}

.worker-badge.worker-error {
    background: #ffebee;
    border-color: #ffcdd2;
    color: #b71c1c;
}

/* Compact appearance on narrow screens */
@media (max-width: 720px) {
    .worker-badge {
        margin-left: 0.5em;
        padding: 0.12em 0.4em;
        font-size: 0.86em;
    }
}

/* Sidecar badge - similar styling to worker badge */
.sidecar-badge {
    margin-left: 0.5em;
    padding: 0.15em 0.6em;
    font-size: 0.92em;
    border-radius: 6px;
    border: 1px solid #d0d7df;
    background: #f4f6fa;
    color: #2a4d7a;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    white-space: nowrap;
}

#sidecar-badge em#sidecar-status {
    font-style: normal;
    font-weight: 600;
    color: inherit;
}

/* Sidecar state styles */
.sidecar-badge.sidecar-available {
    background: #e8f5e9;
    border-color: #c8e6c9;
    color: #1b5e20;
}

.sidecar-badge.sidecar-unavailable {
    background: #fff8e1;
    border-color: #ffe0b2;
    color: #bf360c;
}

.sidecar-badge.sidecar-unknown {
    background: #f4f6fa;
    border-color: #d0d7df;
    color: #6c757d;
}

.sidecar-badge.sidecar-error {
    background: #ffebee;
    border-color: #ffcdd2;
    color: #b71c1c;
}

@media (max-width: 720px) {
    .sidecar-badge {
        margin-left: 0.3em;
        padding: 0.12em 0.4em;
        font-size: 0.86em;
    }
}

/* ==================== Export Feature Styles ==================== */

/* Document paragraph row with export column */
.doc-paragraph-row {
    display: flex;
    flex-direction: row;
    position: relative;
    margin-bottom: 1em;
    align-items: center;
}

.doc-paragraph-meta {
    display: flex;
    align-items: center;
    margin-bottom: 0.3em;
    font-size: 0.9em;
}

.doc-paragraph-row .doc-paragraph {
    flex: 1;
    min-width: 0;
}

/* Export column - thin sidebar with export button */
.export-column {
    width: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.export-para-btn {
    background: #e0e0e0;
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0.3em 0.5em;
    font-size: 0.9em;
    cursor: pointer;
    opacity: 0.4;
    transition:
        opacity 0.2s,
        background 0.2s,
        border-color 0.2s;
}

.doc-paragraph-row:hover .export-para-btn,
.export-para-btn:hover {
    opacity: 1;
    background: #f5f5f5;
    border-color: #999;
}

.export-para-btn:active {
    background: #d0d0d0;
    border-color: #666;
}

.export-para-btn.exported {
    opacity: 1;
    background: #ffe066;
    color: #000;
    border-color: #f9c846;
}

.doc-paragraph.exported-para {
    border: 1px solid #ffe066;
    padding: 0.5em;
    border-radius: 3px;
}

.export-header {
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #ddd;
}

.export-header h2 {
    margin: 0;
    color: #333;
}

.export-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;
    padding: 0.8em;
    background: #f5f5f5;
    border-radius: 4px;
}

.export-search {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.export-search-input {
    width: 300px;
    padding: 0.4em 0.6em;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.95em;
}

.export-buttons {
    display: flex;
    gap: 0.5em;
}

/* Export button kept under unified button rules above - this block remains for compatibility
   but is intentionally consistent with the unified rule. (kept for specificity where needed) */
.export-btn {
    /* specific visual identity preserved but size/padding aligned with unified rule */
    padding: 0.45em 0.8em;
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8em;
}

/* Labels and inline UI text use the same base size for consistent visual rhythm */
label,
.filename,
.lineno,
.current-file-display {
    font-size: 0.8em;
    line-height: 1.2;
}

/* Native browser tooltips are used via title attributes - no custom CSS tooltip needed */

.export-btn:hover {
    background: #e0e0e0;
}

.export-btn:active {
    background: #d0d0d0;
}

.export-stats {
    display: flex;
    gap: 1.5em;
    margin-bottom: 1em;
    padding: 0.8em;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.stat-item {
    display: flex;
    gap: 0.5em;
}

.stat-label {
    font-weight: 600;
    color: #666;
}

.stat-value {
    color: #333;
    font-weight: 600;
}

.export-legend {
    margin-bottom: 1.5em;
    padding: 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.export-legend h3 {
    margin: 0 0 0.5em 0;
    color: #333;
    font-size: 1em;
}

.legend-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.legend-list li {
    padding: 0.3em 0;
    display: flex;
    gap: 0.8em;
}

.legend-code {
    font-weight: 700;
    color: #333;
    min-width: 60px;
}

.legend-file {
    color: #333;
}

.legend-range {
    color: #666;
    font-size: 0.9em;
}

.export-chunks {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.empty-message {
    color: #666;
    font-style: italic;
    padding: 2em;
    text-align: center;
}

/* Chunk card overall */
.export-chunk {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s;
    overflow: hidden;
}

.export-chunk:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Header: compact and minimal (info moved to footer) */
.chunk-header {
    display: flex;
    align-items: center;
    padding: 0.35em 0.8em;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
    border-radius: 4px 4px 0 0;
}

/* Keep a minimal filename/title in header */
.chunk-filename {
    color: #333;
    font-weight: 600;
    font-size: 0.95em;
}

/* Footer: contains chunk info and controls, compact and less tall */
.chunk-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25em 0.8em;
    background: #fafafa;
    border-top: 1px solid #eee;
    font-size: 0.85em;
    gap: 0.6em;
}

/* Compact info area inside footer */
.chunk-info {
    display: flex;
    gap: 0.5em;
    align-items: center;
    white-space: nowrap;
}

/* Source code label — slightly reduced size */
.chunk-source-code {
    font-weight: 700;
    color: #333;
    font-size: 0.95em;
}

/* Range uses muted color and small size (like chunk-lineno) */
.chunk-range {
    color: #666;
    font-size: 0.82em;
}

/* Controls in footer are smaller and tighter */
.chunk-controls {
    display: flex;
    gap: 0.25em;
    align-items: center;
}

/* Smaller buttons for footer controls */
.chunk-btn {
    padding: 0.18em 0.45em;
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.78em;
    line-height: 1;
    min-width: 1.6em;
    height: 1.6em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hover/active states */
.chunk-btn:hover {
    background: #e8e8e8;
}

.chunk-btn:active {
    background: #d8d8d8;
}

.chunk-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Content area */
.chunk-content {
    padding: 0.9em 1em;
}

/* Paragraphs inside chunk */
.chunk-paragraph {
    margin-bottom: 0.9em;
    padding-bottom: 0.6em;
    border-bottom: 1px dashed #eaeaea;
}

.chunk-paragraph:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Line number styling (small, monospace) */
.chunk-lineno {
    display: inline-block;
    color: #999;
    font-size: 0.82em;
    margin-right: 0.5em;
    font-family: monospace;
}

/* Paragraph text */
.chunk-text {
    color: #333;
    line-height: 1.5;
    margin-top: 0.25em;
    font-size: 0.95em;
}

/* Filter controls layout */
.filter-row {
    display: flex;
    gap: 0.5em;
    margin-bottom: 0.5em;
    align-items: center;
}

.filter-search-input,
.filter-regex-input {
    width: 150px;
    flex-shrink: 0;
    padding: 0.4em 0.6em;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.9em;
}

.filter-btn {
    padding: 0.4em 0.8em;
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8em;
    white-space: nowrap;
    width: 70px;
    flex-shrink: 0;
}

.filter-btn:hover {
    background: #e0e0e0;
}

.filter-btn:active {
    background: #d0d0d0;
}

/* ============================================
   Quality badges
   ============================================ */
.quality-badge {
    display: inline-block;
    font-size: 0.7em;
    padding: 0.15em 0.4em;
    border-radius: 3px;
    margin-left: 0.5em;
    font-weight: 600;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.quality-prose {
    background: #e8f5e9;
    color: #2e7d32;
}
.quality-heading {
    background: #e3f2fd;
    color: #1565c0;
}
.quality-list {
    background: #fff3e0;
    color: #e65100;
}
.quality-reference {
    background: #fce4ec;
    color: #c62828;
}
.quality-short {
    background: #f3e5f5;
    color: #6a1b9a;
}
.quality-other {
    background: #eceff1;
    color: #546e7a;
}

.quality-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.5em 0;
    border-top: 1px solid #eee;
    margin-top: 0.5em;
}
.quality-toggle-row span {
    font-size: 0.9em;
    color: #444;
}

.para-snippet.quality-dimmed {
    display: none;
}

/* Find Similar button */
.find-similar-btn {
    font-size: 0.75em;
    padding: 0.2em 0.5em;
    background: #e8eaf6;
    color: #283593;
    border: 1px solid #9fa8da;
    border-radius: 3px;
    cursor: pointer;
    margin-left: 0.5em;
}
.find-similar-btn:hover {
    background: #c5cae9;
}

/* Sidecar status badge */
.sidecar-badge {
    margin-left: 0.5em;
    padding: 0.15em 0.6em;
    font-size: 0.92em;
    border-radius: 6px;
    border: 1px solid #d0d7df;
    background: #f4f6fa;
    color: #2a4d7a;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    white-space: nowrap;
}
.sidecar-badge.sidecar-active {
    background: #e8f5e9;
    border-color: #c8e6c9;
    color: #1b5e20;
}
.sidecar-badge.sidecar-inactive {
    background: #eceff1;
    border-color: #cfd8dc;
    color: #546e7a;
}
#sidecar-badge em {
    font-style: normal;
    font-weight: 600;
}

/* ===== Statistics Viewer Styles ===== */
.statistics-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.statistics-container h2 {
    margin-bottom: 24px;
    color: #333;
    font-size: 28px;
}

.statistics-container h3 {
    margin-top: 32px;
    margin-bottom: 16px;
    color: #444;
    font-size: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 8px;
}

.statistics-container h4 {
    margin-top: 16px;
    margin-bottom: 12px;
    color: #555;
    font-size: 16px;
    font-weight: 600;
}

.section-description {
    color: #666;
    font-size: 14px;
    margin-bottom: 16px;
    font-style: italic;
}

/* Summary cards */
.stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.stat-card {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 16px;
    border-radius: 4px;
    text-align: center;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 4px;
    color: #333;
}

.stat-label {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Stats sections */
.stats-section {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

/* Tables */
.stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.stats-table thead {
    background: #f5f5f5;
}

.stats-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #ddd;
}

.stats-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
}

.stats-table tr:hover {
    background: #f9f9f9;
}

.stats-table .filename {
    font-family: monospace;
    font-size: 13px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spacy-highlight {
    background: #f0f0f0;
    font-weight: 600;
    color: #333;
}

/* Source badges */
.source-badge {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 10px;
    font-weight: normal;
    margin-left: 4px;
    text-transform: uppercase;
    color: #666;
    background: white;
}

.source-badge.spacy {
    border-color: #999;
}

.source-badge.compromise {
    border-color: #ccc;
}

/* Entity lists */
.top-entities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.entity-column {
    background: #fafafa;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.entity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.entity-list li {
    padding: 10px;
    margin-bottom: 6px;
    background: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #eee;
    transition: all 0.2s;
}

.entity-list li:hover {
    border-color: #667eea;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.1);
}

.entity-list li.empty {
    color: #999;
    font-style: italic;
    justify-content: center;
}

.entity-name {
    font-weight: 500;
    color: #333;
    flex: 1;
}

.entity-count {
    background: #667eea;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

/* Co-occurrence */
.cooccurrence-list {
    list-style: none;
    padding: 0;
}

.cooccurrence-list li {
    padding: 12px;
    margin-bottom: 10px;
    background: #f9f9f9;
    border-left: 4px solid #667eea;
    border-radius: 4px;
}

.cooccur-tag {
    display: inline-block;
    background: #e3f2fd;
    color: #1565c0;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    margin-right: 6px;
    margin-top: 4px;
}

/* Source comparison */
.source-comparison {
    margin-top: 16px;
}

.source-insight {
    margin-top: 16px;
    padding: 16px;
    background: #e8f5e9;
    border-left: 4px solid #4caf50;
    border-radius: 4px;
}

.source-insight p {
    margin: 0;
    color: #2e7d32;
}

/* Empty states */
.empty {
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 20px;
}