/*
 * feedback-questions.css — styling for the Feedback & Questions surface.
 *
 * Scoped under the `fbq-` prefix to stay clear of the clinician↔patient Message
 * board. Colors use CSS custom properties with fallbacks so the same panel reads
 * correctly in the patient shell (--ps-*), the clinician/admin Tailwind shells,
 * and Atlas (--iv-*).
 *
 * Two layouts: a full-page overlay (patient shell + clinician investigation
 * page) and inline embedding (admin feed groups). The panel itself pins the
 * composer at the top and scrolls a paginated, collapsible thread list below.
 */

:root {
  --fbq-accent: var(--ps-accent-text, var(--iv-accent, #9e3b1b));
  --fbq-text: var(--ps-text, var(--iv-text, #264653));
  --fbq-muted: var(--ps-muted, #6b7b83);
  --fbq-bg: var(--ps-card, #ffffff);
  --fbq-border: var(--ps-border, #e6ded7);
  --fbq-soft: var(--ps-bg, #fef7f2);
}

/* -- Full-page overlay ---------------------------------------------------- */

body.fbq-overlay-open { overflow: hidden; }

.fbq-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 30, 35, 0.45);
  display: flex;
  /* safe center: the card sizes to its content (an empty thread list no
     longer stretches into a wall of blank cream) but still scrolls inside
     itself once threads outgrow the viewport. */
  align-items: safe center;
  justify-content: center;
  padding: clamp(0px, 4vh, 48px) clamp(0px, 4vw, 48px);
}

.fbq-overlay-card {
  /* One surface color for the whole card — a cream thread region under a
     white header + composer read as three unrelated bands. Region structure
     comes from the hairline borders, and the threads/messages keep their own
     soft tints. */
  background: var(--fbq-bg);
  width: min(820px, 100%);
  max-height: 100%;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fbq-overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--fbq-border);
  background: var(--fbq-bg);
  flex: 0 0 auto;
}

.fbq-overlay-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fbq-text);
}

.fbq-overlay-close {
  border: 0;
  background: transparent;
  font-size: 1.2rem;
  color: var(--fbq-muted);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 999px;
}

.fbq-overlay-close:hover { background: var(--fbq-soft); color: var(--fbq-text); }

.fbq-overlay-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

/* -- Panel (composer pinned, threads scroll) ------------------------------ */

.fbq-panel {
  color: var(--fbq-text);
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  width: 100%;
  gap: 0;
}

/* Composer region — always visible, pinned at the top of the panel. */
.fbq-top {
  flex: 0 0 auto;
  padding: 16px 20px;
  background: var(--fbq-bg);
  border-bottom: 1px solid var(--fbq-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Thread list region — the only part that scrolls. */
.fbq-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
}

/* When embedded inline (admin), don't force an internal scroll. */
.fbq-panel--inline .fbq-scroll { overflow: visible; }

.fbq-intro {
  margin: 0;
  color: var(--fbq-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.fbq-loading,
.fbq-error,
.fbq-empty {
  padding: 24px 4px;
  color: var(--fbq-muted);
  font-size: 0.92rem;
  text-align: center;
}

/* Quiet illustrated empty state instead of a lone sentence floating in the
   scroll region. */
.fbq-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 20px 40px;
}

.fbq-empty i {
  font-size: 26px;
  opacity: 0.45;
}

.fbq-error { color: #b4471f; }

/* -- Composer ------------------------------------------------------------- */

.fbq-composer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fbq-composer-actions { display: flex; justify-content: flex-end; }

.fbq-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--fbq-border);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  color: var(--fbq-text);
  resize: vertical;
  background: #fff;
  /* Safety net behind SmartTextarea's JS maxHeight: never let the box grow past
     this even if the script isn't driving it, so the Send button stays in view. */
  max-height: 240px;
  overflow-y: auto;
}

/* Replies are bounded a touch shorter than the top composer. */
.fbq-textarea--reply { max-height: 160px; }

.fbq-send,
.fbq-reply-send,
.fbq-prompt-cta {
  background: var(--fbq-accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 20px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

.fbq-send:hover,
.fbq-reply-send:hover,
.fbq-prompt-cta:hover { filter: brightness(1.05); }

/* -- Pill toggle ---------------------------------------------------------- */

.fbq-pill-group {
  display: inline-flex;
  gap: 6px;
  background: var(--fbq-soft);
  padding: 4px;
  border-radius: 999px;
  align-self: flex-start;
}

.fbq-pill {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fbq-muted);
  cursor: pointer;
}

.fbq-pill[aria-selected="true"] {
  background: var(--fbq-bg);
  color: var(--fbq-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* -- Threads (collapsible rows) ------------------------------------------- */

.fbq-threads {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fbq-thread {
  border: 1px solid var(--fbq-border);
  border-radius: 12px;
  background: var(--fbq-bg);
  overflow: hidden;
}

.fbq-thread.is-open { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.fbq-thread.is-resolved { opacity: 0.74; }

/* The whole header is the click target that expands the thread. */
.fbq-thread-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--fbq-text);
}

.fbq-thread-head:hover { background: var(--fbq-soft); }

/* The head is a single flex row of [stacked lines | chevron]. The lines column
   splits into a top line (tag + author + preview) and a meta line (chips, reply
   count, date) so the row no longer crams everything onto one line and crushes
   the preview to an ellipsis. min-width:0 down the chain keeps the preview
   ellipsis working inside the flex layout. */
.fbq-thread-lines {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fbq-thread-topline {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fbq-thread-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fbq-tag {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--fbq-soft);
  color: var(--fbq-accent);
}

.fbq-tag--question { background: #eef4f6; color: #2f6f86; }

.fbq-thread-author {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fbq-muted);
}

.fbq-thread-preview {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
  color: var(--fbq-text);
}

.fbq-status-chip {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e8f3ea;
  color: #2f7a44;
}

.fbq-reply-count {
  flex: 0 0 auto;
  font-size: 0.74rem;
  color: var(--fbq-muted);
}

.fbq-thread-date {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--fbq-muted);
}

.fbq-chevron {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--fbq-muted);
}

.fbq-thread-manage {
  padding: 0 14px 10px;
  display: flex;
  justify-content: flex-end;
}

.fbq-resolve {
  border: 1px solid var(--fbq-border);
  background: transparent;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--fbq-muted);
  cursor: pointer;
}

/* -- Expanded thread body ------------------------------------------------- */

.fbq-thread-body {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--fbq-border);
}

.fbq-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}

.fbq-msg {
  border-radius: 12px;
  padding: 8px 12px;
  max-width: 88%;
}

.fbq-msg--author { background: var(--fbq-soft); align-self: flex-start; }
.fbq-msg--admin { background: #eef4f6; align-self: flex-end; }

.fbq-msg-meta {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--fbq-muted);
  margin-bottom: 3px;
  display: flex;
  gap: 8px;
}

.fbq-msg-date { font-weight: 400; }

.fbq-msg-body {
  font-size: 0.92rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.fbq-reply { margin-top: 4px; }
.fbq-reply-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.fbq-reply-send { padding: 6px 16px; font-size: 0.82rem; }

/* -- Pagination ----------------------------------------------------------- */

.fbq-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0 4px;
}

.fbq-page-btn {
  border: 1px solid var(--fbq-border);
  background: var(--fbq-bg);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fbq-text);
  cursor: pointer;
}

.fbq-page-btn:disabled { opacity: 0.45; cursor: default; }
.fbq-page-info { font-size: 0.82rem; color: var(--fbq-muted); }

/* -- Report prompt banner ------------------------------------------------- */

.fbq-prompt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--fbq-border);
  background: var(--fbq-soft);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.fbq-prompt-icon { color: var(--fbq-accent); font-size: 1.25rem; line-height: 1.4; }
.fbq-prompt-text { flex: 1; }
.fbq-prompt-title { font-weight: 700; color: var(--fbq-text); margin-bottom: 2px; }
.fbq-prompt-body { margin: 0; font-size: 0.9rem; color: var(--fbq-muted); line-height: 1.45; }

.fbq-prompt-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

.fbq-prompt-dismiss {
  background: transparent;
  border: 0;
  color: var(--fbq-muted);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 4px;
}

/* -- Host entry points ---------------------------------------------------- */

.ps-feedback-link,
.fbq-open-link {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--fbq-border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fbq-accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ps-feedback-link:hover,
.fbq-open-link:hover { background: var(--fbq-soft); }

/* -- Admin triage toolbar (sticky) ---------------------------------------- */

/* Two stacked rows: the summary count pills, then the filter bar.
   They used to share ONE horizontal band, which squeezed the labelled fields
   into a cramped strip beside the badges and made this page's filters look
   nothing like the Server Log / Emails bars they are meant to match. The bar
   is now the same plain full-width row of labelled fields those pages use
   (no card, no sticky pill), with the badges on their own line above it. */
.fbq-admin-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin: 0 0 18px;
}

.fbq-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* A quiet counts line, not a row of tinted capsules. The old
   `.fbq-summary-pill` badges were big mint/pink pills that read as clickable
   controls, competed with the status pills inside the cards, and matched
   nothing else in the workspace. Now: muted text, with emphasis reserved for
   a nonzero needs-a-reply figure — the only one that means "act". */
.fbq-count {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--fbq-muted, #5c737a);
}
.fbq-count strong {
  font-weight: 700;
  color: var(--admin-green, #264653);
}
.fbq-count--attn,
.fbq-count--attn strong { color: var(--admin-tab-active, #9e3b1b); }

.fbq-count-sep {
  color: rgba(38, 70, 83, 0.28);
  font-size: 0.8rem;
}

/* Matches `.admin-server-logs-filters` exactly (baseline-aligned labelled
   fields + Apply/Clear pills), so the two admin filter bars read as one
   control, not two designs. */
.fbq-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.fbq-filter-group { display: flex; align-items: center; gap: 8px; }

.fbq-filter-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fbq-muted);
}

.fbq-clear-filters {
  border: 0;
  background: transparent;
  color: var(--fbq-accent);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
}
.fbq-clear-filters:hover { text-decoration: underline; }
/* Always visible so the toolbar never reflows; muted + inert when there is
   nothing to clear. */
.fbq-clear-filters:disabled {
  color: var(--fbq-muted);
  opacity: 0.5;
  cursor: default;
}
.fbq-clear-filters:disabled:hover { text-decoration: none; }

/* Picker sits at the far right of the toolbar (wraps below on narrow widths). */
.fbq-admin-picker-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.fbq-admin-picker-wrap label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fbq-muted);
  white-space: nowrap;
}
.fbq-admin-picker-wrap select {
  padding: 7px 10px;
  border: 1px solid var(--fbq-border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  background: #fff;
  max-width: 240px;
}

/* -- Admin global feed: collapsible group cards --------------------------- */

.fbq-admin-group {
  border: 1px solid var(--fbq-border);
  border-radius: 14px;
  background: var(--fbq-bg);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.fbq-admin-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Divider under the head only while the body is showing (a collapsed card is a
   single tidy row). */
.fbq-admin-group:not(.is-collapsed) .fbq-admin-group-head {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fbq-border);
}
.fbq-admin-group.is-collapsed .fbq-admin-group-body { display: none; }

/* The patient-name row is the expand/collapse click target; the "Open
   investigation" link sits OUTSIDE it (no nested interactive element). */
.fbq-admin-group-toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--fbq-text);
}
.fbq-admin-group-toggle:hover .fbq-admin-patient { text-decoration: underline; }

