:root {
    --tf-bg: #0a0a0f;
    --tf-panel: #111827;
    --tf-surface: #1f2937;
    --tf-surface-muted: rgba(31, 41, 55, 0.58);
    --tf-surface-strong: #020617;
    --tf-border: #1f2937;
    --tf-border-strong: #374151;
    --tf-text: #f8fafc;
    --tf-text-soft: #d1d5db;
    --tf-text-muted: #9ca3af;
    --tf-text-dim: #6b7280;
    --tf-accent: #2563eb;
    --tf-accent-hover: #1d4ed8;
    --tf-accent-soft: #60a5fa;
    --tf-focus: #93c5fd;
    --tf-tooltip-bg: #111827;
    --tf-tooltip-border: #374151;
    --tf-terminal-bg: #020617;
    --tf-terminal-fg: #e2e8f0;
    --tf-terminal-selection: rgba(59, 130, 246, 0.45);
    --tf-chart-grid: #1f2937;
    --tf-chart-label: #9ca3af;
    --tf-chart-row: #111827;
    --tf-chart-empty: #6b7280;
    --tf-aligned: #22c55e;
    --tf-aligned-soft: rgba(34, 197, 94, 0.16);
    --tf-aligned-border: rgba(34, 197, 94, 0.44);
    --tf-tangent: #f59e0b;
    --tf-tangent-soft: rgba(245, 158, 11, 0.16);
    --tf-tangent-border: rgba(245, 158, 11, 0.42);
    --tf-collision: #60a5fa;
    --tf-collision-soft: rgba(96, 165, 250, 0.16);
    --tf-collision-border: rgba(96, 165, 250, 0.42);
    --tf-sleeping: #94a3b8;
    --tf-sleeping-soft: rgba(148, 163, 184, 0.16);
    --tf-sleeping-border: rgba(148, 163, 184, 0.34);
    --tf-disconnected: #ef4444;
    --tf-disconnected-soft: rgba(239, 68, 68, 0.16);
    --tf-disconnected-border: rgba(239, 68, 68, 0.42);
    --tf-heat-0: #1f2937;
    --tf-heat-1: #064e3b;
    --tf-heat-2: #047857;
    --tf-heat-3: #059669;
    --tf-heat-4: #10b981;
}

html[data-theme-profile="high-contrast"] {
    --tf-bg: #05070d;
    --tf-panel: #0b1321;
    --tf-surface: #172033;
    --tf-surface-muted: rgba(23, 32, 51, 0.72);
    --tf-surface-strong: #02040a;
    --tf-border: #49607d;
    --tf-border-strong: #7dd3fc;
    --tf-text: #ffffff;
    --tf-text-soft: #e2e8f0;
    --tf-text-muted: #cbd5e1;
    --tf-text-dim: #94a3b8;
    --tf-accent: #38bdf8;
    --tf-accent-hover: #0ea5e9;
    --tf-accent-soft: #bae6fd;
    --tf-focus: #f8fafc;
    --tf-tooltip-bg: #0b1321;
    --tf-tooltip-border: #7dd3fc;
    --tf-terminal-bg: #04070d;
    --tf-terminal-fg: #f8fafc;
    --tf-terminal-selection: rgba(125, 211, 252, 0.38);
    --tf-chart-grid: #334155;
    --tf-chart-label: #cbd5e1;
    --tf-chart-row: #0b1321;
    --tf-chart-empty: #94a3b8;
    --tf-aligned: #2dd4bf;
    --tf-aligned-soft: rgba(45, 212, 191, 0.22);
    --tf-aligned-border: rgba(45, 212, 191, 0.56);
    --tf-tangent: #fbbf24;
    --tf-tangent-soft: rgba(251, 191, 36, 0.22);
    --tf-tangent-border: rgba(251, 191, 36, 0.56);
    --tf-collision: #93c5fd;
    --tf-collision-soft: rgba(147, 197, 253, 0.22);
    --tf-collision-border: rgba(147, 197, 253, 0.56);
    --tf-sleeping: #cbd5e1;
    --tf-sleeping-soft: rgba(203, 213, 225, 0.22);
    --tf-sleeping-border: rgba(203, 213, 225, 0.52);
    --tf-disconnected: #f87171;
    --tf-disconnected-soft: rgba(248, 113, 113, 0.24);
    --tf-disconnected-border: rgba(248, 113, 113, 0.58);
    --tf-heat-0: #1e293b;
    --tf-heat-1: #134e4a;
    --tf-heat-2: #0f766e;
    --tf-heat-3: #0369a1;
    --tf-heat-4: #fbbf24;
}

