aimeat 3.3.1 → 3.3.2

package/dist/public/css/views/chat.css

@@ -1,388 +1,393 @@
-/**
- * @file chat.css
- * @description Styles for the chat page: the conversation list, the turns, the work log under each
- *   one, and the composer. Two panes on a desktop, one at a time on a phone.
- *
- *   The work log is styled to be read, not hidden. It is the evidence that what the agent said it
- *   did, it did, and folding it away by default would turn the page back into something a person has
- *   to take on trust. All colours and spacing come from theme.css so it flips with the theme.
- *
- *   NOTE: this file must be linked in spa.html (useViewCSS is a no-op).
- * @version-history
- *   v1.1.0 — 2026-08-16 — The recorder beside the send button, and the read-aloud control on a turn.
- *   v1.0.0 — 2026-08-16 — Initial.
- */
-
-/* ── Layout ── */
-.chat-view {
-  display: grid;
-  grid-template-columns: 260px 1fr;
-  gap: 16px;
-  max-width: 1100px;
-  margin: 0 auto;
-  padding: 16px;
-  height: calc(100dvh - 120px);
-  /* Low enough that a short window (a laptop with a docked terminal, 1280x460) still puts the
-     composer on screen. A taller floor pushed it 70px below the fold, and the composer is the one
-     control the page exists for. */
-  min-height: 320px;
-}
-
-.chat-view--signin {
-  display: block;
-  height: auto;
-}
-
-/* ── The conversation list ── */
-.chat-threads {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  min-height: 0;
-  overflow-y: auto;
-  padding-right: 4px;
-}
-
-.chat-new { width: 100%; }
-
-/* The way back out of the list. Only a phone needs it: on a desktop the list and the conversation
-   are both on screen, so there is nothing to go back from. */
-.chat-threads-close { display: none; }
-
-.chat-threads-empty {
-  color: var(--text-muted);
-  font-size: 0.85rem;
-  line-height: 1.5;
-  margin: 0;
-}
-
-.chat-thread-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.chat-thread {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  border-radius: var(--radius-sm);
-}
-
-.chat-thread--active { background: var(--bg-surface); }
-
-.chat-thread-open {
-  flex: 1 1 auto;
-  min-width: 0;
-  text-align: left;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 8px 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  color: inherit;
-  font: inherit;
-}
-
-.chat-thread-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.chat-thread-sub {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-}
-
-.chat-thread-del {
-  flex: 0 0 auto;
-  padding: 4px 8px;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-
-.chat-thread:hover .chat-thread-del,
-.chat-thread--active .chat-thread-del { opacity: 1; }
-
-/* ── The conversation ── */
-.chat-main {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
-}
-
-.chat-head {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.chat-title {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* The list is always visible on a desktop, so its toggle would be a button that does nothing. */
-.chat-list-toggle { display: none; }
-
-.chat-status {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-  padding: 6px 16px;
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-surface);
-}
-
-.chat-status-agent { font-family: var(--font-mono); }
-.chat-status-reset { margin-left: auto; font-size: 0.75rem; padding: 2px 8px; }
-
-.chat-scroll {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
-.chat-welcome {
-  color: var(--text-muted);
-  max-width: 46ch;
-  margin: auto;
-  text-align: center;
-}
-
-.chat-welcome h2 {
-  font-size: 1.1rem;
-  margin: 0 0 6px;
-  color: var(--text-primary);
-}
-
-.chat-welcome p { margin: 0; line-height: 1.6; font-size: 0.9rem; }
-
-/* ── One turn ── */
-.chat-turn {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  max-width: 85%;
-}
-
-.chat-turn--user { align-self: flex-end; align-items: flex-end; }
-.chat-turn--agent { align-self: flex-start; }
-
-.chat-bubble {
-  padding: 10px 14px;
-  border-radius: var(--radius);
-  background: var(--bg-surface);
-  line-height: 1.6;
-  font-size: 0.92rem;
-  overflow-wrap: anywhere;
-}
-
-.chat-turn--user .chat-bubble {
-  background: var(--accent-subtle);
-  border: 1px solid var(--accent-border);
-}
-
-.chat-said { margin: 0; white-space: pre-wrap; }
-
-.chat-thinking {
-  margin: 0;
-  color: var(--text-muted);
-  font-style: italic;
-}
-
-.chat-meta {
-  display: flex;
-  gap: 8px;
-  font-size: 0.7rem;
-  color: var(--text-muted);
-  padding: 0 4px;
-}
-
-.chat-model { font-family: var(--font-mono); }
-
-/* ── The work log ── */
-.chat-work {
-  margin-top: 10px;
-  border-top: 1px solid var(--border-subtle);
-  padding-top: 8px;
-}
-
-.chat-work-head {
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--text-muted);
-  margin-bottom: 4px;
-}
-
-.chat-work-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.chat-work-line {
-  display: flex;
-  gap: 8px;
-  align-items: baseline;
-  font-size: 0.78rem;
-  font-family: var(--font-mono);
-}
-
-.chat-work-status {
-  flex: 0 0 auto;
-  min-width: 68px;
-  color: var(--text-muted);
-}
-
-.chat-work-line--completed .chat-work-status { color: var(--success, var(--text-secondary)); }
-.chat-work-line--failed .chat-work-status { color: var(--accent); }
-
-.chat-work-title {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-/* ── A turn that could not run ── */
-.chat-error {
-  align-self: stretch;
-  border: 1px solid var(--accent-border);
-  background: var(--accent-subtle);
-  border-radius: var(--radius-sm);
-  padding: 10px 14px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.chat-error-msg {
-  margin: 0;
-  flex: 1 1 240px;
-  font-size: 0.85rem;
-  line-height: 1.5;
-}
-
-/* ── The composer ── */
-.chat-composer {
-  border-top: 1px solid var(--border-subtle);
-  padding: 10px 16px;
-  background: var(--bg-card);
-}
-
-.chat-composer-note {
-  margin: 0 0 6px;
-  font-size: 0.78rem;
-  color: var(--text-muted);
-  line-height: 1.5;
-}
-
-.chat-composer-row {
-  display: flex;
-  gap: 8px;
-  align-items: flex-end;
-}
-
-.chat-input {
-  flex: 1 1 auto;
-  min-width: 0;
-  resize: none;
-  max-height: 200px;
-  padding: 10px 12px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--bg-input);
-  color: inherit;
-  font: inherit;
-  font-size: 0.92rem;
-  line-height: 1.5;
-}
-
-.chat-input:focus {
-  outline: none;
-  border-color: var(--border-focus);
-  background: var(--bg-input-focus);
-}
-
-.chat-send { flex: 0 0 auto; }
-.chat-voice { flex: 0 0 auto; }
-
-/* The read-aloud control sits with the timestamp rather than on the bubble: it is about the turn,
-   not part of what was said. */
-.chat-listen { font-size: 0.7rem; padding: 0 6px; }
-
-/* ── Phones ──
-   One pane at a time. The page takes the whole viewport, the shell's sticky nav is hidden (it lives
-   in a higher stacking context, so a z-index here cannot cover it), and the composer sits on the
-   keyboard: --chat-avail is the measured visual-viewport height, with 100dvh as the fallback the
-   viewport meta's interactive-widget=resizes-content already provides. Same pattern as the inbox,
-   which is the surface this one is modelled on. */
-@media (max-width: 760px) {
-  .chat-view {
-    position: fixed;
-    inset: 0;
-    z-index: 1000;
-    grid-template-columns: 1fr;
-    gap: 0;
-    padding: 0;
-    max-width: none;
-    height: var(--chat-avail, 100dvh);
-    background: var(--bg);
-  }
-
-  body:has(.chat-view) { overflow: hidden; }
-  body:has(.chat-view) .topnav { display: none; }
-
-  /* The list is a place you go to, not a column that would leave neither pane readable. */
-  .chat-threads { display: none; }
-  .chat-view--list .chat-threads {
-    display: flex;
-    padding: 12px;
-    background: var(--bg-card);
-  }
-  .chat-view--list .chat-main { display: none; }
-
-  .chat-list-toggle { display: inline-flex; }
-  .chat-threads-close { display: inline-flex; align-self: flex-start; }
-
-  .chat-main {
-    border: none;
-    border-radius: 0;
-    height: 100%;
-  }
-
-  .chat-turn { max-width: 92%; }
-  .chat-scroll { padding: 12px 10px; }
-  .chat-composer {
-    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
-  }
-}
+/**
+ * @file chat.css
+ * @description Styles for the chat page: the conversation list, the turns, the work log under each
+ *   one, and the composer. Two panes on a desktop, one at a time on a phone.
+ *
+ *   The work log is styled to be read, not hidden. It is the evidence that what the agent said it
+ *   did, it did, and folding it away by default would turn the page back into something a person has
+ *   to take on trust. All colours and spacing come from theme.css so it flips with the theme.
+ *
+ *   NOTE: this file must be linked in spa.html (useViewCSS is a no-op).
+ * @version-history
+ *   v1.2.0 — 2026-08-16 — .chat-status-model: which model answered, beside the payer line.
+ *   v1.1.0 — 2026-08-16 — The recorder beside the send button, and the read-aloud control on a turn.
+ *   v1.0.0 — 2026-08-16 — Initial.
+ */
+
+/* ── Layout ── */
+.chat-view {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  gap: 16px;
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 16px;
+  height: calc(100dvh - 120px);
+  /* Low enough that a short window (a laptop with a docked terminal, 1280x460) still puts the
+     composer on screen. A taller floor pushed it 70px below the fold, and the composer is the one
+     control the page exists for. */
+  min-height: 320px;
+}
+
+.chat-view--signin {
+  display: block;
+  height: auto;
+}
+
+/* ── The conversation list ── */
+.chat-threads {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.chat-new { width: 100%; }
+
+/* The way back out of the list. Only a phone needs it: on a desktop the list and the conversation
+   are both on screen, so there is nothing to go back from. */
+.chat-threads-close { display: none; }
+
+.chat-threads-empty {
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.chat-thread-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.chat-thread {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: var(--radius-sm);
+}
+
+.chat-thread--active { background: var(--bg-surface); }
+
+.chat-thread-open {
+  flex: 1 1 auto;
+  min-width: 0;
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  color: inherit;
+  font: inherit;
+}
+
+.chat-thread-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chat-thread-sub {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+.chat-thread-del {
+  flex: 0 0 auto;
+  padding: 4px 8px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.chat-thread:hover .chat-thread-del,
+.chat-thread--active .chat-thread-del { opacity: 1; }
+
+/* ── The conversation ── */
+.chat-main {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.chat-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.chat-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The list is always visible on a desktop, so its toggle would be a button that does nothing. */
+.chat-list-toggle { display: none; }
+
+.chat-status {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 6px 16px;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-surface);
+}
+
+.chat-status-agent { font-family: var(--font-mono); }
+/* The model sits beside the payer line, not in place of it: which model answered and whose money
+   paid are two different questions and a person checking one still needs the other. */
+.chat-status-model { color: var(--text-dim); }
+.chat-status-elsewhere { color: var(--text-dim); }
+.chat-status-reset { margin-left: auto; font-size: 0.75rem; padding: 2px 8px; }
+
+.chat-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.chat-welcome {
+  color: var(--text-muted);
+  max-width: 46ch;
+  margin: auto;
+  text-align: center;
+}
+
+.chat-welcome h2 {
+  font-size: 1.1rem;
+  margin: 0 0 6px;
+  color: var(--text-primary);
+}
+
+.chat-welcome p { margin: 0; line-height: 1.6; font-size: 0.9rem; }
+
+/* ── One turn ── */
+.chat-turn {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  max-width: 85%;
+}
+
+.chat-turn--user { align-self: flex-end; align-items: flex-end; }
+.chat-turn--agent { align-self: flex-start; }
+
+.chat-bubble {
+  padding: 10px 14px;
+  border-radius: var(--radius);
+  background: var(--bg-surface);
+  line-height: 1.6;
+  font-size: 0.92rem;
+  overflow-wrap: anywhere;
+}
+
+.chat-turn--user .chat-bubble {
+  background: var(--accent-subtle);
+  border: 1px solid var(--accent-border);
+}
+
+.chat-said { margin: 0; white-space: pre-wrap; }
+
+.chat-thinking {
+  margin: 0;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.chat-meta {
+  display: flex;
+  gap: 8px;
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  padding: 0 4px;
+}
+
+.chat-model { font-family: var(--font-mono); }
+
+/* ── The work log ── */
+.chat-work {
+  margin-top: 10px;
+  border-top: 1px solid var(--border-subtle);
+  padding-top: 8px;
+}
+
+.chat-work-head {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+}
+
+.chat-work-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.chat-work-line {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  font-size: 0.78rem;
+  font-family: var(--font-mono);
+}
+
+.chat-work-status {
+  flex: 0 0 auto;
+  min-width: 68px;
+  color: var(--text-muted);
+}
+
+.chat-work-line--completed .chat-work-status { color: var(--success, var(--text-secondary)); }
+.chat-work-line--failed .chat-work-status { color: var(--accent); }
+
+.chat-work-title {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/* ── A turn that could not run ── */
+.chat-error {
+  align-self: stretch;
+  border: 1px solid var(--accent-border);
+  background: var(--accent-subtle);
+  border-radius: var(--radius-sm);
+  padding: 10px 14px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.chat-error-msg {
+  margin: 0;
+  flex: 1 1 240px;
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
+
+/* ── The composer ── */
+.chat-composer {
+  border-top: 1px solid var(--border-subtle);
+  padding: 10px 16px;
+  background: var(--bg-card);
+}
+
+.chat-composer-note {
+  margin: 0 0 6px;
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+.chat-composer-row {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+}
+
+.chat-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  resize: none;
+  max-height: 200px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-input);
+  color: inherit;
+  font: inherit;
+  font-size: 0.92rem;
+  line-height: 1.5;
+}
+
+.chat-input:focus {
+  outline: none;
+  border-color: var(--border-focus);
+  background: var(--bg-input-focus);
+}
+
+.chat-send { flex: 0 0 auto; }
+.chat-voice { flex: 0 0 auto; }
+
+/* The read-aloud control sits with the timestamp rather than on the bubble: it is about the turn,
+   not part of what was said. */
+.chat-listen { font-size: 0.7rem; padding: 0 6px; }
+
+/* ── Phones ──
+   One pane at a time. The page takes the whole viewport, the shell's sticky nav is hidden (it lives
+   in a higher stacking context, so a z-index here cannot cover it), and the composer sits on the
+   keyboard: --chat-avail is the measured visual-viewport height, with 100dvh as the fallback the
+   viewport meta's interactive-widget=resizes-content already provides. Same pattern as the inbox,
+   which is the surface this one is modelled on. */
+@media (max-width: 760px) {
+  .chat-view {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    grid-template-columns: 1fr;
+    gap: 0;
+    padding: 0;
+    max-width: none;
+    height: var(--chat-avail, 100dvh);
+    background: var(--bg);
+  }
+
+  body:has(.chat-view) { overflow: hidden; }
+  body:has(.chat-view) .topnav { display: none; }
+
+  /* The list is a place you go to, not a column that would leave neither pane readable. */
+  .chat-threads { display: none; }
+  .chat-view--list .chat-threads {
+    display: flex;
+    padding: 12px;
+    background: var(--bg-card);
+  }
+  .chat-view--list .chat-main { display: none; }
+
+  .chat-list-toggle { display: inline-flex; }
+  .chat-threads-close { display: inline-flex; align-self: flex-start; }
+
+  .chat-main {
+    border: none;
+    border-radius: 0;
+    height: 100%;
+  }
+
+  .chat-turn { max-width: 92%; }
+  .chat-scroll { padding: 12px 10px; }
+  .chat-composer {
+    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
+  }
+}