/* First Fleet CRM, Suggestion box.
   Two surfaces in one small stylesheet: the floating widget that rides on every
   authenticated staff page (.ffb-*) and Adrian's review queue (.fbx-*).

   It uses only the design tokens declared in app.css :root / [data-theme], so
   light and dark themes are both handled without a hard-coded colour, and
   app.css / support.css are never edited (other writers own them).

   Placement. The existing "Support / feedback" control (support.css) sits fixed
   at the bottom right on screens wider than 768px, and support.css already
   reserves 80px below page content for it. The Suggestion box button sits in
   that same 12px-from-the-bottom band, immediately to its LEFT (feedback.js
   measures the Support control and sets --ffb-fab-right), so neither covers the
   other and no board control gains a new obstruction. At 768px and below the
   Support control is hidden inside the app shell, so the button takes the
   corner, inset by the device safe area, and reserves its own space below the
   content. Everything here sits under the mobile off-canvas menu (z 55/60) and
   the slide-over (z 70/71) except the open panel and toast, which are modal-ish
   and deliberately on top. The topbar hamburger is top-left and never shares
   space with any of this. */

/* ------------------------------------------------------------------ widget */
.ffb { font-size: 0.9rem; }

.ffb-fab {
  position: fixed;
  z-index: 45;
  /* Pre-JS fallback = where feedback.js measures it beside Support (16px
     inset + the 142px Support control + an 8px gap), so there is no flash of
     the two controls overlapping before the deferred script runs. */
  right: var(--ffb-fab-right, 166px);
  /* --ffb-fab-bottom is set by feedback.js only to lift the button above a
     page's own bottom-anchored bar (e.g. the Market assistant composer). */
  bottom: var(--ffb-fab-bottom, calc(env(safe-area-inset-bottom, 0px) + 12px));
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 0.95rem;
  border: 1px solid var(--btn-hover-border);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 700;
  font-size: 0.84rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ffb-fab:hover { transform: translateY(-1px); }
.ffb-fab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.ffb-fab[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--focus-ring), var(--shadow-lift); }
.ffb-fab-ico { flex: 0 0 auto; }

/* Narrower screens: icon only (the label stays in the accessibility tree). */
@media (max-width: 900px) {
  .ffb-fab { width: 44px; padding: 0; justify-content: center; gap: 0; }
  .ffb-fab-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Phones and small tablets: Support is hidden, so take the corner. */
@media (max-width: 768px) {
  .ffb-fab {
    right: calc(env(safe-area-inset-right, 0px) + 12px);
    bottom: var(--ffb-fab-bottom, calc(env(safe-area-inset-bottom, 0px) + 12px));
    opacity: 0.94;
  }
  /* Keep the last row of any page clear of the button when scrolled to the end
     (support.css drops its own reservation at this width). */
  .app-main:has(> .ffb) > .content {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* The scrim only earns its keep on a phone, where the panel is a bottom sheet.
   On a desktop the panel is a small card and a click anywhere outside it
   closes it, so a full-screen dim would just be in the way. */
.ffb-scrim {
  position: fixed;
  inset: 0;
  z-index: 94;
  display: none;
  background: var(--scrim);
}
@media (max-width: 640px) {
  .ffb-scrim:not([hidden]) { display: block; }
}

.ffb-panel {
  position: fixed;
  z-index: 95;
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 66px); /* above the button band */
  box-sizing: border-box;
  width: min(400px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 90px));
  max-height: min(720px, calc(100dvh - 90px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-pop);
}
.ffb-panel[hidden] { display: none; }

@media (max-width: 640px) {
  .ffb-panel {
    left: calc(env(safe-area-inset-left, 0px) + 8px);
    right: calc(env(safe-area-inset-right, 0px) + 8px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    width: auto;
    max-height: 88vh;
    max-height: 88dvh;
  }
}

.ffb-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.ffb-head h2 { margin: 0; font-size: 1.02rem; color: var(--head); }
.ffb-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--muted); cursor: pointer;
}
.ffb-x:hover { background: var(--hover); color: var(--text); }
.ffb-x:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

.ffb-intro { margin: 0.3rem 0 0.9rem; color: var(--muted); font-size: 0.82rem; }

.ffb-label {
  display: block;
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.ffb-kinds { margin: 0 0 0.75rem; padding: 0; border: 0; min-width: 0; }
.ffb-kind-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ffb-kind { display: inline-flex; position: relative; }
.ffb-kind input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ffb-kind span {
  display: inline-block;
  padding: 0.32rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.ffb-kind input:checked + span {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.ffb-kind input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.ffb-form textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  resize: vertical;
}
.ffb-form textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
@media (max-width: 640px) {
  .ffb-form textarea { font-size: 16px; } /* prevents iOS zoom-on-focus */
}

.ffb-count { margin: 0.25rem 0 0.7rem; color: var(--faint); font-size: 0.72rem; text-align: right; }

.ffb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.ffb-tool { gap: 0.35rem; }
.ffb-tool[aria-pressed="true"] { border-color: var(--bad-deep); color: var(--bad); }
.ffb-hidden { display: none; }

.ffb-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--bad);
}
.ffb-timer[hidden] { display: none; }

.ffb-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.ffb-note { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.76rem; min-height: 1em; }
.ffb-note:empty { margin: 0; min-height: 0; }

.ffb-attachments { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.ffb-attachments:empty { margin: 0; }
.ffb-att {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.ffb-att img {
  width: 54px; height: 40px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-2);
}
.ffb-att audio { max-width: 190px; height: 32px; }
.ffb-att-meta { flex: 1 1 auto; min-width: 0; }
.ffb-att-name { display: block; font-size: 0.78rem; font-weight: 600; }
.ffb-att-size { display: block; color: var(--faint); font-size: 0.7rem; }
.ffb-att-remove {
  flex: 0 0 auto;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--muted);
  font: inherit; font-size: 0.72rem;
  padding: 0.22rem 0.5rem;
  cursor: pointer;
}
.ffb-att-remove:hover { color: var(--bad); border-color: var(--line-bad); }
.ffb-att-remove:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
@media (max-width: 420px) {
  .ffb-att { flex-wrap: wrap; }
  .ffb-att audio { max-width: 100%; flex: 1 1 100%; }
}

.ffb-check { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--text); }
.ffb-check input { margin-top: 0.15rem; }

