feat(cdp): Phase 2 - real-time UI mirroring via screencast + remote input

public/css/style.css

@@ -610,3 +610,72 @@ html, body {
 
 .toast.error { border-color: var(--error); }
 .toast.success { border-color: var(--success); }
+
+/* ─── View Tabs (Chat ↔ Mirror) ──────────────────────── */
+.view-tabs {
+  display: flex;
+  gap: 2px;
+  background: var(--bg-tertiary);
+  border-radius: 8px;
+  padding: 2px;
+}
+
+.view-tab {
+  padding: 4px 12px;
+  background: none;
+  border: none;
+  border-radius: 6px;
+  color: var(--text-muted);
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+}
+
+.view-tab:hover {
+  color: var(--text-secondary);
+}
+
+.view-tab.active {
+  background: var(--accent-primary);
+  color: white;
+  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.3);
+}
+
+/* ─── Mirror Container ───────────────────────────────── */
+.mirror-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-primary);
+  position: relative;
+  overflow: hidden;
+}
+
+.mirror-container canvas {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  cursor: default;
+  outline: none;
+  border-radius: 4px;
+}
+
+.mirror-container canvas:focus {
+  box-shadow: 0 0 0 2px var(--accent-primary);
+}
+
+.mirror-hint {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--text-muted);
+  font-size: 14px;
+  pointer-events: none;
+  animation: pulse 1.5s infinite;
+}
+