/* ReelsMenu bottom sheet (2026-10-01, per Fabian). Facebook-style. */
.reel-menu-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0; transition: opacity 0.25s ease;
}
.reel-menu-overlay.is-open { opacity: 1; }
.reel-menu-sheet[hidden] { display: none !important; }

.reel-menu-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 3001;
    background: #fff; color: #111;
    border-radius: 20px 20px 0 0;
    max-height: 82vh;
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
}
.reel-menu-sheet.is-open { transform: translateY(0); }

@media (prefers-color-scheme: dark) {
    .reel-menu-sheet { background: #1c1c1e; color: #f2f2f7; }
    .reel-menu-row:active { background: rgba(255, 255, 255, 0.08); }
    .reel-menu-sub { color: #98989f; }
}

.reel-menu-handle {
    width: 40px; height: 4px; border-radius: 2px;
    background: #d1d1d6; margin: 10px auto 4px; flex: none;
}

.reel-menu-head {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 16px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex: none;
}
.reel-menu-thumb {
    width: 44px; height: 64px; object-fit: cover;
    border-radius: 8px; background: #000; flex: none;
}
.reel-menu-headtext { flex: 1; min-width: 0; }
.reel-menu-title {
    font-weight: 700; font-size: 15px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reel-menu-sub { font-size: 13px; color: #6b7280; }
.reel-menu-close {
    border: 0; background: rgba(0, 0, 0, 0.06);
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: inherit; flex: none; cursor: pointer;
}

.reel-menu-rows {
    overflow-y: auto; padding: 8px 0 calc(16px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
}

.reel-menu-row {
    display: flex; align-items: center; gap: 14px;
    width: 100%; border: 0; background: none; color: inherit;
    padding: 13px 18px; font-size: 16px; text-align: left;
    cursor: pointer;
}
.reel-menu-row:active { background: rgba(0, 0, 0, 0.05); }
.reel-menu-row.is-danger { color: #e11d48; }
.reel-menu-row.is-danger .reel-menu-icon { color: #e11d48; }

.reel-menu-icon {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex: none;
}
.reel-menu-label { flex: 1; }
.reel-menu-value { font-size: 14px; color: #6b7280; }
.reel-menu-check { font-size: 22px; color: #7c3aed; }

.reel-menu-toggle {
    width: 48px; height: 28px; border-radius: 14px;
    background: #d1d1d6; position: relative; flex: none;
    transition: background 0.2s ease;
}
.reel-menu-toggle span {
    position: absolute; top: 2px; left: 2px;
    width: 24px; height: 24px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: left 0.2s ease;
}
.reel-menu-toggle.is-on { background: #7c3aed; }
.reel-menu-toggle.is-on span { left: 22px; }

.reel-menu-toast {
    position: fixed; left: 50%; bottom: 90px; z-index: 3002;
    transform: translateX(-50%) translateY(12px);
    background: rgba(17, 17, 17, 0.92); color: #fff;
    padding: 10px 18px; border-radius: 24px; font-size: 14px;
    opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none; max-width: 80vw; text-align: center;
}
.reel-menu-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

body.reel-menu-open { overflow: hidden; }