/* feedback.css — the floating "Send feedback" button + form modal (assets/feedback.js).
   Mirrors assist.css's FAB conventions but sits on the OPPOSITE side (inset-inline-start) so it
   never overlaps the AI assistant's FAB (.as-fab, inset-inline-end) on mobile or desktop. */
.fb-fab {
  /* Above deal details (2000) so feedback can be attached to the offer currently open, but below
     the source/sign-in modal (2100) so it never competes with a purchase action. */
  position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 2050;
  min-width: 48px; height: 48px; padding: 0 15px; gap: 8px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--ink, #0F172A); color: #fff; font-size: 20px;
  box-shadow: 0 6px 20px rgba(15,23,42,.28); display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.fb-fab-label { font: 700 13px/1 var(--sans, system-ui, sans-serif); white-space: nowrap; }
.fb-fab-icon { line-height: 1; }
.fb-fab:hover { transform: scale(1.06); }
.fb-fab:focus-visible { outline: 2px solid var(--blue, #2563EB); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fb-fab { transition: none; } }
@media (max-width: 600px) {
  .fb-fab {
    inset-inline-start: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    min-width: 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: 0 4px 16px rgba(15,23,42,.24);
  }
  .fb-fab-label { display: none; }
}

/* Reuses .modal-bg/.modal from app.css for the dialog chrome; these are feedback-specific additions. */
.fb-modal { z-index: 2400; }
.fb-modal .modal { max-width: 420px; }
.fb-modal .modal > .x { border: 0; background: transparent; padding: 0; font-family: inherit; }
.fb-modal .modal > .x:focus-visible { outline: 2px solid var(--blue, #2563EB); outline-offset: 4px; }
.fb-form { display: flex; flex-direction: column; gap: .85rem; margin-top: .9rem; }
.fb-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 500; color: var(--ink, #0F172A); }
.fb-form select, .fb-form textarea, .fb-form input {
  padding: 10px 12px; border: 1.5px solid #e2e8f0; border-radius: 9px; font-size: .95rem; font-family: inherit;
}
.fb-form select:focus, .fb-form textarea:focus, .fb-form input:focus { outline: none; border-color: var(--blue, #2563EB); }
.fb-form textarea { resize: vertical; min-height: 80px; }
.fb-opt { font-weight: 400; color: var(--muted, #64748b); font-size: .78rem; }
.fb-status { font-size: .85rem; margin: 0; min-height: 1.2em; }
.fb-status[data-state="err"] { color: #DC2626; }
.fb-status[data-state="ok"] { color: #059669; }
.fb-disc { color: var(--muted, #64748b); font-size: 11.5px; margin-top: .4rem; }
.fb-track { font-family: var(--display, monospace); font-weight: 700; }