/* =============================================================================
   KANINE — feedback capture spine styling (execution pack A1, WP7).
   The FAB must sit ABOVE Blazor's reconnect overlay (z-index ~1000 range) so
   "report this" stays reachable exactly when the circuit is dying (M3): 10000 wins.
   Dialog/scrim use the design-system tokens; dark overrides use BARE `html.dark`
   selectors (repo gotcha: `:global(html.dark)` is a dead rule outside scoped CSS).
   ========================================================================== */

.kl-feedback-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10000;                 /* above Blazor's reconnect overlay (M3) */
  width: 48px;
  height: 48px;
  border-radius: var(--k-radius-full, 999px);
  border: 1px solid var(--k-border, #24435c);
  background: var(--k-accent, #12a6a6);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(10, 26, 43, 0.35);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.kl-feedback-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(10, 26, 43, 0.45);
}

.kl-feedback-fab:focus-visible {
  outline: 2px solid var(--k-accent, #12a6a6);
  outline-offset: 2px;
}

/* Phone + landscape-tablet widths dock a fixed bottom nav (--k-bottomnav-h, kanine-design-system.css §mobile): at
   bottom:20px the FAB sat ON TOP of the bar's 5th item ("More"), stealing its label and tap target on every page
   (2026-07-16 mobile sweep). Lift it clear of the bar + the iOS home-indicator inset at exactly the widths the bar
   exists — so this query MUST TRACK the bottom-nav breakpoint in kanine-design-system.css §7 (raised 1024 -> 1280
   by the owner ruling 2026-07-24). */
@media (max-width: 1280px) {
  .kl-feedback-fab {
    bottom: calc(var(--k-bottomnav-h, 56px) + env(safe-area-inset-bottom, 0px) + 16px);
  }

  /* ...but the lift above is keyed on WIDTH, and the bar is keyed on the LAYOUT. The CHROMELESS pre-auth layouts
     (web AuthLayout — /login, /signup, /signup/cloud*, /invite/accept, /first-login, /2fa, /link-google, /link-apple,
     /logout; MAUI GateLayout — /sign-in) render no ShellNav at all, so there is no bottom bar to clear and the FAB
     was floating 72px up over ordinary page content for nothing (owner report 2026-07-26 on /invite/accept at 393px:
     the "!" sat on the Confirm password field, and at a real phone's viewport height it also covered the primary
     "Create my account" button — measured hits at 393x660 and 393x700). Stand the lift down where the bar is
     genuinely ABSENT from the DOM, the same discriminator the Task-30 rule below uses and the same stand-down shape
     kanine-design-system.css:1725 already uses for the pinned-rail case. `.kl-shellnav-bottom` is rendered
     UNCONDITIONALLY by ShellNav, so this selector separates SHELL from NO-SHELL honestly; it cannot (and need not)
     tell a bar that is merely display:none from one that is shown — the only two states where the bar is in the DOM
     but hidden are >1280px (outside this query) and the pinned rail (already handled at design-system:1725, whose
     `html[data-shellrail="pinned"]` cannot co-occur with this `:not(:has(...))`, so the two never race).
     Written as an ADDITIVE stand-down rather than by scoping the lift itself: in a WebView with no `:has()` support
     the whole selector is dropped and every page keeps today's lifted FAB — i.e. the 2026-07-16 bottom-nav defect
     stays fixed and only this cosmetic lift survives. Scoping the lift would have degraded the other way and put the
     FAB back on the nav's 5th item. The safe-area inset is kept so the device head's home indicator still clears. */
  body:not(:has(.kl-shellnav-bottom)) .kl-feedback-fab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  }
}

/* Task-30 (owner report 2026-07-20): on the phone the record-build WIZARD docks a sticky step-footer (Back / Next /
   "Done with finds") ABOVE the bottom nav, and the FAB's normal +16px perch landed squarely on that footer's PRIMARY
   button — the "!" stole the tap target of the most-used control on the screen. Record-build also has a COMPREHENSIVE
   view (the per-user default, RecordBuildSurface.razor `_mode`) with no sticky footer at all — lifting there put the
   FAB on top of an ordinary form field instead (owner report 2026-07-23, "K9 Unit" select at 393px). The two views are
   a Razor `@if/else` (RecordBuildSurface.razor), so `.kl-rb-wizard-nav` — the fixed footer bar (see
   RecordBuildSurface.razor.css) — is genuinely ABSENT from the DOM in Comprehensive, not merely hidden; keying on it
   (rather than the page alone) discriminates the two views honestly. Only at the ≤640px wizard breakpoint (above it
   the desktop rail layout has no sticky footer) lift the FAB clear of the footer so both the primary action and
   "report feedback" stay fully tappable. `body:has(...)` scopes it to record-build WITH that footer present, without
   touching the global FAB; if a WebView lacks :has() the rule is simply ignored (the FAB keeps its normal spot — no
   worse than before) in EITHER view. The FAB floats over the last field's (usually empty) right edge instead. */
@media (max-width: 640px) {
  body:has([data-testid="record-build"] .kl-rb-wizard-nav) .kl-feedback-fab {
    bottom: calc(var(--k-bottomnav-h, 56px) + env(safe-area-inset-bottom, 0px) + 92px);
  }
}

.kl-feedback-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;                 /* above the FAB while open */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 26, 43, 0.6);   /* brand-navy scrim (F5 journey-6 heuristic samples this) */
}

.kl-feedback-card {
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 20px 22px;
  border-radius: var(--k-radius-lg, 14px);
  border: 1px solid var(--k-border, #24435c);
  background: var(--k-surface, #fff);
  color: var(--k-text, #0a1a2b);
  box-shadow: 0 18px 48px rgba(10, 26, 43, 0.4);
}

.kl-feedback-title {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 700;
}

.kl-feedback-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.kl-feedback-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.kl-feedback-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--k-text-muted, #4a5b6b);
}

.kl-feedback-input {
  width: 100%;
  box-sizing: border-box;   /* the popup mounts on <body>, outside .kl-shell-main's border-box reset,
                               so width:100% + padding + border must be folded back in here or the
                               inputs overflow past the card's right padding (worse on narrow/mobile) */
  padding: 8px 10px;
  border-radius: var(--k-radius-md, 8px);
  border: 1px solid var(--k-border, #24435c);
  background: var(--k-surface, #fff);
  color: var(--k-text, #0a1a2b);
  font: inherit;
}

.kl-feedback-textarea {
  resize: vertical;
  min-height: 52px;
}

.kl-feedback-triad {
  display: block;
}

.kl-feedback-pickrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.kl-feedback-picked {
  font-size: 0.8rem;
  color: var(--k-text-muted, #4a5b6b);
}

.kl-feedback-annotate {
  display: block;
  max-width: 100%;
  margin: 10px 0;
  border-radius: var(--k-radius-md, 8px);
  border: 1px solid var(--k-border, #24435c);
  cursor: crosshair;
  touch-action: none;
}

.kl-feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.kl-feedback-btn {
  padding: 8px 16px;
  border-radius: var(--k-radius-md, 8px);
  border: 1px solid var(--k-border, #24435c);
  background: var(--k-surface, #fff);
  color: var(--k-text, #0a1a2b);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.kl-feedback-btn-primary {
  background: var(--k-accent, #12a6a6);
  border-color: var(--k-accent, #12a6a6);
  color: #fff;
}

.kl-feedback-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kl-feedback-btn-ghost {
  background: transparent;
}

.kl-feedback-result {
  margin-top: 12px;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--k-text-muted, #4a5b6b);
}

/* Owner-directed: the Send button spins + disables while the write is IN FLIGHT (no double-fire, and the
   reporter sees it working), and the CONFIRMED-write success state shows a real green checkmark — the server
   returns the persisted report id only after the report is committed, so this is a genuine backend guarantee. */
.kl-feedback-btn.is-loading {
  opacity: 0.85;
  cursor: default;
}

.kl-feedback-btn.is-loading::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.45em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: kl-feedback-spin 0.6s linear infinite;
}

@keyframes kl-feedback-spin {
  to { transform: rotate(360deg); }
}

.kl-feedback-result--ok {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--k-success, #15803d);
  font-weight: 600;
}

.kl-feedback-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--k-success, #15803d);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  animation: kl-feedback-pop 0.25s ease-out;
}

@keyframes kl-feedback-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* The off-screen scramble mount styles itself inline (width-pinned); this rule only reserves the hook. */
.kl-feedback-clone-mount {
}

/* ---- dark mode (BARE html.dark — never :global(...)) ---------------------------------------------- */
html.dark .kl-feedback-card {
  background: var(--k-surface, #10202f);
  color: var(--k-text, #e6edf3);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

html.dark .kl-feedback-input,
html.dark .kl-feedback-btn {
  background: var(--k-surface, #10202f);
  color: var(--k-text, #e6edf3);
}

html.dark .kl-feedback-btn-primary {
  background: var(--k-accent, #12a6a6);
  color: #041014;
}

html.dark .kl-feedback-result--ok {
  color: var(--k-success, #4ade80);
}

html.dark .kl-feedback-check {
  background: var(--k-success, #16a34a);
  color: #04140a;
}