/* GENERATED for the Customers UX-port pilot — do not edit by hand.
   Source: design-system/feedback-layout.css, every rule scoped under .ds-view via
   native CSS nesting; @keyframes hoisted to top level. See scripts/scope_kit.py */

.ds-view {
/* Feedback queue (Settings → Feedback) page-layout classes.
   Composition only — every pill, button, and control is a kit component.
   Canonical source; regenerate feedback-layout.scoped.css with scope_kit.py. */

.ds-feedback-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  /* No overflow:hidden here — it used to clip the vote tooltip (which must
     escape the list to be readable, see .ds-feedback-list .tooltip below).
     Round the first/last child instead so the list still reads as one panel. */
}
.ds-feedback-list > :first-child {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}
.ds-feedback-list > :last-child {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* The kit's .tooltip is nowrap by default, which is right for a short label but
   wraps a long comma-joined voter list into one unreadable line. Scoped to the
   feedback list so tooltips elsewhere in the app keep the nowrap default. */
.ds-feedback-list .tooltip {
  white-space: normal;
  max-width: 220px;
  text-align: left;
}

.ds-feedback-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
}
.ds-feedback-row:last-child { border-bottom: none; }
.ds-feedback-row:hover { background: var(--bg-hover); }

.ds-feedback-row__main { flex: 1; min-width: 0; }

.ds-feedback-row__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--fs-3);
  font-weight: var(--fw-medium);
  color: var(--text-1);
}

.ds-feedback-meta {
  margin-top: var(--space-2);
  font-size: var(--fs-2);
  color: var(--text-3);
}

.ds-feedback-detail {
  /* The 40px is not arbitrary: it lines the body up under the row's vote
     button, which is `min-width: 40px` on `.vote` in components.css. If that
     min-width ever changes, update this to match or the detail panel will
     visibly drift out from under the vote column. */
  padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) * 2 + 40px);
  border-bottom: 1px solid var(--border-2);
  background: var(--bg-hover);
}
.ds-feedback-detail__body {
  font-size: var(--fs-2);
  color: var(--text-2);
  white-space: pre-wrap;
}
.ds-feedback-detail__shots {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.ds-feedback-detail__shots img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-2);
  cursor: pointer;
}
.ds-feedback-voters {
  margin-top: var(--space-3);
  font-size: var(--fs-2);
  color: var(--text-3);
}
.ds-feedback-admin {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-2);
}

.ds-feedback-filters {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.fb-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--status-inproc-tint);
  color: var(--text-2);
  font-size: var(--fs-2);
}
.fb-types { display: flex; gap: var(--space-2); }
.fb-type.is-on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-muted);
}
.fb-modal-host .dropzone__hint { text-align: center; }
}