Upload style.css

static/css/style.css

@@ -1481,3 +1481,108 @@ audio {
   opacity: 1;
   transform: translateX(-50%) translateY(0);
 }
+
+/* ============================================================
+   12E additions: filter chips, sort toggle, empty states
+   ============================================================ */
+
+/* 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. */
+.filter-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+
+.filter-chip {
+  padding: var(--space-1) var(--space-3);
+  border: 1.5px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface);
+  color: var(--color-text-secondary);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
+}
+
+.filter-chip:hover {
+  border-color: var(--color-primary);
+  color: var(--color-text);
+}
+
+.filter-chip.active {
+  background: var(--color-primary-light);
+  border-color: var(--color-primary);
+  color: var(--color-primary-dark);
+}
+
+.provider .filter-chip:hover {
+  border-color: var(--color-provider-accent);
+}
+
+.provider .filter-chip.active {
+  background: var(--color-provider-accent-light);
+  border-color: var(--color-provider-accent);
+  color: var(--color-provider-accent-text);
+}
+
+.sort-toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-3);
+  border: 1.5px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface);
+  color: var(--color-text-secondary);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  margin-top: var(--space-2);
+  transition: border-color 130ms ease, color 130ms ease;
+}
+
+.sort-toggle-btn:hover {
+  border-color: var(--color-provider-accent);
+  color: var(--color-provider-accent-text);
+}
+
+.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;
+}