/* Visor de historias, rediseño del dueño (2026-11-05, imagen de referencia): negro de fondo, la foto o el video a
   pantalla completa, progreso arriba (vistas en blanco, la actual en degradado, las que faltan translúcidas), quién
   publicó con su insignia y "Hace 2 h", ⋯ y X; abajo, sobre un degradado oscuro, la descripción, la ubicación, la barra
   "Escribe un mensaje…" con borde morado-fucsia y ✈️, y ❤️ 👍 😂 😍 en círculos de vidrio. Sin botones a los lados.
   Va después de css/story-editor.css y gana con #storyViewerModal. Prefijo svx-. */

#storyViewerModal.svx { background: #000 !important; z-index: 10050; }
#storyViewerModal.svx .mp-story-viewer { background: #000 !important; }

/* La foto o el video, a pantalla completa sin deformarse (proporción original). */
#storyViewerModal.svx .mp-story-viewer-media { background: #000; }
#storyViewerModal.svx .mp-story-viewer-media > img,
#storyViewerModal.svx .mp-story-viewer-media > video { width: 100%; height: 100%; object-fit: cover; }
/* Si la foto no es vertical, se ve completa (sin recortar) sobre su propio fondo desenfocado. */
#storyViewerModal.svx .mp-story-viewer-media.svx-fit > img,
#storyViewerModal.svx .mp-story-viewer-media.svx-fit > video { object-fit: contain; position: relative; z-index: 1; }
.svx-blur { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(28px) brightness(.55); transform: scale(1.1); }

/* Sombra arriba para que se lea el nombre sobre fotos claras. */
#storyViewerModal.svx .mp-story-viewer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 170px; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); }

