diff --git a/docs/client/architecture.md b/docs/client/architecture.md
index a573884..e4fbe48 100644
--- a/docs/client/architecture.md
+++ b/docs/client/architecture.md
@@ -57,7 +57,8 @@ audio. It is not an unconditional byte-for-byte tunnel.
 | [client.ts](../../vocero-frontend/src/realtime/client.ts) | Realtime protocol, session lifecycle, audio and transcript events |
 | [components](../../vocero-frontend/src/components) | Chat, caller profile, settings and voice components |
 | [audio](../../vocero-frontend/src/audio) | TypeScript capture/playback worklets, PCM codec, and visualizer |
-| [legacy-theme.css](../../vocero-frontend/src/styles/legacy-theme.css) | Retained themes and responsive visual styles alongside Tailwind |
+| [legacy-theme.css](../../vocero-frontend/src/styles/legacy-theme.css) | Theme tokens, voice artwork and component appearance |
+| [layout.css](../../vocero-frontend/src/styles/layout.css) | Shared responsive layout, transcript sizing and reduced-motion behavior |
 
 ## Server routes
 
@@ -95,6 +96,12 @@ describe service-owned structure and retain loose upstream values. See
 4. Assistant PCM16 audio at the current 16 kHz protocol rate is decoded and sent to
    [audio-playback.worklet.ts](../../vocero-frontend/src/audio/audio-playback.worklet.ts), which buffers,
    resamples and fades playback edges. Input speech can clear playback for barge-in.
+   The client flushes short final chunks on response completion and remains in
+   the speaking state until the worklet reports that playback has drained.
+   Sequence numbers reject drain notifications from superseded playback.
+
+Microphone meter subscribers are separate from application-state subscribers,
+so level updates do not rerender the main React tree.
 
 Audio worklets are loaded through `AudioWorklet.addModule`; keep their processor
 registration structure intact when editing them. The speech backend's thread
@@ -105,6 +112,8 @@ and cancellation model is documented in [realtime API](../speech/realtime-api.md
 The browser triggers external reasoning on completed user transcripts only in
 `OPENAI` mode. A non-empty answer replaces the native response through the
 external-answer path. These HTTP operations supplement the realtime audio path.
+New user speech and session teardown cancel pending reasoning. Turn identity
+checks reject stale HTTP results and speech callbacks even if cancellation is late.
 
 Read [reasoning](reasoning.md), [context injection](context-injection.md), and
 [tool calling](tool-calling.md) for the conditions and limitations of each path.
diff --git a/docs/client/usage.md b/docs/client/usage.md
index 12764ef..b7095ad 100644
--- a/docs/client/usage.md
+++ b/docs/client/usage.md
@@ -117,6 +117,10 @@ browsable pages.
 Voice, editable system instructions and connection settings are kept in browser
 `localStorage` under `s2s.ws.*` keys. A non-empty `S2S_PRIMARY_PROMPT` pins the
 instruction field. Restart applies connection/voice changes to a new session.
+Settings and tool preferences use a draft: **Guardar** applies them and
+**Cancelar** or dialog dismissal discards unsaved edits. Voice and instructions
+update the live session on Save; connection changes apply on the next start.
+Noise-gate calibration is explicitly live and saves immediately.
 Model voice names are runtime identifiers and stay unchanged across UI
 translations.
 
@@ -135,19 +139,33 @@ enabled data sources and limits.
 `S2S_THEME=white` selects the light interface. `dark` or an empty value selects
 the dark aurora theme. Theme-specific sections remain hidden until configuration
 resolves, with a fallback to avoid an invisible page after config failure.
+Configuration failures offer **Reintentar** and block session startup until a
+retry succeeds. Reports load independently. Caller context gets an eight-second
+loading window before the interface allows a generic session.
 
 `S2S_START_SESSION_MODE` controls initial microphone/session startup:
 
 | Value | Behavior |
 |---|---|
 | Empty/default | User taps to start |
-| `TALK` | After a 2-second warmup, show an audio unlocker; a user gesture starts the session and greeting |
-| `TALKFIRST` | After a 2-second warmup, attempt automatic start and inject the Spanish wake phrase; microphone failure falls back to the unlocker |
+| `TALK` | After a 2-second warmup, show a dismissible startup dialog; a user gesture starts the session and greeting |
+| `TALKFIRST` | After a 2-second warmup, attempt automatic start and inject the Spanish wake phrase; microphone failure falls back to the startup dialog |
 
-The warmup is a timer, not proof that all upstream context requests have
-finished. Browser permission and audio policies can still require a gesture.
+The warmup starts after configuration and caller-context loading settle;
+optional reports and tools can still be loading. Browser permission and audio
+policies can still require a gesture.
 The greeting uses the same `hola vocero` input as wake-word handling.
 
+On browsers with speech recognition, **Activar con «hola vocero»** opts into
+wake-word listening for the current page session. The interface shows when the
+microphone is listening for that phrase. It is off by default, pauses while a
+dialog or voice session is active, and turns off when the conversation stops.
+
+The transcript keeps your reading position when new messages arrive. **Ir al
+último mensaje** resumes following the conversation. Names and Santiago-local
+times appear with each message; downloaded JSON and text retain raw timestamps
+and message text. The interface respects the browser's reduced-motion setting.
+
 ## Queue and session lifecycle
 
 Load-balancer mode proxies `POST /api/session`. A free compute slot returns a
@@ -161,8 +179,9 @@ to a keepalive fetch. Expired tickets and missed join deadlines require a new
 attempt. Full queues return `503` with `state: "at_capacity"`.
 
 Once connected, session teardown closes the microphone, audio graph and
-WebSocket. The 30-second inactivity timeout remains active when the assistant
-is not speaking. Caller-profile lookup and upstream authorization operate
+WebSocket. The 30-second inactivity timeout counts time waiting for user input;
+processing, external reasoning and buffered playback do not consume it.
+Caller-profile lookup and upstream authorization operate
 independently of allocation and use their existing configured endpoints.
 
 For external transcript processing, configure the selected
diff --git a/vocero-api/CHANGELOG.md b/vocero-api/CHANGELOG.md
index 6f994e3..376e5d8 100644
--- a/vocero-api/CHANGELOG.md
+++ b/vocero-api/CHANGELOG.md
@@ -9,6 +9,11 @@ the implementation at the recorded date; current operating instructions live in
 
 ### Fixed
 
+- Consolidate responsive transcript layout, keep export controls visible on narrow screens,
+  and place feedback and version details below the conversation. Add jump-to-latest,
+  semantic message metadata, state-aware empty hints, shared sanitized Markdown rendering,
+  and reduced-motion support. Remove retired camera, account, and overlay styles.
+
 - Use native dialogs for startup and mobile reports, restore focus on dismissal,
   and make duplicate transcript bubbles inert. Require explicit wake-word opt-in,
   show when it is listening, and turn it off when the conversation stops.
diff --git a/vocero-frontend/src/App.tsx b/vocero-frontend/src/App.tsx
index 4333978..4df3617 100644
--- a/vocero-frontend/src/App.tsx
+++ b/vocero-frontend/src/App.tsx
@@ -208,11 +208,6 @@ export default function App() {
             </div>
           )}
         </header>
