Improve device traffic chart tooltips

src/web/styles.css

@@ -1230,30 +1230,39 @@ p {
 
 .client-device-traffic-breakdown {
   position: absolute;
-  top: 30px;
+  top: 27px;
   right: 0;
   width: 112px;
   display: grid;
   gap: 2px;
-  padding: 7px 0 6px;
-  background: color-mix(in oklch, var(--client-bg) 98%, var(--client-panel));
-  box-shadow: 0 10px 22px oklch(0.08 0.015 145 / 0.12);
-  opacity: 0;
   visibility: hidden;
-  filter: blur(5px);
   pointer-events: none;
-  transform: translateY(-7px);
-  transform-origin: top center;
-  transition: opacity 220ms ease, filter 300ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 360ms;
+  transition: visibility 0s 420ms;
+}
+
+.client-device-traffic-breakdown > span {
+  opacity: 0;
+  filter: blur(5px);
+  transform: translateY(-12px);
+  transform-origin: top right;
+  transition: opacity 180ms ease, filter 300ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.client-device-traffic-breakdown > span:nth-child(2) {
+  transition-delay: 45ms;
 }
 
 .client-device-traffic:hover .client-device-traffic-breakdown,
 .client-device-traffic:focus .client-device-traffic-breakdown {
-  opacity: 1;
   visibility: visible;
+  transition-delay: 0s;
+}
+
+.client-device-traffic:hover .client-device-traffic-breakdown > span,
+.client-device-traffic:focus .client-device-traffic-breakdown > span {
+  opacity: 1;
   filter: blur(0);
   transform: translateY(0);
-  transition-delay: 0s;
 }
 
 .client-device-traffic b {
@@ -1322,11 +1331,12 @@ p {
 }
 
 .client-device-traffic-chart {
-  grid-column: 2 / 4;
+  grid-column: 2 / 3;
   grid-row: 2;
   height: 42px;
   position: relative;
-  overflow: hidden;
+  z-index: 4;
+  overflow: visible;
 }
 
 .client-device-traffic-chart::after {
@@ -1341,7 +1351,7 @@ p {
 
 .client-device-traffic-track {
   position: absolute;
-  inset: 0 0 14px;
+  inset: 0 3px 14px;
   display: grid;
   grid-template-columns: repeat(var(--sample-count), minmax(1px, 1fr));
   align-items: flex-end;
@@ -1350,38 +1360,111 @@ p {
 }
 
 .client-device-traffic-bar {
+  position: relative;
   min-height: 2px;
+  cursor: help;
+}
+
+.client-device-traffic-time {
+  position: absolute;
+  right: 2px;
+  bottom: 0;
+  left: 2px;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  color: color-mix(in oklch, var(--client-text) 46%, var(--client-muted));
+  font-size: 8.5px;
+  line-height: 10px;
+  text-shadow: 0 1px 5px var(--client-bg);
+}
+
+.client-device-traffic-bar-fill {
+  position: absolute;
+  inset: 0;
   display: flex;
   overflow: hidden;
   border-radius: 2px 2px 0 0;
   flex-direction: column-reverse;
 }
 
-.client-device-traffic-time {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  justify-content: space-between;
-  color: var(--client-muted);
-  font-size: 8px;
-  line-height: 10px;
-}
-
-.client-device-traffic-bar > span {
+.client-device-traffic-bar-fill > span {
   width: 100%;
   display: block;
 }
 
-.client-device-traffic-bar > .is-gateway {
+.client-device-traffic-bar-fill > .is-gateway {
   background: color-mix(in oklch, var(--client-text) 58%, var(--client-muted));
 }
 
-.client-device-traffic-bar > .is-proxy {
+.client-device-traffic-bar-fill > .is-proxy {
   background: var(--client-accent);
 }
 
+.client-device-traffic-bar-tooltip {
+  position: absolute;
+  bottom: calc(100% + 7px);
+  left: 50%;
+  z-index: 20;
+  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);
+  color: oklch(0.92 0.008 145);
+  font: 600 9px/1.25 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  filter: blur(3px);
+  pointer-events: none;
+  transform: translate(-50%, 4px);
+  transition: opacity 100ms ease, filter 140ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 180ms;
+}
+
+.client-device-traffic-bar-tooltip time {
+  color: oklch(0.68 0.012 145);
+  font-size: 8px;
+}
+
+.client-device-traffic-bar-tooltip strong {
+  color: oklch(0.98 0.006 145);
+  font-size: 10px;
+}
+
+.client-device-traffic-bar-tooltip .is-proxy {
+  color: var(--client-accent);
+}
+
+.client-device-traffic-bar:hover .client-device-traffic-bar-tooltip {
+  opacity: 1;
+  visibility: visible;
+  filter: blur(0);
+  transform: translate(-50%, 0);
+  transition-delay: 0s;
+}
+
+.client-device-traffic-bar.is-edge-left .client-device-traffic-bar-tooltip {
+  left: 0;
+  transform: translate(0, 4px);
+}
+
+.client-device-traffic-bar.is-edge-left:hover .client-device-traffic-bar-tooltip {
+  transform: translate(0, 0);
+}
+
+.client-device-traffic-bar.is-edge-right .client-device-traffic-bar-tooltip {
+  right: 0;
+  left: auto;
+  transform: translate(0, 4px);
+}
+
+.client-device-traffic-bar.is-edge-right:hover .client-device-traffic-bar-tooltip {
+  transform: translate(0, 0);
+}
+
 @keyframes client-device-traffic-shift {
   from { opacity: 0.52; transform: translateX(8px); }
   to { opacity: 1; transform: translateX(0); }
@@ -4449,6 +4532,8 @@ p {
   .client-device-name > span,
   .client-device-traffic-value > span,
   .client-device-traffic-breakdown,
+  .client-device-traffic-breakdown > span,
+  .client-device-traffic-bar-tooltip,
   .client-device-traffic-track,
   .client-device-edit,
   .client-device-edit svg,