/* ===== Instagram-style Stories (centered modal) ===== */

.modal-overlay{
    position:fixed; inset:0;
    display:none;                        /* JS toggles to flex */
    align-items:center; justify-content:center;
    background:rgba(0,0,0,.5);
    z-index:1000;
  }
  
  .story-page{ position:relative; background:transparent; }
  
  /* 9:16 story frame that scales to viewport height */
  .story-canvas{
    height:min(92vh, 860px);
    width:calc(min(92vh, 860px) * 9 / 16);
    background:#000 center/contain no-repeat;
    border-radius:12px;
    box-shadow:0 10px 40px rgba(0,0,0,.5);
    position:relative;
    overflow: hidden; /* Ensure videos don't overflow */
  }
  
  /* Video elements inside story canvas */
  .story-canvas video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    background: #000;
  }
  
  /* top & bottom fades like IG */
  .story-canvas::before{
    content:""; position:absolute; inset:0 0 auto 0; height:120px;
    background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
    border-radius:12px 12px 0 0; pointer-events:none;
    z-index: 2; /* Ensure overlay is above video */
  }
  .story-canvas::after{
    content:""; position:absolute; inset:auto 0 0 0; height:160px;
    background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
    border-radius:0 0 12px 12px; pointer-events:none;
    z-index: 2; /* Ensure overlay is above video */
  }
  
  /* progress pills */
  .story-progress{
    position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:calc(100% - 20px); max-width:600px; z-index:3;
    display:grid; grid-auto-flow:column; gap:6px;
  }
  .story-prog-seg{ height:3px; background:rgba(255,255,255,.35); border-radius:999px; overflow:hidden; }
  .story-prog-fill{ height:100%; width:0%; background:#fff; }
  
  /* header (avatar + title) */
  .story-header{
    position:absolute; top:18px; left:18px; z-index:3;
    color:#fff;
    font-size:14px; font-weight:600;
  }
  
  .story-meta{
    display:flex; align-items:center; gap:10px;
  }
  .story-logo{
    margin-top:5px;
    width:28px; height:28px; border-radius:50%;
    object-fit:cover; background:#ffffff; border:1px solid rgba(255,255,255,.25);
    flex-shrink:0; /* Prevent logo from shrinking */
  }
  .story-title{
    margin-top:5px;


    line-height:1; 
  }
  
  /* close button */
  .story-close{
    position:absolute; top:20px; right:10px; z-index:3;
    width:32px; height:32px; border-radius:50%;
    background:rgba(0,0,0,.6); color:#fff; border:1px solid rgba(255,255,255,.25);
    font-size:20px; cursor:pointer;
  }

  /* play/pause button */
  .story-play-pause{
    position:absolute; top:20px; right:50px; z-index:3;
    width:32px; height:32px; border-radius:50%;
    background:rgba(0,0,0,.6); color:#fff; border:1px solid rgba(255,255,255,.25);
    font-size:14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.2s ease;
    line-height:1; /* Remove extra line height */
    font-family:system-ui, -apple-system, sans-serif; /* Use system font for better character rendering */
}

.story-play-pause:hover{
    background:rgba(0,0,0,.8);
}

.story-play-pause.paused{
    background:rgba(255,255,255,.2);
}

/* Fine-tune character positioning */
.story-play-pause {
    text-align: center;
    vertical-align: middle;
}

/* Specific adjustments for each character */
.story-play-pause:not(.paused) {
    /* Pause character (⏸) - slight adjustment */
    transform: translateX(0.5px);
}

.story-play-pause.paused {
    /* Play character (▶) - slight adjustment */
    transform: translateX(-0.5px);
}
  
  /* tap zones */
  .story-hit{ position:absolute; inset:0; background:transparent; border:0; }
  .story-hit.left{ right:50%; }
  .story-hit.right{ left:50%; }
  
  /* subtle desktop arrows */
  @media (hover:hover){
    .story-hit.left::after,
    .story-hit.right::after{
      content:""; position:absolute; top:50%; transform:translateY(-50%);
      width:34px; height:34px; border-radius:50%;
      background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
    }
    .story-hit.left::after{
      left:10px;
      mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/></svg>") center/18px no-repeat;
    }
    .story-hit.right::after{
      right:10px;
      mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>") center/18px no-repeat;
    }
    .story-hit:hover::after{ background:rgba(255,255,255,.16); }
  }
  
  /* optional caption block, if you add one later */
  .story-caption{
    position:absolute; left:14px; right:14px; bottom:14px; z-index:2;
    color:#fff; font-size:14px;
  }
  .modal-overlay{
  position: fixed; inset: 0;
  display: none; /* JS toggles to flex */
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.5);
  z-index: 1000;

  /* NEW: tappable ring around the story frame */
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  cursor: pointer;               /* shows you can tap outside */
}

/* Keep taps inside the frame from closing it */
.story-canvas{ 
  height: min(92vh, 860px);
  width: calc(min(92vh, 860px) * 9 / 16);
  background:#000 center/contain no-repeat;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  position: relative;
  overflow: hidden;
  pointer-events: auto;          /* clicks go to content, not overlay */
}

/* Mobile tighten: leave more room to tap out */
@media (max-width: 768px) {
  .story-canvas{
    height: 74vh;                /* shorter so there’s visible backdrop */
    width: calc(74vh * 9 / 16);
  }
}