/* app/css/feedback.css
   O botão de feedback e o modo de apontar, copiados do Laudo App
   (FeedbackFab.tsx e ElementPicker.tsx): cada medida do Tailwind de lá virou
   o token de mesmo valor daqui, e a cor da marca de lá virou --dm-primary. */

/* ── O botão: canto de baixo à esquerda, acima da barra do telefone ────── */
.dm-feedback {
  position: fixed; left: var(--dm-sp-6); bottom: var(--dm-sp-6); z-index: 30;
  display: inline-flex; align-items: center; gap: var(--dm-sp-2);
  padding: var(--dm-sp-2) var(--dm-sp-4); border-radius: 999px; border: 0;
  background: var(--dm-primary); color: var(--dm-on-primary); box-shadow: var(--dm-shadow);
  font-size: var(--dm-fs-sm); font-weight: var(--dm-fw-medio); cursor: pointer;
}
.dm-feedback:hover { background: var(--dm-primary-hover); }
.dm-feedback[hidden] { display: none; }
.dm-apontar-icone { display: inline-flex; flex-shrink: 0; }
.dm-apontar-icone svg { width: 1rem; height: 1rem; }

/* ── O modo de apontar ─────────────────────────────────────────────────── */
.dm-apontar-contorno {
  position: fixed; z-index: 60; pointer-events: none; border-radius: var(--dm-sp-1);
  box-shadow: 0 0 0 1px var(--dm-surface), 0 0 0 3px var(--dm-primary);
  background: color-mix(in srgb, var(--dm-primary) 8%, transparent);
  transition: top 75ms, left 75ms, width 75ms, height 75ms;
}
.dm-apontar-dica {
  position: fixed; z-index: 70; pointer-events: none; max-width: min(20rem, 80vw);
  border-radius: var(--dm-sp-2); background: var(--dm-primary); color: var(--dm-on-primary);
  padding: var(--dm-sp-2) var(--dm-sp-3); box-shadow: var(--dm-shadow);
  font-size: var(--dm-fs-sm); font-weight: var(--dm-fw-medio);
}
.dm-apontar-contorno[hidden], .dm-apontar-dica[hidden] { display: none; }
.dm-apontar-dica-linha { display: flex; align-items: center; gap: var(--dm-sp-2); }
.dm-apontar-nome {
  display: block; margin-top: calc(var(--dm-sp-1) / 2); opacity: 0.9;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-apontar-nome:empty { display: none; }
.dm-apontar-controles {
  position: fixed; right: var(--dm-sp-6); bottom: var(--dm-sp-6); z-index: 70;
  display: flex; align-items: center; gap: var(--dm-sp-2);
}
.dm-apontar-btn { border-radius: 999px; box-shadow: var(--dm-shadow); }

/* ── O formulário ──────────────────────────────────────────────────────── */
.dm-feedback-titulo { display: flex; align-items: center; gap: var(--dm-sp-2); }
.dm-feedback-titulo .dm-apontar-icone { color: var(--dm-primary); }
.dm-feedback-apontado {
  margin: 0; padding: var(--dm-sp-2) var(--dm-sp-3); border-radius: var(--dm-radius-sm);
  border: 1px solid color-mix(in srgb, var(--dm-primary) 40%, transparent);
  background: color-mix(in srgb, var(--dm-primary) 5%, transparent);
  font-size: var(--dm-fs-sm); font-weight: var(--dm-fw-medio);
}
.dm-feedback-contexto {
  margin-bottom: var(--dm-sp-4); padding: var(--dm-sp-2) var(--dm-sp-3);
  border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm);
}
.dm-feedback-contexto summary { cursor: pointer; font-size: var(--dm-fs-xs); font-weight: var(--dm-fw-medio); color: var(--dm-text-3); }
.dm-feedback-contexto pre {
  margin: var(--dm-sp-2) 0 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: var(--dm-fs-xs); line-height: 1.6; color: var(--dm-text-3);
}
.dm-feedback-erro { margin: 0 0 var(--dm-sp-3); font-size: var(--dm-fs-xs); color: var(--dm-danger); }
.dm-feedback-erro[hidden] { display: none; }
.dm-feedback-obrigado {
  display: flex; flex-direction: column; align-items: center; gap: var(--dm-sp-2);
  padding: var(--dm-sp-8) 0; text-align: center; font-size: var(--dm-fs-sm); font-weight: var(--dm-fw-medio);
}
.dm-feedback-obrigado p { margin: 0; }
.dm-feedback-certo {
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: 999px; color: var(--dm-primary); background: color-mix(in srgb, var(--dm-primary) 10%, transparent);
}

/* No telefone o botão fica só com o ícone e sobe acima da barra de baixo,
   como no Laudo App; os controles do apontar sobem junto. */
@media (max-width: 760px) {
  .dm-feedback { left: var(--dm-sp-4); bottom: calc(var(--dm-sp-12) + var(--dm-sp-8)); padding: var(--dm-sp-3); }
  .dm-feedback-texto { display: none; }
  .dm-apontar-controles { right: var(--dm-sp-4); bottom: calc(var(--dm-sp-12) + var(--dm-sp-8)); }
}