/* Feedback from any page: the top bar's button, the drawer's link, the
   note, the threads and the admin page. Report 213.
   Uses the shared templates in of-base.css (`templates/_of.html`); only
   feedback's rules go here. Every rule is under a `fb-` or a
   `shell-*__feedback` class, so nothing here reaches another page.
   See planning/design/openflow-v2-handoff/BUILD-NOTES.md. */

/* ── The top bar's button, beside the bell ───────────────────────────── */
.shell-top__feedback {
  height: 40px; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-1); text-decoration: none;
  font-size: var(--fs-meta); font-weight: 600;
}
.shell-top__feedback:hover { background: var(--hover-bg); }
.shell-top__feedback:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shell-top__feedback .ms { font-size: 21px; }
@media (max-width: 1023.98px) {
  .shell-top__feedback-word { display: none; }
  .shell-top__feedback { width: 40px; padding: 0; justify-content: center; }
}
/* On a phone the top bar has no room: the drawer has it instead. */
@media (max-width: 759.98px) {
  .shell-top__feedback { display: none; }
}

/* ── The drawer's link, on a phone only ──────────────────────────────── */
.shell-rail__feedback {
  display: none;
  align-items: center; gap: 14px;
  height: 42px; padding: 0 11px;
  border-radius: 10px;
  color: var(--of-rail-ink, inherit); text-decoration: none;
  font-size: 14.5px; font-weight: 500;
}
.shell-rail__feedback .ms { font-size: 22px; width: 22px; flex: none; }
.shell-rail__feedback:hover { background: var(--of-rail-hover, var(--hover-bg)); color: #fff; }
.shell-rail__feedback:focus-visible { outline: 2px solid var(--copper-lift, var(--accent)); outline-offset: -2px; }
@media (max-width: 759.98px) {
  .shell-rail__feedback { display: flex; }
}

/* ── The note's form, in the panel and as a page ─────────────────────── */
.fb-form { display: flex; flex-direction: column; gap: var(--space-4); }
.fb-field { gap: 6px; }
.fb-optional { font-weight: 400; color: var(--ink-4); }
.fb-error {
  margin: 0; padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--alert-bg, #FBEAE8); color: var(--alert-fg, #8A2A1E);
  font-size: var(--fs-meta);
}
.fb-error ul { margin: 6px 0; padding-left: 18px; }
.fb-error p { margin: 0; }
.fb-sent__line { margin: 0; color: var(--ink-2, var(--ink-1)); }
.fb-reply__bar { margin: 0; display: flex; justify-content: flex-end; }
.fb-muted { margin: 0; color: var(--ink-4); font-size: var(--fs-meta); }
.fb-page .of-section__body { display: flex; flex-direction: column; gap: var(--space-4); }

/* ── A conversation ──────────────────────────────────────────────────── */
.fb-thread {
  list-style: none; margin: 0 0 var(--space-4); padding: 0;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.fb-msg {
  max-width: min(78%, 560px);
  padding: 10px 14px;
  border-radius: 14px;
  overflow-wrap: anywhere;
}
.fb-msg--user {
  align-self: flex-start;
  background: var(--card-bg, #fff);
  border: 1px solid var(--line-input, #D9D4C9);
  border-bottom-left-radius: 4px;
}
.fb-msg--admin {
  align-self: flex-end;
  background: var(--ink-navy, #1A2547); color: #fff;
  border-bottom-right-radius: 4px;
}
.fb-msg__who { margin: 0 0 4px; font-size: var(--fs-micro); font-weight: 600; opacity: .8; }
.fb-msg__body { white-space: pre-wrap; font-size: var(--fs-body); line-height: 1.5; }
@media (max-width: 759.98px) {
  .fb-msg { max-width: 92%; }
}

/* A message's files: screenshots as pictures, the rest as chips. */
.fb-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fb-shot { display: block; line-height: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-input, #D9D4C9); }
.fb-shot img { display: block; max-width: min(220px, 100%); max-height: 160px; object-fit: cover; background: var(--skel-bg); }
.fb-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 6px 10px; border-radius: 8px;
  font-size: var(--fs-meta); text-decoration: none; color: inherit;
  border: 1px solid currentColor;
}
.fb-msg--admin .fb-chip { border-color: rgba(255, 255, 255, .45); }
.fb-chip .ms { font-size: 18px; }
.fb-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fb-chip__size { opacity: .75; white-space: nowrap; }

/* ── My feedback ─────────────────────────────────────────────────────── */
.fb-mine__how { margin: 0 0 var(--space-4); color: var(--ink-3); font-size: var(--fs-meta); }

/* ── The admin page ──────────────────────────────────────────────────── */
.fb-waiting { padding: 16px 20px; margin-bottom: var(--space-4); border-left: 4px solid var(--copper-cta); }
.fb-waiting__title { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.fb-waiting__list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.fb-waiting__list a { overflow-wrap: anywhere; }
.fb-waiting__meta { color: var(--ink-4); font-size: var(--fs-meta); }

.fb-ai { display: flex; flex-direction: column; gap: 6px; }
.fb-ai p { margin: 0; }
.fb-ai__head { font-weight: 600; }
.fb-ai__meta { margin-left: 6px; font-weight: 400; color: var(--ink-4); font-size: var(--fs-meta); }
.fb-ai__fix { white-space: pre-wrap; }
.fb-ai__files { color: var(--ink-4); font-size: var(--fs-meta); overflow-wrap: anywhere; }

.fb-triage { gap: var(--space-3); }
.fb-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.fb-inline input:not([type="hidden"]) { flex: 1 1 140px; width: auto; }
.fb-names { margin-top: var(--space-3); font-size: var(--fs-meta); }
.fb-names summary { cursor: pointer; color: var(--ink-3); }
.fb-admin-thread .of-facts dd,
.fb-admin-panel .of-facts dd { overflow-wrap: anywhere; }