Animate device pin collapse and traffic chart updates

src/web/styles/features/devices.css

@@ -672,7 +672,11 @@
 
 .client-device.is-pinned .client-device-traffic-chart {
   transform-origin: bottom center;
-  animation: client-device-chart-expand 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation: client-device-chart-expand 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.client-device.is-pinned .client-device-traffic-chart.is-collapsing {
+  animation-name: client-device-chart-collapse;
 }
 
 .client-device-traffic-axis {
@@ -727,11 +731,6 @@
   vector-effect: non-scaling-stroke;
 }
 
-.client-device-traffic-lines {
-  transform-box: view-box;
-  animation: client-device-traffic-shift 560ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
 .client-device-traffic-lines path,
 .client-device-traffic-lines line {
   fill: none;
@@ -743,30 +742,22 @@
 }
 
 .client-device-traffic-lines .is-proxy {
-  stroke: var(--client-accent);
+  stroke: var(--harbor-word);
+}
+
+.client-device-traffic-lines .is-gateway {
+  stroke: var(--harbor-gateway);
 }
 
 .client-device-traffic-lines .is-download {
-  stroke: var(--client-accent);
+  stroke: var(--harbor-connect);
 }
 
 .client-device-traffic-lines .is-upload {
-  stroke: color-mix(in oklch, var(--client-accent) 42%, var(--client-text));
+  stroke: var(--harbor-gateway);
   stroke-dasharray: 5 4;
 }
 
-.client-device-traffic-lines path.is-new {
-  stroke-dasharray: 1;
-  stroke-dashoffset: 1;
-  animation: client-device-traffic-line-draw 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-.client-device-traffic-lines path.is-new.is-upload {
-  stroke-dasharray: 0.08 0.05;
-  stroke-dashoffset: 0;
-  animation: none;
-}
-
 .client-device-traffic-lines .is-point {
   stroke-width: 3;
   stroke-linecap: round;
@@ -787,15 +778,19 @@
 }
 
 .client-device-traffic-cursor .is-point.is-proxy {
-  stroke: var(--client-accent);
+  stroke: var(--harbor-word);
+}
+
+.client-device-traffic-cursor .is-point.is-gateway {
+  stroke: var(--harbor-gateway);
 }
 
 .client-device-traffic-cursor .is-point.is-download {
-  stroke: var(--client-accent);
+  stroke: var(--harbor-connect);
 }
 
 .client-device-traffic-cursor .is-point.is-upload {
-  stroke: color-mix(in oklch, var(--client-accent) 42%, var(--client-text));
+  stroke: var(--harbor-gateway);
 }
 
 .client-device-traffic-time {
@@ -815,12 +810,17 @@
   width: max-content;
   display: grid;
   gap: 3px;
-  padding: 7px 8px;
-  border-radius: 7px;
-  background: oklch(0.14 0.012 145);
-  box-shadow: 0 8px 24px oklch(0.08 0.015 145 / 0.18);
+  padding: 8px 9px;
+  border-radius: 8px;
+  background: color-mix(in oklch, oklch(0.14 0.012 145) 92%, transparent);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in oklch, var(--client-border) 55%, transparent),
+    0 8px 24px oklch(0.08 0.015 145 / 0.22);
   color: oklch(0.92 0.008 145);
   font: 600 9px/1.25 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font-variant-numeric: tabular-nums;
   white-space: nowrap;
   pointer-events: none;
   animation: client-device-traffic-tooltip-in 140ms cubic-bezier(0.16, 1, 0.3, 1) both;
@@ -837,20 +837,24 @@
 }
 
 .client-device-traffic-point-tooltip .is-proxy {
-  color: var(--client-accent);
+  color: oklch(0.78 0.07 232);
+}
+
+.client-device-traffic-point-tooltip .is-gateway {
+  color: oklch(0.79 0.11 72);
+}
+
+.client-device-traffic-point-tooltip .is-download {
+  color: oklch(0.75 0.1 185);
 }
 
 .client-device-traffic-point-tooltip .is-upload {
-  color: color-mix(in oklch, var(--client-accent) 56%, oklch(0.92 0.008 145));
+  color: oklch(0.79 0.11 72);
 }
 
-@keyframes client-device-traffic-shift {
-  from { opacity: 0.72; transform: translateX(calc(100% / var(--sample-count))); }
-  to { opacity: 1; transform: translateX(0); }
-}
-
-@keyframes client-device-traffic-line-draw {
-  to { stroke-dashoffset: 0; }
+.client-device-traffic-point-tooltip .is-interval,
+.client-device-traffic-point-tooltip .is-direct {
+  color: oklch(0.72 0.012 145);
 }
 
 @keyframes client-device-traffic-tooltip-in {
@@ -870,6 +874,19 @@
   }
 }
 
+@keyframes client-device-chart-collapse {
+  from {
+    opacity: 1;
+    clip-path: inset(0);
+    transform: scaleY(1);
+  }
+  to {
+    opacity: 0.72;
+    clip-path: inset(calc(100% - 34px) 0 0);
+    transform: scaleY(0.48);
+  }
+}
+
 .client-device-policy-wrap {
   grid-column: 4;
   grid-row: 1;
@@ -1030,11 +1047,11 @@
 }
 
 .client-gateway-traffic-speed .is-download {
-  color: var(--client-accent);
+  color: var(--harbor-connect);
 }
 
 .client-gateway-traffic-speed .is-upload {
-  color: color-mix(in oklch, var(--client-accent) 48%, var(--client-text));
+  color: var(--harbor-gateway);
 }
 
 .client-gateway-traffic-chart {

src/web/styles/themes.css

@@ -118,11 +118,6 @@
     stroke-dashoffset: 0;
   }
 
-  .client-device-traffic-lines path.is-new {
-    stroke-dashoffset: 0;
-    animation: none;
-  }
-
   .client-local-rules,
   .client-local-rules-toggle,
   .client-local-rules-toggle svg,