/*
 * Mobile modal chrome-reachability affordance.
 * Goal: When the dream-player modal/overlay opens on mobile (≤600px), it
 * becomes a full-screen sheet, which traps the visitor and hides the
 * Featured Highlights + Dream Timeline sections below the fold. This bar
 * gives the visitor sticky anchors to jump to those sections without
 * dismissing the dream, and a dismissible transcript pill so the long
 * transcript text cannot push the gallery chrome off-screen.
 *
 * Desktop: bar stays hidden — keyboard nav, the in-modal close button,
 * and the regular page scroll already cover reachability.
 */

.m-chrome-bar,
.m-tx-sticky {
  display: none;
}

@media (max-width: 600px) {
  /* Sticky chrome-reachability bar pinned to the bottom of the modal
     sheet. Sits above the mini-player (z-index 200) and below the
     modal scroll chrome. */
  .m-chrome-bar {
    display: flex;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(8, 8, 15, 0.0) 0%, rgba(8, 8, 15, 0.96) 22%);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(99, 102, 241, 0.22);
    align-items: center;
    justify-content: space-between;
    margin: 18px -16px -18px;
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.35);
  }
  .m-chrome-bar-btn {
    flex: 1 1 auto;
    min-width: 0;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #c7d2fe;
    border-radius: 8px;
    padding: 9px 6px;
    font-size: 12px;
    font-family: var(--sans);
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 40px;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(99, 102, 241, 0.18);
  }
  .m-chrome-bar-btn:active {
    background: rgba(99, 102, 241, 0.28);
    color: #fff;
  }
  .m-chrome-bar-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
  }
  .m-chrome-bar-btn.is-close {
    background: rgba(157, 78, 221, 0.18);
    border-color: rgba(157, 78, 221, 0.4);
    color: #e0aaff;
  }

  /* Dismissible transcript affordance: collapses the long transcript to a
     peekable pill so the user can always reach Featured Highlights /
     Dream Timeline. Tapping the pill expands the transcript inline. */
  .m-tx-sticky {
    display: inline-flex;
    position: sticky;
    bottom: 56px;
    z-index: 6;
    margin: 10px 0 4px;
    padding: 6px 12px;
    background: rgba(99, 102, 241, 0.16);
    border: 1px solid rgba(99, 102, 241, 0.34);
    border-radius: 100px;
    color: #c7d2fe;
    font-size: 12px;
    font-family: var(--sans);
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    align-items: center;
    gap: 6px;
    transition: background 0.18s, color 0.18s;
    -webkit-tap-highlight-color: rgba(99, 102, 241, 0.18);
  }
  .m-tx-sticky:active {
    background: rgba(99, 102, 241, 0.3);
    color: #fff;
  }
  .m-tx-sticky .m-tx-sticky-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent, #6366f1);
    box-shadow: 0 0 6px rgba(99, 102, 241, 0.7);
  }
  .m-tx-sticky[aria-expanded="false"] .m-tx-sticky-dot {
    background: rgba(199, 210, 254, 0.4);
    box-shadow: none;
  }

  /* When the sticky pill marks transcript collapsed, hide the long body
     but keep the toggle reachable. The toggle in the inline transcript
     header remains visible for users who want the full inline control. */
  #transcriptSection.is-tx-collapsed #m-tx {
    display: none !important;
  }

  /* When the modal scrollable region is open we pad the bottom so the
     sticky bar doesn't sit on top of the last paragraph. */
  #modal {
    padding-bottom: 0;
  }
}

/* Hide both affordances on desktop. */
@media (min-width: 601px) {
  .m-chrome-bar,
  .m-tx-sticky {
    display: none !important;
  }
}

/* Reduced-motion: keep transitions instant. */
@media (prefers-reduced-motion: reduce) {
  .m-chrome-bar-btn,
  .m-tx-sticky {
    transition: none;
  }
}