tokens and more

static/css/styles.css

@@ -2772,6 +2772,110 @@ dialog::backdrop {
   font-size: inherit;
 }
 
+.footer-connection-block {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+:is(.connection-details, .mobile-connection-details) {
+  position: relative;
+}
+
+:is(.connection-details, .mobile-connection-details)>summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--muted-2);
+  cursor: pointer;
+  list-style: none;
+}
+
+:is(.connection-details, .mobile-connection-details)>summary::-webkit-details-marker {
+  display: none;
+}
+
+.connection-details__chevron {
+  font-size: .68rem;
+  transition: transform .16s ease;
+}
+
+.connection-details[open] .connection-details__chevron {
+  transform: rotate(180deg);
+}
+
+.connection-diagnostics-popover {
+  position: absolute;
+  z-index: 55;
+  left: 0;
+  bottom: calc(100% + 9px);
+  width: min(430px, calc(100vw - 24px));
+  padding: 12px;
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  background: var(--surface-card);
+  box-shadow: 0 16px 40px var(--shadow-45);
+  color: var(--text);
+  font-family: inherit;
+  white-space: normal;
+}
+
+.connection-diagnostics-popover>strong {
+  display: block;
+  margin-bottom: 9px;
+  font-size: .78rem;
+}
+
+.connection-diagnostics-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+  margin: 0;
+}
+
+.connection-diagnostics-grid>div {
+  min-width: 0;
+  padding: 7px 8px;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--surface-inset);
+}
+
+.connection-diagnostics-grid__wide {
+  grid-column: 1 / -1;
+}
+
+.connection-diagnostics-grid dt {
+  margin: 0 0 3px;
+  color: var(--muted);
+  font-size: .62rem;
+  font-weight: 700;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+}
+
+.connection-diagnostics-grid dd {
+  overflow-wrap: anywhere;
+  margin: 0;
+  color: var(--text);
+  font-family: inherit;
+  font-size: .7rem;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+:is(.connection-details, .mobile-connection-details):is(.is-quality-excellent, .is-quality-good) [data-connection-diagnostic="quality"] {
+  color: var(--success);
+}
+
+:is(.connection-details, .mobile-connection-details).is-quality-degraded [data-connection-diagnostic="quality"] {
+  color: var(--warning);
+}
+
+:is(.connection-details, .mobile-connection-details).is-quality-poor [data-connection-diagnostic="quality"] {
+  color: var(--danger);
+}
+
 .markdown-more {
   position: relative;
 }
@@ -5160,18 +5264,46 @@ dialog::backdrop {
     align-items: center;
     gap: 5px;
     min-width: 0;
+    min-height: 34px;
     padding: 0 8px 0 4px;
+    border-radius: 999px;
+    background: var(--wash-hover);
     color: var(--muted);
     font-size: .72rem;
     white-space: nowrap;
   }
 
+  .mobile-connection-details {
+    flex: 0 0 auto;
+  }
+
+  .mobile-connection-details[open]>.mobile-connection-status {
+    background: color-mix(in srgb, var(--accent) 24%, var(--wash-hover));
+  }
+
   .mobile-connection-status #mobile-status-text {
     max-width: 92px;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
+  #mobile-socket-latency {
+    color: var(--muted-2);
+    font-size: .66rem;
+  }
+
+  .mobile-connection-diagnostics-popover {
+    position: fixed;
+    right: 12px;
+    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
+    left: auto;
+    width: min(430px, calc(100vw - 24px));
+    max-height: calc(100dvh - 88px);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+  }
+
   .pad-page .toast {
     bottom: calc(62px + env(safe-area-inset-bottom, 0px));
   }
@@ -5303,7 +5435,7 @@ dialog::backdrop {
 
 @media (max-width: 720px) {
   .editor-column-label {
-    align-items: flex-start;
+    align-items: center;
   }
 
   .authorship-mode-control button {
@@ -6154,6 +6286,7 @@ dialog::backdrop {
 .pad-page .participant-badges:empty {
   display: none;
 }
+
 /* Unified RustPad resource identity used by notes and workspaces. */
 .resource-brand {
   display: grid;
@@ -6222,4 +6355,4 @@ dialog::backdrop {
     padding-left: 0;
     font-size: .68rem;
   }
-}
+}