@jay-framework/aiditor 0.18.4 → 0.19.3

package/dist/pages/aiditor/page.css

@@ -1 +1,2259 @@
-/* AIditor page: styles live inline in page.jay-html for POC parity with aditor-poc. */
+/* AIditor page styles — mirrored inline in page.jay-html for reliable dev rendering.
+   Keep in sync when editing; plugin route also loads this file from dist/. */
+
+:root {
+  --harmony-bg-workspace: #eef0f4;
+  --harmony-bg-surface: #ffffff;
+  --harmony-bg-subtle: #f7f8fa;
+  --harmony-bg-hover: #f0f2f5;
+  --harmony-border: #dfe3eb;
+  --harmony-border-strong: #c5cdd8;
+  --harmony-primary: #116dff;
+  --harmony-primary-hover: #0d5ee0;
+  --harmony-primary-soft: rgba(17, 109, 255, 0.1);
+  --harmony-text: #162d3d;
+  --harmony-text-secondary: #5a6b7d;
+  --harmony-text-muted: #8f9bb0;
+  --harmony-danger: #e84c3d;
+  --harmony-danger-soft: #fef2f1;
+  --harmony-success: #00a862;
+  --harmony-success-soft: #e8f8f0;
+  --harmony-warning: #f5a623;
+  --harmony-warning-soft: #fff8e6;
+  --harmony-shadow-sm: 0 1px 4px rgba(22, 45, 61, 0.06);
+  --harmony-shadow-md: 0 4px 24px rgba(22, 45, 61, 0.1);
+  --harmony-shadow-lg: 0 8px 40px rgba(22, 45, 61, 0.12);
+  --harmony-radius-sm: 6px;
+  --harmony-radius-md: 10px;
+  --harmony-radius-lg: 16px;
+  --harmony-radius-pill: 999px;
+  --harmony-sidebar-width: 52px;
+  --harmony-global-bar-height: 52px;
+  --harmony-secondary-bar-height: 44px;
+  --harmony-font: "Madefor", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --harmony-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  background: var(--harmony-bg-workspace);
+  color: var(--harmony-text);
+  font-family: var(--harmony-font);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── Setup screen ── */
+.setup-screen {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--harmony-bg-workspace);
+  gap: 10px;
+}
+.setup-title {
+  margin: 0 0 4px;
+  font-size: 28px;
+  font-weight: 600;
+  color: var(--harmony-text);
+}
+.setup-desc {
+  margin: 0 0 20px;
+  font-size: 14px;
+  color: var(--harmony-text-secondary);
+}
+.setup-form {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 360px;
+}
+.setup-label {
+  font-size: 12px;
+  color: var(--harmony-text-secondary);
+  margin-top: 8px;
+}
+.setup-input {
+  background: var(--harmony-bg-surface);
+  color: var(--harmony-text);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 10px 14px;
+  font-size: 13px;
+  outline: none;
+  font-family: var(--harmony-mono);
+  width: 100%;
+}
+.setup-input:focus {
+  border-color: var(--harmony-primary);
+  box-shadow: 0 0 0 3px var(--harmony-primary-soft);
+}
+.setup-hint {
+  margin: 2px 0 0;
+  font-size: 11px;
+  color: var(--harmony-text-muted);
+}
+.setup-btn {
+  margin-top: 16px;
+  background: var(--harmony-primary);
+  color: #fff;
+  border: none;
+  border-radius: var(--harmony-radius-pill);
+  padding: 10px 24px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  align-self: flex-start;
+}
+.setup-btn:hover {
+  background: var(--harmony-primary-hover);
+}
+.setup-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.bootstrap-msg {
+  max-width: 420px;
+  text-align: center;
+  line-height: 1.45;
+  color: var(--harmony-danger);
+}
+
+/* ── Root layout ── */
+.root {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+  flex-direction: column;
+  background: var(--harmony-bg-workspace);
+}
+
+/* ── Top bar (single line) ── */
+.editor-topbar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  height: 56px;
+  padding: 0 24px;
+  background: var(--harmony-bg-surface);
+  border-bottom: 1px solid var(--harmony-border);
+  z-index: 40;
+}
+.editor-topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  flex: 1;
+}
+.editor-topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+/* ── Main stage + floating annotate dock ── */
+.editor-stage {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+  background: var(--harmony-bg-workspace);
+}
+
+.canvas-workspace {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 20px 28px 72px;
+  overflow: hidden;
+}
+
+.canvas-window {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-width: 1280px;
+  width: 100%;
+  margin: 0 auto;
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-lg);
+  box-shadow: var(--harmony-shadow-md);
+  overflow: hidden;
+}
+
+.canvas-chrome {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  background: var(--harmony-bg-subtle);
+  border-bottom: 1px solid var(--harmony-border);
+}
+.canvas-chrome-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.canvas-chrome-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.canvas-page-badge {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--harmony-text-secondary);
+  white-space: nowrap;
+}
+
+/* Floating annotation toolbar — centered at bottom of canvas stage */
+.annotate-dock {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 5px 8px;
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-pill);
+  box-shadow:
+    0 6px 28px rgba(22, 45, 61, 0.14),
+    0 2px 6px rgba(22, 45, 61, 0.06);
+  pointer-events: auto;
+}
+.annotate-dock-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--harmony-text-secondary);
+  padding: 0 8px 0 4px;
+  white-space: nowrap;
+  border-right: 1px solid var(--harmony-border);
+  margin-right: 4px;
+}
+
+/* ── Global top bar aliases (legacy class names) ── */
+.harmony-global-bar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  height: 56px;
+  padding: 0 24px;
+  background: var(--harmony-bg-surface);
+  border-bottom: 1px solid var(--harmony-border);
+}
+.harmony-global-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  flex: 1;
+}
+.harmony-global-spacer {
+  display: none;
+}
+.harmony-global-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+.harmony-page-select-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.harmony-page-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--harmony-text-secondary);
+  white-space: nowrap;
+}
+.harmony-path-select {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.aiditor-logo {
+  font-size: 17px;
+  font-weight: 700;
+  letter-spacing: -0.3px;
+  color: var(--harmony-text);
+  flex-shrink: 0;
+  font-family: var(--harmony-font);
+}
+.aiditor-logo-ai {
+  color: var(--harmony-primary);
+}
+
+.aiditor-dropdown {
+  min-width: 180px;
+  max-width: 320px;
+  background: var(--harmony-bg-surface);
+  color: var(--harmony-text);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 7px 32px 7px 12px;
+  font-size: 13px;
+  font-family: var(--harmony-mono);
+  cursor: pointer;
+  outline: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a6b7d' d='M3 4.5L6 8l3-3.5H3z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+}
+.aiditor-dropdown:focus {
+  border-color: var(--harmony-primary);
+  box-shadow: 0 0 0 3px var(--harmony-primary-soft);
+}
+.aiditor-dropdown option {
+  background: #fff;
+  color: var(--harmony-text);
+}
+.harmony-page-select {
+  flex: 1;
+  min-width: 160px;
+}
+.preview-path-select {
+  flex: 1;
+  min-width: 0;
+  max-width: 400px;
+}
+.path-select-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+.params-loading-hint {
+  font-size: 11px;
+  color: var(--harmony-text-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* Harmony buttons */
+.harmony-btn-primary {
+  background: var(--harmony-primary);
+  color: #fff;
+  border: none;
+  border-radius: var(--harmony-radius-pill);
+  padding: 7px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.harmony-btn-primary:hover {
+  background: var(--harmony-primary-hover);
+}
+.harmony-btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.harmony-btn-secondary {
+  background: var(--harmony-bg-surface);
+  color: var(--harmony-text);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-pill);
+  padding: 7px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.harmony-btn-secondary:hover {
+  background: var(--harmony-bg-hover);
+  border-color: var(--harmony-border-strong);
+}
+.harmony-btn-secondary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.add-page-open-btn {
+  /* inherits harmony-btn-primary */
+}
+.add-page-from-brief-btn {
+  /* inherits harmony-btn-secondary */
+}
+.project-settings-btn {
+  /* inherits harmony-btn-secondary */
+}
+
+.harmony-editor-body,
+.harmony-sidebar,
+.harmony-secondary-bar {
+  display: none !important;
+}
+.harmony-workspace {
+  display: contents;
+}
+.preview-visual-tools {
+  display: flex;
+  flex-shrink: 0;
+  gap: 2px;
+  align-items: center;
+}
+
+.visual-tool-btn {
+  background: transparent;
+  color: var(--harmony-text-secondary);
+  border: none;
+  border-radius: var(--harmony-radius-sm);
+  padding: 7px 10px;
+  font-size: 12px;
+  cursor: pointer;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 34px;
+  min-height: 34px;
+}
+.visual-tool-btn:hover {
+  background: var(--harmony-bg-hover);
+  color: var(--harmony-text);
+}
+.visual-tool-on {
+  background: var(--harmony-primary-soft) !important;
+  color: var(--harmony-primary) !important;
+}
+.tool-group-sep {
+  width: 1px;
+  background: var(--harmony-border);
+  align-self: stretch;
+  margin: 0 4px;
+  flex-shrink: 0;
+}
+
+/* Canvas aliases */
+.harmony-canvas-area,
+.canvas-workspace {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 20px 28px 72px;
+  gap: 10px;
+  overflow: hidden;
+}
+.harmony-canvas-window,
+.canvas-window {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-lg);
+  box-shadow: var(--harmony-shadow-md);
+  overflow: hidden;
+}
+
+.harmony-canvas-chrome {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  background: var(--harmony-bg-subtle);
+  border-bottom: 1px solid var(--harmony-border);
+}
+.harmony-canvas-chrome-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.harmony-canvas-page-badge {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--harmony-text-secondary);
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 4px 10px;
+}
+.harmony-url-bar-wrap {
+  flex: 1;
+  min-width: 0;
+}
+.url-bar-wrap {
+  flex: 1;
+  min-width: 200px;
+}
+.url-bar {
+  font-size: 12px;
+  font-family: var(--harmony-mono);
+  color: var(--harmony-text-secondary);
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 7px 12px;
+  word-break: break-all;
+}
+
+.preview-loading {
+  font-size: 13px;
+  color: var(--harmony-text-muted);
+}
+.preview-error {
+  font-size: 13px;
+  color: var(--harmony-danger);
+  background: var(--harmony-danger-soft);
+  border-radius: var(--harmony-radius-sm);
+  padding: 10px 12px;
+  border: 1px solid rgba(232, 76, 61, 0.2);
+}
+
+/* isolation: Chrome Element Capture requires a stacking context on the capture target */
+.preview-frame-wrap {
+  flex: 1;
+  min-height: 0;
+  border: none;
+  border-radius: 0;
+  overflow: visible;
+  background: var(--harmony-bg-surface);
+  position: relative;
+  isolation: isolate;
+}
+.harmony-canvas-content {
+  flex: 1;
+}
+.preview-frame {
+  width: 100%;
+  height: 100%;
+  min-height: 360px;
+  border: none;
+  display: block;
+}
+.preview-frame-tablet {
+  align-self: center;
+  width: 768px;
+  max-width: 100%;
+}
+.preview-frame-mobile {
+  align-self: center;
+  width: 390px;
+  max-width: 100%;
+}
+
+/* ── Visual annotations ── */
+.visual-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+}
+.visual-overlay-none {
+  pointer-events: none;
+}
+.point-marker {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  margin: -7px 0 0 -7px;
+  border-radius: 50%;
+  background: var(--harmony-primary);
+  border: 2px solid #fff;
+  box-shadow: var(--harmony-shadow-sm);
+}
+.point-marker-idx {
+  position: absolute;
+  left: 10px;
+  top: -18px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 4px;
+  background: var(--harmony-primary);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+  pointer-events: none;
+}
+.area-rect {
+  position: absolute;
+  border: 2px dashed var(--harmony-primary);
+  background: var(--harmony-primary-soft);
+  pointer-events: none;
+}
+.area-marker-idx {
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 4px;
+  background: var(--harmony-primary);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 18px;
+  text-align: center;
+  pointer-events: none;
+  z-index: 1;
+}
+.area-rect-draft {
+  border-style: solid;
+  border-color: var(--harmony-primary);
+  background: var(--harmony-primary-soft);
+}
+.arrow-pending-dot {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  margin: -5px 0 0 -5px;
+  border-radius: 50%;
+  background: var(--harmony-primary);
+  border: 2px solid #fff;
+  box-shadow: var(--harmony-shadow-sm);
+  pointer-events: none;
+}
+.arrow-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.arrow-svg line {
+  stroke: var(--harmony-primary);
+  stroke-width: 2;
+  marker-end: url(#aiditor-arrowhead);
+}
+.arrow-end-pin {
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  margin: -11px 0 0 -11px;
+  border-radius: 50%;
+  background: var(--harmony-primary);
+  color: #fff;
+  border: 2px solid #fff;
+  box-shadow: var(--harmony-shadow-sm);
+  font-size: 11px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 3;
+}
+.visual-popovers {
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  pointer-events: none;
+}
+.visual-popover {
+  position: absolute;
+  width: 280px;
+  max-width: min(280px, calc(100% - 16px));
+  max-height: min(560px, calc(100vh - 96px));
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 14px;
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-md);
+  box-shadow: var(--harmony-shadow-lg);
+  box-sizing: border-box;
+  transform: translate(10px, 10px);
+  pointer-events: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-height: 0;
+}
+.visual-popover-flip-x {
+  transform: translate(calc(-100% - 14px), 10px);
+}
+.visual-popover-flip-y {
+  transform: translate(10px, calc(-100% - 14px));
+}
+.visual-popover-flip-x.visual-popover-flip-y {
+  transform: translate(calc(-100% - 14px), calc(-100% - 14px));
+}
+.visual-annotation-row-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.visual-annotation-kind {
+  font-size: 11px;
+  color: var(--harmony-primary);
+  font-weight: 600;
+}
+.visual-annotation-actions {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+.visual-annotation-remove {
+  background: transparent;
+  color: var(--harmony-text-muted);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 4px 8px;
+  font-size: 11px;
+  cursor: pointer;
+}
+.visual-annotation-remove:hover {
+  color: var(--harmony-danger);
+  border-color: var(--harmony-danger);
+}
+.visual-annotation-run {
+  background: var(--harmony-primary);
+  color: #fff;
+  border: none;
+  border-radius: var(--harmony-radius-sm);
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.visual-annotation-run:hover {
+  background: var(--harmony-primary-hover);
+}
+.visual-annotation-run:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.visual-annotation-instruction {
+  width: 100%;
+  min-height: 48px;
+  resize: vertical;
+  background: var(--harmony-bg-surface);
+  color: var(--harmony-text);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 6px 8px;
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+}
+.visual-annotation-instruction:focus {
+  border-color: var(--harmony-primary);
+  box-shadow: 0 0 0 3px var(--harmony-primary-soft);
+}
+.visual-annotation-files {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 4px;
+}
+.visual-attach-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+.visual-attach-btn {
+  background: var(--harmony-bg-subtle);
+  color: var(--harmony-text-secondary);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 4px 8px;
+  font-size: 11px;
+  cursor: pointer;
+}
+.visual-attach-btn:hover {
+  border-color: var(--harmony-primary);
+  color: var(--harmony-primary);
+}
+.visual-attachment-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.visual-attachment-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  background: var(--harmony-bg-subtle);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 4px 6px;
+  font-size: 11px;
+  color: var(--harmony-text-secondary);
+}
+.visual-attachment-thumb {
+  width: 36px;
+  height: 36px;
+  object-fit: cover;
+  border-radius: 4px;
+  flex-shrink: 0;
+  background: var(--harmony-bg-hover);
+}
+.visual-attachment-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+}
+.visual-attachment-remove-file {
+  background: transparent;
+  border: none;
+  color: var(--harmony-text-muted);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  padding: 0 4px;
+}
+.visual-attachment-remove-file:hover {
+  color: var(--harmony-danger);
+}
+.file-input-hidden {
+  display: none;
+}
+.visual-error {
+  font-size: 12px;
+  color: var(--harmony-danger);
+}
+.visual-submit-error {
+  font-size: 12px;
+  color: var(--harmony-danger);
+  margin: 0;
+  padding: 0 2px;
+}
+.visual-submit-progress {
+  font-size: 12px;
+  color: var(--harmony-primary);
+  margin: 0;
+  padding: 0 2px;
+}
+
+.video-record-btn {
+  border-color: var(--harmony-primary) !important;
+  color: var(--harmony-primary) !important;
+}
+.video-record-active {
+  animation: pulse-rec 1.2s ease-in-out infinite;
+}
+@keyframes pulse-rec {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.55;
+  }
+}
+
+/* ── Bottom agent panel ── */
+.bottom-panel {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--harmony-bg-surface);
+  border-top: 1px solid var(--harmony-border);
+  min-height: 32px;
+  max-height: 80vh;
+  height: 200px;
+  box-shadow: 0 -2px 12px rgba(22, 45, 61, 0.06);
+}
+.bottom-panel-collapsed {
+  max-height: 32px;
+  overflow: hidden;
+}
+.bottom-panel-resize {
+  height: 4px;
+  cursor: ns-resize;
+  background: transparent;
+  flex-shrink: 0;
+}
+.bottom-panel-resize:hover,
+.bottom-panel-resize:active {
+  background: var(--harmony-primary);
+}
+.bottom-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 16px;
+  flex-shrink: 0;
+  cursor: pointer;
+  user-select: none;
+  background: var(--harmony-bg-subtle);
+}
+.bottom-panel-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--harmony-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.bottom-panel-running {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--harmony-success);
+  animation: pulse-dot 1.2s ease-in-out infinite;
+  margin-left: 4px;
+}
+@keyframes pulse-dot {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+.bottom-panel-toggle {
+  background: none;
+  border: none;
+  color: var(--harmony-text-muted);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+.bottom-panel-toggle:hover {
+  color: var(--harmony-text);
+}
+.bottom-panel-spacer {
+  flex: 1;
+}
+.bottom-panel-clear {
+  background: none;
+  border: none;
+  color: var(--harmony-text-muted);
+  font-size: 11px;
+  cursor: pointer;
+  padding: 2px 6px;
+}
+.bottom-panel-clear:hover {
+  color: var(--harmony-text);
+}
+.output-panel {
+  overflow-y: auto;
+  padding: 8px 16px;
+  font-family: var(--harmony-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  flex: 1;
+  min-height: 0;
+  background: var(--harmony-bg-surface);
+}
+.chunk {
+  color: var(--harmony-text);
+}
+.chunk-status {
+  color: var(--harmony-text-muted);
+  font-style: italic;
+}
+.chunk-tool {
+  color: var(--harmony-primary);
+}
+.chunk-error {
+  color: var(--harmony-danger);
+}
+.chunk-thinking {
+  color: var(--harmony-text-muted);
+  font-style: italic;
+}
+.chunk-result {
+  color: var(--harmony-success);
+}
+.chunk-user {
+  color: var(--harmony-text);
+}
+.chunk-user-prefix {
+  color: var(--harmony-text-muted);
+}
+.agent-chat-row {
+  display: flex;
+  gap: 8px;
+  padding: 8px 16px;
+  border-top: 1px solid var(--harmony-border);
+  flex-shrink: 0;
+  align-items: flex-end;
+  background: var(--harmony-bg-subtle);
+}
+.agent-chat-input {
+  flex: 1;
+  min-height: 32px;
+  max-height: 96px;
+  resize: none;
+  background: var(--harmony-bg-surface);
+  color: var(--harmony-text);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 6px 10px;
+  font-family: var(--harmony-font);
+  font-size: 12px;
+  line-height: 1.4;
+}
+.agent-chat-input:focus {
+  outline: none;
+  border-color: var(--harmony-primary);
+  box-shadow: 0 0 0 3px var(--harmony-primary-soft);
+}
+.agent-chat-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.agent-chat-send {
+  background: var(--harmony-primary);
+  color: #fff;
+  border: none;
+  border-radius: var(--harmony-radius-pill);
+  padding: 6px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  flex-shrink: 0;
+  height: 32px;
+}
+.agent-chat-send:hover:not(:disabled) {
+  background: var(--harmony-primary-hover);
+}
+.agent-chat-send:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.file-link {
+  color: var(--harmony-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+.file-link:hover {
+  color: var(--harmony-primary-hover);
+}
+.chunk-tool-prefix {
+  color: var(--harmony-primary);
+}
+
+/* ── Result banner ── */
+.add-page-result-slot {
+  flex-shrink: 0;
+}
+.add-page-result-banner {
+  margin: 0 24px 8px;
+  padding: 10px 14px;
+  border-radius: var(--harmony-radius-md);
+  font-size: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+.add-page-result-success {
+  background: var(--harmony-success-soft);
+  border: 1px solid rgba(0, 168, 98, 0.25);
+  color: var(--harmony-success);
+}
+.add-page-result-failed {
+  background: var(--harmony-danger-soft);
+  border: 1px solid rgba(232, 76, 61, 0.25);
+  color: var(--harmony-danger);
+}
+.add-page-result-actions {
+  display: flex;
+  gap: 8px;
+  margin-left: auto;
+}
+.add-page-result-btn {
+  background: var(--harmony-bg-surface);
+  color: var(--harmony-text-secondary);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 4px 10px;
+  font-size: 11px;
+  cursor: pointer;
+}
+.add-page-result-btn:hover {
+  background: var(--harmony-bg-hover);
+  color: var(--harmony-text);
+}
+
+/* ── Modals & overlays ── */
+.file-preview-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: rgba(22, 45, 61, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
+.file-preview-panel {
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-lg);
+  width: min(900px, 96vw);
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: var(--harmony-shadow-lg);
+}
+.file-preview-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--harmony-border);
+  flex-shrink: 0;
+  background: var(--harmony-bg-subtle);
+}
+.file-preview-title {
+  font-size: 12px;
+  color: var(--harmony-text);
+  font-family: var(--harmony-mono);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+.file-preview-close {
+  background: none;
+  border: none;
+  color: var(--harmony-text-muted);
+  font-size: 18px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.file-preview-close:hover {
+  color: var(--harmony-text);
+}
+.file-preview-body {
+  flex: 1;
+  overflow: auto;
+  padding: 16px;
+  min-height: 0;
+}
+.file-preview-text {
+  font-family: var(--harmony-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--harmony-text);
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 0;
+}
+.file-preview-image {
+  max-width: 100%;
+  max-height: 70vh;
+  display: block;
+  margin: 0 auto;
+}
+.file-preview-loading {
+  color: var(--harmony-text-muted);
+  font-style: italic;
+  font-size: 12px;
+}
+
+.video-review-overlay,
+.snapshot-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: rgba(22, 45, 61, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
+.video-review-panel,
+.snapshot-panel {
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-lg);
+  width: min(1100px, 96vw);
+  max-height: 94vh;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px 16px;
+  overflow: auto;
+  box-shadow: var(--harmony-shadow-lg);
+}
+.snapshot-panel {
+  width: min(1200px, 96vw);
+  overflow: hidden;
+}
+.video-review-header,
+.snapshot-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.video-review-title,
+.snapshot-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--harmony-text);
+  margin: 0;
+}
+.video-review-meta {
+  font-size: 12px;
+  color: var(--harmony-text-muted);
+}
+.video-review-tools,
+.snapshot-tools {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+}
+.video-review-transport {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+.video-play-pause-btn {
+  flex-shrink: 0;
+  width: 40px;
+  height: 36px;
+  border-radius: var(--harmony-radius-sm);
+  border: 1px solid var(--harmony-border);
+  background: var(--harmony-bg-subtle);
+  color: var(--harmony-text);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
+.video-play-pause-btn:hover {
+  background: var(--harmony-bg-hover);
+  border-color: var(--harmony-primary);
+}
+.video-timeline-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+}
+.video-timeline {
+  width: 100%;
+  accent-color: var(--harmony-primary);
+}
+.video-timeline-markers {
+  position: relative;
+  height: 10px;
+  margin: 0 2px;
+}
+.video-timeline-marker {
+  position: absolute;
+  top: 0;
+  width: 10px;
+  margin-left: -5px;
+  height: 10px;
+  background: var(--harmony-primary);
+  border-radius: 1px;
+  transform: translateX(-50%);
+  cursor: pointer;
+}
+.video-review-actions,
+.snapshot-footer {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  margin-top: 4px;
+}
+.video-review-secondary,
+.snapshot-secondary {
+  background: var(--harmony-bg-surface);
+  color: var(--harmony-text);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-pill);
+  padding: 8px 16px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.video-review-secondary:hover,
+.snapshot-secondary:hover {
+  background: var(--harmony-bg-hover);
+}
+.video-review-primary,
+.snapshot-primary {
+  background: var(--harmony-primary);
+  color: #fff;
+  border: none;
+  border-radius: var(--harmony-radius-pill);
+  padding: 8px 18px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.video-review-primary:hover,
+.snapshot-primary:hover {
+  background: var(--harmony-primary-hover);
+}
+.video-review-primary:disabled,
+.snapshot-primary:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.snapshot-close {
+  background: none;
+  border: none;
+  color: var(--harmony-text-muted);
+  font-size: 18px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+.snapshot-close:hover {
+  color: var(--harmony-text);
+}
+.snapshot-body {
+  display: flex;
+  gap: 14px;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.snapshot-capture-area {
+  flex: 2;
+  min-width: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--harmony-bg-subtle);
+  border-radius: var(--harmony-radius-md);
+  overflow: hidden;
+  border: 1px solid var(--harmony-border);
+}
+.snapshot-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  display: block;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+.snapshot-img-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+}
+.snapshot-img-overlay-none {
+  pointer-events: none;
+}
+.snapshot-annotations-panel {
+  flex: 1;
+  min-width: 220px;
+  max-width: 340px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+}
+.snapshot-annotation-card {
+  background: var(--harmony-bg-subtle);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-md);
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.snapshot-annotation-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.snapshot-annotation-kind {
+  font-size: 11px;
+  color: var(--harmony-primary);
+  font-weight: 600;
+}
+.snapshot-annotation-remove {
+  background: transparent;
+  color: var(--harmony-text-muted);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 4px 8px;
+  font-size: 11px;
+  cursor: pointer;
+}
+.snapshot-annotation-remove:hover {
+  color: var(--harmony-danger);
+  border-color: var(--harmony-danger);
+}
+.snapshot-empty-hint {
+  color: var(--harmony-text-muted);
+  font-size: 12px;
+  font-style: italic;
+  padding: 8px 0;
+}
+.snapshot-discard-confirm {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  color: var(--harmony-danger);
+}
+.snapshot-discard-confirm-msg {
+  flex: 1;
+}
+
+/* ── Add Page slideover ── */
+.add-page-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 300;
+  background: rgba(22, 45, 61, 0.35);
+  display: flex;
+  justify-content: flex-end;
+}
+.project-settings-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 350;
+  background: rgba(22, 45, 61, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  box-sizing: border-box;
+}
+.project-settings-dialog {
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-lg);
+  width: min(520px, 100%);
+  max-height: min(80vh, 640px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: var(--harmony-shadow-lg);
+}
+.project-settings-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--harmony-border);
+  background: var(--harmony-bg-subtle);
+}
+.project-settings-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--harmony-text);
+}
+.project-settings-close {
+  background: none;
+  border: none;
+  color: var(--harmony-text-muted);
+  font-size: 20px;
+  cursor: pointer;
+  line-height: 1;
+}
+.project-settings-body {
+  padding: 14px 16px;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.add-page-slideover {
+  width: min(480px, 100vw);
+  height: 100%;
+  background: var(--harmony-bg-surface);
+  border-left: 1px solid var(--harmony-border);
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--harmony-shadow-lg);
+  position: relative;
+}
+.add-page-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--harmony-border);
+  flex-shrink: 0;
+  background: var(--harmony-bg-subtle);
+}
+.add-page-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--harmony-text);
+  flex: 1;
+}
+.add-page-close {
+  background: none;
+  border: none;
+  color: var(--harmony-text-muted);
+  font-size: 20px;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0 4px;
+}
+.add-page-close:hover {
+  color: var(--harmony-text);
+}
+.add-page-body {
+  flex: 1;
+  overflow: auto;
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.add-page-section-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--harmony-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  margin-bottom: 6px;
+}
+.add-page-section-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.add-page-section-header-row .add-page-section-label {
+  margin-bottom: 0;
+  flex: 1;
+}
+.add-page-fill-from-image-btn {
+  background: var(--harmony-bg-subtle);
+  color: var(--harmony-primary);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.add-page-fill-from-image-btn:hover {
+  background: var(--harmony-primary-soft);
+}
+.add-page-fill-from-image-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.add-page-suggested-route {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  background: var(--harmony-bg-subtle);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 8px 10px;
+  font-size: 12px;
+  color: var(--harmony-text-secondary);
+  margin-bottom: 8px;
+}
+.add-page-suggested-route code {
+  font-family: var(--harmony-mono);
+  color: var(--harmony-primary);
+}
+.add-page-brief-fill-popover {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  background: rgba(22, 45, 61, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  box-sizing: border-box;
+}
+.add-page-brief-fill-panel {
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-md);
+  width: min(420px, 100%);
+  max-height: 90%;
+  overflow: auto;
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-shadow: var(--harmony-shadow-lg);
+}
+.add-page-brief-fill-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.add-page-brief-fill-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--harmony-text);
+}
+.add-page-brief-fill-context {
+  width: 100%;
+  min-height: 64px;
+  background: var(--harmony-bg-surface);
+  color: var(--harmony-text);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 8px;
+  font-size: 12px;
+  font-family: var(--harmony-mono);
+  resize: vertical;
+  box-sizing: border-box;
+}
+.add-page-brief-fill-dropzone {
+  border: 1px dashed var(--harmony-border-strong);
+  border-radius: var(--harmony-radius-md);
+  padding: 14px;
+  text-align: center;
+  color: var(--harmony-text-muted);
+  font-size: 12px;
+  cursor: pointer;
+}
+.add-page-brief-fill-dropzone-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.add-page-brief-fill-context:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.add-page-brief-fill-dropzone:focus {
+  outline: none;
+  border-color: var(--harmony-primary);
+  box-shadow: 0 0 0 3px var(--harmony-primary-soft);
+}
+.add-page-brief-fill-thumbs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.add-page-brief-fill-thumb {
+  position: relative;
+  width: 72px;
+  height: 72px;
+  border-radius: var(--harmony-radius-sm);
+  overflow: hidden;
+  border: 1px solid var(--harmony-border);
+  background: var(--harmony-bg-subtle);
+}
+.add-page-brief-fill-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.add-page-brief-fill-thumb-remove {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  background: rgba(22, 45, 61, 0.7);
+  color: #fff;
+  border: none;
+  border-radius: 3px;
+  width: 18px;
+  height: 18px;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+}
+.add-page-brief-fill-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 4px;
+}
+.add-page-route-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.add-page-route-input {
+  flex: 1;
+  min-width: 160px;
+  background: var(--harmony-bg-surface);
+  color: var(--harmony-text);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 8px 10px;
+  font-size: 13px;
+  font-family: var(--harmony-mono);
+  box-sizing: border-box;
+}
+.add-page-route-input:focus {
+  border-color: var(--harmony-primary);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--harmony-primary-soft);
+}
+.add-page-route-badge {
+  font-size: 10px;
+  color: var(--harmony-primary);
+  background: var(--harmony-primary-soft);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+.add-page-field-error {
+  font-size: 12px;
+  color: var(--harmony-danger);
+  margin-top: 4px;
+}
+.add-page-hint {
+  font-size: 12px;
+  color: var(--harmony-text-muted);
+  margin-top: 4px;
+}
+.add-page-textarea {
+  width: 100%;
+  min-height: 120px;
+  background: var(--harmony-bg-surface);
+  color: var(--harmony-text);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 10px;
+  font-size: 12px;
+  font-family: var(--harmony-mono);
+  resize: vertical;
+  box-sizing: border-box;
+  outline: none;
+}
+.add-page-textarea:focus {
+  border-color: var(--harmony-primary);
+  box-shadow: 0 0 0 3px var(--harmony-primary-soft);
+}
+.add-page-dropzone {
+  border: 1px dashed var(--harmony-border-strong);
+  border-radius: var(--harmony-radius-md);
+  padding: 16px;
+  text-align: center;
+  color: var(--harmony-text-muted);
+  font-size: 12px;
+}
+.add-page-chips {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 8px;
+}
+.add-page-chip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--harmony-bg-subtle);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 6px 8px;
+  font-size: 11px;
+}
+.add-page-chip-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--harmony-text-secondary);
+}
+.add-page-chip-path {
+  font-size: 10px;
+  color: var(--harmony-text-muted);
+  font-family: var(--harmony-mono);
+}
+.add-page-chip select {
+  background: var(--harmony-bg-surface);
+  color: var(--harmony-text);
+  border: 1px solid var(--harmony-border);
+  border-radius: 4px;
+  font-size: 11px;
+  padding: 2px 4px;
+}
+.add-page-chip-remove {
+  background: none;
+  border: none;
+  color: var(--harmony-text-muted);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0 4px;
+}
+.add-page-chip-remove:hover {
+  color: var(--harmony-danger);
+}
+.add-page-plugins {
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-md);
+  padding: 10px;
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: 320px;
+  overflow: auto;
+}
+.add-menu-panel.add-page-plugins,
+.annotation-add-menu-panel.add-menu-panel {
+  max-height: min(320px, 42vh);
+  overflow: hidden;
+  gap: 8px;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.add-menu-panel .add-page-plugins-zone-title {
+  flex-shrink: 0;
+}
+.add-menu-panel .add-menu-panel-attached {
+  flex: 0 1 auto;
+  min-height: 0;
+  max-height: 120px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+.add-menu-panel .add-page-plugin-chips {
+  margin-top: 0;
+}
+.add-menu-panel .add-page-btn,
+.add-menu-panel .add-page-manage-link,
+.add-menu-panel .add-page-hint,
+.add-menu-panel .add-page-field-error,
+.add-menu-panel .add-menu-route-params,
+.add-menu-panel .add-page-suggested-route,
+.add-menu-panel .add-menu-route-confirm {
+  flex-shrink: 0;
+}
+.add-menu-panel .add-menu-popover {
+  flex-shrink: 0;
+  min-height: 180px;
+  max-height: min(240px, 36vh);
+  margin-top: 4px;
+}
+.add-menu-panel .add-menu-nav {
+  min-height: 140px;
+}
+.add-page-plugins-zone-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--harmony-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 4px;
+}
+.add-page-plugin-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  font-size: 11px;
+  border-bottom: 1px solid var(--harmony-border);
+}
+.add-page-plugin-row:last-child {
+  border-bottom: none;
+}
+.add-page-plugin-label {
+  flex: 1;
+  color: var(--harmony-text-secondary);
+}
+.add-page-plugin-btn {
+  background: var(--harmony-bg-subtle);
+  color: var(--harmony-text-secondary);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 2px 8px;
+  font-size: 10px;
+  cursor: pointer;
+}
+.add-page-plugin-btn:hover {
+  background: var(--harmony-bg-hover);
+  color: var(--harmony-text);
+}
+.add-page-plugin-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.add-page-plugin-btn-primary {
+  background: var(--harmony-primary);
+  color: #fff;
+  border-color: var(--harmony-primary);
+}
+.add-page-setup-ok {
+  color: var(--harmony-success);
+  font-size: 10px;
+}
+.add-page-setup-warn {
+  color: var(--harmony-warning);
+  font-size: 10px;
+}
+.add-page-setup-error {
+  color: var(--harmony-danger);
+  font-size: 10px;
+}
+.add-page-plugin-contract {
+  padding-left: 0;
+  font-size: 11px;
+  color: var(--harmony-text-muted);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 6px;
+}
+.add-page-plugin-contract-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  border-bottom: 1px solid var(--harmony-border);
+}
+.add-page-plugin-contract-row:last-child {
+  border-bottom: none;
+}
+.add-page-plugin-contract-name {
+  flex: 1;
+  color: var(--harmony-text-secondary);
+  font-size: 11px;
+}
+.add-page-plugin-contract-added {
+  font-size: 10px;
+  color: var(--harmony-success);
+}
+.add-page-plugin-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
+}
+.add-page-plugin-chip {
+  background: var(--harmony-bg-subtle);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 2px 6px;
+  font-size: 10px;
+  color: var(--harmony-text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.add-page-plugin-chip-remove {
+  background: none;
+  border: none;
+  color: var(--harmony-text-muted);
+  cursor: pointer;
+  padding: 0 2px;
+}
+.add-page-plugins-warn {
+  font-size: 11px;
+  color: var(--harmony-warning);
+  margin-top: 4px;
+}
+.add-page-install-live {
+  font-size: 11px;
+  color: var(--harmony-text-muted);
+}
+.add-page-local-plugin-form {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--harmony-border);
+}
+.add-page-local-plugin-form input {
+  background: var(--harmony-bg-surface);
+  color: var(--harmony-text);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 4px 6px;
+  font-size: 11px;
+}
+.add-page-plugin-picker {
+  width: 100%;
+  background: var(--harmony-bg-surface);
+  color: var(--harmony-text);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  font-size: 12px;
+  padding: 6px 8px;
+  margin-top: 6px;
+}
+.add-page-manage-link {
+  font-size: 11px;
+  color: var(--harmony-primary);
+  cursor: pointer;
+  margin-top: 6px;
+  background: none;
+  border: none;
+  padding: 0;
+  text-align: left;
+}
+.annotation-binding {
+  margin-top: 6px;
+  border-top: 1px solid var(--harmony-border);
+  padding-top: 6px;
+}
+.annotation-add-menu {
+  margin-top: 6px;
+  border-top: 1px solid var(--harmony-border);
+  padding-top: 6px;
+}
+.annotation-add-menu-toggle {
+  background: none;
+  border: none;
+  color: var(--harmony-primary);
+  font-size: 11px;
+  cursor: pointer;
+  padding: 0;
+  text-align: left;
+}
+.annotation-add-menu-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--harmony-text-secondary);
+}
+.change-request-add-menu {
+  margin-top: 8px;
+  padding: 10px 12px;
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-md);
+  background: var(--harmony-bg-subtle);
+}
+.add-menu-route-params {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+}
+.add-menu-popover {
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 8px;
+  background: var(--harmony-bg-subtle);
+  margin-top: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 0;
+  max-width: 100%;
+  max-height: min(320px, 50vh);
+  overflow: hidden;
+}
+.add-menu-popover-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--harmony-text-secondary);
+  border-bottom: 1px solid var(--harmony-border);
+  padding-bottom: 4px;
+  margin-bottom: 4px;
+  flex-shrink: 0;
+}
+.add-menu-popover-header button {
+  background: none;
+  border: none;
+  color: var(--harmony-text-muted);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0 4px;
+}
+.add-menu-popover-header button:hover {
+  color: var(--harmony-text);
+}
+.add-menu-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 2px;
+  -webkit-overflow-scrolling: touch;
+}
+.add-menu-nav-row {
+  display: contents;
+}
+.add-menu-nav-btn {
+  background: var(--harmony-bg-surface);
+  color: var(--harmony-text-secondary);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 4px 8px;
+  font-size: 11px;
+  cursor: pointer;
+  text-align: left;
+}
+.add-menu-nav-btn:hover {
+  background: var(--harmony-bg-hover);
+  color: var(--harmony-text);
+  border-color: var(--harmony-primary);
+}
+.add-menu-item-btn {
+  background: var(--harmony-primary);
+  color: #fff;
+  border: none;
+  border-radius: var(--harmony-radius-sm);
+  padding: 4px 8px;
+  font-size: 11px;
+  cursor: pointer;
+  text-align: left;
+}
+.add-menu-item-btn:hover {
+  background: var(--harmony-primary-hover);
+}
+.annotation-binding-preview {
+  font-size: 10px;
+  color: var(--harmony-success);
+  margin: 0;
+}
+.annotation-binding-panel label {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.annotation-binding-panel select {
+  background: var(--harmony-bg-surface);
+  color: var(--harmony-text);
+  border: 1px solid var(--harmony-border);
+  border-radius: 4px;
+  font-size: 11px;
+}
+.annotation-binding-scope-row {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.annotation-binding-install {
+  background: var(--harmony-primary);
+  color: #fff;
+  border: none;
+  border-radius: var(--harmony-radius-sm);
+  padding: 4px 8px;
+  font-size: 10px;
+  cursor: pointer;
+  align-self: flex-start;
+}
+.add-page-footer {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--harmony-border);
+  flex-shrink: 0;
+  background: var(--harmony-bg-subtle);
+}
+.add-page-btn {
+  flex: 1;
+  padding: 10px;
+  border-radius: var(--harmony-radius-pill);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  border: 1px solid var(--harmony-border);
+}
+.add-page-btn-cancel {
+  background: var(--harmony-bg-surface);
+  color: var(--harmony-text-secondary);
+}
+.add-page-btn-primary {
+  background: var(--harmony-primary);
+  color: #fff;
+  border-color: var(--harmony-primary);
+}
+.add-page-btn-primary:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.add-page-hidden-file {
+  display: none;
+}
+
+/* Legacy class aliases (kept for compatibility) */
+.main-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+.main-top-bar {
+  display: none;
+}
+.preview-stack {
+  display: contents;
+}
+.preview-url-row {
+  display: none;
+}
+.reset-btn {
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  color: var(--harmony-text-secondary);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 8px 12px;
+  border-radius: var(--harmony-radius-pill);
+  line-height: 1;
+}
+.reset-btn:hover {
+  color: var(--harmony-text);
+  border-color: var(--harmony-border-strong);
+}
+.route-picker-stack {
+  display: contents;
+}