html[data-theme-profile="deuteranopia-safe"] {
    --tf-accent: #22c55e;
    --tf-accent-hover: #16a34a;
    --tf-accent-soft: #86efac;
    --tf-aligned: #06b6d4;
    --tf-aligned-soft: rgba(6, 182, 212, 0.18);
    --tf-aligned-border: rgba(6, 182, 212, 0.46);
    --tf-tangent: #eab308;
    --tf-tangent-soft: rgba(234, 179, 8, 0.18);
    --tf-tangent-border: rgba(234, 179, 8, 0.44);
    --tf-collision: #6366f1;
    --tf-collision-soft: rgba(99, 102, 241, 0.18);
    --tf-collision-border: rgba(99, 102, 241, 0.44);
    --tf-sleeping: #94a3b8;
    --tf-sleeping-soft: rgba(148, 163, 184, 0.16);
    --tf-sleeping-border: rgba(148, 163, 184, 0.34);
    --tf-disconnected: #d946ef;
    --tf-disconnected-soft: rgba(217, 70, 239, 0.18);
    --tf-disconnected-border: rgba(217, 70, 239, 0.44);
    --tf-heat-0: #1f2937;
    --tf-heat-1: #0f766e;
    --tf-heat-2: #0891b2;
    --tf-heat-3: #4f46e5;
    --tf-heat-4: #eab308;
}

html[data-theme-profile="protanopia-safe"] {
    --tf-accent: #14b8a6;
    --tf-accent-hover: #0f766e;
    --tf-accent-soft: #99f6e4;
    --tf-aligned: #14b8a6;
    --tf-aligned-soft: rgba(20, 184, 166, 0.18);
    --tf-aligned-border: rgba(20, 184, 166, 0.44);
    --tf-tangent: #f59e0b;
    --tf-tangent-soft: rgba(245, 158, 11, 0.18);
    --tf-tangent-border: rgba(245, 158, 11, 0.44);
    --tf-collision: #3b82f6;
    --tf-collision-soft: rgba(59, 130, 246, 0.18);
    --tf-collision-border: rgba(59, 130, 246, 0.44);
    --tf-sleeping: #94a3b8;
    --tf-sleeping-soft: rgba(148, 163, 184, 0.16);
    --tf-sleeping-border: rgba(148, 163, 184, 0.34);
    --tf-disconnected: #ec4899;
    --tf-disconnected-soft: rgba(236, 72, 153, 0.18);
    --tf-disconnected-border: rgba(236, 72, 153, 0.44);
    --tf-heat-0: #1f2937;
    --tf-heat-1: #0f766e;
    --tf-heat-2: #14b8a6;
    --tf-heat-3: #3b82f6;
    --tf-heat-4: #f59e0b;
}

html[data-theme-profile="tritanopia-safe"] {
    --tf-accent: #10b981;
    --tf-accent-hover: #059669;
    --tf-accent-soft: #6ee7b7;
    --tf-aligned: #10b981;
    --tf-aligned-soft: rgba(16, 185, 129, 0.18);
    --tf-aligned-border: rgba(16, 185, 129, 0.44);
    --tf-tangent: #f97316;
    --tf-tangent-soft: rgba(249, 115, 22, 0.18);
    --tf-tangent-border: rgba(249, 115, 22, 0.44);
    --tf-collision: #2563eb;
    --tf-collision-soft: rgba(37, 99, 235, 0.18);
    --tf-collision-border: rgba(37, 99, 235, 0.44);
    --tf-sleeping: #94a3b8;
    --tf-sleeping-soft: rgba(148, 163, 184, 0.16);
    --tf-sleeping-border: rgba(148, 163, 184, 0.34);
    --tf-disconnected: #f43f5e;
    --tf-disconnected-soft: rgba(244, 63, 94, 0.18);
    --tf-disconnected-border: rgba(244, 63, 94, 0.44);
    --tf-heat-0: #1f2937;
    --tf-heat-1: #047857;
    --tf-heat-2: #10b981;
    --tf-heat-3: #2563eb;
    --tf-heat-4: #f97316;
}

