From f3bae8ae0ccfac57220d4837594516a44427bf1b Mon Sep 17 00:00:00 2001
From: Alvaro Parker <aparker@azurian.com>
Date: Wed, 7 Oct 2026 09:58:51 -0300
Subject: [PATCH] refactor(frontend): migrate page layout and transcripts to
 Tailwind

---
 vocero-frontend/src/App.tsx                   | 128 ++++++++++--------
 vocero-frontend/src/components/Bubbles.tsx    |  18 ++-
 .../src/components/Conversation.tsx           | 125 +++++++++++------
 .../src/components/ReportsPanel.tsx           |  18 ++-
 .../src/components/WakeWordControl.tsx        |  10 +-
 vocero-frontend/src/styles.css                |   1 +
 vocero-frontend/src/styles/surfaces.css       |  64 +++++++++
 vocero-frontend/src/styles/theme.css          |  27 ++++
 8 files changed, 279 insertions(+), 112 deletions(-)
 create mode 100644 vocero-frontend/src/styles/surfaces.css

diff --git a/vocero-frontend/src/App.tsx b/vocero-frontend/src/App.tsx
index 4df3617..4fd4200 100644
--- a/vocero-frontend/src/App.tsx
+++ b/vocero-frontend/src/App.tsx
@@ -8,6 +8,7 @@ import { ReportsPanel } from "./components/ReportsPanel";
 import { AboutDialog, ProfileDialog, RagDialog, SettingsDialog, ToolsDialog } from "./components/SettingsDialogs";
 import { VoiceStage } from "./components/VoiceStage";
 import { WakeWordControl } from "./components/WakeWordControl";
+import { Button, DialogFooter, DialogIntro, IconButton } from "./components/ui";
 import { useMediaQuery } from "./hooks/use-media-query";
 import { initials, profileName } from "./lib/context";
 import { isDebug } from "./lib/settings";
@@ -59,26 +60,28 @@ export default function App() {
   };
   if (state.loading) {
     return (
-      <main className="loading-screen" role="status">
+      <main
+        className="fixed inset-0 z-1000 grid place-items-center bg-white font-sans text-[16px] font-medium text-slate-700"
+        role="status"
+      >
         Preparando Vocero…
       </main>
     );
   }
   if (!state.configReady) {
     return (
-      <main className="loading-screen">
-        <div className="startup-error">
+      <main className="fixed inset-0 z-1000 grid place-items-center bg-white font-sans text-[16px] font-medium text-slate-700">
+        <div className="max-w-lg p-6 text-center">
           <h1>No pudimos preparar Vocero</h1>
           <p role="alert">{state.configError}</p>
-          <button
-            className="btn primary"
-            type="button"
+          <Button
+            variant="primary"
             onClick={() => {
               void controller.initialize();
             }}
           >
             Reintentar
-          </button>
+          </Button>
         </div>
       </main>
     );
@@ -92,49 +95,53 @@ export default function App() {
             controller.dismissUnlock();
           }}
         >
-          <p className="tools-intro">
+          <DialogIntro>
             Activa el micrófono para hablar con Vocero. Puedes detener la conversación en cualquier momento.
-          </p>
-          <footer className="modal-footer">
-            <button
-              className="btn secondary"
-              type="button"
+          </DialogIntro>
+          <DialogFooter>
+            <Button
               onClick={() => {
                 controller.dismissUnlock();
               }}
             >
               Ahora no
-            </button>
-            <button
-              className="btn primary"
-              type="button"
+            </Button>
+            <Button
+              variant="primary"
               onClick={() => {
                 void controller.start();
               }}
             >
               Empezar a hablar
-            </button>
-          </footer>
+            </Button>
+          </DialogFooter>
         </Dialog>
       )}
