/*
 * 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;
  align-items: stretch;
  justify-content: center;
  padding: clamp(0px, 4vh, 48px) clamp(0px, 4vw, 48px);
}

.fbq-overlay-card {
  background: var(--fbq-soft);
  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;
}

.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); }

.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: open-any-investigation picker --------------------------------- */

.fbq-admin-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--fbq-border);
  border-radius: 12px;
  background: var(--fbq-bg);
}
.fbq-admin-picker label { font-size: 0.88rem; font-weight: 600; color: var(--fbq-text); }
.fbq-admin-picker select {
  flex: 1 1 280px;
  min-width: 200px;
  padding: 8px 10px;
  border: 1px solid var(--fbq-border);
  border-radius: 8px;
  font: inherit;
  background: #fff;
}

/* -- Admin global feed ---------------------------------------------------- */

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

.fbq-admin-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fbq-border);
}

.fbq-admin-patient { font-weight: 700; }
.fbq-admin-meta { font-size: 0.82rem; color: var(--fbq-muted); }