/**
 * Widgets CSS
 * Dashboard widget framework and content styles
 *
 * Contents:
 * - Widget Content Components (lists, snapshots, metrics)
 * - Widget Framework (container, header, content, footer)
 * - Widget Navigation (pills)
 * - Widget Empty States
 * - Weather Widget Tiles
 * - Responsive Design
 */

/* ============================================
   Widget Content Components
   Styles for content within agent-generated widgets
   ============================================ */

/* List Layouts (PR proposals, content suggestions, trends, etc.) */
.widget-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.widget-list-item {
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 4px;
    border-left: 3px solid;
    transition: background 0.2s;
}

.widget-list-item:hover {
    background: #f3f4f6;
}

/* Border color variants */
.widget-list-item-purple { border-left-color: #8b5cf6; }
.widget-list-item-blue { border-left-color: #4285f4; }
.widget-list-item-green { border-left-color: #28a745; }
.widget-list-item-teal { border-left-color: #17a2b8; }
.widget-list-item-orange { border-left-color: #fd7e14; }
.widget-list-item-red { border-left-color: #dc3545; }
.widget-list-item-yellow { border-left-color: #ffc107; }

/* Widget list item components */
.widget-item-title {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.25rem;
    font-size: 0.95em;
}

.widget-item-subtitle {
    color: #6b7280;
    font-size: 0.85em;
    margin-bottom: 0.25rem;
}

.widget-item-meta {
    color: #9ca3af;
    font-size: 0.8em;
}

/* Snapshot/Card Layouts (analytics, CIM status) */
.widget-snapshot {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.widget-snapshot-image {
    flex-shrink: 0;
    max-height: 150px;
    width: auto;
    border-radius: 6px;
    object-fit: cover;
}

.widget-snapshot-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Metric Cards within Widgets */
.widget-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.5rem;
}

.widget-metric-card {
    text-align: center;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.widget-metric-value {
    font-size: 1.5em;
    font-weight: 700;
    color: #1a2234;
    display: block;
}

.widget-metric-label {
    font-size: 0.75em;
    color: #6c757d;
    text-transform: uppercase;
    margin-top: 0.25rem;
}

/* Metric Value Color Variants (Fortune 500 muted palette) */
.widget-metric-value-warning { color: #92400e; }
.widget-metric-value-success { color: #065f46; }
.widget-metric-value-danger { color: #991b1b; }
.widget-metric-value-info { color: #1e40af; }
.widget-metric-value-primary { color: #1a2234; }

/* Stats Grid (for performance metrics, large stats) */
.widget-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: center;
}

.widget-stat-item {
    padding: 10px;
}

.widget-stat-icon {
    font-size: 2em;
    margin-bottom: 10px;
    display: block;
}

.widget-stat-icon-primary { color: #1a2234; }
.widget-stat-icon-success { color: #28a745; }
.widget-stat-icon-info { color: #17a2b8; }

.widget-stat-value {
    font-size: 1.5em;
    font-weight: bold;
}

.widget-stat-label {
    color: #666;
    font-size: 0.9em;
}

/* Pill Navigation (how-to guides, tabs) */
.widget-nav-pills {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.widget-nav-pills-bordered {
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 10px;
}

/* Tab content sections (hidden by default, shown via JS) */
.widget-tab-section {
    display: none;
}

.widget-tab-section.active {
    display: block;
}

.widget-nav-pill {
    padding: 8px 16px;
    background: #e9ecef;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    transition: all 0.2s;
}

.widget-nav-pill:hover {
    background: #dee2e6;
}

.widget-nav-pill.active {
    background: #1a2234;
    color: white;
}

/* Widget Empty State */
.widget-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #999;
}

.widget-empty-icon {
    font-size: 2.5em;
    color: #ccc;
    margin-bottom: 0.5rem;
}

.widget-empty-message {
    font-size: 0.9em;
    margin: 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.widget-empty-title {
    color: var(--content-heading);
    margin-bottom: 15px;
    font-size: 1.2em;
    font-weight: 500;
}

/* ============================================
   Widget Framework Styles
   ============================================ */

/* Widget Container Grid - Fortune 500: Consistent 24px spacing */
.widget-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    grid-auto-flow: dense;
    margin-bottom: 0; /* Let parent handle section spacing */
}

/* Widget Base Styles */
.widget {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.widget:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Widget Sizes */
.widget.half-width {
    grid-column: span 1;
}

.widget.full-width {
    grid-column: span 2;
}

/* Widget Header - Fortune 500: Grey text, no background */
.widget-header {
    background: transparent;
    color: var(--section-heading, #6b7280);
    padding: 16px 20px 12px 20px;
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
}

.widget-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-header i {
    font-size: 1em;
    color: var(--icon-default, #9ca3af);
}

/* Go to agent link in widget header */
.widget-header-link {
    color: var(--icon-default, #9ca3af);
    opacity: 0.5;
    transition: opacity 0.2s, color 0.2s;
    font-size: 0.9em;
}

.widget-header-link:hover {
    opacity: 1;
    color: var(--page-heading-color, #1a2234);
}

/* Widget Content */
.widget-content {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Widget Footer - Fortune 500: Hidden by default */
.widget-footer {
    display: none; /* Hide updated date - too distracting */
}

.widget-updated {
    display: none;
}

/* No Widgets Available */
.widget.no-widgets {
    height: auto;
    min-height: 200px;
}

.widget.no-widgets .widget-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.no-widgets .widget-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
}

.no-widgets .widget-content i {
    font-size: 3em;
    color: #ccc;
    margin-bottom: 20px;
    display: block;
}

.no-widgets .widget-content p {
    color: #888;
    margin: 0;
}

/* Custom scrollbar for widget content */
.widget-content::-webkit-scrollbar {
    width: 6px;
}

.widget-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.widget-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.widget-content::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* ============================================
   Weather Widget Tiles
   ============================================ */

.weather-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    height: 100%;
}

.weather-tile {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #e9ecef;
}

.weather-main {
    grid-column: span 2;
    background-color: #f0f4ff;
    border-color: #d0d9ff;
}

.weather-temp {
    font-size: 2.5em;
    font-weight: bold;
    color: #1a2234;
    line-height: 1;
}

.weather-desc {
    color: #555;
    font-size: 0.9em;
    margin: 5px 0;
    font-weight: 500;
}

.weather-range {
    color: #777;
    font-size: 0.85em;
}

.weather-icon {
    font-size: 1.8em;
    color: #6c757d;
    margin-bottom: 5px;
}

.weather-value {
    font-size: 1.2em;
    font-weight: 600;
    color: #495057;
}

.weather-label {
    font-size: 0.75em;
    color: #6c757d;
    text-transform: uppercase;
    margin-top: 2px;
}

.weather-forecast {
    background-color: #fff5f5;
    border-color: #ffe0e0;
}

.weather-day-label {
    font-size: 0.85em;
    color: #666;
    font-weight: 600;
    margin-bottom: 5px;
}

.weather-temp-small {
    font-size: 1.5em;
    font-weight: bold;
    color: #dc3545;
}

.weather-low {
    font-size: 0.75em;
    color: #888;
}

/* ============================================
   Widget Link Lists (for agent-generated content)
   ============================================ */

/* Unstyled list container */
.widget-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* List item with bottom border */
.widget-link-item {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.widget-link-item:last-child {
    border-bottom: none;
}

/* Clickable link wrapper with hover effect */
.widget-link {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 4px;
    margin: -4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.widget-link:hover {
    background-color: #f8f9fa;
}

/* Link content layout */
.widget-link-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget-link-main {
    flex: 1;
}

.widget-link-title {
    font-weight: 600;
    color: #1a2234;
}

.widget-link-subtitle {
    color: #666;
    font-size: 0.85em;
}

.widget-link-meta {
    color: #999;
    font-size: 0.75em;
    margin-top: 2px;
}

.widget-link-separator {
    color: #999;
    font-size: 0.85em;
}

/* Disabled link state */
.widget-link-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    padding: 4px;
}

.widget-link-disabled .widget-link-title {
    color: #666;
}

/* ============================================
   Widget Badges/Pills (for scores, counts)
   Aligned with status-pill system from components.css
   ============================================ */

.widget-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 16px;
    font-weight: 600;
    margin-left: 8px;
    font-size: 13px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.widget-badge i {
    font-size: 11px;
}

/* Success/Strong (75%+) - Green */
.widget-badge-success {
    background-color: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

/* Warm (50-74%) - Yellow (heat map: between orange and green) */
.widget-badge-warm {
    background-color: #fefce8;
    color: #854d0e;
    border-color: #fef08a;
}

/* Warning/Weak (25-49%) - Orange */
.widget-badge-warning {
    background-color: #ffedd5;
    color: #9a3412;
    border-color: #fdba74;
}

/* Danger/Poor (0-24%) - Red */
.widget-badge-danger {
    background-color: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

/* Info - Blue (for informational badges, not score tiers) */
.widget-badge-info {
    background-color: #eff6ff;
    color: #1e40af;
    border-color: #bfdbfe;
}

/* Primary - Muted navy */
.widget-badge-primary {
    background-color: #f0f4f8;
    color: #1a2234;
    border-color: #d1d5db;
}

/* Muted/No data */
.widget-badge-muted {
    color: #6b7280;
    font-size: 13px;
    margin-left: 8px;
    font-weight: 500;
}

/* Score badge with dynamic background */
.widget-score-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    margin-left: 8px;
    font-size: 0.95em;
    white-space: nowrap;
}

/* ============================================
   Widget Empty/Status Messages
   ============================================ */

.widget-message {
    text-align: center;
    color: #666;
    padding: 20px;
}

.widget-message-icon {
    font-size: 2em;
    color: #1a2234;
    margin-bottom: 10px;
    display: block;
}

/* ============================================
   Widget Text Modifiers
   ============================================ */

/* Color modifiers for text */
.widget-text-star { color: #fbbf24; }
.widget-text-muted { color: #666; font-weight: normal; }
.widget-text-success { color: #10b981; font-weight: 600; }
.widget-text-primary { color: #4285f4; }

/* Item divider (top border separator) */
.widget-item-divider {
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
}

/* Flex row for search rankings */
.widget-list-item-row {
    display: flex;
    justify-content: space-between;
}

/* Text overflow handling */
.widget-text-ellipsis {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget-text-nowrap {
    padding-left: 0.5rem;
    white-space: nowrap;
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 768px) {
    .widget-container {
        grid-template-columns: 1fr;
    }

    .widget.half-width,
    .widget.full-width {
        grid-column: span 1;
    }
}

@media (max-width: 480px) {
    .weather-tiles {
        grid-template-columns: 1fr 1fr;
    }

    .weather-main {
        grid-column: span 2;
    }
}

/* =====================================================
   CASE DETAIL — Overview tab layout
   ===================================================== */

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.detail-grid .card-full-width {
    grid-column: 1 / -1;
}

.detail-grid .card {
    min-width: 0;
}

/* Collapsible list with "Show more" */
.collapsible-list {
    max-height: 240px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease;
}

.collapsible-list.expanded {
    max-height: none;
}

.collapsible-list-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(transparent, var(--card-bg, #ffffff));
    pointer-events: none;
}

.collapsible-list.expanded .collapsible-list-fade {
    display: none;
}

.collapsible-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    font-size: var(--font-size-small);
    color: var(--color-primary, #2563eb);
    cursor: pointer;
    background: none;
    border: none;
}

.collapsible-toggle:hover {
    text-decoration: underline;
}

/* Party items */
.parties-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.party-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-left: 3px solid var(--content-border);
    font-size: var(--font-size-small);
}

.party-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.party-name {
    font-weight: var(--font-weight-semibold);
}

.party-role {
    color: var(--content-text-muted);
    font-size: 11px;
}

/* Portal users */
.portal-users-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.portal-user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-left: 3px solid var(--content-border);
    font-size: var(--font-size-small);
}

.portal-user-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.portal-user-name {
    font-weight: var(--font-weight-semibold);
}

.portal-user-email {
    color: var(--content-text-muted);
    font-size: 11px;
}

/* Date grid */
.dates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.date-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    background: var(--content-bg);
    border-radius: var(--radius-sm);
}

.date-label {
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--content-text-muted);
}

.date-value {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-small);
}

/* Detail list (key-value pairs) */
.detail-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--content-border);
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-label {
    color: var(--content-text-muted);
    font-size: var(--font-size-small);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-value {
    font-weight: var(--font-weight-semibold);
    text-align: right;
}

.detail-description {
    color: var(--content-text);
    line-height: 1.5;
    font-size: var(--font-size-small);
}

.detail-meta {
    display: flex;
    gap: var(--spacing-md);
}

.meta-text {
    font-size: 11px;
    color: var(--content-text-muted);
}

/* Contact cards grid */
.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--spacing-sm);
}

/* Responsive: single column on small screens */
@media (max-width: 768px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .dates-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   TIMELINE VIEWER — Multi-column timeline visualization
   ===================================================== */

/* --- Toolbar --- */
.timeline-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.timeline-viewer-toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.timeline-viewer-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.timeline-selector {
    min-width: 280px;
    max-width: 400px;
}

/* --- Main viewer container --- */
.timeline-viewer {
    display: flex;
    gap: 0;
    position: relative;
    min-height: 300px;
    padding-bottom: var(--spacing-lg);
}

/* --- Individual column --- */
.timeline-column {
    flex: 1 1 280px;
    min-width: 200px;
    position: relative;
    transition: flex-basis 0.3s ease, min-width 0.3s ease, opacity 0.3s ease;
    padding: 0 var(--spacing-xs);
}

/* --- Column header --- */
.timeline-column-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    border-radius: var(--radius-md);
    background: var(--content-card-bg);
    border: 1px solid var(--content-border);
    cursor: grab;
    user-select: none;
    position: sticky;
    top: var(--sticky-colheader-top, 190px);
    z-index: 5;
}

.timeline-column-header:active {
    cursor: grabbing;
}

.timeline-column-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.timeline-column-name {
    flex: 1;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--content-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-column-count {
    font-size: var(--font-size-xs);
    color: var(--content-text-muted);
    background: var(--content-bg);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

.timeline-column-collapse {
    width: 24px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--content-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
    font-size: 12px;
    flex-shrink: 0;
}

.timeline-column-collapse:hover {
    background: var(--content-bg);
    color: var(--content-text);
}

/* --- Column body with rail --- */
.timeline-column-body {
    position: relative;
    padding-left: 20px;
    min-height: 100px;
}

/* Vertical rail line */
.timeline-column-body::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--column-color, var(--content-border));
    border-radius: 1px;
}

/* --- Event item on the rail --- */
.timeline-event-item {
    position: relative;
    margin-bottom: var(--spacing-sm);
}

/* Dot on the rail */
.timeline-dot {
    position: absolute;
    left: -16px;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--column-color, var(--color-primary));
    border: 2px solid var(--content-card-bg);
    z-index: 2;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.timeline-dot:hover {
    transform: scale(1.4);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.timeline-dot.active {
    transform: scale(1.5);
    box-shadow: 0 0 0 3px var(--column-color, var(--color-primary));
    opacity: 0.6;
}

/* --- Event card --- */
.timeline-event-card {
    background: var(--content-card-bg);
    border: 1px solid var(--content-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

.timeline-event-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--column-color, var(--color-primary));
}

.timeline-event-card-date {
    font-size: var(--font-size-xs);
    color: var(--content-text-muted);
    margin-bottom: 2px;
}

.timeline-event-card-title {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--content-text);
    margin: 0 0 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-event-card-type {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: inline-block;
    margin-left: 6px;
    color: var(--content-text-muted);
    background: var(--content-border);
    vertical-align: middle;
}

.timeline-event-card-desc {
    font-size: var(--font-size-xs);
    color: var(--content-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.timeline-event-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}

.timeline-event-card-tag {
    font-size: 9px;
    padding: 0 4px;
    border-radius: 3px;
    background: var(--content-bg);
    color: var(--content-text-muted);
}

/* --- Temporal spacing and gap indicators --- */
.timeline-temporal-spacer {
    position: relative;
    flex-shrink: 0;
}

.timeline-gap-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    margin: 4px 0;
}

.timeline-gap-line {
    display: block;
    width: 2px;
    height: 10px;
    background: repeating-linear-gradient(
        to bottom,
        var(--column-color, var(--content-border)) 0px,
        var(--column-color, var(--content-border)) 3px,
        transparent 3px,
        transparent 6px
    );
}

.timeline-gap-label {
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    color: var(--content-text-muted);
    background: var(--content-bg);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--content-border);
    white-space: nowrap;
}

.timeline-gap-range {
    font-size: 9px;
    color: var(--content-text-muted);
    white-space: nowrap;
    margin-top: 2px;
}

/* --- Loading overlay --- */
.timeline-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    border-radius: var(--radius-md);
}

.timeline-loading-spinner {
    font-size: var(--font-size-base);
    color: var(--content-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.timeline-loading-spinner .fa-spinner {
    font-size: 18px;
    color: var(--color-primary);
}

/* Collapsed column: spacers keep their height so dots stay at correct Y position */
.timeline-column.collapsed .timeline-gap-label,
.timeline-column.collapsed .timeline-gap-range,
.timeline-column.auto-collapsed .timeline-gap-label,
.timeline-column.auto-collapsed .timeline-gap-range {
    display: none;
}

.timeline-column.collapsed .timeline-gap-line,
.timeline-column.auto-collapsed .timeline-gap-line {
    height: 6px;
}

/* --- Collapsed column --- */
.timeline-column.collapsed {
    flex: 0 0 32px;
    min-width: 32px;
}

.timeline-column.collapsed .timeline-column-header {
    padding: var(--spacing-xs);
    flex-direction: column;
    gap: 2px;
    position: sticky;
    z-index: 3;
    background: var(--content-card-bg, #fff);
}

.timeline-column.collapsed .timeline-column-name,
.timeline-column.collapsed .timeline-column-count {
    display: none;
}

.timeline-column.collapsed .timeline-event-card {
    display: none;
}

.timeline-column.collapsed .timeline-temporal-spacer,
.timeline-column.collapsed .timeline-gap-indicator {
    display: none;
}

.timeline-column.collapsed .timeline-column-body {
    position: relative;
    padding-left: 0;
}

.timeline-column.collapsed .timeline-column-body::before {
    left: 50%;
    transform: translateX(-50%);
}

.timeline-column.collapsed .timeline-event-item {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    margin: 0;
}

.timeline-column.collapsed .timeline-dot {
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}

/* Auto-collapsed (by detail tray) — same as collapsed but distinct for JS */
.timeline-column.auto-collapsed {
    flex: 0 0 32px;
    min-width: 32px;
}

.timeline-column.auto-collapsed .timeline-column-name,
.timeline-column.auto-collapsed .timeline-column-count {
    display: none;
}

.timeline-column.auto-collapsed .timeline-event-card {
    display: none;
}

.timeline-column.auto-collapsed .timeline-temporal-spacer,
.timeline-column.auto-collapsed .timeline-gap-indicator {
    display: none;
}

.timeline-column.auto-collapsed .timeline-column-header {
    padding: var(--spacing-xs);
    flex-direction: column;
    gap: 2px;
}

.timeline-column.auto-collapsed .timeline-column-body {
    position: relative;
    padding-left: 0;
}

.timeline-column.auto-collapsed .timeline-column-body::before {
    left: 50%;
    transform: translateX(-50%);
}

.timeline-column.auto-collapsed .timeline-event-item {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    margin: 0;
}

.timeline-column.auto-collapsed .timeline-dot {
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}

/* --- Dot tooltip (hover on collapsed dot) --- */
.timeline-dot-tooltip {
    position: absolute;
    z-index: 20;
    background: var(--content-card-bg);
    border: 1px solid var(--content-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-sm);
    width: 220px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.timeline-dot-tooltip.visible {
    opacity: 1;
    pointer-events: auto;
}

.timeline-dot-tooltip-title {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--content-text);
    margin-bottom: 2px;
}

.timeline-dot-tooltip-date {
    font-size: var(--font-size-xs);
    color: var(--content-text-muted);
}

.timeline-dot-tooltip-desc {
    font-size: var(--font-size-xs);
    color: var(--content-text-muted);
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Detail sidebar (right panel for column card clicks) --- */
.timeline-detail-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 480px;
    max-width: 90vw;
    height: 100vh;
    background: var(--content-card-bg);
    border-left: 1px solid var(--content-border);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.timeline-detail-sidebar.open {
    transform: translateX(0);
}

.timeline-detail-sidebar-header {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--content-border);
    flex-shrink: 0;
    gap: var(--spacing-sm);
}

.timeline-detail-sidebar-title {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    color: var(--content-text);
    margin: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-detail-sidebar-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.timeline-detail-sidebar-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--content-text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    flex-shrink: 0;
}
.timeline-detail-sidebar-close:hover {
    color: var(--content-text);
}

.timeline-detail-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
}

.timeline-detail-sidebar-actions {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--content-border);
    flex-shrink: 0;
}

/* Sidebar nav uses same button styles as tray nav */
.sidebar-nav-btn {
    background: none;
    border: 1px solid var(--content-border);
    border-radius: var(--radius-sm);
    color: var(--content-text-secondary);
    cursor: pointer;
    padding: 2px 6px;
    font-size: var(--font-size-xs);
}
.sidebar-nav-btn:hover:not(:disabled) { color: var(--content-text); border-color: var(--content-text-secondary); }
.sidebar-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.sidebar-nav-position { font-size: var(--font-size-xs); color: var(--content-text-secondary); }
.sidebar-nav-mode {
    background: none;
    border: 1px solid var(--content-border);
    border-radius: var(--radius-sm);
    color: var(--content-text-secondary);
    cursor: pointer;
    padding: 2px 6px;
    font-size: var(--font-size-xs);
}
.sidebar-nav-mode:hover { color: var(--content-text); border-color: var(--content-text-secondary); }

/* --- Detail tray (bottom panel) --- */
.timeline-bottom-tray {
    border-top: 2px solid var(--content-border);
    background: var(--content-card-bg);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    display: flex;
    flex-direction: column;
}

.timeline-bottom-tray.open {
    max-height: 45vh;
    overflow-y: auto;
}

.timeline-bottom-tray-header {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--content-border);
    flex-shrink: 0;
    gap: var(--spacing-md);
}

.timeline-bottom-tray-title {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    color: var(--content-text);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Walk the Pattern button in tray title bar */
.tray-walk-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-primary, #2563eb);
    background: none;
    color: var(--color-primary, #2563eb);
    border-radius: 50%;
    cursor: pointer;
    font-size: 10px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    padding: 0;
}

.tray-walk-btn .fa-play {
    margin-left: 2px; /* optical center for triangular play icon */
}

.tray-walk-btn:hover {
    background: var(--color-primary, #2563eb);
    color: #fff;
}

.tray-walk-btn.walking {
    border-color: var(--color-danger, #dc2626);
    color: var(--color-danger, #dc2626);
    animation: walk-btn-pulse 1.5s ease-in-out infinite;
}

.tray-walk-btn.walking:hover {
    background: var(--color-danger, #dc2626);
    color: #fff;
}

.tray-walk-btn.paused {
    border-color: var(--color-warning, #f59e0b);
    color: var(--color-warning, #f59e0b);
}

.tray-walk-btn.paused:hover {
    background: var(--color-warning, #f59e0b);
    color: #fff;
}

/* Stop button — smaller, no border */
.tray-stop-btn {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--color-text-muted, #9ca3af);
    border-radius: 50%;
    cursor: pointer;
    font-size: 8px;
    flex-shrink: 0;
    transition: color 0.15s ease;
    padding: 0;
    margin-left: -4px;
}

.tray-stop-btn:hover {
    color: var(--color-danger, #dc2626);
}

@keyframes walk-btn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.3); }
    50% { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}

.timeline-bottom-tray-nav {
    display: flex;
    align-items: center;
    margin: 0 auto;
}

.timeline-bottom-tray-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--content-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 18px;
    transition: background 0.15s ease;
    margin-left: auto;
    flex-shrink: 0;
}

.timeline-bottom-tray-close:hover {
    background: var(--content-bg);
    color: var(--content-text);
}

/* Tray prev/next navigation */
.tray-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    margin-right: 8px;
}

.tray-nav-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--content-border);
    border-radius: var(--radius-sm);
    color: var(--content-text-muted);
    cursor: pointer;
    font-size: 11px;
    transition: all 0.15s ease;
}

.tray-nav-btn:hover:not(:disabled) {
    background: var(--content-bg);
    color: var(--content-text);
    border-color: var(--content-text-muted);
}

.tray-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.tray-nav-position {
    font-size: 11px;
    color: var(--content-text-muted);
    min-width: 32px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tray-nav-mode {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--content-border);
    border-radius: var(--radius-sm);
    color: var(--content-text-muted);
    cursor: pointer;
    font-size: 11px;
    margin-left: 4px;
    transition: all 0.15s ease;
}

.tray-nav-mode:hover {
    background: var(--content-bg);
    color: var(--content-text);
    border-color: var(--content-text-muted);
}

.timeline-bottom-tray-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
}

.timeline-bottom-tray-actions {
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--content-border);
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* --- Context strip (tray navigation preview) --- */
.tray-context-strip {
    display: flex;
    align-items: center;
    gap: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--content-border);
    background: var(--content-bg);
    overflow-x: auto;
    flex-shrink: 0;
}

.tray-context-card {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    min-width: 100px;
    max-width: 160px;
    transition: background 0.15s ease;
    font-size: var(--font-size-xs);
    flex-shrink: 0;
}

.tray-context-card:hover {
    background: var(--content-card-bg);
}

.tray-context-card.active {
    background: var(--content-card-bg);
    border: 2px solid var(--column-color, var(--color-primary));
    font-weight: var(--font-weight-semibold);
}

.tray-context-card-date {
    color: var(--content-text-muted);
    font-size: 10px;
}

.tray-context-card-title {
    color: var(--content-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tray-context-gap {
    font-size: 10px;
    color: var(--content-text-muted);
    padding: 0 var(--spacing-xs);
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Redesigned tray content classes --- */

.tray-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--content-text-muted);
}

.tray-meta-date {
    font-weight: var(--font-weight-semibold);
    color: var(--content-text);
}

.tray-meta-type {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
    padding: 2px 6px;
    background: var(--content-bg);
    border-radius: var(--radius-sm);
    color: var(--content-text-muted);
}

.tray-description {
    font-size: var(--font-size-body);
    color: var(--content-text);
    line-height: 1.55;
    margin-bottom: var(--spacing-md);
}

.tray-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--spacing-md);
}

.tray-tag {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: 10px;
    color: var(--content-text-muted);
    white-space: nowrap;
}

.tray-section {
    margin-bottom: var(--spacing-md);
}

.tray-section-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--content-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.tray-count {
    font-size: 10px;
    font-weight: var(--font-weight-normal);
    background: var(--content-bg);
    padding: 1px 6px;
    border-radius: 8px;
    color: var(--content-text-muted);
}

.tray-participants {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tray-participant {
    font-size: var(--font-size-sm);
    color: var(--content-text);
    padding: 4px 0;
}

.tray-participant-role {
    font-size: 11px;
    color: var(--content-text-muted);
    margin-left: 4px;
}

.tray-source {
    font-size: var(--font-size-sm);
    color: var(--content-text);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.tray-source i {
    color: var(--content-text-muted);
    margin-top: 2px;
}

/* Connection cards in tray */
.tray-connection-card {
    position: relative;
    padding: 10px 12px;
    padding-right: 32px;
    margin-bottom: 6px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tray-connection-card:hover {
    background: var(--content-card-bg);
    border-color: var(--content-text-muted);
}

.tray-connection-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.tray-connection-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tray-connection-type {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: var(--font-weight-semibold);
}

.tray-connection-date {
    font-size: 11px;
    color: var(--content-text-muted);
    margin-left: auto;
}

.tray-connection-title {
    font-size: var(--font-size-sm);
    color: var(--content-text);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}

.tray-connection-desc {
    font-size: 12px;
    color: var(--content-text-muted);
    line-height: 1.4;
    margin-top: 3px;
}

.tray-connection-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--content-text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.tray-connection-card:hover .tray-connection-remove {
    opacity: 1;
}

.tray-connection-remove:hover {
    color: var(--color-error);
}

/* --- Connection narrative (ViaO-style pattern summary) --- */
.tray-connection-narrative {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--content-border);
}

.tray-connection-narrative-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.tray-connection-narrative-text {
    font-size: var(--font-size-body);
    line-height: 1.55;
    color: var(--content-text);
    font-style: italic;
    max-width: 640px;
}

/* --- Chain cards (ViaO-style connected entries) --- */
.tray-chain-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.tray-chain-card {
    font-size: var(--font-size-small);
    color: var(--content-text-secondary);
    line-height: 1.4;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-left: 3px solid var(--content-text-muted);
    min-width: 160px;
    max-width: 280px;
    flex: 1 1 200px;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.tray-chain-card:hover {
    box-shadow: 0 0 0 1px var(--content-border);
    background: var(--content-card-bg);
}

.tray-chain-card-date {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--content-text-muted);
    margin-bottom: 2px;
}

.tray-chain-card-title {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--content-text);
    margin-bottom: 4px;
}

.tray-chain-card-desc {
    font-size: 11px;
    color: var(--content-text-muted);
    line-height: 1.45;
}

/* --- SVG connection overlay --- */
.timeline-connection-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.timeline-connection-overlay path {
    pointer-events: stroke;
    cursor: pointer;
}

.timeline-connection-path {
    fill: none;
    stroke-width: 2;
    stroke-dasharray: 6 4;
    opacity: 0.5;
    transition: opacity 0.2s ease, stroke-width 0.2s ease;
}

.timeline-connection-path:hover {
    opacity: 0.9;
    stroke-width: 3;
}

.timeline-connection-path.active {
    opacity: 1;
    stroke-width: 3;
    stroke-dasharray: none;
}

/* Legacy connection type colors (kept for fallback) */
.timeline-connection-path.type-causal { stroke: #3b82f6; }
.timeline-connection-path.type-temporal { stroke: #8b5cf6; }
.timeline-connection-path.type-thematic { stroke: #10b981; }
.timeline-connection-path.type-evidential { stroke: #f59e0b; }
.timeline-connection-path.type-contradiction { stroke: #ef4444; }

/* --- Palette selector (choose overall palette) --- */
.palette-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.palette-choice {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 2px solid var(--content-border);
    border-radius: var(--radius-md);
    background: var(--content-card-bg);
    cursor: pointer;
    font-size: var(--font-size-small);
    transition: border-color 0.15s ease;
}

.palette-choice:hover {
    border-color: var(--content-text-muted);
}

.palette-choice-active {
    border-color: var(--color-primary, #2563eb);
    background: var(--content-bg);
}

.palette-choice-name {
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.palette-preview-dots {
    display: flex;
    gap: 3px;
}

.palette-preview-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* --- Column color swatch picker --- */
.col-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--content-border);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s ease;
}

.col-color-swatch:hover {
    border-color: var(--content-text-muted);
}

.col-color-palette {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    display: grid;
    grid-template-columns: repeat(5, 28px);
    gap: 4px;
    padding: 8px;
    background: var(--content-card-bg);
    border: 1px solid var(--content-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 60;
}

.col-color-option {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.1s ease, transform 0.1s ease;
}

.col-color-option:hover {
    border-color: var(--content-text);
    transform: scale(1.15);
}

/* Suggestion buttons in Find Connections modal */
.timeline-suggestion-btn {
    white-space: normal;
    text-align: left;
    line-height: 1.4;
    width: 100%;
}

/* Connection tooltip */
.timeline-connection-tooltip {
    position: absolute;
    z-index: 25;
    background: var(--content-card-bg);
    border: 1px solid var(--content-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-sm);
    max-width: 260px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    font-size: var(--font-size-xs);
}

.timeline-connection-tooltip.visible {
    opacity: 1;
}

/* --- Add-connection mode --- */
.timeline-viewer.connection-mode .timeline-dot {
    animation: pulse-dot 1.5s ease-in-out infinite;
}

.timeline-viewer.connection-mode .timeline-dot.selected {
    animation: none;
    transform: scale(1.6);
    box-shadow: 0 0 0 4px var(--column-color, var(--color-primary));
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.connection-mode-banner {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-small);
    color: #1e40af;
}

/* --- Suggested tag indicator --- */
.tag-suggested {
    border: 1px dashed var(--color-primary);
    opacity: 0.8;
}

/* --- Story/narrative result display --- */
.timeline-story-result {
    max-height: 500px;
    overflow-y: auto;
    line-height: 1.6;
    font-size: var(--font-size-small);
}

.timeline-story-result h2,
.timeline-story-result h3,
.timeline-story-result h4 {
    margin-top: 16px;
    margin-bottom: 8px;
    color: var(--content-text);
}

.timeline-story-result h2 { font-size: 1.2em; }
.timeline-story-result h3 { font-size: 1.1em; }
.timeline-story-result h4 { font-size: 1em; }

.timeline-story-result p {
    margin-bottom: 8px;
}

/* --- Timeline empty state --- */
.timeline-viewer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--content-text-muted);
    text-align: center;
    padding: var(--spacing-xl);
}

.timeline-viewer-empty-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.3;
}

/* =====================================================
   TAG MANAGEMENT — Case tag configuration UI
   ===================================================== */

.tag-tier-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    align-items: center;
}

.tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-small);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

.tag-category-indicator {
    font-size: var(--font-size-xs);
    opacity: 0.7;
    margin-left: 2px;
}

.tag-removable {
    padding-right: 4px;
}

.tag-remove-btn {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.tag-remove-btn:hover {
    opacity: 1;
}

.tag-suggested-clickable {
    cursor: pointer;
}

.tag-suggested-clickable .fas {
    font-size: 9px;
}

.tag-accept-btn {
    background: none;
    border: none;
    color: var(--color-success);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 0 2px;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.tag-accept-btn:hover {
    opacity: 1;
}

.tag-add-form {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    flex-wrap: wrap;
}

.tag-add-form .form-input-sm {
    max-width: 200px;
}

/* =====================================================
   BRAIDED TIMELINE — Horizontal D3/SVG braid view
   ===================================================== */

/* --- Braid strip (always visible above columns) --- */
.timeline-braid-strip {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 180px;
    min-height: 120px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.timeline-braid-strip .braid-svg {
    display: block;
}

.timeline-braid-strip .braid-row-label {
    font-size: 10px;
}

.timeline-braid-strip .braid-detail-panel {
    display: none !important;
}

.timeline-braid-strip .braid-tooltip {
    z-index: 30;
}

/* --- Container (kept for legacy/standalone use) --- */
.braid-view-container {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    min-height: 200px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: var(--radius-md);
}

/* --- Dimmed cards (braid click fade) --- */
.timeline-event-card.dimmed {
    opacity: 0.15;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* --- Sticky header stack ---
   Uses JS-calculated heights via CSS custom properties set on .container-wide.
   Fallback values match typical rendered heights. */
.page-header-sticky {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--content-bg);
    border-bottom: 1px solid var(--content-border);
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    margin-left: calc(-1 * var(--spacing-lg, 24px));
    margin-right: calc(-1 * var(--spacing-lg, 24px));
    padding-left: var(--spacing-lg, 24px);
    padding-right: var(--spacing-lg, 24px);
    /* Prevent subpixel peek-through below header */
    box-shadow: 0 1px 0 0 var(--content-bg);
}

.tab-nav-sticky {
    position: sticky;
    top: var(--sticky-tab-top, 90px);
    z-index: 49;
    background: var(--content-bg);
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    margin-top: -1px;
    margin-left: calc(-1 * var(--spacing-lg, 24px));
    margin-right: calc(-1 * var(--spacing-lg, 24px));
    padding-left: var(--spacing-lg, 24px);
    padding-right: var(--spacing-lg, 24px);
    border-top: 1px solid var(--content-border);
    border-bottom: 1px solid var(--content-border);
}

/* --- Sticky timeline toolbar (below tab nav) --- */
.timeline-viewer-toolbar-sticky {
    position: sticky;
    top: var(--sticky-toolbar-top, 138px);
    z-index: 48;
    background: var(--content-bg);
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    margin-left: calc(-1 * var(--spacing-lg, 24px));
    margin-right: calc(-1 * var(--spacing-lg, 24px));
    padding-left: var(--spacing-lg, 24px);
    padding-right: var(--spacing-lg, 24px);
    border-bottom: 1px solid var(--content-border);
    /* Extend background below to cover the gap before column headers */
    box-shadow: 0 4px 0 0 var(--content-bg);
}

/* --- Braid focus mode: collapse timeline columns, show tray immediately --- */
.timeline-viewer.braid-focus {
    display: none !important;
}

/* --- Floating job queue indicator --- */
.job-queue-floating {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 200;
}

.job-queue-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--content-card-bg);
    border: 1px solid var(--content-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--content-text);
    transition: box-shadow 0.15s ease;
}

.job-queue-indicator:hover {
    box-shadow: var(--shadow-lg);
}

.job-queue-indicator .badge-processing,
.job-queue-indicator .badge-failed {
    font-size: 11px;
    padding: 1px 6px;
}

.job-queue-indicator-idle {
    display: none;
}

.job-queue-flyout {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
    width: 420px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--content-card-bg);
    border: 1px solid var(--content-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: none;
    padding: var(--spacing-md);
}

.job-queue-flyout.open {
    display: block;
}

.job-queue-flyout .job-queue-filters {
    margin-bottom: var(--spacing-sm);
}

.job-queue-flyout .table-standard {
    font-size: var(--font-size-small);
}

.job-queue-flyout .table-standard th,
.job-queue-flyout .table-standard td {
    padding: 6px 8px;
}

.braid-svg {
    display: block;
}

/* --- Row bands --- */
.braid-row-band {
    fill: transparent;
}

.braid-row-even {
    fill: var(--content-card-bg);
    opacity: 0.5;
}

.braid-row-odd {
    fill: transparent;
}

.braid-row-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    fill: var(--content-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.braid-row-indicator {
    opacity: 0.6;
}

/* --- Axis --- */
.braid-axis text {
    font-size: var(--font-size-xs);
    fill: var(--content-text-muted);
}

.braid-axis line,
.braid-axis path {
    stroke: var(--content-border);
}

/* --- Dots --- */
.braid-dot {
    cursor: pointer;
    stroke: var(--content-bg);
    stroke-width: 2;
    transition: r 0.15s ease;
}

.braid-dot:hover {
    filter: brightness(1.2);
}

/* --- Connection arcs --- */
.braid-arc {
    pointer-events: stroke;
    cursor: pointer;
    transition: opacity 0.2s ease, stroke-width 0.2s ease;
}

.braid-arc-causal { stroke: #4a6fa5; }
.braid-arc-temporal { stroke: #7c6b9e; }
.braid-arc-thematic { stroke: #5b8a72; }
.braid-arc-evidential { stroke: #a0785a; }
.braid-arc-contradiction { stroke: #b85c5c; }

/* --- Pin ring --- */
.braid-pin-ring {
    pointer-events: none;
    animation: braid-pin-pulse 2s ease-in-out infinite;
}

.braid-pin-ring.walking {
    animation: braid-ring-spin 1.2s linear infinite;
}

@keyframes braid-pin-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.4; }
}

@keyframes braid-ring-spin {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -30; }
}

/* --- Tooltip --- */
.braid-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--content-card-bg);
    border: 1px solid var(--content-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    max-width: 220px;
    box-shadow: var(--shadow-md);
    font-size: var(--font-size-small);
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 20;
}

.braid-tooltip.visible {
    opacity: 1;
}

.braid-tooltip-title {
    font-weight: var(--font-weight-semibold);
    color: var(--content-text);
    margin-bottom: 2px;
}

.braid-tooltip-date {
    font-size: var(--font-size-xs);
    color: var(--content-text-muted);
    margin-bottom: 4px;
}

.braid-tooltip-desc {
    color: var(--content-text-secondary);
    line-height: 1.3;
}

/* --- Detail panel (below SVG) --- */
.braid-detail-panel {
    background: var(--content-card-bg);
    border: 1px solid var(--content-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
    display: none;
}

.braid-detail-panel.visible {
    display: block;
}

.braid-detail-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--content-text);
    margin-bottom: var(--spacing-xs);
}

.braid-detail-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.braid-detail-meta {
    display: flex;
    gap: var(--spacing-sm);
    font-size: var(--font-size-small);
    color: var(--content-text-muted);
    margin-bottom: var(--spacing-sm);
}

.braid-detail-type {
    text-transform: capitalize;
    background: var(--content-bg);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.braid-detail-desc {
    font-size: var(--font-size-small);
    color: var(--content-text-secondary);
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
}

.braid-detail-related {
    border-top: 1px solid var(--content-border);
    padding-top: var(--spacing-sm);
}

.braid-detail-related-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--content-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

.braid-detail-pill {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
    font-size: var(--font-size-small);
}

.braid-detail-pill:hover {
    background: var(--content-bg);
}

.braid-detail-pill.active {
    background: var(--content-bg);
    font-weight: var(--font-weight-semibold);
}

.braid-detail-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.braid-detail-pill-date {
    color: var(--content-text-muted);
    font-size: var(--font-size-xs);
    min-width: 70px;
}

.braid-detail-pill-title {
    color: var(--content-text);
}

.braid-detail-pill-extended {
    opacity: 0.65;
    border-left: 2px solid var(--content-border);
    padding-left: 10px;
    margin-left: 4px;
}

.braid-detail-pill-extended:hover {
    opacity: 1;
}

.braid-detail-chain-count {
    font-weight: var(--font-weight-normal);
    font-size: 10px;
    color: var(--content-text-muted);
    margin-left: 4px;
}

/* --- Walk the Pattern button --- */
.braid-detail-walk-row {
    margin-top: var(--spacing-sm);
    text-align: center;
}

.braid-walk-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-primary);
    font-size: var(--font-size-small);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.braid-walk-btn:hover {
    background: var(--color-primary);
    color: #fff;
}

.braid-walk-btn.walking {
    background: var(--color-primary);
    color: #fff;
    animation: braid-walk-pulse 1.5s ease-in-out infinite;
}

@keyframes braid-walk-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* --- Empty state --- */
.braid-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--content-text-muted);
    text-align: center;
    padding: var(--spacing-xl);
}

.braid-empty-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.3;
}

/* --- View mode toggle active states --- */
.braid-view-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: var(--radius-md);
    padding: 2px;
}

.braid-view-toggle-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--content-text-muted);
    font-size: var(--font-size-small);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.braid-view-toggle-btn:hover {
    color: var(--content-text);
}

.braid-view-toggle-btn.active {
    background: var(--color-primary);
    color: #fff;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .timeline-viewer {
        flex-direction: column;
    }

    .timeline-column {
        flex: 1 1 auto;
        min-width: 100%;
    }

    .timeline-column.collapsed,
    .timeline-column.auto-collapsed {
        flex: 0 0 auto;
        min-width: 100%;
    }

    .timeline-column.collapsed .timeline-column-body,
    .timeline-column.auto-collapsed .timeline-column-body {
        flex-direction: row;
        overflow-x: auto;
    }

    .timeline-bottom-tray.open {
        max-height: 60vh;
    }

    /* Braid view responsive */
    .braid-view-container {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .braid-detail-panel {
        padding: var(--spacing-sm);
    }

    .braid-detail-pill {
        font-size: var(--font-size-xs);
    }

    .timeline-braid-strip {
        height: 140px;
        min-height: 100px;
    }

    .tray-context-strip {
        display: none;
    }

    /* Tag management responsive */
    .tag-add-form {
        flex-direction: column;
    }

    .tag-add-form .form-input-sm {
        max-width: 100%;
    }

    .timeline-viewer-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .timeline-viewer-toolbar-right {
        flex-wrap: wrap;
    }
}

/* ==================== CRM Synced Emails (triage list) ==================== */
.crm-email-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crm-email-loading {
    color: #6b7280;
    padding: 16px;
    text-align: center;
}

.crm-email-empty {
    display: none;
}

.crm-email-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    background-color: #ffffff;
}

/* Applicable emails: full prominence, expandable body. */
.crm-email-item-applicable {
    border-left: 3px solid #2563eb;
}

/* Non-applicable emails: minimized / grayed (collapsed body-less stubs). */
.crm-email-item-muted {
    background-color: #f9fafb;
    color: #6b7280;
    opacity: 0.85;
}

.crm-email-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.crm-email-subject {
    font-weight: 600;
    color: #1a2234;
}

.crm-email-item-muted .crm-email-subject {
    font-weight: 500;
    color: #4b5563;
}

.crm-email-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

.crm-email-reason {
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
    margin-top: 6px;
}

.crm-email-toggle {
    margin-top: 8px;
}

.crm-email-body {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    white-space: pre-wrap;
    font-size: 13px;
    color: #374151;
    max-height: 320px;
    overflow-y: auto;
}

.crm-email-body-hidden {
    display: none;
}