-      <div id="app" className={hasReports ? "has-reports" : ""}>
-        <header className="topbar">
-          <div className="brand">
-            <div className="ident">
-              <div className="ident-head">
+      <div id="app" className={`flex w-full min-w-0 flex-1 flex-col ${hasReports ? "lg:pl-[320px]" : ""}`}>
+        <header className="relative z-2 mt-[max(6px,calc(env(safe-area-inset-top,0px)*0.2))] flex w-full flex-none flex-wrap items-start justify-between gap-2 px-4 pt-4 white:static white:grid white:auto-rows-min white:grid-cols-[52px_minmax(0,1fr)_52px] white:justify-items-center white:gap-x-1 white:gap-y-0 white:px-2.5 white:pt-4 white:max-[480px]:px-1.5 compact:gap-3 [@media(max-height:560px)]:px-3.5 [@media(max-height:560px)]:pt-1.5 [@media(max-height:780px)]:px-5 [@media(max-height:780px)]:pt-3">
+          <div className="brand-art relative flex min-w-0 flex-[1_1_360px] items-start gap-2.5 overflow-hidden rounded-panel border border-solid border-line px-3 py-2.5 text-[15px] font-semibold tracking-[0.01em] text-muted white:col-start-2 white:row-start-1 white:m-0 white:w-full white:flex-none white:justify-center white:rounded-none white:border-0 white:p-0 white:text-center compact:text-[14px]">
+            <div className="flex w-full min-w-0 items-center justify-between gap-3 white:flex-col white:justify-center white:gap-0.5 white:px-1">
+              <div className="flex items-center gap-[9px] white:mx-auto white:w-full white:flex-col white:justify-center white:gap-0.5">
                 <h1 className="m-0 leading-none">
-                  <a className="ident-title" href={window.location.pathname + window.location.search}>
+                  <a
+                    className="block border-0 bg-(image:--brand-gradient) bg-clip-text text-[24px] leading-[1.1] font-semibold tracking-[0.005em] text-transparent hover:underline hover:underline-offset-2 white:bg-none white:text-[clamp(24px,6vw,32px)] white:leading-[1.05] white:font-extrabold white:tracking-[-0.02em] white:whitespace-nowrap white:text-foreground compact:text-[22px] [@media(max-height:560px)]:text-[17px] [@media(max-height:780px)]:text-[20px]"
+                    href={window.location.pathname + window.location.search}
+                  >
                     Vocero
                   </a>
                 </h1>
-                {white && <p className="ident-subtitle">Agente conversacional</p>}
+                {white && (
+                  <p className="m-0 text-[clamp(12px,2.6vw,14px)] leading-[1.3] font-medium tracking-[-0.005em] whitespace-nowrap text-slate-900/60">
+                    Agente conversacional
+                  </p>
+                )}
               </div>
             </div>
           </div>
           {white && name && (
             <button
               id="ident-user-name"
-              className="ident-user-name"
+              className="z-2 col-start-3 row-start-1 mr-0.5 inline-flex size-[42px] cursor-pointer items-center justify-center self-center justify-self-end rounded-full border-2 border-solid border-brand-secondary/25 bg-linear-to-br from-speaking to-accent p-0 text-[13px] font-bold text-white shadow-[0_3px_10px_rgb(37_99_235/0.22)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
               type="button"
               aria-label={`Ver datos de ${name}`}
               aria-haspopup="dialog"
@@ -146,9 +153,8 @@ export default function App() {
             </button>
           )}
           {hasReports && !desktop && (
-            <button
+            <IconButton
               id="reports-sidebar-toggle"
-              className="icon-btn"
               type="button"
               aria-label="Abrir panel de reportes"
               aria-expanded={reportsOpen}
@@ -158,69 +164,69 @@ export default function App() {
               }}
             >
               <PanelLeft size={18} />
-              <span id="reports-sidebar-badge" className="chat-badge" data-count={state.reports?.count}>
+              <span
+                id="reports-sidebar-badge"
+                className="pointer-events-none absolute -top-[3px] -right-[3px] inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-linear-to-br from-brand-secondary to-brand px-[5px] text-[10px] leading-[18px] font-bold text-white"
+                data-count={state.reports?.count}
+              >
                 {state.reports?.count}
               </span>
-            </button>
+            </IconButton>
           )}
           {debug && (
-            <div className="topbar-right" data-debug-enabled="true">
-              <button
-                className="icon-btn"
-                type="button"
+            <div
+              className="flex items-center gap-2 white:col-span-full white:row-start-2 white:mt-3 white:flex-wrap white:justify-center compact:flex-wrap [&_svg]:size-5"
+              data-debug-enabled="true"
+            >
+              <IconButton
                 aria-label="Acerca de"
                 onClick={() => {
                   setModal("about");
                 }}
               >
                 <Info size={18} />
-              </button>
-              <button
-                className="icon-btn"
-                type="button"
+              </IconButton>
+              <IconButton
                 aria-label="Herramientas"
                 onClick={() => {
                   setModal("tools");
                 }}
               >
                 <Wrench size={18} />
-              </button>
-              <button
-                className="icon-btn"
-                type="button"
+              </IconButton>
+              <IconButton
                 aria-label="Contexto RAG personalizado"
                 onClick={() => {
                   setModal("rag");
                 }}
               >
                 <BookOpen size={18} />
-              </button>
-              <button
-                className="icon-btn"
-                type="button"
+              </IconButton>
+              <IconButton
                 aria-label="Configuración"
                 onClick={() => {
                   setModal("settings");
                 }}
               >
                 <Settings size={18} />
-              </button>
+              </IconButton>
             </div>
           )}
         </header>
         {state.error && (
-          <div className="app-error" role="alert">
+          <div
+            className="mx-auto my-3 flex max-w-[680px] items-center gap-3 rounded-xl border border-solid border-error bg-surface-raised px-4 py-2.5 text-[13px]"
+            role="alert"
+          >
             <span>{state.error}</span>
-            <button
-              className="icon-btn shrink-0"
-              type="button"
+            <IconButton
               aria-label="Cerrar aviso"
               onClick={() => {
                 controller.dismissError();
               }}
             >
               <X size={16} />
-            </button>
+            </IconButton>
           </div>
         )}
         <VoiceStage state={state} controller={controller} />