.fbq-admin-chevron {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--fbq-muted);
  transition: transform 0.15s ease;
}
.fbq-admin-group.is-collapsed .fbq-admin-chevron { transform: rotate(-90deg); }

.fbq-admin-patient { font-weight: 700; white-space: nowrap; flex: 0 0 auto; }
.fbq-admin-meta { font-size: 0.82rem; color: var(--fbq-muted); }
/* Let the clinician meta absorb the squeeze on narrow widths instead of
   forcing the page to scroll sideways. */
.fbq-admin-group-toggle .fbq-admin-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fbq-admin-open-link {
  flex: 0 0 auto;
  margin-left: 12px;
  color: var(--fbq-accent);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fbq-admin-open-link:hover { text-decoration: underline; }

/* Triage badges float to the right end of the toggle row. */
.fbq-admin-badges {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.fbq-admin-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.fbq-admin-badge--needs { background: #fdecec; color: #7f1d1d; }
.fbq-admin-badge--open {
  background: rgba(208, 233, 221, 0.6);
  color: var(--admin-green, #214f44);
}
.fbq-admin-note { font-size: 0.74rem; color: var(--fbq-muted); white-space: nowrap; }

/* -- Admin composer footer (threads-first, collapsed by default) ---------- */

/* In admin mode the composer is a footer below the threads, not a pinned header:
   flip the border to the top and demote it behind the "Add a note" toggle. */
.fbq-top--admin {
  flex: 0 0 auto;
  border-top: 1px solid var(--fbq-border);
  border-bottom: 0;
}
/* Class-driven collapse (never the `hidden` attribute: .fbq-composer is
   display:flex, which a `hidden`-based rule would lose to). */
.fbq-composer-wrap.is-collapsed .fbq-composer { display: none; }
.fbq-composer-wrap:not(.is-collapsed) .fbq-admin-note-toggle { display: none; }
.fbq-admin-note-toggle { align-self: flex-start; }

/* Per-thread "Needs reply" chip (admin only): warm amber, distinct from the
   green Resolved chip. */
.fbq-status-chip--attn { background: #fef3c7; color: #92400e; }