Upload style.css

static/css/style.css

@@ -554,7 +554,8 @@ textarea:focus, input[type="text"]:focus {
 }
 
 .history-row-static .timestamp {
-  float: right;
+  float: none;
+  margin-left: auto;
   font-weight: 400;
 }
 
@@ -608,7 +609,7 @@ textarea:focus, input[type="text"]:focus {
 }
 
 .result-text {
-  font-size: var(--text-lg);
+  font-size: var(--text-base);
   color: var(--color-text);
 }
 
@@ -637,7 +638,7 @@ audio {
   padding: var(--space-3) var(--space-4);
   border-radius: var(--radius-sm);
   font-size: var(--text-base);
-  margin-bottom: var(--space-4);
+  margin-bottom: 0;
 }
 
 .nav-link {
@@ -758,6 +759,7 @@ audio {
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  overflow: visible;
   box-shadow: 0 4px 12px rgba(96, 108, 56, 0.35);
   transition: background-color 120ms ease, transform 120ms ease;
 }
@@ -1019,16 +1021,6 @@ audio {
 }
 
 /* One-shot ripple on the inline mic button when tapped */
-.mic-inline-btn {
-  position: absolute;
-  right: 8px;
-  bottom: 8px;
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
-  overflow: visible;
-}
-
 .mic-inline-btn::after {
   content: "";
   position: absolute;
@@ -1483,13 +1475,14 @@ audio {
 }
 
 /* ============================================================
-   12E additions: filter chips, sort toggle, empty states
+   Filter chips (12E), focus rings, disabled states,
+   skip link, sr-only utility, desktop Back-hide (12F)
    ============================================================ */
 
 /* Filter chips — status/language filters above list and history views.
-   Distinct from .chip (symptom/reply quick-select) which uses a pill
-   shape and sits inline in a card. These are tighter, sit in their own
-   row, and have an explicit active/selected state. */
+   Distinct from .chip (symptom/reply quick-select) which uses pill shape
+   and sits inline in a card. These are tighter, sit in their own row,
+   and have an explicit active/selected state. */
 .filter-chip-row {
   display: flex;
   flex-wrap: wrap;
@@ -1521,6 +1514,11 @@ audio {
   color: var(--color-primary-dark);
 }
 
+.filter-chip:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
 .provider .filter-chip:hover {
   border-color: var(--color-provider-accent);
 }
@@ -1531,6 +1529,11 @@ audio {
   color: var(--color-provider-accent-text);
 }
 
+.provider .filter-chip:focus-visible {
+  outline-color: var(--color-provider-accent);
+}
+
+/* Sort toggle button, shown on provider Completed tab only */
 .sort-toggle-btn {
   display: inline-flex;
   align-items: center;
@@ -1553,77 +1556,29 @@ audio {
   color: var(--color-provider-accent-text);
 }
 
+.sort-toggle-btn:focus-visible {
+  outline: 2px solid var(--color-provider-accent);
+  outline-offset: 2px;
+}
+
 .sort-toggle-btn svg {
   width: 14px;
   height: 14px;
   flex-shrink: 0;
 }
 
-/* Empty state: shown when a list is genuinely empty or no results match
-   filters/search. Intentionally minimal — icon, short title, one line. */
-.empty-state {
-  text-align: center;
-  padding: var(--space-7) var(--space-5);
-}
-
-.empty-state-icon {
-  width: 36px;
-  height: 36px;
-  stroke: var(--color-border);
-  margin: 0 auto var(--space-3);
-  display: block;
-}
-
-.empty-state-title {
-  font-size: var(--text-base);
-  font-weight: 600;
-  color: var(--color-text);
-  margin-bottom: var(--space-2);
-}
-
-.empty-state-body {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-  margin: 0;
-}
-
-/* ============================================================
-   12F: Component library pass + accessibility review
-   ============================================================ */
-
-/* ---- Focus rings: every interactive element needs a visible focus
-        indicator for keyboard users. Existing .btn:focus-visible covers
-        primary/secondary/provider buttons. Adding the missing cases. ---- */
-
-.filter-chip:focus-visible {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-}
-
-.provider .filter-chip:focus-visible {
-  outline-color: var(--color-provider-accent);
-}
-
+/* Queue tab and card focus rings */
 .queue-tab:focus-visible {
   outline: 2px solid var(--color-provider-accent);
   outline-offset: 2px;
 }
 
-.sort-toggle-btn:focus-visible {
-  outline: 2px solid var(--color-provider-accent);
-  outline-offset: 2px;
-}
-
-.history-row:focus-visible {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-}
-
 .queue-card:focus-visible {
   outline: 2px solid var(--color-provider-accent);
   outline-offset: 2px;
 }
 
+/* Audio button focus rings */
 .audio-btn:focus-visible {
   outline: 2px solid var(--color-primary-dark);
   outline-offset: 2px;
@@ -1633,9 +1588,7 @@ audio {
   outline-color: var(--color-provider-accent-text);
 }
 
-/* ---- Disabled state for the provider Send button. btn-primary:disabled
-        already exists, this mirrors it for the rust-accent role. ---- */
-
+/* Provider Send button disabled state, mirrors .btn-primary:disabled */
 .btn-provider:disabled {
   background: var(--color-border);
   color: var(--color-text-secondary);
@@ -1643,42 +1596,43 @@ audio {
   cursor: not-allowed;
 }
 
-/* ---- Spinner color inside the provider Send button (explicit, not
-        relying on inheritance from the button's own text color). ---- */
-
+/* Spinner inside the provider Send button */
 .btn-provider .spinner {
   border: 2px solid rgba(255, 255, 255, 0.35);
   border-top-color: #fff;
 }
 
-/* ---- Fix float: right on timestamps inside flex containers.
-        Float is unreliable inside flex/grid parents; push the timestamp
-        to the end of the row with margin-left: auto instead. ---- */
-
-.history-row-static .timestamp {
-  float: none;
-  margin-left: auto;
+/* Empty state: shown when a list is genuinely empty or no results match
+   filters/search. Intentionally minimal — icon, short title, one line. */
+.empty-state {
+  text-align: center;
+  padding: var(--space-7) var(--space-5);
 }
 
-/* ---- Reduce result-text font-size: var(--text-lg) is over-sized for
-        a preview line in a history or result row. Match surrounding text. ---- */
+.empty-state-icon {
+  width: 36px;
+  height: 36px;
+  stroke: var(--color-border);
+  margin: 0 auto var(--space-3);
+  display: block;
+}
 
-.result-text {
+.empty-state-title {
   font-size: var(--text-base);
+  font-weight: 600;
   color: var(--color-text);
+  margin-bottom: var(--space-2);
 }
 
-/* ---- NLU summary: remove the double bottom spacing caused by the
-        card's own padding + the element's margin-bottom. ---- */
-
-.nlu-summary {
-  margin-bottom: 0;
+.empty-state-body {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  margin: 0;
 }
 
-/* ---- Desktop provider: hide Back buttons in the respond pane. On
-        desktop both panes are always visible (two-column layout), so
-        Back makes no sense in either compose or read-only mode. ---- */
-
+/* Desktop provider: hide Back buttons inside the respond pane.
+   On desktop both panes are always visible (two-column grid), so
+   Back belongs to mobile-only one-at-a-time navigation. */
 @media (min-width: 900px) {
   .provider-layout [data-step="respond"] #back-to-list,
   .provider-layout [data-step="respond"] #back-to-list-readonly {
@@ -1686,10 +1640,8 @@ audio {
   }
 }
 
-/* ---- Visually-hidden utility: for screen-reader-only text that should
-        not appear visually but is needed for accessibility context, e.g.
-        adding " (active)" to the selected filter chip label. ---- */
-
+/* Visually-hidden utility: screen-reader-only text, visible to AT
+   but not rendered on screen. */
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1702,10 +1654,8 @@ audio {
   border: 0;
 }
 
-/* ---- Skip link: allows keyboard users to skip past the header and
-        jump directly to the main content. Visually hidden until focused,
-        appears as a small bar at the top of the viewport on Tab. ---- */
-
+/* Skip link: keyboard users can bypass the header and jump to main
+   content. Visually hidden until focused, rises to the top on Tab. */
 .skip-link {
   position: absolute;
   top: -40px;