@@ -251,11 +257,21 @@ 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="Información de la aplicación">
-        <a className="feedback-link" href="https://tally.so/r/pb8LWq" target="_blank" rel="noopener noreferrer">
+      <footer
+        className={`relative flex flex-none flex-col items-center gap-2 px-3 pt-4 pb-[max(12px,env(safe-area-inset-bottom))] text-center before:absolute before:top-0 before:left-1/2 before:h-px before:w-[min(640px,70vw)] before:-translate-x-1/2 before:bg-linear-to-r before:from-transparent before:via-brand/40 before:to-transparent before:opacity-70 before:content-[''] ${hasReports ? "lg:ml-[320px]" : ""}`}
+        aria-label="Información de la aplicación"
+      >
+        <a
+          className="rounded border-0 p-1 text-[13px] text-muted underline underline-offset-3 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-accent"
+          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>
+        <span className="max-w-full bg-(image:--brand-gradient) bg-clip-text text-[clamp(10px,1.5vw,11px)] leading-[1.35] font-medium tracking-[0.18em] wrap-anywhere text-transparent uppercase white:bg-none white:font-semibold white:tracking-[0.12em] white:text-slate-900/60">
+          Azurian Vocero en tiempo real ver. Beta 2.1
+        </span>
       </footer>
     </>
   );
