/* Beta feedback: the nav badge, "Tester Feedback", the widget and the admin
   pages. A sheet of its own rather than more of style.css, so the always-
   loaded main sheet does not carry the admin inbox's rules. Linked from
   base.html on every page, because the admin setup page has to be styled
   before COUNTIDS_ADMIN_PUBLIC_KEY - and so the rest of the feature - exists.
   Colours come from style.css's custom properties. */

/* --------------------------------------------------------- nav badge --- */

.fb-badge {
  display: inline-block;
  min-width: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

/* -------------------------------------------------- tester feedback --- */

/* fb-label is shared: the widget's form, the admin inbox
   (admin_area.html) and the admin key setup page all read it. */
.fb-label { font-weight: 600; }

/* .card ships with border: none (a shadow carries its edge instead), so a
   border-color alone would be a no-op - this sets the width too. */
.fb-list { display: flex; flex-direction: column; gap: 10px; }
.fb-item { padding: 0; overflow: hidden; }
.fb-item.is-changed { border: 1px solid var(--accent-soft-border); }

/* -- the collapsed row: chevron, bold when, muted preview, marker, pill --
   It wraps rather than clip: on a narrow screen the preview takes a line of
   its own (below), and the marker and pill drop to the next line, still at
   the right, when they do not fit beside the date. */
.fb-conversation > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.fb-conversation > summary::-webkit-details-marker { display: none; }
.fb-conversation > summary::before {
  content: "\25B8";
  flex: none;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.fb-conversation[open] > summary::before { transform: rotate(90deg); }
.fb-row-when { flex: none; font-weight: 600; white-space: nowrap; }
.fb-row-preview {
  /* A zero basis, so on a wrapping row the preview shrinks into the space
     left on the first line instead of jumping to a line of its own. */
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fb-row-right {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px 10px;
  max-width: 100%;
  margin-left: auto;
}
.fb-new { color: var(--accent-strong); font-size: 13px; font-weight: 600; white-space: nowrap; }
.fb-status {
  padding: 2px 10px;
  border-radius: 100px;
  background: var(--surface-sunken-alt);
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}
.fb-status-working { background: var(--warning-soft); color: var(--warning); }
.fb-status-fixed { background: var(--success-soft); color: var(--success); }

/* -------------------------------------------------- the expanded body --- */
.fb-conversation-body { display: flex; flex-direction: column; gap: 14px; padding: 0 16px 16px; }
.fb-context { color: var(--text-muted); font-size: 13px; }

.fb-thread-chat { display: flex; flex-direction: column; gap: 10px; }
.fb-bubble { max-width: 72%; padding: 8px 14px; }
.fb-bubble-tester {
  align-self: flex-end;
  border-radius: 14px 14px 4px 14px;
  background: var(--accent);
  color: #fff;
}
.fb-bubble-admin {
  align-self: flex-start;
  border: 1px solid var(--border-strong);
  border-radius: 14px 14px 14px 4px;
  background: var(--surface);
}
.fb-bubble-text { white-space: pre-wrap; overflow-wrap: break-word; }
.fb-bubble-meta { margin-top: 4px; color: var(--text-muted); font-size: 12px; }
/* The purple bubble's own meta line needs a lighter tint than --text-muted
   to stay readable against --accent. */
.fb-bubble-tester .fb-bubble-meta { color: #EBD9F1; }

.fb-reply { display: flex; align-items: center; gap: 8px; }
.fb-reply-input {
  flex: 1;
  height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  font: inherit;
  resize: none;
  overflow-y: auto;
}
.fb-reply-send {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
}
.fb-reply-send svg { display: block; }

@media (max-width: 560px) {
  /* The preview under the date, lined up with it past the chevron. */
  .fb-row-preview { order: 3; flex-basis: 100%; padding-left: 22px; }
}

@media (max-width: 480px) {
  .fb-bubble { max-width: 85%; }
}

/* ------------------------------------------------------------ widget --- */

.fb {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.fb-open {
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 16px;
  box-shadow: var(--shadow-2);
  cursor: pointer;
}
.fb-open:hover { background: var(--accent-strong); }
.fb-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(360px, calc(100vw - 40px));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.fb-head { display: flex; align-items: center; justify-content: space-between; }
.fb-title { margin: 0; font-size: 17px; }
.fb-close {
  /* Stays at the right when the heading is hidden after a send. */
  margin-left: auto;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.fb-form { display: flex; flex-direction: column; gap: 10px; }
.fb-form .fb-label { margin: 0; }
.fb-faces { display: flex; justify-content: center; gap: 16px; }
.fb-face {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.fb-face:hover,
.fb-face[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.fb-required { color: var(--danger); }
.fb-hint { margin: 0; color: var(--text-muted); font-size: 13px; }
.fb-text-row { display: flex; align-items: flex-start; gap: 8px; }
.fb-text {
  flex: 1;
  min-height: 96px;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
  font-size: 16px;
  resize: vertical;
}
.fb-mic {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  font-size: 20px;
  cursor: pointer;
}
.fb-mic[aria-pressed="true"] { border-color: var(--danger); background: var(--danger-soft); }
.fb-notice { margin: 0; color: var(--text-muted); font-size: 13px; }
.fb-mic-start {
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.fb-mic-start:hover { background: var(--accent-strong); }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-chip {
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.fb-chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.fb-share { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.fb-share-multi { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.fb-share-text { margin: 0; }
.fb-dropdown { border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); }
.fb-dropdown-summary { padding: 8px 10px; cursor: pointer; }
.fb-dropdown[open] .fb-dropdown-summary { border-bottom: 1px solid var(--border); }
.fb-dropdown-list {
  display: flex;
  flex-direction: column;
  max-height: 180px;
  overflow-y: auto;
  padding: 4px 0;
}
.fb-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 4px 10px; }
.fb-dropdown-item:hover { background: var(--accent-state); }
.fb-dropdown-all { font-weight: 600; border-bottom: 1px solid var(--border); }
.fb-thanks { margin: 0; font-size: 16px; }
.fb-thanks a { color: var(--accent); }
.fb-error { margin: 0; color: var(--danger); font-size: 14px; }

/* The fixed button sits over the bottom of the page; with this much room
   under the footer, the last thing on any page can always be scrolled out
   from under it. base.html sets the class only where the widget is drawn. */
body.has-feedback-widget { padding-bottom: 76px; }

@media (max-width: 480px) {
  /* A smaller button on a phone, closer to the corner. */
  .fb { right: 12px; bottom: 12px; }
  .fb-open { padding: 8px 14px; font-size: 14px; }
  .fb-panel { width: calc(100vw - 24px); max-height: calc(100vh - 80px); }
  body.has-feedback-widget { padding-bottom: 60px; }
}

@media print {
  .fb { display: none; }
  body.has-feedback-widget { padding-bottom: 0; }
}

/* ------------------------------------------------------------- admin --- */

/* The inbox's own rules (fba-*) are in feedback-admin.css; these two are
   read by admin_feedback_setup.html and admin_area.html. */
.fb-setup-key { margin: 0; white-space: pre-wrap; word-break: break-all; }
.fb-hash { font-family: monospace; word-break: break-all; }