/* feedback.css — in-app feedback widget (Lane B).
 *
 * EXTERNAL stylesheet (NOT injected) — LR dropped CSP `style-src 'unsafe-inline'`,
 * so BB's self-injected <style> block would be CSP-blocked. Linked in index.html
 * + added to scripts/public-files.mjs (dist allowlist) so prod ships it.
 *
 * Re-skinned from brain-blossom/app/feedback.js to LR DESIGN.md tokens: all
 * colors/spacing reference the app.css :root vars (sage / warm / gray ramp,
 * --border, --red, --amber). The modal envelope is LRModal's .lr-modal-content
 * (focus-trap + scroll-lock + Esc); only the inner form is styled here.
 * NO loading spinner (DESIGN.md bans them) — the submitting state is text-only.
 */

/* Feedback modal envelope: white card (the base .lr-modal-content--card is cream),
 * 480px max, full-width sheet on phones. */
.lr-modal-content.lr-modal-feedback.lr-modal-content--card {
  max-width: 480px;
  background: var(--white);
  padding: 20px;
}
@media (max-width: 480px) {
  .lr-modal-content.lr-modal-feedback.lr-modal-content--card {
    max-width: 100vw;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
}

.fb-title {
  font-family: 'ITC Avant Garde Gothic', 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-dark);
  margin: 0 0 14px;
}

/* Type selector — a real radio group (arrow-key navigable). "Bug" preselected. */
.fb-types {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.fb-type {
  flex: 1;
  min-width: 90px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--gray-dark);
  text-align: center;
}
.fb-type[aria-checked="true"] {
  border-color: var(--sage);
  background: var(--sage-light);
  font-weight: 600;
}
.fb-type:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
}

.fb-desc {
  width: 100%;
  box-sizing: border-box;
  min-height: 96px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--gray-dark);
  background: var(--white);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.fb-desc:focus {
  border-color: var(--sage);
}

.fb-count {
  font-size: 11px;
  color: var(--gray-light);
  text-align: right;
  margin-top: 4px;
}

.fb-note {
  font-size: 12px;
  color: var(--gray-mid);
  margin: 6px 0 0;
}

/* Collapsible "what we'll attach" transparency preview — COLLAPSED by default. */
.fb-prev-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--sage-dark);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0 4px;
}
.fb-prev-chevron {
  display: inline-block;
  transition: transform 0.2s;
}
.fb-prev-toggle[aria-expanded="true"] .fb-prev-chevron {
  transform: rotate(90deg);
}
.fb-prev {
  display: none;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--sage-mist);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--gray-dark);
  margin-top: 4px;
}
.fb-prev.fb-prev-open {
  display: block;
}

.fb-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.fb-actions .btn {
  min-height: 44px;
}

/* Error message — red, inline, only on a failed send. */
.fb-err {
  color: var(--red);
  font-size: 13px;
  margin-top: 10px;
}

/* Success state. */
.fb-ok {
  text-align: center;
  padding: 24px 8px;
}
.fb-ok-mark {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 8px;
}
.fb-ok-msg {
  font-size: 14px;
  color: var(--gray-dark);
  margin: 0 0 16px;
}