.lpstories-wrap{margin:1rem 0;font-family:inherit}
/* Form */
.lpstories-form{display:grid;gap:.5rem;padding:1rem;border:1px solid #e5e7eb;border-radius:1rem;background:#fff}
.lpstories-form-row input[type="file"]{width:100%}
.lpstories-btn{background:#2c2a5f;color:#fff;border:none;padding:.55rem 1rem;border-radius:.75rem;cursor:pointer}
.lpstories-status{font-size:.9rem;color:#111}
.lpstories-upload{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}
.lpstories-uploadbar{flex:1;height:6px;background:#eee;border-radius:9999px;overflow:hidden}
.lpstories-uploadbar span{display:block;height:100%;width:0;transition:width .2s linear;background:#2c2a5f}
.lpstories-uploadpct{min-width:3ch;text-align:right;font-variant-numeric:tabular-nums}

/* Bubbles */
.lpstories-bubbles{display:flex;gap:.35rem;overflow-x:auto;padding:.55rem 0;background:#fff !important;border:none}
.lpstories-bubbles.empty{justify-content:center}
.lpstories-bubble{display:flex;flex-direction:column;align-items:center;gap:.18rem;background:transparent !important;border:none !important;cursor:pointer;
  outline:0 !important; -webkit-tap-highlight-color: transparent; -webkit-appearance:none; appearance:none; box-shadow:none !important}
.lpstories-bubble:focus, .lpstories-bubble:focus-visible, .lpstories-bubble:active, .lpstories-bubble:hover,
.lpstories-bubble.is-active, .lpstories-bubble.active, .lpstories-bubble:focus-within{outline:0 !important; border:none !important; box-shadow:none !important; background:transparent !important}
.lpstories-bubble *{outline:0 !important}
.lpstories-avatar img{width:68px;height:68px;display:block;border-radius:50% !important;aspect-ratio:1/1;object-fit:cover;border:2px solid #d9125e}
.lpstories-name{font-size:.75rem;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d9125e !important;font-weight:600}

/* Modal */
.lpstories-modal{position:fixed;inset:0;background:rgba(0,0,0,.95);display:flex;align-items:center;justify-content:center;z-index:9999}
.lpstories-modal[hidden]{display:none}
.lpstories-modal-inner{position:relative;width:100vw;height:100vh;background:#000;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}

/* Topbar 35px + gap 2px */
.lpstories-topbar{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top, 0px) + 35px);padding:0 10px;display:flex;flex-direction:column;gap:2px;z-index:10;background:transparent}
body.admin-bar .lpstories-topbar{top:calc(46px + env(safe-area-inset-top, 0px) + 27px)}
@media (min-width:782px){
  body.admin-bar .lpstories-topbar{top:calc(32px + env(safe-area-inset-top, 0px) + 27px)}
}
.lpstories-toprow{display:flex;align-items:center;justify-content:space-between;gap:.6rem}

/* Enlace del autor: color inmutable */
.lpstories-author,
.lpstories-author:link,
.lpstories-author:visited,
.lpstories-author:hover,
.lpstories-author:active,
.lpstories-author:focus{
  color:#fff !important;
  text-decoration:none !important;
  outline:none !important;
}
.lpstories-author{display:flex;align-items:center;gap:.45rem;min-width:160px;flex:0 1 auto}
.lpstories-author-avatar{width:38px;height:38px;display:block;border-radius:50% !important;aspect-ratio:1/1;object-fit:cover;border:2px solid #d9125e;background:#111}
.lpstories-author-name{font-weight:600;font-size:.9rem;line-height:1.05;color:#fff !important}
.lpstories-timeago{opacity:.85;font-size:.8rem;color:#fff !important}

.lpstories-controls{display:flex;align-items:center;gap:.45rem;flex:0 0 auto}
.lpstories-close, .lpstories-delete{background:transparent; color:#fff; border:none; border-radius:.7rem; padding:.32rem .48rem; font-size:1.25rem; cursor:pointer;
  text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* Barras bajo los botones (2px) */
.lpstories-progress-bars{width:100%;display:flex;align-items:center;gap:6px;opacity:1;visibility:visible;pointer-events:none;margin-top:0}
.lpstories-bar{flex:1;height:3px;background:rgba(255,255,255,.35);border-radius:9999px;overflow:hidden;position:relative}
.lpstories-bar span{display:block;height:100%;width:0;background:#ffffff;transition:width .2s linear}
.lpstories-bar.done span{width:100%}

/* Player */
.lpstories-player{position:relative;width:100%;height:100%;touch-action:none}
.lpstories-media, .lpstories-media img, .lpstories-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}

/* Tap zones */
.lpstories-tapzone{position:absolute;top:0;bottom:0;width:50%;z-index:2}
.lpstories-tapzone.lp-left{left:0}
.lpstories-tapzone.lp-right{right:0}

@media (prefers-reduced-motion: reduce){
  .lpstories-bar span{display:block;height:100%;width:0;transition:width .15s linear;background:#fff}
}


/* === Circular avatars fix (HARD, scoped) === */
.lpstories-bubble .lpstories-avatar{
  display:inline-flex !important;
  width:68px !important;
  height:68px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  line-height:0 !important;
  flex:0 0 auto !important;
}
.lpstories-bubble .lpstories-avatar img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  border-radius:50% !important;
  aspect-ratio:1/1 !important;
  object-fit:cover !important;
}
/* === end circular avatars fix === */


/* === Hide horizontal scrollbar on stories strip === */
.lpstories-bubbles::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none !important; background:transparent !important; }
.lpstories-bubbles{ -ms-overflow-style:none !important; scrollbar-width:none !important; }
/* === end hide scrollbar === */


/* === Elegant staggered reveal === */
/* Initial state (before reveal) */
.lpstories-bubbles[hidden] .lpstories-bubble{ opacity:0; transform:translateY(6px) scale(.98); }
/* When JS marks the container as animating */
.lpstories-bubbles.lpstories-animate .lpstories-bubble{
  animation: lpstoriesFade .36s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
  will-change: transform, opacity;
}
@keyframes lpstoriesFade{
  from{ opacity:0; transform:translateY(6px) scale(.98); }
  to{   opacity:1; transform:none; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .lpstories-bubbles[hidden] .lpstories-bubble{ opacity:1; transform:none; }
  .lpstories-bubbles.lpstories-animate .lpstories-bubble{ animation:none; }
}
/* === end staggered reveal === */