body {
    background: var(--tf-bg);
    color: var(--tf-text-soft);
}

.tf-skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--tf-focus);
    background: var(--tf-surface-strong);
    color: var(--tf-text);
    transform: translateY(-160%);
    transition: transform 0.15s ease;
}

.tf-skip-link:focus,
.tf-skip-link:focus-visible {
    transform: translateY(0);
}

.tf-shell {
    background: var(--tf-bg);
    color: var(--tf-text-soft);
}

/* Common Tailwind utility overrides scoped to FEAT-2702 profiles */
html[data-theme-profile] .bg-gray-950 {
    background-color: var(--tf-bg);
}

html[data-theme-profile] .bg-gray-900 {
    background-color: var(--tf-panel);
}

html[data-theme-profile] .bg-gray-800,
html[data-theme-profile] .bg-gray-700 {
    background-color: var(--tf-surface);
}

html[data-theme-profile] [class*="bg-gray-800/50"] {
    background-color: var(--tf-surface-muted);
}

html[data-theme-profile] [class*="bg-gray-900/30"] {
    background-color: var(--tf-surface-muted);
}

html[data-theme-profile] .border-gray-800 {
    border-color: var(--tf-border);
}

html[data-theme-profile] .border-gray-700 {
    border-color: var(--tf-border-strong);
}

html[data-theme-profile] .text-white,
html[data-theme-profile] .text-gray-100 {
    color: var(--tf-text);
}

html[data-theme-profile] .text-gray-300 {
    color: var(--tf-text-soft);
}

html[data-theme-profile] .text-gray-400 {
    color: var(--tf-text-muted);
}

html[data-theme-profile] .text-gray-500,
html[data-theme-profile] .text-gray-600,
html[data-theme-profile] .text-gray-700 {
    color: var(--tf-text-dim);
}

html[data-theme-profile] .bg-blue-600 {
    background-color: var(--tf-accent);
}

html[data-theme-profile] .hover\:bg-blue-700:hover,
html[data-theme-profile] .hover\:bg-blue-500:hover {
    background-color: var(--tf-accent-hover);
}

html[data-theme-profile] .text-blue-400,
html[data-theme-profile] .text-blue-500 {
    color: var(--tf-accent-soft);
}

html[data-theme-profile] .focus\:border-blue-500:focus,
html[data-theme-profile] .focus\:border-cyan-500:focus {
    border-color: var(--tf-focus);
}

/* Tool colors */
.tool-claude {
    background: #f97316;
    color: #fff;
}

.tool-codex {
    background: #22c55e;
    color: #fff;
}

.tool-gemini {
    background: #3b82f6;
    color: #fff;
}

/* Semantic state layer */
.status-dot,
.timeline-dot,
.tf-state-dot {
    position: relative;
    overflow: hidden;
}

.status-dot,
.tf-state-dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    display: inline-block;
    background-color: var(--tf-state-color, var(--tf-sleeping));
    border: 1px solid var(--tf-state-border, var(--tf-sleeping-border));
    box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.28) inset;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    border: 2px solid var(--tf-state-border, var(--tf-border));
    background-color: var(--tf-state-color, var(--tf-sleeping));
}

.status-dot::after,
.timeline-dot::after,
.tf-state-dot::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background-image: var(--tf-state-pattern, none);
    opacity: 0.82;
}

.tf-state-text {
    color: var(--tf-state-color, var(--tf-text-soft));
}

.tf-state-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    border-radius: 9999px;
    border: 1px solid var(--tf-state-border, var(--tf-border));
    background: var(--tf-state-bg, var(--tf-surface-muted));
    color: var(--tf-state-color, var(--tf-text-soft));
    font-weight: 600;
    line-height: 1;
}

