/* timeline_extras.css — estilos del port del hermano (timeline_extras.js).
 * Compartido por escritorio y móvil (clases prefijadas, sin colisiones). */

/* ── reloj de tiempo transcurrido ─────────────────────────────── */
.thread-card-elapsed,
.bubble-live-clock,
.bubble-working-clock,
.m-card-elapsed {
  font-variant-numeric: tabular-nums;
  color: #7fe3f0;
  font-size: 0.72rem;
  margin-left: 6px;
  white-space: nowrap;
}

/* ── respuesta en directo ─────────────────────────────────────── */
.bubble-live {
  border-style: dashed !important;
  opacity: 0.95;
}
.bubble-live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #00e5ff;
  margin-right: 4px;
  animation: tlx-pulse 1.1s ease-in-out infinite;
}
@keyframes tlx-pulse { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }

/* ── vistos / no vistos + hilo hablando ───────────────────────── */
.thread-unseen-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ffb020;
  box-shadow: 0 0 6px rgba(255,176,32,.7);
  margin-right: 6px;
  vertical-align: middle;
}
.thread-card--unseen .thread-card-title { font-weight: 700; }
.thread-card--speaking { box-shadow: inset 3px 0 0 #00e5ff; }
.thread-speaking-mark { margin-left: 6px; }

/* ── enlaces entre hilos ──────────────────────────────────────── */
a.thread-xlink {
  color: #7fe3f0;
  text-decoration: underline dotted;
  cursor: pointer;
}

/* ── buscador ─────────────────────────────────────────────────── */
.tlx-search { position: relative; padding: 6px 10px 0; }
.tlx-search-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(0,229,255,.35);
  border-radius: 6px;
  color: inherit;
  padding: 6px 9px;
  font: inherit;
  font-size: .85rem;
}
.tlx-search-results {
  position: absolute;
  left: 10px; right: 10px; top: 100%;
  z-index: 50;
  max-height: 55vh;
  overflow-y: auto;
  background: #0b1418;
  border: 1px solid rgba(0,229,255,.35);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.tlx-search-hit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: inherit;
  padding: 7px 10px;
  cursor: pointer;
  font: inherit;
}
.tlx-search-hit:hover, .tlx-search-hit:focus { background: rgba(0,229,255,.08); }
.tlx-hit-title { font-weight: 600; font-size: .82rem; }
.tlx-hit-meta { font-size: .7rem; opacity: .65; }
.tlx-hit-snippet { font-size: .78rem; opacity: .85; }
.tlx-search-empty { padding: 8px 10px; opacity: .7; font-size: .8rem; }
.bubble-search-hit {
  outline: 2px solid #ffb020;
  outline-offset: 2px;
  transition: outline-color .6s;
}

/* ── visor de prompt ──────────────────────────────────────────── */
.tlx-modal {
  position: fixed; inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
}
.tlx-modal[hidden] { display: none; }
.tlx-modal-card {
  width: min(1000px, 94vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: #0b1418;
  border: 1px solid rgba(0,229,255,.4);
  border-radius: 8px;
  padding: 10px 12px;
  color: #d8f6fa;
}
.tlx-modal-head { display: flex; gap: 8px; align-items: center; }
.tlx-modal-head strong { margin-right: auto; }
.tlx-modal-head select, .tlx-modal-head button {
  background: rgba(0,0,0,.4); color: inherit;
  border: 1px solid rgba(0,229,255,.35); border-radius: 5px; padding: 3px 8px;
  font: inherit; font-size: .8rem; cursor: pointer;
}
.tlx-prompt-meta { font-size: .78rem; opacity: .8; margin: 6px 0; }
.tlx-prompt-sec { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; margin-top: 6px; }
.tlx-prompt-user, .tlx-prompt-system {
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0,0,0,.35);
  border-radius: 5px;
  padding: 8px;
  margin: 4px 0;
  font-size: .75rem;
  overflow: auto;
  user-select: text;
}
.tlx-prompt-user { max-height: 18vh; }
.tlx-prompt-system { flex: 1; min-height: 20vh; }
.tlx-warn { color: #ffb020; }

/* ── anotaciones del plan (subrayado) ─────────────────────────── */
mark.plan-annot {
  background: rgba(255,176,32,.22);
  color: inherit;
  border-bottom: 2px solid #ffb020;
  border-radius: 2px;
  cursor: help;
}

/* ── móvil: burbuja viva ──────────────────────────────────────── */
.msg.msg-live { border: 1px dashed rgba(0,229,255,.45); }
.msg-live-meta { font-size: .72rem; opacity: .7; margin-top: 4px; }
.m-prompt-btn { font-size: 1rem; }