/**
 * vizRenderer.css - Visualization Rendering Styles
 * Phase 5.1: Charts (Chart.js)
 *
 * Styles for inline visualizations in session messages
 */

/* =================================================================
   VISUALIZATION CONTAINER
   ================================================================= */

.visualization-container {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    max-width: 100%;
    overflow: hidden;
}

.visualization-container:hover {
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* =================================================================
   VISUALIZATION HEADER
   ================================================================= */

.visualization-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
}

.visualization-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.visualization-title .viz-icon {
    font-size: 1rem;
    opacity: 0.7;
}

.visualization-type-badge {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    background: var(--color-primary-light, #dbeafe);
    color: var(--color-primary, #2563eb);
    border-radius: var(--radius-full, 9999px);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.025em;
}

/* =================================================================
   CHART CONTAINER
   ================================================================= */

.visualization-chart {
    position: relative;
    width: 100%;
    min-height: 250px;
    max-height: 400px;
}

/* Let Chart.js manage canvas sizing for crisp rendering on high-DPI displays */
.visualization-chart canvas {
    /* Don't use !important - let Chart.js control the actual dimensions */
    display: block;
    max-width: 100%;
}

/* Chart type specific adjustments */
.visualization-chart--pie,
.visualization-chart--doughnut {
    max-width: 350px;
    margin: 0 auto;
}

.visualization-chart--line,
.visualization-chart--bar {
    min-height: 250px;
}

/* =================================================================
   TABLE CONTAINER (Phase 5.2) - Enhanced
   ================================================================= */

.visualization-table-wrapper {
    overflow-x: auto;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
    border-radius: var(--radius-md, 8px);
}

.visualization-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.visualization-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: var(--color-surface-secondary, #f9fafb);
    color: var(--color-text-secondary, #6b7280);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 2px solid var(--color-border, #e5e7eb);
    position: sticky;
    top: 0;
    z-index: 1;
}

.visualization-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
    color: var(--color-text-primary, #111827);
}

.visualization-table tbody tr:hover {
    background: var(--color-surface-hover, rgba(59, 130, 246, 0.05));
}

.visualization-table tbody tr:last-child td {
    border-bottom: none;
}

/* Zebra striping */
.visualization-table--striped tbody tr:nth-child(even) {
    background: var(--color-surface-secondary, #f9fafb);
}

.visualization-table--striped tbody tr:nth-child(even):hover {
    background: var(--color-surface-hover, rgba(59, 130, 246, 0.08));
}

/* Compact variant */
.visualization-table--compact th,
.visualization-table--compact td {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
}

/* Row number column */
.table-col-rownum {
    width: 40px;
    text-align: center !important;
    color: var(--color-text-tertiary, #9ca3af);
    font-size: 0.75rem;
}

/* Empty message */
.table-empty-message {
    text-align: center;
    color: var(--color-text-tertiary, #9ca3af);
    padding: 2rem 1rem !important;
    font-style: italic;
}

/* Empty cell placeholder */
.table-cell-empty {
    color: var(--color-text-tertiary, #9ca3af);
}

/* Unit display */
.table-cell-unit {
    font-size: 0.75em;
    color: var(--color-text-tertiary, #9ca3af);
    margin-left: 2px;
}

/* Reference range display */
.table-cell-range {
    font-size: 0.75em;
    color: var(--color-text-tertiary, #9ca3af);
    margin-left: 4px;
}

/* =================================================================
   TABLE SORTING
   ================================================================= */

.table-col-sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.table-col-sortable:hover {
    background: var(--color-surface-hover, #f3f4f6);
}

.table-col-sortable .sort-indicator {
    display: inline-block;
    margin-left: 4px;
    opacity: 0.3;
}

.table-col-sortable .sort-indicator::after {
    content: '⇅';
    font-size: 0.7em;
}

.table-col-sortable.sort-asc .sort-indicator,
.table-col-sortable.sort-desc .sort-indicator {
    opacity: 1;
}

.table-col-sortable.sort-asc .sort-indicator::after {
    content: '↑';
}

.table-col-sortable.sort-desc .sort-indicator::after {
    content: '↓';
}

/* =================================================================
   TABLE CELL STATUS (Medical Data)
   ================================================================= */

.table-cell--normal {
    color: var(--color-success, #10b981);
}

.table-cell--high {
    color: var(--color-error, #dc2626);
    font-weight: 600;
}

.table-cell--low {
    color: var(--color-warning, #f59e0b);
    font-weight: 600;
}

.table-cell--critical {
    color: var(--color-error, #dc2626);
    font-weight: 700;
    background: var(--color-error-bg, #fef2f2);
}

/* =================================================================
   TABLE ROW HIGHLIGHTING
   ================================================================= */

.table-row--warning {
    background: var(--color-warning-bg, #fffbeb) !important;
}

.table-row--error,
.table-row--critical {
    background: var(--color-error-bg, #fef2f2) !important;
}

.table-row--success {
    background: var(--color-success-bg, #f0fdf4) !important;
}

.table-row--info {
    background: var(--color-info-bg, #eff6ff) !important;
}

/* =================================================================
   TABLE STATUS BADGES
   ================================================================= */

.table-status {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}

.table-status--success {
    background: var(--color-success-bg, #d1fae5);
    color: var(--color-success-dark, #065f46);
}

.table-status--warning {
    background: var(--color-warning-bg, #fef3c7);
    color: var(--color-warning-dark, #92400e);
}

.table-status--error {
    background: var(--color-error-bg, #fee2e2);
    color: var(--color-error-dark, #991b1b);
}

.table-status--muted {
    background: var(--color-surface-secondary, #f3f4f6);
    color: var(--color-text-tertiary, #6b7280);
}

.table-status--default {
    background: var(--color-primary-light, #dbeafe);
    color: var(--color-primary-dark, #1e40af);
}

/* =================================================================
   TABLE BADGES
   ================================================================= */

.table-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.table-badge--primary {
    background: var(--color-primary-light, #dbeafe);
    color: var(--color-primary, #2563eb);
}

.table-badge--secondary {
    background: var(--color-surface-secondary, #f3f4f6);
    color: var(--color-text-secondary, #6b7280);
}

.table-badge--success {
    background: var(--color-success-bg, #d1fae5);
    color: var(--color-success, #10b981);
}

.table-badge--warning {
    background: var(--color-warning-bg, #fef3c7);
    color: var(--color-warning, #f59e0b);
}

.table-badge--error {
    background: var(--color-error-bg, #fee2e2);
    color: var(--color-error, #dc2626);
}

/* =================================================================
   TABLE FOOTER
   ================================================================= */

.visualization-table tfoot {
    border-top: 2px solid var(--color-border, #e5e7eb);
}

.visualization-table tfoot td {
    padding: 0.75rem 1rem;
    font-weight: 600;
    background: var(--color-surface-secondary, #f9fafb);
    color: var(--color-text-primary, #111827);
}

.table-footer-cell {
    font-weight: 600;
}

/* =================================================================
   TIMELINE CONTAINER (Phase 5.3)
   ================================================================= */

.visualization-timeline {
    position: relative;
    padding-left: 2rem;
}

.visualization-timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-border, #e5e7eb);
}

.timeline-event {
    position: relative;
    padding: 0.75rem 0;
    padding-left: 1.5rem;
}

.timeline-event::before {
    content: '';
    position: absolute;
    left: -1.75rem;
    top: 1rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-primary, #2563eb);
    border: 2px solid var(--color-surface, #ffffff);
    box-shadow: 0 0 0 2px var(--color-primary, #2563eb);
}

/* Event type colors - dot indicator */
.timeline-event--diagnosis::before { background: var(--color-error, #dc2626); box-shadow: 0 0 0 2px var(--color-error, #dc2626); }
.timeline-event--medication::before { background: var(--color-warning, #f59e0b); box-shadow: 0 0 0 2px var(--color-warning, #f59e0b); }
.timeline-event--procedure::before { background: var(--color-success, #10b981); box-shadow: 0 0 0 2px var(--color-success, #10b981); }
.timeline-event--lab::before { background: var(--color-info, #3b82f6); box-shadow: 0 0 0 2px var(--color-info, #3b82f6); }
.timeline-event--visit::before { background: var(--color-primary, #2563eb); box-shadow: 0 0 0 2px var(--color-primary, #2563eb); }
.timeline-event--vaccination::before { background: var(--color-success, #10b981); box-shadow: 0 0 0 2px var(--color-success, #10b981); }
.timeline-event--imaging::before { background: var(--color-info, #3b82f6); box-shadow: 0 0 0 2px var(--color-info, #3b82f6); }
.timeline-event--referral::before { background: #6366f1; box-shadow: 0 0 0 2px #6366f1; }
.timeline-event--note::before { background: var(--color-text-tertiary, #9ca3af); box-shadow: 0 0 0 2px var(--color-text-tertiary, #9ca3af); }
.timeline-event--alert::before { background: var(--color-error, #dc2626); box-shadow: 0 0 0 2px var(--color-error, #dc2626); }
.timeline-event--vital::before { background: #ec4899; box-shadow: 0 0 0 2px #ec4899; }
.timeline-event--allergy::before { background: var(--color-error, #dc2626); box-shadow: 0 0 0 2px var(--color-error, #dc2626); }

/* Recent and critical highlighting */
.timeline-event--recent {
    background: var(--color-primary-light, rgba(37, 99, 235, 0.05));
    border-radius: var(--radius-md, 8px);
    margin-left: -0.5rem;
    padding-left: 2rem;
}

.timeline-event--critical {
    background: var(--color-error-bg, #fef2f2);
    border-radius: var(--radius-md, 8px);
    margin-left: -0.5rem;
    padding-left: 2rem;
    border-left: 3px solid var(--color-error, #dc2626);
}

.timeline-date {
    font-size: 0.75rem;
    color: var(--color-text-tertiary, #9ca3af);
    font-weight: 500;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timeline-time {
    font-size: 0.75rem;
    color: var(--color-text-tertiary, #9ca3af);
    background: var(--color-surface-secondary, #f3f4f6);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm, 4px);
}

.timeline-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.timeline-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.timeline-description {
    font-size: 0.85rem;
    color: var(--color-text-secondary, #6b7280);
    line-height: 1.4;
    margin-top: 0.25rem;
}

.timeline-category {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.1rem 0.4rem;
    background: var(--color-surface-secondary, #f3f4f6);
    color: var(--color-text-secondary, #6b7280);
    border-radius: var(--radius-sm, 4px);
    text-transform: uppercase;
    margin-top: 0.35rem;
    font-weight: 500;
    letter-spacing: 0.025em;
}

/* Category color variants */
.timeline-category--error { background: var(--color-error-bg, #fee2e2); color: var(--color-error, #dc2626); }
.timeline-category--warning { background: var(--color-warning-bg, #fef3c7); color: var(--color-warning-dark, #92400e); }
.timeline-category--success { background: var(--color-success-bg, #d1fae5); color: var(--color-success-dark, #065f46); }
.timeline-category--info { background: var(--color-info-bg, #dbeafe); color: var(--color-info-dark, #1e40af); }
.timeline-category--primary { background: var(--color-primary-light, #dbeafe); color: var(--color-primary, #2563eb); }
.timeline-category--secondary { background: #e0e7ff; color: #4338ca; }
.timeline-category--muted { background: var(--color-surface-secondary, #f3f4f6); color: var(--color-text-tertiary, #6b7280); }

/* Metadata section */
.timeline-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}

.timeline-meta-item {
    color: var(--color-text-secondary, #6b7280);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.timeline-status {
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}

.timeline-status--success { background: var(--color-success-bg, #d1fae5); color: var(--color-success-dark, #065f46); }
.timeline-status--warning { background: var(--color-warning-bg, #fef3c7); color: var(--color-warning-dark, #92400e); }
.timeline-status--error { background: var(--color-error-bg, #fee2e2); color: var(--color-error-dark, #991b1b); }
.timeline-status--default { background: var(--color-surface-secondary, #f3f4f6); color: var(--color-text-secondary, #6b7280); }

/* Detail list */
.timeline-detail-list {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--color-surface-secondary, #f9fafb);
    border-radius: var(--radius-sm, 4px);
    font-size: 0.8rem;
}

.timeline-detail-item {
    padding: 0.25rem 0;
    color: var(--color-text-secondary, #6b7280);
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
}

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

.timeline-detail-item strong {
    color: var(--color-text-primary, #374151);
}

/* Expandable details */
.timeline-details {
    margin: 0;
}

.timeline-details summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.timeline-details summary::-webkit-details-marker {
    display: none;
}

.timeline-details summary::before {
    content: '▶';
    font-size: 0.6rem;
    color: var(--color-text-tertiary, #9ca3af);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.timeline-details[open] summary::before {
    transform: rotate(90deg);
}

.timeline-expanded-content {
    margin-top: 0.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--color-border-light, #e5e7eb);
}

/* Compact mode */
.visualization-timeline--compact .timeline-event {
    padding: 0.5rem 0;
    padding-left: 1rem;
}

.visualization-timeline--compact .timeline-event::before {
    width: 8px;
    height: 8px;
    left: -1.5rem;
    top: 0.75rem;
}

.visualization-timeline--compact .timeline-title {
    font-size: 0.85rem;
}

.visualization-timeline--compact .timeline-description {
    font-size: 0.8rem;
}

/* Group styling */
.timeline-group {
    margin-bottom: 1rem;
}

.timeline-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.timeline-group-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
}

.timeline-group-count {
    font-size: 0.75rem;
    color: var(--color-text-tertiary, #9ca3af);
    background: var(--color-surface-secondary, #f3f4f6);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full, 9999px);
}

.timeline-group-events {
    padding-left: 0.5rem;
}

/* Empty state */
.timeline-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-tertiary, #9ca3af);
}

.timeline-empty-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.timeline-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* Show more button */
.timeline-show-more {
    display: block;
    width: 100%;
    padding: 0.75rem;
    margin-top: 0.5rem;
    background: var(--color-surface-secondary, #f9fafb);
    border: 1px dashed var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    color: var(--color-primary, #2563eb);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.timeline-show-more:hover {
    background: var(--color-primary-light, #dbeafe);
    border-color: var(--color-primary, #2563eb);
}

/* =================================================================
   GRAPH CONTAINER (Phase 5.4) - D3.js Force-Directed Graph
   ================================================================= */

.visualization-graph {
    width: 100%;
    min-height: 300px;
    max-height: 500px;
    position: relative;
    background: var(--color-surface-secondary, #f9fafb);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

.visualization-graph svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Graph empty state */
.graph-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: var(--color-text-tertiary, #9ca3af);
}

.graph-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.graph-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* Graph node styling */
.graph-node {
    cursor: grab;
}

.graph-node:active {
    cursor: grabbing;
}

.graph-node circle {
    stroke: var(--color-surface, #ffffff);
    stroke-width: 2px;
    transition: filter 0.2s ease, stroke-width 0.2s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.graph-node:hover circle {
    stroke-width: 3px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.graph-node-label {
    font-size: 12px;
    fill: var(--color-text-primary, #111827);
    font-weight: 500;
    pointer-events: none;
}

.graph-node-icon {
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Graph edge/link styling */
.graph-edge {
    fill: none;
    transition: stroke-width 0.2s ease;
}

.graph-edge:hover {
    stroke-width: 3px !important;
}

/* Graph link labels */
.graph-link-label {
    font-size: 12px;
    fill: var(--color-text-tertiary, #6b7280);
    pointer-events: none;
    background: var(--color-surface, #ffffff);
}

/* Graph legend */
.graph-legend {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-sm, 4px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 0.75rem;
    max-width: calc(100% - 16px);
}

.graph-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-secondary, #6b7280);
    white-space: nowrap;
}

.graph-legend-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Graph controls (zoom buttons if needed) */
.graph-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.graph-control-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface, #ffffff);
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.15s ease;
}

.graph-control-btn:hover {
    background: var(--color-surface-secondary, #f3f4f6);
    border-color: var(--color-primary, #2563eb);
    color: var(--color-primary, #2563eb);
}

/* Node type specific colors (backup if D3 doesn't set them) */
.graph-node--drug circle { fill: #f59e0b; }
.graph-node--condition circle { fill: #dc2626; }
.graph-node--provider circle { fill: #2563eb; }
.graph-node--facility circle { fill: #6366f1; }
.graph-node--lab circle { fill: #10b981; }
.graph-node--procedure circle { fill: #8b5cf6; }
.graph-node--patient circle { fill: #ec4899; }
.graph-node--allergy circle { fill: #ef4444; }

/* Link type specific styles (backup) */
.graph-edge--interacts { stroke: #dc2626; }
.graph-edge--treats { stroke: #10b981; }
.graph-edge--prescribes { stroke: #2563eb; stroke-dasharray: 5,5; }
.graph-edge--contraindicated { stroke: #dc2626; stroke-dasharray: 2,2; }

/* =================================================================
   CUSTOM HTML CONTAINER (Phase 5.5) - Enhanced
   ================================================================= */

.visualization-custom {
    padding: 1rem;
    background: var(--color-surface-secondary, #f9fafb);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

.visualization-custom svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Custom empty state */
.custom-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-tertiary, #9ca3af);
}

.custom-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* Custom text content */
.custom-text-content {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-primary, #111827);
}

/* Custom code blocks */
.custom-code-block {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-sm, 4px);
    padding: 1rem;
    margin: 0.5rem 0;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
}

.custom-code-block code {
    background: none;
    padding: 0;
    border: none;
    font-size: inherit;
}

.custom-code-block[data-language]::before {
    content: attr(data-language);
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-tertiary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
}

/* Markdown content within custom */
.visualization-custom h1,
.visualization-custom h2,
.visualization-custom h3,
.visualization-custom h4,
.visualization-custom h5,
.visualization-custom h6 {
    color: var(--color-text-primary, #111827);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.visualization-custom h1 { font-size: 1.5rem; }
.visualization-custom h2 { font-size: 1.25rem; }
.visualization-custom h3 { font-size: 1.1rem; }

.visualization-custom p {
    margin: 0.5rem 0;
    line-height: 1.6;
}

.visualization-custom ul,
.visualization-custom ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.visualization-custom li {
    margin: 0.25rem 0;
}

.visualization-custom a {
    color: var(--color-primary, #2563eb);
    text-decoration: none;
}

.visualization-custom a:hover {
    text-decoration: underline;
}

.visualization-custom blockquote {
    margin: 0.5rem 0;
    padding: 0.5rem 1rem;
    border-left: 3px solid var(--color-primary, #2563eb);
    background: var(--color-surface, #ffffff);
    font-style: italic;
}

.visualization-custom img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm, 4px);
}

.visualization-custom table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.85rem;
}

.visualization-custom th,
.visualization-custom td {
    padding: 0.5rem;
    border: 1px solid var(--color-border, #e5e7eb);
    text-align: left;
}

.visualization-custom th {
    background: var(--color-surface, #ffffff);
    font-weight: 600;
}

/* Details/summary in custom content */
.visualization-custom details {
    margin: 0.5rem 0;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-sm, 4px);
}

.visualization-custom details summary {
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-weight: 500;
    background: var(--color-surface, #ffffff);
}

.visualization-custom details[open] > summary {
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.visualization-custom details > *:not(summary) {
    padding: 0.75rem 1rem;
}

/* =================================================================
   ERROR STATE
   ================================================================= */

.visualization-error {
    padding: 1.5rem;
    text-align: center;
    color: var(--color-error, #dc2626);
    background: var(--color-error-bg, #fef2f2);
    border-radius: var(--radius-md, 8px);
}

.visualization-error .error-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.visualization-error .error-message {
    font-size: 0.85rem;
}

/* =================================================================
   LOADING STATE
   ================================================================= */

.visualization-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    color: var(--color-text-secondary, #6b7280);
}

.visualization-loading .spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border, #e5e7eb);
    border-top-color: var(--color-primary, #2563eb);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 0.75rem;
}

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

/* =================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================= */

@media (max-width: 640px) {
    .visualization-container {
        padding: 0.75rem;
        margin: 0.75rem 0;
    }

    .visualization-chart {
        min-height: 180px;
        max-height: 300px;
    }

    .visualization-chart--pie,
    .visualization-chart--doughnut {
        max-width: 280px;
    }

    .visualization-table th,
    .visualization-table td {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .visualization-timeline {
        padding-left: 1.5rem;
    }

    .timeline-event {
        padding-left: 1rem;
    }
}

/* =================================================================
   DARK MODE SUPPORT (if applicable)
   ================================================================= */

@media (prefers-color-scheme: dark) {
    .visualization-container {
        background: var(--color-surface-dark, #1f2937);
        border-color: var(--color-border-dark, #374151);
    }

    .visualization-title {
        color: var(--color-text-primary-dark, #f9fafb);
    }

    .visualization-table th {
        background: var(--color-surface-secondary-dark, #111827);
        color: var(--color-text-secondary-dark, #9ca3af);
    }

    .visualization-table td {
        color: var(--color-text-primary-dark, #f9fafb);
    }
}