/* Feedback drawer condiviso (radar-ui/react, FeedbackDrawer) — pelle unica per
   tutte le app Radar. Autosufficiente come radar-landing.css: usa gli alias
   semantici di radar-app.css quando ci sono e ripiega sui token grezzi
   --color-* di valorecasa.css altrimenti. radar-app.css la importa già; le app
   fuori dal look Casa Radar importano questo file direttamente.

   I singoli frontend possono continuare a rifinire scrim/drawer nel proprio
   styles.css: quelle regole vengono dopo l'@import e vincono in cascata. */

.scrim,
.drawer,
.btn-feedback {
  --rfb-ink: var(--ink, var(--color-text, #1f2a24));
  --rfb-ink-soft: var(--ink-soft, var(--color-text-secondary, #57615a));
  --rfb-muted: var(--muted, var(--color-text-secondary, #6a746d));
  --rfb-line: var(--line, var(--color-border, #dce3de));
  --rfb-line-strong: var(--line-strong, var(--color-border, #c9d2cc));
  --rfb-surface: var(--surface, var(--color-surface, #fffaf2));
  --rfb-surface-soft: var(--surface-soft, var(--color-surface-muted, #f0e8dc));
  --rfb-accent: var(--primary, var(--color-brand, #2f6b57));
  --rfb-accent-strong: var(--primary-strong, var(--color-brand-strong, #24523f));
  --rfb-accent-wash: var(--primary-wash,
    color-mix(in srgb, var(--rfb-accent) 12%, var(--rfb-surface)));
  --rfb-on-accent: var(--radar-on-accent, var(--on-primary, #ffffff));
  --rfb-danger: var(--danger, oklch(0.55 0.16 25));
  --rfb-radius-sm: var(--radius-sm, var(--vc-radius-sm, 8px));
  --rfb-ease: var(--ease, cubic-bezier(.2, .7, .3, 1));
}

/* --- base scrim/drawer: fondazione per le app che non ne definiscono uno --- */
.scrim { position: fixed; inset: 0; background: var(--scrim-bg, var(--vc-scrim, rgba(31, 42, 36, .42)));
  z-index: var(--z-overlay, 40);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: rfb-fade .2s var(--rfb-ease); }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(440px, 94vw);
  background: var(--rfb-surface); border-left: 1px solid var(--rfb-line);
  box-shadow: var(--shadow-lg, 0 18px 44px rgba(31, 42, 36, .22)); z-index: var(--z-drawer, 50);
  display: flex; flex-direction: column; animation: rfb-slidein .26s var(--rfb-ease); }
@keyframes rfb-fade { from { opacity: 0; } }
@keyframes rfb-slidein { from { transform: translateX(16px); opacity: 0; } }
.drawer > header { padding: var(--space-4, 16px); border-bottom: 1px solid var(--rfb-line);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2, 8px); }
.drawer > header strong { font-size: var(--text-base, 15px); display: flex; align-items: center; gap: 8px; }
.drawer .body { padding: var(--space-4, 16px); padding-bottom: calc(var(--space-4, 16px) + env(safe-area-inset-bottom, 0px)); overflow: auto; flex: 1; display: flex;
  flex-direction: column; gap: var(--space-3, 12px); }
.drawer .iconbtn { min-width: 44px; min-height: 44px; display: grid; place-items: center;
  border-radius: var(--rfb-radius-sm); border: 1px solid var(--rfb-line);
  background: var(--rfb-surface); color: var(--rfb-ink-soft); font-size: 15px; cursor: pointer; }
.drawer .iconbtn:hover { border-color: var(--rfb-line-strong); color: var(--rfb-ink); }
.drawer .results-head { font-size: var(--text-xs, 12px); color: var(--rfb-muted);
  font-weight: 600; margin-top: 2px; }

/* --- bottone d'apertura: azione secondaria, ghost in topbar --- */
.btn-feedback { background: transparent; border-color: var(--rfb-line-strong); color: var(--rfb-ink-soft); }
.btn-feedback:hover { border-color: var(--rfb-muted); color: var(--rfb-ink); background: var(--rfb-surface-soft); }

/* --- drawer feedback: submit e mark tengono l'accento pieno --- */
.drawer.feedback { width: min(460px, 94vw); }
.drawer.feedback .btn-feedback { background: var(--rfb-accent); border-color: var(--rfb-accent); color: var(--rfb-on-accent); }
.drawer.feedback .btn-feedback:hover { background: var(--rfb-accent-strong); border-color: var(--rfb-accent-strong); }
.drawer.feedback .btn-feedback:disabled:hover { background: var(--rfb-accent); border-color: var(--rfb-accent); }
.feedback-mark { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: var(--rfb-accent-wash); color: var(--rfb-accent-strong); font-size: 14px; font-weight: 800; }
.feedback-form { display: grid; gap: var(--space-2, 8px); }
.feedback-form textarea { width: 100%; min-height: 128px; resize: vertical;
  padding: var(--space-3, 12px); border: 1px solid var(--rfb-line-strong);
  border-radius: var(--rfb-radius-sm); background: var(--rfb-surface); color: var(--rfb-ink);
  font: inherit; font-size: var(--text-sm, 13.5px); line-height: 1.5;
  transition: border-color .15s var(--rfb-ease), box-shadow .15s var(--rfb-ease); }
.feedback-form textarea::placeholder { color: var(--rfb-muted); }
.feedback-actions { display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3, 12px); color: var(--rfb-muted); font-size: var(--text-xs, 12px); }
.feedback-actions-buttons { display: flex; align-items: center; gap: var(--space-2, 8px); }
/* allega screenshot: ghost come il bottone d'apertura, mai in competizione col submit */
.feedback-attach { background: transparent; border-color: var(--rfb-line-strong); color: var(--rfb-ink-soft); }
.feedback-attach:hover:not(:disabled) { border-color: var(--rfb-muted); color: var(--rfb-ink);
  background: var(--rfb-surface-soft); }
.feedback-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.feedback-thumb { position: relative; display: inline-flex; }
.feedback-thumb img { width: 56px; height: 56px; object-fit: cover;
  border: 1px solid var(--rfb-line-strong); border-radius: var(--rfb-radius-sm); }
.feedback-thumb button { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px;
  display: grid; place-items: center; padding: 0; border-radius: 50%; font-size: 11px; line-height: 1;
  border: 1px solid var(--rfb-line-strong); background: var(--rfb-surface); color: var(--rfb-ink-soft);
  cursor: pointer; }
.feedback-thumb button:hover { color: var(--rfb-ink); border-color: var(--rfb-muted); }
.feedback-item-images { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px);
  margin: 0 0 var(--space-2, 8px); }
.feedback-item-images img { width: 72px; height: 72px; object-fit: cover; display: block;
  border: 1px solid var(--rfb-line); border-radius: var(--rfb-radius-sm);
  background: var(--rfb-surface); }
.feedback-item-images a:hover img { border-color: var(--rfb-muted); }
.feedback-error { padding: var(--space-2, 8px) var(--space-3, 12px); border-radius: var(--rfb-radius-sm);
  background: color-mix(in srgb, var(--rfb-danger) 9%, var(--rfb-surface));
  color: color-mix(in srgb, var(--rfb-danger) 78%, var(--rfb-ink)); font-size: var(--text-sm, 13.5px); }
.feedback-empty { color: var(--rfb-muted); font-size: var(--text-sm, 13.5px); padding: var(--space-3, 12px);
  border: 1px solid var(--rfb-line); border-radius: var(--rfb-radius-sm); background: var(--rfb-surface-soft); }
.feedback-list { display: grid; gap: var(--space-2, 8px); }
.feedback-item { margin: 0; padding: var(--space-3, 12px); border: 1px solid var(--rfb-line);
  border-radius: var(--rfb-radius-sm); background: var(--rfb-surface-soft); }
.feedback-item p { margin: 0 0 var(--space-2, 8px); color: var(--rfb-ink); font-size: var(--text-sm, 13.5px);
  line-height: 1.52; white-space: pre-line; text-wrap: pretty; }
.feedback-item div { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); color: var(--rfb-muted);
  font-size: var(--text-xs, 12px); }
.feedback-item div span + span::before { content: "·"; margin-right: var(--space-2, 8px);
  color: var(--rfb-line-strong); }