/* badges.css — Tone badges (gradient), Tone chips (outlined), Status dots */

/* ═══════════════════════════════════════════════════════════
   TONE BADGE (gradient pill)
═══════════════════════════════════════════════════════════ */

.tone-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  user-select: none;
}

.tone-badge .emoji { font-size: 11px; }

.tb-curiosity { background: var(--grad-curiosity); }
.tb-drama     { background: var(--grad-drama); }
.tb-authority { background: var(--grad-authority); }
.tb-casual    { background: var(--grad-casual); }
.tb-story     { background: var(--grad-story); }
.tb-viral     { background: var(--grad-viral); }

/* ═══════════════════════════════════════════════════════════
   TONE CHIP (outlined, clickable toggle)
═══════════════════════════════════════════════════════════ */

.tone-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1.5px solid;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--transition-hover),
    opacity var(--transition-hover),
    transform var(--transition-hover);
  user-select: none;
  white-space: nowrap;
}

.tone-chip:hover { transform: translateY(-1px); }
.tone-chip:not(.chip-active) { opacity: 0.55; }
.tone-chip.chip-active       { opacity: 1; }

.tc-curiosity { color: #d97706; border-color: #fcd34d; background: #fffbeb; }
.tc-drama     { color: #dc2626; border-color: #fca5a5; background: #fff5f5; }
.tc-authority { color: #6d28d9; border-color: #c4b5fd; background: #f5f3ff; }
.tc-casual    { color: #059669; border-color: #6ee7b7; background: #f0fdf4; }
.tc-story     { color: #b45309; border-color: #fde68a; background: #fffbeb; }
.tc-viral     { color: #0284c7; border-color: #7dd3fc; background: #f0f9ff; }

/* Chip group */
.tone-chips-group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* ═══════════════════════════════════════════════════════════
   STATUS DOT + LABEL
═══════════════════════════════════════════════════════════ */

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.s-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}

.s-posted    .s-dot { background: var(--status-posted); }
.s-scheduled .s-dot { background: var(--status-scheduled); }
.s-draft     .s-dot { background: var(--status-draft); }
.s-seeding   .s-dot { background: var(--status-live); animation: pulse 1.5s infinite; }
.s-approved  .s-dot { background: var(--status-approved); }
.s-reviewing .s-dot { background: var(--status-reviewing); }

/* ═══════════════════════════════════════════════════════════
   STATUS BADGE (pill for table)
═══════════════════════════════════════════════════════════ */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.status-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

.sb-draft       { background: rgba(148,163,184,0.12); color: var(--status-draft); }
.sb-draft::before { background: var(--status-draft); }

.sb-ai          { background: rgba(109,40,217,0.08); color: #6d28d9; }
.sb-ai::before  { background: #6d28d9; }

.sb-reviewed    { background: rgba(217,119,6,0.08); color: #d97706; }
.sb-reviewed::before { background: #d97706; }

.sb-approved    { background: rgba(5,150,105,0.08); color: var(--status-approved); }
.sb-approved::before { background: var(--status-approved); }

.sb-exported    { background: rgba(37,99,235,0.08); color: #2563eb; }
.sb-exported::before { background: #2563eb; }

.sb-published   { background: rgba(22,163,74,0.08); color: var(--status-posted); }
.sb-published::before { background: var(--status-posted); }

/* Campaign status */
.sb-active    { background: rgba(5,150,105,0.08); color: var(--status-approved); }
.sb-active::before { background: var(--status-approved); }

.sb-completed { background: rgba(37,99,235,0.08); color: #2563eb; }
.sb-completed::before { background: #2563eb; }

.sb-campaign-draft { background: rgba(148,163,184,0.12); color: var(--status-draft); }
.sb-campaign-draft::before { background: var(--status-draft); }