/* ---------- Rastreador de misiones (derecha, como el de WoW) ---------- */
.tracker { position: fixed; top: 84px; right: 16px; width: 300px; max-height: calc(100vh - 200px); overflow-y: auto; z-index: 6; padding: 4px 6px; scrollbar-width: none; }
.tracker-head { display: flex; align-items: center; gap: 8px; padding: 4px 2px 6px; border-bottom: 1px solid rgba(232,184,74,.45); cursor: pointer; user-select: none; }
.tracker-head b { flex: 1; font: 800 15px Cinzel, serif; color: #f5d36a; letter-spacing: .05em; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.tracker-head span { font: 700 12px Inter, sans-serif; color: #e9dcc4; text-shadow: 0 1px 2px #000; }
.tracker-head i { font-style: normal; color: #f5d36a; font-size: 12px; text-shadow: 0 1px 2px #000; }
.tracker.min .tracker-list { display: none; }
.tracker-list { list-style: none; margin: 0; padding: 0; }
.tracker-list li { position: relative; padding: 8px 22px 8px 4px; border-radius: 6px; cursor: pointer; }
.tracker-list li:hover { background: rgba(10,8,14,.55); }
.tracker-list .t { display: block; font: 700 14px Inter, sans-serif; color: #ffd100; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.tracker-list .who { display: block; font: 600 11px Inter, sans-serif; color: #b9ab95; text-shadow: 0 1px 2px #000; margin-top: 1px; }
.tracker-list .o { display: block; font: 500 13px Inter, sans-serif; color: #f2ece0; text-shadow: 0 1px 2px #000, 0 0 4px #000; margin-top: 3px; padding-left: 10px; text-indent: -10px; }
.tracker-list .o.done { color: #7fd38f; }
.tracker-list .x { position: absolute; top: 6px; right: 2px; width: 18px; height: 18px; border: 0; border-radius: 4px; background: transparent; color: #b9ab95; cursor: pointer; display: none; font-size: 14px; line-height: 1; }
.tracker-list li:hover .x { display: block; }
.tracker .empty { font: italic 13px Inter, sans-serif; color: #cfc3ae; text-shadow: 0 1px 2px #000; padding: 8px 4px; }
body.focus .tracker { display: none; }

/* Botón "Seguir" en las listas de misiones */
.follow { margin-top: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid currentColor; background: transparent; font: 700 11px Inter, sans-serif; cursor: pointer; opacity: .75; }
.follow.on { opacity: 1; background: rgba(245,196,0,.18); }
.quest .follow { color: #7a4a12; }
.mis .follow { color: var(--gold); }

/* ---------- Chat (abajo a la izquierda, como el de WoW) ---------- */
.wchat { position: fixed; left: 16px; bottom: 16px; width: 380px; height: 220px; z-index: 6; display: flex; flex-direction: column; border-radius: 8px; background: rgba(8,6,10,.35); transition: background .2s; }
.wchat:hover, .wchat:focus-within { background: rgba(8,6,10,.78); }
.wchat-tabs { display: flex; gap: 4px; padding: 4px 6px 0; }
.wchat-tabs span { padding: 3px 10px; border-radius: 6px 6px 0 0; background: rgba(40,30,20,.85); border: 1px solid #6b5326; border-bottom: 0; font: 700 12px Inter, sans-serif; color: #f5d36a; }
.wchat-tabs .close { display: none; margin-left: auto; border: 0; background: transparent; color: var(--text); font-size: 18px; cursor: pointer; }
.wchat-log { flex: 1; overflow-y: auto; padding: 6px 8px; font: 500 13px/1.45 Inter, sans-serif; color: #fff; text-shadow: 0 1px 1px #000, 0 0 3px #000; scrollbar-width: thin; border-top: 1px solid rgba(107,83,38,.6); }
.wchat-log p { margin: 0 0 2px; word-wrap: break-word; }
.wchat-log .tm { color: #9c927f; font-size: 11px; }
.wchat-log .me { color: #ff80ff; }
.wchat-log .sys { color: #ffd100; }
.wchat-in { display: flex; gap: 4px; padding: 4px; }
.wchat-in select, .wchat-in input { border: 1px solid #6b5326; background: rgba(12,9,14,.9); color: var(--text); border-radius: 6px; font: 13px Inter, sans-serif; padding: 6px 8px; }
.wchat-in select { max-width: 130px; color: #ff80ff; font-weight: 600; }
.wchat-in input { flex: 1; min-width: 0; }
.wchat-fab { display: none; position: fixed; left: 16px; bottom: 16px; z-index: 6; width: 48px; height: 48px; border-radius: 12px; border: 1px solid #6b5326; background: linear-gradient(#3a2a14, #1c140b); font-size: 22px; cursor: pointer; }
.wchat-fab .n { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: #9b1c1c; border: 1px solid #f5d36a; color: #fff; font: 700 11px Inter, sans-serif; display: grid; place-items: center; }

/* Chat dentro de una app ("Hablar con…"): mismo historial */
.chat .msg.me { align-self: flex-end; background: #3a2340; border-color: #6d3f78; }
.chat input:disabled, .chat button:disabled { opacity: .5; }

body:not([data-view="oficina"]) .tracker,
body:not([data-view="oficina"]) .wchat,
body:not([data-view="oficina"]) .wchat-fab { display: none !important; }

/* La columna de agentes deja sitio al chat */
@media (min-width: 1101px) { .roster { max-height: calc(100vh - 84px - 256px); } }

/* Pantallas medianas (Z Fold abierto): chat como botón */
@media (min-width: 701px) and (max-width: 1100px) {
  .tracker { width: 250px; }
  .wchat { display: none; width: 360px; bottom: 76px; z-index: 22; background: rgba(8,6,10,.92); border: 1px solid #6b5326; }
  body.chat-open .wchat { display: flex; }
  body.chat-open .wchat-tabs .close { display: block; }
  .wchat-fab { display: grid; place-items: center; }
}

/* Móvil (Z Fold cerrado) */
@media (max-width: 700px) {
  .tracker { top: 62px; right: 10px; left: auto; width: auto; max-width: calc(100vw - 20px); max-height: 50vh; padding: 0; background: rgba(12,9,14,.92); border: 1px solid var(--line); border-radius: 12px; }
  .tracker-head { padding: 8px 12px; border: 0; }
  .tracker-head b { font-size: 13px; }
  .tracker.min { width: auto; }
  .tracker:not(.min) { width: min(320px, calc(100vw - 20px)); }
  .tracker:not(.min) .tracker-head { border-bottom: 1px solid rgba(232,184,74,.45); }
  .tracker-list { padding: 4px 8px 8px; }
  .tracker-list .x { display: block; }
  body.roster-open .tracker { display: none; }
  .wchat { display: none; left: 0; right: 0; bottom: 64px; width: auto; height: 62vh; z-index: 22; border-radius: 16px 16px 0 0; background: rgba(10,8,14,.97); border-top: 1px solid #6b5326; }
  body.chat-open .wchat { display: flex; }
  body.chat-open .wchat-tabs .close { display: block; }
  .wchat-log { font-size: 14px; }
  .wchat-fab { display: grid; place-items: center; left: 10px; bottom: 80px; }
  body.chat-open .wchat-fab { display: none; }
}

/* En pantallas táctiles o medianas el rastreador queda sobre la sala iluminada: fondo propio para leerlo */
@media (pointer: coarse), (max-width: 1300px) {
  .tracker { background: rgba(12,8,14,.78); border: 1px solid rgba(107,83,38,.7); border-radius: 12px; padding: 6px 10px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .tracker-list li:hover { background: rgba(255,255,255,.05); }
}

/* indicador "escribiendo…" */
.typing { margin: 4px 0 0; color: #b9ab95; font: italic 12px Inter, sans-serif; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .45; } }

/* que el campo de escribir no quede pegado al teclado del móvil */
.chat form, .wchat-in { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
@media (pointer: coarse) { .chat form { padding: 12px 12px 22px; } .wchat-in { padding-bottom: 18px; } }