/* Hábeis — protocolo / assunto (estilo Bitrix) v4 */

.hc-proto-subject {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: 0 12px 8px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--hc-proto-line, #26262a);
  background: var(--hc-proto-bg, rgba(39, 129, 246, 0.08));
  font-family: inherit;
}

body:not(.dark) .hc-proto-subject {
  --hc-proto-bg: #eef4ff;
  --hc-proto-line: #d7e0ef;
  --hc-proto-title: #0f1b33;
  --hc-proto-muted: #5b6b86;
  --hc-proto-chip: #1f4fd6;
}

body.dark .hc-proto-subject,
.hc-proto-subject {
  --hc-proto-bg: rgba(39, 129, 246, 0.1);
  --hc-proto-line: #26262a;
  --hc-proto-title: #edf0f0;
  --hc-proto-muted: #b0b4ba;
  --hc-proto-chip: #2781f6;
}

.hc-proto-subject__id {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--hc-proto-title);
  letter-spacing: 0.01em;
}

.hc-proto-subject__meta {
  margin: 0;
  font-size: 12px;
  color: var(--hc-proto-muted);
  line-height: 1.35;
}

.hc-proto-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
  color: #fff;
  background: var(--hc-proto-chip);
}

.hc-proto-chip--resolved {
  background: #6b7280;
}

.hc-proto-chip--open {
  background: #2781f6;
}

.hc-proto-chip--pending {
  background: #d97706;
}

/* --- Conversas anteriores --- */
.contact-conversation--list .conversation,
.conversation:has(.hc-proto-title) {
  position: relative;
}

/* Evita flash do nome do contato antes do Protocolo #N */
.contact-conversation--list .conversation--user:not(.hc-proto-title) {
  color: transparent !important;
}

.conversation--user.hc-proto-title {
  text-transform: none !important;
  font-variant-numeric: tabular-nums;
  max-width: calc(100% - 4.5rem) !important;
  width: auto !important;
  box-sizing: border-box;
}

.hc-proto-card-meta {
  display: block;
  margin: 0 8px 2px;
  padding-right: 4.5rem;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 11px;
  line-height: 1.3;
  color: var(--hc-proto-muted, #b0b4ba);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-conversation--list .conversation .conversation--message,
.conversation:has(.hc-proto-title) .conversation--message {
  max-width: calc(100% - 4.5rem) !important;
  width: auto !important;
  box-sizing: border-box;
}

/* TimeAgo nativo no canto — não deixa invadir o texto */
.contact-conversation--list .conversation > div > .absolute {
  z-index: 2;
  pointer-events: none;
  max-width: 4.25rem;
  text-align: right;
  overflow: hidden;
}