/* ══════════════════════════════════════════════════════════════════════
   VtDiscussionBoard — discussion-board.css  v2
   Componente reutilizable de hilo de discusión para entidades del BFF.
   Namespace: .vt-disc   (no colisiona con Bootstrap ni con od-*)
   Usado en: OC (PurchaseOrders), Reclamaciones (Claims), Recibos de Caja
   ════════════════════════════════════════════════════════════════════ */

/* ── Card wrapper ──────────────────────────────────────────────────── */
.vt-disc__card {
  background: var(--vt-bg-elevated, #fff);
  border: 1px solid var(--vt-border-base, #e5e7eb);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Barra de acento naranja en la parte superior */
  border-top: 3px solid #f8790c;
  box-shadow: 0 2px 16px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
}

/* ── Header ────────────────────────────────────────────────────────── */
.vt-disc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem .75rem;
  border-bottom: 1px solid var(--vt-border-base, #e5e7eb);
  background: linear-gradient(180deg, rgba(248,121,12,.03) 0%, transparent 100%);
}
.vt-disc__title {
  font-size: .875rem;
  font-weight: 700;
  color: var(--vt-text-primary, #111827);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
}
.vt-disc__title-icon {
  color: #f8790c;
  font-size: 1rem;
}
.vt-disc__count-badge {
  font-size: .7rem;
  background: rgba(248,121,12,.12);
  color: #c2550a;
  padding: .15rem .55rem;
  border-radius: 99px;
  font-weight: 800;
  border: 1px solid rgba(248,121,12,.2);
  display: none;
  min-width: 1.5rem;
  text-align: center;
}

/* ── Aviso API pendiente ────────────────────────────────────────────── */
.vt-disc__notice {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background: rgba(248,121,12,.05);
  border: 1.5px dashed rgba(248,121,12,.3);
  border-radius: 10px;
  padding: .875rem 1rem;
  margin: .75rem 1.25rem 0;
  font-size: .8125rem;
  color: var(--vt-text-secondary, #374151);
  animation: vt-disc-fadein .3s ease;
}
.vt-disc__notice[hidden] { display: none !important; }
.vt-disc__notice-icon {
  color: #f8790c;
  font-size: 1rem;
  flex-shrink: 0;
  padding-top: .05rem;
}
.vt-disc__notice-body  { display: flex; flex-direction: column; gap: .25rem; }
.vt-disc__notice-title { font-weight: 700; font-size: .8125rem; color: #c2550a; }
.vt-disc__notice-sub   { font-size: .75rem; color: var(--vt-text-muted, #6b7280); line-height: 1.5; }

@keyframes vt-disc-fadein {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes vt-disc-slidein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Subheader del hilo ─────────────────────────────────────────────── */
.vt-disc__subheader {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.25rem .25rem;
  font-size: .6875rem;
  color: var(--vt-text-muted, #9ca3af);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.vt-disc__subheader[hidden] { display: none !important; }
.vt-disc__subheader-count {
  background: rgba(248,121,12,.1);
  color: #f8790c;
  border-radius: 99px;
  padding: .1rem .45rem;
  font-size: .625rem;
  font-weight: 800;
}
.vt-disc__subheader-hint {
  margin-left: auto;
  font-weight: 400;
  font-size: .625rem;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Área del hilo ──────────────────────────────────────────────────── */
.vt-disc__thread {
  max-height: 460px;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .125rem;  /* reducido — el gap lo da el padding de cada entry */
  scroll-behavior: smooth;
  flex: 1;
}
.vt-disc__thread::-webkit-scrollbar { width: 4px; }
.vt-disc__thread::-webkit-scrollbar-track { background: transparent; }
.vt-disc__thread::-webkit-scrollbar-thumb {
  background: rgba(248,121,12,.22);
  border-radius: 99px;
}

/* ── Separador de fecha ─────────────────────────────────────────────── */
.vt-disc__date-sep {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .75rem 0 .625rem;
  color: var(--vt-text-muted, #9ca3af);
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.vt-disc__date-sep::before,
.vt-disc__date-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--vt-border-base, #e5e7eb);
}
.vt-disc__date-sep span {
  background: var(--vt-bg-elevated, #fff);
  padding: 0 .5rem;
  border: 1px solid var(--vt-border-base, #e5e7eb);
  border-radius: 99px;
  white-space: nowrap;
}

/* ── Estado de carga ────────────────────────────────────────────────── */
.vt-disc__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 2.5rem 1.5rem;
  font-size: .8125rem;
  color: var(--vt-text-muted, #9ca3af);
}

/* ── Estado vacío ───────────────────────────────────────────────────── */
.vt-disc__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
  padding: 2.5rem 1.5rem;
  color: var(--vt-text-muted, #9ca3af);
}
.vt-disc__empty-icon-wrap {
  position: relative;
  width: 56px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .25rem;
}
.vt-disc__empty-icon-wrap .vt-disc__empty-bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(248,121,12,.08);
  border: 1.5px solid rgba(248,121,12,.18);
}
.vt-disc__empty-icon-wrap .vt-disc__empty-bubble:nth-child(1) {
  width: 44px; height: 44px; top: 0; left: 0;
}
.vt-disc__empty-icon-wrap .vt-disc__empty-bubble:nth-child(2) {
  width: 28px; height: 28px; bottom: 0; right: 0;
  background: rgba(99,102,241,.06);
  border-color: rgba(99,102,241,.18);
}
.vt-disc__empty-icon {
  font-size: 1.625rem;
  color: rgba(248,121,12,.35);
  position: relative; z-index: 1;
}
.vt-disc__empty-text {
  font-size: .8125rem;
  text-align: center;
  font-weight: 500;
  color: var(--vt-text-secondary, #6b7280);
}
.vt-disc__empty-hint {
  font-size: .6875rem;
  text-align: center;
  color: var(--vt-text-muted, #9ca3af);
  font-style: italic;
}

/* ── Entrada del hilo (fila) ────────────────────────────────────────── */
.vt-disc__entry {
  display: flex;
  gap: .625rem;
  align-items: flex-end;   /* alinea avatar con la base del bubble */
  padding: .3rem 0;
  animation: vt-disc-slidein .22s ease;
}

/* Mensajes del usuario actual → alineados a la derecha */
.vt-disc__entry--mine {
  flex-direction: row-reverse;
}
.vt-disc__entry--mine .vt-disc__content {
  align-items: flex-end;
}
.vt-disc__entry--mine .vt-disc__meta {
  flex-direction: row-reverse;
}

/* Avatar */
.vt-disc__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(248,121,12,.18), rgba(249,115,22,.10));
  border: 1.5px solid rgba(248,121,12,.22);
  color: #f8790c;
  font-size: .625rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: .02em;
  user-select: none;
  position: relative;
  box-shadow: 0 2px 6px rgba(248,121,12,.15);
  overflow: hidden;
}
.vt-disc__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  position: absolute; top: 0; left: 0;
}
.vt-disc__avatar-initials {
  line-height: 1;
  position: relative; z-index: 1;
}
/* Badge de usuario identificado */
.vt-disc__avatar-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #10B981;
  border: 2px solid var(--vt-bg-elevated, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 5px;
  line-height: 1;
  z-index: 2;
}
.vt-disc__entry--mine .vt-disc__avatar {
  background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(79,70,229,.1));
  border-color: rgba(99,102,241,.28);
  color: #4f46e5;
  box-shadow: 0 2px 6px rgba(99,102,241,.18);
}
.vt-disc__entry--mine .vt-disc__avatar-badge {
  background: #4f46e5;
}

/* Contenido */
.vt-disc__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
  max-width: 82%;   /* limitar ancho del bubble */
}

/* Meta (nombre + timestamp) */
.vt-disc__meta {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  flex-wrap: wrap;
  padding: 0 .25rem;
}
.vt-disc__meta-name {
  font-size: .7rem;
  font-weight: 700;
  color: var(--vt-text-secondary, #374151);
}
.vt-disc__entry--mine .vt-disc__meta-name { color: #4f46e5; }
.vt-disc__meta-time {
  font-size: .6rem;
  color: var(--vt-text-muted, #9ca3af);
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}
.vt-disc__meta-clock {
  font-size: .5rem;
  opacity: .7;
}
.vt-disc__mine-badge {
  font-size: .5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(99,102,241,.1);
  color: #4f46e5;
  border-radius: 99px;
  padding: .1rem .4rem;
  border: 1px solid rgba(99,102,241,.18);
}

/* Texto del aporte — bubble */
.vt-disc__text {
  background: var(--vt-bg-surface, #f3f4f6);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 4px 14px 14px 14px;  /* esquina cortada arriba-izq para "other" */
  padding: .625rem .9rem;
  font-size: .8125rem;
  color: var(--vt-text-primary, #111827);
  line-height: 1.65;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: box-shadow 140ms;
}
.vt-disc__text:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.09);
}
.vt-disc__entry--mine .vt-disc__text {
  background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(79,70,229,.06));
  border-color: rgba(99,102,241,.16);
  border-radius: 14px 4px 14px 14px;  /* esquina cortada arriba-der para "mine" */
  box-shadow: 0 1px 3px rgba(99,102,241,.1);
}
.vt-disc__entry--mine .vt-disc__text:hover {
  box-shadow: 0 2px 8px rgba(99,102,241,.16);
}

/* Menciones @Usuario resaltadas dentro del texto */
.vt-disc__mention-tag {
  color: #4f46e5;
  font-weight: 600;
  background: rgba(99,102,241,.1);
  border-radius: 4px;
  padding: .05rem .28rem;
  font-size: .8em;
}

/* ── Formulario de composición ──────────────────────────────────────── */
.vt-disc__compose {
  border-top: 1px solid var(--vt-border-base, #e5e7eb);
  padding: .875rem 1.25rem 1.125rem;
  background: linear-gradient(180deg, var(--vt-bg-surface, #f9fafb) 0%, var(--vt-bg-elevated, #fff) 100%);
  border-radius: 0 0 13px 13px;
}
.vt-disc__compose--disabled {
  opacity: .5;
  pointer-events: none;
}
.vt-disc__compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .35rem;
}
.vt-disc__compose-label {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--vt-text-muted, #9ca3af);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.vt-disc__compose-label i { font-size: .5625rem; }

/* ── Quick Chips ────────────────────────────────────────────────────── */
.vt-disc__chips {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: .2rem 0 .55rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.vt-disc__chips::-webkit-scrollbar { display: none; }

.vt-disc__chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .6rem;
  border-radius: 99px;
  border: 1px solid rgba(248,121,12,.22);
  background: rgba(248,121,12,.05);
  color: #c2550a;
  font-size: .6563rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms, transform 120ms, border-color 120ms, box-shadow 120ms;
  line-height: 1;
  font-family: inherit;
  flex-shrink: 0;
}
.vt-disc__chip:hover {
  background: rgba(248,121,12,.13);
  border-color: rgba(248,121,12,.4);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(248,121,12,.18);
  color: #9a3412;
}
.vt-disc__chip:active { transform: translateY(0); }
.vt-disc__chip i { font-size: .5rem; }

.vt-disc__chips-hint {
  margin-left: auto;
  font-size: .5625rem;
  color: var(--vt-text-muted, #9ca3af);
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .2rem;
}
.vt-disc__chips-hint kbd {
  font-size: .5rem;
  background: var(--vt-bg-elevated, #fff);
  border: 1px solid var(--vt-border-base, #d1d5db);
  border-radius: 3px;
  padding: .05rem .3rem;
  font-family: inherit;
  color: var(--vt-text-secondary, #374151);
  box-shadow: 0 1px 0 rgba(0,0,0,.1);
}

/* ── Snippet Dropdown ───────────────────────────────────────────────── */
.vt-disc__snippet-drop {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--vt-bg-elevated, #fff);
  border: 1.5px solid rgba(248,121,12,.3);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.13), 0 3px 10px rgba(0,0,0,.07);
  z-index: 1051;
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
  animation: vt-disc-fadein .15s ease;
}
.vt-disc__snippet-drop[hidden] { display: none !important; }
.vt-disc__snippet-drop::-webkit-scrollbar { width: 4px; }
.vt-disc__snippet-drop::-webkit-scrollbar-thumb {
  background: rgba(248,121,12,.22); border-radius: 99px;
}

.vt-disc__snippet-header {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .4rem .75rem;
  font-size: .625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #f8790c;
  border-bottom: 1px solid rgba(248,121,12,.12);
  background: rgba(248,121,12,.04);
  position: sticky;
  top: 0;
  z-index: 1;
}
.vt-disc__snippet-keys {
  margin-left: auto;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: .5625rem;
  color: var(--vt-text-muted, #9ca3af);
}

.vt-disc__snippet-cat {
  padding: .3rem .75rem .2rem;
  font-size: .5625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--vt-text-muted, #9ca3af);
  background: rgba(0,0,0,.015);
  border-top: 1px solid var(--vt-border-base, #e5e7eb);
}
.vt-disc__snippet-cat:first-child { border-top: none; }

.vt-disc__snippet-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .75rem;
  cursor: pointer;
  transition: background 80ms;
}
.vt-disc__snippet-item:hover,
.vt-disc__snippet-item--active { background: rgba(248,121,12,.07); }
.vt-disc__snippet-item--active .vt-disc__snippet-icon {
  background: rgba(248,121,12,.18);
  border-color: rgba(248,121,12,.35);
}

.vt-disc__snippet-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(248,121,12,.07);
  border: 1px solid rgba(248,121,12,.16);
  color: #f8790c;
  font-size: .6875rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 80ms, border-color 80ms;
}
.vt-disc__snippet-info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.vt-disc__snippet-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--vt-text-primary, #111827);
}
.vt-disc__snippet-label mark {
  background: rgba(248,121,12,.2);
  color: #c2550a;
  border-radius: 2px;
  padding: 0 .1rem;
}
.vt-disc__snippet-preview {
  font-size: .625rem;
  color: var(--vt-text-muted, #9ca3af);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vt-disc__snippet-empty {
  padding: .875rem 1rem;
  font-size: .8125rem;
  color: var(--vt-text-muted, #9ca3af);
  text-align: center;
  font-style: italic;
}

/* Anchor para el dropdown de menciones */
.vt-disc__mention-anchor {
  position: relative;
}

/* Textarea */
.vt-disc__textarea {
  width: 100%;
  border: 1.5px solid var(--vt-border-base, #e2e8f0);
  border-radius: 12px;
  padding: .7rem 1rem;
  font-size: .875rem;
  color: var(--vt-text-primary, #111827);
  background: var(--vt-bg-elevated, #fff);
  resize: none;
  font-family: inherit;
  line-height: 1.6;
  transition: border-color 150ms, box-shadow 150ms;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0,0,0,.05) inset;
}
.vt-disc__textarea:focus {
  outline: none;
  border-color: #f8790c;
  box-shadow: 0 0 0 3px rgba(248,121,12,.11), 0 1px 3px rgba(0,0,0,.05) inset;
}
.vt-disc__textarea::placeholder {
  color: var(--vt-text-muted, #9ca3af);
  font-style: italic;
  font-size: .8125rem;
}

/* Pie del formulario */
.vt-disc__compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .625rem;
  gap: .5rem;
  flex-wrap: wrap;
}
.vt-disc__hint {
  font-size: .6563rem;
  color: var(--vt-text-muted, #9ca3af);
}
.vt-disc__hint kbd {
  font-size: .5625rem;
  background: var(--vt-bg-surface, #f3f4f6);
  border: 1px solid var(--vt-border-base, #d1d5db);
  border-radius: 4px;
  padding: .05rem .3rem;
  font-family: inherit;
  color: var(--vt-text-secondary, #374151);
  box-shadow: 0 1px 0 rgba(0,0,0,.1);
}
.vt-disc__compose-actions {
  display: flex;
  align-items: center;
  gap: .625rem;
}
.vt-disc__char-count {
  font-size: .6563rem;
  color: var(--vt-text-muted, #9ca3af);
  font-variant-numeric: tabular-nums;
}
.vt-disc__char-count--warn { color: #d97706; }
.vt-disc__char-count--over { color: #dc2626; font-weight: 700; }

/* Botón publicar */
.vt-disc__submit {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  border-radius: 9px;
  border: none;
  background: linear-gradient(135deg, #f8790c 0%, #ea580c 100%);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 150ms;
  box-shadow: 0 3px 10px rgba(248,121,12,.32), 0 1px 3px rgba(248,121,12,.2);
  white-space: nowrap;
  letter-spacing: .01em;
}
.vt-disc__submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(248,121,12,.4), 0 2px 6px rgba(248,121,12,.25);
}
.vt-disc__submit:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(248,121,12,.25);
}
.vt-disc__submit:disabled {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ── Dropdown de menciones @ ────────────────────────────────────────── */
.vt-disc__mention-drop {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--vt-bg-elevated, #fff);
  border: 1.5px solid rgba(99,102,241,.25);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.06);
  z-index: 1050;
  overflow: hidden;
  max-height: 240px;
  overflow-y: auto;
  animation: vt-disc-fadein .15s ease;
}
.vt-disc__mention-drop[hidden] { display: none !important; }
.vt-disc__mention-header {
  padding: .375rem .75rem;
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--vt-text-muted, #9ca3af);
  border-bottom: 1px solid var(--vt-border-base, #e5e7eb);
  display: flex;
  align-items: center;
  gap: .375rem;
}
.vt-disc__mention-searching {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .75rem;
  font-size: .75rem;
  color: var(--vt-text-muted, #9ca3af);
}
.vt-disc__mention-empty {
  padding: .75rem;
  font-size: .75rem;
  color: var(--vt-text-muted, #9ca3af);
  text-align: center;
  font-style: italic;
}
.vt-disc__mention-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .75rem;
  cursor: pointer;
  transition: background 80ms;
}
.vt-disc__mention-item:hover,
.vt-disc__mention-item--active {
  background: rgba(99,102,241,.07);
}
.vt-disc__mention-av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(79,70,229,.1));
  border: 1px solid rgba(99,102,241,.22);
  color: #4f46e5;
  font-size: .5625rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vt-disc__mention-info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.vt-disc__mention-name {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--vt-text-primary, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vt-disc__mention-name mark {
  background: rgba(99,102,241,.2);
  color: #4f46e5;
  border-radius: 2px;
  padding: 0 .1rem;
}
.vt-disc__mention-email {
  font-size: .625rem;
  color: var(--vt-text-muted, #9ca3af);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vt-disc__mention-job {
  font-size: .625rem;
  color: var(--vt-text-muted, #9ca3af);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Spinner ────────────────────────────────────────────────────────── */
.vt-disc__spin {
  display: inline-block;
  animation: vt-disc-spin .65s linear infinite;
}
@keyframes vt-disc-spin { to { transform: rotate(360deg); } }

/* ── Dark mode ──────────────────────────────────────────────────────── */
[data-vehitotal-theme="dark"] .vt-disc__card {
  background: var(--vt-bg-elevated, #1f2937);
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 2px 16px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.2);
}
[data-vehitotal-theme="dark"] .vt-disc__header {
  border-color: rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(248,121,12,.05) 0%, transparent 100%);
}
[data-vehitotal-theme="dark"] .vt-disc__subheader {
  border-color: rgba(255,255,255,.08);
}
[data-vehitotal-theme="dark"] .vt-disc__notice {
  background: rgba(248,121,12,.08);
  border-color: rgba(248,121,12,.3);
}
[data-vehitotal-theme="dark"] .vt-disc__entry {
  border-color: rgba(255,255,255,.06);
}
[data-vehitotal-theme="dark"] .vt-disc__text {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: #f3f4f6;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
[data-vehitotal-theme="dark"] .vt-disc__entry--mine .vt-disc__text {
  background: rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.25);
}
[data-vehitotal-theme="dark"] .vt-disc__compose {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.01) 100%);
  border-color: rgba(255,255,255,.08);
}
[data-vehitotal-theme="dark"] .vt-disc__textarea {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  color: #f3f4f6;
  box-shadow: none;
}
[data-vehitotal-theme="dark"] .vt-disc__textarea:focus {
  border-color: #f8790c;
  box-shadow: 0 0 0 3px rgba(248,121,12,.15);
}
[data-vehitotal-theme="dark"] .vt-disc__meta-name { color: #d1d5db; }
[data-vehitotal-theme="dark"] .vt-disc__date-sep::before,
[data-vehitotal-theme="dark"] .vt-disc__date-sep::after { background: rgba(255,255,255,.08); }
[data-vehitotal-theme="dark"] .vt-disc__date-sep span {
  background: var(--vt-bg-elevated, #1f2937);
  border-color: rgba(255,255,255,.1);
}
[data-vehitotal-theme="dark"] .vt-disc__mention-drop {
  background: #1f2937;
  border-color: rgba(99,102,241,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
[data-vehitotal-theme="dark"] .vt-disc__mention-header { border-color: rgba(255,255,255,.08); }
[data-vehitotal-theme="dark"] .vt-disc__mention-item:hover,
[data-vehitotal-theme="dark"] .vt-disc__mention-item--active {
  background: rgba(99,102,241,.15);
}
[data-vehitotal-theme="dark"] .vt-disc__mention-name { color: #f3f4f6; }
[data-vehitotal-theme="dark"] .vt-disc__hint kbd,
[data-vehitotal-theme="dark"] .vt-disc__chips-hint kbd {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  color: #d1d5db;
  box-shadow: none;
}
[data-vehitotal-theme="dark"] .vt-disc__chip {
  background: rgba(248,121,12,.08);
  border-color: rgba(248,121,12,.2);
  color: #fb923c;
}
[data-vehitotal-theme="dark"] .vt-disc__chip:hover {
  background: rgba(248,121,12,.16);
  box-shadow: 0 2px 6px rgba(248,121,12,.2);
}
[data-vehitotal-theme="dark"] .vt-disc__snippet-drop {
  background: #1f2937;
  border-color: rgba(248,121,12,.28);
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
}
[data-vehitotal-theme="dark"] .vt-disc__snippet-header {
  background: rgba(248,121,12,.06);
  border-color: rgba(248,121,12,.12);
}
[data-vehitotal-theme="dark"] .vt-disc__snippet-cat {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
}
[data-vehitotal-theme="dark"] .vt-disc__snippet-item:hover,
[data-vehitotal-theme="dark"] .vt-disc__snippet-item--active {
  background: rgba(248,121,12,.1);
}
[data-vehitotal-theme="dark"] .vt-disc__snippet-label { color: #f3f4f6; }