new things

packages/frontend/src/components/Modal.css

@@ -244,4 +244,64 @@
 
 .toggle-switch.on .toggle-knob {
   transform: translateX(18px);
+}
+
+/* ── Disabled toggle ─────────────────────────────────────── */
+
+.toggle-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.toggle-switch-disabled {
+  cursor: not-allowed;
+}
+
+/* ── Self Expansive options ──────────────────────────────── */
+
+.expansive-options {
+  padding: 12px 14px;
+  background: var(--bg-surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-top: -8px;
+}
+
+.mode-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.mode-btn {
+  flex: 1;
+  padding: 8px 0;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+  font-family: inherit;
+}
+
+.mode-btn--active {
+  background: var(--accent-dim);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.mode-btn:hover:not(.mode-btn--active) {
+  background: var(--bg-surface-3);
+  border-color: var(--text-dim);
+  color: var(--text);
+}
+
+.mode-desc {
+  display: block;
+  margin-top: 4px;
 }