/* My drafts (card grid + status overlays) */


/* ---------- MY DRAFTS (card grid + status overlays) ---------- */
.drafts-filter-bar{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
}
.df-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;
  cursor:pointer;transition:all .12s;
}
.df-chip:hover{border-color:var(--line-strong);color:var(--ink)}
.df-chip.on{background:var(--accent);color:#0b0b0a;border-color:var(--accent);font-weight:700}
.df-chip .c{
  display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 6px;
  border-radius:999px;background:rgba(0,0,0,.15);font-size:10px;font-weight:700;
}
.df-chip.on .c{background:rgba(0,0,0,.25)}
.df-chip:not(.on) .c{background:var(--bg-2);color:var(--ink-dim)}

/* Draft card — uses .card foundation with overlays & action row */
.draft-card .thumb{position:relative}
.draft-status-badge{
  position:absolute;top:10px;left:10px;z-index:5;
  padding:5px 10px;border-radius:6px;
  font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.draft-status-draft{background:rgba(165,148,247,.95);color:#0b0b0a}
.draft-status-pending{background:rgba(255,190,85,.95);color:#0b0b0a}
.draft-status-rejected{background:rgba(255,60,60,.95);color:#fff}

/* Reject reason banner inside card */
.draft-reject-reason{
  display:flex;gap:8px;align-items:flex-start;
  padding:8px 10px;margin:4px 0;border-radius:6px;
  background:rgba(255,60,60,.08);border:1px solid rgba(255,60,60,.25);
  color:#ff8888;font-size:11px;line-height:1.45;
}
.draft-reject-reason svg{flex-shrink:0;width:14px;height:14px;margin-top:1px}

/* Action row at the bottom of card */
.draft-card .draft-actions{
  display:flex;gap:6px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);
}
.draft-card .draft-actions .btn{padding:6px 10px;font-size:11.5px;flex:1;justify-content:center}
.draft-card .draft-actions .btn.primary{flex:2}
.draft-card .draft-actions .btn.draft-del{
  flex:0 0 auto;padding:6px 9px;color:var(--ink-dim);
}
.draft-card .draft-actions .btn.draft-del:hover{color:#ff6666;border-color:#ff6666;background:rgba(255,60,60,.06)}

/* Tint the card border by status */
.draft-card.status-pending{border-color:rgba(255,190,85,.25)}
.draft-card.status-rejected{border-color:rgba(255,60,60,.25)}

/* Drafts grid: hide title-view-specific fields */
#draftsGrid .card .meta{display:none}
#draftsGrid .card{position:relative}

/* ---------- End drafts ---------- */