diff --git a/vocero-frontend/src/components/Bubbles.tsx b/vocero-frontend/src/components/Bubbles.tsx
index e078752..473d353 100644
--- a/vocero-frontend/src/components/Bubbles.tsx
+++ b/vocero-frontend/src/components/Bubbles.tsx
@@ -20,21 +20,29 @@ function Bubble({ message, userName }: { message: Message; userName: string }) {
     return null;
   }
   return (
-    <div className={`bubble ${message.role} in`}>
-      <div className="bubble-role">
+    <div
+      className={`pointer-events-auto max-w-full rounded-panel border border-solid border-line bg-surface-raised px-3.5 py-2.5 text-[14px] leading-[1.5] wrap-anywhere shadow-[0_4px_18px_rgb(0_0_0/0.32)] compact:text-[13px] ${message.role === "assistant" ? "self-end" : "self-start"} ${message.role === "tool" ? "flex items-center gap-2 font-mono text-[13px] text-muted" : ""}`}
+    >
+      <div
+        className={`mb-1 font-mono text-[11px] font-medium tracking-[0.1em] uppercase opacity-70 compact:text-[10px] ${message.role === "user" ? "text-voice-user" : message.role === "assistant" ? "text-voice-assistant" : "text-voice-tool"}`}
+      >
         {message.role === "user" ? userName : message.role === "tool" ? "Herramienta" : "Vocero"}
       </div>
       {message.role === "assistant" ? (
-        <AssistantMarkdown text={message.text} className="bubble-body" />
+        <AssistantMarkdown text={message.text} className="max-h-60 overflow-auto" />
       ) : (
-        <div className="bubble-body">{message.role === "tool" ? message.toolName : message.text}</div>
+        <div className="max-h-60 overflow-auto">{message.role === "tool" ? message.toolName : message.text}</div>
       )}
     </div>
   );
 }
 export const Bubbles = memo(function Bubbles({ messages, userName }: { messages: Message[]; userName: string }) {
   return (
-    <div className="bubble-stack" aria-hidden="true" inert>
+    <div
+      className="pointer-events-none fixed top-24 right-7 z-100 flex w-[min(300px,calc(100vw-56px))] flex-col gap-2 compact:hidden"
+      aria-hidden="true"
+      inert
+    >
       {messages.slice(-3).map((message) => (
         <Bubble key={message.id} message={message} userName={userName} />
       ))}
diff --git a/vocero-frontend/src/components/Conversation.tsx b/vocero-frontend/src/components/Conversation.tsx
index 7cdb560..8a566b4 100644
--- a/vocero-frontend/src/components/Conversation.tsx
+++ b/vocero-frontend/src/components/Conversation.tsx
@@ -1,4 +1,4 @@
-import { ArrowDown, Download, MessageCircle, Wrench } from "lucide-react";
+import { ArrowDown, Bot, Download, MessageCircle, Wrench } from "lucide-react";
 import { memo, useEffect, useRef, useState } from "react";
 
 import { initials } from "../lib/context";
@@ -6,49 +6,84 @@ import type { ConnectionStatus } from "../lib/contracts";
 import { displayTime, exportConversation, type Message } from "../lib/messages";
 import { LIVE_STATES } from "../realtime/controller";
 import { AssistantMarkdown } from "./AssistantMarkdown";
+import { Button, IconButton } from "./ui";
+
+const messagePositions = {
+  user: "mr-auto self-start white:my-1 white:mr-10 white:ml-auto white:self-end",
+  assistant: "ml-auto self-end white:my-1 white:mr-auto white:ml-10 white:self-start",
+};
+const messageSurfaces = {
+  user: "border-(--message-user-border) [background:var(--message-user-background)] shadow-(--message-user-shadow) white:rounded-br-md",
+  assistant:
+    "border-(--message-assistant-border) [background:var(--message-assistant-background)] shadow-(--message-assistant-shadow) white:rounded-bl-md",
+};
 
 const MessageRow = memo(function MessageRow({ message, userName }: { message: Message; userName: string }) {
   const [expanded, setExpanded] = useState(false);
   const time = displayTime(message.timestamp);
   if (message.role === "tool") {
     return (
-      <div className="hist-msg tool">
-        <div className="hist-role">Llamada a herramienta</div>
+      <div className="flex max-w-full min-w-0 shrink-0 flex-col gap-1.5 self-start white:my-1">
+        <div className="px-1 font-mono text-[11px] font-bold tracking-[0.14em] text-voice-tool uppercase compact:text-[10px]">
+          Llamada a herramienta
+        </div>
         <button
-          className="hist-tool-header"
+          className="flex w-full cursor-pointer items-center gap-2 rounded-t-panel border border-solid border-processing/25 bg-surface-overlay px-3 py-2 text-left font-sans text-[14px] font-medium text-foreground hover:bg-processing/15 focus-visible:outline-2 focus-visible:outline-accent compact:text-[13px]"
           type="button"
           aria-expanded={expanded}
           onClick={() => {
             setExpanded(!expanded);
           }}
         >
-          <Wrench className="hist-tool-icon" />
-          <span className="hist-tool-name">{message.toolName}</span>
+          <Wrench className="size-[13px] shrink-0 text-processing" />
+          <span className="font-mono text-[13px] font-semibold text-voice-tool compact:text-[12px]">
+            {message.toolName}
+          </span>
         </button>
-        <div className={`hist-tool-body ${expanded ? "open" : ""}`}>
-          <div className="hist-tool-label">Entrada</div>
-          <pre className="hist-tool-block">{message.toolArguments}</pre>
-          <div className="hist-tool-label">Salida</div>
-          <pre className="hist-tool-block hist-tool-output">{message.text}</pre>
-        </div>
+        {expanded && (
+          <div className="rounded-b-panel border border-t-0 border-solid border-processing/25 bg-surface px-3 pt-2.5 pb-3">
+            <div className="mb-1 font-mono text-[10px] tracking-[0.08em] text-faint uppercase">Entrada</div>
+            <pre className="m-0 overflow-x-auto font-mono text-[12px] leading-[1.65] wrap-anywhere whitespace-pre-wrap text-muted compact:text-[11px]">
+              {message.toolArguments}
+            </pre>
+            <div className="mt-2 mb-1 font-mono text-[10px] tracking-[0.08em] text-faint uppercase">Salida</div>
+            <pre className="m-0 overflow-x-auto font-mono text-[12px] leading-[1.65] wrap-anywhere whitespace-pre-wrap text-foreground compact:text-[11px]">
+              {message.text}
+            </pre>
+          </div>
+        )}
       </div>
     );
   }
+  const bodyClass = `min-w-0 rounded-[14px] border border-solid px-3.5 py-[11px] text-[14px] leading-[1.55] wrap-anywhere text-foreground backdrop-blur-[8px] backdrop-saturate-130 white:rounded-[18px] white:px-[15px] white:py-3 white:text-[clamp(14.5px,3.3vw,16.5px)] white:leading-[1.45] white:tracking-[-0.005em] white:backdrop-filter-none ${messageSurfaces[message.role]} ${message.interrupted ? "opacity-70" : message.partial ? "opacity-68 white:opacity-92" : ""}`;
   return (
     <div
-      className={`hist-msg ${message.role} ${message.interrupted ? "interrupted" : ""}`}
-      data-user-initials={initials(userName)}
+      className={`relative flex max-w-[86%] min-w-0 shrink-0 flex-col gap-1.5 white:max-w-[calc(100%-40px)] ${messagePositions[message.role]}`}
     >
-      <div className="hist-meta">
-        <span>{message.role === "user" ? userName : "Vocero"}</span>
-        <time dateTime={message.timestamp}>{time}</time>
+      <span
+        aria-hidden="true"
+        className={`absolute top-[22px] z-2 hidden size-7 items-center justify-center rounded-full border border-solid text-[11px] font-bold tracking-[-0.01em] text-white shadow-[0_2px_8px_rgb(15_23_42/0.1)] white:inline-flex ${message.role === "user" ? "-right-10 border-brand-tertiary/35 bg-linear-to-br from-brand-secondary to-brand-tertiary" : "-left-10 border-brand-secondary/25 bg-accent"}`}
+      >
+        {message.role === "user" ? initials(userName) : <Bot size={20} strokeWidth={1.8} />}
+      </span>
+      <div
+        className={`flex flex-wrap items-baseline gap-x-2.5 gap-y-1 text-[12px] text-muted white:text-slate-500 ${message.role === "user" ? "white:justify-end" : ""}`}
+      >
+        <span className="font-semibold wrap-anywhere">{message.role === "user" ? userName : "Vocero"}</span>
+        <time className="whitespace-nowrap" dateTime={message.timestamp}>
+          {time}
+        </time>
       </div>
       {message.role === "assistant" ? (
-        <AssistantMarkdown text={message.text} className={`hist-body ${message.partial ? "partial" : ""}`} />
+        <AssistantMarkdown text={message.text} className={bodyClass} />
       ) : (
-        <div className={`hist-body ${message.partial ? "partial" : ""}`}>{message.text}</div>
+        <div className={`${bodyClass} whitespace-pre-wrap`}>{message.text}</div>
+      )}
+      {message.interrupted && (
+        <div className="self-end px-0.5 font-mono text-[10px] font-medium tracking-[0.1em] text-faint uppercase">
+          Interrumpido
+        </div>
       )}
-      {message.interrupted && <div className="hist-note">Interrumpido</div>}
     </div>
   );
 });
@@ -77,26 +112,35 @@ export const Conversation = memo(function Conversation({
   const live = LIVE_STATES.has(status);
   const waiting = ["connecting", "queued", "your-turn"].includes(status);
   return (
-    <section id="chat-panel" className="chat-panel chat-panel-inline" aria-label="Transcripción de la conversación">
-      <div className="chat-panel-inner">
-        <header className="chat-panel-header">
-          <h2>Conversación</h2>
-          <div className="chat-header-actions" role="group" aria-label="Acciones de la conversación">
+    <section
+      id="chat-panel"
+      className="relative z-1 mx-3 mt-2 flex h-[clamp(240px,45dvh,640px)] min-w-0 flex-[1_0_auto] flex-col white:rounded-[20px] white:border white:border-solid white:border-line white:bg-surface white:shadow-panel compact:mx-0"
+      aria-label="Transcripción de la conversación"
+    >
+      <div className="relative mx-auto flex h-full min-h-0 w-full max-w-[920px] flex-col overflow-hidden p-3 compact:p-2.5">
+        <header className="flex flex-none flex-wrap items-center justify-between gap-2 pb-2.5 white:border-0 white:border-b white:border-solid white:border-line">
+          <h2 className="m-0 min-w-0 bg-(image:--brand-gradient) bg-clip-text text-[15px] font-extrabold tracking-[0.04em] text-transparent uppercase opacity-92 white:bg-none white:text-[clamp(18px,4.3vw,22px)] white:font-bold white:tracking-[-0.01em] white:text-foreground white:normal-case white:opacity-100 compact:text-[13px] white:compact:text-[17px]">
+            Conversación
+          </h2>
+          <div
+            className="inline-flex min-w-0 flex-none flex-wrap items-center justify-end gap-1.5"
+            role="group"
+            aria-label="Acciones de la conversación"
+          >
             {white && (
               <span
-                className="chat-status-pill"
+                className="inline-flex flex-none items-center gap-[7px] rounded-full bg-slate-100 py-[5px] pr-[11px] pl-2 text-[12.5px] font-semibold text-slate-600 data-[status=error]:bg-red-50 data-[status=error]:text-red-700 data-[status=online]:bg-emerald-50 data-[status=online]:text-green-700 data-[status=waiting]:bg-amber-50 data-[status=waiting]:text-amber-900 compact:px-[7px] compact:text-[11px]"
                 data-status={live ? "online" : status === "error" ? "error" : waiting ? "waiting" : "idle"}
                 role="status"
               >
-                <span className="chat-status-dot" aria-hidden="true" />
+                <span className="block size-[9px] flex-none rounded-full bg-current" aria-hidden="true" />
                 <span>
                   {live ? "En línea" : status === "error" ? "Sin conexión" : waiting ? "Conectando" : "Sin sesión"}
                 </span>
               </span>
             )}
-            <button
-              className="chat-export-btn icon-btn"
-              type="button"
+            <IconButton
+              round
               aria-label="Descargar conversación"
               title="Descargar conversación (JSON + TXT)"
               disabled={!messages.length}
@@ -105,13 +149,13 @@ export const Conversation = memo(function Conversation({
               }}
             >
               <Download size={18} />
-            </button>
+            </IconButton>
           </div>
         </header>
         <div
           ref={history}
           id="chat-history"
-          className="chat-history"
+          className="flex min-h-0 flex-1 [scrollbar-width:thin] flex-col gap-3.5 overflow-x-hidden overflow-y-auto overscroll-contain px-1 py-3 [overflow-anchor:none] focus-visible:rounded-lg focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent"
           role="log"
           tabIndex={0}
           aria-label="Mensajes de la conversación"
@@ -128,10 +172,12 @@ export const Conversation = memo(function Conversation({
           {messages.length ? (
             messages.map((message) => <MessageRow key={message.id} message={message} userName={userName} />)
           ) : (
-            <div className="chat-empty">
-              <MessageCircle aria-hidden="true" />
-              <span className="chat-empty-title">Aún no hay mensajes</span>
-              <span className="chat-empty-hint">
+            <div className="flex flex-1 flex-col items-center justify-center gap-1.5 py-12 text-muted white:text-slate-500">
+              <MessageCircle className="mb-1.5 opacity-80" aria-hidden="true" />
+              <span className="font-mono text-[12px] font-medium tracking-[0.14em] uppercase compact:text-[11px]">
+                Aún no hay mensajes
+              </span>
+              <span className="text-[13px] compact:text-[12px]">
                 {muted
                   ? "Activa el micrófono para hablar"
                   : live
@@ -144,9 +190,8 @@ export const Conversation = memo(function Conversation({
           )}
         </div>
         {showLatest && (
-          <button
-            className="jump-to-latest btn secondary"
-            type="button"
+          <Button
+            className="absolute right-[18px] bottom-[18px] z-2 inline-flex items-center gap-1.5 shadow-panel"
             onClick={() => {
               if (history.current) {
                 history.current.scrollTop = history.current.scrollHeight;
@@ -158,7 +203,7 @@ export const Conversation = memo(function Conversation({
           >
             <ArrowDown size={16} aria-hidden="true" />
             Ir al último mensaje
-          </button>
+          </Button>
         )}
       </div>
     </section>
diff --git a/vocero-frontend/src/components/ReportsPanel.tsx b/vocero-frontend/src/components/ReportsPanel.tsx
index 89ba47f..b94587a 100644
--- a/vocero-frontend/src/components/ReportsPanel.tsx
+++ b/vocero-frontend/src/components/ReportsPanel.tsx
@@ -5,8 +5,8 @@ import { Dialog } from "./Dialog";
 function ReportContent({ reports }: { reports: Reports }) {
   const suggestions = reportSuggestions(reports);
   return (
-    <div className="reports-content">
-      <div className="reports-hint">
+    <div>
+      <div className="report-art relative m-0 max-w-full rounded-control border border-solid p-3 text-[12px] leading-[1.3] text-muted">
         <p>{reports.count} reportes disponibles</p>
         <ul>
           {reports.hints.map((hint, index) => (
@@ -16,9 +16,9 @@ function ReportContent({ reports }: { reports: Reports }) {
         {reports.note && <p>{reports.note}</p>}
       </div>
       {suggestions.length > 0 && (
-        <div className="reports-suggestions">
-          <h3 className="reports-suggestions-title">Puedes preguntar</h3>
-          <ul className="reports-suggestions-list">
+        <div>
+          <h3>Puedes preguntar</h3>
+          <ul>
             {suggestions.map((suggestion) => (
               <li key={suggestion}>{suggestion}</li>
             ))}
@@ -41,8 +41,12 @@ export function ReportsPanel({
 }) {
   if (desktop) {
     return (
-      <aside id="reports-sidebar" className="reports-panel" aria-label="Reportes programados">
-        <h2>Reportes</h2>
+      <aside
+        id="reports-sidebar"
+        className="fixed inset-y-0 left-0 z-3 w-[320px] overflow-y-auto border-0 border-r border-solid border-line bg-surface-raised p-5"
+        aria-label="Reportes programados"
+      >
+        <h2 className="mt-0 mb-4 text-[18px]">Reportes</h2>
         <ReportContent reports={reports} />
       </aside>
     );
diff --git a/vocero-frontend/src/components/WakeWordControl.tsx b/vocero-frontend/src/components/WakeWordControl.tsx
index 81639f4..98319fa 100644
--- a/vocero-frontend/src/components/WakeWordControl.tsx
+++ b/vocero-frontend/src/components/WakeWordControl.tsx
@@ -4,7 +4,7 @@ import type { VoiceController } from "../realtime/controller";
 function WakeWordStatus({ controller }: { controller: VoiceController }) {
   const status = useWakeWord(true, controller);
   return (
-    <span role="status">
+    <span className="text-[12px] text-muted white:text-slate-500" role="status">
       {status === "listening"
         ? "Micrófono activo: escuchando la frase de activación."
         : status === "blocked"
@@ -18,8 +18,8 @@ export function WakeWordControl({ enabled, controller }: { enabled: boolean; con
     return null;
   }
   return (
-    <div className="wake-word-control">
-      <label>
+    <div className="grid gap-1 px-4 pb-3 text-center text-[13px]">
+      <label className="flex cursor-pointer items-center justify-center gap-2">
         <input
           type="checkbox"
           checked={enabled}
@@ -32,7 +32,9 @@ export function WakeWordControl({ enabled, controller }: { enabled: boolean; con
       {enabled ? (
         <WakeWordStatus controller={controller} />
       ) : (
-        <span role="status">Opcional. Se desactiva al detener la conversación.</span>
+        <span className="text-[12px] text-muted white:text-slate-500" role="status">
+          Opcional. Se desactiva al detener la conversación.
+        </span>
       )}
     </div>
   );
diff --git a/vocero-frontend/src/styles.css b/vocero-frontend/src/styles.css
index af72fe3..ee6db98 100644
--- a/vocero-frontend/src/styles.css
+++ b/vocero-frontend/src/styles.css
@@ -3,6 +3,7 @@
 @import "./styles/theme.css";
 @import "./styles/legacy-theme.css" layer(components);
 @import "./styles/layout.css" layer(components);
+@import "./styles/surfaces.css" layer(components);
 @import "tailwindcss/utilities.css" layer(utilities);
 
 @layer components {
diff --git a/vocero-frontend/src/styles/surfaces.css b/vocero-frontend/src/styles/surfaces.css
new file mode 100644
index 0000000..897a847
--- /dev/null
+++ b/vocero-frontend/src/styles/surfaces.css
@@ -0,0 +1,64 @@
+/* Decorative masks and layered glass surfaces; component layout uses utilities. */
+.brand-art {
+  background: linear-gradient(180deg, rgb(255 255 255 / 0.03), transparent), var(--glass);
+  backdrop-filter: blur(14px) saturate(135%);
+  box-shadow:
+    var(--shadow-glass),
+    inset 0 1px 0 rgb(255 255 255 / 0.05);
+}
+.brand-art::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--brand) 45%, transparent),
+    transparent 40%,
+    color-mix(in srgb, var(--brand-2) 35%, transparent)
+  );
+  mask:
+    linear-gradient(#000, #000) content-box,
+    linear-gradient(#000, #000);
+  mask-composite: exclude;
+  pointer-events: none;
+  opacity: 0.7;
+}
+.report-art {
+  background: linear-gradient(180deg, rgb(255 255 255 / 0.028), transparent), var(--glass);
+  border-color: color-mix(in srgb, var(--brand) 26%, var(--border));
+  backdrop-filter: blur(12px) saturate(135%);
+  box-shadow:
+    var(--shadow-glass),
+    0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent) inset,
+    0 0 20px -10px color-mix(in srgb, var(--brand) 55%, transparent);
+}
+.report-art::before {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--brand) 70%, transparent) 25%,
+    color-mix(in srgb, var(--brand-2) 60%, transparent) 55%,
+    color-mix(in srgb, var(--brand-3) 65%, transparent) 80%,
+    transparent
+  );
+  opacity: 0.85;
+  pointer-events: none;
+}
+@variant white {
+  .brand-art {
+    background: transparent;
+    backdrop-filter: none;
+    box-shadow: none;
+  }
+  .brand-art::before {
+    content: none;
+  }
+}
diff --git a/vocero-frontend/src/styles/theme.css b/vocero-frontend/src/styles/theme.css
index 0b67a14..2486f79 100644
--- a/vocero-frontend/src/styles/theme.css
+++ b/vocero-frontend/src/styles/theme.css
@@ -90,6 +90,27 @@
       0 0 40px -10px color-mix(in srgb, var(--brand) 60%, transparent),
       0 0 80px -30px color-mix(in srgb, var(--brand-2) 55%, transparent);
     --shadow-glass: 0 8px 40px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.18);
+    --message-user-background: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--voice-user) 10%, var(--bg-elev-2)),
+        color-mix(in srgb, var(--voice-user) 6%, var(--bg-elev-2))
+      )
+      padding-box;
+    --message-assistant-background: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--voice-assistant) 10%, var(--bg-elev-2)),
+        color-mix(in srgb, var(--voice-assistant) 5%, var(--bg-elev-2))
+      )
+      padding-box;
+    --message-user-border: color-mix(in srgb, var(--voice-user) 44%, var(--border));
+    --message-assistant-border: color-mix(in srgb, var(--voice-assistant) 42%, var(--border));
+    --message-user-shadow:
+      0 10px 28px rgb(0 0 0 / 0.28), 0 0 0 1px color-mix(in srgb, var(--voice-user) 16%, rgb(255 255 255 / 0.05)) inset,
+      0 0 28px -14px color-mix(in srgb, var(--voice-user) 66%, transparent);
+    --message-assistant-shadow:
+      0 10px 28px rgb(0 0 0 / 0.28),
+      0 0 0 1px color-mix(in srgb, var(--voice-assistant) 14%, rgb(255 255 255 / 0.05)) inset,
+      0 0 28px -14px color-mix(in srgb, var(--voice-assistant) 62%, transparent);
 
     color-scheme: dark;
   }
@@ -133,6 +154,12 @@
     --shadow-soft: 0 6px 20px rgba(15, 23, 42, 0.06);
     --shadow-glow-brand: 0 0 28px -6px rgba(37, 99, 235, 0.45), 0 0 60px -18px rgba(59, 130, 246, 0.4);
     --shadow-glass: 0 2px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
+    --message-user-background: #dbeafe;
+    --message-assistant-background: #f3f4f6;
+    --message-user-border: transparent;
+    --message-assistant-border: transparent;
+    --message-user-shadow: none;
+    --message-assistant-shadow: none;
 
     --radius-sm: 10px;
     --radius-md: 16px;