From e807e586295db0ae98c07392d1a7ae6ca794635f Mon Sep 17 00:00:00 2001
From: Giorgio Gilestro <giorgio@gilest.ro>
Date: Wed, 27 May 2026 19:19:42 +0200
Subject: [PATCH] ui: fix chat pending class, invented CSS vars, .pf-secondary
 scope
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- chat.js: pending indicator class was wrong (.pending instead of
  chat-msg--pending) so the … waiting message never got italic/dim
- settings.html + cassandra.css: three invented CSS vars (--panel-bg,
  --ok, --surface-1) had hardcoded fallbacks that broke dark mode;
  replaced with real tokens (--surface, --positive)
- cassandra.css: .pf-secondary was scoped to .pf-actions but used
  standalone in 4 places (sync modal, disable-sync, import cancel,
  forget-pie button) — hoisted to a top-level selector

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 app/static/css/cassandra.css | 6 +++---
 app/static/js/chat.js        | 3 ++-
 app/templates/settings.html  | 4 ++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/static/css/cassandra.css b/app/static/css/cassandra.css
index ad3e798..c44a848 100644
--- a/app/static/css/cassandra.css
+++ b/app/static/css/cassandra.css
@@ -593,8 +593,8 @@ table.dense tr.row-stale td { color: var(--dim); }
 }
 .pf-actions button:hover { border-color: var(--accent); }
 .pf-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
-.pf-actions .pf-secondary { color: var(--muted); }
-.pf-actions .pf-secondary:hover { color: var(--negative); border-color: var(--negative); }
+.pf-secondary { color: var(--muted); }
+.pf-secondary:hover { color: var(--negative); border-color: var(--negative); }
 
 /* Settings-page action button — same visual language as .pf-actions
    button so buttons across /settings (Manage subscription, future
@@ -1265,7 +1265,7 @@ details[open] .pf-analysis__head-left::before { content: "▾ "; }
   top: calc(100% + 6px);
   right: 0;
   min-width: 160px;
-  background: var(--surface-1, var(--surface-2));
+  background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 6px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
diff --git a/app/static/js/chat.js b/app/static/js/chat.js
index 0fba827..7224a62 100644
--- a/app/static/js/chat.js
+++ b/app/static/js/chat.js
@@ -37,7 +37,8 @@
     append('user', text);
     input.value = '';
     send.disabled = true;
-    const thinking = append('assistant pending', '…');
+    const thinking = append('assistant', '…');
+    thinking.classList.add('chat-msg--pending');
     try {
       const r = await fetch('/api/chat', {
         method: 'POST',
diff --git a/app/templates/settings.html b/app/templates/settings.html
index a5c59f0..98dccd9 100644
--- a/app/templates/settings.html
+++ b/app/templates/settings.html
@@ -301,7 +301,7 @@
 <div id="sync-modal" class="modal"
      style="position:fixed;inset:0;background:rgba(0,0,0,0.45);
             display:none;align-items:center;justify-content:center;z-index:1000;">
-  <div style="background:var(--panel-bg,#fff);color:var(--text,#000);
+  <div style="background:var(--surface);color:var(--text);
               padding:22px 26px;border-radius:8px;max-width:440px;width:90%;">
     <div class="result__head" id="sync-modal-title" style="margin-bottom:8px;">
       Enable cloud sync
@@ -355,7 +355,7 @@
     const errEl = $('sync-modal-err');
 
     function setFeedback(msg, ok) {
-      feedbackEl.style.color = ok ? 'var(--ok,#2a9d57)' : '';
+      feedbackEl.style.color = ok ? 'var(--positive)' : '';
       feedbackEl.textContent = msg || '';
     }
     // External callers (the Import section above) can pass a callback