/* Marca VYNKO arriba a la izquierda */
.svx-brand { position: absolute; z-index: 6; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 14px; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.svx-brand img { width: 26px; height: 26px; object-fit: contain; }
.svx-brand span { font-weight: 900; font-size: 17px; letter-spacing: .02em; background: linear-gradient(90deg, #38bdf8, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Progreso: una barra por historia */
#storyViewerModal.svx .mp-story-viewer-progress { top: calc(env(safe-area-inset-top, 0px) + 44px) !important; left: 14px !important; right: 14px !important; gap: 5px !important; z-index: 6; }
#storyViewerModal.svx .mp-story-viewer-seg { height: 3px !important; border-radius: 3px; background: rgba(167, 139, 250, .38) !important; overflow: hidden; }
#storyViewerModal.svx .mp-story-viewer-seg-fill { background: linear-gradient(90deg, #a855f7, #d946ef) !important; border-radius: 3px; }
#storyViewerModal.svx .mp-story-viewer-seg-fill.done { background: #fff !important; width: 100% !important; }

/* Quién publicó */
#storyViewerModal.svx .mp-story-viewer-head { top: calc(env(safe-area-inset-top, 0px) + 58px) !important; left: 12px !important; right: 8px !important; gap: 2px !important; z-index: 7; align-items: center; }
#storyViewerModal.svx .sv-who { gap: 12px; }
#storyViewerModal.svx #storyViewerAvatar { position: relative; flex: none; }
#storyViewerModal.svx #storyViewerAvatar .mp-avatar-round, #storyViewerModal.svx #storyViewerAvatar img, #storyViewerModal.svx #storyViewerAvatar > span:first-child { width: 46px !important; height: 46px !important; border-radius: 50%; box-shadow: 0 0 0 2px #fff; font-size: 18px; }
#storyViewerModal.svx .sv-who-text strong { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 800; }
#storyViewerModal.svx .sv-who-text strong > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svx-badge { flex: none; display: inline-flex; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
#storyViewerModal.svx .sv-who-text small { font-size: 14px; margin-top: 2px; color: rgba(255, 255, 255, .9); }
#storyViewerModal.svx .sv-more, #storyViewerModal.svx .svx-close { width: 44px; height: 44px; color: #fff; }

/* Abajo: descripción, ubicación, responder y reacciones */
#storyViewerModal.svx .sv-bottom { gap: 12px !important; padding: 90px 14px calc(env(safe-area-inset-bottom, 0px) + 14px) !important; background: linear-gradient(to top, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, 0) 100%) !important; }
#storyViewerModal.svx .sv-caption { margin: 0 !important; color: #fff !important; font-size: 17px !important; line-height: 1.35; text-align: left !important; background: none !important; padding: 0 !important; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.svx-loc { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 7px 14px 7px 11px; border-radius: 999px; color: #fff; font-size: 15px; font-weight: 500; background: rgba(30, 20, 50, .55); border: 1px solid rgba(192, 132, 252, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.svx-loc svg { color: #c4b5fd; flex: none; }
.svx-loc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svx-loc.hidden { display: none; }

#storyViewerModal.svx .sv-reply-row { gap: 8px; align-items: center; }
#storyViewerModal.svx .sv-reply-pill { height: 52px; padding: 0 8px 0 20px; border-radius: 28px; background: rgba(10, 8, 18, .6) padding-box, linear-gradient(90deg, #8b5cf6, #d946ef) border-box !important; border: 1.5px solid transparent !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#storyViewerModal.svx .sv-reply-pill input { font-size: 16.5px; color: #fff; }
#storyViewerModal.svx .sv-reply-pill input::placeholder { color: rgba(255, 255, 255, .9); }
#storyViewerModal.svx .sv-send { display: inline-flex !important; width: 40px; height: 40px; border: 0; background: none; color: #fff; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.svx-reacts { display: flex; gap: 7px; flex: none; }
.svx-reacts .mp-story-quick-emoji { width: 44px; height: 44px; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; border-radius: 50%; font-size: 23px; line-height: 1; background: rgba(15, 10, 25, .55) !important; border: 1.5px solid rgba(255, 255, 255, .28) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; transition: transform .15s ease; }
.svx-reacts .mp-story-quick-emoji:active, .svx-reacts .mp-story-quick-emoji.svx-pop { transform: scale(1.25); }
.svx-reacts .mp-story-quick-emoji.svx-sent { border-color: #f472b6 !important; box-shadow: 0 0 0 3px rgba(244, 114, 182, .25); }
/* Escribiendo: la barra ocupa todo el ancho (las reacciones se esconden un momento). */
#storyViewerModal.svx .sv-reply-row.sv-typing .svx-reacts { display: none; }
@media (max-width: 370px) {
  .svx-reacts { gap: 5px; }
  .svx-reacts .mp-story-quick-emoji { width: 38px; height: 38px; font-size: 20px; }
  #storyViewerModal.svx .sv-reply-pill { height: 46px; padding-left: 14px; }
}
#storyViewerModal.svx #storyReplyMessage { margin: 0; min-height: 0; color: rgba(255, 255, 255, .85); font-size: 13px; text-align: center; }
#storyViewerModal.svx #storyReplyMessage:empty { display: none; }

/* Pasar de una persona a otra deslizando: un pequeño movimiento al cambiar. */
#storyViewerModal.svx.svx-swipe-next .mp-story-viewer-media { animation: svxInNext .28s ease; }
#storyViewerModal.svx.svx-swipe-prev .mp-story-viewer-media { animation: svxInPrev .28s ease; }
@keyframes svxInNext { from { transform: translateX(18%); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes svxInPrev { from { transform: translateX(-18%); opacity: .3; } to { transform: none; opacity: 1; } }

/* Ajustes tras la prueba: que se lea "Escribe un mensaje…", borde morado-fucsia visible, sin línea bajo la descripción. */
#storyViewerModal.svx .sv-caption { border: 0 !important; box-shadow: none !important; }
#storyViewerModal.svx .sv-reply-pill { background: rgba(10, 8, 18, .62) !important; border: 1.5px solid #b45cf2 !important; box-shadow: 0 0 0 1px rgba(217, 70, 239, .28), 0 0 18px -6px rgba(217, 70, 239, .55) !important; height: 50px; padding: 0 6px 0 16px; }
#storyViewerModal.svx .sv-reply-pill input { font-size: 15px; }
.svx-reacts { gap: 5px; }
.svx-reacts .mp-story-quick-emoji { width: 38px; height: 38px; font-size: 20px; }
@media (max-width: 370px) { .svx-reacts .mp-story-quick-emoji { width: 34px; height: 34px; font-size: 18px; } #storyViewerModal.svx .sv-reply-pill input { font-size: 14px; } }
#storyViewerModal.svx .sv-reply-pill { padding-left: 14px; }
#storyViewerModal.svx .sv-reply-pill input { font-size: 14.5px; letter-spacing: -.01em; }
#storyViewerModal.svx .sv-send { width: 34px; }

/* Las zonas de tocar (anterior / siguiente) van encima de la foto: la foto no vertical con fondo desenfocado
   (z-index 1) tapaba los toques y no se podía volver a la historia anterior (el dueño 2026-11-05). */
#storyViewerModal.svx .mp-story-viewer-zone { z-index: 4 !important; background: transparent !important; }

/* Botón visible para volver a la historia anterior (el dueño 2026-11-06: "pon la opción de poder retroceder a la historia
   anterior"). Va dentro de la zona izquierda: tocarlo es lo mismo que tocar el lado izquierdo (prevStory). */
.svx-back { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(15, 10, 25, .45); border: 1.5px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; transition: transform .15s ease; }
#storyViewerPrevZone:active .svx-back { transform: translateY(-50%) scale(.9); }
#storyViewerModal.sv-holding .svx-back { opacity: 0; }