/* ─── In-app beta feedback widget (js/feedback.js) ──────────────────────────────
   All on the Mabel token sheet so light/dark track automatically. Classes are
   fb-prefixed; the modal reuses the shared .modal-* shell from styles.css. */

.fb-body { display: flex; flex-direction: column; gap: var(--space-4); }

/* Category chips */
.fb-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fb-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-sm); font-weight: var(--text-base-medium-w);
  cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms;
}
.fb-chip:hover { border-color: var(--color-border-strong); }
.fb-chip.active {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent-strong);
  color: var(--color-accent-ink);
}
.fb-chip svg { flex-shrink: 0; }

/* Free-text */
.fb-label { font-size: var(--text-sm); font-weight: var(--text-base-medium-w); color: var(--color-text-primary); }
.fb-dim { color: var(--color-text-tertiary); font-weight: 400; }
.fb-textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text-primary);
  font: inherit; font-size: var(--text-base);
}
.fb-textarea:focus { outline: none; border-color: var(--color-accent-strong); background: var(--color-surface); }

/* Disclosure box — what gets sent */
.fb-disclose {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  padding: var(--space-3) var(--space-4);
}
.fb-disclose-head {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--text-lg-w);
  color: var(--color-text-primary); margin-bottom: var(--space-2);
}
.fb-disclose-head svg { color: var(--color-accent-strong); }
.fb-list { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.fb-list li { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--text-sm-lh); }

.fb-toggles { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.fb-toggle { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-primary); cursor: pointer; }
.fb-toggle input { margin-top: 3px; flex-shrink: 0; }
.fb-mono, .fb-ctx-preview { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-xs); }
.fb-ctx-preview { display: block; color: var(--color-text-secondary); margin-top: 2px; }

/* Raw payload */
.fb-raw { margin-top: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
.fb-raw summary { font-size: var(--text-sm); color: var(--color-accent-strong); cursor: pointer; user-select: none; }
.fb-raw-pre {
  margin: var(--space-2) 0 0; padding: var(--space-3);
  max-height: 220px; overflow: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-xs); line-height: 1.5;
  color: var(--color-text-secondary); white-space: pre-wrap; word-break: break-word;
}

/* Footer */
.fb-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.fb-priv { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-tertiary); }
.fb-priv svg { color: var(--color-success); }
.fb-footer-btns { display: inline-flex; gap: var(--space-2); }
.fb-note { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--text-base-lh); }
.fb-note code { font-size: var(--text-xs); background: var(--color-surface-sunken); padding: 1px 4px; border-radius: var(--radius-sm); }

/* Header feedback button (matches .btn-secondary chrome) */
#btn-feedback svg { margin-right: 2px; }