/* =============================================================
   Weloop — design-system chat cards, ported to plain CSS.

   Source: the Weloop AI design system project, files
   _ds_css/duplicate-ticket-card.css, form-review-card.css and
   done-resolution-card.css. The design canvas renders these as
   React components from _ds_bundle.js (1.6 MB); on the marketing
   site we reproduce the same markup in static HTML so the page
   ships no framework. Class names and values are kept identical
   so the two stay comparable.

   Tokens (--primary, --border, …) come from styles.css.
   ============================================================= */

/* ---------- DuplicateTicketCard ---------- */
.dt-group { display: flex; flex-direction: column; gap: 8px; }
.dt-card {
  background: #fff;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
  color: hsl(var(--foreground));
}
.dt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dt-card-id { font-family: var(--font-mono); font-size: 11px; color: hsl(var(--muted-foreground)); letter-spacing: .01em; }
.dt-card-title { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: hsl(var(--foreground)); }
.dt-card-foot { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.dt-status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.dt-status .dt-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.dt-status.is-closed { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.dt-resolution { font-size: 12px; color: hsl(var(--primary)); display: inline-flex; align-items: center; gap: 6px; padding-left: 2px; font-weight: 600; }

/* ---------- FormReviewCard ---------- */
.fr-group { display: flex; flex-direction: column; gap: 8px; }
.fr-card {
  background: #fff;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-sm, 0 1px 2px hsl(260 100% 69% / .06));
  font-family: var(--font-sans);
  color: hsl(var(--foreground));
}
.fr-head { display: flex; align-items: center; gap: 10px; }
.fr-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: hsl(var(--primary) / .10); color: hsl(var(--primary));
}
.fr-head-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.fr-title { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: hsl(var(--foreground)); }
.fr-meta { font-size: 11.5px; color: hsl(var(--muted-foreground)); line-height: 1.4; }
.fr-type-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; flex-shrink: 0; }
.fr-type-pill .fr-type-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.fr-type-pill.is-bug { background: hsl(340 100% 73% / .14); color: hsl(340 70% 45%); }
.fr-fields { display: flex; flex-direction: column; gap: 10px; }
.fr-field { display: flex; flex-direction: column; gap: 5px; }
.fr-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--muted-foreground)); display: inline-flex; align-items: center; gap: 6px; }
/* Static value rendering: the canvas uses <input>/<textarea>; the marketing
   page shows the collected values as read-only text in the same shell. */
.fr-value {
  font-family: var(--font-sans); font-size: 13px; line-height: 1.5;
  color: hsl(var(--foreground)); background: hsl(244 50% 96%);
  border: 1px solid transparent; border-radius: 8px; padding: 9px 10px;
}
.fr-resolution { font-size: 12px; font-weight: 600; color: hsl(var(--primary)); display: inline-flex; align-items: center; gap: 6px; padding-left: 2px; }

/* ---------- DoneResolutionCard (bug variant) ---------- */
.dr-card {
  --tint-h: 160; --tint-s: 70%; --tint-l: 40%;
  position: relative; background: #fff;
  border: 1px solid hsl(var(--border));
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px hsl(var(--tint-h) var(--tint-s) var(--tint-l) / .10);
  font-family: var(--font-sans); color: hsl(var(--foreground));
}
.dr-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, hsl(160 70% 46% / .12), hsl(160 70% 46% / .04));
  border-bottom: 1px solid hsl(160 70% 46% / .18);
}
.dr-strip-left { display: flex; align-items: center; gap: 8px; }
.dr-strip-check {
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  background: hsl(160 70% 46%); color: #fff;
  display: flex; align-items: center; justify-content: center;
  animation: dr-check-glow 2.4s ease-out infinite;
}
@keyframes dr-check-glow {
  0% { box-shadow: 0 0 0 0 hsl(160 70% 46% / .45); }
  70% { box-shadow: 0 0 0 10px hsl(160 70% 46% / 0); }
  100% { box-shadow: 0 0 0 0 hsl(160 70% 46% / 0); }
}
.dr-strip-label { font-size: 13px; font-weight: 700; color: hsl(160 60% 28%); }
.dr-strip-meta { font-size: 11px; color: hsl(160 40% 38%); font-family: var(--font-mono); }
.dr-stage-wrap { padding: 22px 18px 6px; display: flex; align-items: center; justify-content: center; }
.dr-stage { position: relative; width: 150px; height: 96px; display: flex; align-items: center; justify-content: center; }
.dr-text { padding: 0 18px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dr-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.dr-sub { font-size: 12.5px; color: hsl(var(--muted-foreground)); line-height: 1.5; max-width: 300px; }
.dr-foot { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.dr-foot .dr-foot-id { font-family: var(--font-mono); font-weight: 700; color: hsl(var(--foreground)); }

/* bug variant — deploy pipeline */
.dr-bug-pipe { position: relative; width: 150px; height: 60px; display: flex; align-items: center; justify-content: center; }
.dr-bug-track {
  position: absolute; top: 50%; left: 18px; right: 18px; height: 3px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, hsl(14 60% 80%) 0 6px, transparent 6px 12px);
  border-radius: 999px;
}
.dr-bug-track-fill {
  position: absolute; top: 50%; left: 18px; height: 3px; transform: translateY(-50%);
  width: calc(100% - 36px); background: hsl(160 70% 46%); border-radius: 999px;
}
.dr-bug-node {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 3px 8px rgba(15,15,40,.12); z-index: 2;
}
.dr-bug-node.start { left: 0; background: hsl(14 80% 55% / .12); color: hsl(14 80% 45%); }
.dr-bug-node.end { right: 0; background: hsl(160 70% 46%); color: #fff; }
.dr-bug-packet {
  position: absolute; top: 50%; left: 18px;
  width: 12px; height: 12px; margin-top: -6px; border-radius: 3px;
  background: hsl(160 70% 46%); box-shadow: 0 0 8px hsl(160 70% 46% / .6);
  opacity: 0; animation: dr-bug-deploy 2.6s ease-in-out infinite;
}
@keyframes dr-bug-deploy {
  0% { left: 40px; opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  90% { left: calc(100% - 46px); opacity: 1; }
  100% { left: calc(100% - 46px); opacity: 0; }
}
.dr-bug-label {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  color: hsl(160 60% 32%); letter-spacing: .04em;
}

@media (prefers-reduced-motion: reduce) {
  .dr-strip-check, .dr-bug-packet { animation: none !important; }
  .dr-bug-packet { opacity: 1; left: calc(100% - 46px); }
}