-        <nav className="feedback-navigation" aria-label="Comentarios">
-          <a className="feedback-link" href="https://tally.so/r/pb8LWq" target="_blank" rel="noopener noreferrer">
-            Enviar comentarios
-          </a>
-        </nav>
         {state.error && (
           <div className="app-error" role="alert">
             <span>{state.error}</span>
@@ -229,10 +224,16 @@ export default function App() {
           </div>
         )}
         <VoiceStage state={state} controller={controller} />
-        {ready && !ACTIVE_STATES.has(state.status) && !modal && !state.unlock && !reportsOpen && (
+        {ready && !ACTIVE_STATES.has(state.status) && !modal && !state.unlock && !(reportsOpen && !desktop) && (
           <WakeWordControl enabled={state.wakeWordEnabled} controller={controller} />
         )}
-        <Conversation messages={state.messages} userName={name || "Usuario"} status={state.status} white={white} />
+        <Conversation
+          messages={state.messages}
+          userName={name || "Usuario"}
+          status={state.status}
+          white={white}
+          muted={state.muted}
+        />
       </div>
       {!white && ACTIVE_STATES.has(state.status) && <Bubbles messages={state.messages} userName={name || "Usuario"} />}
       {hasReports && state.reports && (
@@ -250,7 +251,10 @@ export default function App() {
       {modal === "rag" && <RagDialog state={state} controller={controller} onClose={close} />}
       {modal === "profile" && <ProfileDialog state={state} onClose={close} />}
       {modal === "about" && <AboutDialog onClose={close} />}
-      <footer className="app-footer" aria-label="Versión de la aplicación">
+      <footer className="app-footer" aria-label="Información de la aplicación">
+        <a className="feedback-link" href="https://tally.so/r/pb8LWq" target="_blank" rel="noopener noreferrer">
+          Enviar comentarios
+        </a>
         <span className="app-footer-text">Azurian Vocero en tiempo real ver. Beta 2.1</span>
       </footer>
     </>
diff --git a/vocero-frontend/src/components/AssistantMarkdown.tsx b/vocero-frontend/src/components/AssistantMarkdown.tsx
new file mode 100644
index 0000000..42fe834
--- /dev/null
+++ b/vocero-frontend/src/components/AssistantMarkdown.tsx
@@ -0,0 +1,14 @@
+import { memo, useMemo } from "react";
+
+import { renderMarkdown } from "../lib/messages";
+
+export const AssistantMarkdown = memo(function AssistantMarkdown({
+  text,
+  className = "",
+}: {
+  text: string;
+  className?: string;
+}) {
+  const html = useMemo(() => renderMarkdown(text), [text]);
+  return <div className={`markdown-content ${className}`} dangerouslySetInnerHTML={{ __html: html }} />;
+});
diff --git a/vocero-frontend/src/components/Bubbles.tsx b/vocero-frontend/src/components/Bubbles.tsx
index 2154406..e078752 100644
--- a/vocero-frontend/src/components/Bubbles.tsx
+++ b/vocero-frontend/src/components/Bubbles.tsx
@@ -1,6 +1,7 @@
 import { memo, useEffect, useState } from "react";
 
-import { renderMarkdown, type Message } from "../lib/messages";
+import type { Message } from "../lib/messages";
+import { AssistantMarkdown } from "./AssistantMarkdown";
 
 function Bubble({ message, userName }: { message: Message; userName: string }) {
   const [expiredText, setExpiredText] = useState<string | null>(null);
@@ -24,10 +25,7 @@ function Bubble({ message, userName }: { message: Message; userName: string }) {
         {message.role === "user" ? userName : message.role === "tool" ? "Herramienta" : "Vocero"}
       </div>
       {message.role === "assistant" ? (
-        <div
-          className="bubble-body markdown-content"
-          dangerouslySetInnerHTML={{ __html: renderMarkdown(message.text) }}
-        />
+        <AssistantMarkdown text={message.text} className="bubble-body" />
       ) : (
         <div className="bubble-body">{message.role === "tool" ? message.toolName : message.text}</div>
       )}
diff --git a/vocero-frontend/src/components/Conversation.test.tsx b/vocero-frontend/src/components/Conversation.test.tsx
new file mode 100644
index 0000000..bdc6284
--- /dev/null
+++ b/vocero-frontend/src/components/Conversation.test.tsx
@@ -0,0 +1,48 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { expect, it } from "vitest";
+
+import type { Message } from "../lib/messages";
+import { Conversation } from "./Conversation";
+
+const message: Message = {
+  id: "1",
+  role: "assistant",
+  text: "Una respuesta con [enlace](https://example.test)",
+  timestamp: "2026-10-07T12:00:00Z",
+  partial: false,
+};
+it("renders accessible names, a real timestamp, and sanitized assistant content", () => {
+  render(<Conversation messages={[message]} userName="Ana" status="listening" white muted={false} />);
+  expect(screen.getByText("Vocero")).toBeVisible();
+  expect(screen.getByText(/^09:00/).closest("time")).toHaveAttribute("datetime", message.timestamp);
+  expect(screen.getByRole("link", { name: "enlace" })).toHaveAttribute("rel", "noopener noreferrer");
+});
+it("preserves a reader's scroll position during updates and offers a jump to the latest message", async () => {
+  const user = userEvent.setup();
+  const view = render(<Conversation messages={[message]} userName="Ana" status="listening" white muted={false} />);
+  const history = screen.getByRole("log");
+  Object.defineProperties(history, { scrollHeight: { configurable: true, value: 1000 }, clientHeight: { value: 200 } });
+  history.scrollTop = 200;
+  fireEvent.scroll(history);
+  view.rerender(
+    <Conversation
+      messages={[message, { ...message, id: "2", text: "Nueva respuesta" }]}
+      userName="Ana"
+      status="listening"
+      white
+      muted={false}
+    />,
+  );
+  expect(history.scrollTop).toBe(200);
+  await user.click(screen.getByRole("button", { name: "Ir al último mensaje" }));
+  expect(history.scrollTop).toBe(1000);
+  expect(history).toHaveFocus();
+  expect(screen.queryByRole("button", { name: "Ir al último mensaje" })).not.toBeInTheDocument();
+});
+it("gives useful empty-state instructions during a live session and when muted", () => {
+  const view = render(<Conversation messages={[]} userName="Ana" status="listening" white muted={false} />);
+  expect(screen.getByText("Habla cuando quieras. Tu conversación aparecerá aquí.")).toBeVisible();
+  view.rerender(<Conversation messages={[]} userName="Ana" status="listening" white muted />);
+  expect(screen.getByText("Activa el micrófono para hablar")).toBeVisible();
+});
diff --git a/vocero-frontend/src/components/Conversation.tsx b/vocero-frontend/src/components/Conversation.tsx
index 2cd02ba..7cdb560 100644
--- a/vocero-frontend/src/components/Conversation.tsx
+++ b/vocero-frontend/src/components/Conversation.tsx
@@ -1,10 +1,11 @@
-import { Download, MessageCircle, Wrench } from "lucide-react";
+import { ArrowDown, Download, MessageCircle, Wrench } from "lucide-react";
 import { memo, useEffect, useRef, useState } from "react";
 
 import { initials } from "../lib/context";
 import type { ConnectionStatus } from "../lib/contracts";
-import { displayTime, exportConversation, renderMarkdown, type Message } from "../lib/messages";
+import { displayTime, exportConversation, type Message } from "../lib/messages";
 import { LIVE_STATES } from "../realtime/controller";
+import { AssistantMarkdown } from "./AssistantMarkdown";
 
 const MessageRow = memo(function MessageRow({ message, userName }: { message: Message; userName: string }) {
   const [expanded, setExpanded] = useState(false);
@@ -33,25 +34,19 @@ const MessageRow = memo(function MessageRow({ message, userName }: { message: Me
       </div>
     );
   }
-  const data = {
-    "data-user-name": userName,
-    "data-user-initials": initials(userName),
-    "data-asst-name": "Vocero",
-    "data-timestamp": time,
-  };
   return (
-    <div className={`hist-msg ${message.role} ${message.interrupted ? "interrupted" : ""}`} {...data}>
-      <div className="hist-role">{message.role === "user" ? userName : "Vocero"}</div>
+    <div
+      className={`hist-msg ${message.role} ${message.interrupted ? "interrupted" : ""}`}
+      data-user-initials={initials(userName)}
+    >
+      <div className="hist-meta">
+        <span>{message.role === "user" ? userName : "Vocero"}</span>
+        <time dateTime={message.timestamp}>{time}</time>
+      </div>
       {message.role === "assistant" ? (
-        <div
-          className={`hist-body markdown-content ${message.partial ? "partial" : ""}`}
-          {...data}
-          dangerouslySetInnerHTML={{ __html: renderMarkdown(message.text) }}
-        />
+        <AssistantMarkdown text={message.text} className={`hist-body ${message.partial ? "partial" : ""}`} />
       ) : (
-        <div className={`hist-body ${message.partial ? "partial" : ""}`} {...data}>
-          {message.text}
-        </div>
+        <div className={`hist-body ${message.partial ? "partial" : ""}`}>{message.text}</div>
       )}
       {message.interrupted && <div className="hist-note">Interrumpido</div>}
     </div>
@@ -62,14 +57,17 @@ export const Conversation = memo(function Conversation({
   userName,
   status,
   white,
+  muted,
 }: {
   messages: Message[];
   userName: string;
   status: ConnectionStatus;
   white: boolean;
+  muted: boolean;
 }) {
   const history = useRef<HTMLDivElement>(null);
   const atBottom = useRef(true);
+  const [showLatest, setShowLatest] = useState(false);
   useEffect(() => {
     const element = history.current;
     if (element && atBottom.current) {
@@ -115,12 +113,15 @@ export const Conversation = memo(function Conversation({
           id="chat-history"
           className="chat-history"
           role="log"
+          tabIndex={0}
+          aria-label="Mensajes de la conversación"
           aria-live="polite"
           aria-atomic="false"
           onScroll={() => {
             const element = history.current;
             if (element) {
               atBottom.current = element.scrollHeight - element.scrollTop - element.clientHeight < 60;
+              setShowLatest(!atBottom.current);
             }
           }}
         >
@@ -130,10 +131,35 @@ export const Conversation = memo(function Conversation({
             <div className="chat-empty">
               <MessageCircle aria-hidden="true" />
               <span className="chat-empty-title">Aún no hay mensajes</span>
-              <span className="chat-empty-hint">Toca el círculo y empieza a hablar</span>
+              <span className="chat-empty-hint">
+                {muted
+                  ? "Activa el micrófono para hablar"
+                  : live
+                    ? "Habla cuando quieras. Tu conversación aparecerá aquí."
+                    : waiting
+                      ? "Tu conversación aparecerá aquí al conectar."
+                      : "Toca el círculo y empieza a hablar"}
+              </span>
             </div>
           )}
         </div>
+        {showLatest && (
+          <button
+            className="jump-to-latest btn secondary"
+            type="button"
+            onClick={() => {
+              if (history.current) {
+                history.current.scrollTop = history.current.scrollHeight;
+              }
+              atBottom.current = true;
+              setShowLatest(false);
+              history.current?.focus({ preventScroll: true });
+            }}
+          >
+            <ArrowDown size={16} aria-hidden="true" />
+            Ir al último mensaje
+          </button>
+        )}
       </div>
     </section>
   );
diff --git a/vocero-frontend/src/components/ReportsPanel.tsx b/vocero-frontend/src/components/ReportsPanel.tsx
index 72d1370..97fa424 100644
--- a/vocero-frontend/src/components/ReportsPanel.tsx
+++ b/vocero-frontend/src/components/ReportsPanel.tsx
@@ -3,6 +3,7 @@ import { reportSuggestions } from "../lib/reports";
 import { Dialog } from "./Dialog";
 
 function ReportContent({ reports }: { reports: Reports }) {
+  const suggestions = reportSuggestions(reports);
   return (
     <div className="reports-content">
       <div className="reports-hint">
@@ -14,14 +15,16 @@ function ReportContent({ reports }: { reports: Reports }) {
         </ul>
         {reports.note && <p>{reports.note}</p>}
       </div>
-      <div className="reports-suggestions">
-        <h3 className="reports-suggestions-title">Puedes preguntar</h3>
-        <ul className="reports-suggestions-list">
-          {reportSuggestions(reports).map((suggestion) => (
-            <li key={suggestion}>{suggestion}</li>
-          ))}
-        </ul>
-      </div>
+      {suggestions.length > 0 && (
+        <div className="reports-suggestions">
+          <h3 className="reports-suggestions-title">Puedes preguntar</h3>
+          <ul className="reports-suggestions-list">
+            {suggestions.map((suggestion) => (
+              <li key={suggestion}>{suggestion}</li>
+            ))}
+          </ul>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/vocero-frontend/src/components/WakeWordControl.test.tsx b/vocero-frontend/src/components/WakeWordControl.test.tsx
index b2449a2..81ee642 100644
--- a/vocero-frontend/src/components/WakeWordControl.test.tsx
+++ b/vocero-frontend/src/components/WakeWordControl.test.tsx
@@ -15,9 +15,7 @@ class Recognition {
   onend: (() => void) | null = null;
   onerror = null;
   onresult = null;
-  start = vi.fn(() => {
-    this.onstart?.();
-  });
+  start = vi.fn();
   abort = vi.fn();
   constructor() {
     Recognition.instances.push(this);
@@ -39,11 +37,19 @@ it("requires opt-in, displays actual listening, and releases recognition on Stop
   expect(Recognition.instances).toHaveLength(0);
   await user.click(screen.getByRole("checkbox"));
   expect(Recognition.instances).toHaveLength(1);
+  expect(screen.getByRole("status")).toHaveTextContent("Preparando activación");
+  act(() => {
+    Recognition.instances[0]?.onstart?.();
+  });
   expect(screen.getByRole("status")).toHaveTextContent("Micrófono activo");
+  await user.click(screen.getByRole("checkbox"));
+  await user.click(screen.getByRole("checkbox"));
+  expect(screen.getByRole("status")).toHaveTextContent("Preparando activación");
   await act(async () => {
     await controller.stop();
   });
   expect(Recognition.instances[0]?.abort).toHaveBeenCalledOnce();
+  expect(Recognition.instances[1]?.abort).toHaveBeenCalledOnce();
   expect(screen.getByRole("checkbox")).not.toBeChecked();
-  expect(Recognition.instances).toHaveLength(1);
+  expect(Recognition.instances).toHaveLength(2);
 });
diff --git a/vocero-frontend/src/components/WakeWordControl.tsx b/vocero-frontend/src/components/WakeWordControl.tsx
index f75a28d..81639f4 100644
--- a/vocero-frontend/src/components/WakeWordControl.tsx
+++ b/vocero-frontend/src/components/WakeWordControl.tsx
@@ -1,9 +1,20 @@
 import { useWakeWord } from "../hooks/use-wake-word";
 import type { VoiceController } from "../realtime/controller";
 
+function WakeWordStatus({ controller }: { controller: VoiceController }) {
+  const status = useWakeWord(true, controller);
+  return (
+    <span role="status">
+      {status === "listening"
+        ? "Micrófono activo: escuchando la frase de activación."
+        : status === "blocked"
+          ? "No se pudo activar. Revisa el permiso del micrófono y vuelve a marcar la opción."
+          : "Preparando activación por voz…"}
+    </span>
+  );
+}
 export function WakeWordControl({ enabled, controller }: { enabled: boolean; controller: VoiceController }) {
-  const status = useWakeWord(enabled, controller);
-  if (status === "unsupported") {
+  if (!(window.SpeechRecognition ?? window.webkitSpeechRecognition)) {
     return null;
   }
   return (
@@ -18,15 +29,11 @@ export function WakeWordControl({ enabled, controller }: { enabled: boolean; con
         />
         Activar con «hola vocero»
       </label>
-      <span role="status">
-        {status === "listening"
-          ? "Micrófono activo: escuchando la frase de activación."
-          : status === "blocked"
-            ? "No se pudo activar. Revisa el permiso del micrófono y vuelve a marcar la opción."
-            : status === "starting"
-              ? "Preparando activación por voz…"
-              : "Opcional. Se desactiva al detener la conversación."}
-      </span>
+      {enabled ? (
+        <WakeWordStatus controller={controller} />
+      ) : (
+        <span role="status">Opcional. Se desactiva al detener la conversación.</span>
+      )}
     </div>
   );
 }
diff --git a/vocero-frontend/src/lib/messages.test.ts b/vocero-frontend/src/lib/messages.test.ts
index 198ffc1..9d44d59 100644
--- a/vocero-frontend/src/lib/messages.test.ts
+++ b/vocero-frontend/src/lib/messages.test.ts
@@ -11,7 +11,7 @@ describe("assistant Markdown and export", () => {
     container.innerHTML = html;
     expect(container.querySelector("h2")?.textContent).toBe("Resumen");
     expect(container.querySelector("strong")?.textContent).toBe("Bien");
-    expect(container.querySelector("[role='region']")?.getAttribute("tabindex")).toBe("0");
+    expect(container.querySelector("[role='group']")?.getAttribute("tabindex")).toBe("0");
     expect(container.querySelector("script")).toBeNull();
     expect(container.querySelector("[href^='javascript:']")).toBeNull();
     expect(container.querySelector("a")?.getAttribute("rel")).toBe("noopener noreferrer");
diff --git a/vocero-frontend/src/lib/messages.ts b/vocero-frontend/src/lib/messages.ts
index e1424b8..a9b19c6 100644
--- a/vocero-frontend/src/lib/messages.ts
+++ b/vocero-frontend/src/lib/messages.ts
@@ -81,7 +81,7 @@ export function renderMarkdown(text: string): string {
       const wrapper = document.createElement("div");
       wrapper.className = "markdown-table";
       wrapper.tabIndex = 0;
-      wrapper.setAttribute("role", "region");
+      wrapper.setAttribute("role", "group");
       wrapper.setAttribute("aria-label", "Tabla de la respuesta");
       table.replaceWith(wrapper);
       wrapper.append(table);
diff --git a/vocero-frontend/src/styles.css b/vocero-frontend/src/styles.css
index d3b75ef..9c5b8e0 100644
--- a/vocero-frontend/src/styles.css
+++ b/vocero-frontend/src/styles.css
@@ -1,6 +1,7 @@
 @layer theme, base, components, utilities;
 @import "tailwindcss/theme.css" layer(theme);
 @import "./styles/legacy-theme.css" layer(components);
+@import "./styles/layout.css" layer(components);
 @import "tailwindcss/utilities.css" layer(utilities);
 
 @layer components {
@@ -13,10 +14,6 @@
   html[data-theme="white"] .chat-empty-hint {
     color: #64748b;
   }
-  .feedback-navigation {
-    align-self: flex-end;
-    display: flex;
-  }
   #root {
     display: contents;
   }
@@ -35,9 +32,6 @@
   html[data-theme="white"] .white-mic-circle svg.wmc-mic {
     fill: none;
   }
-  #app:not(.has-reports) {
-    padding-left: 0;
-  }
   .loading-screen {
     position: fixed;
     inset: 0;
diff --git a/vocero-frontend/src/styles/layout.css b/vocero-frontend/src/styles/layout.css
new file mode 100644
index 0000000..ea223b0
--- /dev/null
+++ b/vocero-frontend/src/styles/layout.css
@@ -0,0 +1,298 @@
+/* Shared layout. Theme colors and voice artwork remain in legacy-theme.css. */
+body {
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  min-height: 100dvh;
+  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
+}
+#app {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+}
+.stage,
+html[data-theme="white"] .stage {
+  padding: 12px 12px 8px;
+  gap: 12px;
+  flex: none;
+}
+.chat-panel {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+  height: clamp(240px, 45dvh, 640px);
+  min-width: 0;
+  margin: 8px 12px 0;
+}
+.circle-caption {
+  color: var(--text-dim);
+}
+.chat-panel-inner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  max-width: 920px;
+  margin-inline: auto;
+  padding: 12px;
+  overflow: hidden;
+}
+.chat-panel-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 0 10px;
+  flex: none;
+}
+.chat-panel-header h2 {
+  min-width: 0;
+}
+.chat-header-actions,
+html[data-theme="white"] .chat-header-actions {
+  gap: 6px;
+}
+.chat-export-btn {
+  width: 40px;
+  height: 40px;
+}
+.chat-history {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  gap: 14px;
+  padding: 12px 4px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overflow-anchor: none;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+.chat-history:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+  border-radius: 8px;
+}
+.hist-msg {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 6px;
+  max-width: 86%;
+  min-width: 0;
+  position: relative;
+}
+.hist-msg.user {
+  align-self: flex-start;
+  margin-right: auto;
+}
+.hist-msg.assistant {
+  align-self: flex-end;
+  margin-left: auto;
+}
+.hist-msg.tool {
+  align-self: flex-start;
+  max-width: 100%;
+}
+.hist-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 10px;
+  color: var(--text-dim);
+  font-size: 12px;
+}
+.hist-meta span {
+  overflow-wrap: anywhere;
+  font-weight: 600;
+}
+.hist-meta time {
+  white-space: nowrap;
+}
+.hist-body {
+  min-width: 0;
+}
+.hist-body:not(.markdown-content) {
+  white-space: pre-wrap;
+}
+.jump-to-latest {
+  display: inline-flex;
+  align-items: center;
+  position: absolute;
+  bottom: 18px;
+  right: 18px;
+  z-index: 2;
+  gap: 6px;
+  box-shadow: var(--shadow-soft);
+}
+html[data-theme="white"] .chat-panel {
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  box-shadow: var(--shadow-soft);
+}
+html[data-theme="white"] .chat-panel-header {
+  border-bottom: 1px solid var(--border);
+}
+html[data-theme="white"] .chat-history .hist-msg {
+  max-width: calc(100% - 40px);
+  padding-top: 0;
+}
+html[data-theme="white"] .chat-history .hist-msg.assistant {
+  align-self: flex-start;
+  margin: 4px auto 4px 40px;
+}
+html[data-theme="white"] .chat-history .hist-msg.user {
+  align-self: flex-end;
+  margin: 4px 40px 4px auto;
+}
+html[data-theme="white"] .chat-history .hist-msg.tool {
+  max-width: 100%;
+  margin: 4px 0;
+}
+html[data-theme="white"] .chat-history .hist-msg::before {
+  width: 28px;
+  height: 28px;
+  font-size: 11px;
+}
+html[data-theme="white"] .hist-meta {
+  color: #64748b;
+}
+html[data-theme="white"] .hist-msg.user .hist-meta {
+  justify-content: flex-end;
+}
+.app-footer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 12px max(12px, env(safe-area-inset-bottom));
+  flex: none;
+  text-align: center;
+}
+.feedback-link {
+  font-size: 13px;
+  color: var(--text-dim);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  border: 0;
+  padding: 4px;
+}
+.feedback-link:hover {
+  color: var(--text);
+}
+.feedback-link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+  border-radius: 4px;
+}
+@media (min-width: 1024px) {
+  #app.has-reports {
+    padding-left: 320px;
+  }
+  body:has(#app.has-reports) .app-footer {
+    margin-left: 320px;
+  }
+}
+@media (max-width: 600px) {
+  .topbar {
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+  .topbar-right {
+    flex-wrap: wrap;
+  }
+  .chat-panel {
+    margin-inline: 0;
+  }
+  .chat-panel-inner {
+    padding: 10px;
+  }
+  html[data-theme="white"] .chat-panel-header h2 {
+    font-size: 17px;
+  }
+  html[data-theme="white"] .chat-status-pill {
+    font-size: 11px;
+    padding: 5px 7px;
+  }
+  .orb-wrap {
+    flex-direction: row;
+    gap: 18px;
+  }
+  .circle {
+    width: clamp(110px, 32vw, 176px);
+  }
+  .orb-wrap.live .side-btn {
+    width: 44px;
+    height: 44px;
+  }
+  .mic-gate-arc {
+    width: 62px;
+    height: 62px;
+  }
+  html[data-theme="white"] .white-mic-stage {
+    gap: 12px;
+    padding-top: 16px;
+  }
+  html[data-theme="white"] .white-waveform {
+    top: 74px;
+  }
+  html[data-theme="white"] .white-session-controls {
+    gap: 8px;
+  }
+  html[data-theme="white"] .white-mute-btn,
+  html[data-theme="white"] .white-stop-btn {
+    font-size: 13px;
+    padding: 8px 10px;
+    min-height: 44px;
+    gap: 6px;
+  }
+}
+@media (max-height: 640px) {
+  .stage,
+  html[data-theme="white"] .stage {
+    padding-block: 8px;
+  }
+  html[data-theme="white"] .white-mic-stage {
+    padding-top: 8px;
+    gap: 8px;
+  }
+  html[data-theme="white"] .white-waveform {
+    top: 57px;
+  }
+  html[data-theme="white"] .white-mic-caption {
+    font-size: 16px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --audio-level: 0 !important;
+    --ai-audio-level: 0 !important;
+    --bar0: 0 !important;
+    --bar1: 0 !important;
+    --bar2: 0 !important;
+    --bar3: 0 !important;
+    --bar4: 0 !important;
+  }
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
+  .circle.state-ai-speaking .bar,
+  .circle.state-user-speaking .bar {
+    transform: none !important;
+  }
+}
diff --git a/vocero-frontend/src/styles/legacy-theme.css b/vocero-frontend/src/styles/legacy-theme.css
index 143fc48..082d566 100644
--- a/vocero-frontend/src/styles/legacy-theme.css
+++ b/vocero-frontend/src/styles/legacy-theme.css
@@ -90,17 +90,6 @@ body {
   min-height: 100svh;
   min-height: 100dvh;
   width: 100%;
-  /* ─── iOS / notch / rounded-screen safe-area insets ───
-     The user reported the header brand card is slightly clipped (avatar AV
-     touches the top-right viewport edge). Mobile OSes use a non-rectangular
-     bezel/notch and an iOS Home Indicator bar at the bottom. We reserve
-     padding at document scope so NOTHING (topbar orb chat footer) is ever
-     painted into the OS reserved bezels. The `max(10px, env(...))` fallback
-     gives a minimum 10px breathing even on desktop / devices where env()
-     resolves to 0. */
-  padding-top: max(10px, env(safe-area-inset-top, 0px));
-  padding-right: max(10px, env(safe-area-inset-right, 0px));
-  padding-left: max(10px, env(safe-area-inset-left, 0px));
   /* Bottom handled by #app padding-bottom below (footer bar + home indicator). */
   overflow-x: hidden;
   overflow-y: auto;
@@ -158,94 +147,11 @@ body::after {
     opacity: 0.85;
   }
 }
-
-/* ─── Overlay unlocker TALK mode (S2S_START_SESSION_MODE=TALK) ───
-   Capture the first tap/click anywhere on the page because browsers block
-   getUserMedia() outside a user gesture. Without this layer, doStart() from
-   setTimeout failed and the greeting was silent. Above all content except
-   <dialog> modals, whose top layer takes priority. */
-.talk-unlocker {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(
-    180deg,
-    rgba(14, 16, 25, 0.35) 0%,
-    rgba(14, 16, 25, 0.55) 60%,
-    rgba(14, 16, 25, 0.75) 100%
-  );
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-  cursor: pointer;
-  animation: talkUnlockFade 260ms ease-out both;
-}
-.talk-unlocker[hidden] {
-  display: none !important;
-}
-@keyframes talkUnlockFade {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-.talk-unlocker-hint {
-  width: min(86vw, 420px);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 14px;
-  padding: 28px 22px 24px;
-  border-radius: 22px;
-  background: rgba(22, 25, 40, 0.78);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  box-shadow:
-    0 20px 50px rgba(0, 0, 0, 0.45),
-    inset 0 1px 0 rgba(255, 255, 255, 0.06);
-  text-align: center;
-  animation: talkUnlockPop 380ms cubic-bezier(0.2, 0.9, 0.3, 1.2) 80ms both;
-}
-@keyframes talkUnlockPop {
-  from {
-    opacity: 0;
-    transform: translateY(14px) scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-.talk-unlocker-spinner {
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
-  border: 3px solid rgba(255, 255, 255, 0.1);
-  border-top-color: #8b5cf6;
-  border-right-color: #ec4899;
-  animation: talkSpinnerSpin 900ms linear infinite;
-}
-@keyframes talkSpinnerSpin {
+@keyframes voice-spinner-spin {
   to {
     transform: rotate(360deg);
   }
 }
-.talk-unlocker-title {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-  color: var(--text, #f3f4f6);
-}
-.talk-unlocker-sub {
-  margin: 0;
-  font-size: 13px;
-  line-height: 1.5;
-  color: rgba(226, 232, 240, 0.68);
-}
 
 button {
   font-family: inherit;
@@ -260,72 +166,11 @@ a:hover {
   border-bottom-color: var(--text);
 }
 
-#app {
-  /* Simple flex column layout: header → stage → chat-panel.
-     At least fills viewport, grows if contents taller. The footer below is a
-     sibling position:sticky bottom=0 (NOT a child of #app) so to prevent the
-     sticky footer from COVERING the last line of the chat history (which
-     would otherwise be painted under the ~32-44px of glass footer) we reserve
-     a bottom padding matching the real footer height + breathing margin +
-     iOS Home Indicator (safe-area-inset-bottom). */
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: 100vh;
-  min-height: 100svh;
-  min-height: 100dvh;
-  /* 120px minimum = glass footer bar (32-44) + large breathing (76-88) + any
-     iOS home indicator safe inset. We intentionally OVER-provision here: the
-     last assistant bubble in the screenshot was clipped because the total
-     reserved room (56 + chat-inner 96) was smaller than the real floating
-     footer + text-wrap delta + OS safe area. */
-  padding-bottom: max(120px, calc(env(safe-area-inset-bottom, 0px) + 120px));
-  padding-right: 0; /* side safe areas already on <body>; don't double-add */
-  padding-left: 0;
-  padding-top: 0;
-  box-sizing: border-box;
-}
-
 .hidden {
   display: none !important;
 }
 
 /* ─── Footer ─────────────────────────────────────────────────────────── */
-/* #app uses flex column layout so footer sits as the last child.
-   We make it STICKY at the very bottom of the viewport so:
-   - if page fits within viewport → footer is at bottom, visible.
-   - if page is taller and we scroll document → footer STAYS pinned at
-     viewport bottom until the very end where it joins the end of content.
-   Glass tinted bg prevents footer text becoming unreadable when overlaying
-   the orb / aurora gradients during mid-scroll. */
-.app-footer {
-  position: sticky;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  flex: 0 0 auto; /* never shrink or grow the footer */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* On iOS the floating "home indicator" pill is drawn at the very bottom of
-     the screen inside env(safe-area-inset-bottom) and obscures content. We
-     extend the footer glass padding to sit ABOVE the pill. Desktop browsers
-     resolve env() to 0, so clamp(max(12px,...)) is 12–20px there. */
-  padding: clamp(8px, 1.6vw, 12px) clamp(16px, 4vw, 24px)
-    max(clamp(12px, 2.4vw, 20px), env(safe-area-inset-bottom, 0px));
-  user-select: none;
-  pointer-events: none;
-  z-index: 3; /* above aurora bg & stage pedestal, below modals (z 200+) */
-  box-sizing: border-box;
-  backdrop-filter: blur(10px) saturate(140%);
-  -webkit-backdrop-filter: blur(10px) saturate(140%);
-  background: linear-gradient(
-    180deg,
-    transparent 0%,
-    color-mix(in srgb, var(--bg) 72%, transparent) 40%,
-    color-mix(in srgb, var(--bg) 90%, transparent) 100%
-  );
-}
 .app-footer::before {
   content: "";
   position: absolute;
@@ -394,30 +239,6 @@ a:hover {
   box-sizing: border-box;
 }
 
-.feedback-link {
-  align-self: flex-end;
-  display: inline-flex;
-  align-items: center;
-  min-height: 44px;
-  margin: 12px 16px 0;
-  padding: 10px 18px;
-  border: none;
-  border-radius: 10px;
-  background: #2563eb;
-  color: #ffffff;
-  font-size: 16px;
-  font-weight: 600;
-  position: relative;
-  z-index: 2;
-}
-.feedback-link:hover {
-  background: #1d4ed8;
-}
-.feedback-link:focus-visible {
-  outline: 2px solid var(--text);
-  outline-offset: 3px;
-}
-
 .brand {
   display: flex;
   align-items: flex-start;
@@ -645,11 +466,6 @@ a:hover {
     width: 18px;
     height: 18px;
   }
-  /* ── Footer (narrow viewport): reduce tracking to avoid awkward wrapping;
-   *    use compact padding and a taller line height. */
-  .app-footer {
-    padding: 8px 14px 14px;
-  }
   .app-footer::before {
     width: min(320px, 82vw);
   }
@@ -691,42 +507,6 @@ a:hover {
   overflow: hidden !important;
 }
 
-/* The HF user pill: compact avatar + handle. Rendered as a flex row so
- * the avatar stays aligned with the text baseline even when the text
- * wraps on narrow viewports. */
-.hf-user {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: var(--text-dim);
-  padding: 4px 10px 4px 4px;
-  border-radius: 999px;
-  background: var(--bg-elev);
-  border: 1px solid var(--border);
-  line-height: 1;
-}
-
-.hf-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  object-fit: cover;
-  background: color-mix(in srgb, var(--accent) 25%, var(--bg-elev-2));
-  /* Hidden until an actual URL loads (see `setHfAvatar` in main.ts).
-   * Keeps the initial login flash from showing a broken image icon. */
-  opacity: 0;
-  transition: opacity 0.25s ease;
-  flex: none;
-}
-.hf-avatar.loaded {
-  opacity: 1;
-}
-
-.hf-user-name {
-  white-space: nowrap;
-}
-
 /* ─── Transport pill ──────────────────────────────────────────────
  * Surface the actual network path WebRTC picked for the robot peer
  * connection (LAN, direct-through-NAT, or TURN-relayed). Lets the
@@ -1984,11 +1764,6 @@ body.booting *::after {
 .footer a:hover {
   color: var(--text-dim);
 }
-/* While the webcam preview sits bottom-left, push the credit to the
- * bottom-right so the two don't collide. */
-body.cam-on .footer {
-  justify-content: flex-end;
-}
 
 /* ─── Modal ───────────────────────────────────────────────────────────── */
 
@@ -2419,59 +2194,6 @@ body.cam-on .footer {
 }
 
 /* ─── Conversation history panel (NOW INLINE in #app, below stage, above footer) ─ */
-/* Old rule: position:fixed right-side overlay.
-   New rule: direct flex-col child of #app, 100% width, grows if content is
-   taller up to a max of ~40% viewport height, scrolls the history inside.
-   Keeps all the "ChatView" internals intact (bubble history renderer, etc). */
-.chat-panel {
-  position: static;
-  inset: auto;
-  z-index: 1;
-  pointer-events: auto;
-  width: 100%;
-  /* Stage now stays compact above us; chat-panel absorbs any remaining vertical
-     space so it sits IMMEDIATELY below the orb caption and extends down to the
-     sticky footer — while keeping a sensible max so it never squishes stage. */
-  flex: 1 1 auto;
-  min-height: 160px;
-  max-height: 65svh;
-  max-height: 65dvh;
-  display: flex;
-  flex-direction: column;
-  /* Horizontal margins match the 920px inner max-width line-up + side rails.
-     BOTTOM PADDING (critical 2026-09-04 bump): was clamp(40px, 9vh, 96px).
-     The last assistant bubble line was STILL clipped against the sticky
-     footer because (a) the footer is rendered outside #app as a floating
-     overlay so it covers 32-56px of the chat area regardless of history
-     internal height and (b) when a bubble wraps to >5 lines on narrow mobile
-     its rendered height is larger than the 96px breathing. New minimum
-     60/160 (12vh = 160 at ~1333 svh but max 160px) adds another 64px. */
-  padding: clamp(8px, 1.4vh, 14px) clamp(16px, 3vw, 24px) clamp(60px, 12vh, 160px);
-  box-sizing: border-box;
-  overflow: hidden;
-}
-/* Inner wrapper: SEAMLESS (no glass card / no border / no shadow) per user
-   request 2026-09-04 — the chat area visually melts into the aurora page
-   background, no chrome box or visible frame around the history. We keep the
-   layout sizing + z-ordering but neutralise all decoration. */
-.chat-panel-inner {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  margin: 0 auto;
-  max-width: 920px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  /* Decoration removed — seamless transparent on aurora bg */
-  background: transparent;
-  border: 0 solid transparent;
-  border-radius: 0;
-  overflow: hidden;
-  box-shadow: none;
-  backdrop-filter: none;
-  -webkit-backdrop-filter: none;
-}
 .chat-panel-inner::before {
   /* Top aurora fade removed (would add an artificial tint vs the page bg). */
   content: none;
@@ -2485,18 +2207,6 @@ body.cam-on .footer {
 .chat-panel-backdrop {
   display: none;
 }
-
-.chat-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  /* Padding sides 14px so "CONVERSACIÓN" lines up with the 14px content insets
-     of the bubbles below and leaves a clear breathing column near the right
-     edge so the assistant bubble never touches the screen border. */
-  padding: 0 14px 6px;
-  border-bottom: 0 solid transparent;
-  flex: none;
-}
 .chat-panel-header h2 {
   margin: 0;
   font-size: 13px;
@@ -2509,40 +2219,6 @@ body.cam-on .footer {
   text-transform: uppercase;
   opacity: 0.92;
 }
-
-/* Chat history: flex column of user/assistant bubbles — scrolled independently
-   while header + input row stay pinned. Transparent seamless on page aurora (no own bg).
-   Padding 14px sides for alignment with the header.
-   NOTE: the critical "not attached to screen border" rule is enforced by
-   `margin-right:22px` on `.hist-msg.assistant` and `margin-left:6px` on `.hist-msg.user`
-   (hard rules on the bubbles themselves so nothing can hide them).
-   Bottom padding BUMP 2026-09-04: 96 → 160px. The screenshot showed the last
-   assistant line asking for more details cut cleanly by the footer. 160px
-   inside the scroll container is 5× the real footer glass height; after we
-   snap scrollTop to the absolute max, the last bubble terminates at the TOP
-   of a 160px-high transparent region → fully visible, fully above the floating
-   sticky footer even on very short (800px svh) mobile viewports. */
-.chat-history {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  /* 160px bottom padding inside the scrollbox means scrollHeight grows to include
-     those 160px. When we snap scrollTop = max, the last bubble ends at the top
-     of that 160px void → visible and well above the floating footer line. */
-  padding: 4px 14px 160px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  scrollbar-width: thin;
-  /* Disable Chrome's "scroll anchoring" which sometimes fights our snap-to-bottom by
-     re-anchoring the scroll pos whenever a new token is appended. We truly want
-     the tail, always, no exceptions. */
-  overflow-anchor: none;
-  /* Instant snap (never smooth) — the default was causing perceived "scroll
-     scroll does not go far enough" because smooth animates while new content
-     outpaces the animation frame budget on long streams). */
-  scroll-behavior: auto !important;
-  /* gutter removed: spacing is guaranteed by per-bubble margin rules instead */
-}
 .chat-history::-webkit-scrollbar {
   width: 6px;
 }
@@ -2555,134 +2231,6 @@ body.cam-on .footer {
   border: 1px solid transparent;
   background-clip: content-box;
 }
-
-/* ─── Reports sidebar (LEFT) ───────────────────────────────────────── */
-/* Behaviour:
-   - desktop (>= 1024px): FIXED to the left edge, 320px, always visible.
-     Stage/header/footer leave room via #app padding-left 320px so the orb
-     is not covered.
-   - mobile / tablet: OFF-CANVAS slide-in from the left (like chat panel on
-     right), only shown on toggle, closed via backdrop / close button / ESC.
-   backdrop is shared between both breakpoints (only visible when open on
-   mobile; desktop uses no backdrop). */
-.reports-sidebar {
-  position: fixed;
-  inset: 0;
-  z-index: 190; /* below chat-panel (z 200), above stage/header (z 1-2) */
-  pointer-events: none; /* backdrop + inner opt-in to clicks separately */
-}
-.reports-sidebar-backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(8, 9, 13, 0.42);
-  backdrop-filter: blur(5px);
-  -webkit-backdrop-filter: blur(5px);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.25s ease;
-}
-.reports-sidebar-inner {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: min(320px, 88vw);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)), var(--bg-elev);
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  transform: translateX(-105%);
-  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
-  pointer-events: auto;
-  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
-  overflow: hidden;
-}
-.reports-sidebar.open .reports-sidebar-backdrop {
-  opacity: 1;
-  pointer-events: auto;
-}
-.reports-sidebar.open .reports-sidebar-inner {
-  transform: translateX(0);
-}
-/* Header — same pattern as chat panel header but tinted brand gradient line */
-.reports-sidebar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--border);
-  flex: none;
-  position: relative;
-  overflow: hidden;
-}
-.reports-sidebar-header::after {
-  content: "";
-  position: absolute;
-  left: 16px;
-  right: 16px;
-  bottom: -1px;
-  height: 1px;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    color-mix(in srgb, var(--brand) 60%, transparent) 45%,
-    color-mix(in srgb, var(--brand-2) 55%, transparent) 65%,
-    transparent
-  );
-  opacity: 0.85;
-}
-.reports-sidebar-header h2 {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-  background: var(--brand-gradient);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-/* Hint block lives inside the sidebar now. Reset any "topbar" flavour of the
-   card: no max-height cap here (the sidebar scrolls the full panel instead).
-   Keep full-height so reports-list chips can breathe. */
-.reports-sidebar .reports-hint {
-  margin: 12px 14px 4px 14px;
-  padding: 12px 12px 10px 12px;
-  max-height: none;
-  max-width: none;
-  width: auto;
-  flex: none;
-  box-shadow:
-    var(--shadow-glass),
-    0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent) inset,
-    0 0 24px -14px color-mix(in srgb, var(--brand) 62%, transparent);
-}
-.reports-sidebar .reports-hint .reports-list {
-  gap: 6px 8px;
-}
-/* Scrollbar of the sidebar (NOT reports-hint — that one still has its cap
-   when embedded in a smaller view) */
-.reports-sidebar-inner {
-  scrollbar-width: thin;
-  scrollbar-gutter: stable;
-  overflow-y: auto;
-}
-.reports-sidebar-inner::-webkit-scrollbar {
-  width: 6px;
-}
-.reports-sidebar-inner::-webkit-scrollbar-track {
-  background: transparent;
-}
-.reports-sidebar-inner::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--brand) 32%, transparent);
-  border-radius: 999px;
-  border: 1px solid transparent;
-  background-clip: content-box;
-}
-/* ── Toggle button in the topbar control cluster ─────────────────── */
-button[data-reports-sidebar-toggle] {
-  /* Visible ONLY on mobile/tablet by default (desktop has sidebar always on) */
-  display: inline-flex;
-}
 /* Toggle button badge (count of reports scheduled, shown only if >0) */
 #reports-sidebar-badge {
   position: absolute;
@@ -2713,50 +2261,12 @@ button[data-reports-sidebar-toggle] {
 
 /* ── DESKTOP (>=1024px): sidebar always visible on the LEFT ────────── */
 @media (min-width: 1024px) {
-  /* Leave room for sidebar at left edge of the app */
-  #app {
-    padding-left: 320px;
-    box-sizing: border-box;
-  }
-  .reports-sidebar {
-    pointer-events: auto;
-  }
-  .reports-sidebar-backdrop {
-    display: none; /* never darken the page on desktop */
-  }
-  .reports-sidebar-inner {
-    transform: translateX(0) !important; /* keep always in */
-    width: 320px;
-    box-shadow: none; /* embedded sidebar, no floating shadow */
-    border-right: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 14%), var(--bg);
-  }
-  /* Hide the toggle button in the topbar control cluster (sidebar always on) */
-  button[data-reports-sidebar-toggle] {
-    display: none !important;
-  }
   /* Give the orb some extra breathing room since we stole 320px on the left */
   .stage {
     padding-left: clamp(24px, 4vw, 48px);
     padding-right: clamp(24px, 4vw, 48px);
   }
 }
-/* Mid-range tablet 768..1023 : sidebar is off-canvas (toggle shown) but we
-   can still show the toggle and use 320px sliding panel. */
-@media (min-width: 768px) and (max-width: 1023px) {
-  .reports-sidebar-inner {
-    width: min(360px, 78vw);
-  }
-  button[data-reports-sidebar-toggle] {
-    display: inline-flex;
-  }
-}
-/* Very narrow (<=767): same off-canvas, narrower panel. */
-@media (max-width: 767px) {
-  .reports-sidebar-inner {
-    width: min(320px, 86vw);
-  }
-}
 
 .chat-empty {
   flex: 1;
@@ -2786,40 +2296,6 @@ button[data-reports-sidebar-toggle] {
   opacity: 0.7;
 }
 
-/* ─── History messages ───────────────────────────────────────────────── */
-
-.hist-msg {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  /* 76% leaves a clear 24% lateral column: at 14px chat side padding + 6px
-     scrollbar-gutter this guarantees the ASSISTANT bubble (align-self flex-end)
-     never touches the screen border, even with its outer glass shadow. */
-  max-width: 76%;
-}
-.hist-msg.user {
-  align-self: flex-start;
-  /* Hard safety margin-left: guarantees the left bubble NEVER touches the
-     viewport border, regardless of parent padding / cache drift. */
-  margin-left: 6px;
-  margin-right: auto;
-}
-.hist-msg.assistant {
-  align-self: flex-end;
-  /* Hard safety margin-right: 22px GUARANTEED between the rounded corner of
-     the assistant bubble and the right viewport/screen border. Always visible
-     even when no scrollbar is rendered (scrollbar-gutter was creating
-     inconsistent spacing between empty history and scrolled history). */
-  margin-right: 22px;
-  margin-left: auto;
-}
-.hist-msg.tool {
-  align-self: flex-start;
-  max-width: 100%;
-  margin-right: 6px;
-  margin-left: 6px;
-}
-
 .hist-role {
   font-family: var(--font-mono);
   font-size: 10px;
@@ -3156,15 +2632,6 @@ html[data-theme="white"] .markdown-content a {
     width: 70px;
     height: 70px;
   }
-
-  /* Full-screen conversation on phones — feels more deliberate than a
-   * narrow slide-over. It already spans top-to-bottom (inset 0); make it
-   * span edge-to-edge too and drop the now-pointless border/shadow. */
-  .chat-panel-inner {
-    width: 100vw;
-    border-left: none;
-    box-shadow: none;
-  }
 }
 
 /* ─── About panel ─────────────────────────────────────────────────────────
@@ -3857,19 +3324,6 @@ html[data-theme="white"] .markdown-content a {
   color: var(--text-faint);
   opacity: 0.6;
 }
-.hf-credit {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-}
-/* Brand marks keep their own color — a deliberate exception to the
- * monochrome rule, for the HF and Cerebras logos only. */
-.hf-mark {
-  width: 14px;
-  height: 14px;
-  flex: none;
-  color: #ffd21e;
-}
 .cerebras-credit {
   display: inline-flex;
   align-items: center;
@@ -4025,16 +3479,6 @@ html[data-theme="white"] .markdown-content a {
   opacity: 0.7;
 }
 
-/* Captured webcam frame shown in the transcript (camera tool result). */
-.hist-image {
-  display: block;
-  width: 100%;
-  max-width: 240px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--border);
-  margin-top: 2px;
-}
-
 /* ─── Tools panel ──────────────────────────────────────────────────────────
  * Reuses the modal/field shell. Switches are monochrome (checked = near-white,
  * the same high-contrast treatment as the primary button): color belongs to
@@ -4318,108 +3762,11 @@ html[data-theme="white"] .markdown-content a {
   opacity: 0.5;
 }
 
-/* ─── Webcam preview (camera tool) — CURRENTLY HIDDEN BY DEFAULT ─────────────
- * Floating self-view, bottom-left. Mirrored for the user; the frame sent to
- * the model is drawn un-mirrored. Camera controls are omitted from the React view. */
-.cam-pip {
-  position: fixed;
-  left: 20px;
-  bottom: 20px;
-  width: 280px;
-  aspect-ratio: 4 / 3;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  border: 1px solid var(--border-strong);
-  background: var(--bg-elev);
-  box-shadow: var(--shadow-soft);
-  z-index: 90;
-  opacity: 0;
-  transform: translateY(8px) scale(0.96);
-  pointer-events: none;
-  transition:
-    opacity 0.22s ease,
-    transform 0.22s ease;
-}
-.cam-pip.visible {
-  opacity: 1;
-  transform: none;
-}
-.cam-video {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transform: scaleX(-1); /* mirror the self-view only */
-  background: var(--bg);
-}
-.cam-label {
-  position: absolute;
-  left: 8px;
-  bottom: 6px;
-  font-family: var(--font-mono);
-  font-size: 9.5px;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--text);
-  opacity: 0.8;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
-}
-.cam-flash {
-  position: absolute;
-  inset: 0;
-  background: #fff;
-  opacity: 0;
-  pointer-events: none;
-}
-.cam-pip.flash .cam-flash {
-  animation: cam-flash 0.4s ease;
-}
-@keyframes cam-flash {
-  0% {
-    opacity: 0;
-  }
-  12% {
-    opacity: 0.85;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@media (max-width: 600px) {
-  /* Bottom-centred on phones. Auto margins centre it without touching the
-   * transform, so the slide/scale-in animation still works. */
-  .cam-pip {
-    left: 0;
-    right: 0;
-    margin-inline: auto;
-    bottom: 16px;
-    width: min(188px, 52vw);
-  }
-  /* The credit would sit under the centred preview, so drop it while the
-   * camera is on. */
-  body.cam-on .footer {
-    display: none;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .cam-pip {
-    transition: opacity 0.22s ease;
-    transform: none;
-  }
-  .cam-pip.flash .cam-flash {
-    animation: none;
-  }
-}
-
 /* ─── Desktop type scale ────────────────────────────────────────────────────
  * A uniform step up (~+1px, title +2) for all UI text on larger screens.
  * Scoped to min-width: 601px so it can't reach phones — the ≤600px layout
  * keeps every size exactly as it was. */
 @media (min-width: 601px) {
-  .cam-label {
-    font-size: 10.5px;
-  }
-
   .bubble-role,
   .hist-role {
     font-size: 11px;
@@ -4522,9 +3869,6 @@ html[data-theme="white"] .markdown-content a {
     padding: 10px 18px 12px;
     gap: 12px;
   }
-  .app-footer {
-    padding: 8px 24px 10px;
-  }
   .reports-hint {
     max-height: 30svh;
   }
@@ -4554,9 +3898,6 @@ html[data-theme="white"] .markdown-content a {
     padding: 6px 12px 8px;
     gap: 6px;
   }
-  .app-footer {
-    padding: 3px 12px 5px;
-  }
   .app-footer-text {
     font-size: 9px;
     letter-spacing: 0.1em;
@@ -4601,8 +3942,6 @@ html[data-theme="dark"] [data-theme-only="dark"]:not([data-debug-only]) {
    rendered on the light Vocero mobile theme. Double-safety even if the
    `data-theme-only="dark"` gate is somehow stripped or JS runtime fails. */
 html[data-theme="white"] #reports-sidebar,
-html[data-theme="white"] .reports-sidebar,
-html[data-theme="white"] .reports-sidebar-inner,
 html[data-theme="white"] #reports-sidebar-toggle,
 html[data-theme="white"] #reports-hint,
 html[data-theme="white"] .reports-hint {
@@ -4614,14 +3953,6 @@ html[data-theme="white"] .reports-hint {
   transform: translateX(-9999px) !important;
   visibility: hidden !important;
 }
-/* In white theme, app column must not leave a 320px gutter for the desktop
-   reports-sidebar (which was the dark-theme default layout). Reset paddings. */
-html[data-theme="white"] #app,
-html[data-theme="white"] .app-column {
-  padding-left: 16px !important;
-  padding-right: 16px !important;
-  margin-left: 0 !important;
-}
 /* ─────────────────────────────────────────────────────────────────────
    USER FIX 2026-09-10: show the conversation only inside the chat box.
    The dark theme renders a SECOND ephemeral transcript into #bubble-stack
@@ -4714,35 +4045,6 @@ html[data-theme="white"] body::after {
   animation: none;
 }
 
-/* ── App column: slightly reduce reserved bottom room (footer is thinner in white theme) */
-html[data-theme="white"] #app {
-  padding-bottom: max(100px, calc(env(safe-area-inset-bottom, 0px) + 100px));
-}
-
-/* ── Talk-unlocker (S2S_START_SESSION_MODE=TALK) — restyle for light bg */
-html[data-theme="white"] .talk-unlocker {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.88) 100%);
-}
-html[data-theme="white"] .talk-unlocker-hint {
-  background: #ffffff;
-  border-color: rgba(15, 23, 42, 0.08);
-  color: #0f172a;
-  box-shadow:
-    0 20px 60px rgba(15, 23, 42, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 1);
-}
-html[data-theme="white"] .talk-unlocker-spinner {
-  border-color: rgba(37, 99, 235, 0.1);
-  border-top-color: #2563eb;
-  border-right-color: #3b82f6;
-}
-html[data-theme="white"] .talk-unlocker-title {
-  color: #0f172a;
-}
-html[data-theme="white"] .talk-unlocker-sub {
-  color: rgba(15, 23, 42, 0.65);
-}
-
 /* ── Topbar — flat, no card, centered brand and avatar right ── */
 html[data-theme="white"] .topbar {
   padding: 18px 18px 6px 18px;
@@ -4873,29 +4175,6 @@ html[data-theme="white"] .topbar-right {
   display: none;
 }
 
-/* ── Status card: ready to converse, reports and analysis ─────────────
-     User request 2026-09-10: hide the ready-to-converse box. Hide the
-     entire status card in white theme (the grey rounded banner with the
-     chart icon and arrow between topbar and mic stage, which the user
-     circled with a red X). Previously we hid only the right chevron; now
-     we kill the full container with the same double-guarantee pattern
-     used for the sidebar / bubble-stack. ──────────────────────────────── */
-html[data-theme="white"] .status-card,
-html[data-theme="white"] .status-card-icon,
-html[data-theme="white"] .status-card-text,
-html[data-theme="white"] .status-card-title,
-html[data-theme="white"] .status-card-sub,
-html[data-theme="white"] .status-card-arrow {
-  display: none !important;
-  width: 0 !important;
-  height: 0 !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  transform: translateX(-9999px) !important;
-  visibility: hidden !important;
-  pointer-events: none !important;
-}
-
 /* ── Stage: tighten room (purple orb + arc hidden by data-theme-only=dark) */
 html[data-theme="white"] .stage {
   padding: 10px 16px 6px;
@@ -5048,7 +4327,7 @@ html[data-theme="white"] .white-mic-circle.state-queued .wmc-icon.wmc-spinner {
   border-radius: 999px;
   border: 4px solid rgba(255, 255, 255, 0.22) !important;
   border-top-color: #ffffff !important;
-  animation: talkSpinnerSpin 850ms linear infinite;
+  animation: voice-spinner-spin 850ms linear infinite;
   margin: 4px !important;
   padding: 0 !important;
   background: transparent !important;
@@ -5273,71 +4552,6 @@ html[data-theme="white"] .white-stop-btn svg {
   color: #0f172a;
   flex: none;
 }
-
-/* ── Quick actions — 3 pills (summary / data lookup / response draft).
-     User request 2026-09-10 "nascondi le cose in rosso": all 3 quick action
-     pills are circled in red → hide the entire quick-actions container. */
-html[data-theme="white"] .quick-actions {
-  display: none !important;
-}
-html[data-theme="white"] .quick-action-btn {
-  display: none !important;
-}
-
-/* ── Chat panel: white rounded conversation card + online status pill.
-     CRITICAL SCROLL FIX 2026-09-10: the chat box was not scrolling.
-     The previous white-theme override set `flex: 0 0 auto` + `max-height: none`
-     which removed every vertical constraint on the chat panel → it grew beyond
-     the viewport edge → overflow on the *page* body instead of the chat
-     history scrollbox. Instead we preserve the dark-theme flex-col panel
-     contract (chat-panel grows into the free space, chat-panel-inner and
-     chat-history are flex items with min-height:0 to enable shrinking) and
-     we cap the whole card at 58dvh so the topbar + status + mic stage + quick
-     actions are always visible above it.  ─────────────────────────────────── */
-html[data-theme="white"] .chat-panel {
-  margin: 6px 18px 0;
-  padding: 0;
-  background: #ffffff;
-  border: 1px solid rgba(15, 23, 42, 0.06);
-  border-radius: 22px;
-  box-shadow: var(--shadow-soft);
-  width: auto;
-  max-width: none;
-  /* Layout contract for scrollable chat: absorb remaining vertical room,
-     shrink as low as needed, cap the card for a sensible upper bound,
-     and hide any panel-level overflow (chat-history will own the scroll). */
-  flex: 1 1 auto !important;
-  min-height: 180px;
-  max-height: 58dvh !important;
-  max-height: 58svh !important;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-html[data-theme="white"] .chat-panel-inner {
-  padding: 14px 14px 12px;
-  /* Critical: pass the chat-panel's fixed height down into the inner so
-     chat-history can later compute its own flex shrink/scroll correctly. */
-  display: flex !important;
-  flex-direction: column !important;
-  height: 100% !important;
-  width: 100%;
-  box-sizing: border-box;
-  min-height: 0;
-  overflow: hidden;
-}
-html[data-theme="white"] .chat-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 2px 4px 12px;
-  margin: 0 0 4px;
-  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
-  /* Header never shrinks out of existence; keep it pinned. */
-  flex: none;
-}
 html[data-theme="white"] .chat-panel-header h2 {
   margin: 0;
   color: #0f172a !important; /* slate-900 flat, no brand gradient */
@@ -5357,15 +4571,6 @@ html[data-theme="white"] .chat-panel-header h2 {
   border-bottom: none !important;
   box-shadow: none !important;
 }
-/* Also force the header <hr>-like bottom border to be a thin divider (not a
-   thick blue underline visually sitting right below "CONVERSACIÓN" — which is
-   what the user's screenshot is showing as the blue underline effect). */
-html[data-theme="white"] .chat-panel-header {
-  border-bottom-style: solid !important;
-  border-bottom-color: rgba(15, 23, 42, 0.06) !important;
-  border-bottom-width: 1px !important;
-  text-decoration: none !important;
-}
 /* Session status uses connection events rather than a permanent online badge. */
 html[data-theme="white"] .chat-status-pill {
   display: inline-flex;
@@ -5515,116 +4720,29 @@ html[data-theme="white"] .chat-export-btn.chat-export-empty {
   color: #b45309 !important;
 }
 
-/* ──────────────────────────────────────────────────
-   THE SCROLLABLE HISTORY BOX (root cause of the scrolling failure)
-   Before: max-height:none. Now it's a flex item with flex:1 1 auto inside
-   .chat-panel-inner, which has a bounded 100% height of its parent.
-   min-height:0 is MANDATORY — without it, flex column children never shrink
-   below their content size, and overflow-y:auto never activates.      */
-html[data-theme="white"] .chat-history {
-  padding: 12px 4px 40px !important; /* 40 px bottom air inside scroll */
-  gap: 14px;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto !important;
-  min-height: 0 !important; /* MAGIC: enable shrink for scroll */
-  max-height: 100% !important;
-  overflow-y: auto !important;
-  overflow-x: hidden !important;
-  scrollbar-width: thin;
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior: contain;
-}
-
-/* ── Chat history bubbles (white theme rewrite).
-     The real renderer (ui/chat.js _buildMessageEl) builds rows as:
-        <div class="hist-msg user|assistant">
-          <div class="hist-role">You / Assistant</div>   ← HIDE in white theme
-          <div class="hist-body">…message text…</div>   ← restyle as flat bubble
-     We target those classes (not the .bubble class, which is for the floating
-     ephemeral stack) because the persistent conversation rows live here. ─── */
-
-/* 1) Kill the old "You / Assistant / Tool call" uppercase mono eyebrow. The
-      Vocero mobile design replaces it with a name+timestamp meta line above
-      each bubble instead. */
-html[data-theme="white"] .chat-history .hist-role,
-html[data-theme="white"] .chat-history .bubble-role {
-  display: none !important;
-}
-
-/* 2) Layout: each row is a flex column with room for the 36 px avatar circle
-      sitting outside the bubble on the role side. */
-html[data-theme="white"] .chat-history .hist-msg,
-html[data-theme="white"] #bubble-stack .bubble {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  max-width: calc(100% - 56px);
-  box-sizing: border-box;
-  position: relative;
-  margin-top: 8px;
-  padding-top: 22px; /* 22 px reserved for the "Vocero 16:14" meta label above */
-}
-/* Anchor hist-body/bubble-body so absolute-positioned floating meta labels
-   (painted via ::before on the body) use the bubble itself as the reference
-   box instead of climbing up to chat-history. This is the ROOT FIX of the
-   "16:14 timestamp floats in the middle of the page" bug from the previous
-   screenshot.   */
-html[data-theme="white"] .chat-history .hist-msg .hist-body,
-html[data-theme="white"] #bubble-stack .bubble .bubble-body {
-  position: relative;
-}
-
-/* 3) FLIP the default dark-theme alignment. Screenshot reference:
-      ASSISTANT = left side (blue bot avatar left of bubble, grey bubble)
-      USER      = right side (EM/AV initials circle on RIGHT, light-blue bubble)
-      The default dark purple theme stores them the opposite way, so we flip
-      align-self AND the auto margin here. */
-html[data-theme="white"] .chat-history .hist-msg.assistant,
-html[data-theme="white"] #bubble-stack .bubble.assistant {
-  align-self: flex-start !important;
-  margin-right: auto !important;
-  margin-left: 52px !important; /* 36 avatar + 16 gap */
-}
-html[data-theme="white"] .chat-history .hist-msg.user,
-html[data-theme="white"] #bubble-stack .bubble.user {
-  align-self: flex-end !important;
-  margin-left: auto !important;
-  margin-right: 52px !important;
-}
-
-/* 4) The actual speech bubble body.
-      Assistant (grey flat 200-level): #F3F4F6 rounded 18 except bottom-left corner 6px
-      User  (light-blue 100):        #DBEAFE rounded 18 except bottom-right corner 6px
-      Drop every original dark-theme decoration: glass backdrop, 28px deep
-      drop shadow, gradient borders. Keep it perfectly flat. */
-html[data-theme="white"] .chat-history .hist-msg .hist-body,
-html[data-theme="white"] #bubble-stack .bubble .bubble-body {
-  padding: 12px 15px !important;
-  border-radius: 18px !important;
-  font-size: clamp(14.5px, 3.3vw, 16.5px) !important;
-  line-height: 1.45 !important;
-  letter-spacing: -0.005em !important;
-  color: #0f172a !important;
+/* Light transcript appearance; layout and semantic metadata live in layout.css. */
+html[data-theme="white"] .chat-history .hist-msg .hist-body {
+  padding: 12px 15px;
+  border-radius: 18px;
+  font-size: clamp(14.5px, 3.3vw, 16.5px);
+  line-height: 1.45;
+  letter-spacing: -0.005em;
+  color: #0f172a;
   background: #ffffff;
-  border: 1px solid transparent !important;
-  box-shadow: none !important;
-  backdrop-filter: none !important;
-  -webkit-backdrop-filter: none !important;
+  border: 1px solid transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
   word-break: break-word;
   white-space: pre-wrap;
 }
-html[data-theme="white"] .chat-history .hist-msg.assistant .hist-body,
-html[data-theme="white"] #bubble-stack .bubble.assistant .bubble-body {
-  background: #f3f4f6 !important;
-  border-bottom-left-radius: 6px !important;
-  color: #0f172a !important;
+html[data-theme="white"] .chat-history .hist-msg.assistant .hist-body {
+  background: #f3f4f6;
+  border-bottom-left-radius: 6px;
 }
-html[data-theme="white"] .chat-history .hist-msg.user .hist-body,
-html[data-theme="white"] #bubble-stack .bubble.user .bubble-body {
-  background: #dbeafe !important;
-  border-bottom-right-radius: 6px !important;
-  color: #0f172a !important;
+html[data-theme="white"] .chat-history .hist-msg.user .hist-body {
+  background: #dbeafe;
+  border-bottom-right-radius: 6px;
 }
 /* Partial-streaming bubble (growing AI response) = same shape, slightly lower opacity */
 html[data-theme="white"] .chat-history .hist-body.partial,
@@ -5632,25 +4750,14 @@ html[data-theme="white"] .bubble-body.partial {
   opacity: 0.92;
 }
 
-/* 5) AVATAR circles outside each bubble (painted on the row wrapper ::before)
-      Assistant: blue circle + inline robot SVG,  LEFT, outside bubble
-      User     : light-blue "AV"/"EM" initials, RIGHT, outside bubble
-      Initials placeholder for user is pulled from data-user-initials attribute
-      if the chat renderer writes it; fallback is the letters "AV" (matches the
-      Alessandro V… user shown in the customer screenshot).
-
-      NOTE 2026-09-10: we replaced the 🤖 emoji with a tiny hand-crafted SVG
-      robot icon painted via background-image. The emoji rendered as a
-      crown-head robot on some Android versions; the SVG is pixel-perfect
-      cross-platform and matches the deep-blue assistant avatar.   */
-html[data-theme="white"] .chat-history .hist-msg::before,
-html[data-theme="white"] #bubble-stack .bubble::before {
-  position: absolute !important;
-  top: 22px !important; /* line up with bubble body, below the meta line */
+/* Decorative avatars accompany the accessible message author text. */
+html[data-theme="white"] .chat-history .hist-msg::before {
+  position: absolute;
+  top: 22px;
   width: 36px;
   height: 36px;
   border-radius: 999px;
-  display: inline-flex !important;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
@@ -5661,129 +4768,28 @@ html[data-theme="white"] #bubble-stack .bubble::before {
   content: "";
   box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
 }
-html[data-theme="white"] .chat-history .hist-msg.assistant::before,
-html[data-theme="white"] #bubble-stack .bubble.assistant::before {
-  left: -52px;
-  background-color: #2563eb !important;
+html[data-theme="white"] .chat-history .hist-msg.assistant::before {
+  left: -40px;
+  background-color: #2563eb;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='7' width='18' height='12' rx='3'/><path d='M12 2v4'/><circle cx='9' cy='13' r='1.1' fill='white' stroke='none'/><circle cx='15' cy='13' r='1.1' fill='white' stroke='none'/><path d='M9 17h6'/></svg>");
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 20px 20px;
   border: 1px solid rgba(59, 130, 246, 0.25);
 }
-/* Remove the old ::after with the robot emoji that was overlaying the avatar. */
-html[data-theme="white"] .chat-history .hist-msg.assistant::after,
-html[data-theme="white"] #bubble-stack .bubble.assistant::after {
-  display: none !important;
-  content: none !important;
-}
-html[data-theme="white"] .chat-history .hist-msg.user::before,
-html[data-theme="white"] #bubble-stack .bubble.user::before {
-  right: -52px;
+html[data-theme="white"] .chat-history .hist-msg.user::before {
+  right: -40px;
   background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
   border: 1px solid rgba(96, 165, 250, 0.35);
-  /* Pull initials from a custom data attribute when chat.js sets it, else show
-     "AV" as a generic 2-letter default that matches the customer screenshot */
-  content: attr(data-user-initials, "AV");
+  content: attr(data-user-initials);
   align-items: center;
   justify-content: center;
 }
-
-/* 6) META label "name HH:MM" on the same single line, ONE pseudo-element.
-      ──── USER FIX 2026-09-10: remove the hardcoded user name ────
-      The previous iteration hardcoded the Spanish names "Vocero" (assistant)
-      and "Emilio" (user) plus a fake "16:14" timestamp. Instead we now read
-      BOTH values dynamically from data attributes written by ui/chat.js at the
-      moment each row is inserted:
-        • assistant: data-asst-name + data-timestamp  on .hist-body
-        • user     : data-user-name + data-timestamp  on .hist-body
-      Names fall back to "Vocero" / "Usuario" (Spanish generic) when chat.js
-      hasn't resolved a profile yet; timestamp falls back to "" which leaves
-      just the name visible. The concat format uses two non-breaking spaces
-      (\A0\A0 = U+00A0 ×2) between name and time, matching the screenshot.
-
-      ──── ROOT CAUSE FIX of the previous "timestamp in the middle of the page" bug ────
-      The earlier implementation split the meta across TWO selectors that used
-      different relative reference boxes:
-        • `> :first-child::before` → targetted .hist-role (hidden, display:none)
-          with `position:absolute; top:-20px` which had NO containing block, so
-          the browser walked up and used chat-history (full-width) → label
-          ended up at left=50% → "16:14" alone in the page centre.
-      NEW approach:
-        • Use the BUBBLE body itself (.hist-body / .bubble-body) as the single
-          relative reference box. Paint both NAME + HH:MM in ONE `content:`
-          string via `.hist-body::before`. Same absolute positioning as
-          before, but now contained inside the width of each bubble → name and
-          timestamp sit *perfectly aligned* above their bubble on every row,
-          at any viewport width.   */
-html[data-theme="white"] .chat-history .hist-msg.assistant .hist-body::before,
-html[data-theme="white"] #bubble-stack .bubble.assistant .bubble-body::before {
-  /* Assistant meta = "<real assistant name>  <real HH:MM>" */
-  content: attr(data-asst-name, "Vocero") "\A0\A0" attr(data-timestamp, "");
-  position: absolute;
-  top: -22px;
-  left: 0;
-  width: auto;
-  height: 16px;
-  line-height: 16px;
-  font-size: 12.5px;
-  font-weight: 600;
-  color: #64748b;
-  letter-spacing: -0.01em;
-  white-space: nowrap;
-  pointer-events: none;
-  display: inline-block !important;
-}
-html[data-theme="white"] .chat-history .hist-msg.user .hist-body::before,
-html[data-theme="white"] #bubble-stack .bubble.user .bubble-body::before {
-  /* User meta = "<real user name>  <real HH:MM>"
-     Falls back to "Usuario" when no caller profile has been injected yet,
-     never "Emilio" — user explicitly flagged the hard-coded name as wrong. */
-  content: attr(data-user-name, "Usuario") "\A0\A0" attr(data-timestamp, "");
-  position: absolute;
-  top: -22px;
-  right: 0;
-  width: auto;
-  height: 16px;
-  line-height: 16px;
-  font-size: 12.5px;
-  font-weight: 600;
-  color: #64748b;
-  letter-spacing: -0.01em;
-  white-space: nowrap;
-  pointer-events: none;
-  text-align: right;
-  display: inline-block !important;
-}
-/* Tool-call rows: shrink to pale inline card with no avatar */
-html[data-theme="white"] .chat-history .hist-msg.tool,
-html[data-theme="white"] .chat-history .bubble.tool {
-  max-width: 100% !important;
-  padding-top: 0;
-  margin: 6px 0 !important;
-  align-self: center !important;
-}
-html[data-theme="white"] .chat-history .hist-msg.tool::before,
-html[data-theme="white"] .chat-history .bubble.tool::before,
-html[data-theme="white"] .chat-history .hist-msg.tool::after,
-html[data-theme="white"] .chat-history .bubble.tool::after {
-  display: none !important;
+/* Tool rows have no speaker avatar. */
+html[data-theme="white"] .chat-history .hist-msg.tool::before {
+  display: none;
   content: none;
 }
-/* Also strip the floating meta from tool rows (they don't have a human role). */
-html[data-theme="white"] .chat-history .hist-msg.tool .hist-body::before {
-  content: none !important;
-  display: none !important;
-}
-
-/* ── App footer: thin white bar, just a subtle separator + brand line ─── */
-html[data-theme="white"] .app-footer {
-  background: #ffffff;
-  backdrop-filter: none;
-  -webkit-backdrop-filter: none;
-  padding-top: 10px;
-  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
-}
 html[data-theme="white"] .app-footer::before {
   background: linear-gradient(
     90deg,
@@ -5854,21 +4860,6 @@ html[data-theme="white"] .btn.secondary:hover {
   background: #e2e8f0;
 }
 
-/* ── Reports sidebar restyle (the off-canvas panel + left sidebar) ───── */
-html[data-theme="white"] .reports-sidebar,
-html[data-theme="white"] .reports-sidebar-inner {
-  background: #ffffff;
-  color: #0f172a;
-  border-color: rgba(15, 23, 42, 0.08);
-}
-html[data-theme="white"] .reports-sidebar-header {
-  border-bottom-color: rgba(15, 23, 42, 0.08);
-  color: #0f172a;
-}
-html[data-theme="white"] .reports-sidebar-header h2 {
-  color: #0f172a;
-}
-
 /* ── User profile modal ─────────────────────────────────────────────── */
 html[data-theme="white"] .user-profile-card {
   background: #ffffff;
@@ -5898,12 +4889,6 @@ html[data-theme="white"] .switch input:checked + .switch-track {
   html[data-theme="white"] .topbar {
     padding: 14px 14px 4px;
   }
-  html[data-theme="white"] .status-card {
-    margin: 10px 14px 4px;
-  }
-  html[data-theme="white"] .chat-panel {
-    margin: 4px 14px 0;
-  }
   html[data-theme="white"] .white-waveform-left {
     left: calc(50% - 58px - 72px);
   }
@@ -5918,9 +4903,6 @@ html[data-theme="white"] .switch input:checked + .switch-track {
   }
 }
 @media (max-height: 640px) {
-  html[data-theme="white"] .status-card {
-    padding: 10px;
-  }
   html[data-theme="white"] .white-mic-stage {
     padding: 14px 0 4px;
   }