/* vibeship.eu — the "ask us about this" widget (assets/feedback.js).
 *
 * A corner launcher and a panel. Kept in its own file rather than appended to
 * styles.css because the widget mounts on report pages, the dashboard and the
 * marketing pages alike, and each of those loads a different second stylesheet.
 *
 * Custom properties come from styles.css, which every page that mounts the
 * widget already loads. */

.fb {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  font-family: var(--sans);
}

.fb-launch {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.fb-launch:hover  { border-color: var(--accent); color: #fff; }
.fb-launch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fb-panel {
  position: absolute;
  right: 0;
  bottom: 3.25rem;
  width: min(24rem, calc(100vw - 2.5rem));
  /* Bounded so a long conversation scrolls inside the panel rather than
   * growing it past the top of the window, where the close button would go. */
  max-height: min(34rem, calc(100vh - 6rem));
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.fb-panel[hidden] { display: none; }

.fb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.fb-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  /* The title is a thread subject, which the person wrote — it has to be
   * allowed to be long without pushing the close button off the panel. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fb-close {
  flex: none;
  background: none;
  border: 0;
  color: var(--text-dim);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}
.fb-close:hover { color: var(--text); }

.fb-body {
  padding: 1rem;
  overflow-y: auto;
  font-size: 0.88rem;
  color: var(--text-dim);
}

.fb-about {
  margin: 0 0 0.85rem;
  padding: 0.5rem 0.7rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-dim);
}
.fb-about strong { color: var(--text); font-weight: 600; }
.fb-about-none { border-left-color: var(--border-2); }
.fb-about-clear {
  display: block;
  margin-top: 0.3rem;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  color: var(--accent-text);
  cursor: pointer;
  text-decoration: underline;
}

.fb-label {
  display: block;
  margin: 0.75rem 0 0.3rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.fb-opt { color: var(--text-mute); }

.fb-input, .fb-textarea, .fb-select {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.86rem;
}
.fb-textarea { resize: vertical; min-height: 4.5rem; }
.fb-input:focus, .fb-textarea:focus, .fb-select:focus {
  outline: none;
  border-color: var(--accent);
}

.fb-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.85rem;
}
.fb-send { flex: none; }
.fb-link, .fb-back {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.82rem;
  color: var(--accent-text);
  cursor: pointer;
}
.fb-back { margin-bottom: 0.75rem; }
.fb-new { width: 100%; margin-bottom: 0.9rem; }

.fb-error {
  margin: 0.6rem 0 0;
  color: var(--red);
  font-size: 0.82rem;
}
.fb-loading, .fb-empty {
  margin: 0;
  color: var(--text-mute);
  font-size: 0.85rem;
}
.fb-sent {
  margin: 0 0 0.85rem;
  color: var(--green);
  font-size: 0.82rem;
}

.fb-list { list-style: none; margin: 0; padding: 0; }
.fb-list li + li { margin-top: 0.4rem; }
.fb-row {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  font: inherit;
  cursor: pointer;
}
.fb-row:hover { border-color: var(--accent); }
.fb-row-state {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-mute);
}
.fb-state-open     { color: var(--amber); }
.fb-state-answered { color: var(--green); }
.fb-row-subject {
  display: block;
  color: var(--text);
  font-size: 0.87rem;
  margin-top: 0.15rem;
}
.fb-row-about {
  display: block;
  color: var(--text-mute);
  font-size: 0.76rem;
  margin-top: 0.1rem;
}

.fb-thread { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.fb-msg { margin: 0 0 0.6rem; }
.fb-msg-who {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  margin-bottom: 0.15rem;
}
.fb-msg-body {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.86rem;
  /* Messages are typed by people, who use line breaks and paste long
   * identifiers. Both have to survive without widening the panel. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fb-msg-team .fb-msg-body { border-left: 2px solid var(--accent); }

/* The button assets/feedback.js injects into anything carrying data-ref-kind.
 * Quiet until the card is hovered or the button is focused: it appears on
 * every result card, and a page of loud "Ask about this" buttons would compete
 * with the findings they sit next to. Never hidden outright — a control that
 * only exists on hover is a control a keyboard or touch user does not have. */
.fb-ask {
  display: inline-block;
  margin-top: 0.6rem;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.76rem;
  color: var(--text-mute);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-ref-kind]:hover .fb-ask,
.fb-ask:hover,
.fb-ask:focus-visible { color: var(--accent-text); }

/* A finding card is a two-column grid (icon | content) — on the full report
   (.finding) and on the dashboard (.res-card). Appended as a third grid item,
   the button would flow into the narrow icon column and wrap its text to a
   vertical stack. Span the full width on its own row instead, and sit at the
   end — a quiet action beneath the finding. */
.finding > .fb-ask,
.res-card > .fb-ask {
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: 0.35rem;
}

@media (max-width: 480px) {
  .fb { right: 0.75rem; bottom: 0.75rem; }
  .fb-panel { width: calc(100vw - 1.5rem); }
}

/* Somebody who has asked not to be moved should not get a panel that slides.
 * There is no animation here to disable today; the rule exists so that adding
 * one later can't skip the question. */
@media (prefers-reduced-motion: reduce) {
  .fb-panel, .fb-launch { transition: none; animation: none; }
}