/* Momentos (historias) del Inicio en tarjetas, como el diseño del dueño (2026-11-05: "organiza que las historias se vean
   exactamente igual, con ese tamaño y efecto"): tarjeta vertical con la foto de la historia, borde degradado azul →
   morado, nombre abajo, punto verde si está en línea, ▶ si es video y "EN VIVO" si transmite. "Tu historia" con fondo
   degradado, la foto en círculo y el +. Solo en el teléfono (en el computador el tablero sigue con círculos, vkd-on).
   Prefijo vkm-. La tarjeta la arma client.js loadStoriesBar. */

body:not(.vkd-on) .vkm-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 4px 10px; }
body:not(.vkd-on) .vkm-head h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.3rem; font-weight: 800; color: #0f172a; }
.vkm-head-ico { width: 30px; height: 30px; flex: none; }
body:not(.vkd-on) .vkm-head .mp-moments-viewall { color: #1d8cf8 !important; font-size: 1rem !important; font-weight: 700 !important; }

body:not(.vkd-on) .mp-stories { display: flex !important; gap: 8px !important; overflow-x: auto; padding: 2px 4px 12px !important; scrollbar-width: none; }
body:not(.vkd-on) .mp-stories::-webkit-scrollbar { display: none; }
body:not(.vkd-on) .mp-stories-friends { display: flex !important; gap: 8px !important; }

/* Tarjeta (amigos y "Tu historia"): mismo tamaño */
body:not(.vkd-on) .mp-stories .mp-story { position: relative !important; display: block !important; flex: 0 0 auto !important; width: 76px !important; height: 128px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; cursor: pointer; }

/* Amigos: borde degradado, foto, nombre */
body:not(.vkd-on) .mp-stories .vkm-card .mp-story-ring { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; border-radius: 16px !important; padding: 2.5px !important; background: linear-gradient(165deg, #38bdf8 0%, #4f46e5 50%, #c026d3 100%) !important; display: block !important; box-shadow: 0 8px 18px -12px rgba(79, 70, 229, .7); }
body:not(.vkd-on) .vkm-card .mp-story-avatar { display: none !important; }
.vkm-cover { position: relative; display: block; width: 100%; height: 100%; border-radius: 13.5px; overflow: hidden; border: 2px solid #fff; background: #dbe3f5; box-sizing: border-box; }
.vkm-cover img, .vkm-cover video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vkm-cover::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, .78)); pointer-events: none; }
.vkm-cover .vkm-ini { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 30px; font-weight: 800; color: #fff; background: linear-gradient(160deg, #60a5fa, #7c3aed); }
body:not(.vkd-on) .vkm-card .mp-story-label { position: absolute !important; left: 8px; right: 6px; bottom: 9px; z-index: 2; display: flex !important; align-items: center; gap: 4px; margin: 0 !important; color: #fff !important; font-size: 13px !important; font-weight: 800 !important; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.vkm-name { overflow: hidden; text-overflow: ellipsis; }
.vkm-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; box-sizing: border-box; }
.vkm-play { flex: none; width: 17px; height: 17px; border-radius: 50%; background: #8b5cf6; display: inline-flex; align-items: center; justify-content: center; }
.vkm-play svg { width: 8px; height: 8px; margin-left: 1px; }
body:not(.vkd-on) .vkm-card .mp-story-live-pill { position: absolute !important; top: 7px !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translateX(-50%) !important; z-index: 2; display: inline-flex !important; align-items: center; gap: 3px; padding: 3px 7px !important; border-radius: 999px !important; background: #e11d48 !important; color: #fff !important; font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: .02em; white-space: nowrap; border: 0 !important; box-shadow: 0 4px 10px -4px rgba(225, 29, 72, .8); }
.vkm-live-ico { width: 10px; height: 10px; }

/* "Tu historia": fondo degradado, foto redonda con aro blanco y el + */
body:not(.vkd-on) .mp-stories .mp-story-self { border-radius: 16px !important; background: linear-gradient(165deg, #22d3ee 0%, #3b82f6 45%, #a855f7 100%) !important; overflow: visible; box-shadow: 0 8px 18px -12px rgba(59, 130, 246, .8) !important; }
body:not(.vkd-on) .mp-story-self .mp-story-ring { position: absolute !important; top: 16px !important; left: 50% !important; transform: translateX(-50%); width: 56px !important; height: 56px !important; padding: 0 !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, .95) !important; display: block !important; }
body:not(.vkd-on) .mp-story-self .mp-story-avatar { width: 100% !important; height: 100% !important; border: 0 !important; border-radius: 50% !important; display: flex !important; }
body:not(.vkd-on) .mp-story-self .mp-story-plus { position: absolute !important; left: 50% !important; right: auto !important; bottom: -12px !important; top: auto !important; transform: translateX(-50%); width: 26px !important; height: 26px !important; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center; background: linear-gradient(135deg, #38bdf8, #2563eb) !important; color: #fff !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important; border: 2.5px solid #fff !important; box-sizing: border-box; }
body:not(.vkd-on) .mp-story-self .mp-story-label { position: absolute !important; left: 0; right: 0; bottom: 10px; margin: 0 !important; color: #fff !important; font-size: 12.5px !important; font-weight: 800 !important; text-align: center; white-space: nowrap; }

/* En el computador (tablero) la tarjeta no se usa: círculos como siempre. */
body.vkd-on .vkm-cover { display: none !important; }

/* Que quepan "Tu historia" y los nombres (como en el diseño). */
body:not(.vkd-on) .mp-stories .mp-story { width: 78px !important; height: 132px !important; }
body:not(.vkd-on) .mp-story-self .mp-story-label { font-size: 11.5px !important; letter-spacing: -.01em; }
body:not(.vkd-on) .vkm-card .mp-story-label { font-size: 12.5px !important; }