.tf-state-pill::before {
    content: attr(data-cue);
    width: 0.95rem;
    height: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid currentColor;
    font-size: 0.6rem;
    font-weight: 700;
}

.tf-state-card {
    border-color: var(--tf-state-border, var(--tf-border)) !important;
    background: linear-gradient(180deg, var(--tf-panel), var(--tf-surface-muted));
}

.tf-state-aligned {
    --tf-state-color: var(--tf-aligned);
    --tf-state-bg: var(--tf-aligned-soft);
    --tf-state-border: var(--tf-aligned-border);
    --tf-state-pattern: radial-gradient(circle at center, rgba(255, 255, 255, 0.92) 0 24%, transparent 28%);
}

.tf-state-tangent {
    --tf-state-color: var(--tf-tangent);
    --tf-state-bg: var(--tf-tangent-soft);
    --tf-state-border: var(--tf-tangent-border);
    --tf-state-pattern: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0 1px, transparent 1px 3px);
}

.tf-state-collision {
    --tf-state-color: var(--tf-collision);
    --tf-state-bg: var(--tf-collision-soft);
    --tf-state-border: var(--tf-collision-border);
    --tf-state-pattern:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.88) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.52) 0 1px, transparent 1px 4px);
}

.tf-state-sleeping {
    --tf-state-color: var(--tf-sleeping);
    --tf-state-bg: var(--tf-sleeping-soft);
    --tf-state-border: var(--tf-sleeping-border);
    --tf-state-pattern: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0 1px, transparent 1px 3px);
}

.tf-state-disconnected {
    --tf-state-color: var(--tf-disconnected);
    --tf-state-bg: var(--tf-disconnected-soft);
    --tf-state-border: var(--tf-disconnected-border);
    --tf-state-pattern:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.55) 0 1px, transparent 1px 4px);
}

/* Timeline */
.timeline-line {
    border-left: 2px solid var(--tf-chart-grid);
}

/* Terminal container */
#terminal-container {
    height: 400px;
    background: var(--tf-terminal-bg);
    border-radius: 8px 8px 0 0;
    padding: 4px;
    overflow: hidden;
}

#terminal-container .xterm {
    height: 100%;
}

/* Terminal resize handle */
.terminal-resize-handle {
    height: 8px;
    background: var(--tf-surface);
    border-radius: 0 0 8px 8px;
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.terminal-resize-handle:hover {
    background: var(--tf-border-strong);
}

.terminal-resize-grip {
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--tf-text-dim);
}

.terminal-resize-handle:hover .terminal-resize-grip {
    background: var(--tf-text-muted);
}

/* Prevent text selection while dragging */
body.terminal-resizing {
    cursor: ns-resize !important;
    user-select: none;
    -webkit-user-select: none;
}

/* Tab styling */
.tab-active {
    border-bottom: 2px solid var(--tf-accent);
    color: var(--tf-accent-soft);
}

.tab-inactive {
    border-bottom: 2px solid transparent;
    color: var(--tf-text-muted);
}

.tab-inactive:hover {
    color: var(--tf-text);
}

/* Cards */
.project-card {
    transition: border-color 0.2s;
}

.project-card:hover {
    border-color: var(--tf-accent);
}

/* Line clamping */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* htmx loading indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-request.htmx-indicator {
    display: inline-block;
}

/* Server tab styling */
.server-tab-active {
    background: var(--tf-surface);
    color: var(--tf-text);
}

/* Pulse animation for active sessions */
@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--tf-panel);
}

::-webkit-scrollbar-thumb {
    background: var(--tf-border-strong);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tf-text-dim);
}

/* Toast notifications */
.toast {
    animation: toast-in 0.3s ease-out;
}

.toast-exit {
    animation: toast-out 0.3s ease-in forwards;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toast-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(1rem);
    }
}

/* Focus styles for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--tf-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 1px var(--tf-surface-strong);
}

/* Ensure links in dark theme do not use browser defaults */
a {
    color: inherit;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .animate-pulse,
    .toast,
    .toast-exit {
        animation: none !important;
    }

    .project-card,
    .terminal-resize-handle,
    .tab-active,
    .tab-inactive {
        transition: none !important;
    }
}

html[data-motion-profile="reduced-motion"] .animate-pulse,
html[data-motion-profile="reduced-motion"] .toast,
html[data-motion-profile="reduced-motion"] .toast-exit {
    animation: none !important;
}
/* Motion accessibility */
html[data-motion-mode="reduced-motion"],
html[data-motion-mode="minimal"] {
    scroll-behavior: auto !important;
}

html[data-motion-mode="reduced-motion"] .animate-pulse,
html[data-motion-mode="minimal"] .animate-pulse {
    animation: none !important;
    opacity: 1 !important;
}

html[data-motion-mode="reduced-motion"] .animate-spin {
    animation-duration: 1.6s !important;
}

html[data-motion-mode="minimal"] .animate-spin {
    animation: none !important;
}

html[data-motion-mode="reduced-motion"] .transition-colors,
html[data-motion-mode="reduced-motion"] .transition-all,
html[data-motion-mode="reduced-motion"] .transition-opacity {
    transition-duration: 120ms !important;
}

html[data-motion-mode="minimal"] .transition-colors,
html[data-motion-mode="minimal"] .transition-all,
html[data-motion-mode="minimal"] .transition-opacity {
    transition-duration: 0ms !important;
}

@keyframes toast-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes toast-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

html[data-motion-mode="reduced-motion"] .toast {
    animation: toast-fade-in 0.12s ease-out;
}

html[data-motion-mode="reduced-motion"] .toast-exit {
    animation: toast-fade-out 0.12s ease-out forwards;
}

html[data-motion-mode="minimal"] .toast,
html[data-motion-mode="minimal"] .toast-exit {
    animation: none !important;
}

.active-session-badge {
    border: 1px solid rgba(74, 222, 128, 0.28);
    background: rgba(20, 83, 45, 0.28);
    color: #bbf7d0;
    border-radius: 9999px;
    padding: 0.25rem 0.625rem;
    font-weight: 600;
}

.motion-state-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.motion-cue-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid #374151;
    background: rgba(17, 24, 39, 0.85);
    color: #cbd5e1;
    font-size: 0.75rem;
    line-height: 1rem;
}

.active-session-card {
    border-color: rgba(74, 222, 128, 0.18);
}

html[data-motion-mode="reduced-motion"] .motion-state-badge,
html[data-motion-mode="minimal"] .motion-state-badge {
    border-width: 2px;
    background: rgba(22, 101, 52, 0.22);
    color: #dcfce7;
}

html[data-motion-mode="reduced-motion"] .active-session-card,
html[data-motion-mode="minimal"] .active-session-card {
    border-color: rgba(74, 222, 128, 0.48) !important;
    background: rgba(20, 83, 45, 0.18);
    box-shadow: inset 4px 0 0 #22c55e;
}

.intersection-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--tf-collision-border);
    border-radius: 1.75rem;
    background:
        radial-gradient(circle at top left, rgba(96, 165, 250, 0.18), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.12), transparent 26rem),
        linear-gradient(180deg, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.92));
    box-shadow: 0 28px 80px rgba(2, 6, 23, 0.45);
}

.intersection-rail {
    height: 0.45rem;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.88), rgba(56, 189, 248, 0.7), rgba(125, 211, 252, 0.3));
}

.intersection-grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 1024px) {
    .intersection-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.9fr);
    }
}

.intersection-card,
.intersection-mini-card,
.intersection-empty-state,
.intersection-placeholder {
    border-radius: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(2, 6, 23, 0.56);
    backdrop-filter: blur(18px);
}

.intersection-card {
    padding: 1.25rem;
}

.intersection-mini-card {
    display: block;
    padding: 1rem 1.1rem;
    transition: border-color 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.intersection-mini-card:hover {
    border-color: var(--tf-collision-border);
    transform: translateY(-1px);
    background: rgba(15, 23, 42, 0.82);
}

.intersection-path-list,
.intersection-stack,
.intersection-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.intersection-action-row {
    align-items: stretch;
}

.intersection-action,
.intersection-placeholder {
    min-height: 2.75rem;
    padding: 0.75rem 1rem;
}

.intersection-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid var(--tf-collision-border);
    background: var(--tf-collision-soft);
    color: var(--tf-text);
    font-weight: 600;
}

