diff --git a/src/client/app.ts b/src/client/app.ts
index 5cc0fa4..1d67d24 100644
--- a/src/client/app.ts
+++ b/src/client/app.ts
@@ -770,12 +770,14 @@ function updateTimelineBrushOverlay(startX, endX) {
 
   const leftX = clamp(Math.min(startX, endX), 0, width);
   const rightX = clamp(Math.max(startX, endX), 0, width);
+  timelineChart.classList.add("selecting");
   timelineBrush.classList.add("visible");
   timelineBrush.style.left = leftX + "px";
   timelineBrush.style.width = Math.max(1, rightX - leftX) + "px";
 }
 
 function clearTimelineBrushOverlay() {
+  timelineChart.classList.remove("selecting");
   timelineBrush.classList.remove("visible");
   timelineBrush.style.left = "0";
   timelineBrush.style.width = "0";
diff --git a/src/server/app-assets.ts b/src/server/app-assets.ts
index 15bed40..6967ea1 100644
--- a/src/server/app-assets.ts
+++ b/src/server/app-assets.ts
@@ -54,10 +54,10 @@ export const APP_STYLES = `      :root {
         --timeline-axis-color: rgba(148, 163, 184, 0.5);
         --timeline-axis-label: #d1d5db;
         --timeline-meta: rgba(209, 213, 219, 0.72);
-        --timeline-selection-border: rgba(148, 163, 184, 0.34);
-        --timeline-selection-bg: rgba(148, 163, 184, 0.08);
-        --timeline-brush-border: rgba(148, 163, 184, 0.56);
-        --timeline-brush-bg: rgba(148, 163, 184, 0.14);
+        --timeline-selection-border: rgba(191, 219, 254, 0.36);
+        --timeline-selection-bg: rgba(148, 163, 184, 0.16);
+        --timeline-brush-border: rgba(226, 232, 240, 0.68);
+        --timeline-brush-bg: rgba(148, 163, 184, 0.24);
         --chart-grid: rgba(255, 255, 255, 0.05);
         --accent-shadow: rgba(148, 163, 184, 0.18);
         --spinner-track: rgba(125, 211, 252, 0.26);
@@ -114,10 +114,10 @@ export const APP_STYLES = `      :root {
         --timeline-axis-color: rgba(107, 114, 128, 0.52);
         --timeline-axis-label: #303030;
         --timeline-meta: rgba(48, 48, 48, 0.72);
-        --timeline-selection-border: rgba(107, 114, 128, 0.3);
-        --timeline-selection-bg: rgba(107, 114, 128, 0.08);
-        --timeline-brush-border: rgba(107, 114, 128, 0.52);
-        --timeline-brush-bg: rgba(107, 114, 128, 0.12);
+        --timeline-selection-border: rgba(75, 85, 99, 0.42);
+        --timeline-selection-bg: rgba(107, 114, 128, 0.14);
+        --timeline-brush-border: rgba(55, 65, 81, 0.62);
+        --timeline-brush-bg: rgba(107, 114, 128, 0.2);
         --chart-grid: rgba(15, 23, 42, 0.06);
         --accent-shadow: rgba(100, 116, 139, 0.16);
         --spinner-track: rgba(96, 165, 250, 0.22);
@@ -787,6 +787,10 @@ export const APP_STYLES = `      :root {
         box-shadow: none;
       }
 
+      .timeline-chart.selecting {
+        cursor: ew-resize;
+      }
+
       .timeline-selection,
       .timeline-brush {
         position: absolute;
@@ -802,6 +806,7 @@ export const APP_STYLES = `      :root {
       .timeline-selection {
         background: var(--timeline-selection-bg);
         border: 1px solid var(--timeline-selection-border);
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
         z-index: 0;
       }
 
@@ -812,6 +817,7 @@ export const APP_STYLES = `      :root {
       .timeline-brush {
         background: var(--timeline-brush-bg);
         border: 1px solid var(--timeline-brush-border);
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 12px rgba(15, 23, 42, 0.12);
         z-index: 2;
       }
 
@@ -865,6 +871,8 @@ export const APP_STYLES = `      :root {
 
       .timeline-bar.selected .timeline-bar-fill {
         background: var(--timeline-bar-fill-selected);
+        border-color: var(--timeline-border-strong);
+        box-shadow: 0 0 0 1px var(--timeline-selection-border);
       }
 
       .timeline-bar.active .timeline-bar-fill {