Capture — progress bar with elapsed/remaining time, 10 minute limit

app/capture/page.tsx

@@ -204,14 +204,28 @@ export default function CapturePage() {
           )}
           {state === 'recording' && (
             <>
-              <p style={{ fontSize: '11px', color: '#a32d2d', letterSpacing: '0.12em', textTransform: 'uppercase', margin: '0 0 6px' }}>
+              <p style={{ fontSize: '11px', color: '#a32d2d', letterSpacing: '0.12em', textTransform: 'uppercase', margin: '0 0 10px' }}>
                 recording
               </p>
-              {countdown <= 15 && (
+              <div style={{ width: '160px', height: '2px', background: 'var(--border)', borderRadius: '1px', overflow: 'hidden', marginBottom: '8px' }}>
-                <p style={{ fontSize: '20px', color: '#a32d2d', letterSpacing: '0.05em', margin: 0 }}>
+                <div style={{
-                  {countdown}s
+                  height: '100%',
+                  width: `${((MAX_SECONDS - countdown) / MAX_SECONDS) * 100}%`,
+                  background: countdown <= 30 ? '#a32d2d' : 'var(--accent)',
+                  borderRadius: '1px',
+                  transition: 'width 1s linear, background 0.5s ease',
+                }} />
+              </div>
+              <p style={{ fontSize: '11px', color: 'var(--text3)', letterSpacing: '0.08em', margin: 0, fontFamily: 'var(--font-mono)' }}>
+                {(() => {
+                  const elapsed = MAX_SECONDS - countdown;
+                  const em = Math.floor(elapsed / 60);
+                  const es = elapsed % 60;
+                  const rm = Math.floor(countdown / 60);
+                  const rs = countdown % 60;
+                  return `${em}:${es.toString().padStart(2,'0')} / ${rm}:${rs.toString().padStart(2,'0')} left`;
+                })()}
               </p>
-              )}
             </>
           )}
           {state === 'transcribing' && (