/* ============================================================================
   AbiiApp Story Viewer (E3.2) — full-screen, gesture-native story player.
   Wraps WoWonder's existing story markup/data (lightbox/story.phtml, the
   view_all_stories / view_story_by_id endpoints) with new full-screen chrome:
   a real progress bar, invisible tap zones, hold-to-pause, swipe-down-to-close.
   ========================================================================== */

.lightbox-container:has(.story_lightbox) {
  background: #000;
}

.story_lightbox {
  background: #000 !important;
}
.story_lightbox .tag_lbox_img_innr #draggableHelper img,
.story_lightbox .tag_lbox_img_innr #draggableHelper video {
  max-width: 100%;
  object-fit: contain;
}
.story_lightbox .tag_lbox_blur_img { display: none; }

/* The base theme CSS (style.css) sizes this viewer entirely for desktop: a
   centered card with a min-width: 540px and a margin-right: 520px reserved for
   a sidebar. None of that adapts to a phone screen, so it must be forced full
   bleed with !important on mobile regardless of which base rule wins the
   cascade (several compete: .wo_imagecombo_lbox .story-img, .story_lightbox
   .story-img, .tag_lbox_story_view, etc). */
@media (max-width: 991px) {
  .story_lightbox .story-img {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #000 !important;
  }
  .story_lightbox .tag_lbox_story_view {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
  }
  .story_lightbox .tag_lbox_img_innr {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
  }
  .story_lightbox .tag_lbox_img_innr #draggableHelper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .story_lightbox .tag_lbox_img_innr img,
  .story_lightbox .tag_lbox_img_innr video,
  .story_lightbox .tag_lbox_img_innr #draggableHelper img,
  .story_lightbox .tag_lbox_img_innr #draggableHelper video {
    max-height: 100% !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
  }
}

/* ---- Progress bar: thin, safe-area aware, real-time driven by JS ---- */
.story_lightbox .mfp-wrap {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 10px; right: 10px;
  height: 3px;
  z-index: 30;
  background: rgba(255,255,255,.3);
  border-radius: 3px;
  overflow: hidden;
  pointer-events: none;
}
.story_lightbox .mfp_progress_line_ { display: block; width: 100%; height: 100%; }
.story_lightbox .width_ {
  display: block;
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 3px;
}
/* ---- Header: avatar, name, time, close/delete ---- */
.story_lightbox .wo_story_header {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  left: 12px; right: 12px;
  z-index: 30;
  justify-content: space-between;
}
.story_lightbox .wo_stor_h_info img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
}
.story_lightbox .wo_stor_h_info .user-name a,
.story_lightbox .wo_stor_h_info .user-name { color: #fff; font-weight: 700; }
.story_lightbox .wo_stor_h_info .ajax-time { color: rgba(255,255,255,.75); font-size: 12.5px; }
.story_lightbox .wo_stor_h_opts,
.story_lightbox .tag_lbox_toolbar .btn-mat {
  color: #fff;
  background: rgba(0,0,0,.35);
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.story_lightbox .tag_lbox_toolbar { display: none; } /* replaced by the close X in wo_story_header on mobile */
@media (min-width: 992px) { .story_lightbox .tag_lbox_toolbar { display: flex; } }

/* Old desktop-era arrow buttons: keep for pointer devices, hide on touch/mobile.
   Tap position (left 35% vs rest) is handled directly in JS on touchend instead
   of separate overlay divs, so it never fights the buttons/reactions for z-index. */
.story_lightbox .changer { z-index: 25; }
@media (max-width: 991px) {
  .story_lightbox .changer { display: none !important; }
}

/* ---- Swipe-down-to-close feedback (JS toggles transform/opacity inline
   during the gesture; this just makes the release animation smooth) ---- */
.story_lightbox {
  transition: transform .2s ease, opacity .2s ease;
}

/* Owner's "N views" button: base theme pins it 10px from the bottom of the now
   full-height media area, which collides with the app's floating bottom dock. */
.story_lightbox .tag_view_count_story_mobi {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 88px) !important;
  z-index: 30;
}

/* ---- Reactions / reply row pinned above the safe-area bottom inset ---- */
.story_lightbox .tag_story_react {
  position: absolute;
  left: 12px; right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 30;
}
.story_lightbox .btn-reply-story {
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
}

@media (min-width: 992px) {
  .story_lightbox .wo_story_header,
  .story_lightbox .mfp-wrap { top: 16px; }
}

/* ============================================================================
   Story creator (E3.3): reuses the same full-screen preview chrome as the
   viewer (.story_lightbox/.story-img/.tag_lbox_story_view/.tag_lbox_img_innr,
   all already forced full-bleed above), with the form as a bottom sheet over
   it on mobile instead of a separate desktop-style side panel.
   ========================================================================== */
.abii-story-creator__header { justify-content: flex-start; gap: 10px; }
@media (min-width: 992px) {
  .abii-story-creator__header .abii-subpage-bar__back { display: none; }
}
.abii-story-creator__pick {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.abii-story-creator__pick .empty_state {
  color: rgba(255,255,255,.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

@media (max-width: 991px) {
  .abii-story-creator__sheet {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    z-index: 35;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 60vh;
    overflow-y: auto;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    background: var(--abii-surface, #101114) !important;
    padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
  }
  .abii-story-creator__sheet .tag_page_title { display: none; }
  .abii-story-creator__mediarow { margin-bottom: 10px !important; }
}

/* Audience row (close friends toggle) */
.abii-audience-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--abii-line, rgba(255,255,255,.12));
  border-bottom: 1px solid var(--abii-line, rgba(255,255,255,.12));
  margin: 10px 0;
}
.abii-audience-toggle__icon { flex: 0 0 auto; color: var(--abii-ink, #E7E9EA); }
.abii-audience-toggle__label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.abii-audience-toggle__label b { font-size: 14px; color: var(--abii-ink, #E7E9EA); }
.abii-audience-toggle__label span { font-size: 12px; color: var(--abii-muted, #71767B); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abii-audience-toggle__manage {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--abii-brand, #C64D53);
  background: none;
  border: 0;
  padding: 6px 4px;
}

/* Simple toggle switch, reused for the audience toggle and each friend row */
.abii-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; }
.abii-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.abii-switch__track {
  position: absolute; inset: 0;
  background: var(--abii-line, rgba(255,255,255,.25));
  border-radius: 999px;
  transition: background .15s ease;
}
.abii-switch__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}
.abii-switch input:checked ~ .abii-switch__track { background: var(--abii-brand, #C64D53); }
.abii-switch input:checked ~ .abii-switch__track .abii-switch__thumb { transform: translateX(18px); }

/* Close friends picker: full-screen list of the owner's followers */
.abii-cf-picker {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--abii-surface, #101114);
  overflow-y: auto;
}
.abii-cf-picker.hidden { display: none; }
.abii-cf-picker__hint {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--abii-muted, #71767B);
  margin: 0;
}
.abii-cf-picker__list { padding: 0 16px 24px; }
.abii-cf-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--abii-line, rgba(255,255,255,.08));
}
.abii-cf-row img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.abii-cf-row__name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14.5px; color: var(--abii-ink, #E7E9EA); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }