/* ===================================
   Product feedback - floating button + modal (feedback-ui.js)
   Mirrors the report modal treatment (design-system.css .report-*), reusing
   the shared .modal / .modal-content / .form-* primitives.
   =================================== */

/* --- Floating action button (FAB) --- */
.feedback-fab {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  /* Above page content (--z-overlay: 1000), below modals (2000) and toasts
     (3000). On the map page the modal still paints above it. */
  z-index: var(--z-overlay);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px; /* touch target */
  padding: var(--space-3) var(--space-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border-bright);
  border-radius: var(--radius-full);
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.feedback-fab:hover {
  background: var(--c-surface-glow);
  border-color: var(--c-accent);
  color: var(--c-text);
  transform: translateY(-1px);
}

.feedback-fab:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.feedback-fab-icon {
  flex-shrink: 0;
  color: var(--c-accent);
}

/* On the map page (index.html) the FAB sits over the sidebar footer's legal
   links on desktop - lift it clear so those stay clickable (WCAG 2.5.8). */
@media (min-width: 769px) {
  .feedback-fab-map {
    bottom: calc(var(--space-6) + 60px);
  }
}

/* On the map page (index.html) the "Select Area" pill and the Leaflet
   attribution own the bottom edge on phones - the modifier lifts the FAB
   clear of them. */
@media (max-width: 768px) {
  .feedback-fab-map {
    bottom: calc(60px + var(--space-4));
  }

  /* The FAB is fixed to the body, so it paints above the whole map page and
     would float over the open ideas sheet's cards. Stand it down while the
     sheet is up (AppModule.setIdeasSheet owns the body class). */
  body.ideas-sheet-open .feedback-fab-map {
    opacity: 0;
    pointer-events: none;
  }
  /* Save horizontal room on small screens: icon-only pill. */
  .feedback-fab .feedback-fab-label {
    display: none;
  }
  .feedback-fab {
    right: var(--space-4);
    padding: var(--space-3);
    min-width: 44px;
    justify-content: center;
  }
}

/* --- Modal (reuses .modal / .modal-content) --- */
.feedback-modal-content {
  max-width: 460px;
}

.feedback-intro {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--c-text-muted);
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--c-border-bright);
  background: var(--c-abyss);
  margin-bottom: var(--space-4);
}

.feedback-form-error {
  font-size: var(--text-sm);
  color: var(--c-danger);
  background: var(--c-danger-glow);
  border: 1px solid color-mix(in srgb, var(--c-danger) 40%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.feedback-categories {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.feedback-category-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-bottom: 1px solid var(--c-border);
  transition: background var(--duration-fast);
  min-height: 44px;
}

.feedback-category-row:last-child {
  border-bottom: none;
}

.feedback-category-row:hover {
  background: var(--c-surface-glow);
}

.feedback-category-row:has(input:checked) {
  background: var(--c-accent-soft);
  box-shadow: inset 2px 0 0 var(--c-accent);
}

.feedback-category-row input[type="radio"] {
  accent-color: var(--c-accent);
  flex-shrink: 0;
}

.feedback-category-index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-text-dim);
  flex-shrink: 0;
}

.feedback-category-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.feedback-category-label {
  font-size: var(--text-sm);
  color: var(--c-text);
}

.feedback-category-label-fr {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-text-muted);
}

.feedback-message-group {
  position: relative;
}

.feedback-char-count {
  position: absolute;
  right: 0;
  top: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-text-dim);
}

.feedback-email-group[hidden] {
  display: none;
}

.feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.feedback-actions .btn {
  min-height: 44px;
}