Fix elapsed display and tighten mobile transcript spacing

Author: yongchoooon

frontend/src/App.jsx

@@ -2408,9 +2408,30 @@ function App() {
   const displaySimulationTitle = activeSimulationEntry?.title || '';
   const displaySimulationStatus = activeSimulationEntry?.status || simulationStatus;
   const displaySimulationProgress = activeSimulationEntry?.progress || simulationProgress;
-  const displaySimulationElapsed = (
-    activeSimulationEntry?.elapsedSeconds ?? simulationElapsed
-  );
+  const displaySimulationElapsed = (() => {
+    const entryElapsed = Number.isFinite(activeSimulationEntry?.elapsedSeconds)
+      ? activeSimulationEntry.elapsedSeconds
+      : null;
+    const isActiveJob = activeSimulationEntry?.id
+      && simulationJobId
+      && activeSimulationEntry.id === simulationJobId;
+    if (isActiveJob) {
+      if (entryElapsed !== null && entryElapsed > 0) {
+        return entryElapsed;
+      }
+      return simulationElapsed;
+    }
+    if (activeSimulationEntry) {
+      if (entryElapsed !== null && entryElapsed > 0) {
+        return entryElapsed;
+      }
+      if (activeSimulationEntry.status === 'complete' && simulationElapsed > 0) {
+        return simulationElapsed;
+      }
+      return entryElapsed ?? simulationElapsed;
+    }
+    return simulationElapsed;
+  })();
 
   useEffect(() => {
     let ignore = false;

frontend/src/index.css

@@ -3890,6 +3890,19 @@ main.container {
   .debug-grid--bottom {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+
+  .transcript-entry {
+    margin-bottom: 0.45rem;
+  }
+
+  .transcript-entry__speaker {
+    margin-bottom: 0.2rem;
+    font-size: 0.88rem;
+  }
+
+  .transcript-entry__bubble {
+    padding: 0.65rem 0.8rem;
+  }
 }
 
 .debug-table {