.ffb-error {
  margin: 0.7rem 0 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line-bad);
  border-radius: var(--r-sm);
  background: var(--st-over-bg);
  color: var(--st-over-fg);
  font-size: 0.8rem;
}
.ffb-error[hidden] { display: none; }

.ffb-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s4); }

/* "Sent to Adrian, thank you". Colours come from app.css .toast-success. */
.ffb-toast {
  position: fixed;
  z-index: 96;
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 66px);
  max-width: min(360px, calc(100vw - 32px));
  font-weight: 600;
  box-shadow: var(--shadow-pop);
}
.ffb-toast[hidden] { display: none; }
@media (max-width: 640px) {
  .ffb-toast { left: calc(env(safe-area-inset-left, 0px) + 12px); right: calc(env(safe-area-inset-right, 0px) + 12px); max-width: none; }
}

/* Nothing in the widget should animate for someone who asked us not to. */
@media (prefers-reduced-motion: reduce) {
  .ffb-fab { transition: none; }
  .ffb-fab:hover { transform: none; }
}

/* ------------------------------------------------------- review queue (fbx) */
.fbx-sub { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.86rem; }
.fbx-faint { color: var(--faint); font-size: 0.78rem; word-break: break-word; }
.fbx-label { display: block; margin: 0 0 0.35rem; color: var(--muted); font-size: 0.78rem; font-weight: 700; }

.fbx-counts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.fbx-count-card { display: block; text-decoration: none; color: inherit; }
.fbx-count-card:hover { border-color: var(--accent); text-decoration: none; }
.fbx-count-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.fbx-count-num { font-size: 1.5rem; font-weight: 700; color: var(--head); line-height: 1.1; }
.fbx-count-label { color: var(--muted); font-size: 0.78rem; }

.fbx-filter { display: flex; flex-direction: column; font-size: 0.75rem; color: var(--muted); }
.fbx-filter select {
  margin-top: 0.2rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
}

.fbx-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
/* A table inside its own scroller owns its top edge: same fix app.css applies
   to .board-scroll / .contacts-table-wrap, or the sticky header parks
   --topbar-h down and paints over the first rows. */
.fbx-table-wrap table.list th { top: 0; }
.fbx-title-cell { max-width: 34ch; }
.fbx-row-new td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.fbx-kind, .fbx-status { font-weight: 600; }
.fbx-kind-bug { background: var(--st-over-bg); color: var(--st-over-fg); }
.fbx-kind-complaint { background: var(--st-high-bg); color: var(--st-high-fg); }
.fbx-kind-suggestion { background: var(--st-new-bg); color: var(--st-new-fg); }
.fbx-kind-question { background: var(--st-wait-bg); color: var(--st-wait-fg); }
.fbx-kind-other { background: var(--st-stale-bg); color: var(--st-stale-fg); }
.fbx-status-new { background: var(--st-prog-bg); color: var(--st-prog-fg); }
.fbx-status-reviewed { background: var(--st-med-bg); color: var(--st-med-fg); }
.fbx-status-actioned { background: var(--st-done-bg); color: var(--st-done-fg); }
.fbx-status-dismissed { background: var(--st-stale-bg); color: var(--st-stale-fg); }

.fbx-pager { display: flex; align-items: center; justify-content: center; gap: var(--s3); margin: var(--s3) 0; }

.fbx-detail .panel h2 { margin-top: 0; font-size: 0.95rem; color: var(--head); }
.fbx-detail .panel h3 { margin: var(--s4) 0 var(--s2); font-size: 0.85rem; color: var(--head); }
.fbx-body { margin: 0; font-size: 0.95rem; line-height: 1.55; overflow-wrap: anywhere; }

.fbx-shots { display: flex; flex-wrap: wrap; gap: var(--s3); }
.fbx-shot { margin: 0; max-width: 100%; }
.fbx-shot img {
  display: block;
  max-width: min(520px, 100%);
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--inset);
}
.fbx-shot figcaption { margin-top: 0.3rem; color: var(--faint); font-size: 0.75rem; }

.fbx-voice { margin-bottom: var(--s3); }
.fbx-voice audio { width: min(420px, 100%); }

.fbx-log { font-size: 0.82rem; }
.fbx-log code { font-size: 0.78rem; overflow-wrap: anywhere; }
.fbx-navlist, .fbx-history { margin: 0; padding-left: 1.2rem; color: var(--muted); font-size: 0.82rem; }
.fbx-history li { margin-bottom: 0.3rem; color: var(--text); }

.fbx-status-form { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.fbx-notes-form textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: var(--s2);
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  resize: vertical;
}