.intersection-action:hover {
    border-color: var(--tf-collision);
    background: rgba(59, 130, 246, 0.22);
}

.intersection-placeholder,
.intersection-empty-state {
    color: var(--tf-text-muted);
    line-height: 1.6;
}

.intersection-empty-state {
    padding: 1.25rem;
}

.intersection-path-chip,
.intersection-deep-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    padding: 0.45rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.86);
    color: var(--tf-text-soft);
    font-size: 0.8rem;
    line-height: 1.2;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.intersection-deep-link {
    width: 100%;
    justify-content: flex-start;
    overflow-wrap: anywhere;
}

html[data-motion-mode="reduced-motion"] .intersection-mini-card,
html[data-motion-mode="minimal"] .intersection-mini-card {
    transition: none;
    transform: none !important;
}

#motion-live-indicator[data-mode="reduced-motion"] {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(30, 64, 175, 0.24);
    color: #bfdbfe;
}

#motion-live-indicator[data-mode="minimal"] {
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(146, 64, 14, 0.22);
    color: #fde68a;
}

.tf-oracle-state {
    border: 1px solid var(--tf-border);
    border-radius: 1rem;
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.94));
    padding: 1.5rem;
}

.tf-oracle-state[data-state="grounded-answer"] {
    border-color: rgba(56, 189, 248, 0.24);
}

.tf-oracle-state[data-state="no-support"] {
    border-color: rgba(245, 158, 11, 0.28);
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(41, 22, 5, 0.72), rgba(9, 9, 11, 0.94));
}

.tf-oracle-state[data-state="unauthorized"] {
    border-color: rgba(248, 113, 113, 0.3);
    background:
        radial-gradient(circle at top right, rgba(248, 113, 113, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(69, 10, 10, 0.58), rgba(9, 9, 11, 0.94));
}

.tf-oracle-state[data-state="loading"] {
    border-style: dashed;
}

.tf-oracle-state-kicker {
    margin: 0;
    color: var(--tf-accent-soft);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tf-oracle-answer-text {
    margin-top: 0.875rem;
    color: var(--tf-text);
    font-size: 1rem;
    line-height: 1.85;
    white-space: pre-wrap;
}

.tf-oracle-provenance-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.tf-oracle-provenance-pill {
    display: flex;
    min-height: 2.75rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    border: 1px solid var(--tf-border);
    border-radius: 0.85rem;
    background: rgba(2, 6, 23, 0.82);
    padding: 0.65rem 0.8rem;
}

.tf-oracle-provenance-label {
    color: var(--tf-text-dim);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tf-oracle-provenance-value {
    color: var(--tf-text);
    font-size: 0.85rem;
}

.tf-oracle-thread-item,
.tf-oracle-turn-item,
.tf-oracle-citation-card {
    border: 1px solid var(--tf-border);
    border-radius: 1rem;
    background: rgba(2, 6, 23, 0.74);
    padding: 1rem;
}

.tf-oracle-thread-item {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    text-align: left;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.tf-oracle-thread-item:hover,
.tf-oracle-thread-item:focus-visible {
    border-color: rgba(96, 165, 250, 0.4);
    background: rgba(15, 23, 42, 0.94);
    outline: none;
}

.tf-oracle-thread-item.is-active {
    border-color: rgba(56, 189, 248, 0.42);
    background:
        linear-gradient(135deg, rgba(8, 47, 73, 0.92), rgba(15, 23, 42, 0.92));
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.12);
}

.tf-oracle-thread-title,
.tf-oracle-turn-index {
    margin: 0;
    color: var(--tf-text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tf-oracle-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--tf-border-strong);
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.86);
    color: var(--tf-text-soft);
    font-size: 0.7rem;
    line-height: 1rem;
    padding: 0.3rem 0.6rem;
}

.tf-oracle-citation-card {
    min-height: 100%;
}

@media (min-width: 768px) {
    .tf-oracle-state,
    .tf-oracle-thread-item,
    .tf-oracle-turn-item,
    .tf-oracle-citation-card {
        padding: 1.25rem;
    }
}