refactor(frontend): migrate page layout and transcripts to Tailwind

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;
+  }
+}

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;