/* Estilo VYNKO de la lista de chats (boceto del dueño 2026-10-29, "así debe quedar"): el de por defecto
   (data-chat-list-theme="classic"; el de BlackBerry ahora es "bbm", css/chat-clasico.css). Pestañas Chats / Personas /
   Grupos arriba con el botón de filtros, fila de contactos con "Mi estado", buscador con ✨ (Vyhia), tarjeta
   "Agregar por Vynko" y cada chat en tarjeta con barrita y aro de color, número de no leídos, ✓✓ y 🔕.
   Lo que se mueve de lugar lo hace public/chat-list-vynko.js (body.vkcl-on). */
.mp-conv-panel[data-chat-list-theme="classic"] { background: #f6f4fd !important; }

/* Encabezado: sin el título "Mensajes"; las pestañas van ahí mismo, con los botones a la derecha. */
body.vkcl-on .mp-conv-panel-head { padding: 10px 14px 6px !important; gap: 8px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.vkcl-on .mp-conv-panel-head .mp-conv-header-icon,
body.vkcl-on .mp-conv-panel-head .mp-conv-header-titles { display: none !important; }
body.vkcl-on .mp-conv-panel-head #convFilterPills { flex: 1 1 auto; min-width: 0; display: flex !important; gap: 6px !important; padding: 0 !important; margin: 0 !important; overflow-x: auto; scrollbar-width: none; background: none !important; border: 0 !important; }
body.vkcl-on .mp-conv-panel-head #convFilterPills::-webkit-scrollbar { display: none; }
body.vkcl-on #convFilterPills .mp-conv-filter-pill { flex: none !important; height: 36px !important; padding: 0 11px !important; gap: 5px !important; border: 0 !important; border-radius: 999px !important; background: #ebe8f7 !important; color: #4b4566 !important; font-weight: 700 !important; font-size: .85rem !important; box-shadow: none !important; }
body.vkcl-on #convFilterPills .mp-conv-filter-pill.active { background: linear-gradient(90deg, #38bdf8, #7c3aed) !important; color: #fff !important; box-shadow: 0 6px 14px rgba(99,102,241,.3) !important; }
body.vkcl-on #convFilterPills .mp-conv-filter-pill .mp-conv-pill-badge { display: none !important; }
body.vkcl-on .mp-conv-panel-head .mp-conv-header-icon-btn { width: 40px !important; height: 40px !important; background: #ebe8f7 !important; color: #4c1d95 !important; border-radius: 50% !important; }
body.vkcl-on .mp-conv-panel-head .mp-conv-header-icon-btn svg,
body.vkcl-on #chatCustomizeMenuBtn svg, body.vkcl-on #newMessageBtn svg { width: 20px !important; height: 20px !important; }
body.vkcl-on .mp-conv-panel-head .mp-conv-header-icon-btn { width: 36px !important; height: 36px !important; flex: none !important; padding: 0 !important; }
body.vkcl-on .mp-conv-panel-head .mp-conv-header-icon-btn svg { flex: none !important; }

/* Fila de contactos con "Mi estado" */
.vkcl-stories { display: flex; gap: 12px; overflow-x: auto; padding: 6px 14px 8px; scrollbar-width: none; }
.vkcl-stories::-webkit-scrollbar { display: none; }
.vkcl-story { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; color: #1e1b3a; }
.vkcl-story-ring { position: relative; width: 60px; height: 60px; border-radius: 50%; padding: 3px; background: var(--ring, linear-gradient(135deg, #38bdf8, #7c3aed)); box-sizing: border-box; }
.vkcl-story-ring img, .vkcl-story-ring .vkcl-ini { width: 100%; height: 100%; box-sizing: border-box; border: 2.5px solid #f6f4fd; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #e9e5f7; color: #6d28d9; font-weight: 900; font-size: 1.2rem; }
.vkcl-story-ring .vkcl-dot { position: absolute; right: 1px; bottom: 2px; width: 13px; height: 13px; border-radius: 50%; background: #a8a3b8; border: 2.5px solid #f6f4fd; }
.vkcl-story-ring .vkcl-dot.on { background: #22c55e; }
.vkcl-story.me .vkcl-story-ring { background: #e3e0f2; }
.vkcl-story.me .vkcl-plus { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #6d28d9; font-size: 1.7rem; font-weight: 400; border: 2px dashed #c4b5fd; box-sizing: border-box; }
.vkcl-story span:last-child { max-width: 64px; font-size: .74rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Buscador con ✨ al lado */
.vkcl-searchrow { display: flex; align-items: center; gap: 8px; margin: 4px 14px 10px; }
.vkcl-searchrow .mp-conv-search { flex: 1; min-width: 0; margin: 0 !important; height: 46px; border-radius: 999px !important; background: #fff !important; border: 1px solid #e6e2f4 !important; box-shadow: 0 4px 12px rgba(76,29,149,.05); }
.vkcl-searchrow .mp-conv-search input { min-width: 0; }
.vkcl-spark { flex: none; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; line-height: 1; border: 0; border-radius: 50%; background: #ebe8f7; color: #7c3aed; font-size: 1.2rem; cursor: pointer; box-shadow: 0 4px 12px rgba(76,29,149,.08); }

/* "Agregar por Vynko" como tarjeta */
body.vkcl-on .vkpin-bar { margin: 0 14px 10px !important; }

/* Cada chat en tarjeta */
.mp-conv-panel[data-chat-list-theme="classic"] .mp-conversation-list { padding: 0 14px 90px !important; display: flex; flex-direction: column; gap: 10px; }
.mp-conv-panel[data-chat-list-theme="classic"] .mp-conversation-card { margin: 0 !important; padding: 12px 12px 12px 12px !important; border-radius: 20px !important; background: #fff !important; border: 1px solid #eeebf8 !important; border-left: 4px solid var(--conv-accent, #a78bfa) !important; box-shadow: 0 6px 16px rgba(76,29,149,.06) !important; gap: 12px !important; }
.mp-conv-panel[data-chat-list-theme="classic"] .mp-conversation-card.active { background: #f5f3ff !important; }
.mp-conv-panel[data-chat-list-theme="classic"] .mp-conversation-card-avatar-wrap { position: relative; flex: none; padding: 3px; border-radius: 50%; background: var(--conv-accent, linear-gradient(135deg, #38bdf8, #7c3aed)); box-shadow: none !important; }
.mp-conv-panel[data-chat-list-theme="classic"] .mp-conversation-card-avatar-wrap > :first-child { border: 2.5px solid #fff !important; border-radius: 50% !important; box-sizing: border-box; }
.mp-conv-panel[data-chat-list-theme="classic"] .mp-friend-online-dot { right: 1px !important; bottom: 2px !important; width: 13px !important; height: 13px !important; border: 2.5px solid #fff !important; background: #a8a3b8 !important; display: block !important; }
.mp-conv-panel[data-chat-list-theme="classic"] .mp-friend-online-dot.online { background: #22c55e !important; }
.mp-conv-panel[data-chat-list-theme="classic"] .mp-conversation-card-name { font-weight: 800 !important; font-size: 1rem !important; color: #1e1b3a !important; }
.mp-conv-panel[data-chat-list-theme="classic"] .mp-conversation-card-time { color: #8a84a3 !important; font-size: .78rem !important; }
.mp-conv-panel[data-chat-list-theme="classic"] .mp-conversation-card-lastseen { color: #8a84a3 !important; font-size: .82rem !important; }
.mp-conv-panel[data-chat-list-theme="classic"] .mp-conversation-card-preview { color: #5f5a74 !important; font-size: .88rem !important; }
.mp-conv-panel[data-chat-list-theme="classic"] .mp-conversation-card.unread .mp-conversation-card-preview { color: #1e1b3a !important; font-weight: 700 !important; }
.mp-conv-panel[data-chat-list-theme="classic"] .mp-conversation-card-body { min-width: 0; flex: 1; }
.vkcl-meta { flex: none; align-self: flex-end; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: #8a84a3; }
.vkcl-badge { min-width: 24px; height: 24px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; font-size: .78rem; font-weight: 800; }
.vkcl-ticks { font-size: .9rem; font-weight: 800; letter-spacing: -3px; color: #a8a3b8; padding-right: 3px; }
.vkcl-ticks.read { color: #6d28d9; }
.vkcl-media { font-size: 1rem; opacity: .8; }
.vkcl-muted { width: 18px; height: 18px; color: #8a84a3; }

/* Teléfonos angostos o con la letra del sistema agrandada (el dueño 2026-11-04, foto del Android de su hermano: "se le
   ve muy rara la app"). "Última vez…" y el último mensaje en un solo renglón (antes "Última vez ayer a las / 8:43 p. m."
   en dos y cada chat quedaba altísimo). */
.mp-conv-panel[data-chat-list-theme="classic"] .mp-conversation-card-lastseen,
.mp-conv-panel[data-chat-list-theme="classic"] .mp-conversation-card-preview { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mp-conv-panel[data-chat-list-theme="classic"] .mp-conversation-card-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 400px) {
  /* Pestañas sin ícono y más justas, para que quepan Chats, Personas y Grupos. */
  body.vkcl-on #convFilterPills .mp-conv-filter-pill { height: 34px !important; padding: 0 10px !important; font-size: .8rem !important; }
  body.vkcl-on #convFilterPills .mp-conv-filter-pill > svg { display: none !important; }
  body.vkcl-on .mp-conv-panel-head { padding: 8px 10px 4px !important; gap: 6px !important; }
  body.vkcl-on .mp-conv-panel-head .mp-conv-header-icon-btn { width: 34px !important; height: 34px !important; }
  .vkcl-searchrow { margin: 4px 10px 8px; gap: 6px; }
  .vkcl-searchrow .mp-conv-search { height: 42px; }
  .vkcl-spark { width: 42px; height: 42px; }
  .mp-conv-panel[data-chat-list-theme="classic"] .mp-conversation-list { padding: 0 10px 90px !important; gap: 8px; }
  .mp-conv-panel[data-chat-list-theme="classic"] .mp-conversation-card { padding: 10px !important; gap: 10px !important; border-radius: 18px !important; }
  .mp-conv-panel[data-chat-list-theme="classic"] .mp-conversation-card-avatar-wrap > :first-child { width: 46px !important; height: 46px !important; min-width: 46px; }
}